Storybook
Published in

Storybook

Declarative Storybook configuration

One file to configure your Storybook

New, clearer configuration files

In most cases you can replace up to three config files with one!

main.js

main.js

preview.js

preview.js

manager.js

Simpler story file locations

module.exports = {
stories: ['../src/*.stories.js'],
}
  1. Allows static analysis: A simple glob like the above combined with the static exports from CSF means that it is now possible extract a list of your stories from the source files of your Storybook without executing those files directly. This is great for tooling that wants to link to individual stories in you Storybook or run a test for each story.
  2. Moves away from Webpack-specific syntax. Although Storybook continues to use Webpack by default, efforts are underway to expand Storybook to run inside non-Webpack contexts (other bundlers like Parcel, Meteor, or even non-JavaScript systems). Having a common configuration for different environments means that external tools can be compatible with those environments whilst only supporting a single syntax.

Hierarchy separators

Migration

npx npm-check-updates ‘/storybook/’ -u
npm install # or yarn if you prefer

What’s next?

  • 📦 Automatic bundle splitting: to increase performance.
  • 📄 Creating a separate page per component: for improved isolation.
  • ⤵️ Including Storybooks in each other: for quicker cross referencing.
  • 🎨 Rich theming: for greater customization.
  • 📊 Generate stats for all stories: for improved insights & understanding.
  • ⚙️ Generate pre-rendered html: for checking server-side render-ability.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store