miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/generated/packages/storybook.json
View File

File diff suppressed because one or more lines are too long

40
docs/shared/guides/storybook/plugin-angular.md
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> 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 ### 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. 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.

40
docs/shared/guides/storybook/plugin-react.md
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> 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 ### 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. 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.