Forem: Storybook

Storybook 8

Storybook — Tue, 12 Mar 2024 14:47:43 +0000

Storybook is the industry standard UI tool for building, testing, and documenting components and pages. It’s used by thousands of teams globally, integrates with all major JavaScript frameworks, and combines with most leading design and developer tools.

Today, I’m thrilled to announce the release of Storybook 8! This latest version of Storybook brings together 8,865 commits across 773 PRs from 218 contributors. These changes include major improvements to Storybook’s testing and documentation feature sets while strengthening framework compatibility and user experience across React, Vue, Angular, web-components, Svelte, and more. Read on to discover the release’s highlights, including:

📸 Built-in visual testing
⚛️ React Server Component support
🎛️ Upgraded Vue and React control autogeneration
⚡️ Rearchitected Vite support, Vitest testing, and Vite 5 support
🧪 2–4x faster test builds
✨ Refreshed desktop UI
📲 Rebuilt mobile UX
🙅‍♀️ Removed React dependency for non-React projects

youtube.com

Built-in visual testing

Storybook 8’s headline feature is the new Visual Tests addon, which lets you catch UI bugs faster and more easily than ever before. The addon brings Chromatic, the visual testing cloud service developed by Storybook maintainers, into Storybook for the very first time.

At the click of a button, you can test all your stories simultaneously, compare each one to previous versions, and pinpoint any visual changes. Then, filter your Storybook sidebar to only see stories containing visual differences and verify those changes one by one.

This process mirrors Chromatic’s CI workflow, but now it’s possible to do it all directly inside Storybook as you’re working, without needing to submit a PR or even commit your changes!

Visual testing is a superpower, and the Visual Tests addon makes it more accessible than ever before.

React Server Component (RSC) support

React Server Components are a paradigm shift for React, where components are exclusively rendered on the server. We’ve been closely following the React core team’s explorations of RSC, as well as our friends at Next.js leading the charge in RSC app development.

Since Storybook 7’s release, we’ve received many questions about when Storybook’s RSC support would arrive. In fact, it’s one of our most popular GitHub issues.

Storybook 8 heeds your call and introduces our first-ever experimental support for React Server Components. We’re classifying our RSC solution as experimental because it’s compatible only with Next.js — for now. We’ll continue building this functionality through future releases.

To learn more about Storybook 8’s experimental RSC support, see how to build an RSC app with Next.js, Mock Service Worker, and Storybook 8. We plan to share more as we refine the best practices.

Improved React and Vue control autogeneration

One of Storybook’s signature features is auto-generated UI controls that let you modify component inputs interactively to explore new component states.

For React and Vue projects, Storybook 8 introduces major improvements to controls autogeneration, by upgrading the libraries we use to analyze your components (also known as “docgen”).

For React users, Storybook 8 switches to a significantly faster docgen library: react-docgen. Unlike our current TypeScript-based solution, react-docgen produces a shallower analysis that is way faster and good enough for virtually all components. In our tests, using react-docgen clocked up to 50% faster React Storybook startup times. The full TypeScript solution is still available as a fallback for anyone who needs it. Learn more in our React docgen documentation.

For Vue users, Storybook 8 brings support for an official Vue docgen package: vue-component-meta. This package is powered by Volar, which you may recognize as the official Vue VSCode plugin. Upgrading to vue-component-meta improves Storybook’s handling of types and our ability to autogenerate controls. Learn more about Storybook 8’s Vue changes in our Vue docgen announcement or our Vue docgen documentation.

Rearchitected Vite support, a Vitest-powered testing framework, and Vite 5 compatibility

One of Storybook 7’s biggest wins was the introduction of Storybook’s zero-config Vite support.

Since then, Vite usage has continued to skyrocket. Today, Vite accounts for nearly half of all new Storybook projects. Accordingly, we’ve continued to tighten and refine our Vite integration.

Firstly, Storybook 8 adds support for Vite 5, Vite’s latest and greatest. As we introduced Vite 5 support, we realized that Storybook was configuring too much on your behalf, which made it difficult for us to support different Vite versions. So, Storybook 8 gives you more control for configuring Vite plugins like plugin-react, plugin-vue, while moving those dependencies outside Storybook. Nearly all Vite projects come with these plugins pre-configured – so unless you’re doing something non-standard, it will require no changes on your part!

Storybook 8 also integrates Vite’s testing package, Vitest, as part of our new framework: @storybook/test. This new testing framework replaces two previous packages (@storybook/jest and @storybook/testing-library), enables the use of Vitest’s spy and expect, and has a smaller installation footprint. Learn more about Storybook 8’s testing improvements.

2–4x faster test builds

Storybook 8 introduces a new “test mode” that makes static builds of Storybook 2–4 times faster.

We observed that when you build Storybook for use with testing tool like Storybook’s Test Runner or Chromatic, you might not require Storybook features like documentation or auto-generated controls.

As such, Storybook 8 enables a streamlined test workflow by providing a new --test CLI flag that disables a variety of Storybook’s standard features. Using this flag gives you dramatically faster build times and smaller build outputs. We’ll continue to explore new optimization possibilities in every future release!

Updated mobile and desktop UI

Storybook 8’s UI brings a bunch of refinements and polish, and if you have an eye for design we think you’ll love these changes.

We overhauled Storybook’s mobile UI completely. Now, both the navigation sidebar and addon panel spring up from the bottom of the page, making them easy to trigger with your thumb on a phone. Unlike the previous version, these panels co-exist elegantly with the main “Canvas” area of Storybook.

We also rearchitected the desktop UI to fix a long-standing responsiveness bug, where stories remounted when the browser resized between desktop and mobile states. In Storybook 8, that transition is buttery smooth and absolutely delicious, sprinkled with a topping of updated typography and a new icon set.

No more React requirement in non-React projects

In Storybook 7, we made the hard decision to make React a peer dependency for all framework projects. While this change made Storybook compatible with pnpm and other modern package managers, it was a bitter pill to swallow for non-React users.

Thankfully, we’ve learned a lot since then about dependency wrangling and package prebundling (thanks tsup!) so that Storybook 8 now removes the React peer dependency for non-React Storybooks. Storybook’s UI is still written in React, but you can kiss those react and react-dom dependencies in your package.json goodbye!

Framework-specific improvements

Thanks to the last year’s worth of maintenance from an expanded core team, Storybook is faster, more compatible, and more stable than ever. Here are the highlights!

React: React gets experimental React Server Component support and react-docgen as a faster default for auto-generating interactive controls, both described above.

Vue: Vue gets Volar-powered auto-generated controls that support the latest Vue features and TypeScript types. It also gets dynamic source snippets in docs and numerous bugfixes from our new maintainers, Chakir and Lars.

Angular: Angular gets Angular 16/17 support, nested module metadata, standalone directives, easier-to-write stories, and dozens of bugfixes. We’re also working with the Angular core team to support new high-performance build options in a future version.

Web Components: Storybook’s Web Component stories are written in Lit and we’ve updated to support Lit3. Additionally we’ve fixed issues related to auto-generated controls and dynamically-generated source snippets.

Svelte: Storybook’s Svelte support has gotten a ton of love from the Storybook core team, the Svelte core team, and the community at large. Key improvements include Svelte 5 (prerelease) support, SvelteKit page and navigation mocking, and key fixes/improvements to Storybook’s “native” Svelte story format.

Get started

To make a fresh install of Storybook 8, run:

npx storybook@latest init

To upgrade an existing Storybook to Storybook 8, run:

npx storybook@latest upgrade

For help with upgrading, consult our Storybook 8 migration guides to learn how to upgrade from Storybook 7 to Storybook 8, or how to upgrade from Storybook 6 to Storybook 8. Alternatively, refer to our extended Storybook migration guide on GitHub.

Celebrate Storybook 8’s release

Between Storybook 7 and Storybook 8, Storybook won the GitHub 2023 Global Grandiose award for our worldwide community! In that same spirit, we’re running two meetups on March 28 where you can celebrate the Storybook 8 launch with your local frontend scene. ****Join us in Paris or join us in New York!

Additionally, thank you to all our community launch partners across the frontend ecosystem for helping us bring Storybook 8 to the world! Thanks to Chromatic, Figma, ViteConf, Omlet, DivRiots, story.to.design, StackBlitz, UXpin, Nx, Mock Service Worker, Anima, Zeplin, zeroheight, kickstartDS, and Kendo UI.

Credits

Core team

Michael Arestad, Yann Braga, João Cardoso, Michael Chan, Tom Coleman, Charles de Dreuille, Norbert de Langen, Shaun Evening, Kyle Gach, Gert Hengeveld, Dom Nguyen, Valentin Palkovic, Kasper Peulen, Chakir Qatab, Jeppe Reinhold, Lars Rickert, Kai Röder, Michael Shilman (me!), Joe Vaughan, Varun Vachhar, Ian Van Schooten, Daniel Williams, Josh Wooding, and Vanessa Yuen

Contributors

@0916dhkim, @1234tgk, @43081j, @aditya1, @adityakrmodak, @agriffis, @ai, @alitas, @almoghaimo, @amerlander, @andarist, @anneau, @artur93gev, @arunoda, @arup1221, @atreay, @auctumnus, @bashmish, @bdriguesdev, @benmccann, @bkfarnsworth, @bodograumann, @bryanjtc, @cdedreuille, @cgatian, @chakas3, @chocoscoding, @coliff, @cprecioso, @danez, @danielmarcano, @dannyhw, @dartess, @darth-koder007, @daves28, @decherneyge, @devanandb, @devazc, @diamondex, @domyen, @dotwoodmedia, @dprcoles, @drik98, @dschungelabenteuer, @dubbs, @edutoit, @efrenaragon96, @epreston, @felixrizzolli, @fezvrasta, @filiptammergard, @flambe, @francois2metz, @g-cappai, @githrdw, @gitstart, @gossi, @greut, @gufah, @halitiince, @hcvdhaar, @henkerik, @hobbes7878, @hoishin, @honzahruby, @iabu94, @ianvs, @idesigncode, @iqbalcodes6602, @irangarcia, @ivoilic, @j3rem1e, @jackw, @jared-christensen, @joaonunomota, @joekarow, @joevaugh4n, @joeycozza, @johnhunter, @jonniebigodes, @jonthenerd, @joriswitteman, @joshbolduc, @jpzwarte, @jreinhold, @json-betsec, @julien-deramond, @junghoe, @kaelig, @karolstawowski, @kasperpeulen, @kawokas, @kbazilio, @kkirby, @klescouar, @kolife01, @kota-kamikawa, @kripod, @kshmidt-digma, @ksugawara61, @kubijo, @kuriacka, @kylegach, @kylemeenehan, @kyletsang, @larsrickert, @legnaleurc, @leniwen, @literalpie, @lucavazz, @luk-z, @machycek, @maheshchandra10, @manbearwiz, @mandarini, @mariasimo, @mariocadenas, @marklb, @martinnabhan, @masaya48, @mastrzyz, @mattlewis92, @mauriciorobayo, @mdornseif, @medihack, @mh-ahs, @michens, @mickmcgrath13, @miily8310s, @mlazari, @mrzillagold, @mvarendorff, @naporin0624, @nasvillanueva, @natehouk, @ndelangen, @nikospapcom, @nilsjacobsen, @nkabrown, @nlepage, @notwoods, @noviceguru, @nsheaps, @nvitius, @omahs, @orangecms, @oruman, @osnoser1, @paoloricciuti, @pascalfiv, @piratetaco, @pruthvip15, @pure-js, @rashidshamloo, @re-taro, @redbugz, @reyronald, @roel-t, @rohanpoojary1107, @roottool, @rwaight, @samvv, @seriouz, @shaunevening, @sheriffmoose, @shilman, @showrin, @sidnioulz, @sitogi, @sjwilczynski, @smeagol74, @sookmax, @specialdoom, @speelbarrow, @spookyjelly, @stegano, @stilt0n, @stof, @stropitek, @subhajit20, @syabro, @t99, @taehyeon-envoi, @taozhou-glean, @tap-kim, @thapasusheel, @thisisanto, @thtliife, @tmeasday, @tolkadot, @tomo5524, @tsvanharen, @turtle601, @tusharwebd, @ubugnu, @unional, @usrrname, @valentinpalkovic, @vanessayuenn, @vmizg, @webblocksapp, @wesgro, @wilson2k, @wise-introvert, @wjdtjdgns, @wouterk12, @wuzhuobin, @xueyawei, @xyy94813, @yannbf, @ygkn, @yilun-sun, @yoshi2no, @yossisaadi, @youngboy, @zachtball, and @zmarkan

Storybook’s Visual Tests addon enters beta

Storybook — Thu, 15 Feb 2024 15:48:59 +0000

Storybook 8 introduces a totally new workflow for safeguarding your UI from unexpected visual changes, via the Visual Tests addon. Learn how it works and try the beta today.

What is visual testing?

The challenge of UI testing is that functional tests don’t give you the complete picture of how your UI works. For example, testing a login button might confirm the button’s logic but it won’t detect that the button is now completely covered by the nav bar. It’s functional for your test, but not for your users.

You can solve this problem by using visual testing tools. When you introduce a code change, they visually diff image snapshots of your components to previous baseline versions. Then, you can either fix issues before merging to the main branch, or accept the changes and set new baselines for future tests. When combined with functional tests, this gives the best of both worlds: complete confidence that your app looks and works correctly.

Historically, visual testing takes place in CI as part of your PR review process. It’s so effective that we even built a cloud service called Chromatic that is used across the industry to automatically turn stories into visual tests.

The Visual Tests addon for Storybook brings a totally new approach, where you can now get visual diffs in Storybook at any stage of development. No need to wait on CI to confirm visual fidelity.

Get started

Install

You’ll need to be using the Storybook 8 beta to use the Visual Tests addon. If you initialize a new project in Storybook 8 using npx storybook@next init, the addon will be installed automatically. If you upgrade an existing project using npx storybook@next upgrade, you’ll need to manually add the addon using npx storybook@next add @chromatic-com/storybook.

Learn more about setup in the docs

Workflow

Once setup is complete, when you next load Storybook, you’ll see a new addon panel for Visual Tests. You can run your first test by clicking the ▶️ button in the Storybook sidebar:

Then, after running tests, you can view and inspect diffs in the Storybook addon panel:

If the changes are intentional, accept them to set new baselines. If not, fix the detected changes, then restart the process.

High fidelity, high performance

Chromatic is by far the fastest visual testing tool on the market, capable of processing thousands of stories per minute. But what’s fast in CI can feel slow in an interactive UI. So, as part of this addon’s development, we sped up the workflow by 78%. Faster tests make you more productive.

This aligns with the theme of Storybook 8's improvements: performance. Among many other gains, you can now create 3x faster builds for testing workflows, and we quickened startup time in React projects by 20-40%.

Finally, we created a beautiful addon UX. You can view the test status of your stories in the Storybook sidebar, which highlights stories needing your attention in yellow. You can also filter the sidebar to only show stories containing changes.

Share your feedback

The Visual Tests addon is in public beta and is being actively used by projects of all shapes and sizes. We’d love your feedback to help get it ready for a first stable release as part of Storybook 8.0 and Chromatic 3.0.

Share any issues you encounter using Visual Tests addon with the Storybook and Chromatic team.

Storybook 8 Beta

Storybook — Tue, 06 Feb 2024 13:02:50 +0000

Today, we’re proud to launch Storybook 8 in beta! This latest iteration of Storybook continues our march towards an instant-on, seamless environment for all frontend developers. Check out the release highlights and try it out by upgrading today!

🚀 Major performance improvements
📱 New mobile UI
📸 Automated visual tests
🔬 Improved test utilities
⚛️ Storybook for React Server Components
👋 Adios, React dependency
🧩 Ecosystem updates
💯 Hundreds of fixes

Major performance improvements

Storybook 8’s priority is improving Storybook’s compatibility and performance.

First, we switched the default compiler for new projects from Babel to SWC (Speedy Web Compiler). SWC is dramatically faster than Babel and requires zero configuration. We’ll continue to support Babel in any project currently using it.

For React projects, we now auto-generate controls using react-docgen. This reduces startup time by up to 20%, even for small projects!

We also added a new --test flag for faster test builds, so that you can bypass processes that are unnecessary for testing (like docs compilation). This triples the speed of static builds. Learn more.

Improved mobile support

Storybook 8 revamps Storybook’s mobile UI.

On mobile devices, Storybook’s sidebar and addon panel now appear at the bottom of the screen. This prevents the canvas from shrinking and makes it easier to navigate with your thumb.

We also fixed a long-standing, super-annoying responsiveness bug, where UI state was lost when transitioning between desktop and mobile view.

Lastly, we just released a new version of React Native Storybook: RN Storybook 7. It brings major performance and compatibility improvements, including automatic story loading, improved error handling, stronger types, and much more.

Automatic visual tests

Storybook gives you the superpower of using stories as test cases. You can compare stories before and after code changes and flag differences for review without needing to push a commit.

To improve that process, we launched Chromatic in 2017, a cloud service that lets you automate visual tests by comparing snapshots of your stories before and after every change.

Storybook 8 closes the gap between Chromatic and Storybook with an official visual testing addon for Storybook (@chromatic-com/storybook). This enables you to run visual tests of your stories on the fly without needing to commit your changes. Then, you can inspect the results in Storybook, inside your dev environment.

As part of today’s launch, @chromatic-com/storybook is now available in public beta. Try it today by heading to Chromatic’s docs.

Improved test utilities

Storybook 8 streamlines two existing test packages (@storybook/jest and @storybook/testing-library) into a single, more powerful testing library: @storybook/test. It’s based on Vitest spies and expect, which have a much smaller installation footprint in your project. Learn more.

React Server Components

Many devs have asked us, ‘When will Storybook support RSCs?’ Storybook 8 provides the answers. Our latest iteration officially introduces experimental RSC support, initially limited to Next.js projects.

Why experimental? We’re still figuring out the best practices for building RSC components and pages. We also need to prove that our approach works well with other RSC frameworks like Waku.

Learn more about RSC support in Storybook 8 and how to use Storybook 8 to build an RSC app in isolation.

Adios, React dependency!

In Storybook 7, we added a React peer dependency to make Storybook work with modern package managers like pnpm and Yarn PnP. We prioritized package manager compatibility, but frankly, this sucked for Vue, Angular, Web-components, and Svelte users. It clashed with one of our primary goals of making users of all frameworks feel at home in Storybook.

Storybook 8 removes the React dependency through smarter bundling. It provides the basis for a series of quality of life improvements for non-React users, which you can look forward to in Storybook 8 and beyond.

Hello, ecosystem!

Every major release is an opportunity for Storybook to keep up with the ecosystem.

Storybook 8 includes the following dependency changes:

Bumps Node requirement to 18+
Adds Vite 5 and Lit 3 support
Upgrades MDX, prettier, eslint, and remark
Drops support for Vue 2, Svelte 3, Angular 14, and Next <13.5
Drops official Yarn 1 support (it still works, just unsupported)

In addition, we dropped support for Storyshots and provided an upgrade guide to transition to other options. We also dropped support for the legacy storiesOf story API.

Try Storybook 8 today

Upgrade to Storybook 8 beta today with the following command:

npx storybook@next upgrade

We’re still working on automating certain aspects of the upgrade. But in the meantime, we’ve provided a migration guide to help fill in the gaps.

Get involved

Ahead of the full launch, we’d love your help with battle-testing and QAing Storybook 8, to help us ship the best release possible.

If you’re interested in taking part in our open source project, we’d love your help with tackling some of the following issues on GitHub.

We’ll also be sharing more about how you can take part in community QA in the weeks ahead, so please keep an eye on our social media feeds on Twitter and LinkedIn.

How to make Storybook 2-4x faster

Storybook — Thu, 21 Dec 2023 14:51:25 +0000

Storybook 7.6 contains massive performance improvements. Most will become the default in our next major release (Storybook 8.0), but you can adopt them today by opting in manually. Here’s how to get started!

⛳️ --test flag for 2-4x faster test builds
🩺 2.2x faster React docgen
🧳 Streamline essential addons
🌐 SWC for 50% faster Webpack projects
🔬 @storybook/test for more streamlined and performant testing

2-4x faster builds with the --test flag

If you’re building Storybook just for testing purposes, you can improve build speeds considerably by skipping processes like docgen analysis and docs compilation.

To help you do this, we’ve introduced a new --test flag for Storybook build. It lets you create a stripped-down build that completes 2-4x faster than normal. This can be used with the Storybook Test Runner or Chromatic and will be the default for Chromatic Visual Test Addon.

Try your first test build by running:

npx storybook build --test

FAQ: Can I combine the --test and --coverage flags?

The --test flag is designed to be as fast as possible, so it removes addons that are known to slow down build times and are unnecessary for functional tests.

One such addon is @storybook/addon-coverage, which is used in conjunction with the Storybook Test Runner to collect coverage information for your stories.

If you’re using addon-coverage and running Storybook Test Runner against your built Storybook, the --test flag will strip out the coverage information. To configure the --test build to keep coverage information (at the expense of a slightly slower build), update .storbyook/main.js:

// main.ts|js

export default {
  // ...
  build: {
    test: {
      disabledAddons: [
        '@storybook/addon-docs',
        '@storybook/addon-essentials/docs',
      ],
    },
  },
}

2.2x faster React docgen

Generating documentation via TypeScript is extraordinary. It shows how to use your component without you needing to write any docs manually:

Storybook 7 analyzes React components using a tool called react-docgen-typescript. It accurately parses out all your props based on outputs from the TypeScript compiler.

However, there’s a catch: TypeScript is slow. Many modern tools like esbuild and Speedy Web Compiler (SWC) are fast precisely because they removed their TS dependency. In our tests, disabling TS-based docgen alone improved Storybook build speeds by 25% to 50%!

In Storybook 8, we will default to react-docgen instead. It’s based on simple AST processing and doesn’t use any TS, so it’s significantly faster. There are certain patterns that it doesn’t handle as well, but the speed is worth it in most cases.

Try this now in your Storybook 7.6 React project by using the following config:

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  typescript: {
    reactDocgen: 'react-docgen', // or false if you don't need docgen at all
  },
};

export default config;

Streamline addon-essentials

Storybook’s addon-docs package lets you autogenerate docs or write them manually using MDX. These doc pages can include many components that all need bundling, which increases the bundle size and Storybook’s build times.

If you’re not using addon-docs, you can remove it from addon-essentials by using the configuration below. In our tests, this change alone improved Storybook’s build time by 25%.


import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  stories: [
    // make sure you don't have MDX entries
  ],
  addons: [
    // Before
      '@storybook/addon-essentials',
        // After
        {
        name: '@storybook/addon-essentials',
          options: { docs: false },
        },
    ],
};

export default config;

Using Webpack? Enable SWC

In Storybook 7.6, you can cut the start times of Webpack projects by 50% or more by switching from Babel to SWC.

Storybook 7.6 sets SWC as default for all new Storybook Webpack projects (aside from Angular). It also fixes SWC support for Preact and React fast-refresh.

If using a Webpack-based framework, update your builder configuration in .storybook/main.ts:

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  framework: {
    name: '@storybook/your-framework', // react-webpack5|next|vue-webpack5|etc
    options: { builder: { useSWC: true } }
  }
};

Note: the --test flag won’t enable SWC by default. That’s because extra changes might be needed if you’re using Babel plugins (such as the Emotion plugin).

Two test packages for the price of one

Storybook 7.6 replaces the @storybook/jest and @storybook/testing-library packages with @storybook/test. It’s streamlined, smaller than before, and now based on Vitest rather than Jest. It pre-bundles all dependencies, which increases performance by giving the bundler less to do. In our example Mealdrop project, @storybook-test quickened build times by 10%.

To get started, install the addon with your package manager:

# Install the addon with your package manager

npm install -D @storybook/test@next
pnpm add -D @storybook/test@next
yarn add -D @storybook/test@next

Then, update your stories:

- import { expect } from '@storybook/jest';
- import { within, userEvent } from '@storybook/testing-library';
+ import { within, userEvent, expect } from '@storybook/test';

In other news...

The road to Storybook 8.0 has begun

The first version of our next major release, Storybook 8.0, is now available for you to try in alpha. Upgrade by running npx storybook@next upgrade --prerelease. In the months ahead, we’ll be sharing all the goodness coming in 8.0. Check out the release plan.

Storybook for React Server Components

In the first of our Storybook 8.0 posts, we answered one of our community’s most frequent requests: Storybook support for React Server Components. This experimental solution enables you to test RSCs inside Storybook, by rendering your server components in the client, and using mocks to simulate Node.

Chromatic Visual Test Addon reaches private beta

Over 1,000 devs are already signed up for early access to Chromatic Visual Test Addon, which brings 1-click visual tests to your Storybook. Learn more about the private beta and get it now!

Happy holidays! 🎊

Finally, we’d like to wish everyone a very happy holidays. 2023 has been a huge year for Storybook, and 2024 is set to be even stronger. We’ll be sharing a post next week about what’s coming up for Storybook in 2024, so be sure to watch this space.

Thank you for being a part of Storybook’s community this year. We couldn’t do this without you!

Storybook for React Server Components

Storybook — Wed, 13 Dec 2023 14:05:27 +0000

React Server Components (RSC) are a new programming model for React-based web UIs. In contrast to traditional React “client” components, they only render on the server. This leads to a variety of performance and security benefits, but it is also a huge departure from the React tools and libraries we use today.

One of the most impacted areas is component-driven development and testing. Tools like Storybook, Testing Library, and Playwright/Cypress Component Testing all assume that the user’s components are being rendered in the browser (or JSDom). But with server components, that’s no longer the case.

This creates the question: what does it mean to do isolated component development and testing for the server?

Today, I’m excited to release RSC support in Storybook’s Next.js framework as an experimental answer to this question. It is a purely client-side implementation, making it compatible with the entire ecosystem of Storybook addons and integrations.

Read on to learn how it works, how to use it, and how you can try it today!

Servers are from Mars, clients are from Venus

RSCs have two major differences from traditional client components, both of which are present in the following example:

// ApiCard.tsx

import { ComponentProps } from 'react';
import { Card } from './Card';
import { findById } from './db';

export async function DbCard({ id }: {id: number}) {
  let props;
  try {
    const contact = await findById(id);
    props = { state: 'success', contact };
  } catch (e) {
    props = { state: 'error' };
  }
  return <Card {...props} />;
}

The first difference is that our component is async, which is not supported on the client.

The second difference is that our component can access Node code directly, in this case the findById function that wraps an authenticated database connection.

RSC does a lot under the hood to implement these two differences. This code only ever runs on the server, and it generates a static JSON-like structure which is streamed down to the client.

Storybook is a pure client application. It produces a static build of pure HTML/CSS/JS with no Node in sight! So, supporting RSC would require figuring out either how to get RSCs to render on the client OR rearchitecting Storybook for servers.

We started by focusing on the client approach. We want to minimize impact to our users, who have written millions of stories and hundreds of addons, all based on the current architecture.

So, how the heck does it work?

Getting async with it

The first challenge to getting RSCs to render on the client is configuring how to support async components. It turns out that this is already supported (unofficially) in Next.js’s canary React version. Special thanks to JamesManningR and julRuss, who contributed this simple solution!

import { Suspense } from 'react';

export const ClientContact = ({ id }) => (
  <Suspense><DbCard id={id} /></Suspense>
);

Starting in Storybook 8, @storybook/nextjs can wrap your stories in Suspense using the experimentalNextRSC feature flag in .storybook/main.js:

// .storybook/main.js
export default {
  features: {
    experimentalNextRSC: true,
  }
};

You can also do this manually in 7.x versions of @storybook/nextjs by wrapping your RSC stories in a decorator.

Note: This solution doesn’t yet work in other Storybook React frameworks (e.g. react-vite, react-webpack5) because they do not use Next.js’s canary version of React. Hopefully, this limitation is removed by the next version of React.

Mocked and loaded

Solving the async problem only gets us halfway there. Our DbCard component also references node code which fetches the data to populate the component. This is a problem in the browser, which cannot execute Node code!

To work around this problem, we recommend establishing a clean data access layer. This is also recommended as a best practice by the architect of RSC.

Once you have the data access later, you can mock it out so that it can run in the browser and so that you can precisely control the data that it returns to exercise different UI states (loading, error, success, etc.).

You can mock the data access later using module mocks or network mocks, both of which are supported in Storybook.

Modules: There is a community addon, storybook-addon-module-mock, that provides jest.mock-style mocking (for Webpack projects only). You can also use webpack/vite aliases for a simpler but more limited solution. We plan to provide ergonomic module mocking in a future version of Storybook.

Network APIs: To mock network requests, we recommend Mock Service Worker (msw). Storybook also supports numerous other network and GraphQL mocking addons.

Bringing this back to our example, here’s what a story might look like using storybook-addon-module-mock:


// DbCard.stories.js

import { StoryObj, Meta } from '@storybook/react';
import { createMock } from 'storybook-addon-module-mock';

import { DbCard } from './DbCard';
import * as db from './db';

export default { component: DbCard };

export const Success {
  args: { id: 1 },
  parameters: {
    moduleMock: {
      mock: () => {
        const mock = createMock(db, 'findById');
        mock.mockReturnValue(Promise.resolve({
          name: 'Beyonce',
          img: 'https://blackhistorywall.files.wordpress.com/2010/02/picture-device-independent-bitmap-119.jpg',
          tel: '+123 456 789',
          email: 'b@beyonce.com'
        }))
        return [mock];
      },
    },
  },
}

Full demo: API + module mocking

For the entire example above including both the module mocked database version and the MSW2-mocked API version, please check our full RSC demo Storybook or its GitHub repo.

What’s the catch?

In this post, we’ve successfully written a story for our first RSC in Storybook and shown how this is all implemented under the hood.

This was all pretty straightforward, but the approach has limitations:

Fidelity: The pure client implementation differs dramatically from the server-side, streaming RSC implementation that is running in your application.

Convenience: The mocking solutions here can definitely be improved. Not only is our current module mocking solution verbose, but it doesn’t play nicely with Storybook args/controls.

We plan to work on both of these limitations in subsequent iterations, which is why we’ve labeled this solution as experimental.

Use it today with the Storybook 8.0 alpha

To use Storybook for RSC, upgrade your Storybook to 8.0-alpha today:

npx storybook@next upgrade --prerelease

Then, enable the experimental feature in your

.storybook/main.ts:// .storybook/main.js
export default {
  features: {
    experimentalNextRSC: true,
  },
};

For more information, see the @storybook/nextjs README.

This is the first of our posts detailing the contents of Storybook 8.0, our next major version, and we’ll have lots more to come in the months ahead. Keep up with all the news on the next release by following us on social media or signing up for the Storybook newsletter!

Introducing Storybook 7.5

Storybook — Thu, 19 Oct 2023 14:24:39 +0000

Storybook is the gold standard UI workshop environment. It’s used across the industry by teams at Monday.com, The Guardian, Intuit, and many more for developing, documenting, and testing UIs.

Today, we're thrilled to introduce Storybook's latest version: Storybook 7.5! It brings a range of new features that enhance the Storybook experience.

Let's dive in!

⚡️ Vite 5 and Lit 3.0 support
💨 2.2x faster start times for React TypeScript projects
👻 storiesOf and storyStoreV6 officially deprecated
✨ Many Angular improvements: argsToTemplate, new CLI debugging options, support for standalone directives, etc.
🀄 Support rename font import for Next.js
🔨 Fix Webpack5 build errors not being propagated

Vite 5 support

One of the major highlights of Storybook 7.0 was the official introduction of zero-config support for Vite. Vite has quickly grown into one of the ecosystem's favorite builders due to its highly competitive speeds.

In Storybook 7.5, we're laying the groundwork for integration with Vite's next version: Vite 5.0! Storybook 7.5 includes Vite 5 as a peer dependency and dynamically imports all Vite functions to force the use of ES modules (as Vite 5 deprecates CJS methods).

2.2x faster startup times for React TypeScript projects

Storybook 7.5 upgrades react-docgen to version 6. This change is a precursor to making react-docgen the default for auto-generating controls in Storybook 8.

The upgrade dramatically improves Storybook's handling of TypeScript types and heavily decreases startup times for larger React Storybooks. For example: react-docgen 6 reduced startup times for the Mealdrop project (which we use for many of our tests) from 8.9s to 4.0s!

`storiesOf` and `storyStoreV6` officially deprecated

storiesOf was our original API for creating Storybook stories. In 2019 (Storybook 5.2), it was replaced by Component Story Format (CSF) – a simpler, portable, and more performant successor.

Since introducing CSF, new versions of Storybook have continued supporting storiesOf . This gave CSF time to mature and provided Storybook users with time to make the migration.

It’s now four years later. CSF is on its third iteration and it’s used by virtually all Storybook projects. So, we’re taking this as a moment to officially deprecate our support for storiesOf and storyStoreV6.

If you're still using storiesOf, you can get started with the migration by using these two scripts:

# 1. Convert storiesOf to CSF
npx storybook@latest migrate storiesof-to-csf --glob="**/*.stories.tsx" --parser=tsx

# 2. Convert CSF 2 to CSF 3
npx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx

Learn more about the deprecation and how to continue dynamically generating stories in CSF.

Improved Next.js support

We've made several improvements to how Storybook works with Next.js.

Firstly, Next.js users are are now able to alias import statements from next/font/ into Storybook.

// Place this import in any relevant file – even in your stories

import { Inter as FontSans } from 'next/font/google'

export const fontSans = FontSans({
  subsets: ['latin'],
  variable: '--font-sans'
})

We've also fixed an issue where next/font wasn't working properly on Windows machines.

Finally, we've set up monitoring for Next.js canary releases. This automatically checks whether Storybook runs with the latest Next.js canary, and means we can spot bugs and make fixes more quickly!

Angular improvements with `argsToTemplate`

Storybook 7.5 introduces the argsToTemplate feature for Angular, designed to simplify the generation of Angular component templates. This function streamlines the handling of property and event bindings in Storybook stories.

A significant benefit of argsToTemplate is that it addresses the challenge of how Angular treats undefined values in property bindings, which often led to misunderstandings. With this utility, there’s now enhanced support for Storybook controls, ensuring they align better with Angular’s standard behaviors.

Try argsToTemplate

In your story, integrate argsToTemplate within the template string, as seen below:

import { argsToTemplate } from '@storybook/angular';

export const Default: Story = {
  render: (args) => ({
    props: args,
    template: `<app-template ${argsToTemplate(args)}></app-template>`,
  }),
};

Your arguments will correctly be mapped to property and event bindings!

Additional Angular highlights

Added further builder options to the Angular Storybook builders: debugWebpack, webpackStatsJson and previewUrl (#24388)
Standalone directives can now be used in Storybook (#24448)
Added zone.js v0.14.x support (#24367)

Fix Webpack 5 build errors not being propagated

In Storybook 7, Webpack compilation errors wouldn't propagate to the terminal while Storybook was in dev mode. This was the case in Storybook 6.5. It stopped working because of changes made to the webpack-dev-middleware library.

Storybook 7.5 fixes that bug and that behavior has now returned. This means that you might now see more warnings that weren’t previously there. Fixing them may help make your Storybook more performant!

If you’d like to customize the level of logs that Storybook provides, you can configure the logLevel option in your storybook/main.ts file.

Lit 3.0 support

Finally, Storybook 7.5 also brings support for Lit 3.0!

Lit is one of the leading libraries for developing web components. The new Lit 3.0 is the Lit team's first major release since early 2021.

To carry on using Storybook as normal in your Lit 3 project, upgrade to Storybook 7.5 today!

Upgrade to Storybook 7.5

To upgrade your Storybook to 7.5, run:

# Upgrade your Storybook to 7.5
npx storybook@latest upgrade

For guidance on upgrading from a version of Storybook that's earlier than Storybook 7, check out the Storybook 7 migration guide.

Alternatively, for a fresh install, bootstrap Storybook into an existing app with:

# Install a fresh Storybook
npx storybook@latest init

Credits

Huge thanks to everyone who contributed to Storybook 7.5! That includes:

@almoghaimo, @anneau, @arup1221, @atreay, @bkfarnsworth, @bryanjtc, @cdedreuille, @chocoscoding, @decherneyge, @greut, @ianvs, @integrayshaun, @irangarcia, @j3rem1e, @johnhunter, @jonniebigodes, @jonthenerd, @jreinhold, @json-betsec, @julien-deramond, @kasperpeulen, @kbazilio, @kylegach, @legnaleurc, @martinnabhan, @masaya48, @mastrzyz, @mrzillagold, @natehouk, @ndelangen, @nsheaps, @omahs, @oruman, @osnoser1, @pure-js, @rohanpoojary1107, @roottool, @seriouz, @shilman, @sidnioulz, @stropitek, @tmeasday, @valentinpalkovic, @vanessayuenn, @wesgro, @yannbf, @yoshi2no, @yossisaadi

Get involved

There are many ways to get involved with the Storybook community!

If you are interested in contributing to Storybook, check out Storybook on GitHub – create an issue, or submit a pull request.
Chat with us in Discord, share your skills, and help other users learn Storybook
Stay up to date with Storybook news on Twitter, on LinkedIn, or via our mailing list

Automatic visual tests in Storybook, plus 2.2x faster build times for React+TS

Storybook — Wed, 06 Sep 2023 11:48:21 +0000

Welcome to the latest edition of What’s New in Storybook, our monthly roundup of changes across the Storybook ecosystem.

Below, learn about several of last month's biggest news items from Storybook land. Featuring:

🚀 Visual Test addon: Now in private alpha
🏎️ react-docgen v6 support: Build React+TS projects up to 2.2x faster
🔎 Improved bug handling: New categorization for crash reports
📚 Updated tutorials: How to run visual tests, Storybook in design systems, and interaction testing

Visual Tests addon – now in private alpha 🥳

We kicked off August with the announcement of Storybook’s next big thing: the Visual Tests addon.

The Visual Tests addon lets you use Storybook to run automatic tests of your stories. These tests can cover any combination of browsers, viewports, and themes. Plus, they all run at the same time, powered by Chromatic’s cloud-based infrastructure.

The addon has now entered private alpha, and we're rolling out invites to the people on our early access list. To join early access, sign up now →

`react-docgen v6` support

We're excited to share the first canary release of react-docgen v6 support in Storybook. This dramatically speeds up startup time for React+TS projects. On the medium-sized Mealdrop project, it made startup time 2.2x faster, reducing it from 8.9s to 4.0s (~55%).

Our hope is to make react-docgen v6 the default in Storybook 8.0. The 7.0 solution, react-docgen-typescript, runs the TypeScript compiler on your entire project source, which is slow. react-docgen is much faster, but until recently it has been too limited for real-world projects.

We’d love your help testing out the new version in your project. Learn how by following the instructions on the open PR that includes the canary →

Improved error categorization for crash reports

With different frameworks, renderers, addons, and other tech, every project containing Storybook is virtually unique. That can make it hard for us to spot where and how Storybook isn't working.

One key source of insights that we use when triaging issues is our users’ crash reports. Crash reports are opt-in and completely anonymous, but they significantly widen our coverage of Storybook use cases.

So that we can do more with the info we get from crash reports, we’re adding a new framework to categorize error codes. This will help us identify bugs and fix them more quickly.

We’re always grateful for your support and every single contribution that our users make. To help us maintain Storybook, consider opting in to sending crash reports or report bugs to us via GitHub Issues. Thank you!

New learning materials

To help you take your work with Storybook further and improve your skills, we published several new learning resources.

Find out how you can use Storybook to maintain your design system ↓

Learn to use Storybook to test your components' event handling and interactions ↓

Read our updated guide to visually testing UI in 2023 (via Chromatic) ↓

How to run visual tests in 2023

Chromatic ・ Aug 25 '23

#webdev #testing #frontend #storybook

Community jobs

We have 87 open roles for Storybook devs on our community jobs board! Currently, these include opportunities at organizations like JP Morgan, The Times, BT, eBay, and many more.

View all and apply now →

That's all for this month! Thanks for joining us and catching up on all the latest from SB.

What would you like to see in future updates? Let us know! 🤝

Storybook's Visual Tests addon entering private alpha

Storybook — Fri, 01 Sep 2023 12:37:31 +0000

Earlier this month, I shared the first look at Storybook’s upcoming Visual Tests addon. In one click, it will let you automatically test your stories for visual changes across all browsers and viewports.

Today, I’m excited to share the private alpha and highlight the progress we’ve made so far. The project is now being worked on by six core developers with the goal to launch by the end of the year.

Read on to preview the addon’s UI and find out more about signing up for early access.

Addon developer experience

You’ll be able to access all the functions of the Visual Test addon through a new UI panel in Storybook. Here, you’ll be able to set up your tests, run them, and view results that highlight changes down to the pixel.

Let’s break down how this works, step by step.

Story status API to indicate changes

We’re introducing a new experimental API to Storybook that shows the test status of each story in Storybook’s sidebar.
Inspired by VSCode, it lets you see which stories have visual changes and need review without you having to open each story.

Run visual tests on-demand

Press this button to run visual tests on-demand for all your stories. Behind the scenes, the button will kick off a static build and upload it to the cloud for testing.

Each story can be tested in different combinations of browsers, themes, viewports, a11y preferences, and other global settings.

Accept results and set new baselines

Visual tests take screenshots of your stories and compare them to previous versions to catch any visual changes. In the addon, the latest screenshot of the story will be shown beside the live story. If there are visual differences, they’ll get highlighted in neon green so you can see them at a glance.

After you’ve run tests, accept a story’s snapshot as a new baseline. When you test in the future, the story will be compared to that baseline.

How to get the private alpha

The Visual Test addon is currently in private alpha, which means that it’s rolling out to a limited number of users. If you’re interested:

👉 Sign up for early access

If you’ve already signed up for early access, we’ll be emailing you over the next few weeks. Priority is given to developers with ongoing development on small-medium sized projects.

We hope you’re as excited as we are about the Visual Test addon. We’ll continue shipping regular updates in anticipation for our public alpha.

https://twitter.com/storybookjs/status/1697190521490256277

What’s so great about visual testing?

Visual tests are a pragmatic way to ensure that UI stays pixel-perfect by combatting UI regressions. Visual tests complement other types of tests, such as unit tests, interaction tests, and accessibility tests, to provide a comprehensive coverage for UI. Learn more.

Does this replace Chromatic?

Nope. This addon is powered by Chromatic. It gives you the ability to run tests in parallel using dedicated browser infrastructure, all from the convenience of Storybook.

Forem: Storybook

Storybook 8

Built-in visual testing

React Server Component (RSC) support

Improved React and Vue control autogeneration

Rearchitected Vite support, a Vitest-powered testing framework, and Vite 5 compatibility

2–4x faster test builds

Updated mobile and desktop UI

No more React requirement in non-React projects

Framework-specific improvements

Get started

Celebrate Storybook 8’s release

Credits

Core team

Contributors

Storybook’s Visual Tests addon enters beta

What is visual testing?

Get started

Install

Workflow

High fidelity, high performance

Share your feedback

Storybook 8 Beta

Major performance improvements

Improved mobile support

Automatic visual tests

Improved test utilities

React Server Components

Adios, React dependency!

Hello, ecosystem!

Try Storybook 8 today

Get involved

How to make Storybook 2-4x faster

2-4x faster builds with the --test flag

FAQ: Can I combine the --test and --coverage flags?

2.2x faster React docgen

Streamline addon-essentials

Using Webpack? Enable SWC

Two test packages for the price of one

In other news...

The road to Storybook 8.0 has begun

Storybook for React Server Components

Chromatic Visual Test Addon reaches private beta

Happy holidays! 🎊

Storybook for React Server Components

Servers are from Mars, clients are from Venus

Getting async with it

Mocked and loaded

Full demo: API + module mocking

What’s the catch?

Use it today with the Storybook 8.0 alpha

Introducing Storybook 7.5

Vite 5 support

2.2x faster startup times for React TypeScript projects

storiesOf and storyStoreV6 officially deprecated

Improved Next.js support

Angular improvements with argsToTemplate

Try argsToTemplate

Additional Angular highlights

Fix Webpack 5 build errors not being propagated

Lit 3.0 support

Upgrade to Storybook 7.5

Credits

Get involved

Automatic visual tests in Storybook, plus 2.2x faster build times for React+TS

Visual Tests addon – now in private alpha 🥳

react-docgen v6 support

Improved error categorization for crash reports

New learning materials

How to run visual tests in 2023

Chromatic ・ Aug 25 '23

Community jobs

Storybook's Visual Tests addon entering private alpha

Addon developer experience

Story status API to indicate changes

Run visual tests on-demand

Accept results and set new baselines

How to get the private alpha

What’s so great about visual testing?

Does this replace Chromatic?

`storiesOf` and `storyStoreV6` officially deprecated

Angular improvements with `argsToTemplate`

`react-docgen v6` support