arminbro / generate-react-cli

A simple React CLI to generate components instantly and more.

Home Page:https://www.npmjs.com/package/generate-react-cli

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Make 'GRC' more configurable (multi custom component commands)

arminbro opened this issue · comments

Is your feature request related to a problem? Please describe.

GRC only supports two static commands to generate a component (component & page) at the moment.

Describe the solution you'd like

GRC should be more configurable by allowing the developer to extend the generate-react-cli.json config file with additional custom component commands dynamically.

By default, GRC comes with the one static component command out of the box.
This is what the generate-react-cli.json config file looks like initially:

{
  "usesTypeScript": false,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "testLibrary": "Testing Library",
  "component": {
    "path": "src/components",
    "withLazy": false,
    "withStory": true,
    "withStyle": true,
    "withTest": true
  }
}

So with the above config example, you can run a command like this:

npx generate-react-cli component Box

And that will generate a component for you in the component.path that you have specified and with the corresponding files that you have set to true in the component property.

But let's say you also wanted to generate components with the page and layout command that have their own config rules. You can extent the generate-react-cli.json config file like this:

{
  "usesTypeScript": false,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "testLibrary": "Testing Library",
  "component": {
    "path": "src/components",
    "withStyle": true,
    "withTest": true,
    "withStory": true,
    "withLazy": false
  },
  "page": {
    "path": "src/modules",
    "withStyle": true,
    "withTest": true,
    "withStory": true,
    "withLazy": false
  },
  "layout": {
    "customTemplates": {
      "component": "templates/layout/template.js",
      "test": "templates/laylout/testTemplate.js"
    },
    "path": "src/components",
    "withStyle": true,
    "withTest": true,
    "withStory": true,
    "withLazy": false
  }
}

You will need to include the required properties listed below when creating the custom component commands. Otherwise, the CLI will not register it as a custom component command.

The required properties are as follows:

  • path
  • withStyle
  • withTest
  • withStory
  • withLazy

Once you have done that, you should be able to run the custom component commands like this:
npx generate-react-cli page HomePage
npx generate-react-cli layout BoxLayout

Originally posted by @arminbro in #12 (comment)