Skip to content

Instantly share code, notes, and snippets.

Avatar
🇹🇼

Michael Shilman shilman

🇹🇼
View GitHub Profile
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 '@testing-library/user-event';
@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

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

Storybook uses webpack to bundle its UI ("manager") and also user code in an iframe ("preview"). In Storybook 6.2, the manager is bundled in Webpack 4, and the preview can either be bundled in Webpack 4 (default) or Webpack 5 (opt-in). In Storybook 6.3, the manager is also bundled in Webpack 5 when the preview is bundled with Webpack 5.

@shilman
shilman / storybook-react-docgen-typescript.md
Last active Dec 29, 2020
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)

@shilman
shilman / simple.mdx
Created Dec 2, 2019
Simple MDX example
View simple.mdx

import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';

import { Badge } from './Badge'; import { Icon } from './Icon';

Badge

Let's define a story for our Badge component:

@shilman
shilman / storybook-monthly-2019-11-04.md
Last active Nov 4, 2019
Storybook Monthly 2019-11-04
View storybook-monthly-2019-11-04.md

Storybook Monthly 2019-11-04

Introduction - 5m

  • Welcome
  • Self-introductions

5.3 Release - 5m

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