52 lines
3.2 KiB
Markdown
52 lines
3.2 KiB
Markdown
This generator will set up Storybook for your Angular project.
|
|
|
|
```bash
|
|
nx g @nx/angular:storybook-configuration project-name
|
|
```
|
|
|
|
You can read more about how this generator works, in the [Storybook for Angular overview page](/packages/storybook/documents/overview-angular#generate-storybook-configuration-for-an-angular-project).
|
|
|
|
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](/packages/storybook/documents/overview-angular#cypress-tests-for-stories).
|
|
- 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`](https://storybook.js.org/docs/react/writing-tests/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
|
|
|
|
```bash
|
|
nx g @nx/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
|
|
|
|
```bash
|
|
nx g @nx/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
|
|
|
|
```bash
|
|
nx g @nx/angular:storybook-configuration ui --storybook7Configuration=true
|
|
```
|
|
|
|
{% callout type="info" title="For Nx versions <15.9" %}
|
|
The flag is called `storybook7betaConfiguration` for Nx versions <15.9.
|
|
{% /callout %}
|
|
|
|
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](/packages/storybook/documents/storybook-7-setup).
|