From a989c0164eda239eaab1d766ded2efcc4c8823c0 Mon Sep 17 00:00:00 2001 From: Stefano Pigozzi Date: Mon, 19 Jul 2021 23:59:53 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20forms?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 43 ++----------------- package.json | 3 +- src/bluelib | 2 +- src/components/Button/index.js | 15 ++++--- src/components/Form/Readme.md | 27 ++++++++++++ src/components/Form/index.js | 33 ++++++++++++++ .../FormElement/FormField/Readme.md | 15 +++++++ src/components/FormElement/FormField/index.js | 23 ++++++++++ .../FormElement/FormLabel/Readme.md | 14 ++++++ src/components/FormElement/FormLabel/index.js | 18 ++++++++ src/components/FormElement/Readme.md | 19 ++++++++ src/components/FormElement/index.js | 35 +++++++++++++++ src/components/FormSubmit/Readme.md | 17 ++++++++ src/components/FormSubmit/index.js | 19 ++++++++ src/components/InputField/Readme.md | 9 ++++ src/components/InputField/index.js | 42 ++++++++++++++++++ src/components/index.js | 3 ++ src/hooks/useBluelibClassNames.js | 6 +-- 18 files changed, 291 insertions(+), 52 deletions(-) create mode 100644 src/components/Form/Readme.md create mode 100644 src/components/Form/index.js create mode 100644 src/components/FormElement/FormField/Readme.md create mode 100644 src/components/FormElement/FormField/index.js create mode 100644 src/components/FormElement/FormLabel/Readme.md create mode 100644 src/components/FormElement/FormLabel/index.js create mode 100644 src/components/FormElement/Readme.md create mode 100644 src/components/FormElement/index.js create mode 100644 src/components/FormSubmit/Readme.md create mode 100644 src/components/FormSubmit/index.js create mode 100644 src/components/InputField/Readme.md create mode 100644 src/components/InputField/index.js diff --git a/package-lock.json b/package-lock.json index 83e6036..2b0f3e8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,8 @@ "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "react-syntax-highlighter": "^15.4.3", - "strip-indent": "^3.0.0" + "strip-indent": "^3.0.0", + "uuid": "^3.4.0" }, "devDependencies": { "nwb": "0.25.x", @@ -12560,12 +12561,6 @@ "node": ">=4" } }, - "node_modules/react-docgen/node_modules/commander": { - "version": "2.20.3", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "dev": true - }, "node_modules/react-dom": { "version": "17.0.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz", @@ -12758,12 +12753,6 @@ "react-dom": ">=16.8" } }, - "node_modules/react-styleguidist/node_modules/commander": { - "version": "2.20.3", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "dev": true - }, "node_modules/react-styleguidist/node_modules/copy-webpack-plugin": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-6.4.1.tgz", @@ -14949,12 +14938,6 @@ "node": ">=0.10.0" } }, - "node_modules/terser/node_modules/commander": { - "version": "2.20.3", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "dev": true - }, "node_modules/terser/node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -15652,7 +15635,6 @@ "version": "3.4.0", "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", - "dev": true, "bin": { "uuid": "bin/uuid" } @@ -27650,12 +27632,6 @@ "requires": { "tslib": "^2.0.1" } - }, - "commander": { - "version": "2.20.3", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "dev": true } } }, @@ -27853,12 +27829,6 @@ "webpack-merge": "^4.2.2" }, "dependencies": { - "commander": { - "version": "2.20.3", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "dev": true - }, "copy-webpack-plugin": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-6.4.1.tgz", @@ -29638,12 +29608,6 @@ "source-map-support": "~0.5.12" }, "dependencies": { - "commander": { - "version": "2.20.3", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "dev": true - }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -30336,8 +30300,7 @@ "uuid": { "version": "3.4.0", "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", - "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", - "dev": true + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" }, "value-equal": { "version": "1.0.1", diff --git a/package.json b/package.json index a2953e1..00601b8 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,8 @@ "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "react-syntax-highlighter": "^15.4.3", - "strip-indent": "^3.0.0" + "strip-indent": "^3.0.0", + "uuid": "^3.4.0" }, "peerDependencies": { "react": "^17.0.2" diff --git a/src/bluelib b/src/bluelib index a47f83b..ee8915c 160000 --- a/src/bluelib +++ b/src/bluelib @@ -1 +1 @@ -Subproject commit a47f83b53638e503b0740e6b9a6350ed0c7275be +Subproject commit ee8915c10907275555947ceb54588ed50227c755 diff --git a/src/components/Button/index.js b/src/components/Button/index.js index b34b4ec..a918437 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -3,16 +3,17 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames" import classNames from "classnames" -export default function Button({children, className, disabled, ...props}) { +export default function Button({children, className, disabled, onClick, ...props}) { return ( + ) +} + + +FormSubmit.propTypes = { + children: PropTypes.node, + className: PropTypes.string, +} diff --git a/src/components/InputField/Readme.md b/src/components/InputField/Readme.md new file mode 100644 index 0000000..fd8c2db --- /dev/null +++ b/src/components/InputField/Readme.md @@ -0,0 +1,9 @@ +Makes the text bold (like a `` element), while applying bold styles from the selected bluelib skin. + +```jsx +import Bluelib from "../Bluelib"; + + + To boldly go where no library has gone before! + +``` diff --git a/src/components/InputField/index.js b/src/components/InputField/index.js new file mode 100644 index 0000000..d3820c7 --- /dev/null +++ b/src/components/InputField/index.js @@ -0,0 +1,42 @@ +import React from "react" +import useBluelibClassNames from "../../hooks/useBluelibClassNames" +import PropTypes from "prop-types" + + +export default function InputField( + { + children, + className, + type = "text", + disabled = false, + onChange, + ...props + }) { + return ( + + {children} + + ) +} + + +InputField.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + type: PropTypes.string, + disabled: PropTypes.bool, +} diff --git a/src/components/index.js b/src/components/index.js index ba8d68c..71a27d7 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -25,3 +25,6 @@ export {default as VisualErrorBoundary} from "./VisualErrorBoundary" export {default as VisualLog} from "./VisualLog" export {default as Button} from "./Button" export {default as ButtonToggle} from "./ButtonToggle" +export {default as Form} from "./Form" +export {default as FormElement} from "./FormElement" +export {default as FormSubmit} from "./FormSubmit" diff --git a/src/hooks/useBluelibClassNames.js b/src/hooks/useBluelibClassNames.js index ba75c44..0ad2351 100644 --- a/src/hooks/useBluelibClassNames.js +++ b/src/hooks/useBluelibClassNames.js @@ -18,13 +18,13 @@ export default function useBluelibClassNames(cn, extra) { } if(!bluelibSkin) { - console.warn("bluelibSkin is invalid: ", bluelibSkin) + console.warn("Trying to access .", cn, " of bluelibSkin ", bluelibSkin) return null } - return classNames(bluelibSkin[c]) + return bluelibSkin[c] }); // Return all the class names - return classNames(...cn, extra); + return classNames(cn, extra); }