From 1a10599a99048135acc80aa07a4a9cc640ddd96c Mon Sep 17 00:00:00 2001 From: Pedro Bini Date: Wed, 15 Jul 2020 16:36:23 -0300 Subject: [PATCH 01/14] Fix typos --- example/src/App.jsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/example/src/App.jsx b/example/src/App.jsx index c312614..18efe2d 100644 --- a/example/src/App.jsx +++ b/example/src/App.jsx @@ -65,8 +65,8 @@ const schema = createSchema({ .label('Accepted terms'), // You can control single choice fields using Form Groups - favouriteFood: yup.string() - .label('Favourite Food'), + favoriteFood: yup.string() + .label('Favorite Food'), // And even multi-level nested fields! authentication: yup.object().shape({ @@ -90,7 +90,7 @@ const App = () => { setSubmissionResult(`Form validation errors! \n ${JSON.stringify(errors, null, 2)}`); }; - // Here we'll handle submiting the form + // Here we'll handle submitting the form const handleSubmitForm = (values) => { setSubmissionResult(`Form is valid! \n ${JSON.stringify(values, null, 2)}`); @@ -298,9 +298,9 @@ const App = () => { to set the initial checked items? - + - What's favourite food? You can pick as many as you want! + What's favorite food? You can pick as many as you want! { - Here's your fancy form value in a beaultiful real-time JSON string. + Here's your fancy form value in a beautiful real-time JSON string. Date: Wed, 15 Jul 2020 16:44:21 -0300 Subject: [PATCH 02/14] Fix typos, add docs --- packages/core/src/components/FormInput/FormInput.tsx | 2 +- .../src/components/FormInputGroupItem/FormInputGroupItem.tsx | 2 +- packages/core/src/yup/createSchema.ts | 5 +++++ 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/FormInput/FormInput.tsx b/packages/core/src/components/FormInput/FormInput.tsx index 969a8a2..d1489f4 100644 --- a/packages/core/src/components/FormInput/FormInput.tsx +++ b/packages/core/src/components/FormInput/FormInput.tsx @@ -68,7 +68,7 @@ export interface FormInputProps extends React.Props { /** * Input that auto-validates itself within the form. * - * Can be ovewritten with the "component" prop, + * Can be overwritten with the "component" prop, * allowing you to render any type of component * while still maintaining all validation functionality. * diff --git a/packages/core/src/components/FormInputGroupItem/FormInputGroupItem.tsx b/packages/core/src/components/FormInputGroupItem/FormInputGroupItem.tsx index f37a229..7c78ef7 100644 --- a/packages/core/src/components/FormInputGroupItem/FormInputGroupItem.tsx +++ b/packages/core/src/components/FormInputGroupItem/FormInputGroupItem.tsx @@ -31,7 +31,7 @@ export interface FormInputGroupItemProps extends React.Props { * You need to pass in "value" (value of this distinct input) * in order to correctly render and use this component. * - * Can be ovewritten with the "component" prop, + * Can be overwritten with the "component" prop, * allowing you to render any type of component * while still maintaining all validation functionality. * @param param0 Options. diff --git a/packages/core/src/yup/createSchema.ts b/packages/core/src/yup/createSchema.ts index 02420f3..6b3cfe5 100644 --- a/packages/core/src/yup/createSchema.ts +++ b/packages/core/src/yup/createSchema.ts @@ -1,5 +1,10 @@ import * as yup from 'yup'; +/** + * Creates a new yup schema. + * @param payload Schema payload + * @param locale Schema locale + */ const createSchema = ( payload: yup.ObjectSchemaDefinition, locale?: yup.LocaleObject, From 34dce82c32a980ac16fcd648261f46c270231653 Mon Sep 17 00:00:00 2001 From: Pedro Bini Date: Wed, 15 Jul 2020 16:59:08 -0300 Subject: [PATCH 03/14] Add getInputLabel util --- packages/core/src/utils/getInputLabel.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 packages/core/src/utils/getInputLabel.ts diff --git a/packages/core/src/utils/getInputLabel.ts b/packages/core/src/utils/getInputLabel.ts new file mode 100644 index 0000000..d4d9bff --- /dev/null +++ b/packages/core/src/utils/getInputLabel.ts @@ -0,0 +1,17 @@ +import { FormupYupSchema } from '../interfaces'; + +/** + * If defined, extracts the field label from the schema. + * @param name The field name + * @param schema The schema + */ +const getInputLabel = ( + name: string, + schema: FormupYupSchema, +) => { + const schemaField = schema?.fields?.[name]; + + return schemaField?.['_label']; +}; + +export default getInputLabel; From d0efb8727592972036365b961ab7d1ad24e5701d Mon Sep 17 00:00:00 2001 From: Pedro Bini Date: Wed, 15 Jul 2020 17:01:34 -0300 Subject: [PATCH 04/14] Inherit label from schema in FormInput --- .../src/components/FormInput/FormInput.tsx | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/packages/core/src/components/FormInput/FormInput.tsx b/packages/core/src/components/FormInput/FormInput.tsx index d1489f4..ff79475 100644 --- a/packages/core/src/components/FormInput/FormInput.tsx +++ b/packages/core/src/components/FormInput/FormInput.tsx @@ -9,6 +9,7 @@ import checkFormInputError from '../../utils/checkFormInputError'; import { ExtendedFormupFormInputData } from '../../interfaces'; import composeInputEvent from '../../utils/composeInputEvent'; import extractEventValue from '../../utils/extractEventValue'; +import getInputLabel from '../../utils/getInputLabel'; export interface FormInputComponentProps extends React.Props { /** @@ -23,6 +24,12 @@ export interface FormInputComponentProps extends React.Props { */ error: boolean; + /** + * Input's label, inherited from the schema definition, or from + * FormInput's "label" property. + */ + label: string; + /** * This is an object that contains Formup extended information, such * as the validation error message for this input (if any). @@ -47,7 +54,15 @@ export interface FormInputProps extends React.Props { onBlur?: (arg0: React.FormEvent) => void; onChange?: (arg0: React.FormEvent) => void; onKeyPress?: (arg0: React.FormEvent) => void; - className?: any, + className?: any; + + /** + * Component label. + * + * Will be automatically inherited from the schema (if defined on the field), + * but you can still override it by passing this property to FormInput. + */ + label?: string; /** * Defines if the "formupData" prop will be injected into the @@ -85,6 +100,7 @@ const FormInput = ({ children, onChange, onBlur, + label, name, ...props }: FormInputProps) => { @@ -103,9 +119,12 @@ const FormInput = ({ const formInputError = checkFormInputError(formInputMeta); + const inputLabel = label ?? getInputLabel(name, form?.schema); + const inputProps = { ...props, ...formInputProps, + label: inputLabel, id: props?.id || name, onChange: (event: any) => { const newValue = extractEventValue(event); From a0f41983f9541742ff6aea29d60efce1a156fd66 Mon Sep 17 00:00:00 2001 From: Pedro Bini Date: Wed, 15 Jul 2020 17:03:39 -0300 Subject: [PATCH 05/14] Extract FormInput interfaces --- .../src/components/FormInput/FormInput.tsx | 71 +---------------- packages/core/src/interfaces/index.ts | 76 ++++++++++++++++++- 2 files changed, 76 insertions(+), 71 deletions(-) diff --git a/packages/core/src/components/FormInput/FormInput.tsx b/packages/core/src/components/FormInput/FormInput.tsx index ff79475..edb4756 100644 --- a/packages/core/src/components/FormInput/FormInput.tsx +++ b/packages/core/src/components/FormInput/FormInput.tsx @@ -4,82 +4,13 @@ import invariant from 'invariant'; import { FORMUP_INPUT_CLASS_NAME, FORMUP_INPUT_DANGER_CLASS_NAME } from '../../constants/identifiers'; import DefaultInputComponent from '../DefaultInputComponents/DefaultInputComponent'; +import { ExtendedFormupFormInputData, FormInputProps } from '../../interfaces'; import { useFormContext } from '../../contexts/FormContext/FormContext'; import checkFormInputError from '../../utils/checkFormInputError'; -import { ExtendedFormupFormInputData } from '../../interfaces'; import composeInputEvent from '../../utils/composeInputEvent'; import extractEventValue from '../../utils/extractEventValue'; import getInputLabel from '../../utils/getInputLabel'; -export interface FormInputComponentProps extends React.Props { - /** - * Boolean indicating if the component has validation errors. - * - * This is injected by default to maintain compatibility with the - * major React libraries such as Material UI, React Bootstrap, etc. - * - * Thanks to this formup will be compatible out-of-the box with those - * dependencies, making the invalid inputs automatically styled, with - * red borders around it and such. - */ - error: boolean; - - /** - * Input's label, inherited from the schema definition, or from - * FormInput's "label" property. - */ - label: string; - - /** - * This is an object that contains Formup extended information, such - * as the validation error message for this input (if any). - * - * Due to compatibility issues, this will only be injected if the prop - * "injectFormupData" is defined as true in component. - * - * Remember that this shouldn't be injected into the final - * component, in order to avoid React errors. - */ - formupData?: ExtendedFormupFormInputData; -} - -export interface FormInputProps extends React.Props { - component: React.ElementType; - name: string; - id?: string; - type?: string; - value?: any; - defaultValue?: any; - children?: React.ReactChild; - onBlur?: (arg0: React.FormEvent) => void; - onChange?: (arg0: React.FormEvent) => void; - onKeyPress?: (arg0: React.FormEvent) => void; - className?: any; - - /** - * Component label. - * - * Will be automatically inherited from the schema (if defined on the field), - * but you can still override it by passing this property to FormInput. - */ - label?: string; - - /** - * Defines if the "formupData" prop will be injected into the - * component that is being rendered (default by formup), - * or the component passed into "component" prop on FormInput. - * - * This is false by default in order to avoid compatibility issues, - * since when true the component will have to deal with "formupData" - * in order to avoid injecting it into the final component. - * - * If "formupData" is injected into the final component, - * React will throw an error in the console saying that "formupData" - * is not a valid property for . Refer to the docs for more information. - */ - injectFormupData: boolean; -} - /** * Input that auto-validates itself within the form. * diff --git a/packages/core/src/interfaces/index.ts b/packages/core/src/interfaces/index.ts index 3715d8c..db4ed4b 100644 --- a/packages/core/src/interfaces/index.ts +++ b/packages/core/src/interfaces/index.ts @@ -9,7 +9,6 @@ import { import { FormInputGroupItemProps } from '../components/FormInputGroupItem/FormInputGroupItem'; import { FormInputGroupProps } from '../components/FormInputGroup/FormInputGroup'; -import { FormInputProps } from '../components/FormInput/FormInput'; import { FormProps } from '../components/Form/Form'; /** @@ -55,6 +54,81 @@ export interface ValidateFormResult extends yup.ValidateOptions { error?: FormupValidationError | undefined; } +/** + * Interface to define component properties inherited by FormInput's component. + */ +export interface FormInputComponentProps extends React.Props { + /** + * Boolean indicating if the component has validation errors. + * + * This is injected by default to maintain compatibility with the + * major React libraries such as Material UI, React Bootstrap, etc. + * + * Thanks to this formup will be compatible out-of-the box with those + * dependencies, making the invalid inputs automatically styled, with + * red borders around it and such. + */ + error: boolean; + + /** + * Input's label, inherited from the schema definition, or from + * FormInput's "label" property. + */ + label: string; + + /** + * This is an object that contains Formup extended information, such + * as the validation error message for this input (if any). + * + * Due to compatibility issues, this will only be injected if the prop + * "injectFormupData" is defined as true in component. + * + * Remember that this shouldn't be injected into the final + * component, in order to avoid React errors. + */ + formupData?: ExtendedFormupFormInputData; +} + +/** + * Interface to define FormInput component properties. + */ +export interface FormInputProps extends React.Props { + component: React.ElementType; + name: string; + id?: string; + type?: string; + value?: any; + defaultValue?: any; + children?: React.ReactChild; + onBlur?: (arg0: React.FormEvent) => void; + onChange?: (arg0: React.FormEvent) => void; + onKeyPress?: (arg0: React.FormEvent) => void; + className?: any; + + /** + * Component label. + * + * Will be automatically inherited from the schema (if defined on the field), + * but you can still override it by passing this property to FormInput. + */ + label?: string; + + /** + * Defines if the "formupData" prop will be injected into the + * component that is being rendered (default by formup), + * or the component passed into "component" prop on FormInput. + * + * This is false by default in order to avoid compatibility issues, + * since when true the component will have to deal with "formupData" + * in order to avoid injecting it into the final component. + * + * If "formupData" is injected into the final component, + * React will throw an error in the console saying that "formupData" + * is not a valid property for . Refer to the docs for more information. + */ + injectFormupData: boolean; +} + /** * Options for useFormup. */ From af8017993ec0a84ca2ddf6bd901c06edb0b47246 Mon Sep 17 00:00:00 2001 From: Pedro Bini Date: Wed, 15 Jul 2020 17:07:16 -0300 Subject: [PATCH 06/14] Inject aria-label property into input --- packages/core/src/components/FormInput/FormInput.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/core/src/components/FormInput/FormInput.tsx b/packages/core/src/components/FormInput/FormInput.tsx index edb4756..1f01fd5 100644 --- a/packages/core/src/components/FormInput/FormInput.tsx +++ b/packages/core/src/components/FormInput/FormInput.tsx @@ -56,6 +56,7 @@ const FormInput = ({ ...props, ...formInputProps, label: inputLabel, + 'aria-label': inputLabel, id: props?.id || name, onChange: (event: any) => { const newValue = extractEventValue(event); From 93ddfee44342ad004f5548df1fb0bd4e2351c8e7 Mon Sep 17 00:00:00 2001 From: Pedro Bini Date: Wed, 15 Jul 2020 17:14:37 -0300 Subject: [PATCH 07/14] Improve semantics --- packages/core/src/components/FormInput/FormInput.tsx | 4 ++-- .../core/src/utils/{getInputLabel.ts => getFieldLabel.ts} | 4 ++-- packages/core/src/utils/isFieldRequired.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) rename packages/core/src/utils/{getInputLabel.ts => getFieldLabel.ts} (85%) diff --git a/packages/core/src/components/FormInput/FormInput.tsx b/packages/core/src/components/FormInput/FormInput.tsx index 1f01fd5..5c96846 100644 --- a/packages/core/src/components/FormInput/FormInput.tsx +++ b/packages/core/src/components/FormInput/FormInput.tsx @@ -9,7 +9,7 @@ import { useFormContext } from '../../contexts/FormContext/FormContext'; import checkFormInputError from '../../utils/checkFormInputError'; import composeInputEvent from '../../utils/composeInputEvent'; import extractEventValue from '../../utils/extractEventValue'; -import getInputLabel from '../../utils/getInputLabel'; +import getFieldLabel from '../../utils/getFieldLabel'; /** * Input that auto-validates itself within the form. @@ -50,7 +50,7 @@ const FormInput = ({ const formInputError = checkFormInputError(formInputMeta); - const inputLabel = label ?? getInputLabel(name, form?.schema); + const inputLabel = label ?? getFieldLabel(name, form?.schema); const inputProps = { ...props, diff --git a/packages/core/src/utils/getInputLabel.ts b/packages/core/src/utils/getFieldLabel.ts similarity index 85% rename from packages/core/src/utils/getInputLabel.ts rename to packages/core/src/utils/getFieldLabel.ts index d4d9bff..e9987a6 100644 --- a/packages/core/src/utils/getInputLabel.ts +++ b/packages/core/src/utils/getFieldLabel.ts @@ -5,7 +5,7 @@ import { FormupYupSchema } from '../interfaces'; * @param name The field name * @param schema The schema */ -const getInputLabel = ( +const getFieldLabel = ( name: string, schema: FormupYupSchema, ) => { @@ -14,4 +14,4 @@ const getInputLabel = ( return schemaField?.['_label']; }; -export default getInputLabel; +export default getFieldLabel; diff --git a/packages/core/src/utils/isFieldRequired.ts b/packages/core/src/utils/isFieldRequired.ts index c33ba78..9b334ba 100644 --- a/packages/core/src/utils/isFieldRequired.ts +++ b/packages/core/src/utils/isFieldRequired.ts @@ -5,9 +5,9 @@ import { FormupYupSchema } from '../interfaces'; * @param schema Yup schema */ const isFieldRequired = (name: string, schema: FormupYupSchema) => { - const field = schema && schema?.fields[name]; + const schemaField = schema?.fields?.[name]; - return field?._exclusive?.required || false; + return schemaField?._exclusive?.required || false; }; export default isFieldRequired; From 0c8f262e50ae1c2f3a77cb0b63260f8d19a86661 Mon Sep 17 00:00:00 2001 From: Pedro Bini Date: Wed, 15 Jul 2020 17:17:05 -0300 Subject: [PATCH 08/14] Extract getSchemaField function --- packages/core/src/utils/getFieldLabel.ts | 3 ++- packages/core/src/utils/getSchemaField.ts | 17 +++++++++++++++++ packages/core/src/utils/isFieldRequired.ts | 8 ++++++-- 3 files changed, 25 insertions(+), 3 deletions(-) create mode 100644 packages/core/src/utils/getSchemaField.ts diff --git a/packages/core/src/utils/getFieldLabel.ts b/packages/core/src/utils/getFieldLabel.ts index e9987a6..4185cc2 100644 --- a/packages/core/src/utils/getFieldLabel.ts +++ b/packages/core/src/utils/getFieldLabel.ts @@ -1,4 +1,5 @@ import { FormupYupSchema } from '../interfaces'; +import getSchemaField from './getSchemaField'; /** * If defined, extracts the field label from the schema. @@ -9,7 +10,7 @@ const getFieldLabel = ( name: string, schema: FormupYupSchema, ) => { - const schemaField = schema?.fields?.[name]; + const schemaField = getSchemaField(name, schema); return schemaField?.['_label']; }; diff --git a/packages/core/src/utils/getSchemaField.ts b/packages/core/src/utils/getSchemaField.ts new file mode 100644 index 0000000..d416a22 --- /dev/null +++ b/packages/core/src/utils/getSchemaField.ts @@ -0,0 +1,17 @@ +import { FormupYupSchema } from '../interfaces'; + +/** + * Recursively gets one schema field according to its name. + * @param name The field name + * @param schema The schema + */ +const getSchemaField = ( + name: string, + schema: FormupYupSchema, +) => { + const schemaField = schema?.fields?.[name]; + + return schemaField; +}; + +export default getSchemaField; diff --git a/packages/core/src/utils/isFieldRequired.ts b/packages/core/src/utils/isFieldRequired.ts index 9b334ba..d32c3c6 100644 --- a/packages/core/src/utils/isFieldRequired.ts +++ b/packages/core/src/utils/isFieldRequired.ts @@ -1,11 +1,15 @@ import { FormupYupSchema } from '../interfaces'; +import getSchemaField from './getSchemaField'; /** * Checks if one field is required in the schema. * @param schema Yup schema */ -const isFieldRequired = (name: string, schema: FormupYupSchema) => { - const schemaField = schema?.fields?.[name]; +const isFieldRequired = ( + name: string, + schema: FormupYupSchema, +) => { + const schemaField = getSchemaField(name, schema); return schemaField?._exclusive?.required || false; }; From 31868a20cf9027cd5f03fce11ebda27cb6e3a1db Mon Sep 17 00:00:00 2001 From: Pedro Bini Date: Wed, 15 Jul 2020 17:23:29 -0300 Subject: [PATCH 09/14] Add lodash.get dependency --- packages/core/package.json | 2 ++ packages/core/yarn.lock | 17 +++++++++++++++++ 2 files changed, 19 insertions(+) diff --git a/packages/core/package.json b/packages/core/package.json index 47be7f7..32b60c1 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -26,6 +26,7 @@ "formik": "2.1.3", "immutability-helper": "^3.0.2", "invariant": "^2.2.4", + "lodash.get": "^4.4.2", "merge": "^1.2.1", "scheduler": "^0.18.0", "yup": "0.28.1" @@ -40,6 +41,7 @@ "@types/classnames": "^2.2.9", "@types/invariant": "^2.2.33", "@types/jest": "^23.1.5", + "@types/lodash.get": "^4.4.6", "@types/react": "^16.9.19", "@types/react-dom": "^16.0.5", "@types/yup": "^0.26.29", diff --git a/packages/core/yarn.lock b/packages/core/yarn.lock index b10ff52..747e885 100644 --- a/packages/core/yarn.lock +++ b/packages/core/yarn.lock @@ -849,6 +849,18 @@ resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4= +"@types/lodash.get@^4.4.6": + version "4.4.6" + resolved "https://registry.yarnpkg.com/@types/lodash.get/-/lodash.get-4.4.6.tgz#0c7ac56243dae0f9f09ab6f75b29471e2e777240" + integrity sha512-E6zzjR3GtNig8UJG/yodBeJeIOtgPkMgsLjDU3CbgCAPC++vJ0eCMnJhVpRZb/ENqEFlov1+3K9TKtY4UdWKtQ== + dependencies: + "@types/lodash" "*" + +"@types/lodash@*": + version "4.14.157" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.157.tgz#fdac1c52448861dfde1a2e1515dbc46e54926dc8" + integrity sha512-Ft5BNFmv2pHDgxV5JDsndOWTRJ+56zte0ZpYLowp03tW+K+t8u8YMOzAnpuqPgzX6WO1XpDIUm7u04M8vdDiVQ== + "@types/node@*": version "13.7.0" resolved "https://registry.yarnpkg.com/@types/node/-/node-13.7.0.tgz#b417deda18cf8400f278733499ad5547ed1abec4" @@ -6792,6 +6804,11 @@ lodash.endswith@^4.2.1: resolved "https://registry.yarnpkg.com/lodash.endswith/-/lodash.endswith-4.2.1.tgz#fed59ac1738ed3e236edd7064ec456448b37bc09" integrity sha1-/tWawXOO0+I27dcGTsRWRIs3vAk= +lodash.get@^4.4.2: + version "4.4.2" + resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99" + integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk= + lodash.isfunction@^3.0.8: version "3.0.9" resolved "https://registry.yarnpkg.com/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz#06de25df4db327ac931981d1bdb067e5af68d051" From 648aaed490dae4de772fd6b579eab6cb5c8b554e Mon Sep 17 00:00:00 2001 From: Pedro Bini Date: Wed, 15 Jul 2020 17:23:42 -0300 Subject: [PATCH 10/14] Handle nested fields in getSchemaField --- packages/core/src/utils/getSchemaField.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/core/src/utils/getSchemaField.ts b/packages/core/src/utils/getSchemaField.ts index d416a22..7aa50ef 100644 --- a/packages/core/src/utils/getSchemaField.ts +++ b/packages/core/src/utils/getSchemaField.ts @@ -1,3 +1,5 @@ +import get from 'lodash.get'; + import { FormupYupSchema } from '../interfaces'; /** @@ -9,7 +11,11 @@ const getSchemaField = ( name: string, schema: FormupYupSchema, ) => { - const schemaField = schema?.fields?.[name]; + const fieldPath = String(name || '') + .split('.') + .reduce((prev, curr) => `${prev}.fields.${curr}`); + + const schemaField = get(schema?.fields || {}, fieldPath); return schemaField; }; From 0bc3e2f7d98bab2d80613c610c1ef14ccbf80cef Mon Sep 17 00:00:00 2001 From: Pedro Bini Date: Wed, 15 Jul 2020 17:23:59 -0300 Subject: [PATCH 11/14] Remove unnecessary labels from example --- example/src/App.jsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/example/src/App.jsx b/example/src/App.jsx index 18efe2d..9aea455 100644 --- a/example/src/App.jsx +++ b/example/src/App.jsx @@ -142,7 +142,7 @@ const App = () => { Simply provide the name prop to link with your schema field. - + ✅ @@ -216,7 +216,6 @@ const App = () => { @@ -224,7 +223,6 @@ const App = () => { From de430a701ee9eacce4f56fbe510f270f1c018cf2 Mon Sep 17 00:00:00 2001 From: Pedro Bini Date: Wed, 15 Jul 2020 17:26:28 -0300 Subject: [PATCH 12/14] Improce docs --- README.md | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 4c1c537..3cb18a1 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Formup integrates Formik with Yup, reducing the code overhead needed to create y It provides the best of both worlds for all of your forms so you can create, initialize and validate any form in only a few lines of code 📝💯. -Of course, you'll still have all validation options and functionality from Yup and all helpers from Formik. Formup is essentialy a bridge between these two libraries so that you can work easily without worrying about writing any middleware. +Of course, you'll still have all validation options and functionality from Yup and all helpers from Formik. Formup is essentially a bridge between these two libraries so that you can work easily without worrying about writing any middleware. ## Online Example @@ -90,13 +90,17 @@ const MyComponent = () => { return (
{/* - FormInput will take care of all validation! - Simply provide the "name" prop. + FormInput will take care of all validation and property mapping! + + Properties such as "label" will be automatically inherited from your + schema, but you can override them by passing the prop to FormInput. + + You simply need to provide the "name" prop. */} - - - + + +