{"_id":"@emilgpa/fomu","_rev":"1-e05f18d652acdf3114c88e8a14fd71f0","name":"@emilgpa/fomu","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@emilgpa/fomu","version":"1.0.0","description":"Fomu (from japanese: フォーム _fōmu_) is a small library that handles forms in react. Its main qualities are:","main":"dist/index.js","umd:main":"dist/fomu.umd.production.js","module":"dist/fomu.esm.js","typings":"dist/index.d.ts","dependencies":{"deepmerge":"^4.2.2","use-context-selector":"^1.3.2"},"devDependencies":{"@testing-library/jest-dom":"^5.11.5","@testing-library/react":"^10.4.9","@testing-library/react-hooks":"^3.4.1","@testing-library/user-event":"^12.1.3","@types/jest":"^26.0.10","@types/node":"^14.14.25","@types/react":"^16.9.48","@types/react-dom":"^16.9.8","@types/webpack":"^4.41.25","@types/webpack-dev-server":"^3.11.1","@typescript-eslint/eslint-plugin":"^3.10.1","@typescript-eslint/parser":"^3.10.1","@welldone-software/why-did-you-render":"^6.2.0","cross-env":"^7.0.2","eslint":"^7.7.0","eslint-plugin-jest-dom":"^3.2.2","eslint-plugin-react":"^7.20.6","eslint-plugin-react-hooks":"^4.1.0","eslint-plugin-testing-library":"^3.8.0","fork-ts-checker-webpack-plugin":"^6.0.5","html-webpack-plugin":"^4.5.0","jest":"^26.4.2","jsdom":"^16.4.0","prettier":"^2.1.1","prettier-plugin-organize-imports":"^1.1.1","react":"^16.14.0","react-dom":"^16.14.0","rimraf":"^3.0.2","rome":"^10.0.4-beta","ts-jest":"^26.3.0","ts-loader":"^8.0.11","ts-node":"^9.1.1","tsconfig-paths-webpack-plugin":"^3.3.0","tsdx":"^0.13.3","tslib":"^2.0.1","typescript":"^4.2.3","utility-types":"^3.10.0","webpack":"^5.10.0","webpack-cli":"^4.2.0","webpack-dev-server":"^3.11.0","whatwg-fetch":"^3.4.0"},"scripts":{"test":"jest --verbose","format":"prettier --write src","start":"cross-env NODE_ENV=development tsdx watch --verbose","prebuild":"rimraf dist","build":"cross-env NODE_ENV=production tsdx build  --tsconfig ./src/tsconfig.json --entry ./src/index.ts --format=esm","prepublish":"npm run build","lint":"npm run rome","dev":"webpack serve --mode development"},"repository":{"type":"git","url":"git+https://github.com/monoculum/fomu.git"},"keywords":["fomu","form","react","react-dom","validation","forms"],"jest":{"globals":{"ts-jest":{"tsConfig":"./tsconfig.json"}},"transform":{"^.+\\.tsx?$":"ts-jest"},"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"modulePathIgnorePatterns":["./dist/"],"setupFilesAfterEnv":["./tests/setup.ts"]},"author":{"name":"Emilio García-Pumarino Álvarez","email":"emili.tfe@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/monoculum/fomu/issues"},"homepage":"https://github.com/monoculum/fomu#readme","directories":{"test":"tests"},"gitHead":"99d12132040e7df43b000152df2b96f3131d9226","_id":"@emilgpa/fomu@1.0.0","_nodeVersion":"15.14.0","_npmVersion":"7.18.1","dist":{"integrity":"sha512-aYmDfC/f7aEfaTFkJFmcQkPCrva4VqpAdPsDXHjk93471VQux2Og/HIiTmNH9CpZyJh9iA0ajxv04JMvDYUiJA==","shasum":"063a983d85c89b31005b5c5fbae39a5e19bf8e07","tarball":"https://registry.npmjs.org/@emilgpa/fomu/-/fomu-1.0.0.tgz","fileCount":63,"unpackedSize":504739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIHSlCRA9TVsSAnZWagAAnYsP/itRVRIFzkflBcf0ygHC\nfrGp2UEzw1U31R2ZU27iGEbn5XrUBkbpHNa/SyQJCoDXJWhSeIiMUELiRDiL\nsAOcocs5klkSQrAjiyLK24P8VGA1PdB2vjvPe9A6BJwwB3K+9V165TnCfGTi\nTp7ZxUPjmilB+gT6IX0LzFZpZAXxGPP4knUWUQUpCUzRsHEtiRneFgpKUlWq\n97Atvf8Aq79e+ou09gk2Wxi/oOU/XI4cihu83lya4Rl/aLLrZT9i4C4xtYA9\niHtxqazwfZ5tIYDWZLril8qRSxK71njCvl6Suc6n57TA5gRzzt4DiQkrjbfC\nZqG2pessokFVZQSIjNYdM8pYmoJ2LuBCw7qxhKTZ3dOpP/OWSMSR0pe1f0Nw\n8w/v/r6oSpuaj/fiHEinkXgzuKU0rfS6c83aofLQv7mRQyuRhs1dl8lKxmem\niDr3etmD3QlMjOmB6xzs3Zzon2Tu2htp9SdpjmE2fyVxdlAeKabi9iKmxNDz\nVn8BYfwXKsSEmpxA/mt6kk7mGt5NH4DhPEAm7CBZJBh2H0jJYtkY7DrYI5FA\n/iH3RC6GX+p4XyLie2LS6GVIkFIqHhHDnGlJpMg05FF1YV7GXHKPN/OFpZ/u\nr/Fp03P1U2288vMPgyqjmSXACaLOuZeXPD5HIO3C155sWXXeNiP+ZQYgolFz\nQ3CC\r\n=5fSi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHMovfTNd0lgPIB3o8rElZAk6x4q/4t0P42M0W9PbQEIAiABQzMAoO93I7Fq6wJMkCMmeN+OyQgTiVGIvW7x56X7YQ=="}]},"_npmUser":{"name":"emilgpa","email":"emili.tfe@gmail.com"},"maintainers":[{"name":"emilgpa","email":"emili.tfe@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fomu_1.0.0_1629516964905_0.5579798319780815"},"_hasShrinkwrap":false}},"time":{"created":"2021-08-21T03:36:04.833Z","1.0.0":"2021-08-21T03:36:05.069Z","modified":"2022-04-05T07:33:19.021Z"},"maintainers":[{"name":"emilgpa","email":"emili.tfe@gmail.com"}],"description":"Fomu (from japanese: フォーム _fōmu_) is a small library that handles forms in react. Its main qualities are:","homepage":"https://github.com/monoculum/fomu#readme","keywords":["fomu","form","react","react-dom","validation","forms"],"repository":{"type":"git","url":"git+https://github.com/monoculum/fomu.git"},"author":{"name":"Emilio García-Pumarino Álvarez","email":"emili.tfe@gmail.com"},"bugs":{"url":"https://github.com/monoculum/fomu/issues"},"license":"MIT","readme":"# Fomu\n\nFomu (from japanese: フォーム _fōmu_) is a small library that handles forms in react.\nIts main qualities are:\n\n1. Validation with error messages (async and with possibilty to cancel it!)\n2. Generates JSON for submit or anything else (by abstract components like Scope, Array!)\n3. Handling form submission (canceling previous submitting if there is!)\n\n## ️⚠️Status\n\nCurrently under construction:\n\n-   Document the code and create docs\n-   Optimization (useMemo, useCallback, etc)\n\n## Example\n\n```js\nimport { Fomu, Form, Scope, ArrayField, Input, Checkbox, useFomu } from \"fomu\"\nimport api from \"./my_api\"\n\nconst Example = (props) => {\n    const item = {\n        name: \"Playstation 4\",\n        markets: [\"ES\", \"JP\"],\n    }\n    const markets = [\"US\", \"ES\", \"JP\"]\n\n    /**\n     * reset the form to initial values\n     * @param {FormContext<any>} form - fomu's context\n     */\n    const onReset = (form) => (e) => {\n        e.preventDefault()\n        form.handleReset()\n    }\n\n    /**\n     * cancel all! (validations, submit, etc)\n     * @param {FormContext<any>} form - fomu's context\n     */\n    const onCancel = (form) => (e) => {\n        e.preventDefault()\n        form.handleReset()\n    }\n\n    const ctx = useFomu({\n        id: \"formId\",\n        onSubmit: () => {\n            // the json generated from Fomu would be:\n            // {\n            //     name: \"Playstation 4\",\n            //     markets: [\"US\", \"ES\", \"UK\", \"FR\", \"JP\", \"DE\", \"IT\"],\n            //     _data: {id: \"3242621\"}\n            // }\n            api(ctx.json())\n        },\n    })\n\n    return (\n        <Fomu ctx={ctx}>\n            <Form method=\"post\">\n                {/* it will generate by json() method -> name: \"Playstation 4\" */}\n                <Input\n                    id=\"name\"\n                    path=\"name\"\n                    type=\"string\"\n                    value={item.name}\n                    initialValue={item.name}\n                    placeholder=\"Playstation 4\"\n                    validations={{ required: true }}\n                />\n                {props.errors.name && <span>error! {props.errors.name}</span>}\n                {/* it will generate by json() method -> markets: [\"ES\", \"JP\"] */}\n                <ArrayField id=\"markets\" path=\"markets\" validations={{ required: true }}>\n                    {markets.map((market) => (\n                        <Checkbox\n                            id={market}\n                            path=\"\"\n                            value={market}\n                            initialChecked={item.some((d) => d == market)}\n                            validEmptyValue\n                        />\n                    ))}\n                </ArrayField>\n                {props.errors.markets && <span>error! {props.errors.markets}</span>}\n                {/* it will generate by json() method -> {_data: {id: \"3242621\"}} */}\n                <Input id=\"id\" path=\"_data.id\" type=\"hidden\" value=\"3242621\" initialValue=\"3242621\" />\n                {/* the input \"submit\" is handled by fomu */}\n                <input type=\"submit\" value=\"Publicar\" />\n                <a href=\"\" onClick={onReset(fomu)}>\n                    RESET\n                </a>\n                <a href=\"\" onClick={onCancel(fomu)}>\n                    CANCEL\n                </a>\n                {/* functionality/info debug like \"is submitting\", cancel o reset form */}\n                <FomuDebugger />\n                <div>is submitting?: {props.isSubmitting ? \"yes\" : \"no\"}</div>\n                <div>is validating?: {props.isValidating ? \"yes\" : \"no\"}</div>\n                <div>is validated?: {props.isValidated ? \"yes\" : \"no\"}</div>\n            </Form>\n        </Fomu>\n    )\n}\n```\n","readmeFilename":"README.md"}