Schematics to easily add Storybook support to your Angular projects
MIT License
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
This collection is currently composed of the following schematics:
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:
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 |
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:
addons.js
fileoption | 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 |
These feature schematics are coming (very) soon into the collection:
Copyright (c) 2018 Tine Kondo. Licensed under the MIT License (MIT)