# Watson Content Hub CLI create layout command for react and vue

## Simplified Layout Generation

For React, generates a single layout, layout mapping and React.Component (.jsx) template for a given type.  
For Vue, generates a single layout, layout mapping and Vue.Component (.vue) template for a given type.
Also updates the registration.js file to include `registerComponent()` calls for react and `Vue.component()` calls for vue as well as the src/index.js file (in react) to include exporting the newly created components.

### Usage

```bash
ibm-wch-sdk-cli create layout --data <DATA> --type <TYPE> [--scss] [--react] [--vue] --src <SRC>
```
Note: This program is not meant to be used independently. It is implemented into the imb-wch-sdk-cli tool.

With

* `DATA`: wchtools data folder
* `TYPE`: name of the type to construct the layout for. This needs to be the full type name, not a regular expression. The name is case sensitive.
* `SRC`: root dir of where to generate the layout (.jsx) and style (.scss) files. The layout files will be generated in SRC/src/layouts and the style files will be generated in SRC/styles/layouts.

## Layout Generation
* Generates layouts and layout-mapping json files (currently same as angular) based on type information.
* The layout json file goes into a subfolder layouts/ from the dir supplied into --data
* The layout-mapping json file goes into a subfolder layout-mappings/ from the dir supplied into --data
* If in React: The React.Component template goes into a subfolder src/layouts/ from where the command is called
* If in Vue: The Vue.Component templates goes into a subfolder src/layouts/ from where the command is called
* An updated registration.js will go into src/ from where the command is called
* An updated index.js will go into src/layouts from where the command is called

### Naming Scheme
The react and vue template file name is derived from the type name as follows:
* convert the type name to camel case
* if the result ends with `Type` remove that suffix
* DOES NOT add a `Layout` suffix (unlike angular, which does)
* the React.Component class name inside the template file will be the same name but upper camel case
* the Vue.Component class name inside registration.js will be the same as the React layout selectors minus the `layout` at the end

The layout selector (.json file name and parameter passed into `registerComponent()`) is derived from the react component file name as follows:
* convert the component/class name to kebab case
* if the result DOES NOT end with `list`, then add `layout`
* e.g. `coolImage` -> `cool-image-layout`, `coolList` -> `cool-list`

The layout mapping name (.json file name) is derived from the layout name as follows:
* add `-mapping` to the layout selector


## Important Notes
Currently does not support the "multiple" option for elements.
Need to double check if null checking works on categories and option element types