This is an attempt to clean up one of my internal tools. it generates boilerplate for a react component.
This is an attempt to clean up one of my internal tools that I use regularly for all kinds of work. It is a work in progress and evolving all the time but the general idea is to help maintain a standard when creating React components. Consistancy is super important and this is my attempt to codify some of the rules I have naturally fallen into over the years.
Until I extend this package to work with different repos for more diverse component setups the outputted files will look like this:
After running react-component-generator name="Button" path="./src/components/atoms"
src/
components/
atoms/
Button/
index.ts <-- exports component
Button.component.tsx. <-- component code here
Button.styles.tsx. <-- component styles here
Button.stories.tsx. <-- component storybook
Button.spec.tsx. <-- component tests
...
...
...
Install via npm
npm i @jonjoe/module-generator
After installing you can just use the cli. Running the command will generate a react componet with soime boilerplace files.
react-component-generator name="Button" path="./src/components/atoms"
if you wanna be super fancy you could use this from within your project or globally. I personally use this within my own projects. For example in my package.json I will have something like:
...
"scripts": {
...
"generate:atom": "react-component-generator path='./src/components/atoms'",
"generate:molecule": "react-component-generator path='./src/components/molecules'",
"generate:organism": "react-component-generator path='./src/components/organisms'",
"generate:template": "react-component-generator path='./src/components/templates'",
"generate:layout": "react-component-generator path='./src/components/layouts'"
...
}
...