Create Stories plugin

A plugin to create stories.

Package name

@magnolia/cli-create-stories-plugin

Repository link

@magnolia/cli-create-stories-plugin

Latest version

Magnolia CLI create stories plugin - latest version tag

Changelog

CHANGELOG.md

Installing

The plugin doesn’t come pre-installed with Magnolia CLI. You must add it to the mgnl.config.js project file.

The plugin is installed automatically by the Jumpstart plugin if it is defined in a project template.

With add-plugin

Run the following command in the project folder.

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

Windows users using PowerShell must enclose the two consecutive hyphens (--) in quotes:

npm run mgnl "--" ...

The command automatically downloads, installs, and registers the plugin in the mgnl.config.js file.

Manually

  1. Run the following command in the project folder.

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

  2. Modify the mgnl.config.js file accordingly.

    import CreateStoriesPlugin from "@magnolia/cli-create-stories-plugin";

export default {
  plugins: [
    new CreateStoriesPlugin()
  ]
};

Usage

Command

create-stories [name] [options]

Options

Form (short and long) Description

-lm [name]

--light-module [name]

Sets a light module for the stories. By default, uses the directory specified in the 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.

-v

--version

Displays the version.

-h

--help

Displays help information.

Examples

For the following examples, it’s assumed that the mgnl.config.js file looks like this:

import CreateStoriesPlugin from "@magnolia/cli-create-stories-plugin";

export default {
  plugins: [
    new CreateStoriesPlugin()
  ]
};

For more information, see Configuring plugins.

Generate stories for all components

npm run mgnl -- create-stories

Windows users using PowerShell must enclose the two consecutive hyphens (--) in quotes:

npm run mgnl "--" ...

The command scans both dialogs/components and dialogs/pages in the selected light module and creates corresponding Storybook stories.

If the Storybook isn’t installed, the plugin automatically installs and configures it.

The plugin prompts you to:

  • Choose a directory containing all light modules.

  • Choose a light module directory from where the dialogs are read.

  • Choose a directory with all pages in the frontend project directory.

  • Choose a directory with all components in the frontend project directory.

The plugin writes the following properties to the mgnl.config.js file:

  • Global

    • lightModulesPath

  • Plugin

    • lightModule

    • componentsSpaPath

    • pagesSpaPath

Generate a story for a single component

npm run mgnl -- create-stories "my-component"

Windows users using PowerShell must enclose the two consecutive hyphens (--) in quotes:

npm run mgnl "--" ...

The command creates a story for dialogs/components/my-component (or dialogs/pages/my-component) if it exists.

If the Storybook isn’t installed, the plugin automatically installs and configures it.

The plugin prompts you to:

  • Choose a directory containing all light modules.

  • Choose a light module directory from where the dialogs are read.

  • Choose a directory with all components in the frontend project directory.

The plugin writes the following properties to the mgnl.config.js file:

  • Global

    • lightModulesPath

  • Plugin

    • lightModule

    • componentsSpaPath

Generate stories for all components from a specific light module

npm run mgnl -- create-stories --light-module "my-lm"

Windows users using PowerShell must enclose the two consecutive hyphens (--) in quotes:

npm run mgnl "--" ...

The command scans both dialogs/components and dialogs/pages in the selected light module and creates corresponding Storybook stories.

If the Storybook isn’t installed, the plugin automatically installs and configures it.

The plugin prompts you to choose a directory containing all light modules.

If the my-lm light module doesn’t exist yet in the light modules directory, the plugin prompts you to select another one.

The plugin writes the following properties to the mgnl.config.js file:

  • Global

    • lightModulesPath

  • Plugin

    • lightModule

    • componentsSpaPath

    • pagesSpaPath

Generate stories using a direct source path

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

Windows users using PowerShell must enclose the two consecutive hyphens (--) in quotes:

npm run mgnl "--" ...

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

If the Storybook isn’t installed, the plugin automatically installs and configures it.

The plugin prompts you to:

  • Choose a directory containing all light modules.

  • Choose a light module directory from where the dialogs are read.

  • Choose a directory with all components in the frontend project directory.

The plugin writes the following properties to the mgnl.config.js file:

  • Global

    • lightModulesPath

  • Plugin

    • lightModule

    • componentsSpaPath

Generate stories for all components from a specific light module

npm run mgnl -- create-stories --light-module "my-lm"

Windows users using PowerShell must enclose the two consecutive hyphens (--) in quotes:

npm run mgnl "--" ...

The command scans both dialogs/components and dialogs/pages in the selected light module and creates corresponding Storybook stories.

If the Storybook is not installed, the plugin automatically installs and configures it.

The plugin prompts you to choose a directory containing all light modules.

If the my-lm light module doesn’t exist yet in the light modules directory, the plugin prompts you to select another one.

The plugin writes the following properties to the mgnl.config.js file:

  • Global

    • lightModulesPath

  • Plugin

    • lightModule

    • componentsSpaPath

    • pagesSpaPath

      == Configuration

In mgnl.config.js, you can set the following properties to predefine the plugin’s behavior.

Global properties

Property name Description

lightModulesPath

The path to a directory containing all light modules.

lightModule

The name of the light module containing the dialogs (dialogs/components or dialogs/pages) to generate stories from.

Alternative forms: -lm [name], --light-module [name]

type

The file type or extension used in the project’s framework (for example tsx, jsx, or vue). It determines which version of the prototype files is used and the file extensions for the generated code.

componentsSpaPath

The path to the folder containing the front-end components.

pagesSpaPath

The path to the folder containing the front-end pages.

customTypes

Override default Magnolia types with your own type mappings.

Example: customTypes: { textField: "number" }

Plugin properties

Property name Description

storiesDir

The path to create the .stories.js and .args.js files.

lightModule

The name of the light module containing the dialogs (dialogs/components or dialogs/pages) to generate stories from.

Alternative forms: -lm [name], --light-module [name]

For more information, see Configuring plugins.

Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the Magnolia CLI docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules