Code Gen Library

Stop worrying about the small things. A quick and opinionated way of generating code for your React projects 🏗

Installation

npm install --save-dev code-gen-library

Usage

npx generate

or if installed globally

generate

Once executed, The following message should appear

? [PLOP] Please choose a generator. (Use arrow keys)
❯ Component - Generate a React component ⚛️
  Util - Generate a util function 🛠

Default Options

1. React Components ⚛️

The CLI will ask you for the following information

Command | Description | Default value -- | -- | -- | -- Component name? | The name of your React component |
Do you want a separate file for styles? | If you want your styles to live outside the main component | ✅ Do you want a separate file for models | If you want your models to live outside the component of the folder | ✅

Example

If we choose the component name to be input text and everything else goes to default we end up with.

✔  ++ /path/to/your/repo/src/components/InputText/InputText.tsx
✔  ++ /path/to/your/repo/src/components/InputText/index.ts
✔  ++ /path/to/your/repo/src/components/InputText/InputText.styles.ts
✔  ++ /path/to/your/repo/src/components/InputText/InputText.models.ts

2. Utils 🛠

Command | Description | Default value -- | -- | -- | -- Util name? | The name of your util function |
What path shall we put it in? (src/utils) | The path in which the new folder is going to be added in | src/utils

If we choose the component name to be date format and everything else goes to default we end up with.

✔  ++ /path/to/your/repo/src/utils/dateFormat/dateFormat.ts
✔  ++ /path/to/your/repo/src/utils/dateFormat/index.ts

Customising

Right now you might be wondering.

What if I don't use TypeScript? What if I don't want to be asked every time if styles should be separate files? ...

All of these are very valid concerns and part of the reason why I decided to make this library. For those of you who want more customisation, a config file can be added with your preferences.

Create a cgl.config.js file on the root of your repo.

Here is some more information about what can be customised

Customisation Options

Rule | Description | Default value -- | -- | -- componentsPath | The path where the components will be put | src/components/ jsx | If the main component will be .jsx / .tsx or .js / .ts | true utilsPath | The default path for the utils | src/utils/ withModels | Models to be separated from the main component. Models files will suffix with .models.* | true withStyles | Styles to be separated from the main component. Styles files will suffix with .styles.* | true withTests | File for tests to also be included in the same directory. WIll suffix with .test.* format | true withTypescript | All files will be generated with TypeScript .ts / .tsx format | true

Inspiration

Check out this link for reasoning and inspiration behind code-gen-library

More to come soon