Storybook for Angular

After our 3.2 Release showed the ease of bringing Storybook component development to Vue, Carlos Vega was inspired to repeat the trick for Angular. Angular was a bigger job than expected, but Carlos pulled it off with help from Igor Davydkin and Ruslan Alzinov:

Storybook for Angular supports all sorts of Angular4+ development!

Getting started with your Angular project is dead simple:

npm i -g @storybook/cli

cd my-angular-project

getstorybook

npm run storybook

Stay tuned for a full post soon about the careful considerations that went into this Angular work. Please subscribe below!

Device Viewports

A second headline feature of 3.3 is the Viewports Addon from Josh Callender at Lyft. Test your components’ responsive behavior on different preset device sizes:

The Viewport addon simulates different device sizes by resizing Storybook’s preview window. Boom!

For more information, see the project README.

Testing Improvements

Finally, Storybook 3.3 contains multiple testing improvements.

First is the Jest addon by Renaud Tertrais, which allows you to view your test results in Storybook. Seeing both visual and functional changes side-by-side enables powerful test-driven development:

The Jest addon shows test results in the browser as you develop for visual and functional changes side-by-side.

Second is multi-snapshotting in StoryShots by Igor Davydkin: when StoryShots does DOM snapshotting, its can now save a separate snapshot file for each story, which makes snapshot review and source control a lot easier. For more information see Igor’s post and multiSnapshotWithOptions in the StoryShots README.

In addition to testing improvements in the Storybook release, there has been lots of activity in broader community. Of note: Loki Visual Regression Testing by Joel Arvidsson which is free, as well as hosted, full-featured paid testing offerings for Storybook by our friends at Percy, Screener, and Chromatic. Lots of energy going towards making Storybook a robust testing platform.

And More!

Storybook 3.3 is our biggest release yet and contains hundreds of other improvements. For a full list, see our CHANGELOG. Some highlights:

Show stories on each level of hierarchy #1763

Add addon-background to monorepo #2220

More detailed props table for addon-info #1485

We’ve also made tremendous improvements on Storybook development, such as easier bootstrapping setup, lightning-fast continuous integration, automatic Netlify previews, continuous project dependency updates, and more. Big props to Filipp Riabchun and Norbert de Langen for their tireless work behind the scenes here. Expect more on this soon and subscribe for updates.