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.

Available extension

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": "class",
    "path": "./src/components",
    "jsExtension": "js",
    "cssExtension": "scss",
    "includeTests": false,
    "includeStories": false,
    "indexFile": false,
    "connected": false,
    "componentMethods": [
        "componentDidMount",
        "shouldComponentUpdate",
        "onClick"
    ],
    "fileNames": {
        "testFileMatch": "spec",
        "testFileName": "myTest",
        "componentFileName": "template",
        "styleFileName": "style"
    }
}

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", false]
    // Set to false if you don't want a style file
    "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,

    // Only for "class" and "pure", insert method inside the component
    "componentMethods": ["componentDidMount", "shouldComponentUpdate", "onClick"],

    // Choose the specific filename for your component's file.
    "fileNames": {
        "testFileMatch": "spec", // specify the match part of test file
        "testFileName": "myTest", // specify the file name of your test file
        "componentFileName": "template", // specify the component file name
        "styleFileName": "style" // specify the style file name !!IMPORTANT: Include cssExtension.
    }
}

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

Simple steps to create your own templates docs/custom-templates

Contributing

Check the issue list to contribute on some activities or to advice new features! 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