@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
nameof the project you want to generate the configuration for. - Whether you want to
configureCypress. If you chooseyes, 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
generateStoriesfor the components in your project. If you chooseyes, a.stories.tsfile will be generated next to each of your components in your project. - Whether you want to
generateCypressSpecs. If you chooseyes, 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 chooseyes, atest-storybooktarget will be generated in your project'sproject.json, with a command to invoke the Storybooktest-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 --storybook7betaConfiguration=true
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