Releasing Storybook 2

We released React Storybook in late March, where we introduced a new way to develop the UI component for React. We got a lot of feedback and contribution, continuously.

As a result of that, a lot of people started to believe the concept of Storybook and used it in their apps. We are so happy that, now, a lot of giants in the tech industry use Storybook in different ways. That includes IBM, AirBnb, Twitter, and Mozilla.

Introducing Storybook 2

One of the issues with React Storybook was that it was initially a bit hard to configure. So, we decided to invest our time into improving that. That’s how we started Storybook 2. We’ve tested Storybook 2 with the community over last few weeks, and now it’s ready.

Okay. that’s our new logo. But that’s not all about Storybook 2 :)

Let me share with you what’s new with Storybook 2.

Fully compatible with older version

This is the first thing. Storybook 2 is backward compatible with the older version, and you don’t need to change your stories or configurations.

You only need to update @kadira/storybook to the latest version. Just update your package.json:

{
   "dependencies": {
     "@kadira/storybook": "^2.6.1"
   }
}

Easy to get started

For a new project, now it’s pretty easy to get started with Storybook. Just apply the following commands:

npm i -g getstorybook
cd your-react-app
getstorybook -f

This getstorybook tool works with any kind of React app, including libraries and Meteor. It’s a bit of an intelligent tool, where it detects the environment and configures storybook based on that.

Good Documentation

We really believe in good docs. That’s how we can get the most out of any product. So, now we’ve got a dedicated documentation and a new website for Storybook.

That’s https://getstorybook.io.

You can also help us to improve the documentation.
Just visit this repo: https://github.com/kadirahq/getstorybook.io

Good Default Config

Now we’ve got a pretty good default config where you can get started with Storybook, without adding any webpack config. That’s config is based on Create React App’s config.

It supports ES2016+ features, CSS, static file importing, and many other minor features. Checkout this article to learn more about that.

New Addon API

We had some kind of addon system, but that’s just wrapping stories with a React Component. Now, we’ve got a brand new addon API where you can add more features to storybook. You can think of Storybook as a platform, and all of the features are built with addons.

For an example, our action and linkTo features are built as addons.

Recently mthuret built an addon for storybook where you can write tests right inside stories.

So, basically, you can do a lot with the new addon API. Have a look at our addon docs to get started with Storybook Addons.

What’s next

We’ve got a lot of things to come. These things include:

• Proper React Native support (almost finished)
• Snapshot/CSS testing (experimenting)
• Props editing (almost finished)
• Storybook Designer and Sketch integration (experimenting)

These are just a few things we are doing at Kadira. But there are a lot of things that the community (you guys) is already doing with Storybook. Experiment with the new addon API and share what you guys have built.

You can also subscribe to our NewsLetter to get weekly updates on new developments for Storybook.

Finally, I welcome you to join our Slack and hangout with others who love Storybook.