Simple Component Generator helps you to kickstart your new components, by removing the cumbersome process of creating and configuring each file individually.
This tool is built on top of Node, so you don't need to install much tooling. It will basically work with any front-end setup just make sure to provide this tool with the instructions (blueprint folder) to fit your requirements. To get started you'll need the following:
- Node LTS
- Terminal
- Front-end setup
For the best experience install this package globally with npm by this running this command in your terminal:
npm add -g @remcolakens/simple-component-generator
That's it! You've successfully installed the Simple Component Generator.
Now all that's left is to create a new folder in your project like @blueprint and add all the files you need.
As the name suggest, this folder will act as the blueprint for all of your generated components, the blueprint folder is NOT restricted to any file type.
When creating the blueprint folder you'll have a couple of new variables at your disposal:
PLACEHOLDER // example: MyComponent
FILENAME // example: myComponent (camel-cased)
COMPONENTTYPE // example: Atoms (based on Atomic Design )
These variables are all case-sensitive and reserved names, under the hood the Simple Component Generator just replaces these variables with the data you provide.
Last but not least, it's highly recommended creating a new config file. In this file you can define the component and blueprint path so it will integrate in any front-end setup.
The withTypeDir will be a boolean value to make paths like ./atoms/MyComponent
In the root of your project create a new file with the name .blueprint.json using the following example and change the paths.
{
"componentDir": "./components/",
"blueprintDir": "./blueprint/",
"withTypeDir": true
}It's very simple to get started just run the following command in your terminal:
generateYou will get a simple questionnaire and that’s it your component has been generated.
Found a bug? Please verify your Node version with the versions listed above.
Still not working, or do you have other questions / feedback? Please post an issue in the Github repository, and I will have a look at it.