armand1m-development-toolkit

armand1m-development-toolkit

This repo is a simple npm package with some tools I'm using for development needs.

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

June, 2017

Actually, this has a dependency called plop, and only exposes a single generator for a React component. It uses inquirer-directory to ask you where to put your generated component relative to the process working directory.

Actually, this is just a set of generators. More tools can be implemented in the future. Though it has only a simple React Generator for now, I'm probably going to use this same package for backend microservices scaffolding in the future, something related to armand1m/microservices

How can I use this?

• 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

Available generators

• React: Component

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 ;)

React: Component

Asks you for:

• A component type:
  • Stateless component
  • ES6 Class component
• A name for your component:
  • It will be used as PascalCase in filenames and code.
• 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.

Gives you:

A folder with the specified component name into the specified destiny, with this file 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 (for those who use @storybook/react)

Attention:

• This generator expects you to be using it on a create-react-app generated project.
• 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.
  • (but since it does not use jest assertions nor snapshotting, it should work with mocha or jasmine as well.)
• 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.)