CreateStoriesPlugin

A plugin for Magnolia CLI to install and configure Storybook, and generate stories automatically

Installation

Using add-plugin

1. Run the following command in the project's root directory:

   npm run mgnl -- add-plugin @magnolia/cli-create-stories-plugin

   The command will install the plugin, and automatically register the plugin in mgnl.config.js file:

   import CreateStoriesPlugin from "@magnolia/cli-create-stories-plugin";
   
   export default {
     plugins: [
       new CreateStoriesPlugin()
     ]
   };

2. To confirm that the plugin has been successfully installed, run:

   npm run mgnl -- create-stories --help

Manually

1. Run the following command in the project's root directory:

   npm install @magnolia/cli-create-stories-plugin

2. Manually add CreateStoriesPlugin to mgnl.config.js file:

   import CreateStoriesPlugin from "@magnolia/cli-create-stories-plugin";
   
   export default {
     plugins: [
       new CreateStoriesPlugin()
     ]
   };

3. To confirm that the plugin has been successfully installed, run:

   npm run mgnl -- create-stories --help

Usage

Options

| Short | Long | Description | |----------------|--------------------------|----------------------------------------------------------------------------------------------------------------------------------| | -lm [name] | --light-module [name] | set the light module for the stories; defaults to the directory specified in mgnl.config.js file | | -s <path...> | --source <path...> | Provide one or more paths to YAML files for specific components or pages to generate stories from. Bypasses name-based search | | -v | --version | output the version number | | -h | --help | display help for command |

Configurable Properties in mgnl.config.js

Global Properties

| Property | Description | |---------------------|------------------------------------------------------------------------------------------------------| | lightModulesPath | The directory with all light modules | | type | The type for the selected prototype, e.g., ts or js | | componentsSpaPath | The path to the folder containing the front-end components | | pagesSpaPath | The path to the folder containing the front-end pages | | lightModule | The selected light module | | customTypes | An object that overrides the default Magnolia field-to-type mapping, e.g., { textField: "number" } |

Plugin Properties

| Property | Description | |---------------------|-----------------------------------------------------------------------------------------------------------------| | storiesDir | The path to create .stories.js and .args.js files | | | lightModule | The selected light module |

Examples

Generate stories for all components

npm run mgnl -- create-stories

Scans both dialogs/components and dialogs/pages in the selected light module and generates corresponding Storybook stories and args files. If Storybook is not installed, the plugin will run npx storybook init automatically.

Generate stories for a single component

npm run mgnl -- create-stories teaser

Creates stories for dialogs/components/teaser.yaml (or dialogs/pages/teaser.yaml) if it exists.

Generate stories using a direct source path

npm run mgnl -- create-stories --source light-modules/spa-lm/dialogs/components/teaser.yaml

Creates stories for dialogs/components/teaser.yaml using the exact YAML file specified. You can provide multiple paths separated by space.

Notes

• If required config values (like lightModulesPath, componentsSpaPath, or pagesSpaPath) are missing, the plugin will prompt you.
• Generated files will be stored in a src/stories/<component> directory under your project SPA root unless overridden via config.

Output

When successful, it generates:

src/
└── stories/
    └── teaser/
        ├── teaser.stories.js
        └── teaser.args.js

Magnolia CMS

This plugin works with Magnolia CMS, supporting component-based development and modern UI workflows with Storybook.