shilman

Storybook Docs w/ CRA & TypeScript

This is a quick-and-dirty walkthrough to set up a fresh project with Storybook Docs, Create React App, and TypeScript. If you're looking for a tutorial, please see Design Systems for Developers, which goes into much more depth but does not use Typescript.

The purpose of this walkthrough is a streamlined Typescript / Docs setup that works out of the box, since there are countless permutations and variables which can influence docs features, such as source code display, docgen, and props tables.

Step 1: Initialize CRA w/ TS

npx create-react-app cra-ts --template typescript

shilman

NOTE: This was written in 2020 and has been superseded by docs at storybook.js.org

Storybook React props handling for Typescript

We've flip-flopped on prop table handling for React components written in Typescript. This document attempts to be a final reference for anybody who's been trying to follow along.

TLDR:

SB6 uses react-docgen-typescript by default. We hope to use react-docgen in SB7. The whole experience led to zero-config in SB6, so it's now a one-line change main.js to switch between the two.

shilman

⚠️ Warning: this document is out of date.

For the most recent webpack5 instructions see MIGRATION.md.

Storybook experimental Webpack 5 support

Storybook 6.2 includes experimental Webpack 5 support. Webpack 5 brings a variety of performance improvements, as well as exciting new features like module federation. Here's a quick guide to get you going.

Intro

shilman

Experimental MDXv2 Support in Storybook 6.5

The MDX team has just released the long-awaited MDXv2 with dramatically better syntax and performance. It's a huge win for the community! 🎉

Now I'm excited to announce experimental support in Storybook 6.5. This gist summarizes how to try it out, how to report bugs, and known gotchas that you might encounter along the way.

Installation

Since MDXv2 is a breaking change, it's an opt-in feature in Storybook 6.5.

shilman

Play functions in Chromatic

We just announced Component Story Format 3.0 that brings play functions to Storybook. Play functions are scripted interactions that execute after the story has rendered, allowing you test hard-to-reach states in your UI like form validations and hover states.

Here's a quick example of filling out a form. For more see the announcement:

import { userEvent } from '@storybook/testing-library';

shilman

Storybook Controls w/ CRA & TypeScript

This is a quick-and-dirty walkthrough to set up a fresh project with Storybook Controls. It's also an introduction to Storybook Args, which is a major update to Storybook's Component Story Format (CSF): a more portable and ergonomic way to write stories.

This walkthrough gives you:

• Auto-generated controls in the addons panel
• Auto-generated controls in your Docs
• Auto-generated actions for event logging
• An introduction to the future of CSF

shilman

Storybook 6.4 QA: On-demand architecture

Storybook 6.4 introduces a whole new core architecture to enable performance optimization. The "on-demand store" makes it possible to code-split Storybook, which leads to smaller bundle sizes, and will enable incremental compilation and granular file-system caching when used with Webpack5.

Storybook 6.4-alpha.35 introduces this massive change to the codebase via PR #15871. Now we're in stabilization mode, trying to get it ready for release.

Testing backwards compatibility

shilman

Experimental Vite Builder

Storybook recently released pluggable builder support in 6.2, which promised to unlock support for webpack alternatives.

Now we have our first community builder in experimental release: storybook-builder-vite. Kudos to Eirik Sletteberg and Sasan Farrokh. Vite is one of the most exciting next-gen bundlers: the official builder of modern Vue and Svelte apps, with great DX for React and Lit as well.

Testing React

npm init @vitejs/app vite-react-app --template react

shilman

Help us test Angular Ivy in Storybook 6.3! 🙏

Hallelujah Angular users! 🙌 We just merged a last-minute Angular PR for Ivy rendering support in Storybook (huge props to @ThibaudAv @kroeder for making this happen!). This change is available in SB 6.3.0-beta.10 and above.

We're very late in the Storybook 6.3 cycle (RC on Monday!), so we desperately need your testing help. If it's too destabilizing, we need to roll it back and release in 6.4.

Fresh install

If you're installing Storybook from scratch, run this in your project root:

shilman

Storybook Repro Alpha

To streamline bug reporting and maintenance, we're introducing a standardized repro process in Storybook. The process is now in alpha, and we'd love your feedback to make it better before we introduce it to the community at large. Thank you for your help!!!

The process is automated by two new commands:

• sb repro - create a new repro based on a template
• sb link - download a repro and link it against the storybook monorepo to interactively develop a fix against it

Step 1: creating a reproduction