0.1.18 • Published 6 years ago

generator-react-domain v0.1.18

Weekly downloads
2
License
MIT
Repository
github
Last release
6 years ago

generator-react-domain

Coverage Status Build Status

This Generator helps you create connected React components with the Domain file structure :snowflake:

$ tree
.
├── Component.fixtures.js
├── Component.js
├── ComponentActions.js
├── ComponentConstants.js
├── ComponentHelper.js
├── ComponentReducer.js
├── ComponentSelectors.js
├── __tests__
│   ├── Component.test.js
│   ├── ComponentActions.test.js
│   ├── ComponentIntegration.test.js
│   ├── ComponentReducer.test.js
│   └── ComponentSelectors.test.js
├── component.scss
└── index.js

Usage

# install
npm install --global yo generator-react-domain

# run it        # destination  # name
yo react-domain src/components ComponentName

Options

  • --redux - Create Redux files.

Tests

This generator is using an external package called react-redux-test-utils to create light and readable test templates for your components. The package uses enzyme at its core.

Config

create a .yo-rc.json file in your project's root folder and fill it:

{
  "generator-react-domain": {
    "templatesPath": "path to your templates folder",
    "componentsPath": "path to your components folder",
    "redux": true # create redux files,
    "yarn": true # use yarn instead of npm
  }
}

Replacing Templates

To learn how to create Templates, refer to ejs.co

1) fill your .yo-rc.json file in your project's root folder with templatesPath as seen above.

  1. Put supported files in your templates folder, make sure to be case-sensitive.
FileDescriptionHas Template
Component.jsComponent:white_check_mark:
Component_test.jsComponent Test:white_check_mark:
Actions.jsRedux Actions:white_check_mark:
Actions_test.jsActions Test:white_check_mark:
Reducer.jsRedux Reducer:white_check_mark:
Reducer_test.jsReducer Test:white_check_mark:
Selectors.jsRedux Selectors:white_check_mark:
Selectors_test.jsSelectors Test:white_check_mark:
index.jsIndex file:white_check_mark:
Integration_test.jsRedux Flow Test:white_check_mark:
Constants.jsConstants:white_check_mark:
Helper.jsHelper methods
Scss.jsSCSS File
Fixtures.jsFixtures/Mocks

All Templates receive the following props

  <%= name %>       # Pascal case name
  <%= name_upper %> # Capitalized name
  <%= name_lower %> # Camel case name

License

MIT

0.1.18

6 years ago

0.1.17

6 years ago

0.1.16

6 years ago

0.1.15

6 years ago

0.1.14

6 years ago

0.1.13

6 years ago

0.1.12

6 years ago

0.1.11

6 years ago

0.1.10

6 years ago

0.1.9

6 years ago

0.1.8

6 years ago

0.1.7

6 years ago

0.1.6

6 years ago

0.1.5

6 years ago

0.1.4

6 years ago

0.1.3

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago