{"id":22891575,"url":"https://github.com/hanford/add-component","last_synced_at":"2025-05-07T16:55:42.999Z","repository":{"id":57173168,"uuid":"99766894","full_name":"hanford/add-component","owner":"hanford","description":"Generate a PureComponent or Functional Component, stylehseet and a test in one command","archived":false,"fork":false,"pushed_at":"2018-01-23T19:36:59.000Z","size":63,"stargazers_count":11,"open_issues_count":0,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-11T13:58:16.422Z","etag":null,"topics":["cli","component","generator","react","test"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hanford.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-09T05:05:17.000Z","updated_at":"2024-04-25T09:05:01.000Z","dependencies_parsed_at":"2022-08-24T13:21:31.675Z","dependency_job_id":null,"html_url":"https://github.com/hanford/add-component","commit_stats":null,"previous_names":["hanford/add-react-component"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hanford%2Fadd-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hanford%2Fadd-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hanford%2Fadd-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hanford%2Fadd-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hanford","download_url":"https://codeload.github.com/hanford/add-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229317952,"owners_count":18054335,"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":["cli","component","generator","react","test"],"created_at":"2024-12-13T22:34:32.174Z","updated_at":"2024-12-13T22:34:32.747Z","avatar_url":"https://github.com/hanford.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# add-component\n\nGenerate the component boilerplate, CSS, and a shallow render test with one line.\n\n## Install\n\nRun\n\n```npm install -g add-component```\n\n## Usage\n\n```\n# Generate PureComponent and shallow render test\n$ add-component ${name}\n\n# Generate PureComponent and shallow render test with stylesheet\n$ add-component ${name} -c\n\n# Generate Functional Component and shallow render test with stylesheet\n$ add-component ${name} -c -f\n\n# Generate a full redux store\n$ add-component ${name} --redux\n```\n\n## Example\n\n\n#### Component\n\n```sh\nadd-component example -c\n```\nGenerates `example` folder with the following:\n\n`index.js`\n```js\nimport Example from './example.js'\n\nexport default Example\n```\n\n`style.css`\n```css\n.container {}\n```\n\n`example.js`\n```js\nimport React, { PureComponent } from 'react'\n\nimport style from './style.css'\n\nclass Example extends PureComponent {\n  render () {\n    return (\n      \u003cdiv className={style.container}\u003etest\u003c/div\u003e\n    )\n  }\n}\n\nexport default Example\n```\n\n`example.test.js`\n```js\nimport React from 'react'\nimport { shallow } from 'enzyme'\n\nimport Example from './example.js'\n\nit('renders without props', () =\u003e {\n  shallow(\u003cExample /\u003e)\n})\n```\n\n#### Redux Store\n\n```sh\nadd-component count --redux\n```\nGenerates `count` folder with the following:\n\n`actions.js`\n```js\nimport t from './actionTypes.js'\n\nexport function increment () {\n  return {\n    type: t.INCREMENT\n  }\n}\n```\n\n`actionTypes.js`\n```js\nexport default {\n  INCREMENT: 'INCREMENT'\n}\n```\n\n`reducer.js`\n```js\nimport t from './actionTypes'\n\nconst defaultState = {\n  count: 0,\n}\n\nconst score = (state = defaultState, action) =\u003e {\n  switch (action.type) {\n\n    case t.INCREMENT:\n      return {\n        ...state,\n        count: state.count + 1\n      }\n\n    default:\n      return state\n  }\n}\n\nexport default users\n\n\n```\n\n## Additional options\n\n```\n# Define directory with components\n$ add-react-component -d src Example\n\n# Creates component with styled-components as styling solution\n$ add-react-component -c styled-components Example\n\n# Does not use summary index.js but puts component into it\n$ add-react-component --no-index Example\n```\n\n## Configuration\n\nYou can define all the options in configuration file. Also, with configuration, you can redefine technology\ngenerators, technology templates and filenames. Look into `config.js` to find out what cat be setted.\n\nIf you store your configuration file by `.add-component/config.js` path, you do not need any additional parameter. Just\nRun the command as usual.\n\nIf you want your configuration file to have another name or be in another folder, tell the command where it is:\n```\n# Run with configuration\n$ add-react-component --config configs/addcomponent-config.js Example\n\n# Example of configuration\n$ cat .add-component/config.js\n\nconst path = require('path')\n\nmodule.exports = {\n  techsToGen: [\n    'styled-components',\n    'react',\n    'storybook',\n  ],\n  techs: {\n    'react': {\n      fileName: 'index.js'\n    },\n   'storybook': {\n      template: path.resolve(__dirname, './storybook-template.js')\n    }\n  },\n  directory: './src',\n}\n```\n\n### Configuration details\n\n#### Technologies to generate\n\nIn `techsToGen`, you can define the list of technologies to generate. This list will overwrite the default list, but if\nyou include `*`, the default technologies will preserve.\u003cbr/\u003e\nNote, that for custom technologies you will also need its configuration in `techs` field.\n\nTo re-define the list of technolofies:\n```\nmodule.exports = {\n  techsToGen: [\n    'styled-components',\n    'react'\n  ]\n}\n```\n\nTo save default list of technologies and add more:\n```\nmodule.exports = {\n  techsToGen: [\n    '*',\n    'styled-components'\n  ]\n}\n```\n\n##### Path configuration\n\nYou can define a directory for your components. By default it is the root of your project.\n```\nmodule.exports = {\n  directory: './src'\n}\n```\n\nYou can choose not to have a directory for every component but put the files for all the components into the same source\nfolder. In this case, also configure the naming schemas for all the technologies so that all the files for different\ncomponents contain the component name and do not overwrite each other.\n```\nmodule.exports = {\n  componentDirectory: false\n}\n```\n\n## License\n\nMIT © [Jack Hanford](http://jackhanford.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhanford%2Fadd-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhanford%2Fadd-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhanford%2Fadd-component/lists"}