{"_id":"@delimka/formedible","_rev":"8-4fc5cc6826538777330780f6afb8fe66","name":"@delimka/formedible","dist-tags":{"latest":"1.1.12"},"versions":{"1.1.7":{"name":"@delimka/formedible","version":"1.1.7","description":"Library for form creation and validation","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","publishConfig":{"registry":"https://registry.npmjs.org/"},"plugins":["@babel/plugin-syntax-jsx"],"scripts":{"dev":"rollup -c --watch","build":"rollup -c","storybook":"storybook dev -p 6006","build-storybook":"storybook build","test":"jest --watchAll --verbose"},"jest":{"testEnvironment":"jsdom","moduleNameMapper":{"\\.(css|less)$":"/src/tests/styleMock.ts"}},"babel":{"sourceType":"unambiguous","presets":[["@babel/preset-env",{"targets":{"chrome":100,"safari":15,"firefox":91}}],["@babel/preset-react",{"runtime":"automatic"}],"@babel/preset-typescript"]},"postcss":{"plugins":{"postcss-import":{}}},"devDependencies":{"@babel/core":"^7.23.0","@babel/preset-env":"^7.22.20","@babel/preset-react":"^7.22.15","@babel/preset-typescript":"^7.23.0","@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@storybook/addon-essentials":"^7.4.5","@storybook/addon-interactions":"^7.4.5","@storybook/addon-links":"^7.4.5","@storybook/addon-onboarding":"^1.0.8","@storybook/blocks":"^7.4.5","@storybook/react":"^7.6.16","@storybook/react-vite":"^7.4.5","@storybook/test":"^7.6.16","@storybook/testing-library":"^0.2.1","@testing-library/jest-dom":"^6.1.3","@testing-library/react":"^14.2.1","@types/jest":"^29.5.5","@types/react":"^18.2.23","@types/testing-library__react":"^10.2.0","babel-jest":"^29.7.0","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","postcss":"^8.4.31","postcss-import":"^15.1.0","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","rollup-plugin-postcss":"^4.0.2","storybook":"^7.4.5","tslib":"^2.6.2","typescript":"^5.2.2"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"9fc12980b6d5b0b4ae3650b79c9cf9f73b8ea974","_id":"@delimka/formedible@1.1.7","_nodeVersion":"20.9.0","_npmVersion":"9.7.1","dist":{"integrity":"sha512-TtbXSbMR7YhXvYaKpxFYSrTguhgowqUWdNwbrJEnGeZzHTt4ZKpV2DMjw/e6LhK2H4EhhiNinM7ES5I2q+hz7Q==","shasum":"4bb7acd5093083ab91cde5777c7f6fa7e8e0495e","tarball":"https://registry.npmjs.org/@delimka/formedible/-/formedible-1.1.7.tgz","fileCount":26,"unpackedSize":589102,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDYp5weD+/VPNzJbC+3Hd78ufhtbBRygTuyPujMKRqVKAiBXgJptR5Vx7s/1S0GFkMrEmRld2QkgkcpfMrDaeN6mpw=="}]},"_npmUser":{"name":"delimka","email":"delima021@gmail.com"},"directories":{},"maintainers":[{"name":"delimka","email":"delima021@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/formedible_1.1.7_1708958205469_0.06558893339823135"},"_hasShrinkwrap":false},"1.1.4":{"name":"@delimka/formedible","version":"1.1.4","description":"Library for form creation and validation","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","publishConfig":{"registry":"https://registry.npmjs.org/"},"plugins":["@babel/plugin-syntax-jsx"],"scripts":{"dev":"rollup -c --watch","build":"rollup -c","storybook":"storybook dev -p 6006","build-storybook":"storybook build","test":"jest --watchAll --verbose"},"jest":{"testEnvironment":"jsdom","moduleNameMapper":{"\\.(css|less)$":"/src/tests/styleMock.ts"}},"babel":{"sourceType":"unambiguous","presets":[["@babel/preset-env",{"targets":{"chrome":100,"safari":15,"firefox":91}}],["@babel/preset-react",{"runtime":"automatic"}],"@babel/preset-typescript"]},"postcss":{"plugins":{"postcss-import":{}}},"devDependencies":{"@babel/core":"^7.23.0","@babel/preset-env":"^7.22.20","@babel/preset-react":"^7.22.15","@babel/preset-typescript":"^7.23.0","@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@storybook/addon-essentials":"^7.4.5","@storybook/addon-interactions":"^7.4.5","@storybook/addon-links":"^7.4.5","@storybook/addon-onboarding":"^1.0.8","@storybook/blocks":"^7.4.5","@storybook/react":"^7.6.16","@storybook/react-vite":"^7.4.5","@storybook/test":"^7.6.16","@storybook/testing-library":"^0.2.1","@testing-library/jest-dom":"^6.1.3","@testing-library/react":"^14.2.1","@types/jest":"^29.5.5","@types/react":"^18.2.23","@types/testing-library__react":"^10.2.0","babel-jest":"^29.7.0","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","postcss":"^8.4.31","postcss-import":"^15.1.0","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","rollup-plugin-postcss":"^4.0.2","storybook":"^7.4.5","tslib":"^2.6.2","typescript":"^5.2.2"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"6f7112da08bb4cac8e97c917e1943760cae586bd","_id":"@delimka/formedible@1.1.4","_nodeVersion":"20.9.0","_npmVersion":"9.7.1","dist":{"integrity":"sha512-8xX3j5coQM4HzWeLl78akJhwoDu7huZcPlciGFy5pR8aqXfBk9pFeFnCqzicmM+32l2C3Xsns649hnO3Qw08EQ==","shasum":"127d7f3a47eaa0f31e5c7e5767bf07ba34c74777","tarball":"https://registry.npmjs.org/@delimka/formedible/-/formedible-1.1.4.tgz","fileCount":26,"unpackedSize":589198,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkBJDYMndT4dlu6yh/D8N2FwqCj+2R3eCP8WebgF0rWAIhAJDzHxYRnpAxfAXkaHUdPrs71T9fEKaNZ/iGxb/8N1Al"}]},"_npmUser":{"name":"delimka","email":"delima021@gmail.com"},"directories":{},"maintainers":[{"name":"delimka","email":"delima021@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/formedible_1.1.4_1710771882208_0.5527114257923547"},"_hasShrinkwrap":false},"1.1.5":{"name":"@delimka/formedible","version":"1.1.5","description":"Library for form creation and validation","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","publishConfig":{"registry":"https://registry.npmjs.org/"},"plugins":["@babel/plugin-syntax-jsx"],"scripts":{"dev":"rollup -c --watch","build":"rollup -c","storybook":"storybook dev -p 6006","build-storybook":"storybook build","test":"jest --watchAll --verbose"},"jest":{"testEnvironment":"jsdom","moduleNameMapper":{"\\.(css|less)$":"/src/tests/styleMock.ts"}},"babel":{"sourceType":"unambiguous","presets":[["@babel/preset-env",{"targets":{"chrome":100,"safari":15,"firefox":91}}],["@babel/preset-react",{"runtime":"automatic"}],"@babel/preset-typescript"]},"postcss":{"plugins":{"postcss-import":{}}},"devDependencies":{"@babel/core":"^7.23.0","@babel/preset-env":"^7.22.20","@babel/preset-react":"^7.22.15","@babel/preset-typescript":"^7.23.0","@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@storybook/addon-essentials":"^7.4.5","@storybook/addon-interactions":"^7.4.5","@storybook/addon-links":"^7.4.5","@storybook/addon-onboarding":"^1.0.8","@storybook/blocks":"^7.4.5","@storybook/react":"^7.6.16","@storybook/react-vite":"^7.4.5","@storybook/test":"^7.6.16","@storybook/testing-library":"^0.2.1","@testing-library/jest-dom":"^6.1.3","@testing-library/react":"^14.2.1","@types/jest":"^29.5.5","@types/react":"^18.2.23","@types/testing-library__react":"^10.2.0","babel-jest":"^29.7.0","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","postcss":"^8.4.31","postcss-import":"^15.1.0","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","rollup-plugin-postcss":"^4.0.2","storybook":"^7.4.5","tslib":"^2.6.2","typescript":"^5.2.2"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"6f7112da08bb4cac8e97c917e1943760cae586bd","_id":"@delimka/formedible@1.1.5","_nodeVersion":"20.9.0","_npmVersion":"9.7.1","dist":{"integrity":"sha512-9CIjErHh4kyaKej7rGXgIWQ8pKE91za5ZESYirxJONWpbCwEpt+q49NpHgnkmQUIjRZqHGk1eW4Uhg2RlAtlQg==","shasum":"65364f9bc2311a916827cfcfbc3ac665b7b55958","tarball":"https://registry.npmjs.org/@delimka/formedible/-/formedible-1.1.5.tgz","fileCount":26,"unpackedSize":589198,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwxEZ5a5UCLL5/4ovKKrRCgW3ZlkwHaHg2vXOn5YM2LgIhAPhjY7BxyLpVupNcSHiCjDJECwKcZJEmromZSQXHvwXo"}]},"_npmUser":{"name":"delimka","email":"delima021@gmail.com"},"directories":{},"maintainers":[{"name":"delimka","email":"delima021@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/formedible_1.1.5_1710772033339_0.2172111346551031"},"_hasShrinkwrap":false},"1.1.6":{"name":"@delimka/formedible","version":"1.1.6","description":"Library for form creation and validation","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","publishConfig":{"registry":"https://registry.npmjs.org/"},"plugins":["@babel/plugin-syntax-jsx"],"scripts":{"dev":"rollup -c --watch","build":"rollup -c","storybook":"storybook dev -p 6006","build-storybook":"storybook build","test":"jest --watchAll --verbose"},"jest":{"testEnvironment":"jsdom","moduleNameMapper":{"\\.(css|less)$":"/src/tests/styleMock.ts"}},"babel":{"sourceType":"unambiguous","presets":[["@babel/preset-env",{"targets":{"chrome":100,"safari":15,"firefox":91}}],["@babel/preset-react",{"runtime":"automatic"}],"@babel/preset-typescript"]},"postcss":{"plugins":{"postcss-import":{}}},"devDependencies":{"@babel/core":"^7.23.0","@babel/preset-env":"^7.22.20","@babel/preset-react":"^7.22.15","@babel/preset-typescript":"^7.23.0","@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@storybook/addon-essentials":"^7.4.5","@storybook/addon-interactions":"^7.4.5","@storybook/addon-links":"^7.4.5","@storybook/addon-onboarding":"^1.0.8","@storybook/blocks":"^7.4.5","@storybook/react":"^7.6.16","@storybook/react-vite":"^7.4.5","@storybook/test":"^7.6.16","@storybook/testing-library":"^0.2.1","@testing-library/jest-dom":"^6.1.3","@testing-library/react":"^14.2.1","@types/jest":"^29.5.5","@types/react":"^18.2.23","@types/testing-library__react":"^10.2.0","babel-jest":"^29.7.0","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","postcss":"^8.4.31","postcss-import":"^15.1.0","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","rollup-plugin-postcss":"^4.0.2","storybook":"^7.4.5","tslib":"^2.6.2","typescript":"^5.2.2"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"6f7112da08bb4cac8e97c917e1943760cae586bd","_id":"@delimka/formedible@1.1.6","_nodeVersion":"20.9.0","_npmVersion":"9.7.1","dist":{"integrity":"sha512-HhG3vFQjYYAMB4UtSYjNBcgWAIS0LwUKiDn7BBG7gZd7lTw4QZBu4supOOydJ6JYrv1u2bk/pt3AS/deWVFUlQ==","shasum":"ae25e2df666d3d51443f22077b90619e6f28cb7d","tarball":"https://registry.npmjs.org/@delimka/formedible/-/formedible-1.1.6.tgz","fileCount":28,"unpackedSize":603950,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmBCvbFrp3BALX2PIAyPzj58XYBmnsUQL0lp/t1Nqr0QIgTfyYCzhXCad0dNvMz2HSx5sVTc8doGkiVDW5dzJgmOc="}]},"_npmUser":{"name":"delimka","email":"delima021@gmail.com"},"directories":{},"maintainers":[{"name":"delimka","email":"delima021@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/formedible_1.1.6_1712057814708_0.978535781661958"},"_hasShrinkwrap":false},"1.1.8":{"name":"@delimka/formedible","version":"1.1.8","description":"Library for form creation and validation","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","publishConfig":{"registry":"https://registry.npmjs.org/"},"plugins":["@babel/plugin-syntax-jsx"],"scripts":{"dev":"rollup -c --watch","build":"rollup -c","storybook":"storybook dev -p 6006","build-storybook":"storybook build","test":"jest --watchAll --verbose"},"jest":{"testEnvironment":"jsdom","moduleNameMapper":{"\\.(css|less)$":"/src/tests/styleMock.ts"}},"babel":{"sourceType":"unambiguous","presets":[["@babel/preset-env",{"targets":{"chrome":100,"safari":15,"firefox":91}}],["@babel/preset-react",{"runtime":"automatic"}],"@babel/preset-typescript"]},"postcss":{"plugins":{"postcss-import":{}}},"devDependencies":{"@babel/core":"^7.23.0","@babel/preset-env":"^7.22.20","@babel/preset-react":"^7.22.15","@babel/preset-typescript":"^7.23.0","@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@storybook/addon-essentials":"^7.4.5","@storybook/addon-interactions":"^7.4.5","@storybook/addon-links":"^7.4.5","@storybook/addon-onboarding":"^1.0.8","@storybook/blocks":"^7.4.5","@storybook/react":"^7.6.16","@storybook/react-vite":"^7.4.5","@storybook/test":"^7.6.16","@storybook/testing-library":"^0.2.1","@testing-library/jest-dom":"^6.1.3","@testing-library/react":"^14.2.1","@types/jest":"^29.5.5","@types/react":"^18.2.23","@types/testing-library__react":"^10.2.0","babel-jest":"^29.7.0","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","postcss":"^8.4.31","postcss-import":"^15.1.0","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","rollup-plugin-postcss":"^4.0.2","storybook":"^7.4.5","tslib":"^2.6.2","typescript":"^5.2.2"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"6f7112da08bb4cac8e97c917e1943760cae586bd","_id":"@delimka/formedible@1.1.8","_nodeVersion":"20.9.0","_npmVersion":"9.7.1","dist":{"integrity":"sha512-xaj5cOSv20SF0tyFwJTQ1QtPVmgYZ7K8DGwGRG1FZe/JVFj9/ZvXnEoBgkxxW0xUVSPStT+KNuz+baxxNdWMZg==","shasum":"ff1cb8560fd2f0faa7569b61ea0b77e1798716bd","tarball":"https://registry.npmjs.org/@delimka/formedible/-/formedible-1.1.8.tgz","fileCount":32,"unpackedSize":605626,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDCW32G1L1taz8p5d11xZcu9QnTHClhX6Jc6YGTM+HRdAiEAiT/O0Hf9sHx3zCsozKCwWQzjaB2PIu7Cg0Ela8GJ11A="}]},"_npmUser":{"name":"delimka","email":"delima021@gmail.com"},"directories":{},"maintainers":[{"name":"delimka","email":"delima021@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/formedible_1.1.8_1712059048054_0.1482771779307972"},"_hasShrinkwrap":false},"1.1.9":{"name":"@delimka/formedible","version":"1.1.9","description":"Library for form creation and validation","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","publishConfig":{"registry":"https://registry.npmjs.org/"},"plugins":["@babel/plugin-syntax-jsx"],"scripts":{"dev":"rollup -c --watch","build":"rollup -c","storybook":"storybook dev -p 6006","build-storybook":"storybook build","test":"jest --watchAll --verbose"},"jest":{"testEnvironment":"jsdom","moduleNameMapper":{"\\.(css|less)$":"/src/tests/styleMock.ts"}},"babel":{"sourceType":"unambiguous","presets":[["@babel/preset-env",{"targets":{"chrome":100,"safari":15,"firefox":91}}],["@babel/preset-react",{"runtime":"automatic"}],"@babel/preset-typescript"]},"postcss":{"plugins":{"postcss-import":{}}},"devDependencies":{"@babel/core":"^7.23.0","@babel/preset-env":"^7.22.20","@babel/preset-react":"^7.22.15","@babel/preset-typescript":"^7.23.0","@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@storybook/addon-essentials":"^7.4.5","@storybook/addon-interactions":"^7.4.5","@storybook/addon-links":"^7.4.5","@storybook/addon-onboarding":"^1.0.8","@storybook/blocks":"^7.4.5","@storybook/react":"^7.6.16","@storybook/react-vite":"^7.4.5","@storybook/test":"^7.6.16","@storybook/testing-library":"^0.2.1","@testing-library/jest-dom":"^6.1.3","@testing-library/react":"^14.2.1","@types/jest":"^29.5.5","@types/react":"^18.2.23","@types/testing-library__react":"^10.2.0","babel-jest":"^29.7.0","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","postcss":"^8.4.31","postcss-import":"^15.1.0","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","rollup-plugin-postcss":"^4.0.2","storybook":"^7.4.5","tslib":"^2.6.2","typescript":"^5.2.2"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"6f7112da08bb4cac8e97c917e1943760cae586bd","_id":"@delimka/formedible@1.1.9","_nodeVersion":"20.9.0","_npmVersion":"9.7.1","dist":{"integrity":"sha512-e7X7G9vClx2LJf05SxSaM5Qy+c3ef+b+MoK9+uyDLmy+QX4+l72vvnRBu91iwxbW8sPxHGSwcn2yqAsyk5cHVA==","shasum":"0811f28c1e430773ffc4e5efe81d81c58ed6812c","tarball":"https://registry.npmjs.org/@delimka/formedible/-/formedible-1.1.9.tgz","fileCount":32,"unpackedSize":631879,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTSQw1J2iq6dbRI80adg3813IrDca/6Va3cfajR8xrEAIgOtZQYYDTSxfNUA+6iqJ/0uyUnt9r93KoBTsnV4KtvDA="}]},"_npmUser":{"name":"delimka","email":"delima021@gmail.com"},"directories":{},"maintainers":[{"name":"delimka","email":"delima021@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/formedible_1.1.9_1714473538097_0.4401855166427131"},"_hasShrinkwrap":false},"1.1.10":{"name":"@delimka/formedible","version":"1.1.10","description":"Library for form creation and validation","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","publishConfig":{"registry":"https://registry.npmjs.org/"},"plugins":["@babel/plugin-syntax-jsx"],"scripts":{"dev":"rollup -c --watch","build":"rollup -c","storybook":"storybook dev -p 6006","build-storybook":"storybook build","test":"jest --watchAll --verbose"},"jest":{"testEnvironment":"jsdom","moduleNameMapper":{"\\.(css|less)$":"/src/tests/styleMock.ts"}},"babel":{"sourceType":"unambiguous","presets":[["@babel/preset-env",{"targets":{"chrome":100,"safari":15,"firefox":91}}],["@babel/preset-react",{"runtime":"automatic"}],"@babel/preset-typescript"]},"postcss":{"plugins":{"postcss-import":{}}},"devDependencies":{"@babel/core":"^7.23.0","@babel/preset-env":"^7.22.20","@babel/preset-react":"^7.22.15","@babel/preset-typescript":"^7.23.0","@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@storybook/addon-essentials":"^7.4.5","@storybook/addon-interactions":"^7.4.5","@storybook/addon-links":"^7.4.5","@storybook/addon-onboarding":"^1.0.8","@storybook/blocks":"^7.4.5","@storybook/react":"^7.6.16","@storybook/react-vite":"^7.4.5","@storybook/test":"^7.6.16","@storybook/testing-library":"^0.2.1","@testing-library/jest-dom":"^6.1.3","@testing-library/react":"^14.2.1","@types/jest":"^29.5.5","@types/react":"^18.2.23","@types/testing-library__react":"^10.2.0","babel-jest":"^29.7.0","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","postcss":"^8.4.31","postcss-import":"^15.1.0","react":"^18.3.1","react-dom":"^18.3.1","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","rollup-plugin-postcss":"^4.0.2","storybook":"^7.4.5","tslib":"^2.6.2","typescript":"^5.2.2"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"6f7112da08bb4cac8e97c917e1943760cae586bd","_id":"@delimka/formedible@1.1.10","_nodeVersion":"20.9.0","_npmVersion":"9.7.1","dist":{"integrity":"sha512-N3MafuLspJAcxxtGUjzKMX5b484FrAa7XC7cmdylN1hyayt0b8GZNI2p1QE3uy0Hfl9Vffu3T1JShZtyXxaEAQ==","shasum":"93b51daadc4c8892b14c54b20e893429b500b930","tarball":"https://registry.npmjs.org/@delimka/formedible/-/formedible-1.1.10.tgz","fileCount":32,"unpackedSize":632288,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGIog60Cp/1ZQeHR8rkumDF2q5B/qkIYbcvKCjhf9tEQAiEA7dnLDS6cdrncDscQL6jYmHGLqbOvUHpxR/+zRTgSlag="}]},"_npmUser":{"name":"delimka","email":"delima021@gmail.com"},"directories":{},"maintainers":[{"name":"delimka","email":"delima021@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/formedible_1.1.10_1715857354504_0.3387913143035255"},"_hasShrinkwrap":false},"1.1.11":{"name":"@delimka/formedible","version":"1.1.11","description":"Library for form creation and validation","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","publishConfig":{"registry":"https://registry.npmjs.org/"},"plugins":["@babel/plugin-syntax-jsx"],"scripts":{"dev":"rollup -c --watch","build":"rollup -c","storybook":"storybook dev -p 6006","build-storybook":"storybook build","test":"jest --watchAll --verbose"},"jest":{"testEnvironment":"jsdom","moduleNameMapper":{"\\.(css|less)$":"/src/tests/styleMock.ts"}},"babel":{"sourceType":"unambiguous","presets":[["@babel/preset-env",{"targets":{"chrome":100,"safari":15,"firefox":91}}],["@babel/preset-react",{"runtime":"automatic"}],"@babel/preset-typescript"]},"postcss":{"plugins":{"postcss-import":{}}},"devDependencies":{"@babel/core":"^7.23.0","@babel/preset-env":"^7.22.20","@babel/preset-react":"^7.22.15","@babel/preset-typescript":"^7.23.0","@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@storybook/addon-essentials":"^7.4.5","@storybook/addon-interactions":"^7.4.5","@storybook/addon-links":"^7.4.5","@storybook/addon-onboarding":"^1.0.8","@storybook/blocks":"^7.4.5","@storybook/react":"^7.6.16","@storybook/react-vite":"^7.4.5","@storybook/test":"^7.6.16","@storybook/testing-library":"^0.2.1","@testing-library/jest-dom":"^6.1.3","@testing-library/react":"^14.2.1","@types/jest":"^29.5.5","@types/react":"^18.2.23","@types/testing-library__react":"^10.2.0","babel-jest":"^29.7.0","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","postcss":"^8.4.31","postcss-import":"^15.1.0","react":"^18.3.1","react-dom":"^18.3.1","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","rollup-plugin-postcss":"^4.0.2","storybook":"^7.4.5","tslib":"^2.6.2","typescript":"^5.2.2"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"gitHead":"6f7112da08bb4cac8e97c917e1943760cae586bd","_id":"@delimka/formedible@1.1.11","_nodeVersion":"20.9.0","_npmVersion":"9.7.1","dist":{"integrity":"sha512-FQLwDuy7wzMMTD+zDBKCALux3pQxtYfjqb6O09k72sR9FnY1aIcp6DpQ26ioFbuJPgzwSd8Usd5FSv0ByuVnqw==","shasum":"92c6e9b0f85a6148953550295b1622a168f3fd60","tarball":"https://registry.npmjs.org/@delimka/formedible/-/formedible-1.1.11.tgz","fileCount":32,"unpackedSize":90088,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEPSQYnNhfUYdtcPv15Y2R4SI9D5s/8IpnJIbjbWC7CXAiAv5iHcDRzgghlz5NIrVfcL/uo9mS0+K3dDleYFrcdQ8w=="}]},"_npmUser":{"name":"delimka","email":"delima021@gmail.com"},"directories":{},"maintainers":[{"name":"delimka","email":"delima021@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/formedible_1.1.11_1715858426687_0.37098131654854405"},"_hasShrinkwrap":false},"1.1.12":{"name":"@delimka/formedible","version":"1.1.12","description":"Library for form state management and validation","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","publishConfig":{"registry":"https://registry.npmjs.org/"},"plugins":["@babel/plugin-syntax-jsx"],"scripts":{"dev":"rollup -c --watch","build":"rollup -c","storybook":"storybook dev -p 6006","build-storybook":"storybook build","test":"jest --watchAll --verbose"},"jest":{"testEnvironment":"jsdom","moduleNameMapper":{"\\.(css|less)$":"/src/tests/styleMock.ts"}},"babel":{"sourceType":"unambiguous","presets":[["@babel/preset-env",{"targets":{"chrome":100,"safari":15,"firefox":91}}],["@babel/preset-react",{"runtime":"automatic"}],"@babel/preset-typescript"]},"postcss":{"plugins":{"postcss-import":{}}},"devDependencies":{"@babel/core":"^7.23.0","@babel/preset-env":"^7.22.20","@babel/preset-react":"^7.22.15","@babel/preset-typescript":"^7.23.0","@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-typescript":"^11.1.4","@storybook/addon-essentials":"^7.4.5","@storybook/addon-interactions":"^7.4.5","@storybook/addon-links":"^7.4.5","@storybook/addon-onboarding":"^1.0.8","@storybook/blocks":"^7.4.5","@storybook/react":"^7.6.16","@storybook/react-vite":"^7.4.5","@storybook/test":"^7.6.16","@storybook/testing-library":"^0.2.1","@testing-library/jest-dom":"^6.1.3","@testing-library/react":"^14.2.1","@types/jest":"^29.5.5","@types/react":"^18.2.23","@types/testing-library__react":"^10.2.0","babel-jest":"^29.7.0","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","postcss":"^8.4.31","postcss-import":"^15.1.0","react":"^18.3.1","react-dom":"^18.3.1","rollup":"^3.29.4","rollup-plugin-dts":"^6.0.2","rollup-plugin-postcss":"^4.0.2","storybook":"^7.4.5","tslib":"^2.6.2","typescript":"^5.2.2"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"gitHead":"6f7112da08bb4cac8e97c917e1943760cae586bd","_id":"@delimka/formedible@1.1.12","_nodeVersion":"20.9.0","_npmVersion":"9.7.1","dist":{"integrity":"sha512-z54j/3XMsshynxV2Bf5WoQQuCaQP105U1FPRtJdY/dgF8mWrlvIboElHUALyT/rDFRQ91R/v94oDAC6SBeHQPA==","shasum":"c7eb1379a998f2abba93814c14d7f419ca346c5a","tarball":"https://registry.npmjs.org/@delimka/formedible/-/formedible-1.1.12.tgz","fileCount":32,"unpackedSize":90101,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHZWe9IDdkQD29aYKm0BhzFkNNvt/uF2/0IPWcwGPP2FAiBVj1mwNR3NjU2PhIz8d35aWkfeLdiih78DcPyFcIbExQ=="}]},"_npmUser":{"name":"delimka","email":"delima021@gmail.com"},"directories":{},"maintainers":[{"name":"delimka","email":"delima021@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/formedible_1.1.12_1715862241594_0.46826922572983176"},"_hasShrinkwrap":false}},"time":{"created":"2024-02-26T14:36:45.340Z","1.1.7":"2024-02-26T14:36:45.670Z","modified":"2024-05-16T12:24:01.997Z","1.1.4":"2024-03-18T14:24:42.522Z","1.1.5":"2024-03-18T14:27:13.532Z","1.1.6":"2024-04-02T11:36:54.962Z","1.1.8":"2024-04-02T11:57:28.318Z","1.1.9":"2024-04-30T10:38:58.336Z","1.1.10":"2024-05-16T11:02:34.724Z","1.1.11":"2024-05-16T11:20:26.828Z","1.1.12":"2024-05-16T12:24:01.793Z"},"maintainers":[{"name":"delimka","email":"delima021@gmail.com"}],"description":"Library for form state management and validation","readme":"```markdown\r\n# @delimka/formedible \r\n\r\nThe @delimka/formedible library is the practical component of my bachelor's thesis for form validation with basic configuration options.\r\n## Features\r\n\r\n- **Flexible Validation Rules**: Support for a wide range of validation rules including required fields, minimum/maximum length, custom regex, and custom logic validation.\r\n- **Asynchronous Validation**: Support for asynchronous validation for fields requiring server-side validation.\r\n- **Group Validation**: Validate fields as a group, allowing for complex validation scenarios like password matching.\r\n- **Custom Error Messages**: Define custom error messages for each validation rule to provide a better user experience.\r\n- **Extensive Configuration Options**: Every aspect of the validation process can be customized to fit your form's requirements.\r\n\r\n## Installation\r\n\r\nInstall @delimka/formedible with npm:\r\n\r\n```bash\r\nnpm install @delimka/formedible\r\n\r\n\r\nOr with yarn:\r\n\r\n```bash\r\nyarn add @delimka/formedible\r\n```\r\n\r\n## Table of Contents\r\n1. [Introduction](#introduction)\r\n2. [Features](#features)\r\n3. [Installation](#installation)\r\n4. [Usage](#usage)\r\n - [Basic Usage](#basic-usage)\r\n - [Advanced Usage](#advanced-usage)\r\n5. [Examples](#examples-and-components)\r\n6. [Contributing](#contributing)\r\n7. [License](#license)\r\n\r\n## Introduction\r\n\r\nThe @delimka/formedible library is the practical component of my bachelor's thesis. It leverages React's native hooks to provide an intuitive and declarative way to handle forms without the overhead of additional dependencies.\r\n\r\n## Features\r\n\r\n### Dynamic Form Handling\r\nFormEdible is built to dynamically manage the state of your forms in React applications. It automates the tedious processes involved in handling form submissions, including the dynamic addition and removal of fields. This makes it ideal for situations where form fields need to change based on user interaction.\r\n\r\n### Comprehensive Validation\r\nFormEdible supports a wide range of validations out of the box, including required fields, email formatting, URL validation, phone number formats, and custom regex patterns. Moreover, it provides advanced validations such as conditional validations where the validation rules can depend on the values of other fields in the form.\r\n\r\n### Asynchronous Validation\r\nThe library allows for asynchronous validation functions, enabling integration with server-side checks (like username availability) without complicating the client-side logic. This feature ensures that your forms can handle complex validation scenarios, providing feedback to users in real-time.\r\n\r\n### Customizable Feedback Mechanisms\r\nDevelopers can customize validation messages and the behavior of the form upon validation events. Callbacks for validation start, success, and error events are provided, allowing fine-grained control over the user experience during form interactions.\r\n\r\n### State Management with React Hooks\r\nBy leveraging React hooks, FormEdible manages form state efficiently without requiring external state management libraries. This reduces the overhead and keeps your project lighter and faster.\r\n\r\n### Extensible and Configurable\r\nEvery aspect of FormEdible is designed to be easily configurable. This includes setting initial values, configuring field-specific validations, anddefining how group validations should behave. The library’s API is designed to be extended, allowing developers to add custom functionalities as needed.\r\n\r\n### Detailed Features Section\r\n\r\n#### 1. Comprehensive Validation\r\n\r\nFormEdible supports a wide range of built-in validation types, making it easy to ensure data integrity in your forms. Below is a table describing some type of validation available:\r\n\r\n| Validation Type | Description | Example Configuration |\r\n|--------------------|-------------------------------------------------------------------------------|------------------------------------------------|\r\n| `isRequired` | Ensures the field must not be empty. | `{ isRequired: true }` |\r\n| `isMinLength` | Specifies the minimum length for the field's value. | `{ isMinLength: 3 }` |\r\n| `isMaxLength` | Specifies the maximum length for the field's value. | `{ isMaxLength: 20 }` |\r\n| `isEqualTo` | Requires the field's value to match another specified field's value. | `{ isEqualTo: 'confirmPassword' }` |\r\n| `isNotEqual` | Requires the field's value not to match another specified field's value. | `{ isNotEqual: 'currentPassword' }` |\r\n| `isEmail` | Validates that the field's value conforms to a valid email format. | `{ isEmail: true }` |\r\n| `isPhone` | Validates that the field's value conforms to a valid phone number format. | `{ isPhone: true }` |\r\n| `isDate` | Validates that the field's value matches a valid date format (YYYY-MM-DD). | `{ isDate: true }` |\r\n| `isUrl` | Validates that the field's value is a valid URL. | `{ isUrl: true }` |\r\n| `customValidate` | Allows for custom function validations for complex scenarios. | `{ customValidate: value => value.startsWith('A') }` |\r\n| `condition` | Allows conditional validations based on other field values. | `{ condition: 'greaterThan', conditionValue: 'age' }` |\r\n\r\nThese validation types provide the flexibility to handle nearly any data validation requirement your forms may need.\r\n\r\n#### 2. Simplified State Management with React Hooks\r\n\r\nFormEdible leverages React hooks to simplify state management in forms, eliminating the need for external state management libraries and reducing boilerplate. The table below illustrates how FormEdible streamlines form state management:\r\n\r\n| Feature | Description | Benefits |\r\n|---------------------------|-------------------------------------------------------------------------------|--------------------------------------------------------------------------|\r\n| **Hooks-Based Architecture** | Uses React's `useReducer` and `useEffect` for local state management. | - Reduces the complexity of managing form state.
- Integrates easily with existing React applications. |\r\n| **Single Source of Truth** | Maintains form state centrally within the hook, accessible to all components. | - Simplifies debugging and testing.
- Ensures consistency across components. |\r\n| **Immutable State Updates** | Utilizes functional updates to ensure state immutability. | - Prevents side effects and bugs related to state mutations.
- Enhances performance by avoiding unnecessary re-renders. |\r\n| **Asynchronous Support** | Supports asynchronous validation and field updates. | - Allows for real-time validation against server-side constraints.
- Facilitates dynamic form adjustments based on user input. |\r\n\r\n\r\n## Installation\r\n\r\nInstalling FormEdible is straightforward and can be done using npm or yarn, depending on your preference. Below are the instructions for both methods:\r\n\r\n### Using npm:\r\n\r\nOpen your terminal and run the following command in your project directory:\r\n\r\n```bash\r\nnpm install formedible\r\n```\r\n\r\n### Using yarn:\r\n\r\nIf you prefer using yarn, run this command instead:\r\n\r\n```bash\r\nyarn add formedible\r\n```\r\n\r\n### Peer Dependencies\r\n\r\nFormEdible is built on React, so make sure that your project is set up with React 16.8.0 or higher, as it relies on hooks. If React is not yet installed in your project, you can install it via npm or yarn:\r\n\r\n```bash\r\nnpm install react@^16.8.0 react-dom@^16.8.0\r\n```\r\n\r\nor\r\n\r\n```bash\r\nyarn add react@^16.8.0 react-dom@^16.8.0\r\n```\r\n\r\n### TypeScript Support\r\n\r\nFormEdible includes TypeScript definitions out of the box, so there's no need for additional installation steps to use it in a TypeScript project. Just ensure your TypeScript version is compatible.\r\n\r\n---\r\n## Usage\r\n\r\nFormEdible is designed to be easy to use with intuitive setup steps. Here’s how you can get started:\r\n\r\n### Basic Usage\r\n\r\n#### Setting Up a Form\r\n\r\nTo use FormEdible, you need to import the hook from the library and define your form configuration.\r\n\r\n1. **Import the useFormedible Hook:**\r\n\r\n```jsx\r\nimport { useFormedible } from 'formedible';\r\n```\r\n\r\n2. **Define the Configuration for Your Form:**\r\n\r\nCreate a configuration object where keys are the names of the form fields and the values are configuration objects for each field.\r\n\r\n```jsx\r\nconst formConfig = {\r\n username: {\r\n isRequired: true,\r\n isMinLength: 3,\r\n isMaxLength: 20,\r\n messages: {\r\n isRequired: \"Username is required\",\r\n isMinLength: \"Username must be at least 3 characters\",\r\n isMaxLength: \"Username must be no more than 20 characters\"\r\n }\r\n },\r\n email: {\r\n isRequired: true,\r\n isEmail: true,\r\n messages: {\r\n isRequired: \"Email is required\",\r\n isEmail: \"Please enter a valid email address\"\r\n }\r\n }\r\n};\r\n```\r\n\r\n3. **Initialize the Form Hook:**\r\n\r\n```jsx\r\nconst { state, dispatch, validateSingleField, addField, removeField, validateAllFields, trigger } = useFormedible({\r\n configs: formConfig\r\n});\r\n```\r\n\r\n4. **Create the Form Component:**\r\n\r\n```jsx\r\nfunction MyForm() {\r\n const handleSubmit = async (event) => {\r\n event.preventDefault();\r\n const isValid = await trigger();\r\n if (isValid) {\r\n console.log(\"Form data:\", state.values);\r\n // Handle form submission\r\n } else {\r\n console.error(\"Validation errors:\", state.errors);\r\n }\r\n };\r\n\r\n return (\r\n
\r\n dispatch({ type: 'CHANGE', payload: { field: e.target.name, value: e.target.value } })}\r\n onBlur={() => validateSingleField('username')}\r\n />\r\n {state.errors.username && {state.errors.username}}\r\n\r\n dispatch({ type: 'CHANGE', payload: { field: e.target.name, value: e.target.value } })}\r\n onBlur={() => validateSingleField('email')}\r\n />\r\n {state.errors.email && {state.errors.email}}\r\n\r\n \r\n \r\n );\r\n}\r\n```\r\n\r\n### Methods and Functions\r\n\r\nHere’s a table describing some of the primary methods and functions provided by FormEdible:\r\n\r\n| Method/Function | Description |\r\n|-----------------------|------------------------------------------------------------------------|\r\n| `validateSingleField` | Validates a single field based on the provided field name. |\r\n| `addField` | Adds a new field dynamically to the form with the specified settings. |\r\n| `removeField` | Removes a specified field from the form. |\r\n| `validateAllFields` | Validates all fields in the form at once. |\r\n| `trigger` | Triggers validation for all or specified fields and returns validation results. |\r\n\r\nThese functions are part of the object returned by the `useFormedible` hook and are essential for managing the form state and validation.\r\n\r\n---\r\n\r\n### Available Validations Table\r\n\r\nHere’s a detailed look at the types of validations you can implement with FormEdible:\r\n\r\n| Validation Type | Description | Example Usage |\r\n|--------------------|-------------------------------------------------------------------------------|------------------------------------------------------|\r\n| `isRequired` | Field must not be empty. | `{ isRequired: true }` |\r\n| `isMinLength` | Minimum length for the field's value. | `{ isMinLength: 3 }` |\r\n| `isMaxLength` | Maximum length for the field's value. | `{ isMaxLength: 20 }` |\r\n| `isEqualTo` | The field's value must match another field's value. | `{ isEqualTo: 'confirmPassword' }` |\r\n| `isNotEqual` | The field's value must not match another field's value. | `{ isNotEqual: 'currentPassword' }` |\r\n| `isEmail` | The field's value must be a valid email format. | `{ isEmail: true }` |\r\n| `isPhone` | The field's value must be a valid phone number format. | `{ isPhone: true }` |\r\n| `isDate` | The field's value must be a valid date format (YYYY-MM-DD). | `{ isDate: true }` |\r\n| `isUrl` | The field's value must be a valid URL format. | `{ isUrl: true }` |\r\n| `customValidate` | Custom function for complex validations. | `{ customValidate: (value) => value.startsWith('A')}`|\r\n| `condition` | Apply conditional validation based on another field's value. | `{ condition: 'greaterThan', conditionValue: 'age' }`|\r\n\r\nLet's detail the functionality of the conditional validation with a table that outlines the different types of conditional validations supported by FormEdible. This table will help you understand how each condition is applied and the expected input and behavior:\r\n\r\n### Conditional Validations Table\r\n\r\n| Condition Type | Description | Required Parameters | Example Usage |\r\n|------------------|---------------------------------------------------------------------|------------------------------------------|-------------------------------------------------|\r\n| `greaterThan` | Ensures the field's value is greater than another field's value. | `conditionValue`: Field to compare with | `{ condition: 'greaterThan', conditionValue: 'minimumAge' }` |\r\n| `lessThan` | Ensures the field's value is less than another field's value. | `conditionValue`: Field to compare with | `{ condition: 'lessThan', conditionValue: 'maximumAge' }` |\r\n| `between` | Ensures the field's value is between two specified values. | `conditionValue`: [minValue, maxValue] | `{ condition: 'between', conditionValue: [18, 60] }` |\r\n| `matches` | Ensures the field's value matches a specified regular expression. | `conditionValue`: RegExp | `{ condition: 'matches', conditionValue: /^[a-zA-Z]+$/ }` |\r\n| `custom` | Applies a custom function for validation. | `conditionValue`: Function | `{ condition: 'custom', conditionValue: (value) => value.startsWith('A') }` |\r\n\r\nHandle more complex validation scenarios where the requirement for a field depends on other fields:\r\n\r\n```jsx\r\nconst conditionalValidationConfig = {\r\n discountCode: {\r\n isRequired: true,\r\n condition: 'greaterThan',\r\n conditionValue: 'amount',\r\n conditionMessage: \"Discount only applies for amounts greater than $100\"\r\n }\r\n};\r\n```\r\n\r\n\r\n## Advanced Usage\r\n\r\n### Handling Complex Form Structures\r\n\r\nFormEdible is designed to handle complex form structures including nested fields and dynamic sections. This capability makes it especially useful for enterprise-level applications where forms can become highly dynamic and dependent on user data.\r\n\r\n#### Dynamic Field Manipulation\r\n\r\nYou can add or remove fields on the fly based on user interactions, such as adding multiple addresses or contacts in a single form. Here's how you can handle such scenarios:\r\n\r\n```jsx\r\nfunction DynamicForm() {\r\n const { state, addField, removeField, dispatch } = useFormedible({ configs: initialConfigs });\r\n\r\n const handleAddField = () => {\r\n addField({\r\n name: `newField_${new Date().getTime()}`, // Unique name for the field\r\n isRequired: true,\r\n messages: { isRequired: \"This field is required\" }\r\n });\r\n };\r\n\r\n const handleRemoveField = (fieldName) => {\r\n removeField(fieldName);\r\n };\r\n\r\n // Render logic here\r\n}\r\n```\r\n\r\n### Asynchronous Validation with `asyncValidate`\r\n\r\nAsynchronous validation (`asyncValidate`) in FormEdible allows you to integrate server-side checks into your form validation process. This feature is crucial for scenarios where validation criteria cannot be confirmed purely through client-side logic, such as checking the availability of a username or email address in your database.\r\n\r\n### Concept\r\n\r\nThe `asyncValidate` function is specified within the field configuration and is executed after all synchronous validations pass. This function should return a promise that resolves to a string (the error message) if validation fails, or `null` if validation succeeds.\r\n\r\n### Example Usage\r\n\r\nHere's a simple example of how to use `asyncValidate` to check if a username is already taken:\r\n\r\n```jsx\r\nconst formConfig = {\r\n username: {\r\n isRequired: true,\r\n asyncValidate: async (value) => {\r\n const response = await fetch(`/api/check-username?username=${encodeURIComponent(value)}`);\r\n const { isAvailable } = await response.json();\r\n return isAvailable ? null : \"Username is already taken.\";\r\n },\r\n messages: {\r\n isRequired: \"Username is required\"\r\n }\r\n }\r\n};\r\n\r\nfunction UsernameForm() {\r\n const { state, dispatch, trigger } = useFormedible({ configs: formConfig });\r\n\r\n const handleSubmit = async (event) => {\r\n event.preventDefault();\r\n const isValid = await trigger(); // This triggers both sync and async validations\r\n\r\n if (isValid) {\r\n console.log(\"Username is available and the form is valid!\");\r\n } else {\r\n console.error(\"Validation errors:\", state.errors);\r\n }\r\n };\r\n\r\n return (\r\n
\r\n dispatch({ type: 'CHANGE', payload: { field: 'username', value: e.target.value } })}\r\n />\r\n {state.errors.username && {state.errors.username}}\r\n \r\n \r\n );\r\n}\r\n```\r\n\r\n\r\n### Group Validations\r\n\r\nGroup validations in FormEdible enable you to apply rules across multiple fields, which is useful when the validity of one field depends on values from others. This feature is especially valuable in complex forms requiring coordinated input across several fields.\r\n\r\n#### Example Usage\r\n\r\nImagine a form where the user must enter at least one form of contact information, either a phone number or an email address. Here's how you might set up group validations to ensure that at least one of these fields is filled:\r\n\r\n```jsx\r\n// Define the form configuration for email and phone\r\nconst formConfig = {\r\n email: {\r\n isRequired: false,\r\n isEmail: true,\r\n messages: {\r\n isEmail: \"Please enter a valid email address\"\r\n }\r\n },\r\n phone: {\r\n isRequired: false,\r\n isPhone: true,\r\n messages: {\r\n isPhone: \"Please enter a valid phone number\"\r\n }\r\n }\r\n};\r\n\r\n// Group validation to ensure at least one contact method is provided\r\nfunction validateContactInfo(values) {\r\n if (!values.email && !values.phone) {\r\n return \"At least one contact method is required: email or phone.\";\r\n }\r\n return null;\r\n}\r\n\r\nfunction ContactForm() {\r\n const { state, dispatch, trigger } = useFormedible({ configs: formConfig });\r\n\r\n const handleSubmit = async (event) => {\r\n event.preventDefault();\r\n const isValid = await trigger(); // Triggers individual field validations\r\n const groupError = validateContactInfo(state.values); // Check group validation\r\n\r\n if (isValid && !groupError) {\r\n console.log(\"Form data:\", state.values);\r\n } else {\r\n console.error(\"Validation errors:\", state.errors, \"Group Error:\", groupError);\r\n }\r\n };\r\n\r\n return (\r\n
\r\n dispatch({ type: 'CHANGE', payload: { field: 'email', value: e.target.value } })}\r\n />\r\n dispatch({ type: 'CHANGE', payload: { field: 'phone', value: e.target.value } })}\r\n />\r\n {groupError && {groupError}}\r\n \r\n \r\n );\r\n}\r\n```\r\n\r\nThis example illustrates how to set up a form with group validations using FormEdible, ensuring that users provide necessary contact information by fulfilling at least one of the specified conditions.\r\n\r\n### Custom Validation Functions\r\n\r\nFormEdible allows you to define custom validation functions, providing flexibility to implement specific validation rules that go beyond standard validation options. These custom functions enable you to add unique constraints tailored to your application's requirements.\r\n\r\n#### Implementation\r\n\r\nTo implement a custom validation function, you define it within the `customValidate` property of your field configuration. The function receives two arguments:\r\n- **value:** The current value of the field being validated.\r\n- **allValues:** An object containing all current values of the form, allowing cross-field validation.\r\n\r\n#### Example Usage\r\n\r\nIn the following example, we implement a custom validation for a username field. The validation rule is that the username should not start with the prefix 'admin', which might be reserved for system-generated accounts or administrators.\r\n\r\n```jsx\r\nconst formConfig = {\r\n username: {\r\n customValidate: (value, allValues) => {\r\n // Check if the username starts with 'admin'\r\n if (value.startsWith('admin')) {\r\n return \"Username cannot start with 'admin'.\";\r\n }\r\n\r\n // Optional: Additional complex logic can be implemented here\r\n // For example, you might want to ensure that the username and email fields are not identical\r\n if (value === allValues.email) {\r\n return \"Username and email cannot be the same.\";\r\n }\r\n\r\n // Return null if no errors are found\r\n return null;\r\n },\r\n messages: {\r\n customValidate: \"Custom validation failed\", // This is an optional default error message if not returned by customValidate function\r\n }\r\n }\r\n};\r\n```\r\n\r\n#### Key Points\r\n\r\n- **Flexibility:** Custom validators can access and perform logic based on the entire form state, not just the field they are associated with.\r\n- **Dynamic Feedback:** These functions can return specific error messages, making it clear to users what adjustments they need to make.\r\n- **Reusability:** Define these functions externally and reuse them across different forms or components within your application to keep your code DRY.\r\n\r\n\r\n### Available Validations Table\r\n\r\nHere’s a detailed look at the types of validations you can implement with FormEdible:\r\n\r\n| Validation Type | Description | Example Usage |\r\n|--------------------|-------------------------------------------------------------------------------|------------------------------------------------------|\r\n| `isRequired` | Field must not be empty. | `{ isRequired: true }` |\r\n| `isMinLength` | Minimum length for the field's value. | `{ isMinLength: 3 }` |\r\n| `isMaxLength` | Maximum length for the field's value. | `{ isMaxLength: 20 }` |\r\n| `isEqualTo` | The field's value must match another field's value. | `{ isEqualTo: 'confirmPassword' }` |\r\n| `isNotEqual` | The field's value must not match another field's value. | `{ isNotEqual: 'currentPassword' }` |\r\n| `isEmail` | The field's value must be a valid email format. | `{ isEmail: true }` |\r\n| `isPhone` | The field's value must be a valid phone number format. | `{ isPhone: true }` |\r\n| `isDate` | The field's value must be a valid date format (YYYY-MM-DD). | `{ isDate: true }` |\r\n| `isUrl` | The field's value must be a valid URL format. | `{ isUrl: true }` |\r\n| `customValidate` | Custom function for complex validations. | `{ customValidate: (value) => value.startsWith('A')}`|\r\n| `condition` | Apply conditional validation based on another field's value. | `{ condition: 'greaterThan', conditionValue: 'age' }`|\r\n\r\n\r\n\r\n## Examples and components\r\n\r\n\r\n## Live preview of usage Zod and React-hook-form in comparison with FormEdible\r\nLive preview: https://formedible-react-hook-form-zod.web.app/\r\n","readmeFilename":"README.md"}