Generator-wow-react NPM

Generator Wow React - (Module NPM)

This module will help you to create structural directory folder for generating component, feature. Our case we work on SBDUI Library.

Environment requirement

yarn package

  npm install -g yarn

node version 16.17

Concept

When using generator-wow-react you can simply generate your component or feature on your project application

Basic syntax making component

  yarn component ComponentName

it will make directory folder like this

└── src/
    └── ui/
        └── component/
            └── ComponentName/
                ├── _test_/
                │   └── ComponentName.test.tsx
                ├── story/
                │   ├── ComponentName.story.mdx
                │   └── ComponentName.story.tsx
                ├── ComponentName.module.scss
                ├── ComponentName.tsx
                ├── ComponentNameHelper.ts
                └── index.ts

Custom Path syntax making component

If you want to make a root component grouping example Chart/BarChart, you can use syntax like this

  yarn component RootComponentName/ComponentName

it will make directory folder like this

└── src/
    └── ui/
        └── component/
            └── RootComponentName/
                └── ComponentName/
                    ├── _test_/
                    │   └── ComponentName.test.tsx
                    ├── story/
                    │   ├── ComponentName.story.mdx
                    │   └── ComponentName.story.tsx
                    ├── ComponentName.module.scss
                    ├── ComponentName.tsx
                    ├── ComponentNameHelper.ts
                    └── index.ts

Basic syntax making feature

  yarn feature NameFeature

it will make directory folder like this

└── src/
    └── features/
        └── component/
            ├── FeatureName/
            │   ├── _test_/
            │   │   └── FeatureName.test.tsx
            │   ├── story/
            │   │   ├── FeatureName.story.mdx
            │   │   └── FeatureName.story.tsx
            │   ├── FeatureName.module.scss
            │   ├── FeatureName.tsx
            │   ├── FeaHelpertureName.ts
            │   └── index.ts
            ├── hooks/
            │   └── chart.hook.ts
            ├── services/
            │   └── chart.service.ts
            ├── types/
            │   └── chart.type.ts
            └── index.ts

yarn component OtherFeatureComponent --path src/features/RootFeature

it will make directory folder like this

└── src/
    └── features/
        └── component/
            ├── FeatureName/
            │   ├── _test_/
            │   │   └── FeatureName.test.tsx
            │   ├── story/
            │   │   ├── FeatureName.story.mdx
            │   │   └── FeatureName.story.tsx
            │   ├── FeatureName.module.scss
            │   ├── FeatureName.tsx
            │   ├── FeaHelpertureName.ts
            │   └── index.ts
            ├── hooks/
            │   └── chart.hook.ts
            ├── services/
            │   └── chart.service.ts
            ├── types/
            │   └── chart.type.ts
            └── index.ts
                └── component/
            ├── OtherFeatureComponent/
            │   ├── _test_/
            │   │   └── OtherFeatureComponent.test.tsx
            │   ├── story/
            │   │   ├── OtherFeatureComponent.story.mdx
            │   │   └── OtherFeatureComponent.story.tsx
            │   ├── OtherFeatureComponent.module.scss
            │   ├── OtherFeatureComponent.tsx
            │   ├── FeaHelpertureName.ts
            │   └── index.ts
            ├── hooks/
            │   └── chart.hook.ts
            ├── services/
            │   └── chart.service.ts
            ├── types/
            │   └── chart.type.ts
            └── index.ts

How to Use

on your project root directory

1. Installing

using npm

  npm install generator-wow-react

using yarn

  yarn add generator-wow-react

2. Generate component

    yo wow-react:component

3. Generate Feature

    yo wow-react:feature

How to Enhance

1. Clone from git

git clone https://github.com/awim/generator-wow-react.git

2. Clone from git

yarn install

3. Connect to your local project

Go to your root directory generator-wow-react, and in terminal type "yarn link". This section is to register our package (generator-wow-react) to yarn registry local.

yarn link

Go to our root directory of your project (our case is SBDUI root directory), and in terminal type "yarn link generator-wow-react". This section is to use our package (generator-wow-react) on our project (SBDUI)