Skip to content

Instantly share code, notes, and snippets.

Avatar
🇹🇼

Michael Shilman shilman

🇹🇼
View GitHub Profile
@shilman
shilman / mdx-v2-sb-6.5.md
Last active May 2, 2022
Experimental MDXv2 Support in Storybook 6.5
View mdx-v2-sb-6.5.md

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
shilman / on-demand-architecture-alpha.md
Last active Oct 26, 2021
6.4 QA: On-demand architecture
View on-demand-architecture-alpha.md

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

View chromatic-play.md

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
shilman / storybook-angular-ivy.md
Last active Jun 9, 2021
Test Angular Ivy in Storybook 6.3! 🙏
View storybook-angular-ivy.md

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
shilman / sb-repro.md
Last active May 13, 2021
SB Repro Alpha
View sb-repro.md

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

View vite-builder.md

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
View storybook-webpack5-experimental.md

⚠️ 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
shilman / storybook-react-docgen-typescript.md
Last active Aug 28, 2022
Storybook React props handling for Typescript
View storybook-react-docgen-typescript.md

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.

TOC:

View storybook-controls-typescript-walkthrough.md

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
shilman / sb-monthly-2019-12-09.md
Last active Dec 9, 2019
Storybook Monthly 2019-12-09
View sb-monthly-2019-12-09.md

Storybook Monthly 2019-12-09

Introduction - 5m

  • Welcome
  • Self-introductions

5.3 Release - 5m

Nov 16 beta, Dec 16 rc, Jan 7 final (3 mo cycle)