@nx/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. By default, starting Nx 16, Storybook v7 is used.

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

This will generate Storybook configuration for the ui project.

Generate Storybook configuration using TypeScript

This will generate Storybook configuration for the ui project using TypeScript for the Storybook configuration files (the files inside the .storybook directory, eg. .storybook/main.ts).

Ignore certain paths when generating stories

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.

Usage

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

You can specify the collection explicitly as follows:

Show what will be generated without writing to disk: