@nrwl/angularSee schema

@nrwl/angular:storybook-configuration

Adds Storybook configuration to a project to be able to use and create stories.

This generator will set up Storybook for your Angular project.

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

You can read more about how this generator works, in the Storybook for Angular 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 Angular - 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/angular: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/angular: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 Storybook configuration for Storybook version 7

nx g @nrwl/angular: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/angular: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.

configureCypress

boolean
Default: true

Specifies whether to configure Cypress or not.

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

Specifies whether to automatically generate *.stories.ts files for components declared in this project or not.

generateCypressSpecs

boolean
Default: true

Specifies whether to automatically generate test files in the generated Cypress e2e app.

tsConfiguration

boolean
Default: false

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

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.

linter

string
Default: eslint
Accepted values: eslint, none

The tool to use for running lint checks.

storybook7Configuration

Hidden
boolean
Default: true

Configure your workspace using Storybook version 7.

skipFormat

boolean
Default: false

Skip formatting files.