{"id":13394304,"url":"https://github.com/CVarisco/create-component-app","last_synced_at":"2025-03-13T20:31:27.470Z","repository":{"id":69924227,"uuid":"95598931","full_name":"CVarisco/create-component-app","owner":"CVarisco","description":"Tool to generate different types of React components from the terminal. 💻","archived":false,"fork":false,"pushed_at":"2023-01-12T08:23:50.000Z","size":25574,"stargazers_count":859,"open_issues_count":12,"forks_count":58,"subscribers_count":17,"default_branch":"master","last_synced_at":"2024-09-18T23:39:47.028Z","etag":null,"topics":["automation","choice","cli","components","create-react-app","generate-component","react","react-components","reactjs","terminal","tool"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CVarisco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-06-27T20:41:11.000Z","updated_at":"2024-07-01T17:01:05.000Z","dependencies_parsed_at":"2023-03-11T07:34:15.895Z","dependency_job_id":null,"html_url":"https://github.com/CVarisco/create-component-app","commit_stats":{"total_commits":166,"total_committers":22,"mean_commits":7.545454545454546,"dds":"0.45783132530120485","last_synced_commit":"67ae259f8e20153f0ac39fb61831c2473367f2e4"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CVarisco%2Fcreate-component-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CVarisco%2Fcreate-component-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CVarisco%2Fcreate-component-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CVarisco%2Fcreate-component-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CVarisco","download_url":"https://codeload.github.com/CVarisco/create-component-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243478095,"owners_count":20297193,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["automation","choice","cli","components","create-react-app","generate-component","react","react-components","reactjs","terminal","tool"],"created_at":"2024-07-30T17:01:15.416Z","updated_at":"2025-03-13T20:31:27.462Z","avatar_url":"https://github.com/CVarisco.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/7335613/31996536-29195b54-b989-11e7-84af-25744b154345.png\" width=\"500\" alt=\"create-component-app\"/\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\n[![npm version](https://badge.fury.io/js/create-component-app.svg)](https://badge.fury.io/js/create-component-app)\n[![Code Climate](https://codeclimate.com/github/CVarisco/create-component-app/badges/gpa.svg)](https://codeclimate.com/github/CVarisco/create-component-app)\n[![npm](https://img.shields.io/npm/dw/create-component-app.svg)](https://www.npmjs.com/package/create-component-app)\n[![Build Status](https://travis-ci.org/CVarisco/create-component-app.svg?branch=master)](https://travis-ci.org/CVarisco/create-component-app)\n\n\u003c/p\u003e\n\n[(Introduction article v1)](https://hackernoon.com/create-component-app-v1-is-out-now-6ca0217992e9)  **🛠WIP v2**\n\n\n\n**How much time do you spend copying and pasting the component folder to create a new one ?**\u003cbr /\u003e\nThis is a tool to generate different types of React components from the terminal.\u003cbr /\u003e\n### Available extension \n\u003ca href=\"https://github.com/CVarisco/vs-component-app\"\u003e\u003cimg src=\"http://ubuntuhandbook.org/wp-content/uploads/2017/05/vscode-icon245.png\" width=\"50px\"\u003e \u003c/a\u003e\u003cbr /\u003e\n\nWhat you can do with this tool ?\u003cbr /\u003e\n\n- [You can use templates from the community 🎉](#you-can-use-templates-from-the-community)\n- [Create your components guided from terminal with a lot of choices](#create-your-components-guided-from-terminal-with-a-lot-of-choices)\n- [You can create a configuration file in your current project directory](#you-can-create-a-configuration-file-in-your-current-project-directory)\n- [You can also pass a configuration file from params](#you-can-also-pass-a-config-file)\n- [You can use your own custom templates](#you-can-use-your-own-custom-templates)\n- [Share your template to the community](https://github.com/CVarisco/create-component-app/blob/master/docs/CUSTOM-TEMPLATES-COMMUNITY.md)\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/CVarisco/create-component-app/blob/master/docs/cca-no-templates.gif\" alt=\"create-component-app\" width=\"1024\" /\u003e\n\u003c/p\u003e\n\n## Install\n\n```sh\n$ npm install -g create-component-app\n```\n\n## Usage\n\n```sh\n$ cd ~/my-projects\n$ create-component-app\n```    \n\n### Create your components guided from terminal with a lot of choices\n\n- Create different kind of components:\n    - stateless\n    - class\n    - pure\n    - custom\n- Set name of the new component\n- Integrate `connect` function of redux\n- Include an index file\n- Set a different component extension\n    - `js`\n    - `jsx`\n- Set a different style extension\n    - `css`\n    - `scss`\n    - `sass`\n    - `less`\n- Include a storybook file\n- Include a test file (with enzyme)\n- Set the destionation `path` of the new component\n\n### You can create a configuration file in your current project directory\n\nCreate-component-app uses [cosmiconfig](https://github.com/davidtheclark/cosmiconfig) for configuration file support.\nThis means you can configure cca via:\n\n* A `.ccarc` file, written in YAML or JSON, with optional extensions: `.yaml/.yml/.json`.\n* A `cca.config.js` file that exports an object.\n* A `\"cca\"` key in your `package.json` file.\n\nThe configuration file will be resolved starting from the root of your project,\nand searching up the file tree until a config file is (or isn't) found.\n\n### Basic Configuration\n\nAn example configuration file can be found here: [.ccarc.example](.ccarc.example), you can use this\nfile by copying it to the root of your project.\n\nCurrently supported options are:\n\n  Option | Description\n  --- | ---\n  `type` | Default type of the component `[\"stateless\", \"class\", \"pure\"]`\n  `templatesDirPath` | Default path to get the templates from the custom templates folder\n  `path` | Default path to create component file and folder\n  `jsExtension` | Default extension for your javascript file `[\"js\", \"jsx\"]`\n  `cssExtension` | Default extension for your css file `[\"css\", \"scss\", \"sass\", \"less\", false]`. Set to false if you don't want a style file\n  `includeTests` | Default flag to include a test file in the folder `[true, false]`\n  `includeStories` | Default flag to include a storybook file in the folder `[true, false]`\n  `indexFile` |  Default flag to create an index file in the folder `[false, true]`\n  `connected` | Default flag to integrate connect redux in the index file `[false, true]`\n  `componentMethods` | Only for \"class\" and \"pure\", insert method inside the component (i.e. `[\"componentDidMount\", \"shouldComponentUpdate\", \"onClick\"]`). `render` and `constructor` will be always included.\n  `fileNames` | Choose the specific filename for your component's file. (COMPONENT_NAME will be replaced)\n  `fileNames.testFileName` | specify the file name of your test file\n  `fileNames.componentFileName` |  specify the component file name\n  `fileNames.styleFileName` | specify the style file name !!IMPORTANT: Include cssExtension.\n\n### You can also pass a config file\n\n1) Create a JSON file `config.json`:  \n2) and pass the path to config param\n\n```sh\n$ create-component-app --config path/to/your/config.json\n```    \n\n**Passing a config file via the CLI overrides the configuration file loaded by [cosmiconfig](https://github.com/davidtheclark/cosmiconfig)**\n\n### You can pass params from the command line\n\n```sh\n$ create-component-app --path path/destionation\n```    \n\n**Passing a param via the CLI overrides the configuration file loaded by [cosmiconfig](https://github.com/davidtheclark/cosmiconfig)**\n\n### You can use your own custom templates\n\nSimple steps to create your own templates [docs/custom-templates](https://github.com/CVarisco/create-component-app/blob/master/docs/CUSTOM-TEMPLATES.md)\n\n### You can use templates from the community\nNow, the first question that you receive is `Do you wanna choose a template?` if you answer yes, you can see the list of templates from the community.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/7335613/32015409-51e4b5e6-b9c1-11e7-9ccf-bb21eff2c66a.gif\" alt=\"create-component-app-templates\" width=\"1024\" /\u003e\n\u003c/p\u003e\n\n- (Optional) Add to the settings `templatesDirPath` - a custom path to the user custom templates folder.\n- (Optional) Add to the settings `templates` - a list of used templates (with a default) to filter the list\n- (Optional) The user can choose between the available templates or use `create-component-app -t templateName`\n\n## Contributing\nNow, the community can offer their templates! [How?](https://github.com/CVarisco/create-component-app/blob/master/docs/CUSTOM-TEMPLATES-COMMUNITY.md)\n\nCheck the [issue list](https://github.com/CVarisco/create-component-app/issues) to contribute on some activities or to advice new features!\nThe library is open to everybody, contribute improve your skills.   \n\n`create-component-app` is maintained under [the Semantic Versioning guidelines](http://semver.org/).\n\nUse `npm run watch` while coding.\n\n### [Contributors](https://github.com/CVarisco/create-component-app/graphs/contributors)\n\n## License\n\nMIT © [Christian Varisco](https://github.com/CVarisco)\n","funding_links":[],"categories":["📦 Legacy \u0026 Inactive Projects","JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCVarisco%2Fcreate-component-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCVarisco%2Fcreate-component-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCVarisco%2Fcreate-component-app/lists"}