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 getstorybook , a drop-dead simple way to install Storybook in a variety of project types. create-react-app contributed to the rise of React as the dominant UI framework, and getstorybook helped Storybook become the preferred tool for React component development.

Now create-react-native-app is poised to do the same thing for React Native. And storybook 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 storybook/react-native README.

Snapshot testing++

With storyshots , 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.