Using Storybook for developing isolated React Components

[joelhooks]

Since @jh3y added Storybook, I hadn't made much use of it. The upgrade to Tailwind 2 actually broke it, and I ended up with some burly work-around to get it functioning:

eab7069#diff-cafe2123a72c4ce3a9f7e9ee4b0e188256eb02d7ec1e54fa2cadfac99b22f92b

details: storybookjs/storybook#12668 (comment)

Now that it's working and I've had the chance to tinker on a couple of components, I've gotta say:

I love it 🎉

To start Storybook in dev you run:

yarn storybook

This launches the server and a browser window at the URL SB is running locally (port 6006 by default).

Storybook files are mdx and look something like this:

import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'
import RecommendNextStepOverlay from './recommend-next-step-overlay'

import {cloudflareLesson} from './lesson-01'

<Meta title="Components/Lessons/Overlay/RecommendNextStepOverlay" />

# Recommend with a CTA Overlay Component

After a course/collection is finished this is displayed to suggest something to do.

<Canvas>
  <Story name="Default">
    <div className="max-w-7xl">
      <RecommendNextStepOverlay lesson={cloudflareLesson} />
    </div>
  </Story>
</Canvas>

https://github.com/eggheadio/egghead-next/blob/409d5dbbb598f25b02b824c23178157e7fb053b5/src/components/pages/lessons/overlay/recommend-next-step-overlay/recommend-next-step-overlay.stories.mdx

The filename uses a specific format {component_name}.stories.mdx which Storybook finds and uses. It seems common to have this file live next to the component it represents.

The mdx format also allows for adding metadata and describing the component with detailed documentation.

Usually we will need to bring in some data. I used a console.log(lesson) to get a full auth'd response for a video resource.

I would assume more complex data loading can be accomplished, but I didn't attempt it. In this case, I also changed the hls_url and dash_url to a specific video instead of the actual lesson material.

This only scratches the surface of Storybook, and I'm excited to use it to develop more components.

[jh3y]

Glad you've started using it @joelhooks! 👍

Honestly, I truly advocate "Storybook first". Helpful on many levels and makes developers think properly about how their UI components are structured. See a lot of people trying to shoehorn API requests and things into Storybook and it kinda defeats the point. It's for scaffolding UI and the different permutations.

There are usually ways to snapshot data and make it available to Storybook so you can pass it as props for particular stories. Sometimes takes a moment to give it a little thought.