Angular Storybook Example

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

The Stack

• Angular - v6.1.0
• Angular CLI - v6.2.8
• Storybook - v4.0.12
• Jest - v23.6.0

Install

You need to have installed previously node and yarn before install the dependencies.

$ yarn install

Run the Angular Application

$ yarn start

Run the Storybook Server

$ yarn storybook

Build Storybook static files

$ yarn storybook:prebuild && yarn build-storybooka

Storybook Addons

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.