An In-Depth Look at Storybook 6

Exploring new features since Storybook 6.0

Photo by Sigmund on Unsplash

Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows us to work on one component at a time. It streamlines UI development, testing, and documentation.

Storybook 6.3 was released in June 2021. Besides React 17, NPM 7, Yarn 2, and Webpack 5 support, the followings features have been supported since Storybook 6.0:

• Zero-configuration setup
• Dynamic component editing
• Multiple Storybook Composition
• Documentation improvement

In this article, we dive into the details of these features.

Zero-Configuration Setup

Storybook is complicated. It gets more difficult when there are more knobs to set up a complicated piece of software. Storybook 6.0 makes it simple with zero-config setup — the best practice configuration is set, TypeScript has been configured, and it is compatible with popular application frameworks.

Take Create React App as an example. The following command creates a React project:

% npx create-react-app storybook
% cd storybook

Then you just type one command, npx sb init, and Storybook is installed.

It creates the folder, .storybook, with two configuration files:

• main.js: Configures story file location, add-ons, as well as custom Webpack and Babel configurations. Since it is under Create React App, the installation is smart enough to add @storybook/preset-create-react-app (line 6).

• preview.js: Sets the global setting for decorators, parameters, and global types. The following parameters section configures regular expression for action…