{"_id":"@capcar/final-form-generator","_rev":"1-eea636d269e6d1daefa376206c602dae","name":"@capcar/final-form-generator","dist-tags":{"latest":"1.1.2"},"versions":{"1.1.1":{"name":"@capcar/final-form-generator","version":"1.1.1","description":"tool used to build form with react final form","homepage":"https://github.com/Kyump/tools/tree/master/packages/final-form-generator","main":"dist/final-form-generator.cjs.js","jsnext:main":"dist/final-form-generator.es.js","module":"dist/final-form-generator.es.js","scripts":{"build":"nps build","clean":"nps clean","clean-all":"nps clean.all","watch":"nps watch"},"keywords":["final-form","react-final-form","yup","react","hook","tool"],"dependencies":{"lodash.topath":"^4.5.2"},"peerDependencies":{"final-form":"^4.13.0","final-form-calculate":"^1.3.1","react":"^16.8.6","react-final-form":"^6.0.0","yup":"^0.28.0"},"devDependencies":{"final-form":"^4.19.1","final-form-calculate":"^1.3.1","react":"^16.13.1","react-dom":"^16.13.1","react-final-form":"^6.4.0","yup":"^0.29.0"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/Kyump/tools.git"},"author":{"name":"Guillaume Bastianelli"},"license":"MIT","gitHead":"fe9bb099602461b58441fb7f02996196faeed9e4","bugs":{"url":"https://github.com/Kyump/tools/issues"},"_id":"@capcar/final-form-generator@1.1.1","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-uKS2UvUncQzGM+E4ecxoG4bJhdffEaB5NoxSWNlJsR8yP6126e4gaJpCqZw9/lvk29eX65kKHNkuqp39wF2IWQ==","shasum":"1ec16c58ab1a961871c3c14f810b5d2dc4914814","tarball":"https://registry.npmjs.org/@capcar/final-form-generator/-/final-form-generator-1.1.1.tgz","fileCount":8,"unpackedSize":130689,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICu8CFW+yB1aMXgltY57w9l+05NYRPSCi7n9pq2spRVwAiA5NWab8RiANyPMSwadtKZ2xGxG1DuY1qtA33X3iCOl+Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjA4WrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXkQ//bSoM5NiXnWOiP0Ned25ZsdRHFn5fnXC1Qr0rrsUsNxPjn7KQ\r\nlngtX7MtedrQI4+0LTFSW7HqdDYLkZplTjhjQuTJouW9EcJ4/24hBSW1hEcY\r\ngSF8gKilXuK6nXYp4z9wDqph6dUoPHsYL1zpUyL9B4DJGTIiQpo3fvQ/xccj\r\nta1Ay2dHgtqi8oaIb8PDZ+0uWlDLD8R6e6FXLagIC8PfiM7m0OMSWrnwcUsQ\r\ndcy1Vw1xBn9/cGkexhw8EnTd9rlokSVOeEizEMjhtzjY5C3leDLlSuFlXj1H\r\n3L3TZJEcLj4gbIAGPOIHT23v72zSP9Ookjai0nu5h07eljaKQNpwScKzZ237\r\nyKN2Fr0aPv8QlcBWrSO4Ss4hcf1iqbKdcPLuy+84ZErGKWmaL+11qnBYbVty\r\n7VflHcB/pBEwFxq+h6RN7/pX/1i2gkosfaE7walNXuXQArLGEVSSNz9qWopi\r\nX9NtNTZuPyULcIaIpmW7LeK/XfOHuD5OvWLSTEOiaFvf7riA8ZyvuBtHT1Ev\r\nmkqkaCJKKt5aKEaebZgXU9MV4MxbWmf1YYB0vmYKxUkC44d0xigtFEb0czVI\r\nFr5T13sp/Hb8r+jC40YYK93hRvqgLxsayG9gkj2lu4Cvq21PRtRHjNVAA2Se\r\nWwK8uMPeNagUR8mHbTpnqLDREjLI/pBBqjQ=\r\n=pBKJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"donatien_capcar","email":"d.nambinintsoa@capcar.fr"},"directories":{},"maintainers":[{"name":"fguillotcapcar","email":"f.guillot@capcar.fr"},{"name":"donatien_capcar","email":"d.nambinintsoa@capcar.fr"},{"name":"ronfroy","email":"r.onfroy@capcar.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/final-form-generator_1.1.1_1661175211014_0.13356400308857697"},"_hasShrinkwrap":false},"1.1.2":{"name":"@capcar/final-form-generator","version":"1.1.2","description":"tool used to build form with react final form","homepage":"https://github.com/Kyump/tools/tree/master/packages/final-form-generator","main":"dist/final-form-generator.cjs.js","jsnext:main":"dist/final-form-generator.es.js","module":"dist/final-form-generator.es.js","scripts":{"build":"nps build","clean":"nps clean","clean-all":"nps clean.all","watch":"nps watch"},"keywords":["final-form","react-final-form","yup","react","hook","tool"],"dependencies":{"lodash.topath":"^4.5.2"},"peerDependencies":{"final-form":"^4.13.0","final-form-calculate":"^1.3.1","react":"^16.8.6","react-final-form":"^6.0.0","yup":"^0.29.0"},"devDependencies":{"final-form":"^4.19.1","final-form-calculate":"^1.3.1","react":"^16.13.1","react-dom":"^16.13.1","react-final-form":"^6.4.0","yup":"^0.29.0"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/Kyump/tools.git"},"author":{"name":"Guillaume Bastianelli"},"license":"MIT","gitHead":"fe9bb099602461b58441fb7f02996196faeed9e4","bugs":{"url":"https://github.com/Kyump/tools/issues"},"_id":"@capcar/final-form-generator@1.1.2","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-IksbHvty9pfYCCdsju10oGFYCDhK67Z1cS8RfCPWCrJPOp8emKaqFLBWBYIQQtrSjBz7Z7H7N9XGpMRagN8Rvg==","shasum":"0099c62c8e4d9942829ed2804f6f638bf00a8397","tarball":"https://registry.npmjs.org/@capcar/final-form-generator/-/final-form-generator-1.1.2.tgz","fileCount":8,"unpackedSize":130271,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF99To48tlVZ4us5FDaqkjVIoRjlrFvqSOJtfIUgDnfAAiEA3k267Dy+Lg7FotauWqs72c/QEFlDCfo4pKbHoGa6j5s="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJEmUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEmg/9FB1p8DxnzWEueBHFCwyTi8rlcB6DXtjk2C41rMLwRMEaBiY4\r\nnzjvrbKdx8+f6XSBHTqOLxlU5Kv5B+0IjqJbuFuB/AxiXBUlQ19i/ccoTw8R\r\nfFZv/sop82I5P+pL4MMCZEwfayRek3pTA92KdZMDnTjx9Ff68Q3b9F8rSIsr\r\n7EuUaM7voZbJ5XhyGERILQV6JqrwzjBVzmGpIoziupPD9zqeooE2zt0icL1V\r\nZss/EfNfhFdEMXJXDjQwJYeezSs46F/tCQLzK+EFSNsGymycNDT7aUT2Be4V\r\nJfH/0+JVHfh1LC38UcMW3jUUwRk8NnV0HyFHsFuAUZoRAODt9frgD9GKZ9sR\r\nvESYrDCTOb+TvSVQDK71xpu/dP2GnX9+1HE/T4+Xf8XjnqBLj3PoxFWtwmEs\r\npLTHWSE/+uFqtriSydMp4mjc+MoJJ1xOeETGNTKzqaIcvnJRqawZxZu0Mf60\r\nPzkXSfnCDvLkWAo+yZIhppcdAXyJOJ7H3sBfkuLPVVCgATpmIIG4KJecBPI0\r\nHcE35nQGWppvqnkrowYh6umt3TaNiSFH/R6jvFW0515SqUTMlvjKmuW5yjuV\r\nxXUu1EOq7G/z7jFjf7cp9KGAPQffEUuZTqhnBEukCMNc8IstWis5vWBFk0Lp\r\nmSt0HQ0JFdhkGElXs/OwsP06O/bwsopjVr4=\r\n=MM5z\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"fguillotcapcar","email":"f.guillot@capcar.fr"},"directories":{},"maintainers":[{"name":"fguillotcapcar","email":"f.guillot@capcar.fr"},{"name":"donatien_capcar","email":"d.nambinintsoa@capcar.fr"},{"name":"ronfroy","email":"r.onfroy@capcar.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/final-form-generator_1.1.2_1663322516064_0.6420946874169824"},"_hasShrinkwrap":false}},"time":{"created":"2022-08-22T13:33:30.965Z","1.1.1":"2022-08-22T13:33:31.186Z","modified":"2022-09-16T10:01:56.280Z","1.1.2":"2022-09-16T10:01:56.196Z"},"maintainers":[{"name":"fguillotcapcar","email":"f.guillot@capcar.fr"},{"name":"donatien_capcar","email":"d.nambinintsoa@capcar.fr"},{"name":"ronfroy","email":"r.onfroy@capcar.fr"}],"description":"tool used to build form with react final form","homepage":"https://github.com/Kyump/tools/tree/master/packages/final-form-generator","keywords":["final-form","react-final-form","yup","react","hook","tool"],"repository":{"type":"git","url":"git+https://github.com/Kyump/tools.git"},"author":{"name":"Guillaume Bastianelli"},"bugs":{"url":"https://github.com/Kyump/tools/issues"},"license":"MIT","readme":"# Final Form Generator\n\nFinal Form Generator is a simple [hook](https://reactjs.org/docs/hooks-intro.html) for computing props for [react-final-form](https://github.com/final-form/react-final-form) component.\n\n## Installation\n\nYou need some depedencies in order to use this hook:\n\n- [final-form](https://github.com/final-form/final-form)\n- [final-form-calculate](https://github.com/final-form/final-form-calculate)\n- [react-final-form](https://github.com/final-form/react-final-form)\n- [yup](https://github.com/jquense/yup)\n\nThen you can run:\n\n```bash\nnpm install @capcar/final-form-generator\n```\n\n## Usage\n\n```javascript\nimport React from 'react';\nimport * as Yup from 'yup';\nimport {Form, Field} from 'react-final-form';\nimport useFormGenerator from '@capcar/final-form-generator';\n\nconst fields = [\n\t{\n\t\ttype: 'text',\n\t\tname: 'text',\n\t\tlabel: 'text',\n\t},\n\t{\n\t\ttype: 'email',\n\t\tname: 'email',\n\t\tlabel: 'email',\n\t},\n];\n\nconst renderInput = ({field, children = [], index}) => {\n\tswitch (field.type) {\n\t\tcase 'email':\n\t\t\treturn (\n\t\t\t\t<Field\n\t\t\t\t\tkey={index}\n\t\t\t\t\tname={field.name}\n\t\t\t\t\tcomponent=\"input\"\n\t\t\t\t\ttype=\"email\"\n\t\t\t\t\tplaceholder={field.label}\n\t\t\t\t/>\n\t\t\t);\n\t\tcase 'text':\n\t\t\treturn (\n\t\t\t\t<Field\n\t\t\t\t\tkey={index}\n\t\t\t\t\tname={field.name}\n\t\t\t\t\tcomponent=\"input\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tplaceholder={field.label}\n\t\t\t\t/>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn <span key={key}>{`${field.type} not handled`}</span>;\n\t}\n};\n\nexport const defaultValidation = (type?: string) => {\n\tswitch (type) {\n\t\tcase 'email':\n\t\t\treturn Yup.string().email().required();\n\t\tdefault:\n\t\t\treturn Yup.string().trim().required();\n\t}\n};\n\nconst ExampleForm = () => {\n\tconst {dom, validate, decorators, loading} = useFormGenerator({\n\t\tdefaultValidation,\n\t\tfields,\n\t\trenderInput,\n\t});\n\treturn loading ? (\n\t\t'Loading'\n\t) : (\n\t\t<Form\n\t\t\tdecorators={decorators}\n\t\t\tonSubmit={values => alert(values)}\n\t\t\tvalidate={validate}\n\t\t\trender={({\n\t\t\t\thandleSubmit,\n\t\t\t\tform,\n\t\t\t\tsubmitting,\n\t\t\t\tpristine,\n\t\t\t\tinvalid,\n\t\t\t\tvalues,\n\t\t\t\terrors,\n\t\t\t}) => (\n\t\t\t\t<form onSubmit={handleSubmit}>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{dom}\n\t\t\t\t\t\t<button type=\"submit\" disabled={invalid || submitting || pristine}>\n\t\t\t\t\t\t\tSubmit\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<pre>{JSON.stringify(values, 0, 2)}</pre>\n\t\t\t\t\t<pre>{JSON.stringify(errors, 0, 2)}</pre>\n\t\t\t\t</form>\n\t\t\t)}\n\t\t/>\n\t);\n};\n\nexport default ExampleForm;\n```\n\n## API\n\n[UseFinalFormGeneratorProps](src/types.js#L37-L46) :\n\n- defaultValidation (**required**): Function the take type of the field and return its default [yup](https://github.com/jquense/yup) validation\n- fields (**required**): Array of [fields](src/types.js#L6-L14)\n- renderInput (**required**): Function used to render elements of the form. It takes an object with 3 props _field_ ([BasicFieldInterface](src/types.js#L6-L14)), its _children_ (?React\\$Node[]) and the index of the field in the fields array\n- customValidationSchema?: Yup base schema is you want to use noSortEdges for example.\n\n```javascript\nconst customValidationSchema = Yup.object().shape({\n\tcustomer: Yup.object().shape({}, ['phone', 'email']),\n});\n```\n\nHere, if you put validation on field email or phone it will be add to this shape.\n\n- preValidate: Function than can be called before yup validation. It has the form values as param and should return an object with error message (`{[string]: string}`)\n\n[UseFinalFormGeneratorResult](src/types.js#L48-L53) :\n\n- decorators: Decorators for decorators props of [react-final-form](https://github.com/final-form/react-final-form) component\n- dom: Inputs of the form (React\\$Node[])\n- validate: Validation function for validate props of [react-final-form](https://github.com/final-form/react-final-form) component\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","readmeFilename":"README.md"}