{"_id":"@doguh/mui-form","_rev":"2-9c8e26cf66c0e195d3796c2d0cb339b1","name":"@doguh/mui-form","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@doguh/mui-form","version":"0.0.1","description":">","author":{"name":"doguh"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/doguh/mui-form.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts test --env=jsdom","test:watch":"react-scripts test --env=jsdom","build":"rollup -c","start":"rollup -c -w","prepare":"npm run build","predeploy":"cd example && npm install && npm run build","deploy":"gh-pages -d example/build"},"peerDependencies":{"@material-ui/core":"^3.9.1","prop-types":"^15.5.4","react":"^15.0.0 || ^16.0.0","react-dom":"^15.0.0 || ^16.0.0"},"devDependencies":{"@svgr/rollup":"^2.4.1","babel-core":"^6.26.3","babel-eslint":"^8.2.5","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cross-env":"^5.1.4","eslint":"^5.0.1","eslint-config-standard":"^11.0.0","eslint-config-standard-react":"^6.0.0","eslint-plugin-import":"^2.13.0","eslint-plugin-node":"^7.0.1","eslint-plugin-promise":"^4.0.0","eslint-plugin-react":"^7.10.0","eslint-plugin-standard":"^3.1.0","gh-pages":"^1.2.0","react":"^16.4.1","react-dom":"^16.4.1","react-scripts":"^1.1.4","rollup":"^0.64.1","rollup-plugin-babel":"^3.0.7","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-url":"^1.4.0"},"gitHead":"f37994282904daa3dd5dfafd02850d82dd6c18f5","bugs":{"url":"https://github.com/doguh/mui-form/issues"},"homepage":"https://github.com/doguh/mui-form#readme","_id":"@doguh/mui-form@0.0.1","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"doguh","email":"phendrax@gmail.com"},"dist":{"integrity":"sha512-B8jv7YTVisgDqMEAeR0UN63kjBAAB+6uYibg1qr4Hr8l4txGCawgSS2UTm1XntQkQSvg5AizB8tnZLwNqjA+Ow==","shasum":"a6b9fb27616ca3eddab45d45815764860e95131e","tarball":"https://registry.npmjs.org/@doguh/mui-form/-/mui-form-0.0.1.tgz","fileCount":6,"unpackedSize":83706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWeTrCRA9TVsSAnZWagAALJgP/RpJX5uPYBHxsrgJq8SA\nA3uYKxSzCHQrekcZFWtFq3dMes9X0twufid8HEGd1IpDh2bUVRWadggYjKiu\nlDjyIIOT/8ret/F3un/19z8XpBcIgm4egW+gnXv69xDJp7mwykZ9eR5RGAdL\nOH1auMlnFY5/75Y8IUzYb5S8rhUmSYdK5tX551Y0qaOrCYeZ3YFMbVFuzfMT\n9ld+ppCslZU8v9dGaYYIPvnAnV3TH8pyyGCw8/hHZAf5VDG2bF+JTR4yNAAA\ngB9UmzLYjEhlz5oRxri1SQunydtTtIyQZm1cM21zohY9+KlP430/JyBkmsML\niTG8WTG2pkaPyw9Z1RfKqvQietolcGU4DDpDYiZldPs2Fttu16QS5rybosVj\neIhqzX491dZl2ijSki4EWKkabCSz/BQhcn+NKP+3wyu8Z30beQuThLdLQFkq\ncy9F02h9euCtvnmMZ4E87zixPum9uidBsFLUPIc5QKiixR0nHnQeGAOFAo9y\nb5Yy+qVOusEnVQOUOcA8nsIA3NDz5PKasRTFsRIRa5fFWH/sS9+8bYuOsyha\ndy4C6jJ+QK3rSkOhFfz2g6zf5sO2sW1XN7HxJjI6VBzsqGtlKUSJy/+WYlNS\n8wpxvnHSOp2KDpkdORTyHU4YGiw5lKlh+WpjVeh5Cj1CfVwOzohS/3gtuyCB\n/XA6\r\n=D5BS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzCclcS3SHUc3XCuh+s/MFyDzdeU5SBt1JLomY7ZQ4ggIgFlwGQAi9pz0Ep0Mr+9lC+XIItjhye7aS3c606rlbq60="}]},"maintainers":[{"name":"doguh","email":"phendrax@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mui-form_0.0.1_1549395179313_0.6580711232238987"},"_hasShrinkwrap":false},"0.0.2":{"name":"@doguh/mui-form","version":"0.0.2","description":">","author":{"name":"doguh"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/doguh/mui-form.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts test --env=jsdom","test:watch":"react-scripts test --env=jsdom","build":"rollup -c","start":"rollup -c -w","prepare":"npm run build","predeploy":"cd example && npm install && npm run build","deploy":"gh-pages -d example/build"},"peerDependencies":{"@material-ui/core":"^3.9.1","prop-types":"^15.5.4","react":"^15.0.0 || ^16.0.0","react-dom":"^15.0.0 || ^16.0.0"},"devDependencies":{"@svgr/rollup":"^2.4.1","babel-core":"^6.26.3","babel-eslint":"^8.2.5","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cross-env":"^5.1.4","eslint":"^5.0.1","eslint-config-standard":"^11.0.0","eslint-config-standard-react":"^6.0.0","eslint-plugin-import":"^2.13.0","eslint-plugin-node":"^7.0.1","eslint-plugin-promise":"^4.0.0","eslint-plugin-react":"^7.10.0","eslint-plugin-standard":"^3.1.0","gh-pages":"^1.2.0","react":"^16.4.1","react-dom":"^16.4.1","react-scripts":"^1.1.4","rollup":"^0.64.1","rollup-plugin-babel":"^3.0.7","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-url":"^1.4.0"},"gitHead":"143dd5c0feafbcb78435a83459307dd6f933977b","bugs":{"url":"https://github.com/doguh/mui-form/issues"},"homepage":"https://github.com/doguh/mui-form#readme","_id":"@doguh/mui-form@0.0.2","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"doguh","email":"phendrax@gmail.com"},"dist":{"integrity":"sha512-lU+m25JlvxKERjb9UpNB6ZDiBpmGmDqQz/sgfVG3neWP3f+KD+yR/wkK3Xgk+5dxU/K1o15bv0AEzoUAKQuyGQ==","shasum":"85d9934d0de4d145e54743eba480dd1e2baa2c8d","tarball":"https://registry.npmjs.org/@doguh/mui-form/-/mui-form-0.0.2.tgz","fileCount":6,"unpackedSize":84083,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXKvnCRA9TVsSAnZWagAAf3gP/2VbyHBs2i/JAJCz+tGx\nZpRFJ5jJio5PFiMTJB2F2vXItobMAFbaZmPY7603vgmRzHYTsKJ2nC4QYOxc\nJblxquNsdcWQTc5xW7kw/X/0wijqVlr63ALZvIgxFbGqxWbEwkoh5fRZfQmv\n94TvE/yfK/b1raIbILVMcST6xe0BqrHbCnOA4hdyf2td2vooAbNXFtubuz2C\nw96QFJoMF1zR3kmwPrrI/RIO4GU3oiLBrsqElhUV1qJYoj+YLbdDbRRUrj6b\nMWR5C5MQElbm7yYnkLSRbiPWqQT2Q/LSARBO2TO8wmTb8Ib9VN5AGLNVi607\nx+8Q/sDsUso0CEmv3KpT40Pjidn2VtQV7s8+LXbIBkDhCM4f4huen/nXr/jm\noQiYzCJv4bGzyERHiVyYhN882Ub8K5b/ZY5csEwwPsMtPSpVmrix5jbHm8Le\nnmc3myfFqbRuTV1Wq1oIz8Syi5F9g0A+jbJmRA9v1m3zFVqJ3LuCgddb7Y1v\nLMEvf9u3u2RS5UZMS3NKdDlck57RuQxs4cnVpR+JIHdXztMYkiCjTyi/CQVM\nssnJ6Omgjqq90UpQRAcNwDiYlxBsy4un5+0DOgKmmq8vDew+I93BhO6y/mD7\n1VsquT3gnUYNJg74R3ZDJKKDBvHro3Lr7XTliRQ9fvWNWhFbBWjxCPDkk9U1\ne5Y1\r\n=NC/K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHc+PVOza9V/OF5/AMTz/l1fJbTsbW9kqT9GRAgkK+mQAiEA8R0oGlcaKDIcrIvCwEUrH1jrXk1xzGSXogLqX8D5Ml4="}]},"maintainers":[{"name":"doguh","email":"phendrax@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mui-form_0.0.2_1549577191115_0.5365312995942864"},"_hasShrinkwrap":false}},"time":{"created":"2019-02-05T19:32:59.071Z","0.0.1":"2019-02-05T19:32:59.456Z","modified":"2022-04-05T05:06:41.453Z","0.0.2":"2019-02-07T22:06:31.213Z"},"maintainers":[{"name":"doguh","email":"phendrax@gmail.com"}],"description":">","homepage":"https://github.com/doguh/mui-form#readme","repository":{"type":"git","url":"git+https://github.com/doguh/mui-form.git"},"author":{"name":"doguh"},"bugs":{"url":"https://github.com/doguh/mui-form/issues"},"license":"MIT","readme":"# mui-form\r\n\r\n>\r\n\r\n[![NPM](https://img.shields.io/npm/v/mui-form.svg)](https://www.npmjs.com/package/@doguh/mui-form) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\r\n\r\nSimplifies (hopefully) the creation of forms with React / Material-UI.\r\n\r\n## Install\r\n\r\n```bash\r\nnpm install --save @doguh/mui-form\r\n```\r\n\r\nMake sure to install `material-ui` as it is required as a peer dependency.\r\n\r\n```bash\r\nnpm install --save @material-ui/core\r\n```\r\n\r\n## Usage\r\n\r\n```jsx\r\nimport React, { Component } from \"react\";\r\nimport { Button } from \"@material-ui/core\";\r\nimport Form, { InputField } from \"mui-form\";\r\n\r\nclass Example extends Component {\r\n  state = {\r\n    user: {\r\n      name: \"Dupond\",\r\n      email: \"dupond@dupond\",\r\n      active: true\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Form\r\n        values={this.state.user}\r\n        onSubmit={value => {\r\n          console.log(\"submit user\", value);\r\n          this.setState({ user: value });\r\n        }}\r\n      >\r\n        <InputField type=\"text\" name=\"name\" label=\"Username\" />\r\n        <InputField type=\"email\" name=\"email\" label=\"Email address\" />\r\n        <InputField type=\"checkbox\" name=\"active\" label=\"Active?\" />\r\n        <Button variant=\"contained\" size=\"small\" color=\"primary\" type=\"submit\">\r\n          Submit\r\n        </Button>\r\n      </Form>\r\n    );\r\n  }\r\n}\r\n```\r\n\r\n## Documentation\r\n\r\nThis module exposes 2 components: `Form` and `InputField`.\r\n\r\n### Form\r\n\r\n```js\r\n<Form\r\n  /**\r\n   * values: object\r\n   * each key of the values object should match with the name property\r\n   * of one InputField contained in this Form\r\n   */\r\n  values={this.state.values}\r\n  /**\r\n   * errors: object\r\n   * each key of the errors object can match with an InputField\r\n   * and display an error message next to that field\r\n   *\r\n   * Example:\r\n   * { name: \"At least 3 chars\" }\r\n   */\r\n  errors={this.state.errors}\r\n  /**\r\n   * onSubmit: function\r\n   * called when the form is submitted, it accepts 2 arguments, values and errors\r\n   */\r\n  onSubmit={(values, errors) => {\r\n    if (errors) {\r\n      console.log(\"validation errors\", errors);\r\n    }\r\n    this.setState({ values, errors });\r\n  }}\r\n  /**\r\n   * onChange: function\r\n   * called when any InputField's value is changed,\r\n   * it accepts 2 arguments, values and changedPropName\r\n   */\r\n  onChange={(values, changedPropName) => {\r\n    console.log(\r\n      `\"${changedPropName}\" has changed to \"${values[changedPropName]}\"`\r\n    );\r\n  }}\r\n  /**\r\n   * classes: object\r\n   */\r\n  classes={{}}\r\n  /**\r\n   * className: string\r\n   * class applied to the underlying <form> element\r\n   */\r\n  className=\"\"\r\n  /**\r\n   * noNativeValidate: boolean\r\n   * if true, prevent the browser from doing validation stuffs like\r\n   * checking if required fields are filled\r\n   */\r\n  noNativeValidate\r\n/>\r\n```\r\n\r\n### InputField\r\n\r\n```js\r\n<InputType\r\n  /**\r\n   * type: string (required)\r\n   * can be: text|email|number|select|checkbox|date|time\r\n   */\r\n  type=\"text\"\r\n  /**\r\n   * name: string (required)\r\n   * name is unique: two InputFields in the same Form should not share the same name\r\n   *\r\n   * the value of an InputField is determined by its name and the values prop\r\n   * passed to its Form container\r\n   */\r\n  name=\"username\"\r\n  /**\r\n   * label: string\r\n   */\r\n  label=\"Username\"\r\n  /**\r\n   * placeholder: string\r\n   */\r\n  placeholder=\"Enter your username\"\r\n  /**\r\n   * validate: function|array<function>\r\n   * a function, or a list of function, called when the form is submitted,\r\n   * it takes the value of the InputField as it's unique parameter\r\n   * and should return an error message (string) or falsy if the validation passes\r\n   */\r\n  validate={value => {\r\n    if (value && values.length < 3) {\r\n      return \"At least 3 chars\";\r\n    }\r\n  }}\r\n  /**\r\n   * defaultValue: any\r\n   * default value for this InputField\r\n   */\r\n  defaultValue=\"\"\r\n  /**\r\n   * id: string\r\n   */\r\n  id=\"input-username\"\r\n  /**\r\n   * required: boolean\r\n   */\r\n  required\r\n  /**\r\n   * disabled: boolean\r\n   */\r\n  disabled={false}\r\n  /**\r\n   * className: string\r\n   * class applied to the underlying material-ui element\r\n   */\r\n  className=\"\"\r\n  /**\r\n   * component: Component|function\r\n   * allow usage of custom components\r\n   */\r\n  component={props => <MyCustomComponent {...props} />}\r\n  /**\r\n   * onChange: function\r\n   * called when the InputField's value is changed,\r\n   * it takes the new value as argument\r\n   */\r\n  onChange={value => {\r\n    console.log(`new value: \"${value}\"`);\r\n  }}\r\n/>\r\n```\r\n\r\n## Development\r\n\r\nRun the following commands once to install the dependencies:\r\n\r\n```sh\r\nnpm link # will to an npm install too\r\ncd example\r\nnpm link mui-form\r\nnpm i\r\n```\r\n\r\nLocal development is broken into two parts (ideally using two tabs).\r\n\r\nFirst, run rollup to watch your `src/` module and automatically recompile it into `dist/` whenever you make changes.\r\n\r\n```bash\r\nnpm start # runs rollup with watch flag\r\n```\r\n\r\nThe second part will be running the `example/` create-react-app that's linked to the local version of your module.\r\n\r\n```bash\r\n# (in another tab)\r\ncd example\r\nnpm start # runs create-react-app dev server\r\n```\r\n\r\nNow, anytime you make a change to your library in `src/` or to the example app's `example/src`, `create-react-app` will live-reload your local dev server so you can iterate on your component in real-time.\r\n\r\n## License\r\n\r\nMIT © [doguh](https://github.com/doguh)\r\n","readmeFilename":"README.md"}