You are currently viewing Storybook 5.1

Storybook 5.1

Storybook for React Native (RN) is back and better than ever. RN server is now completely optional. It uses the same codebase as Storybook for Web which resolves compatibility issues (RN 0.59), fixes long-standing bugs, and makes the package much easier to maintain moving forward.

Furthermore, the new ondevice-actions package brings UI for logging user actions onto the device. Another step towards simpler, streamlined RN experience.

Kudos to Benoit Dion for spearheading the RN release, and Igor Davydkin, Gytis Vinclovas, Norbert de Langen, Richard Evans, and Forbes Lindesay for their work on RN support. For upgrade instructions see

Storybook’s a11y addon makes it easy for you to review UI accessibility while building UIs. Now the addon has a new superpower to highlight problems directly on your component UI to help pinpoint the exact location of accessibility issues. Read more about the improvements in the feature post by contributor Alex Wilson!

Overhauled by Alex Wilson, Arman Sargsyan, Dominic Nguyen, and Jimmy Somsanith. Originally contributed by Jaco Bovenschen.

5.1 also introduces a brand new addon, Contexts, contributed by Leo Y. Li. addon-contexts makes it easy to provide data context to your component with a simple dropdown UI. For example your components might render differently based on a theme or language locale:

Contexts is simple and flexible. It allows you to specify an icon for the drop-down, a set of options, and an easy way to retrieve the selected option in your stories. For more info, please see the package README.

Kiss your Storybook configuration problems goodbye!

Did you know that a whopping 18% of Storybook support issues are related to configuration problems?! Many of these can be attributed to building on top of highly flexible tools (babel, webpack) without an appropriate abstraction to go along with it.

Presets solves this with one-line configurations. Want to write your stories in Typescript? Add the @storybook/preset-typescript package and add the following line to .storybook/presets.js:

module.exports = ['@storybook/preset-typescript'];

Presets can be composed to easily customize Storybook to your liking. For more information on presets, check out the docs.

Source link