├── .gitignore
├── README.md
├── _templates
└── component
│ ├── help
│ └── index.txt.t
│ └── new
│ ├── comp.story.js.t
│ ├── comp.test.js.t
│ ├── index.js.t
│ └── inject_story.t
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 |
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # hygen-CRA
2 |
3 | This is a hygen package for [create-react-app (CRA)](https://github.com/facebook/create-react-app) that supercharges your workflow.
4 |
5 | ## Quick Start
6 |
7 | ```
8 | $ npm i -g hygen-add
9 | $ cd your-CRA && hygen-add cra
10 | ```
11 |
12 | Then use `help` to see what the generator can do:
13 |
14 | ```
15 | $ hygen component help
16 |
17 |
18 | hygen component new --name NAME [--stateful] [--functional]
19 |
20 | Generates a React component, a storybook, and a test.
21 |
22 | NAME The component name in kebab-case (required).
23 | --stateful Generate a stateful component (optional).
24 | --functional Generate a functional component (optional).
25 |
26 | If no flags given, will generate a PureComponent.
27 |
28 |
29 | Requires storybook to be installed and initialized:
30 | $ npm i -g @storybook/cli && getstorybook
31 |
32 | Requires react-test-renderer to be installed:
33 | $ yarn add --dev react-test-renderer
34 | ```
35 |
--------------------------------------------------------------------------------
/_templates/component/help/index.txt.t:
--------------------------------------------------------------------------------
1 | ---
2 | message: |
3 |
4 | hygen {bold component new} --name {bold NAME} {italic [--stateful]} {italic [--functional]}
5 |
6 | Generates a React component, a storybook, and a test.
7 |
8 | NAME The component name in kebab-case ({bold required}).
9 | --stateful Generate a stateful component (optional).
10 | --functional Generate a functional component (optional).
11 |
12 | If no flags given, will generate a PureComponent.
13 |
14 |
15 | Requires {bold storybook} to be installed and initialized:
16 | {gray $ npm i -g @storybook/cli && getstorybook}
17 |
18 | Requires {bold react-test-renderer} to be installed:
19 | {gray $ yarn add --dev react-test-renderer}
20 | ---
--------------------------------------------------------------------------------
/_templates/component/new/comp.story.js.t:
--------------------------------------------------------------------------------
1 | ---
2 | to: src/components/<%= name %>/<%= name %>.story.js
3 | ---
4 | <% const comp = h.inflection.undasherize(name) -%>
5 | import React from 'react'
6 | import { storiesOf } from '@storybook/react'
7 | import { action } from '@storybook/addon-actions'
8 | import { linkTo } from '@storybook/addon-links'
9 | import <%= comp %> from '.'
10 |
11 | storiesOf('<%= comp %>', module).add('default', () => <<%= comp %> />)
--------------------------------------------------------------------------------
/_templates/component/new/comp.test.js.t:
--------------------------------------------------------------------------------
1 | ---
2 | to: src/components/<%= name %>/<%= name %>.test.js
3 | ---
4 | <% const comp = h.inflection.undasherize(name) %>import React from 'react'
5 | import renderer from 'react-test-renderer'
6 | import <%= comp %> from '.'
7 |
8 | it('<%= comp %>: default', () => {
9 | const component = renderer.create(<<%= comp %> />)
10 | const tree = component.toJSON()
11 | expect(tree).toMatchSnapshot()
12 | })
13 |
--------------------------------------------------------------------------------
/_templates/component/new/index.js.t:
--------------------------------------------------------------------------------
1 | ---
2 | to: src/components/<%= name %>/index.js
3 | ---
4 | <% const comp = h.inflection.undasherize(name) -%>
5 | <% if(locals.stateful) { -%>
6 | import React, { Component } from 'react'
7 | class <%= comp %> extends Component {
8 | render() {
9 | return edit me: at components/<%= name %>/index.js
10 | }
11 | }
12 | <% } else if(locals.functional) { -%>
13 | import React from 'react'
14 | const <%= comp %> = props => edit me: at components/<%= name %>/index.js
15 | <% } else { -%>
16 | import React, { PureComponent } from 'react'
17 | class <%= comp %> extends PureComponent {
18 | render() {
19 | return edit me: at components/<%= name %>/index.js
20 | }
21 | }
22 | <% } -%>
23 |
24 | export default <%= comp %>
--------------------------------------------------------------------------------
/_templates/component/new/inject_story.t:
--------------------------------------------------------------------------------
1 | ---
2 | inject: true
3 | to: src/stories/index.js
4 | skip_if: components/<%= name %>
5 | prepend: true
6 | ---
7 | import '../components/<%= name %>/<%= name %>.story'
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "hygen-cra",
3 | "version": "1.0.0",
4 | "description": "A hygen package for create-react-app",
5 | "keywords": [
6 | "hygen",
7 | "generator",
8 | "boilerplate",
9 | "redux",
10 | "react",
11 | "create-react-app"
12 | ],
13 | "main": "index.js",
14 | "repository": "https://github.com/jondot/hygen-CRA",
15 | "license": "MIT"
16 | }
17 |
--------------------------------------------------------------------------------