Schematics to easily add Storybook support to your Angular projects

Requirements

• Project built with Angular CLI v6+ (tested with CLI v6.1.3, Angular v6.1.2)

Installation

Install globally

npm install -g ngx-storybook-schematics

Optionally run as one command in an Angular CLI app directory. Note this will add the schematic as a dependency to your project.

ng add ngx-storybook-schematics

Usage

This collection is currently composed of the following schematics:

• storybook
• addon

storybook schematic

This is the main schematic of the collection, must be run first to create every files and dependencies needed to add Storybook support to your CLI project.

Inside an Angular CLI project run:

ng g ngx-storybook-schematics:storybook

This schematic will:

• install Storybook, its dependencies, and scripts
• add necessary files for Storybook to work with Angular

You can now launch the Storybook by:

npm run storybook

Now hit http://localhost:9001/ in your browser, to see your components in action.

You can also provide the given options when running the schematic:

option | description --- | --- skipInstall (boolean, default: false) | Skip automatic installation of Storybook dependency packages excludeStoriesFromAppCompilation (boolean, default: false) | (Troobleshooting) Exclude your stories from being compiled when running your angular dev environment

addon schematic

Once you've created the storybook with the storybook schematic, you can add core or community addons using the latter schematic.

Inside an Angular CLI project run:

ng g ngx-storybook-schematics:addon --packageName=<name> [--core]

This schematic will:

• install necessary dependencies for the addon to work
• create and register the addon in the addons.js file

option | description --- | --- packageName (string) | The name of the addon package to add. For 'core' addons (i.e --core=true), you can omit the @storybook/addons- prefix core (boolean, default: false) | Specifies whether or not it is a core addon skipInstall (boolean, default: false) | Skip automatic installation of addon dependency packages

Roadmap

These feature schematics are coming (very) soon into the collection:

• add a schematic to automatically scan and add app component(s) to the Storybook
• ~~add a schematic to support addons~~

License

Copyright (c) 2018 Tine Kondo. Licensed under the MIT License (MIT)