@ibm-wch/cli-create-layout-react-vue

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

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