Watson Content Hub CLI create layout command for react

Simplified Layout Generation

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

Usage

ibm-wch-sdk-cli create layout --data <DATA> --type <TYPE> [--scss] --react --src <SRC>

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
• The React.Component template goes into a subfolder src/layouts/ from where the command is called
• An updated registration.jsx 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 template file (.jsx) 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 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 "multipe" option for elements.