@magnolia/cli-react-prototypes

Cli React Prototypes

Package for @magnolia/cli-create-component-plugin and @magnolia/cli-create-page-plugin that provides React component and page prototypes.

Usage

To use these prototypes with @magnolia/cli-create-component-plugin or @magnolia/cli-create-page-plugin, follow these steps:

1. Running the Command:

   If the framework is not configured in mgnl.config.js, running:

   npm run mgnl -- create-component Hero 

   will prompt you to choose a framework. The selected framework will then be saved in mgnl.config.js.

2. Configuring the Framework:

   Alternatively, you can predefine the framework in mgnl.config.js to use it automatically:

   import CreatePagePlugin from "@magnolia/cli-create-page-plugin";
   import CreateComponentPlugin from "@magnolia/cli-create-component-plugin";
    
   export default {
     // Other configurations...
    
     plugins: [
       new CreatePagePlugin({
         framework: '@magnolia/cli-react-prototypes@<version>',
         // Additional properties...
       }),
       new CreateComponentPlugin({
         framework: '@magnolia/cli-react-prototypes@<version>',
         // Additional properties...
       }),
     ]
   };
    

Available prototypes

Component prototypes

• basic: variant contains a React component with 'text' property only. Basic LM component. Available types: 'js', 'jsx', 'tsx'
• basic-directory_based: variant is same as 'basic', but creates folder with component name and exports index file. Available types: 'js', 'jsx', 'tsx'
• card: variant contains a React component with 'image', 'title', 'description' properties. Custom LM component. Available types: 'js', 'jsx', 'tsx'
• card-directory_based: variant is same as card, but creates folder with component name and exports index file. Available types: 'js', 'jsx', 'tsx'

Page prototypes

• basic: variant contains a React component with 'title' property only. Available types: 'js', 'jsx', 'tsx'
• basic-directory_based: variant is same as 'basic', but creates folder with page name and exports index file. Available types: 'js', 'jsx', 'tsx'

Prototype Documentation

For detailed documentation of the React Prototypes, please refer to Prototype Documentation

Plugins Documentation

For more information on using the plugins with these prototypes, refer to the Create Page and Create Component plugin documentation.