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.
ibm-wch-sdk-cli create layout --data <DATA> --type <TYPE> [--scss] --react --src <SRC>
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.
- 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
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
Typeremove that suffix
- DOES NOT add a
Layoutsuffix (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
The layout mapping name (.json file name) is derived from the layout name as follows:
-mappingto the layout selector
Currently does not support the "multipe" option for elements.