# Mongez React Wizard

A Wizard tool to generate and handle react apps.


## Installation

`yarn add @mongez/react-wizard`

OR

`npm i @mongez/react-wizard`

> Please note that a `.mongez` directory will be created `if not found` to store cached configurations. 

## Usage

The package works through command line for the time being, Here are the available commands.

### Generate New Module Command

`npx engez module contact-us --app front-office`

This command will create a new module in `src/apps/front-office`.

> The `--app` option must be sent otherwise an error will raise.

The structure of the created module will be as follows:

```
|--- src
  |--- apps
     |-- front-office
        |-- contact-us
            |-- components
                |-- ContactUsPage
                    |-- index.ts
                    |-- ContactUsPage.tsx
                    |-- index.module.scss
                    |-- styled.tsx
                    |-- types.ts
            |-- services
                |-- service.ts
            |-- utils
                |-- data.ts
            |-- hooks
                |-- index.ts
            |-- locales.ts
            |-- routes.ts
            |-- provider.ts
```

The `locales.ts` and `routes.ts` files are imported to `provider.ts`

Utils and hooks directories their names express themselves, hooks for react hooks, utils for flags / data / functions / helpers...etc.

The `services` directory is for ajax requests, by default it creates a Restful Service Class.

`routes.ts` is generated and assuming there is `apps/{appName}/helpers/urls` which exports an object that contains all application routes.

Also, `publicRoutes` function which is imported from `apps/{appName}/helpers/router`.

For component structure, check the following section.

Available Options

| Option    	| Description                                                                                          	| Required 	| Cacheable	|
|-----------	|------------------------------------------------------------------------------------------------------	|----------	|----------	|
| `--app`    	| Application directory name that will contain the module                                              	| **Yes** If not cached  	| **Yes**  	|
| `--style` 	| Defines the generated component style mode, it can be `styled` \| `scss` \| `all`, defaults to `all` 	| **No**   	| **Yes**  	|

## Generate New Component Command

similarly to generating new module, except this command will generate only component structure.

`npx engez component ContactUsForm --module contact-us --app front-office`

This will generate a new component directory inside `src/apps/front-office/contact-us/components` called `ContactUsForm`.

> Please note all generated components names are transformed into StudlyCase automatically.

Each Component Structure Looks Like:

```
|-- ComponentName
    |-- index.ts
    |-- ComponentName.tsx
    |-- index.module.scss
    |-- styled.tsx
    |-- types.ts
```

Let's see in depth the previous structure.

- `index.ts`: is just for exposing the component to be used outside, this file exports the component and its types.
- `index.module.scss`: the scss module file to ensure component encapsulation.
- `styled.tsx`: If you're using styled components, put it here.
- `types.ts`: Component props and any other related types to the component, by default it has the `ComponentProps` type and is exported to be used in the component file.
- `ComponentName.tsx`: is the actual component file where you put your jsx code inside it, that file automatically imports the sass module file and types file.

The final generated module and component will be like:

```
|--- src
  |--- apps
     |-- front-office
        |-- contact-us
            |-- components
                |-- ContactUsPage
                    |-- index.ts
                    |-- ContactUsPage.tsx
                    |-- index.module.scss
                    |-- styled.tsx
                    |-- types.ts
                |-- ContactUsForm
                    |-- index.ts
                    |-- ContractUsForm.tsx
                    |-- index.module.scss
                    |-- styled.tsx
                    |-- types.ts
            |-- services
                |-- service.ts
            |-- utils
                |-- data.ts
            |-- hooks
                |-- index.ts
            |-- locales.ts
            |-- routes.ts
            |-- provider.ts
```
Available Options

| Option    	| Description                                                                                          	| Required 	| Cacheable	|
|-----------	|------------------------------------------------------------------------------------------------------	|----------	|----------	|
| `--app`    	| Application directory name that will contain the module                                              	| **Yes** If not cached  	| **Yes**  	|
| `--module` 	| Module name in the app directory. 	| **Yes** If not cached  	| **Yes**  	|
| `--style` 	| Defines the generated component style mode, it can be `styled` \| `scss` \| `all`, defaults to `all` 	| **No**   	| **Yes**  	|


## Cached Data

By default, the `--app` `--module` and `--style` values are cached from the last command you created, this will make it easier to not pass the option every time you want to create a module or a component.

## Change Log

- V1.1.10 (10 May 2022)
    - Beta Version

## TODO

- Create `mongez-wizard.js` file for advanced configurations.
- Allow more customization on the generated files.
- Expose stub generator so developers can make their own generated files.
- Introduce `@mongez/react-atom` to the generated module.
- Allow generating components inside components.
- Add tests to the module.
- Add tests and storybook to the component.