armand1m-development-toolkit
v1.4.0
Published
This repo is a simple npm package with some tools I'm using for development needs.
Downloads
10
Readme
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.
How can I use this?
Add
plop
andarmand1m-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
- [x] 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 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.
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 the
@storybook/react
module instead of@kadira/storybook
. - This generator expects you to be using the
prop-types
module instead ofReact.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
orjasmine
as well.)
- (but since it does not use jest assertions nor snapshotting, it should work with
- 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.)