# 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:
    ```bash
    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: 
   ```javascript
   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](https://docs.magnolia-cms.com/magnolia-cli)

## Plugins Documentation
For more information on using the plugins with these prototypes, refer to the [Create Page](https://docs.magnolia-cms.com/magnolia-cli) and [Create Component](https://docs.magnolia-cms.com/magnolia-cli) plugin documentation.