October was filled with fun conferences. We announced tighter Vite integration for Storybook at ViteConf. We also got to meet a bunch of you in person at React advanced in London. But we're back just in time to share our usual roundup of articles, videos, addons, and tools.
Welcome to showcase #4!
Road to Storybook 7 — CSF 3
Storybook 7.0 is coming, and with it, Component Story Format (CSF) 3 will become the default. CSF3 is the latest version of our open format for declaratively writing stories using ES modules. It drastically cuts down the boilerplate and improves ergonomics.
Chantastic has put together a 7-minute crash course on the latest standard.
Watch now »
First-class Vite support in Storybook
Storybook 7.0 also brings tighter Vite integration: zero config setup, no Webpack required, and a smaller install size.
Code coverage with Storybook test runner
Storybook test runner enables you to test component logic with play functions. You can simulate user clicks and keypresses and run assertions.
NextAuth.js Mock addon: NextAuth.js is an authentication library for Next.js apps. Components can access session state using its
useSession hook. Tom Freudenberg addon enables you to control this session state within stories.
Tools to speed up your Storybook workflow
Resources to help you get started
- Material UI in Storybook: demonstrates how to configure Storybook to load Material UI components and dynamically interact with their API.
- I18n with Storybook: shows you how to test UI localization with Storybook and add a locale switcher to the toolbar
Design-driven full-stack Development: In this talk, David Price (Co-Creator of RedwoodJS) shows you how to use Storybook to create components and then wire them up in a full-stack application using Redwood Directives and Auth.
Adding multi theme support to Storybook by Yann Braga is a detailed guide to testing multiple themes using Storybook and Chromatic. It covers everything from loading themes via a decorator to rendering various themes simultaneously and running visual tests.
Django is a popular Python-based web framework. At DjangoCon EU, Thibaud Colas talked about Component-driven development with Django. In it, they share their workflow for writing stories for Django templates.
Developing design systems for the British Medical Journal is a case study by Paula Cristeam and Sean van Oossanen. They talk about their approach, choice of tools and challenges.
Use the same React components on the Web and in Native apps? Daniel Williams has created a demo repository showcasing how to make universal apps using Next.js + react-native (expo). And, of course, use Storybook to build those components in isolation.
Want to show up here? Mention @storybookjs with your articles, videos, and addons.