ngx-storybook-schematics
v1.0.0
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 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)