Set up Storybook for React Projects

This guide will walk you through setting up Storybook for React projects in your Nx workspace.

Generate Storybook Configuration for a React project

You can generate Storybook configuration for an individual React project by using the @nx/react:storybook-configuration generator, like this:

nx g @nx/react:storybook-configuration project-name

Auto-generate Stories

The @nx/react:storybook-configuration generator has the option to automatically generate *.stories.ts|tsx files for each component declared in the library. The stories will be generated using Component Story Format 3 (CSF3).

Directory<some-folder>/
- my-component.tsx
- my-component.stories.tsx

If you add more components to your project, and want to generate stories for all your (new) components at any point, you can use the @nx/react:stories generator:

nx g @nx/react:stories --project=<project-name>

Example Library

Let's take for a example a library in your workspace, under libs/feature/ui, called feature-ui. This library contains a component, called my-button.

The command to generate stories for that library would be:

nx g @nx/react:stories --project=feature-ui

and the result would be the following:

Directoryworkspace-name/
- Directoryapps/
  - …
- Directorylibs/
  - Directoryfeature/
    Directoryui/
    Directory.storybook/
    …
    Directorysrc/
    Directorylib/
    Directorymy-button/
    my-button.tsx
    my-button.stories.tsx
    etc...
    README.md
    tsconfig.json
- nx.json
- package.json
- README.md

Example Files

Let's take for a example a library in your workspace, under libs/feature/ui, called feature-ui with a component, called my-button.

Let's say that your component code looks like this:

export interface MyButtonProps {
  text: string;
  padding: number;
  disabled: boolean;
}

export function MyButton(props: MyButtonProps) {
  return (
    <button disabled={props.disabled} style={{ padding: props.padding }}>
      {props.text}
    </button>
  );
}

export default MyButton;

Story file

The @nx/react:storybook-configuration generator would generate a Story file that looks like this:

import type { Meta, StoryObj } from '@storybook/react-vite';
import { MyButton } from './my-button';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';

const meta = {
  component: MyButton,
  title: 'MyButton',
} satisfies Meta<typeof MyButton>;
export default meta;

type Story = StoryObj<typeof MyButton>;

export const Primary = {
  args: {
    text: '',
    padding: 0,
    disabled: false,
  },
} satisfies Story;

export const Heading = {
  args: {
    text: '',
    padding: 0,
    disabled: false,
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    expect(canvas.getByText(/MyButton!/gi)).toBeTruthy();
  },
} satisfies Story;

Notice the interaction test on the second story, inside the play function. This just tests if the default text that appears on generated components exists in the rendered component. You can edit this test to suit your needs. You can read more about interaction tests here.