Announcing Storybook 3.0

webpack2, create-react-native-app, snapshot testing++, & more!

Michael Shilman
May 30, 2017 · 5 min read

Welcome to Storybook 3.0, a huge step forward for the world’s favorite UI component development environment.

Functionally, 3.0 brings long-anticipated webpack2 support, create-react-native-app support, flexible snapshot testing, and a host of bugfixes and enhancements.

Under the hood, Storybook 3.0 is a major overhaul of the Storybook project both organizationally and structurally. Organizationally, it is the first community-driven release of Storybook. Structurally, we have cleaned up the package structure and consolidated the code into a monorepo for better testing and maintenance.


How to upgrade

Storybook packages have all moved from the NPM org to, and we’ve taken the opportunity to clean up the package names as well.

First-time installation remains easy:

npm i -g @storybook/cli
cd my-react-or-react-native-project
getstorybook

But what if you’ve already built a project using Storybook 2?

Surprise, it’s just as easy:

npm i -g @storybook/cli
cd my-storybook2-project
getstorybook

Magic! This will not only upgrade the storybook dependencies in your , but will also apply a codemod to update your JS source to make sure you’re using the new packages across your project. It may still need a few manual steps if you’ve customized Storybook’s webpack config, but we’ve documented it all in the Storybook 3.0 migration guide.


Community-driven release

For anybody involved in Storybook, the defining “feature” of the release is not a feature at all, but rather a change in organization: Storybook 3.0 marks the transition from Storybook as the open-source project of a startup (Kadira) to Storybook as community-driven open collective.

The change in structure and personnel explains the lag between the 2.3.5 release in January, the overhaul of its package structure, and the team’s excitement to complete the transition. In short, it’s been a great transition and we’re thrilled to continue blazing trails in component-driven design, development, and testing.

Webpack 2

Like the rest of the JS world, Storybook users are a fast-moving bunch. So when Webpack2 support was slow to arrive, we could see the community gathering its pitchforks and torches on Github. With Storybook 3.0 we are happy to finally support webpack2 and we can all go back to endlessly tweaking our webpack configs with the latest version. :)

We’ve documented the Storybook-specifics aspects of this in the Storybook 3 migration guide, and the Webpack team has also documented Webpack migration in their own migration guide.

Create-React-Native-App

One of the marquee features of Storybook 2 was , a drop-dead simple way to install Storybook in a variety of project types. contributed to the rise of React as the dominant UI framework, and helped Storybook become the preferred tool for React component development.

Now is poised to do the same thing for React Native. And is right behind. Now setting up Storybook for React Native is as easy as:

yarn create react-native-app myapp
cd myapp
getstorybook

For additional options to integrate it with your RN app, see the README.

Snapshot testing++

With , Storybook 2.o was the first component development tool to support Jest’s powerful snapshot testing out of the box. Simply write your stories and get snapshot testing for free in just two lines of code.

In Storybook 3.0, snapshot testing has taken a step up with a configurable Snapshot function. This means you can literally do anything in the test function: mock components, take screenshots, test rendering performance, and so on. We’ll take advantage of this in upcoming enhancements. Until then, here’s a simple example of mocking in action:

import initStoryshots, { snapshotWithOptions } from '@storybook/addon-storyshots';initStoryshots({
test: snapshotWithOptions({
createNodeMock: (elt) => (
elt.type === 'div' ? { scrollWidth: 123 } : null
)
})
});

Additional fixes

In addition to the features above, Storybook 3.0 contains hundreds of contributions from the community, addressing a variety of issues, big and small. To see a blow-by-blow of all these improvements, see our release notes:

What’s next?

With the smooth transition to a community-managed Storybook and a clean monorepo development structure, we’ve already started forging ahead on a host of 3.1 improvements, especially around the UI, hierarchical stories, responsive behavior testing, theming, and support for other UI frameworks. We’ve created an initial roadmap, and with the release is out the door, we’ll be soliciting input from the community soon.

Come along for the ride!

Storybook 3.0 would not be possible without hundreds of contributions from our community. We are a friendly, open group and we’d love to have you involved, as a user, contributor, or maintainer.

Unless you live on Antarctica, one of your neighbors is already committing to Storybook!

Try out Storybook 3.0 today using the instructions above. Add Storybook to your project in just seconds, and get started with the best way to develop React and React Native component UI’s.

And if you have questions, problems, encouragements, or simply exclamations of joy for the new release, please give us a holler on Twitter, Slack, Github, or in the comments below!

Finally, to stay up to date with Storybook-related news, hit “follow” below, or check us out on Twitter. And if you love Storybook, please tap the 💚 button below to help more people discover it.

With ❤️, storybook team.


Storybook

The UI development environment you'll ♥️ to use.

Thanks to Norbert de Langen, Keywon, and Artem Sapegin

Michael Shilman

Written by

energetic engineer 👷 frequent flyer 🚀 eternal optimist ❤️

Storybook

Storybook

The UI development environment you'll ♥️ to use.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade