You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/blog/2023-02-16-nx-15-7-node-support-angular-lts-lockfile-pruning.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -135,7 +135,7 @@ Stay tuned for a more in-depth blog post coming soon to [our blog](/blog).
135
135
136
136
Nx provides support for Storybook version 7.0 beta, with generators and executors, so that you can try it out now, either in a new or in your existing Nx workspace. Storybook version 7 is a major release that brings a lot of new features and improvements. You can read more about it in the [Storybook 7 beta announcement blog post](https://storybook.js.org/blog/7-0-beta/). Apart from the new features and enhancements, it also brings some breaking changes. You can read more about them in the [Storybook 7 migration docs](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-65x-to-700) and the [Storybook 7 migration guide](https://chromatic-ui.notion.site/Storybook-7-migration-guide-dbf41fa347304eb2a5e9c69b34503937). Do note that _version 7 is still in beta_, and so is the Nx support for it.
137
137
138
-
You can try out Storybook 7.0 beta in a new Nx workspace by passing the `--storybook7betaConfiguration` flag when generating the Storybook configuration for your projects. Read more in our [Storybook 7 setup guide](/nx-api/storybook/documents/storybook-7-setup). If you want to migrate your existing Storybook configuration to Storybook 7.0 beta, please read our [migration guide](/nx-api/storybook/generators/migrate-7).
138
+
You can try out Storybook 7.0 beta in a new Nx workspace by passing the `--storybook7betaConfiguration` flag when generating the Storybook configuration for your projects.
"description": "This guide explains how you can set up Storybook version 7 in your Nx workspace. It contains information about the generators and the frameworks that are supported.",
"description": "This guide explains how you can set up Storybook version 9 in your Nx workspace. It contains information about the generators and the frameworks that are supported.",
"description": "This guide explains how you can set up Storybook version 7 in your Nx workspace. It contains information about the generators and the frameworks that are supported.",
"description": "This guide explains how you can set up Storybook version 9 in your Nx workspace. It contains information about the generators and the frameworks that are supported.",
The stories generator will read your inputs (if you’re using Angular), or your props (if you're using React), and will generate stories with the corresponding arguments/controls already prefilled.
Copy file name to clipboardExpand all lines: docs/generated/packages/storybook/documents/overview.md
+4-17
Original file line number
Diff line number
Diff line change
@@ -93,35 +93,22 @@ nx g @nx/react:storybook-configuration my-react-project
93
93
nx g @nx/vue:storybook-configuration my-vue-project
94
94
```
95
95
96
-
{% /tab %}
97
-
{% tab label="React Native" %}
98
-
99
-
```shell
100
-
nx g @nx/react-native:storybook-configuration my-react-native-project
101
-
```
102
-
103
96
{% /tab %}
104
97
{% /tabs %}
105
98
106
99
These framework-specific generators will also **generate stories** and interaction tests for you.
107
100
108
-
If you are NOT using a framework-specific generator (for [Angular](/nx-api/angular/generators/storybook-configuration), [React](/nx-api/react/generators/storybook-configuration), [React Native](/nx-api/react-native/generators/storybook-configuration), [Vue](/nx-api/vue/generators/storybook-configuration)), in the field `uiFramework` you must choose one of the following Storybook frameworks:
101
+
If you are NOT using a framework-specific generator (for [Angular](/nx-api/angular/generators/storybook-configuration), [React](/nx-api/react/generators/storybook-configuration), [Vue](/nx-api/vue/generators/storybook-configuration)), in the field `uiFramework` you must choose one of the following Storybook frameworks:
109
102
110
103
-`@storybook/angular`
111
-
-`@storybook/html-webpack5`
112
104
-`@storybook/nextjs`
113
-
-`@storybook/preact-webpack5`
114
105
-`@storybook/react-webpack5`
115
106
-`@storybook/react-vite`
116
107
-`@storybook/server-webpack5`
117
-
-`@storybook/svelte-webpack5`
118
108
-`@storybook/svelte-vite`
119
109
-`@storybook/sveltekit`
120
-
-`@storybook/vue-webpack5`
121
110
-`@storybook/vue-vite`
122
-
-`@storybook/vue3-webpack5`
123
111
-`@storybook/vue3-vite`
124
-
-`@storybook/web-components-webpack5`
125
112
-`@storybook/web-components-vite`
126
113
127
114
Choosing one of these frameworks will have the following effects on your workspace:
@@ -132,7 +119,7 @@ Choosing one of these frameworks will have the following effects on your workspa
132
119
133
120
3. Nx will create new `targets` in your project's `project.json`, called `storybook`, `test-storybook` and `build-storybook`, containing all the necessary configuration to serve, test and build Storybook.
134
121
135
-
Make sure to **use the framework-specific generators** if your project is using Angular, React, Next.js, Vue, Nuxt, or React Native: [`@nx/angular:storybook-configuration`](/nx-api/angular/generators/storybook-configuration), [`@nx/react:storybook-configuration`](/nx-api/react/generators/storybook-configuration), [`@nx/react-native:storybook-configuration`](/nx-api/react-native/generators/storybook-configuration), [`@nx/vue:storybook-configuration`](/nx-api/vue/generators/storybook-configuration) as shown above.
122
+
Make sure to **use the framework-specific generators** if your project is using Angular, React, Next.js, Vue, Nuxt, or React Native: [`@nx/angular:storybook-configuration`](/nx-api/angular/generators/storybook-configuration), [`@nx/react:storybook-configuration`](/nx-api/react/generators/storybook-configuration), [`@nx/vue:storybook-configuration`](/nx-api/vue/generators/storybook-configuration) as shown above.
136
123
137
124
### Running Storybook
138
125
@@ -241,5 +228,5 @@ For more on using Storybook, see the [official Storybook documentation](https://
241
228
242
229
Here's more information on common migration scenarios for Storybook with Nx. For Storybook specific migrations that are not automatically handled by Nx please refer to the [official Storybook page](https://storybook.js.org/)
description: This guide explains how you can set up Storybook version 9 in your Nx workspace. It also highlights the changes that you should expect to see when migrating from Storybook 8 to Storybook 9.
4
+
---
5
+
6
+
# Storybook 9 is here - and Nx is ready
7
+
8
+
Storybook 9 is a major release that brings a lot of new features and improvements. You can read more about it in the [Storybook 9.0.0 release article](https://storybook.js.org/blog/storybook-9/). Apart from the new features and improvements it introduces, it also brings some breaking changes. You can read more about them in the [Storybook 9 migration docs](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-8x-to-900) and the [Storybook 9.0.0 migration guide](https://storybook.js.org/docs/react/migration-guide).
9
+
10
+
Nx provides new generators that allow you to generate Storybook 9 configuration for your projects, by installing the correct dependencies and creating the corresponding version 7 configuration files. Nx also provides a [Storybook 9 migration generator](/nx-api/storybook/generators/migrate-9) that you can use to migrate your existing Storybook configuration to version 9.
11
+
12
+
So, let's see how you can use Storybook 9 on your Nx workspace.
13
+
14
+
## Migrate your existing workspace to Storybook 9
15
+
16
+
If you already have Storybook configured in your Nx workspace, you can use the [Storybook 9 migrator generator](/nx-api/storybook/generators/migrate-9) to migrate your existing Storybook configuration to version 9.
17
+
18
+
## Set up Storybook 9 in a _new_ Nx Workspace
19
+
20
+
Please read the [`@nx/storybook` package overview](/nx-api/storybook) to see how you can configure Storybook in your Nx workspace.
21
+
22
+
## Report any issues and bugs
23
+
24
+
Please report any issues and bugs you find [on the Nx GitHub page](https://github.com/nrwl/nx/issues/new/choose) or on the [Storybook GitHub page](https://github.com/storybookjs/storybook/issues/new/choose).
0 commit comments