cvarisco/create-component-app

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

(Introduction article v1) 🛠WIP v2

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 ?

• You can use templates from the community 🎉
• 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
• Share your template to the community

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-component-app uses cosmiconfig for configuration file support. This means you can configure cca via:

• A .ccarc file, written in YAML or JSON, with optional extensions: .yaml/.yml/.json.
• A cca.config.js file that exports an object.
• A "cca" key in your package.json file.

The configuration file will be resolved starting from the root of your project, and searching up the file tree until a config file is (or isn't) found.

Basic Configuration

An example configuration file can be found here: .ccarc.example, you can use this file by copying it to the root of your project.

Currently supported options are:

Option	Description
type	Default type of the component ["stateless", "class", "pure"]
templatesDirPath	Default path to get the templates from the custom templates folder
path	Default path to create component file and folder
jsExtension	Default extension for your javascript file ["js", "jsx"]
cssExtension	Default extension for your css file ["css", "scss", "sass", "less", false]. Set to false if you don't want a style file
includeTests	Default flag to include a test file in the folder [true, false]
includeStories	Default flag to include a storybook file in the folder [true, false]
indexFile	Default flag to create an index file in the folder [false, true]
connected	Default flag to integrate connect redux in the index file [false, true]
componentMethods	Only for "class" and "pure", insert method inside the component (i.e. ["componentDidMount", "shouldComponentUpdate", "onClick"]). render and constructor will be always included.
fileNames	Choose the specific filename for your component's file. (COMPONENT_NAME will be replaced)
fileNames.testFileName	specify the file name of your test file
fileNames.componentFileName	specify the component file name
fileNames.styleFileName	specify the style file name !!IMPORTANT: Include cssExtension.

You can also pass a config file

1. Create a JSON file config.json:
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 loaded by cosmiconfig

You can pass params from the command line

$ create-component-app --path path/destionation

Passing a param via the CLI overrides the configuration file loaded by cosmiconfig

You can use your own custom templates

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

You can use templates from the community

Now, the first question that you receive is Do you wanna choose a template? if you answer yes, you can see the list of templates from the community.

• (Optional) Add to the settings templatesDirPath - a custom path to the user custom templates folder.
• (Optional) Add to the settings templates - a list of used templates (with a default) to filter the list
• (Optional) The user can choose between the available templates or use create-component-app -t templateName

Contributing

Now, the community can offer their templates! How?

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.

Contributors

License

MIT © Christian Varisco

create-component-app's Issues

Proposal - add support for .ts and .tsx extensions

If it isn't already supported, it'd be awesome to support TypeScript files in this project as well.

Template Creation Docs Are Unclear

• The instructions are not clear enough about what is required and optional.
• I'm unsure if the example/s provided in the docs are complete
  • The config appears to only require 2 lines but I don't know if this is a partial or full config
• It's unclear to me that the templateName config key is supposed to point to
• "You can create a config file in your template directory"
  • I thought I already made the config file... if not, what should go in here?
  • "Can" implies that this is optional?
• The error message I get after following the docs doesn't provide enough information to understand what's gone wrong:
  • EISDIR: illegal operation on a directory, read
  • Unsure what directory it is trying, and failing, to read
    It would be INCREDIBLY helpful if the project came with a working example of a template directory. It is probably also worth going over the documentation to ensure that it is as clear as possible.

I REALLY like this project and as I onboard a few new devs I want to enforce the code standards by giving them templates to work with. Help me help them.

Proposal: componentMethods option - unintuitive behavior

Hi again!

I tried setting "componentMethods": ["render"], in my .ccarc.

This results in the following:

class template extends Component {
    constructor(props) {
        super(props)
    }
    
    render(){}

    render() {
        return (
            <div className="template"></div>
        );
    }
}

I see two issues here:

• duplicate render method
• I didn't specify constructor. Intuition would tell me that for a ["render"] option, that method shouldn't be emitted. It could be emitted for [] (i.e. by default), and for ["constructor", "shouldComponentUpdate"] (i.e. if explicitly specified).

Cheers - Victor

Support for TypeScript components

TypeScript is viewed as a viable means of type enforcement in React apps. All the components in my project are .tsx, and all the store files are .ts. I'd try out create-component-app if it had this functionality and it shouldn't be too difficult to implement.

Component is not defined

When creating a new statefull component the template is failing because Component is not defined.

I think it is because of the shared file setup from 3a2e513

A way to resolve the issue would be just to use React.Component instead for https://github.com/CVarisco/create-component-app/blob/master/src/templates/js/class.template.js.

Does not work with no config or example configs

If I run without a config file specified I get: "Bad config file, Please check config file syntax." Then if I say I want to use a template I get: "Object.entries is not a function"

I tried using the example config files and each fails with a "Bad config file" message. It appears that the comments in the examples are invalid. It also looks like, with the basic .ccarc config that is presented the templates don't work.

I'd love to update the readme with some corrections but I'm not sure I know what all the options should be. Can you post a working config file so that we can update the docs to better guide a new user?

Renaming the CLI to be `create-component`

Personally, I think the CLI should be create-component as it's not making an app but understand you adopted it from react-create-app and create-component was already taken.

Would you be open to supporting both, by just adding another bin path in package.json ?

Does not process files in template subdirectories

This is a great little tool and I'd love to use it...
Our current setup dictates test files in a subfolder called __test__

So the tree is as follows:

template
│   index.js
│   COMPONENT_NAME.jsx  
│   SubComponent.jsx
│  
└───__test__
│   │   COMPONENT_NAME.spec.jsx
│   │   SubComponent.spec.jsx
│   
└───__stories__
    │   COMPONENT_NAME.stories.jsx

If I create a template like this the follwing error occurs:

(node:672) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: EISDIR: illegal operation on a directory, read
(node:672) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
index.js

Also, the path option in the config file seems to have no effect when using templates, as it resets to ./src/components when run.

Templates Mgmt

Templates Mgmt

The inspiration for this feature is oh my zsh plugins mgmt

Requests:

1. Offer a set of predefined templates
2. Enable the user to add or edit custom templates
3. User can choose a template upon creation

Resentments

1. Ensure the quality of the predefined templates
2. Restrict the number of the suggested templates (so you don't have to choose between 100 templates)

Development

• Create a templates dir that will contain the predefined templates.
• Add to the setting templatesDirPath - a custom path to the user custom templates folder.
• The user can choose between the available templates or use create-component-app -t templateName
• Add to the setting templates - a list of used templates (with a default)
• On init the app will read the set templates and will validate them with predefinedTemplates and templatesDirPath.
• The community can offer their templates

https://github.com/puemos/create-component-app

https://github.com/puemos/create-component-app/blob/master/docs/CUSTOM-TEMPLATES.md

Proposal: Make create-component-app usable from other apps

As a user, I want use create-component-app in my tools / node-application.
Make exportable the function to create components passing the config object.

[Error] Cannot convert undefined or null to object

If I use a template , it's work well, but if I don't use a template, it will raise an error

$ create-component-app
[Info] No config file detected, using defaults.
? Do you wanna choose a template No
? What kind of components do you want to create ? stateless
? What is the name of the component ? ComponentName
? Do you want to connect the component to redux ? No
? Do you want an index file on your folder ? No
? What kind of extension do you use for js files ? js
? What kind of extension do you use for style file ? css
? Do you want a storybook file? Yes
? Do you want a test file? Yes
? Where do you want create your component ? ./src/components
[Error] Cannot convert undefined or null to object

The node verison:

$ node -v
v8.9.0

Extraneous`null` emitted

Hi!

The following 'session':

~/skyscanner (master*) $ create-component-app
[Info] No config file detected, using defaults.
? Do you wanna choose a template No
? What kind of components do you want to create ? class
? What is the name of the component ? Foo
? Do you want to connect the component to redux ? No
? Do you want an index file on your folder ? Yes
? What kind of extension do you use for js files ? js
? What kind of extension do you use for style file ? scss
? Do you want a storybook file? No
? Do you want a test file? No
? Where do you want create your component ? ./client/src/components
[Info] Your component is created!

generated this:

class Foo extends Component {
    constructor(props) {
        super(props)
    }
    null
    render() {
        return (
            <div className="Foo"></div>
        );
    }
}

See the null? Seems like a little issue.

Cheers - Victor

Add support for flow annotations

Add a flag to add flow annotations which would enable flow at the top of the file and put in some default flow type annotations like so:

// @flow

type Props = {}

class SomeClass extends PureComponent {
  constructor(props: Props) {
     super(props)
  }
}

Proposal: Do you want semicolons ?

Hi,

Thanks for this tool that will change the way we work.
I like your generator (without template) but I would like to have the ability to have semicolons after statements.

Do you think it would be possible to give that possibility as an additional question?

Thanks in advance for considering this

Proposal: Alter the default path in a template

I'd like to be able to alter the default path (./src/components) in a template and still suggest a path change to the user. So if I'm using my containers template I could put a config value in that would suggest ./src/containers and if I'm using a template that makes multiple folders in the root of src I could offer ./src as the suggested path. I'd like the user to still be able to overwrite with whatever they want.

New Release?

This is a really great tool that you've built! I'm hoping to start using this with the team I work with. It appears that your latest bug fix from a couple weeks ago dealing with duplicate extensions for custom templates isn't in the latest release available on npm?

If you're already aware of this, then I apologize in advance for opening this issue! And thank you for contributing your time to making this 👍

add prettier-eslint hook to lint the components with the rules of the project

It would be great if the new component is already linted with the rules of the project !

thank you @cedmax for the tip!

SyntaxError: Unexpected token { at \create-component-app\dist\index.js:69

I'm getting a SyntaxError: Unexpected token {

C:\Users\vaiulian\AppData\Roaming\npm\node_modules\create-component-app\dist\index.js:69
function generateFiles({ type, name, path, indexFile, cssExtension, jsExtension, connected }) {
^

SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:139:18)
at node.js:974:3

i tried with config file as well.

L.E.
node --version v4.5.0
npm --version 2.15.9

import styles from './undefined.css'

I execute create-component-app without config.json.

The following code was generated.
I want to name it COMPONENT_NAME.css.

import React from 'react'
import PropTypes from 'prop-types'
import styles from './undefined.css' // <- undefined.css :(

const Foo = ({}) => (
  <div className="Foo"></div>
);

Foo.propTypes = {}

Foo.defaultProps = {}

export default Foo

create-component-app/src/defaultTemplates/js/common.template.js

Line 30 in 31718fd

${cssExtension ? `import styles from './${styleFileName}.${cssExtension}'` : ''}`

Doesn't apply rules from .ccarc

I have created a .ccarc file in the root of my project folder with the following config:

{
    "path": "./src/components",
    "jsExtension": "js",
    "cssExtension": "scss",
    "includeTests": true,
    "includeStories": true
}

The problem is that the cli doesn't seem to apply that config.

I run [email protected] with [email protected]. I do not have a global config file.

Proposal: Editor plugins

I think to make this really useful, editor integrations need to be coded. I realize this is easier said than done given the languages you usually code within these platforms. But I don't think it provides a huge benefit to code snippets without it; or at the very least as much as a better alternative as it could.

No config file detected

Hi, great project thanks! 👍🏻

I'm having an issue with using the config file. I've created it in the project root and would like to use includeStories:

config.json

{
  "path": "./src/components",
  "includeStories": true
}

When I run create-component-app or create-component-app --config config.json I get the message:

[Info] No config file detected, using defaults.
[Info] Your component is created!

Oddly, if I break the json formatting I get an Error, so it looks to be finding it.

༼ つ ◕_◕ ༽つ⚡ create-component-app --config config.json
[Error] An error occured while parsing your config file. Using defaults...

 JSON Error in /Users/uidesign1/Documents/workspace/nbrown-ui/config.json:
Trailing comma in object at 4:1
}
^
? Do you wanna choose a template (y/N)

Any ideas please?

Config file (.ccarc) is not being read

When we add an .ccarc file to pass configs, this file is not being read.

Outputs `import template from './foo.js'`

Given input:

1. What kind of components do you want to create ? stateless
2. What is the name of the component ? Foo
3. Do you want to connect the component to redux ? Yes
4. Do you want an index file on your folder ? Yes
5. What kind of extension do you use for js files ? js
6. What kind of extension do you use for css files ? css
7. Where do you want create your component ? ./src/components

Output index.js:

import template from './Foo.js'
import { connect } from 'react-redux';

const mapDispatchToProps = (dispatch, ownProps) => {
    return {}
}

const mapStateToProps = (state, ownProps) => {
    return {};
};

const Foo = connect(
    mapStateToProps,
    mapDispatchToProps,
)(Foo);

export default Foo

Should connect connect template instead? Am I missing something?

Allow to have templates for index, stories and test files?

Is it possible to also write templates for index.js, template.stories.js and template.spec.js? When I try it with my current templates it does not output it correctly or am I doing it wrong?

I can't find that much docs on how to do this, nor how to use the COMPONENT_NAME in an import COMPONENT_NAME from './COMPONENT_NAME.js

there's no `--path` param

I'd like to run generator providing path parameter from commandline (not from config file).
It would be great to have ability to provide almost every parameter from commandline so that script can be easily integrated with IDEs.

Change file naming format for tests

The convention I use for naming tests in my project is COMPONENT_NAME.test.js. The script generates test files in the format of test.COMPONENT_NAME.js.

Do you think the format should be exposed as a .ccarc option?

Can this support typescript components?

.tsx type file
typescript component

Provide example of how to create custom templates

The description on how to create custom templates is pretty thin. Could you provide a more detailed example?

Static `defaultProps` and `propTypes`

Instead of having ${COMPONENT_NAME}.propTypes = {} it would be nice if it was

class ${COMPONENT_NAME} extends Component {
    static propTypes = {};
    static defaultProps = {};
    //.....
}

[Question] Roadmap / new features?

Hi @CVarisco I was just wondering, what are the next steps for this project? I might want to contribute some more :)

support for typescript

Ability to create a component without creating it's parent directory?

If I have a components/ directory and want to just create a file in that directory when running the script can I do that with the current implementation?

so if I run create-component-app -t container and call it NavContainer can I get it to create it under components/NavContainer.js instead of components/NavContainer/NavContainer.js

Control Case Of Template Name

I'm trying to use create-component-app for some of the other templated files I create. Specifically redux actions, reducers, and selectors. I'd like to be able to use the COMPONENT_NAME replacement key with different casing. Currently it just uses whatever I've entered as the component name.

What I'd love to be able to do is:

• Specify: ComponentName on the command line
• In the template specify something like: _component_name_ for an lcased version of the ComponentName
• in the template specify something like _COMPONENT_NAME_ for a ucased version of the ComponentName
• in the template specify something like _Component_Name_ for a raw output of the ComponentName

adds the ability to add component lifecycle methods on pure and class component

It would be great if it is possible to adds all (for now) component lifecycle methods on class and pure component template.

Proposal: Create a tree components configuration object

As a user, I want to create a tree configuration object to create directly from one file the components structure.

add the ability to choose in the config the file names

Adds the ability to the user to insert the file name.
Something like this in the config:

{
  ...
  file_name: {
    test: 'COMPONENT_NAME.test.js',
    etc
  }
}

thanks to @viktorbergehall

Add less to the cssExtention #

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

Can you add less?

Proposal: Searching for config file from `.` to `/`

It would be great to don't call the script in the directory where .ccarc is but rather call it from some child directory eg. src/main/components.
What create-component-app can do then is that he will look for .ccarc file starting from current directory to every parent directory (so ..,../.. etc) till he find config file (similarly how node look for node_modules dir).

When config file will be found then you can assume that path param is not needed. Script should create files where it has been executed.

This may be quite a change but I think it will be more usable then passing everytime --path parameter (which btw is not that bad - but for sure can be better).

What do you think about that?