Right Now Component Easy

Based on :

Why

Because I haven't found a tool who really fits completely my need, because it's just a waste of time to copy/paste the component and change the name in the component every time.

How to use it

    npx rncez create Myrrdin

(npx is a package runner tool that comes with npm 5.2+)

How is it configure

When you run the command for the first time in your project, it will ask you a couple of question in order to customize RNCEZ to fit your project and to create "rncez-config-cli.json" config files if you want to make some change.

Example of a configuration file that is created whit the CLI:

{
  "usesTypeScript": false,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "testFolder": "__test__",
  "testLibrary": "Enzyme",
  "component": {
    "default": {
      "path": "components",
      "withStyle": true,
      "withTest": true,
      "withStory": false,
      "withLazy": true,
      "withJSON": true
    }
  }
}

Generated component

  npx rncez create Myrrdin

You can also create multiple component in a single commands:

  npx rncez create Myrrdin Artorius Provencal Gaulois

This command will create a folder with your component name within your default (e.g. src/components) directory, and its corresponding files.

The file structure

The File structure is based on the Grouping by features or routes rules.

So we decided to locate CSS, JS, and tests in the component. You have two possibilities for the tests at the same level or in a folder.

Example of the default component files struture:

|-- /src
    |-- /components
        |-- /Box
            |-- Box.js
            |-- Box.css
            |-- Box.test.js
            |-- package.json

Example of the default component files struture with a test folder:

|-- /src
    |-- /components
        |-- /Box
            |-- Box.js
            |-- Box.css
            |-- /__tests__
                |-- Box.test.js
            |-- package.json

Why use a package.json

{ "main": "Box.js" }

With the use of package.json, you can import easily and in a more readable way without redundancy!

no more :

import Box from "./components/Box/box.js";

just :

import Box from "./components/Box";

Options

You can also override some of RNCEZ component config rules using one-off commands. So for example, if you have set withStory to true in your default component setup, but now you want to create a component whitout Story, You can override it :

  npx rncez create Myrrdin --withStory=false

Or vice versa, if you have set withStory to be false you can do this:

  npx rncez create Myrrdin --withStory=true

And of course if you don't pass any options, it will run the default config values, which are in the config file under component.default

Custom component types:

By default, the RNCEZ will use the default configuration when you run the command.

But what if you want to generate another type of components that have their own set of configuration rules (e.g., layout or page )?

you can do it by extending the rncez-config-cli.json config file like this :

{
  "usesTypeScript": false,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "testFolder": "__test__",
  "testLibrary": "Enzyme",
  "component": {
    "default": {
      "path": "components",
      "withStyle": true,
      "withTest": true,
      "withStory": false,
      "withLazy": true,
      "withJSON": true
    },
    "page": {
      "path": "src/pages",
      "withLazy": true,
      "withStory": false,
      "withStyle": false,
      "withTest": true,
      "withJSON": true
    },
    "layout": {
      "path": "src/layout",
      "withLazy": false,
      "withStory": false,
      "withStyle": false,
      "withTest": true,
      "withJSON": true
    }
  }
}

Now you can generate your custom type component like this :

    npx rncez create Myrrdin --type=layout

    npx rncez create ProvencalLeGallois --type=page

And of course you can use the same options to your custom component types as you would use for the default component type.

Custom component templates

In order to provide more flexibility, You can also create your own custom templates that RNCEZ can use instead of the build-in templates that come with it.

There is an optional customTemplates object that you can pass to the component.default or any of your custom component types within your rncez-config-cli.json config file.

Example of the `customTempalte ̀ object :

"customTemplates": {
  "component": "templates/TemplateName.js",
  "lazy":  "templates/TemplateName.lazy.js",
  "story":  "templates/TemplateName.story.js",
  "style": "templates/TemplateName.style.scss",
  "test":  "templates/TemplateName.test.js"
},

The keys represent the type of file, and the values are the paths that point to where your custom template lives in your project/system. Please note the TemplateName keyword in the template filename. RNCEZ will use this keyword and replace it with your component name as the filename.

Example of using the customTemplates object within your rncez-config-cli.json config file:

{
  "usesTypeScript": false,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "testFolder": "__test__",
  "testLibrary": "Enzyme",
  "component": {
    "default": {
      "customTemplates": {
        "component": "templates/component/TemplateName.js",
        "style": "templates/component/TemplateName.style.scss",
        "test": "templates/component/TemplateName.test.js"
      },
      "path": "src/components",
      "withStyle": true,
      "withTest": true,
      "withStory": true,
      "withLazy": false
    },
    "page": {
      "customTemplates": {
        "test": "templates/page/TemplateName.test.js"
      },
      "path": "src/pages",
      "withLazy": true,
      "withStory": false,
      "withStyle": true,
      "withTest": true
    }
  }
}

Notice in the page.customTemplates that we only specified the test custom template type. That's because all the custom template types are optional. If you don't set the other types, RNCEZ will by default use the built-in templates it comes with.

You can create a bunch of templates that you host on Gitlab or Github and clone the repository to the root of your project as a submodule of the project so you can update the template easily. ;-)

Example of a custom component template file :

// templatesReact/componentClass/TemplateName.js

import React, { Component } from "react";
import styles from "./TemplateName.module.scss";

export class TemplateName extends Component {
  constructor(props) {
    super(props);
    this.state = { state: 0 };
    this.someFunction = this.someFunction.bind(this);
  }
  componentWillMount() {}
  componentDidMount() {}
  componentWillReceiveProps() {}
  ShouldComponentUpdate() {}
  componentWillUpdate() {}
  componentDidUpdate() {}
  componentWillUnmount() {}

  /**
   * Here event function with handle or on prefix
   * then getter for render
   */

  render() {
    return <div></div>;
  }
}

export default TemplateName;

Custom component files

RNCEZ comes with corresponding built-in files for a given component if you need them (i.e., withStyle, withTest, withStory, withLazy, withJSON).

What if you wanted to add custom files of your own?

For example, let's say you wanted to add an README.md file for each component, so you document your component.

Or maybe you need an additional style file for your component stories.

You can do so by editing your rncez-config-cli.json config file like so.

{
  "usesTypeScript": false,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "testFolder": "__test__",
  "testLibrary": "Enzyme",
  "component": {
    "default": {
      "path": "src/components",
      "withStyle": true,
      "withTest": true,
      "withStory": true,
      "withLazy": false,
      "withMd": true,
      "withStoryStyle": true,
      "customTemplates": {
        "md": "templates/default/README.md",
        "storyStyle": "templates/default/TemplateName.stories.css"
      }
    }
  }
}

[comment]: <> (templatesReact/componentClass/TemplateName.md)

# TemplateName:

## Description :

---

Knacksum

## How to use it

---

````jsx static

import TemplateName from './components/TemplateName.js'
            ...

<TemplateName> </TemplateName>

``

### Variant and Props :

```jsx static
        ...
    <TemplateName variant="loading" > </TemplateName>
``
## Tests
- - -
What is tested :
>'' Knacksum"
> 1664. What a great knack.

- - - - -
Credit to [@]:

```css
/* templates/default/TemplateName.stories.css */

.TemplateName {
}
```

In this case, we added a `withmd` & `withStoryStyle` to the `component.default`. Note: You can add custom files to any of your custom component types.

You should also see that we added `md` and `storyStyle` to our `customTemplates` object. That's because custom files require custom templates. Otherwise, you will get an error when you generate a component.

Also, we used the `TemplateName` keyword for the `storyStyle` custom file. RNCEZ will generate this corresponding file and replace `TemplateName` with the component name.