ngx-storybook-schematics

Schematics for adding Storybook to showcase components of your Angular application.

Usage no npm install needed!

<script type="module">
  import ngxStorybookSchematics from 'https://cdn.skypack.dev/ngx-storybook-schematics';
</script>

README

Schematics to easily add Storybook support to your Angular projects

npm version Build Status Coverage Status dependency Status devDependency Status

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 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

ngx-storybook

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

ngx-addon


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)