{"_id":"@2ui/create-react-component","_rev":"2-1f8fca2deeb69d3e6c7b81c869954efb","name":"@2ui/create-react-component","dist-tags":{"latest":"5.2.0"},"versions":{"5.1.0":{"name":"@2ui/create-react-component","version":"5.1.0","description":"A simple React CLI to generate components instantly and more.","repository":{"type":"git","url":"git+https://github.com/arminbro/generate-react-cli.git"},"bugs":{"url":"https://github.com/arminbro/generate-react-cli/issues"},"author":{"name":"Ryan Atkinson"},"license":"MIT","main":"bin/generate-react","bin":{"generate-react":"bin/generate-react","g-r":"bin/generate-react"},"publishConfig":{"access":"public"},"keywords":["cli","react","build-tools","generate-react-cli"],"engines":{"node":">=10.x","npm":">= 6.x"},"browserslist":["maintained node versions"],"scripts":{"cm":"npx git-cz","prebuild":"rimraf dist","build":"babel src --out-dir dist --ignore 'src/**/*.test.js'","build:watch":"npm run build -- --watch","test":"jest --coverage","test:watch":"npm run test -- --watch","release":"standard-version"},"dependencies":{"chalk":"^4.1.0","commander":"^6.1.0","deep-keys":"^0.5.0","fs-extra":"^9.0.1","inquirer":"^7.3.3","lodash":"^4.17.20","replace":"^1.2.0"},"devDependencies":{"@babel/cli":"^7.11.6","@babel/core":"^7.11.6","@babel/preset-env":"^7.11.5","@commitlint/cli":"^11.0.0","@commitlint/config-conventional":"^11.0.0","babel-eslint":"^10.1.0","eslint":"^7.9.0","eslint-config-prettier":"^6.11.0","eslint-config-react-app":"^5.2.1","eslint-plugin-import":"^2.22.0","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","husky":"^4.3.0","jest":"^26.4.2","prettier":"^2.1.2","pretty-quick":"^3.0.2","rimraf":"^3.0.2","standard-version":"^9.0.0"},"babel":{"presets":[["@babel/preset-env",{"targets":{"node":true}}]]},"jest":{"testEnvironment":"node","collectCoverageFrom":["src/**/*.js"],"coverageThreshold":{"global":{"branches":0,"functions":0,"lines":0,"statements":0}}},"config":{"commitizen":{"path":"cz-conventional-changelog"}},"commitlint":{"extends":["@commitlint/config-conventional"]},"husky":{"hooks":{"pre-commit":"pretty-quick --staged","commit-msg":"commitlint -E HUSKY_GIT_PARAMS"}},"gitHead":"ba68a8d1404bad3fcf4f773a5ecb538d53318aa8","homepage":"https://github.com/arminbro/generate-react-cli#readme","_id":"@2ui/create-react-component@5.1.0","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-Zv3z8kcldbDTJ9l8zA+pYVii4Cunrugi27CQvC9EMj562F5LF2b/dY/GHRT0MS/q09XOZxn0lqT7wWNN7b7rEw==","shasum":"5326378c5e43893a2affc94a9e265fcb70139b83","tarball":"https://registry.npmjs.org/@2ui/create-react-component/-/create-react-component-5.1.0.tgz","fileCount":22,"unpackedSize":46175,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjcPZCRA9TVsSAnZWagAAnRsP/24JQ7vn7He04iY0kXcM\niPO/JlXgkLHjRVm5HS/hWlqdK4YkMYHZ3aBhJ0CC1o9rqp36NdfJeVDJmlLB\nZhiIU+diCZXw9IdODR/P8H+1CBcFRaCodFiAPiwOCOFPw5+M/M7cFZKJ27w9\nQjT1Z8B1/SBC8ubS2T03Xt3c0M88yVHInupuzutRIVTIVqV9zlxvmT/Xvv0C\n/lInUKL3SzBPpGO2sPYDjLh0uUmIvPIGWxyJ8T+bEY0wYVSfPZtmht2l30uv\nUPj564txS4M4PZcRn3Onvn+tYG9faUFolpfxBO37/im7WwQFxjVGxDP32Rh+\nMjgD/ps3DBLxW2LgNeoJm6tQilmFd9S8Czr/amZbdG/LUUsdW+cBU2EAPYCs\nrkcEAgKZ6yL1pqAvrCUZdrAw0iF3O6bZ9dXXBvHVJ1KXMpL/Z6zP22GPF5bU\nf/43AN87S0JXIODAXwiNu4XpKCVsSBxTcSMrxE8MT+gU9HZNw2hsUUINcdtv\nxJroQ5IiqSnVW+KzAEagNE2a11e1HuEa7FKezsk/pjhQLmwJ2VZJSxP2ga3L\nQvm8bJcngVvUOVeEqQybRjHp34NiHFVX5/IrJ118OTAOAA3xNZhmNMosVjbP\nQsLlM0Rhx5qC8utkIkmYJgoXCgSfXrrCMv2WZez2PKUa7nkv8jcnvg72ThKP\nakwi\r\n=DZ5P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFyhv9wsk+TP1eYnzpx0huzUxvbMmIEwPAQeRBOZ3zuAIhAMYLWBOzSf8xWac27qNBTTOuwD5xRfBp/rRbYcyndNxd"}]},"maintainers":[{"name":"ryanatk","email":"ryan@ratkinson.com"}],"_npmUser":{"name":"ryanatk","email":"ryan@ratkinson.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/create-react-component_5.1.0_1603126233066_0.5612536162669273"},"_hasShrinkwrap":false},"5.2.0":{"name":"@2ui/create-react-component","version":"5.2.0","description":"A simple React CLI to generate components instantly and more.","repository":{"type":"git","url":"git+https://github.com/ryanatk/create-react-component.git"},"bugs":{"url":"https://github.com/ryanatk/create-react-component/issues"},"author":{"name":"Ryan Atkinson"},"license":"MIT","main":"bin/generate-react","bin":{"generate-react":"bin/generate-react","g-r":"bin/generate-react"},"publishConfig":{"access":"public"},"keywords":["cli","react","build-tools","generate-react-cli","create-react-component"],"engines":{"node":">=10.x","npm":">= 6.x"},"browserslist":["maintained node versions"],"scripts":{"cm":"npx git-cz","prebuild":"rimraf dist","build":"babel src --out-dir dist --ignore 'src/**/*.test.js'","build:watch":"npm run build -- --watch","test":"jest --coverage","test:watch":"npm run test -- --watch","release":"standard-version"},"dependencies":{"chalk":"^4.1.0","commander":"^6.1.0","deep-keys":"^0.5.0","fs-extra":"^9.0.1","inquirer":"^7.3.3","lodash":"^4.17.20","replace":"^1.2.0"},"devDependencies":{"@babel/cli":"^7.11.6","@babel/core":"^7.11.6","@babel/preset-env":"^7.11.5","@commitlint/cli":"^11.0.0","@commitlint/config-conventional":"^11.0.0","babel-eslint":"^10.1.0","eslint":"^7.9.0","eslint-config-prettier":"^6.11.0","eslint-config-react-app":"^5.2.1","eslint-plugin-import":"^2.22.0","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","husky":"^4.3.0","jest":"^26.4.2","prettier":"^2.1.2","pretty-quick":"^3.0.2","rimraf":"^3.0.2","standard-version":"^9.0.0"},"babel":{"presets":[["@babel/preset-env",{"targets":{"node":true}}]]},"jest":{"testEnvironment":"node","collectCoverageFrom":["src/**/*.js"],"coverageThreshold":{"global":{"branches":0,"functions":0,"lines":0,"statements":0}}},"config":{"commitizen":{"path":"cz-conventional-changelog"}},"commitlint":{"extends":["@commitlint/config-conventional"]},"husky":{"hooks":{}},"gitHead":"8a09a0d28c61160a2ebc38cec3dae87884f72df6","homepage":"https://github.com/ryanatk/create-react-component#readme","_id":"@2ui/create-react-component@5.2.0","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-YPa3IKIS7MxHTisFCvHm7N9agMuIzZHgpJHRbLSgROUS/g/AVOrsCj5aGvKhn0QcplQFWuzJiCcmPLFkHBQk4w==","shasum":"75d1c47af9ae8d3e5df9f1d90e0c3f74706c3f81","tarball":"https://registry.npmjs.org/@2ui/create-react-component/-/create-react-component-5.2.0.tgz","fileCount":22,"unpackedSize":46182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjctdCRA9TVsSAnZWagAABtEP/igYrDd3PROOxc9+Op3o\nPEOi4L7POjAUEazQAUHAJcjArFRfNLufXFAoMWhxFmLZrliX3rIJ7wX73cro\nZgVRJcveUVIYgxVvg2p8HqA8c8uGYnI2okXQcdYZQDyPb8apQit333kPg6lf\npG49pss06qHZAjDuapFFkLnvp6r0kc4b1+1m4+0PNWtdYsRCVpbUzah2OS75\n9Cg7cIb72AJ05seWRT9J73fWeJtA/7E+vOgWwiW08PKLzUVoTDhdA9PUfjMV\nMysoiXxDQb7EcuTw1z2SfJ752n907izoWAJiRSKi8ZP6SUxD3rY/HTSrba8E\n+2r4GjKBY5ciI9JSF7wLk7ViFBBAeK9ekIQBA95f7aPXjpQKidEyytY3j9vs\n9u53xpGJRL5o6fXYxB+KKpFCCZ6zgZAFGdlSPBEwLFYKpejS0dTVKrJS6bfX\nqRrnqhr5JUv5RgYIcbaIAWIexTZsBhjnzFfsvO08zrMXBVTI9VsS6vniE81b\nECHZH/4m2ZjCNAxuLNTYT04Zad1HkELJNJfozvT4sRuQDVianPBVfj/qlV1W\njjZrqgWCVT3+EQS6IgeME2aSYbsLG86upzC2buTuS//OHE9ARYq+maO9I6Dr\nvi1TUIFPQD/Li5oNaBe+i/kL321WL6MfoLrxQwzEo+9i7W6njk2JU2o9kkni\nvH10\r\n=vCuB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhKCNErH6iXIilVpScRbPORKsdWkjj1hyGwTEGZWCvNAIhALQy0UIMd8uoPzzLjnbETgF5lfDXSS5jneiIDjuDLF0d"}]},"maintainers":[{"name":"ryanatk","email":"ryan@ratkinson.com"}],"_npmUser":{"name":"ryanatk","email":"ryan@ratkinson.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/create-react-component_5.2.0_1603128157298_0.6090081186493326"},"_hasShrinkwrap":false}},"time":{"created":"2020-10-19T16:50:32.796Z","5.1.0":"2020-10-19T16:50:33.187Z","modified":"2022-04-04T10:43:18.892Z","5.2.0":"2020-10-19T17:22:37.398Z"},"maintainers":[{"name":"ryanatk","email":"ryan@ratkinson.com"}],"description":"A simple React CLI to generate components instantly and more.","homepage":"https://github.com/ryanatk/create-react-component#readme","keywords":["cli","react","build-tools","generate-react-cli","create-react-component"],"repository":{"type":"git","url":"git+https://github.com/ryanatk/create-react-component.git"},"author":{"name":"Ryan Atkinson"},"bugs":{"url":"https://github.com/ryanatk/create-react-component/issues"},"license":"MIT","readme":"# Generate React CLI\n\n[![dependencies](https://david-dm.org/arminbro/generate-react-cli.svg)](https://david-dm.org/arminbro/generate-react-cli)\n[![License](https://img.shields.io/npm/l/express.svg)](https://github.com/arminbro/generate-react-cli/blob/master/LICENSE)\n\n<p align=\"center\"> \n  <img src=\"https://raw.githubusercontent.com/arminbro/generate-react-cli/master/docs/assets/generate-react-cli.svg?raw=true\"/>\n</p>\n\n## Why?\n\nTo help speed up productivity in React projects and stop copying, pasting, and renaming files each time you want to create a new component.\n\n**_A few notes:_**\n\n- Now supports custom component types ([read more](#custom-component-types)). 🎉\n- Now supports custom component templates ([read more](#custom-component-templates)). 🎉\n- Supports React [TypeScript](https://www.typescriptlang.org/) projects.\n- Supports two different component testing libraries - [Testing Library](https://testing-library.com) and [Enzyme](https://airbnb.io/enzyme) - that work with [Jest](https://jestjs.io/). We assume that you have these libraries already configured in your React project.\n- It follows [grouping by feature](https://reactjs.org/docs/faq-structure.html#grouping-by-file-type) because we believe when you look at a component, you should see all of its corresponding files (i.e., stylesheet, test, and component) under one folder with the feature name. We feel this approach provides a better developer experience.\n\n## You can run it using npx like this:\n\n```\n  npx generate-react-cli component Box\n```\n\n_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) is a package runner tool that comes with npm 5.2+)_\n\n## Config File\n\nWhen you run GRC within your project the first time, it will ask you a series of questions to customize the cli for your project needs (this will create a \"generate-react-cli.json\" config file).\n\n### Example of the **generate-react-cli.json** config file:\n\n```json\n{\n  \"usesTypeScript\": false,\n  \"usesCssModule\": true,\n  \"cssPreprocessor\": \"scss\",\n  \"testLibrary\": \"Testing Library\",\n  \"component\": {\n    \"default\": {\n      \"path\": \"src/components\",\n      \"withLazy\": false,\n      \"withStory\": false,\n      \"withStyle\": true,\n      \"withTest\": true\n    }\n  }\n}\n```\n\n## Generate Components\n\n```\n  npx generate-react-cli component Box\n```\n\nThis command will create a folder with your component name within your default (e.g. **src/components**) directory, and its corresponding files.\n\n### Example of the component files structure:\n\n```\n|-- /src\n    |-- /components\n        |-- /Box\n            |-- Box.js\n            |-- Box.css\n            |-- Box.test.js\n```\n\n### Options\n\nYou can also override some of the GRC component config rules using one-off commands. So for example, let's say you have set **withTest** to be `true` in the `component.default` property. You can override it like this:\n\n```\n  npx generate-react-cli component Box --withTest=false\n```\n\nOr vice versa, if you have set **withTest** to be `false` you can do this:\n\n```\n  npx generate-react-cli component Box --withTest=true\n```\n\nOtherwise, if you don't pass any options, it will just use the default values that you have set in the GRC config file under `component.default`.\n\n<table>\n  <tr align=\"left\">\n    <th>Options</th>\n    <th>Description</th>\n    <th>Value Type</th>\n    <th>Default Value</th>\n  </tr>\n  <tr>\n    <td width=\"20%\"><b>--path</b></td>\n    <td width=\"60%\">\n      Value of the path where you want the component to be generated in (e.g. <b>src/components</b>).  \n    </td>\n    <td width=\"20%\">String</td>\n    <td width=\"20%\"><code>component.default.path<code></td>\n  </tr>\n\n  <tr>\n    <td width=\"20%\"><b>--type</b></td>\n    <td width=\"60%\">\n      You can pass a custom component type that you have configured in the GRC config file that has its own set of component config rules. Read more about <a href=\"#custom-component-types\">custom component types</a>.\n    </td>\n    <td width=\"20%\">String</td>\n    <td width=\"20%\"><code>component.default<code></td>\n  </tr>\n\n  <tr>\n    <td width=\"20%\"><b>--withLazy</b></td>\n    <td width=\"60%\">\n      Creates a corresponding lazy file (a file that lazy-loads your component out of the box and enables <a href=\"https://reactjs.org/docs/code-splitting.html#code-splitting\">code splitting</a>) with this component.      \n    </td>\n    <td width=\"20%\">Boolean</td>\n    <td width=\"20%\"><code>component.default.withLazy<code></td>\n  </tr>\n\n  <tr>\n    <td width=\"20%\"><b>--withStory</b></td>\n    <td width=\"60%\">\n      Creates a corresponding (<a href=\"https://storybook.js.org\">storybook</a>) story file with this component.      \n    </td>\n    <td width=\"20%\">Boolean</td>\n    <td width=\"20%\"><code>component.default.withStory<code></td>\n  </tr>\n\n  <tr>\n    <td width=\"20%\"><b>--withStyle</b></td>\n    <td width=\"60%\">\n      Creates a corresponding stylesheet file with this component.    \n    </td>\n    <td width=\"20%\">Boolean</td>\n    <td width=\"20%\"><code>component.default.withStyle<code></td>\n  </tr>\n\n  <tr>\n    <td width=\"20%\"><b>--withTest</b></td>\n    <td width=\"60%\">\n      Creates a corresponding test file with this component.      \n    </td>\n    <td width=\"20%\">Boolean</td>\n    <td width=\"20%\"><code>component.default.withTest<code></td>\n  </tr>\n</table>\n\n### Custom component types:\n\nBy default, GRC will use the `component.default` configuration rules when running the component command out of the box.\n\nWhat if you wanted to generate other types of components that have their own set of config rules (e.g., **page** or **layout**)?\n\nYou can do so by extending the **generate-react-cli.json** config file like this.\n\n```json\n{\n  \"usesTypeScript\": false,\n  \"usesCssModule\": true,\n  \"cssPreprocessor\": \"scss\",\n  \"testLibrary\": \"Testing Library\",\n  \"component\": {\n    \"default\": {\n      \"path\": \"src/components\",\n      \"withLazy\": false,\n      \"withStory\": false,\n      \"withStyle\": true,\n      \"withTest\": true\n    },\n    \"page\": {\n      \"path\": \"src/pages\",\n      \"withLazy\": true,\n      \"withStory\": false,\n      \"withStyle\": true,\n      \"withTest\": true\n    },\n    \"layout\": {\n      \"path\": \"src/layout\",\n      \"withLazy\": false,\n      \"withStory\": false,\n      \"withStyle\": false,\n      \"withTest\": true\n    }\n  }\n}\n```\n\nNow you can generate a component with your custom component types like this:\n\n```\n  npx generate-react-cli component HomePage --type=page\n```\n\n```\n  npx generate-react-cli component BoxLayout --type=layout\n```\n\nYou can also pass the same [options](#options) to your custom component types as you would for the default component type.\n\n### Custom component templates\n\nYou can also create your own custom templates that GRC can use instead of the built-in templates that come with it. We hope this will provide more flexibility for your components that you want to generate.\n\nThere is an optional `customTemplates` object that you can pass to the `component.default` or any of your custom component types within your **generate-react-cli.json** config file.\n\n#### Example of the `customTemplates` object:\n\n```json\n\"customTemplates\": {\n  \"component\": \"templates/component.js\",\n  \"lazy\":  \"templates/lazy.js\",\n  \"story\":  \"templates/story.js\",\n  \"style\": \"templates/style.scss\",\n  \"test\":  \"templates/test.js\"\n},\n```\n\nThe keys represent the type of template, and the values are the paths that point to where your custom template lives in your project/system.\n\n### Example of using the `customTemplates` object within your generate-react-cli.json config file:\n\n```json\n{\n  \"usesTypeScript\": false,\n  \"usesCssModule\": true,\n  \"cssPreprocessor\": \"scss\",\n  \"testLibrary\": \"Testing Library\",\n  \"component\": {\n    \"default\": {\n      \"customTemplates\": {\n        \"component\": \"templates/component/component.js\",\n        \"style\": \"templates/component/style.scss\",\n        \"test\": \"templates/component/test.js\"\n      },\n      \"path\": \"src/components\",\n      \"withStyle\": true,\n      \"withTest\": true,\n      \"withStory\": true,\n      \"withLazy\": false\n    },\n    \"page\": {\n      \"customTemplates\": {\n        \"test\": \"templates/page/test.js\"\n      },\n      \"path\": \"src/pages\",\n      \"withLazy\": true,\n      \"withStory\": false,\n      \"withStyle\": true,\n      \"withTest\": true\n    }\n  }\n}\n```\n\nNotice in the `page.customTemplates` that we only specified the `test` custom template type. That's because all the custom template types are optional. If you don't set the other types, GRC will default to using the built-in templates it comes with.\n\n#### Example of a custom component template file:\n\n```jsx\n// templates/component/component.js\n\nimport React from 'react';\nimport styles from './TemplateName.module.css';\n\nconst TemplateName = () => (\n  <div className={styles.TemplateName} data-testid=\"TemplateName\">\n    <h1>TemplateName component</h1>\n  </div>\n);\n\nexport default TemplateName;\n```\n\n**Important** - Make sure to use the `TemplateName` keyword in your templates. GRC will use this keyword to replace it with your component name.\n\n#### Example of a custom test template file:\n\n```jsx\n// templates/component/test.js\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport TemplateName from './TemplateName';\n\nit('It should mount', () => {\n  const div = document.createElement('div');\n  ReactDOM.render(<TemplateName />, div);\n  ReactDOM.unmountComponentAtNode(div);\n});\n```\n\n## License\n\nGenerate React CLI is open source software [licensed as MIT](https://github.com/arminbro/generate-react-cli/blob/master/LICENSE).\n","readmeFilename":"readme.md"}