@nx/angular:stories

Creates Storybook stories/specs for all Angular components declared in a project.

This generator will generate stories for all your components in your project. The stories will be generated using Component Story Format 3 (CSF3).

nx g @nx/angular:stories project-name
Nx 15 and lower use @nrwl/ instead of @nx/

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 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.

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

Ignore certain paths when generating stories

nx g @nx/angular:stories ui --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*
Nx 15 and lower use @nrwl/ instead of @nx/

This will generate stories for all the components in the ui project, except for the ones in the libs/ui/src/not-stories directory, 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.

Usage

nx generate stories ...

By default, Nx will search for stories in the default collection provisioned in workspace.json.

You can specify the collection explicitly as follows:

nx g @nx/angular:stories ...
Nx 15 and lower use @nrwl/ instead of @nx/

Show what will be generated without writing to disk:

nx g stories ... --dry-run

Options

name

Required
string

Project for which to generate stories.

interactionTests

boolean
Default: true

Set up Storybook interaction tests.

ignorePaths

Array<string>

Paths to ignore when looking for components.

skipFormat

boolean
Default: false

Skip formatting files.

cypressProject

Deprecated
string

The Cypress project to generate the stories under. This is inferred from name by default.

Use interactionTests instead. This option will be removed in v18.

generateCypressSpecs

Deprecated
boolean

Specifies whether to automatically generate *.spec.ts files in the Cypress e2e app generated by the cypress-configure generator.

Use interactionTests instead. This option will be removed in v18.