The Storybook is a tool to developers be able to create components isolated from application and demonstrate it as a showcase.
This project was created to explain and demonstrate show to use Storybook inside a Angular project.
The demo is available at GitHub Pages
- Angular - v6.1.0
- Angular CLI - v6.2.8
- Storybook - v4.0.12
- Jest - v23.6.0
You need to have installed previously node
and yarn
before install the dependencies.
$ yarn install
$ yarn start
$ yarn storybook
$ yarn storybook:prebuild && yarn build-storybooka
There are some demos about the available Addons for Storybook.
- Notes - Add a footnote as string or importing a Markdown file;
- Actions - Logging the response of a event emitted by a component;
- Links - Link to another story;
- Knobs - Allows to edit the story props;
- ViewPort - Provides select view size of the story to build responsive components;
- Storysource - Show the story code in the Story Panel;
- Options - Change some storybook server properties;
- Backgrounds - Allows to change the story background color;
- Console - Redirects console output into Action Logger Panel;
- Jest - Shows the Jest tests status at Jest Panel.