nicholasbraun / create-component-app

Tool to generate different types of React components from the terminal.

create-component-app

How much time do you spend copying and pasting the component folder to create a new one ?
This is a tool to generate different types of React components from the terminal.

What you can do with this tool ?

• Create your components guided from terminal with a lot of choices
• You can create a configuration file in your current project directory
• You can also pass a configuration file from params
• You can use your own custom templates

Install

$ npm install -g create-component-app

Usage

$ cd ~/my-projects
$ create-component-app

Create your components guided from terminal with a lot of choices

• Create different kind of components:
  • stateless
  • class
  • pure
  • custom
• Set name of the new component
• Integrate connect function of redux
• Include an index file
• Set a different component extension
  • js
  • jsx
• Set a different style extension
  • css
  • scss
  • sass
  • less
• Include a storybook file
• Include a test file (with enzyme)
• Set the destionation path of the new component

You can create a configuration file in your current project directory

Create a file in your project folder named .ccarc:

{   
    "type": "stateless",
    "path": "./src/components",
    "jsExtension": "js",
    "cssExtension": "scss",
    "includeTests": false,
    "includeStories": false,
    "indexFile": false,
    "connected": false
}

You can also pass a config file

1. Create a JSON file config.json:

{   
    // Default type of component ["stateless", "class", "pure"]
    "type": "stateless",

    // Default path to create component file and folder
    "path": "./src/components",

    // Default extension for your javascript file ["js", "jsx"]
    "jsExtension": "js",

    // Default extension for your css file ["css", "scss", "sass", "less"]
    "cssExtension": "css",

    // Default flag to include a test file in the folder [true, false]
    "includeTests": true,

    // Default flag to include a storybook file in the folder [true, false]
    "includeStories": true,

    // Default flag to create an index file in the folder [false, true]
    "indexFile": false,

    // Default flag to integrate connect redux in the index file [false, true]
    "connected": false,
}

2. and pass the path to config param

$ create-component-app --config path/to/your/config.json

Passing a config file via the CLI overrides the configuration file in the working directory

You can use your own custom templates

1. Create a folder with all the files and put the COMPONENT_NAME constant to replace the name of your component. Note: the extension of the file will be used (so, use whatever you want)
   Note: file with name "index" will not renamed

2. Specify the templatePath in the configuration object and set the type:"custom":

{
    "type": "custom",
    "templatesPath": "./customTemplates"
}

NOTE: With this configuration, you can add only the path parameter to set the default destination. The others parameters will be ignored

Future

• Adds the ability to insert component life cycle methods
• A lot more options

Contributing

The library is open to everybody, contribute improve your skills.

create-component-app is maintained under the Semantic Versioning guidelines.

Use npm run watch while coding.

License

MIT © Christian Varisco