I’m a HUGE fan of Storybook. It’s a great way to:

• Build components in isolation

• Create living documentation of your code

Up and Running with Storybook

Within your Redwood project, using Storybook is as simple as running a single command:

yarn rw storybook

The first time you run this command, it will take a little longer since Redwood still needs to download Storybook’s dependencies.

Once you’re up and running, you should be able to open Storybook within the browser on port 7910

A Storybook File

Every time you generate a component, cell, layout, or page within Redwood, it will generate (1) a component file, (2) a Storybook file, and (3) a test file.

A Storybook file, is named COMPONENT.stories.tsx (or .jsx if you’re not using TypeScript).

Here’s what the boiler plate code looks like for a component called RsvpStatus

// Pass props to your component by passing an `args` object to your story
//
// ```tsx
// export const Primary: Story = {
//  args: {
//    propName: propValue
//  }
// }
// ```
//
// See <https://storybook.js.org/docs/react/writing-stories/args>.

import type { Meta, StoryObj } from '@storybook/react'

import RsvpStatus from './RsvpStatus'

const meta: Meta<typeof RsvpStatus> = {
  component: RsvpStatus,
}

export default meta

type Story = StoryObj<typeof RsvpStatus>

export const Primary: Story = {}

You can pass in props by adding an args object. For example:

export const Primary: Story = {
  args: {
    count: 0,
    status: 'success',
    heading: 'Attending',
  },
}

You can also create additional “stories” — which are just variations of your component — by exporting out additional constants:

export const Disabled: Story = {
  args: {
    count: 0,
    disabled: true,
    status: 'success',
    heading: 'Attending',
  },
}

export const withClearFilter: Story = {
  args: {
    clearFilter: {
      isShowing: true,
      handleClick: () => {},
    },
    count: 0,
    status: 'success',
    heading: 'Attending',
  },
}

I have a video on YouTube, dedicated to working with Storybook and Redwood.