{"_id":"@deloitte-digital-au/rhythm-form-react","_rev":"7-89dcb5fef892bced85bfadc0ce7c920e","name":"@deloitte-digital-au/rhythm-form-react","dist-tags":{"latest":"0.1.9"},"versions":{"0.1.9":{"name":"@deloitte-digital-au/rhythm-form-react","version":"0.1.9","description":"Form component library for React projects.","main":"index.js","publishConfig":{"access":"public"},"scripts":{"start":"rhythm-dev-server","build":"gulp build","test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage","lint":"eslint ./src --ext js --ext jsx","lint:fix":"eslint ./src --fix --ext js --ext jsx","generate":"plop --plopfile generators/index.js","docgen":"react-docgen src --out docgen"},"repository":{"type":"git","url":"git+ssh://git@github.com/DeloitteDigitalAPAC/rhythm-ui.git"},"keywords":["forms","reusable","react"],"author":{"name":"Deloitte Digital AU"},"license":"BSD-3-Clause","devDependencies":{"babel-cli":"^6.26.0","babel-eslint":"^8.0.1","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","del":"^3.0.0","enzyme":"^3.1.0","enzyme-adapter-react-16":"^1.0.2","eslint":"^4.9.0","eslint-config-deloitte-react":"^3.1.0","eslint-plugin-import":"^2.8.0","eslint-plugin-jsx-a11y":"^6.0.2","eslint-plugin-react":"^7.4.0","gulp":"^3.9.1","gulp-babel":"^7.0.0","jest":"^21.2.1","jest-enzyme":"^4.0.1","plop":"^1.9.0","prop-types":"^15.6.0","raw-loader":"^0.5.1","react":"^16.0.0","react-docgen":"^2.19.0","run-sequence":"^2.2.0","stylelint":"^8.2.0","stylelint-config-deloitte":"^1.0.1"},"dependencies":{"react-popper":"^1.0.0","react-transition-group":"^2.4.0"},"peerDependencies":{"classnames":">=2.0.0 <3.0.0","react":">=15.0.0 <17.0.0","react-dom":">=15.0.0 <17.0.0"},"jest":{"setupFiles":["./test/jestsetup.js"]},"gitHead":"184540ed065bb4191bc02f6d302d0d7383f31870","bugs":{"url":"https://github.com/DeloitteDigitalAPAC/rhythm-ui/issues"},"homepage":"https://github.com/DeloitteDigitalAPAC/rhythm-ui#readme","_id":"@deloitte-digital-au/rhythm-form-react@0.1.9","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"jennasalau","email":"jenna.salau@gmail.com"},"dist":{"integrity":"sha512-PYCj0oiN5xXsoUJotVF62Eg4535pnpd6/PvWqTxaYgeMs3FT/LuCZXGdzXne8NRxAdL8qV07uFnRZeI/O+AAQA==","shasum":"9c78f09af68958367fb588c8af1673f19f8b1015","tarball":"https://registry.npmjs.org/@deloitte-digital-au/rhythm-form-react/-/rhythm-form-react-0.1.9.tgz","fileCount":59,"unpackedSize":130988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCNLICRA9TVsSAnZWagAA2lMP/13gr1vHlAD05UYcUscv\nElKv69sr+D4Tif5EgW00ZbP2W6H2UXgMDL5g4RvL31obOaWvsBvAdt38kNv0\nikv2MyX7EqEKjS3DadF6Gzo/LCGeCQOEAZ4d1KE6ctxujLXFWRg9eJKNT88o\nu9TIWGh+QHF40icxS7RE43mof/aHc6wgWfuy2cXNdMidsLrwilA60wB0aJvn\neIybVdBnehK4ryRsSHGgpzlv3iR1NeQDkV9W7fHGr18Uo4lRx4W5Inq2mzGp\n5MhEGa2KDMOhul8FAreedNJGvjZ0jJPGMxpboX4VmiEypYBL1TZfDyvE7okH\n2vd+WFDguTGsRdrSPj/ISeZQkqmR6OXe74m/BTldvOKg949A/6ocxit9AnXB\nfb22aEv6edFFPEttDdGqecpJxM3WX4VE/gZEY14sotpw72Rj4qSDUDO7hlH6\nk9sMGZLKUVvGao9TwfkD5rnfqEvtff8Hk9AbwqxwLDI9oi8oe8KtsQwktSyt\nJiSCVls23rdXj2Xjlbe1AJgylZbOMzo0DTbqbpGviJFZKlbPReijQglWG/y0\nc+mkHBSDHlVWmLsJ+cq6P3YBZD+95TGOW74hrEI+7cbohxO3oOgv0BjvuS+J\n1GFM/PfqxIGQqQGucA/C6SOblju3POptl8I+Sk0OgJse8VHwZiEIBUpH7ujw\nXExh\r\n=Ub5p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFvIf+q4LirpQ58k9Uww8O/GoL6wYRU3FRfuwNHcsH7XAiEAt9CDpZf4DEDZvL6KtLznDmpcmJkv5c4VfbDSnzdyz4g="}]},"maintainers":[{"name":"keeganstreet","email":"keeganstreet@gmail.com"},{"name":"dkeeghan","email":"dkeeghan@gmail.com"},{"name":"jennasalau","email":"jenna.salau@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rhythm-form-react_0.1.9_1544082119694_0.3767868406067234"},"_hasShrinkwrap":false}},"time":{"created":"2018-12-06T07:41:59.623Z","0.1.9":"2018-12-06T07:41:59.920Z","modified":"2022-04-05T03:42:25.443Z"},"maintainers":[{"email":"chuang.june@gmail.com","name":"juscc"},{"email":"dkeeghan@gmail.com","name":"dkeeghan"},{"email":"jenna.salau@gmail.com","name":"jennasalau"}],"description":"Form component library for React projects.","homepage":"https://github.com/DeloitteDigitalAPAC/rhythm-ui#readme","keywords":["forms","reusable","react"],"repository":{"type":"git","url":"git+ssh://git@github.com/DeloitteDigitalAPAC/rhythm-ui.git"},"author":{"name":"Deloitte Digital AU"},"bugs":{"url":"https://github.com/DeloitteDigitalAPAC/rhythm-ui/issues"},"license":"BSD-3-Clause","readme":"# Rhythm UI\n\n## rhythm-form-react\n\nForm components for Rhythm UI.\n\n## Installation\n\nFor the moment the library can be installed directly from the repository:\n\n```npm install @deloitte-digital-au/rhythm-form-react```\n\n## Usage\n\n### Using a component\n\nTo use a component, just import it:\n\n```import Text from '@deloitte-digital-au/rhythm-form-react/lib/controls/Text';```\n\nRefer to the component's doc page for a guide to using a specific component.\n\n### Using a component's sass file\n\nEach component also has a sass file that you can import and use however you like.\n\nTo import, just add `/style` to end the component's import path.\n\n```@import \"@deloitte-digital-au/rhythm-form-react/lib/controls/Text/style\";```\n\nThe sass files use a set of default variables which you can customise. \n\nFor now, look at `src/utils/defaults.scss` for the list of variables.\n\n### Using CSS modules\n\nIf you're using CSS modules in your app, you can still use them here with a bit of effort.\n\nThis approach was inspired by the awesome [reactstrap](https://github.com/reactstrap/reactstrap).\n\nEach component can take a `cssModule` prop, which expects a CSS module object. You can use this prop to create a new component with your styles baked in.\n\nYou can structure this any way you like, but as an example, in your project:\n\n```js\nimport Text from '@deloitte-digital-au/rhythm-form-react/lib/controls/Text';\n\n// This could be any css file you want\nimport textStyles from 'my/text/styles';\n\nexport default (props) => \n\n// Now you can use that component elsewhere\nimport Text from '../forms/styled/Text';\n```\n\nIt's important to note that the components inside the component won't be passed the CSS module. This means that things like the