{"_id":"@attopartners/formal-web","_rev":"4-67f2cd6b0fbcf7b2940205123b163ea8","name":"@attopartners/formal-web","dist-tags":{"latest":"0.1.8"},"versions":{"0.1.5":{"version":"0.1.5","name":"@attopartners/formal-web","author":{"name":"Kevin Wolf","email":"hi@kevinwolf.me"},"description":"Elegant form management primitives for the react hooks era","license":"MIT","homepage":"https://github.com/kevinwolfcr/formal#readme","repository":{"type":"git","url":"git+https://github.com/kevinwolfcr/formal.git"},"bugs":{"url":"https://github.com/kevinwolfcr/formal/issues"},"main":"lib/formal-web.js","types":"lib/formal-web.d.ts","directories":{"lib":"lib","test":"__tests__"},"publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./lib","build":"tsc","test":"echo \"Error: run tests from root\" && exit 1"},"dependencies":{"@kevinwolf/formal":"^0.1.0"},"peerDependencies":{"react":">=16.8","yup":"*"},"devDependencies":{"react":"^16.8.6","react-dom":"^16.8.6","react-hooks-testing-library":"^0.4.0"},"gitHead":"063e2e84e131269eb1dff4b0a4d9d15b47c0d5a5","_id":"@attopartners/formal-web@0.1.5","_nodeVersion":"11.13.0","_npmVersion":"lerna/3.14.1/node@v11.13.0+x64 (darwin)","dist":{"integrity":"sha512-9i+WqU8gQFdDcmusrMo5VD8RnZxpACmw6J58yQVEupP05C2s/isxvevZT0QNt6AddERg2V1PPKarJ3i5rVPVNA==","shasum":"8906294118a7ea36ef6fb615bd9d60277d6954ad","tarball":"https://registry.npmjs.org/@attopartners/formal-web/-/formal-web-0.1.5.tgz","fileCount":4,"unpackedSize":7282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3rewCRA9TVsSAnZWagAAO98P/A8U2VcoFcqb8XVnNOIh\nQlAg9Mn+U0ZnM+OJMGULqVAI233O+QeGAZY7mdosJ/FizWrCegUG760LW1+P\nRhQ9LKasejgriHQURDGZUV3xOZS5UjTxmVs6mvrlITpUWVGpO6UHmkfk7/Q1\n2+8jeNUx9VyZFvic7R61Bhb6Hm5+B1mG9pqzoAI9KaY6bZz4wPjjQNUPA/qZ\nsnojrDH3a+KQi0WFR1Yli10Sm9byYPB7gdiRhFYhDBs8vLHHuSCOcSmAHEnA\nW/p5zYVJbZGG4Jbtb+Xe0O9WxJjHFEUT9IbNU87XbwEjBSEs3Qug3LG7hhIP\n5KTxUSEXy/mVcuKL6k7nCPqg027lWXdzDOZ3cJTGgdTAFax+8QRQ2zT4EMdf\nwveNcwtTB202MEjaPcwHBePKIu6fp6eeiwRXp9ll1Mde05OqnHKzCwKhSVRk\n1bcQRknVTVTnJIo/jbsM9yjqJIQtB2JG0i1TS6u7t5nh14lSG3ePLeLhmBvl\nFiWz86vfrrA84jWao018z8g3f9tx1ykP6vpZViTPgKAQtDuV/cbi/HS+q7bD\nR4X1MygbCSG5IfIUIyXYHR8qGaB7LhIl0F9awXcaBf9i8JWa1ZwDMECBshWN\nUTtPoYm3ZE9ClUp2bpe4i5I4UHYstJKKIXTmLcXQaCMSUucCxYmn5VBnnN0A\n9Rul\r\n=Ih6E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEA5CqJXvRz9NpdV0n9GzYDCaAHc0C3qJODdjdgVku86AiAokXeuXFKlZ0d5ucWTNzxlXYvv6n5lz9pkwsPLKpmzaQ=="}]},"maintainers":[{"name":"attopartners","email":"stuart@attopartners.com"}],"_npmUser":{"name":"attopartners","email":"stuart@attopartners.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/formal-web_0.1.5_1558099888023_0.9496902471515045"},"_hasShrinkwrap":false},"0.1.6":{"version":"0.1.6","name":"@attopartners/formal-web","author":{"name":"Kevin Wolf","email":"hi@kevinwolf.me"},"description":"Elegant form management primitives for the react hooks era","license":"MIT","homepage":"https://github.com/kevinwolfcr/formal#readme","repository":{"type":"git","url":"git+https://github.com/kevinwolfcr/formal.git"},"bugs":{"url":"https://github.com/kevinwolfcr/formal/issues"},"main":"lib/formal-web.js","types":"lib/formal-web.d.ts","directories":{"lib":"lib","test":"__tests__"},"publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./lib","build":"tsc","test":"echo \"Error: run tests from root\" && exit 1"},"dependencies":{"@attopartners/formal":"^0.1.0"},"peerDependencies":{"react":">=16.8","yup":"*"},"devDependencies":{"react":"^16.8.6","react-dom":"^16.8.6","react-hooks-testing-library":"^0.4.0"},"gitHead":"e70ed11551f20fa48f72e79c1c5f8757904f4474","_id":"@attopartners/formal-web@0.1.6","_nodeVersion":"11.13.0","_npmVersion":"lerna/3.14.1/node@v11.13.0+x64 (darwin)","dist":{"integrity":"sha512-eaGTorvtVYK/XfqMR+sdaBZ4Q4TdHeHYD9OnHzMk+t/oAxzKF01GYYK3bR986vhy7mSCQgUH0xf59zc6zW1odg==","shasum":"c1f97f1d3635d091ee7bbd0a95bebe37b614b1d8","tarball":"https://registry.npmjs.org/@attopartners/formal-web/-/formal-web-0.1.6.tgz","fileCount":4,"unpackedSize":7443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3rfICRA9TVsSAnZWagAA5LsP/1XSxLHnmbjV/DOHzo8g\n1ZKxMJ8Z4D2l8DNjWVWzIfIGt8W3WQzdbIoua2Uh31G+eqVUpBn09i7Rs/7W\n6bls7CBuNrCC1GIwpw9/TlaBjnyrsdho8pQ73SpgLcIl25/Ka/76MyOJO++f\nQX0JEhl88taVhLzdVccmZzLWoOZym1GwLjH2jVkTwjO8W6khEj3lCGs0pMkW\nAGZ9PdcOYQmbxzdkkBZYCemt98AdWKwSU3xd4eTtGK5tEu7UOVRR9NAhi+aa\nPcw70mO3UUQNZTh74p6Bwwc72Bsw0zyIZb9vSOWjCZil5xdPx27o1mQSaAzv\nH34HMzbnA9vAaMBN5aCtVGJb9LVXAB1RGvJGo/yn9WASdccPqfu0NXjfiaJr\narSBEFtpTUH2xJQ+Gzo2oRA5GP1RDRN7CLtRNxPf8Tlw+GTIVMYgvTo7s7Zj\n5ujPA/Ww/lXot5cvH4Dk9EeDe0VcLbVZLGsw7M+8wbzQKyOYyQvLdGUM7t2w\nYNgwPUY0QoF0a7NMs5t0AInY2rmklS4yyQT+Z0eaNlGv2gnyUG76uUM1rG/v\noLpGW1dQyTS5uW9ubvNtdbmEkfRDu04jz8UgkLdDCGrrQCBRSDQ6d4Ewd0jG\n/5zCjefvycS97aHrdZLXLCS6iO3dAdF38ImfjNR0TUhYWjjJAM6SM7gef4LS\n091c\r\n=pn1E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRSQIW5uEJ/+Vaz7fj8nYxU6s+/hUfE+APCNmSBTI3jQIgbaBqKBh3loylFsAAWaIjrpO7LIE8Bmf9j6JFuxNNKZk="}]},"maintainers":[{"name":"attopartners","email":"stuart@attopartners.com"}],"_npmUser":{"name":"attopartners","email":"stuart@attopartners.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/formal-web_0.1.6_1558099911463_0.8311251538718243"},"_hasShrinkwrap":false},"0.1.7":{"version":"0.1.7","name":"@attopartners/formal-web","author":{"name":"Kevin Wolf","email":"hi@kevinwolf.me"},"description":"Elegant form management primitives for the react hooks era","license":"MIT","homepage":"https://github.com/kevinwolfcr/formal#readme","repository":{"type":"git","url":"git+https://github.com/kevinwolfcr/formal.git"},"bugs":{"url":"https://github.com/kevinwolfcr/formal/issues"},"main":"lib/formal-web.js","types":"lib/formal-web.d.ts","directories":{"lib":"lib","test":"__tests__"},"publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./lib","build":"tsc","test":"echo \"Error: run tests from root\" && exit 1"},"dependencies":{"@attopartners/formal":"^0.1.7"},"peerDependencies":{"react":">=16.8","yup":"*"},"devDependencies":{"react":"^16.8.6","react-dom":"^16.8.6","react-hooks-testing-library":"^0.4.0"},"gitHead":"3bc553c5be61aeb3f147a9752e6774664974eca7","_id":"@attopartners/formal-web@0.1.7","_nodeVersion":"11.13.0","_npmVersion":"lerna/3.14.1/node@v11.13.0+x64 (darwin)","dist":{"integrity":"sha512-85ROEh9qhZQ6RuZjqMye12eIKY8nLtzZJ1M5Z0iRdsPSKi7KajDjvrue/MUi8i5tLjYVrvh2JmFtdw5O4k01Gw==","shasum":"7e10a7b00db75c0bb0a721429083846abcc2fd05","tarball":"https://registry.npmjs.org/@attopartners/formal-web/-/formal-web-0.1.7.tgz","fileCount":10,"unpackedSize":10888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3rjuCRA9TVsSAnZWagAAmSAP/j3fhkXp5Ymj2AkGdc0s\n5wPxelXBrO7fYckUMAiDElCXYPweBiZlZzl1g4ke9ReVx+v7FeSHwCM57woQ\nUakSPK7WcwNkP8rO6iqeF3Ld8Am7MSf0NruHxtMCtJY85eIQCEmKmsgcd+G4\nwT27/lqfNbRMusDxf6cwV2hsfN8ckrJmzqGypBGebQs2HSSFNNCK0eAq07gD\n+awDHStMdqcHffxNxDQsMQinZs/qq/K+IYEs7mQPOceB1DI6/lP3c/swbl1I\nVXVVpIDvKqlkBrrLOqwS80ry9Mpcu1Oo+sliwvrO4ncHbiTaBMjSsWpFTO34\n3ySa5PYQho3+7gc0QMYiitNIpmtdEGfUcNawuBia6SS6PnurSQ8L25pjXVpm\nm1iEIPrcd7uOXT3646Uf4dT5kBHCegNqq+mbQO5FVpxv7+5U3VURe5c0Ubqi\nL+loXX1xufVw6LtXuxWktWTSIpig8QtJUqTfUs8HE7Jxa6LEQtegJXBO9R2c\niy3eET7xMIZNDyNr4UukqASkrd6giZpBbY5Wa+Nf6k6n7l2QylIw40+p3DbG\nYj3BEWDwSC5Lu1U+vHPloIURlgT55S5RnV1lg3stVJwFOArTecL2DRo8XUh9\nDMGmtav1479stHPPCxIf3Zu4qChF+qgDG4z7EW7T3zF39ze7lZGKm7E/5nqN\nykDa\r\n=9+RX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrWUk7LzNHfxARFc8CJ8D4YwxVBm47vglfaATcWJZotAIgPuPCJyaeDpNLJ+F2H9ya8ZGxzPr96K5ttExZCdAAVL4="}]},"maintainers":[{"name":"attopartners","email":"stuart@attopartners.com"}],"_npmUser":{"name":"attopartners","email":"stuart@attopartners.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/formal-web_0.1.7_1558100206029_0.8460506177693814"},"_hasShrinkwrap":false},"0.1.8":{"version":"0.1.8","name":"@attopartners/formal-web","author":{"name":"Kevin Wolf","email":"hi@kevinwolf.me"},"description":"Elegant form management primitives for the react hooks era","license":"MIT","homepage":"https://github.com/kevinwolfcr/formal#readme","repository":{"type":"git","url":"git+https://github.com/kevinwolfcr/formal.git"},"bugs":{"url":"https://github.com/kevinwolfcr/formal/issues"},"main":"lib/formal-web.js","types":"lib/formal-web.d.ts","directories":{"lib":"lib","test":"__tests__"},"publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./lib","build":"tsc","test":"echo \"Error: run tests from root\" && exit 1"},"dependencies":{"@attopartners/formal":"^0.1.7"},"peerDependencies":{"react":">=16.8","yup":"*"},"devDependencies":{"react":"^16.8.6","react-dom":"^16.8.6","react-hooks-testing-library":"^0.4.0"},"gitHead":"8bec1de2f9c200a9f866782cab79c7dbac1c126a","_id":"@attopartners/formal-web@0.1.8","_nodeVersion":"11.13.0","_npmVersion":"lerna/3.14.1/node@v11.13.0+x64 (darwin)","dist":{"integrity":"sha512-6BBBVA+3+0pPDuTHkICMWnzk0zh2CQTcHo6AkqhF8yFlt5uk6WFmFxDi6orGewDmQ3USLTappyviQNkmUPvEnQ==","shasum":"f93801b884e69577738e2db699eb43db92922e75","tarball":"https://registry.npmjs.org/@attopartners/formal-web/-/formal-web-0.1.8.tgz","fileCount":10,"unpackedSize":11048,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3rmQCRA9TVsSAnZWagAAGP4P/2hSpIrXwBaHBPG9jVHv\nlwUWJbRJMZfTiaUeadpfG4ao7nXv2SWadQVp6Xp4n+4QomXK0WLgGPQfOD38\n2gPH611GH8JOFrli7oauo/Sho56jBMzNb1DTbX5bFkPe0smIT/086OglqZuc\nzrtP937kc3Q9AQW9OmOX6mcxToR3Q6RSV6Wq1K46WSZTwgJCSQiXDuBcau/B\nt5gSJLPfon2kEoizqa8ri9akDAPMJrZKGuga/2QVvv7kJflTd0O82gCh1KZe\n3m3RX1GX0YG0TvGRB7Z4yy/N764awGQ2mvjTHogzfU/SlMpbaiBVyQMmMQSq\n2tet/1bT+RS35et6ZXaf5GHK+mqt8xbVw/yvYPXThxM2FPRhpfwpTEyR/YTA\nKzDssZrRkwmW7AkB/ZrSHfAq9DGZrENu2qI2EGc79m3ZcB0X3RC5QTPSbELr\nFsLKBs3o08PezcTtXFxLqo7U6wsa6qDU0rM/VF1WwkZZZjMNb8jbboQtIJoe\nFOe4oq/RW3eBd2VtaAPe1EC/jCeu+lrw2rohyv5jaV7n3WKFC0c+YDdBKYX/\nAjgbXBMVg+Bpv1Qdm8X1VzHsTb827P/8GHVis0W8tHW1B9cLKWTKCvxEgbjy\nhwDIABvn3Sg0OY1qv3ykp9dGx8igX9ImvYYRZzPtEm2tkfLc538D5hgdL932\n1Vmi\r\n=idC3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKo7Z5G1phR0dNrxZhErZryeAt9HeCTrnw3mMb4FFrjwIgAZtHNGRECwyfx3/FmXW1f5Pb9aHUH58jNv3Kcy06x6U="}]},"maintainers":[{"name":"attopartners","email":"stuart@attopartners.com"}],"_npmUser":{"name":"attopartners","email":"stuart@attopartners.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/formal-web_0.1.8_1558100367764_0.25157475475264657"},"_hasShrinkwrap":false}},"time":{"created":"2019-05-17T13:31:27.983Z","0.1.5":"2019-05-17T13:31:28.176Z","modified":"2022-04-04T16:20:47.871Z","0.1.6":"2019-05-17T13:31:51.627Z","0.1.7":"2019-05-17T13:36:46.149Z","0.1.8":"2019-05-17T13:39:27.921Z"},"maintainers":[{"name":"attopartners","email":"stuart@attopartners.com"}],"description":"Elegant form management primitives for the react hooks era","homepage":"https://github.com/kevinwolfcr/formal#readme","repository":{"type":"git","url":"git+https://github.com/kevinwolfcr/formal.git"},"author":{"name":"Kevin Wolf","email":"hi@kevinwolf.me"},"bugs":{"url":"https://github.com/kevinwolfcr/formal/issues"},"license":"MIT","readme":"\"@kevinwolf/formal-web\"\n\"@kevinwolf/formal-web\"\n\n# @kevinwolf/formal-web\n\n💻 Web extension for [@kevinwolf/formal](https://npmjs.com/package/@kevinwolf/formal).\n\n## Table of Contents\n\n\n\n\n- [Install](#install)\n- [Usage](#usage)\n- [Tips](#tips)\n- [Extended documentation](#extended-documentation)\n\n\n\n## Install\n\n```shell\nyarn add @kevinwolf/formal-web\n```\n\n## Usage\n\n```typescript\nimport React from \"react\";\nimport useFormal from \"@kevinwolf/formal-web\";\nimport * as yup from \"yup\";\n\nconst schema = yup.object().shape({\n firstName: yup.string().required(),\n lastName: yup.string().required(),\n email: yup\n .string()\n .email()\n .required()\n});\n\nconst initialValues = {\n firstName: \"Tony\",\n lastName: \"Stark\",\n email: \"ironman@avengers.io\"\n};\n\nexport default function App() {\n const formal = useFormal(initialValues, {\n schema,\n onSubmit: values => console.log(\"Your values are:\", values)\n });\n\n return (\n
\n
\n \n \n {form.errors.firstName &&
{form.errors.firstName}
}\n
\n\n
\n \n \n {form.errors.lastName &&
{form.errors.lastName}
}\n
\n\n
\n \n \n {form.errors.email &&
{form.errors.email}
}\n
\n\n \n
\n );\n}\n```\n\n## Tips\n\nAs you can see, the above code became a little verbose due to the repetition of the fields code, in order to abstract that repeated code, you can create a `Field` component and replace all those calls in App.js.\n\n**Field.js**\n\n```typescript\nimport React from \"react\";\n\nexport default function Field({ id, label, error, ...props }) {\n return (\n
\n \n \n {error &&
{error}
}\n
\n );\n}\n```\n\n**App.js**\n\n```diff\nimport React from \"react\";\nimport useFormal from \"@kevinwolf/formal-web\";\nimport * as yup from \"yup\";\n\n+import Field from './field'\n\nconst schema = yup.object().shape({\n firstName: yup.string().required(),\n lastName: yup.string().required(),\n email: yup\n .string()\n .email()\n .required()\n});\n\nconst initialValues = {\n firstName: \"Tony\",\n lastName: \"Stark\",\n email: \"ironman@avengers.io\"\n};\n\nexport default function App() {\n const formal = useFormal(initialValues, {\n schema,\n onSubmit: values => console.log(\"Your values are:\", values)\n });\n\n return (\n
\n-
\n- \n- \n- {form.errors.firstName &&
{form.errors.firstName}
}\n-
\n+ \n\n-
\n- \n- \n- {form.errors.lastName &&
{form.errors.lastName}
}\n-
\n+ \n\n-
\n- \n- \n- {form.errors.email &&
{form.errors.email}
}\n-
\n+ \n\n \n \n );\n}\n```\n\n## Extended documentation\n\nFor extended documentation, examples and contributing guidelines, please refer to [the monorepo containing this package](https://github.com/kevinwolfcr/formal).\n","readmeFilename":"README.md"}