@nrwl/reactSee schema

@nrwl/react:storybook-configuration

Set up Storybook for a React app or library.

This generator will set up Storybook for your React project. You can also use this generator to generate Storybook configuration for your Next.js project.

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

You can read more about how this generator works, in the Storybook for React overview page.

When running this generator, you will be prompted to provide the following:

  • The name of the project you want to generate the configuration for.
  • Whether you want to configureCypress. If you choose yes, a Cypress e2e app will be created (or configured) to run against the project's Storybook instance. You can read more about this in the Storybook for React - Cypress section.
  • Whether you want to generateStories for the components in your project. If you choose yes, a .stories.ts file will be generated next to each of your components in your project.
  • Whether you want to generateCypressSpecs. If you choose yes, a test file is going to be generated in the project's Cypress e2e app for each of your components.
  • Whether you want to configureTestRunner. If you choose yes, a test-storybook target will be generated in your project's project.json, with a command to invoke the Storybook test-runner.

You must provide a name for the generator to work.

There are a number of other options available. Let's take a look at some examples.

Examples

Generate Storybook configuration using TypeScript

nx g @nrwl/react:storybook-configuration ui --tsConfiguration=true

This will generate a Storybook configuration for the ui project using TypeScript for the Storybook configuration files (the files inside the .storybook directory).

Ignore certain paths when generating stories

nx g @nrwl/react:storybook-configuration ui --generateStories=true --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts

This will generate a Storybook configuration for the ui project and generate stories for all components in the libs/ui/src/lib directory, except for the ones in the libs/ui/src/not-stories directory, and the ones in the apps/my-app directory that end with .something.ts, and also for components that their file name is of the pattern *.other.*.

This is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.

Generate stories using JavaScript instead of TypeScript

nx g @nrwl/react:storybook-configuration ui --generateStories=true --js=true

This will generate stories for all the components in the ui project using JavaScript instead of TypeScript. So, you will have .stories.js files next to your components.

Generate Storybook configuration for Storybook version 7

nx g @nrwl/react:storybook-configuration ui --storybook7Configuration=true
For Nx versions <15.9

The flag is called storybook7betaConfiguration for Nx versions <15.9.

This will generate a Storybook configuration for the ui project using Storybook version 7. It will install the Storybook version 7 dependencies and configure the Storybook configuration files (the files inside the .storybook directory) to use Storybook version 7. You can read more about Storybook 7 Nx support in the Storybook 7 setup guide.

Usage

nx generate storybook-configuration ...

By default, Nx will search for storybook-configuration in the default collection provisioned in workspace.json.

You can specify the collection explicitly as follows:

nx g @nrwl/react:storybook-configuration ...

Show what will be generated without writing to disk:

nx g storybook-configuration ... --dry-run

Options

name

Required
string

Project for which to generate Storybook configuration.

bundler

string
Accepted values: vite, webpack

The Storybook builder to use.

configureCypress

boolean
Default: true

Run the cypress-configure generator.

configureStaticServe

boolean
Default: true

Specifies whether to configure a static file server target for serving storybook. Helpful for speeding up CI build/test times.

generateStories

boolean
Default: true

Automatically generate *.stories.ts files for components declared in this project?

generateCypressSpecs

boolean
Default: true

Automatically generate test files in the Cypress E2E app generated by the cypress-configure generator.

cypressDirectory

string

A directory where the Cypress project will be placed. Placed at the root by default.

configureTestRunner

boolean

Add a Storybook Test-Runner target.

ignorePaths

Array<string>

Paths to ignore when looking for components.

js

boolean
Default: false

Generate JavaScript story files rather than TypeScript story files.

linter

string
Default: eslint
Accepted values: eslint

The tool to use for running lint checks.

storybook7Configuration

Hidden
boolean
Default: true

Configure your workspace using Storybook version 7.

tsConfiguration

boolean
Default: false

Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.

standaloneConfig

Deprecated
boolean
Default: true

Split the project configuration into <projectRoot>/project.json rather than including it inside workspace.json.

Nx only supports standaloneConfig