docs(storybook): added an example to the main storybook docs (#11774)

ISSUES CLOSED: #11447
This commit is contained in:
Katerina Skroumpelou 2022-08-30 15:23:54 +03:00 committed by GitHub
parent 6ea8d0d623
commit 9999215211
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 82 additions and 2 deletions

File diff suppressed because one or more lines are too long

View File

@ -122,6 +122,46 @@ You can re-run it at a later point using the following command:
nx g @nrwl/angular:stories <project-name>
```
{% callout type="note" title="Example" %}
Let's take for a example a library in your workspace, under `libs/feature/ui`, called `feature-ui`. This library contains a component, called `my-button`.
The command to generate stories for that library would be:
```bash
nx g @nrwl/angular:stories feature-ui
```
and the result would be the following:
```treeview
<workspace name>/
├── .storybook/
├── apps/
├── libs/
│ ├── feature/
│ │ ├── ui/
| | | ├── .storybook/
| | | ├── src/
| | | | ├──lib
| | | | | ├──my-button
| | | | | | ├── my-button.component.ts
| | | | | | ├── my-button.component.stories.ts
| | | | | | └── etc...
| | | | | └── etc...
| | | ├── README.md
| | | ├── tsconfig.json
| | | └── etc...
| | └── etc...
| └── etc...
├── nx.json
├── package.json
├── README.md
└── etc...
```
{% /callout %}
### Cypress tests for Stories
Both `storybook-configuration` generator gives the option to set up an e2e Cypress app that is configured to run against the project's Storybook instance.

View File

@ -136,6 +136,46 @@ You can re-run it at a later point using the following command:
nx g @nrwl/react:stories <project-name>
```
{% callout type="note" title="Example" %}
Let's take for a example a library in your workspace, under `libs/feature/ui`, called `feature-ui`. This library contains a component, called `my-button`.
The command to generate stories for that library would be:
```bash
nx g @nrwl/react:stories feature-ui
```
and the result would be the following:
```treeview
<workspace name>/
├── .storybook/
├── apps/
├── libs/
│ ├── feature/
│ │ ├── ui/
| | | ├── .storybook/
| | | ├── src/
| | | | ├──lib
| | | | | ├──my-button
| | | | | | ├── my-button.component.ts
| | | | | | ├── my-button.component.stories.ts
| | | | | | └── etc...
| | | | | └── etc...
| | | ├── README.md
| | | ├── tsconfig.json
| | | └── etc...
| | └── etc...
| └── etc...
├── nx.json
├── package.json
├── README.md
└── etc...
```
{% /callout %}
### Cypress tests for Stories
Both `storybook-configuration` generator gives the option to set up an e2e Cypress app that is configured to run against the project's Storybook instance.