armand1m-development-toolkit

This is a plop generator that have some templates for generating React Component boilerplates with documentation, tests, and stories. It also helps to keep the same component structure through your project.

This tool gives you:

A folder with the specified component name into the specified destiny, with the following folder structure:

• index.js: Actual component implementation
• index.css: Actual component styles
• index.test.js: Jest test suite and simple test case
• index.stories.js: Simple storybook implementation (to use with @storybook/react)

Example:

- ./MyCustomComponent
  - index.js
  - index.css
  - index.test.js
  - index.stories.js

Rules

• This generator expects you to be using the @storybook/react module instead of @kadira/storybook.
• This generator expects you to be using the prop-types module instead of React.PropTypes.
• This generator expects you to be using the classnames module in your project.
• This generator expects you to be using the enzyme module in your tests.
• This generator expects you to be using jest as test runner.
• This generator expects your project to be searching for the files that match ./**/*.stories.js to load into the storybook.
  • (it will work if this is not configured, but when configured, it enables instantly component development in a react + storybook environment.)

The flow

This tool asks you for defining:

• A component type:
  • Stateless component using Normal Functions
  • Stateless component using Arrow Functions
  • ES6 Class component extending React.Component
  • ES6 Class component extending React.PureComponent
  • Redux Connected Stateless component using Arrow Functions
  • Higher order component without arguments
  • Higher order component with arguments
• A name for your component:
  • It will be used as PascalCase in filenames and code.
• A description for your component:
  • It will be used in JSDocs as a header comment in the src file.
• A destiny for your component:
  • It will use inquirer-directory to ask where to put your component.
  • If a folder with the component name already exists in the destiny, it will raise an error.

Getting started

Without npx

• Add plop and armand1m-development-toolkit to your project as development dependency:

  $ npm install --save-dev plop armand1m-development-toolkit

• Create a npm script to run it:

{
  // ... package.json content,
  "scripts": {
+    "generate": "plop --plopfile ./node_modules/armand1m-development-toolkit/index.js"
  }
}

• Run it

  $ npm run generate

With npx

• Add armand1m-development-toolkit to your project as development dependency:

  $ npm install --save-dev armand1m-development-toolkit

• Create a npm script to run it:

{
  "scripts": {
+    "generate": "npx plop --plopfile ./node_modules/armand1m-development-toolkit/index.js"
  }
}

• Run it

  $ npm run generate

Available generators

• React: Component
• Stateless component using Standard Functions
• Stateless component using Arrow Functions
• ES6 Class component extending React.Component
• ES6 Class component extending React.PureComponent
• Redux Connected Stateless component using Arrow Functions
• React: HOC
• HOC's with arguments
• HOC's without arguments

Ideas are always welcome. Open an issue if you use this package and think it could have more generators.

When possible, try creating a PR ;)

Inspiration

The idea for this package came from the generators available in the react-boilerplate/react-boilerplate project.