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

docs(storybook): rearrange docs and more some to deprecated (#16805)

Browse Source
This commit is contained in:
Katerina Skroumpelou 2023-05-05 17:53:46 +03:00 committed by GitHub
parent 402ccbf182
commit 32c176c359
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 583 additions and 562 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

222
docs/generated/manifests/menus.json
View File

@ -1588,6 +1588,63 @@
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Storybook deprecated docs",
"path": "/deprecated/storybook",
"id": "storybook",
"isExternal": false,
"children": [
{
"name": "Angular: Information about the Storybook targets",
"path": "/deprecated/storybook/angular-storybook-targets",
"id": "angular-storybook-targets",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Angular: The browserTarget",
"path": "/deprecated/storybook/angular-browser-target",
"id": "angular-browser-target",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Angular: Storybook Migration to webpackFinal",
"path": "/deprecated/storybook/migrate-webpack-final-angular",
"id": "migrate-webpack-final-angular",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Angular: Upgrading to Storybook 6",
"path": "/deprecated/storybook/upgrade-storybook-v6-angular",
"id": "upgrade-storybook-v6-angular",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "React: Storybook Migration to webpackFinal and the Nx Addon",
"path": "/deprecated/storybook/migrate-webpack-final-react",
"id": "migrate-webpack-final-react",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "React: Upgrading to Storybook 6",
"path": "/deprecated/storybook/upgrade-storybook-v6-react",
"id": "upgrade-storybook-v6-react",
"isExternal": false,
"children": [],
"disableCollapsible": false
}
],
"disableCollapsible": false
}
],
"disableCollapsible": false
@ -1640,6 +1697,111 @@
"children": [],
"disableCollapsible": false
},
{
"name": "Storybook deprecated docs",
"path": "/deprecated/storybook",
"id": "storybook",
"isExternal": false,
"children": [
{
"name": "Angular: Information about the Storybook targets",
"path": "/deprecated/storybook/angular-storybook-targets",
"id": "angular-storybook-targets",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Angular: The browserTarget",
"path": "/deprecated/storybook/angular-browser-target",
"id": "angular-browser-target",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Angular: Storybook Migration to webpackFinal",
"path": "/deprecated/storybook/migrate-webpack-final-angular",
"id": "migrate-webpack-final-angular",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Angular: Upgrading to Storybook 6",
"path": "/deprecated/storybook/upgrade-storybook-v6-angular",
"id": "upgrade-storybook-v6-angular",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "React: Storybook Migration to webpackFinal and the Nx Addon",
"path": "/deprecated/storybook/migrate-webpack-final-react",
"id": "migrate-webpack-final-react",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "React: Upgrading to Storybook 6",
"path": "/deprecated/storybook/upgrade-storybook-v6-react",
"id": "upgrade-storybook-v6-react",
"isExternal": false,
"children": [],
"disableCollapsible": false
}
],
"disableCollapsible": false
},
{
"name": "Angular: Information about the Storybook targets",
"path": "/deprecated/storybook/angular-storybook-targets",
"id": "angular-storybook-targets",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Angular: The browserTarget",
"path": "/deprecated/storybook/angular-browser-target",
"id": "angular-browser-target",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Angular: Storybook Migration to webpackFinal",
"path": "/deprecated/storybook/migrate-webpack-final-angular",
"id": "migrate-webpack-final-angular",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Angular: Upgrading to Storybook 6",
"path": "/deprecated/storybook/upgrade-storybook-v6-angular",
"id": "upgrade-storybook-v6-angular",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "React: Storybook Migration to webpackFinal and the Nx Addon",
"path": "/deprecated/storybook/migrate-webpack-final-react",
"id": "migrate-webpack-final-react",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "React: Upgrading to Storybook 6",
"path": "/deprecated/storybook/upgrade-storybook-v6-react",
"id": "upgrade-storybook-v6-react",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "See Also",
"path": "/see-also",
@ -6121,17 +6283,17 @@
"disableCollapsible": false
},
{
"name": "Storybook 7 setup guide",
"path": "/packages/storybook/documents/storybook-7-setup",
"id": "storybook-7-setup",
"name": "Storybook best practices for making the most out of Nx",
"path": "/packages/storybook/documents/best-practices",
"id": "best-practices",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Storybook best practices for making the most out of Nx",
"path": "/packages/storybook/documents/best-practices",
"id": "best-practices",
"name": "Storybook 7 overview",
"path": "/packages/storybook/documents/storybook-7-setup",
"id": "storybook-7-setup",
"isExternal": false,
"children": [],
"disableCollapsible": false
@ -6175,54 +6337,6 @@
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Angular: Information about the Storybook targets",
"path": "/packages/storybook/documents/angular-storybook-targets",
"id": "angular-storybook-targets",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Angular: The browserTarget",
"path": "/packages/storybook/documents/angular-browser-target",
"id": "angular-browser-target",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Angular: Storybook Migration to webpackFinal",
"path": "/packages/storybook/documents/migrate-webpack-final-angular",
"id": "migrate-webpack-final-angular",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Angular: Upgrading to Storybook 6",
"path": "/packages/storybook/documents/upgrade-storybook-v6-angular",
"id": "upgrade-storybook-v6-angular",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "React: Storybook Migration to webpackFinal and the Nx Addon",
"path": "/packages/storybook/documents/migrate-webpack-final-react",
"id": "migrate-webpack-final-react",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "React: Upgrading to Storybook 6",
"path": "/packages/storybook/documents/upgrade-storybook-v6-react",
"id": "upgrade-storybook-v6-react",
"isExternal": false,
"children": [],
"disableCollapsible": false
}
],
"isExternal": false,

202
docs/generated/manifests/nx.json
View File

@ -1977,6 +1977,77 @@
"isExternal": false,
"path": "/deprecated/global-implicit-dependencies",
"tags": []
},
{
"id": "storybook",
"name": "Storybook deprecated docs",
"description": "Deprecated @nx/storybook package documentation and guides.",
"file": "",
"itemList": [
{
"id": "angular-storybook-targets",
"name": "Angular: Information about the Storybook targets",
"description": "This document explains the role of the storybook and build-storybook targets in Angular projects with a Storybook configuration, and specifically which executors are used for them.",
"file": "shared/deprecated/storybook/angular-storybook-targets",
"itemList": [],
"isExternal": false,
"path": "/deprecated/storybook/angular-storybook-targets",
"tags": []
},
{
"id": "angular-browser-target",
"name": "Angular: The browserTarget",
"description": "This document explains the role of the browserTarget in Angular projects with a Storybook configuration, and how the Storybook executors use it.",
"file": "shared/deprecated/storybook/angular-browser-target",
"itemList": [],
"isExternal": false,
"path": "/deprecated/storybook/angular-browser-target",
"tags": []
},
{
"id": "migrate-webpack-final-angular",
"name": "Angular: Storybook Migration to webpackFinal",
"description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration.",
"file": "shared/deprecated/storybook/migrate-webpack-final-angular",
"itemList": [],
"isExternal": false,
"path": "/deprecated/storybook/migrate-webpack-final-angular",
"tags": []
},
{
"id": "upgrade-storybook-v6-angular",
"name": "Angular: Upgrading to Storybook 6",
"description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for Angular projects.",
"file": "shared/deprecated/storybook/storybook-v6-angular",
"itemList": [],
"isExternal": false,
"path": "/deprecated/storybook/upgrade-storybook-v6-angular",
"tags": []
},
{
"id": "migrate-webpack-final-react",
"name": "React: Storybook Migration to webpackFinal and the Nx Addon",
"description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration and the Nx React Addon.",
"file": "shared/deprecated/storybook/migrate-webpack-final-react",
"itemList": [],
"isExternal": false,
"path": "/deprecated/storybook/migrate-webpack-final-react",
"tags": []
},
{
"id": "upgrade-storybook-v6-react",
"name": "React: Upgrading to Storybook 6",
"description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for React projects.",
"file": "shared/deprecated/storybook/storybook-v6-react",
"itemList": [],
"isExternal": false,
"path": "/deprecated/storybook/upgrade-storybook-v6-react",
"tags": []
}
],
"isExternal": false,
"path": "/deprecated/storybook",
"tags": []
}
],
"isExternal": false,
@ -2043,6 +2114,137 @@
"path": "/deprecated/global-implicit-dependencies",
"tags": []
},
"/deprecated/storybook": {
"id": "storybook",
"name": "Storybook deprecated docs",
"description": "Deprecated @nx/storybook package documentation and guides.",
"file": "",
"itemList": [
{
"id": "angular-storybook-targets",
"name": "Angular: Information about the Storybook targets",
"description": "This document explains the role of the storybook and build-storybook targets in Angular projects with a Storybook configuration, and specifically which executors are used for them.",
"file": "shared/deprecated/storybook/angular-storybook-targets",
"itemList": [],
"isExternal": false,
"path": "/deprecated/storybook/angular-storybook-targets",
"tags": []
},
{
"id": "angular-browser-target",
"name": "Angular: The browserTarget",
"description": "This document explains the role of the browserTarget in Angular projects with a Storybook configuration, and how the Storybook executors use it.",
"file": "shared/deprecated/storybook/angular-browser-target",
"itemList": [],
"isExternal": false,
"path": "/deprecated/storybook/angular-browser-target",
"tags": []
},
{
"id": "migrate-webpack-final-angular",
"name": "Angular: Storybook Migration to webpackFinal",
"description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration.",
"file": "shared/deprecated/storybook/migrate-webpack-final-angular",
"itemList": [],
"isExternal": false,
"path": "/deprecated/storybook/migrate-webpack-final-angular",
"tags": []
},
{
"id": "upgrade-storybook-v6-angular",
"name": "Angular: Upgrading to Storybook 6",
"description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for Angular projects.",
"file": "shared/deprecated/storybook/storybook-v6-angular",
"itemList": [],
"isExternal": false,
"path": "/deprecated/storybook/upgrade-storybook-v6-angular",
"tags": []
},
{
"id": "migrate-webpack-final-react",
"name": "React: Storybook Migration to webpackFinal and the Nx Addon",
"description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration and the Nx React Addon.",
"file": "shared/deprecated/storybook/migrate-webpack-final-react",
"itemList": [],
"isExternal": false,
"path": "/deprecated/storybook/migrate-webpack-final-react",
"tags": []
},
{
"id": "upgrade-storybook-v6-react",
"name": "React: Upgrading to Storybook 6",
"description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for React projects.",
"file": "shared/deprecated/storybook/storybook-v6-react",
"itemList": [],
"isExternal": false,
"path": "/deprecated/storybook/upgrade-storybook-v6-react",
"tags": []
}
],
"isExternal": false,
"path": "/deprecated/storybook",
"tags": []
},
"/deprecated/storybook/angular-storybook-targets": {
"id": "angular-storybook-targets",
"name": "Angular: Information about the Storybook targets",
"description": "This document explains the role of the storybook and build-storybook targets in Angular projects with a Storybook configuration, and specifically which executors are used for them.",
"file": "shared/deprecated/storybook/angular-storybook-targets",
"itemList": [],
"isExternal": false,
"path": "/deprecated/storybook/angular-storybook-targets",
"tags": []
},
"/deprecated/storybook/angular-browser-target": {
"id": "angular-browser-target",
"name": "Angular: The browserTarget",
"description": "This document explains the role of the browserTarget in Angular projects with a Storybook configuration, and how the Storybook executors use it.",
"file": "shared/deprecated/storybook/angular-browser-target",
"itemList": [],
"isExternal": false,
"path": "/deprecated/storybook/angular-browser-target",
"tags": []
},
"/deprecated/storybook/migrate-webpack-final-angular": {
"id": "migrate-webpack-final-angular",
"name": "Angular: Storybook Migration to webpackFinal",
"description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration.",
"file": "shared/deprecated/storybook/migrate-webpack-final-angular",
"itemList": [],
"isExternal": false,
"path": "/deprecated/storybook/migrate-webpack-final-angular",
"tags": []
},
"/deprecated/storybook/upgrade-storybook-v6-angular": {
"id": "upgrade-storybook-v6-angular",
"name": "Angular: Upgrading to Storybook 6",
"description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for Angular projects.",
"file": "shared/deprecated/storybook/storybook-v6-angular",
"itemList": [],
"isExternal": false,
"path": "/deprecated/storybook/upgrade-storybook-v6-angular",
"tags": []
},
"/deprecated/storybook/migrate-webpack-final-react": {
"id": "migrate-webpack-final-react",
"name": "React: Storybook Migration to webpackFinal and the Nx Addon",
"description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration and the Nx React Addon.",
"file": "shared/deprecated/storybook/migrate-webpack-final-react",
"itemList": [],
"isExternal": false,
"path": "/deprecated/storybook/migrate-webpack-final-react",
"tags": []
},
"/deprecated/storybook/upgrade-storybook-v6-react": {
"id": "upgrade-storybook-v6-react",
"name": "React: Upgrading to Storybook 6",
"description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for React projects.",
"file": "shared/deprecated/storybook/storybook-v6-react",
"itemList": [],
"isExternal": false,
"path": "/deprecated/storybook/upgrade-storybook-v6-react",
"tags": []
},
"/see-also": {
"id": "see-also",
"name": "See Also",

88
docs/generated/manifests/packages.json
View File

@ -2332,17 +2332,6 @@
"tags": [],
"originalFilePath": "shared/packages/storybook/plugin-angular"
},
"/packages/storybook/documents/storybook-7-setup": {
"id": "storybook-7-setup",
"name": "Storybook 7 setup guide",
"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.",
"file": "generated/packages/storybook/documents/storybook-7-setup",
"itemList": [],
"isExternal": false,
"path": "/packages/storybook/documents/storybook-7-setup",
"tags": [],
"originalFilePath": "shared/packages/storybook/storybook-7-setup"
},
"/packages/storybook/documents/best-practices": {
"id": "best-practices",
"name": "Storybook best practices for making the most out of Nx",
@ -2354,6 +2343,17 @@
"tags": [],
"originalFilePath": "shared/packages/storybook/best-practices"
},
"/packages/storybook/documents/storybook-7-setup": {
"id": "storybook-7-setup",
"name": "Storybook 7 overview",
"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.",
"file": "generated/packages/storybook/documents/storybook-7-setup",
"itemList": [],
"isExternal": false,
"path": "/packages/storybook/documents/storybook-7-setup",
"tags": [],
"originalFilePath": "shared/packages/storybook/storybook-7-setup"
},
"/packages/storybook/documents/configuring-storybook": {
"id": "configuring-storybook",
"name": "Configuring Storybook on Nx",
@ -2408,72 +2408,6 @@
"path": "/packages/storybook/documents/angular-configuring-styles",
"tags": [],
"originalFilePath": "shared/packages/storybook/angular-configuring-styles"
},
"/packages/storybook/documents/angular-storybook-targets": {
"id": "angular-storybook-targets",
"name": "Angular: Information about the Storybook targets",
"description": "This document explains the role of the storybook and build-storybook targets in Angular projects with a Storybook configuration, and specifically which executors are used for them.",
"file": "generated/packages/storybook/documents/angular-storybook-targets",
"itemList": [],
"isExternal": false,
"path": "/packages/storybook/documents/angular-storybook-targets",
"tags": [],
"originalFilePath": "shared/packages/storybook/angular-storybook-targets"
},
"/packages/storybook/documents/angular-browser-target": {
"id": "angular-browser-target",
"name": "Angular: The browserTarget",
"description": "This document explains the role of the browserTarget in Angular projects with a Storybook configuration, and how the Storybook executors use it.",
"file": "generated/packages/storybook/documents/angular-browser-target",
"itemList": [],
"isExternal": false,
"path": "/packages/storybook/documents/angular-browser-target",
"tags": [],
"originalFilePath": "shared/packages/storybook/angular-browser-target"
},
"/packages/storybook/documents/migrate-webpack-final-angular": {
"id": "migrate-webpack-final-angular",
"name": "Angular: Storybook Migration to webpackFinal",
"description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration.",
"file": "generated/packages/storybook/documents/migrate-webpack-final-angular",
"itemList": [],
"isExternal": false,
"path": "/packages/storybook/documents/migrate-webpack-final-angular",
"tags": [],
"originalFilePath": "shared/packages/storybook/migrate-webpack-final-angular"
},
"/packages/storybook/documents/upgrade-storybook-v6-angular": {
"id": "upgrade-storybook-v6-angular",
"name": "Angular: Upgrading to Storybook 6",
"description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for Angular projects.",
"file": "generated/packages/storybook/documents/upgrade-storybook-v6-angular",
"itemList": [],
"isExternal": false,
"path": "/packages/storybook/documents/upgrade-storybook-v6-angular",
"tags": [],
"originalFilePath": "shared/packages/storybook/storybook-v6-angular"
},
"/packages/storybook/documents/migrate-webpack-final-react": {
"id": "migrate-webpack-final-react",
"name": "React: Storybook Migration to webpackFinal and the Nx Addon",
"description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration and the Nx React Addon.",
"file": "generated/packages/storybook/documents/migrate-webpack-final-react",
"itemList": [],
"isExternal": false,
"path": "/packages/storybook/documents/migrate-webpack-final-react",
"tags": [],
"originalFilePath": "shared/packages/storybook/migrate-webpack-final-react"
},
"/packages/storybook/documents/upgrade-storybook-v6-react": {
"id": "upgrade-storybook-v6-react",
"name": "React: Upgrading to Storybook 6",
"description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for React projects.",
"file": "generated/packages/storybook/documents/upgrade-storybook-v6-react",
"itemList": [],
"isExternal": false,
"path": "/packages/storybook/documents/upgrade-storybook-v6-react",
"tags": [],
"originalFilePath": "shared/packages/storybook/storybook-v6-react"
}
},
"root": "/packages/storybook",

88
docs/generated/packages-metadata.json
View File

@ -2308,17 +2308,6 @@
"tags": [],
"originalFilePath": "shared/packages/storybook/plugin-angular"
},
{
"id": "storybook-7-setup",
"name": "Storybook 7 setup guide",
"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.",
"file": "generated/packages/storybook/documents/storybook-7-setup",
"itemList": [],
"isExternal": false,
"path": "storybook/documents/storybook-7-setup",
"tags": [],
"originalFilePath": "shared/packages/storybook/storybook-7-setup"
},
{
"id": "best-practices",
"name": "Storybook best practices for making the most out of Nx",
@ -2330,6 +2319,17 @@
"tags": [],
"originalFilePath": "shared/packages/storybook/best-practices"
},
{
"id": "storybook-7-setup",
"name": "Storybook 7 overview",
"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.",
"file": "generated/packages/storybook/documents/storybook-7-setup",
"itemList": [],
"isExternal": false,
"path": "storybook/documents/storybook-7-setup",
"tags": [],
"originalFilePath": "shared/packages/storybook/storybook-7-setup"
},
{
"id": "configuring-storybook",
"name": "Configuring Storybook on Nx",
@ -2384,72 +2384,6 @@
"path": "storybook/documents/angular-configuring-styles",
"tags": [],
"originalFilePath": "shared/packages/storybook/angular-configuring-styles"
},
{
"id": "angular-storybook-targets",
"name": "Angular: Information about the Storybook targets",
"description": "This document explains the role of the storybook and build-storybook targets in Angular projects with a Storybook configuration, and specifically which executors are used for them.",
"file": "generated/packages/storybook/documents/angular-storybook-targets",
"itemList": [],
"isExternal": false,
"path": "storybook/documents/angular-storybook-targets",
"tags": [],
"originalFilePath": "shared/packages/storybook/angular-storybook-targets"
},
{
"id": "angular-browser-target",
"name": "Angular: The browserTarget",
"description": "This document explains the role of the browserTarget in Angular projects with a Storybook configuration, and how the Storybook executors use it.",
"file": "generated/packages/storybook/documents/angular-browser-target",
"itemList": [],
"isExternal": false,
"path": "storybook/documents/angular-browser-target",
"tags": [],
"originalFilePath": "shared/packages/storybook/angular-browser-target"
},
{
"id": "migrate-webpack-final-angular",
"name": "Angular: Storybook Migration to webpackFinal",
"description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration.",
"file": "generated/packages/storybook/documents/migrate-webpack-final-angular",
"itemList": [],
"isExternal": false,
"path": "storybook/documents/migrate-webpack-final-angular",
"tags": [],
"originalFilePath": "shared/packages/storybook/migrate-webpack-final-angular"
},
{
"id": "upgrade-storybook-v6-angular",
"name": "Angular: Upgrading to Storybook 6",
"description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for Angular projects.",
"file": "generated/packages/storybook/documents/upgrade-storybook-v6-angular",
"itemList": [],
"isExternal": false,
"path": "storybook/documents/upgrade-storybook-v6-angular",
"tags": [],
"originalFilePath": "shared/packages/storybook/storybook-v6-angular"
},
{
"id": "migrate-webpack-final-react",
"name": "React: Storybook Migration to webpackFinal and the Nx Addon",
"description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration and the Nx React Addon.",
"file": "generated/packages/storybook/documents/migrate-webpack-final-react",
"itemList": [],
"isExternal": false,
"path": "storybook/documents/migrate-webpack-final-react",
"tags": [],
"originalFilePath": "shared/packages/storybook/migrate-webpack-final-react"
},
{
"id": "upgrade-storybook-v6-react",
"name": "React: Upgrading to Storybook 6",
"description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for React projects.",
"file": "generated/packages/storybook/documents/upgrade-storybook-v6-react",
"itemList": [],
"isExternal": false,
"path": "storybook/documents/upgrade-storybook-v6-react",
"tags": [],
"originalFilePath": "shared/packages/storybook/storybook-v6-react"
}
],
"executors": [

2
docs/generated/packages/storybook/documents/angular-storybook-compodoc.md
View File

@ -141,7 +141,7 @@ Make sure you are on Nx version `>=14.1.8` and your `storybook` target is using
If you are using an older version of Nx, you can use [`nx migrate`](/packages/nx/documents/migrate) to migrate your codebase to a later version. Using `nx migrate` will also make sure to update your `storybook` and `build-storybook` targets to match the new format.
If you **are** on Nx `>=14.1.8` and you are still using the old executor (`@nx/storybook:storybook`), you can read our documentation about the [Angular Storybook targets](/packages/storybook/documents/angular-storybook-targets) to help you change your `storybook` and `build-storybook` targets across your workspace for your Angular projects using Storybook.
If you **are** on Nx `>=14.1.8` and you are still using the old executor (`@nx/storybook:storybook`), you can read our documentation about the [Angular Storybook targets](/deprecated/storybook/angular-storybook-targets) to help you change your `storybook` and `build-storybook` targets across your workspace for your Angular projects using Storybook.
{% /callout %}
### 4. Let Storybook know of the `documentation.json` file

39
docs/generated/packages/storybook/documents/custom-builder-configs.md
View File

@ -103,11 +103,7 @@ module.exports = {
...
async viteFinal(config, { configType }) {
return mergeConfig(config, {
plugins: [
viteTsConfigPaths({
root: '../../../',
}),
],
... <your config here>
});
},
};
@ -117,51 +113,32 @@ If you are using a global, root-level, `vite` configuration in your workspace, y
```ts {% fileName="apps/my-react-vite-app/.storybook/main.js" %}
const { mergeConfig } = require('vite');
const viteTsConfigPaths = require('vite-tsconfig-paths').default;
const rootMain = require('../../../.storybook/main');
module.exports = {
...
async viteFinal(config, { configType }) {
return mergeConfig(config, {
...((await rootMain.viteFinal(config, { configType })) ?? {}),
plugins: [
viteTsConfigPaths({
root: '../../../',
}),
],
...((await rootMain.viteFinal(config, { configType })) ?? {})
});
},
};
```
{% callout type="check" title="Don't forget the vite-tsconfig-paths plugin" %}
For Vite.js to work on monorepos, and specifically on Nx workspaces, you need to use the `'vite-tsconfig-paths'` plugin! Starting Storybook version 7, however, Storybook will automatically read your project's `vite.config.ts` file, so you don't need to add the plugin to your Storybook Vite configuration anymore. You will only have to specify the path to your project's `vite.config.ts` file in your project's Storybook configuration.
{% /callout %}
It's important to note here that for Vite.js to work on monorepos, and specifically on Nx workspaces, you need to use the `'vite-tsconfig-paths'` plugin, just like you must already do in your project's `vite.config.ts` file. Storybook does not read your project's Vite configuration automatically, so you have to manually add the plugin to your project's Storybook Vite configuration.
So, a full project-level `.storybook/main.js|ts` file for a Vite.js project would look like this:
```ts {% fileName="apps/my-react-vite-app/.storybook/main.js" %}
const { mergeConfig } = require('vite');
const viteTsConfigPaths = require('vite-tsconfig-paths').default;
module.exports = {
core: { builder: '@storybook/builder-vite' },
stories: [
'../src/app/**/*.stories.mdx',
'../src/app/**/*.stories.@(js|jsx|ts|tsx)',
],
stories: ['../src/app/**/*.stories.@(mdx|js|jsx|ts|tsx)'],
addons: ['@storybook/addon-essentials'],
framework: {
name: '@storybook/react-vite',
options: {},
},
async viteFinal(config, { configType }) {
return mergeConfig(config, {
plugins: [
viteTsConfigPaths({
root: '../../../',
}),
],
});
return mergeConfig(config, {});
},
};
```

8
docs/generated/packages/storybook/documents/overview-angular.md
View File

@ -145,9 +145,9 @@ Depending on your Cypress version, the file will end with `.spec.ts` or `.cy.ts`
## More Documentation
- [Set up Compodoc for Storybook on Nx](/packages/storybook/documents/angular-storybook-compodoc)
- [Information about the `storybook` targets](/packages/storybook/documents/angular-storybook-targets)
- [Information about the `storybook` targets](/deprecated/storybook/angular-storybook-targets)
- [Configuring styles and preprocessor options](/packages/storybook/documents/angular-configuring-styles)
- [The `browserTarget`](/packages/storybook/documents/angular-browser-target)
- [The `browserTarget`](/deprecated/storybook/angular-browser-target)
You can find all Storybook-related Nx topics [here](/packages#storybook).
@ -162,5 +162,5 @@ Here's more information on common migration scenarios for Storybook with Nx. For
#### Older migration scenarios
- [Upgrading to Storybook 6](/packages/storybook/documents/upgrade-storybook-v6-angular)
- [Migrate to the new Storybook `webpackFinal` config](/packages/storybook/documents/migrate-webpack-final-angular)
- [Upgrading to Storybook 6](/deprecated/storybook/upgrade-storybook-v6-angular)
- [Migrate to the new Storybook `webpackFinal` config](/deprecated/storybook/migrate-webpack-final-angular)

4
docs/generated/packages/storybook/documents/overview-react.md
View File

@ -167,5 +167,5 @@ Here's more information on common migration scenarios for Storybook with Nx. For
#### Older migration scenarios
- [Upgrading to Storybook 6](/packages/storybook/documents/upgrade-storybook-v6-react)
- [Migrate to the Nx React Storybook Addon](/packages/storybook/documents/migrate-webpack-final-react)
- [Upgrading to Storybook 6](/deprecated/storybook/upgrade-storybook-v6-react)
- [Migrate to the Nx React Storybook Addon](/deprecated/storybook/migrate-webpack-final-react)

50
docs/generated/packages/storybook/documents/overview.md
View File

@ -8,7 +8,7 @@ description: This is an overview page for the Storybook plugin in Nx. It explain
This guide will briefly walk you through using Storybook within an Nx workspace.
{% callout type="info" title="Storybook 7 by default" %}
Starting with Nx 16, Storybook 7 is going to be used by default to configure your projects.
Starting with Nx 16, Storybook 7 is used by default to configure your projects.
{% /callout %}
## Setting Up Storybook
@ -42,7 +42,7 @@ You can generate Storybook configuration for an individual project with this com
nx g @nx/storybook:configuration project-name
```
If you are NOT using a framework-specific generator, in the field `uiFramework` you must choose one of the following Storybook frameworks:
If you are NOT using a framework-specific generator (for [Angular](/packages/angular/generators/storybook-configuration), [React](/packages/react/generators/storybook-configuration), [React Native](/packages/react-native/generators/storybook-configuration)), in the field `uiFramework` you must choose one of the following Storybook frameworks:
- `@storybook/angular`
- `@storybook/html-webpack5`
@ -71,12 +71,32 @@ Choosing one of these frameworks will have the following effects on your workspa
4. Nx will generate a new Cypress e2e app for your project (if there isn't one already) to run against the Storybook instance.
Make sure to **use the framework-specific generators** if your project is using Angular, React, Next.js or React Native: [`@nrwl/angular:storybook-configuration`](/packages/angular/generators/storybook-configuration), [`@nrwl/react:storybook-configuration`](/packages/react/generators/storybook-configuration), [`@nrwl/react-native:storybook-configuration`](/packages/react-native/generators/storybook-configuration), for example:
Make sure to **use the framework-specific generators** if your project is using Angular, React, Next.js or React Native: [`@nrwl/angular:storybook-configuration`](/packages/angular/generators/storybook-configuration), [`@nrwl/react:storybook-configuration`](/packages/react/generators/storybook-configuration), [`@nrwl/react-native:storybook-configuration`](/packages/react-native/generators/storybook-configuration):
{% tabs %}
{% tab label="Angular" %}
```shell
nx g @nrwl/angular:storybook-configuration my-angular-project
nx g @nx/angular:storybook-configuration my-angular-project
```
{% /tab %}
{% tab label="React" %}
```shell
nx g @nx/react:storybook-configuration my-react-project
```
{% /tab %}
{% tab label="React Native" %}
```shell
nx g @nx/react-native:storybook-configuration my-react-native-project
```
{% /tab %}
{% /tabs %}
These framework-specific generators will also **generate stories** for you.
### Configure your project using TypeScript
@ -87,7 +107,7 @@ You can choose to configure your project using TypeScript instead of JavaScript.
nx g @nx/storybook:configuration project-name --tsConfiguration=true
```
[Here is the Storybook documentation](https://storybook.js.org/docs/react/configure/overview#configure-your-project-with-typescript) if you want to learn more.
[Here is the Storybook documentation](https://storybook.js.org/docs/react/configure/overview#configure-your-project-with-typescript) if you want to learn more about configuring your project with TypeScript.
### Running Storybook
@ -121,7 +141,7 @@ nx build-storybook project-name
When running the Nx Storybook generator, it'll configure the Nx workspace to be able to run Storybook seamlessly. It'll create a project specific Storybook configuration.
The project-specific Storybook configuration is pretty much similar what you would have for a non-Nx setup of Storybook. There's a `.storybook` folder within the project root folder.
The project-specific Storybook configuration is pretty much similar to what you would have for a non-Nx setup of Storybook. There's a `.storybook` folder within the project root folder.
```text
<project root>/
@ -137,7 +157,7 @@ The project-specific Storybook configuration is pretty much similar what you wou
### Using Addons
To register a [Storybook addon](https://storybook.js.org/addons/) for all storybook instances in your workspace:
To register a [Storybook addon](https://storybook.js.org/addons/) for all Storybook instances in your workspace:
1. In your project's `.storybook/main.js` file, in the `addons` array of the `module.exports` object, add the new addon:
@ -162,16 +182,20 @@ You can find dedicated information for React and Angular:
- [Set up Storybook for Angular Projects](/packages/storybook/documents/overview-angular)
- [Set up Storybook for React Projects](/packages/storybook/documents/overview-react)
### Migration Scenarios
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/)
- [Upgrading to Storybook 6](/deprecated/storybook/upgrade-storybook-v6-react)
- [Migrate to the Nx React Storybook Addon](/deprecated/storybook/migrate-webpack-final-react)
- [Storybook 7 migration generator](/packages/storybook/generators/migrate-7)
- [Storybook 7 setup guide](/packages/storybook/documents/storybook-7-setup)
You can find all Storybook-related Nx documentation [here](/packages#storybook).
For more on using Storybook, see the [official Storybook documentation](https://storybook.js.org/docs/basics/introduction/).
### Migration Scenarios
## Older documentation
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/)
- [Upgrading to Storybook 6](/packages/storybook/documents/upgrade-storybook-v6-react)
- [Migrate to the Nx React Storybook Addon](/packages/storybook/documents/migrate-webpack-final-react)
- [Storybook 7 migration generator](/packages/storybook/generators/migrate-7)
You can find older documentation for the `@nx/storybook` package in our [deprecated section](/deprecated/storybook).

108
docs/generated/packages/storybook/documents/storybook-7-setup.md
View File

@ -1,131 +1,39 @@
---
title: Storybook 7 setup guide
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.
title: Storybook 7 overview
description: This guide explains how you can set up Storybook version 7 in your Nx workspace. It also highlights the changes that you should expect to see when migrating from Storybook 6 to Storybook 7.
---
# Storybook 7 is here - and Nx is ready
{% callout type="info" title="Available on Nx v15.6" %}
This is a new feature available on Nx v15.6.0. If you are using an older version of Nx, please [upgrade](/packages/nx/documents/migrate).
{% /callout %}
Storybook 7 is a major release that brings a lot of new features and improvements. You can read more about it in the [Storybook 7.0.0 release article](https://storybook.js.org/blog/storybook-7-0/). Apart from the new features and improvements it introduces, 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.0.0 migration guide](https://storybook.js.org/docs/react/migration-guide).
Nx provides new generators that allow you to generate Storybook 7 configuration for your projects, by installing the correct dependencies and creating the corresponding version 7 configuration files. Nx also provides a [Storybook 7 migration generator](/packages/storybook/generators/migrate-7) that you can use to migrate your existing Storybook configuration to version 7.
So, let's see how to get started with Storybook 7 on Nx workspaces.
So, let's see how you can use Storybook 7 on your Nx workspace.
## Migrate your existing workspace to Storybook 7
If you already have Storybook configured in your Nx workspace, you can use the [Storybook 7 migrator generator](/packages/storybook/generators/migrate-7) to migrate your existing Storybook configuration to version 7.
## Setting Up Storybook 7 in a _new_ Nx Workspace
## Set up Storybook 7 in a _new_ Nx Workspace
In this guide we will see how to set up Storybook version 7 in a new Nx workspace, or a workspace that does NOT already have Storybook configured.
Please read the [`@nx/storybook` package overview](/packages/storybook) to see how you can configure Storybook in your Nx workspace.
{% callout type="warning" title="Migrating existing Storybook configuration" %}
For migrating your existing Nx workspace with existing Storybook configuration to use Storybook version 7, please refer to our [Storybook 7 migration generator](/packages/storybook/generators/migrate-7).
{% /callout %}
### Add the Storybook plugin
{% tabs %}
{% tab label="yarn" %}
```shell
yarn add -D @nx/storybook
```
{% /tab %}
{% tab label="npm" %}
```shell
npm install -D @nx/storybook
```
{% /tab %}
{% /tabs %}
## Using Storybook
### Generating Storybook Configuration
You can generate Storybook configuration for an individual project with this command:
```shell
nx g @nx/storybook:configuration project-name --uiFramework=@storybook/react-webpack5
```
Make sure to **use the framework-specific generators** if your project is using Angular, React, Next.js or React Native: [`@nx/angular:storybook-configuration`](/packages/angular/generators/storybook-configuration), [`@nx/react:storybook-configuration`](/packages/react/generators/storybook-configuration), [`@nx/react-native:storybook-configuration`](/packages/react-native/generators/storybook-configuration), for example:
```shell
nx g @nx/angular:storybook-configuration my-angular-project
```
If you are NOT using a framework-specific generator, in the field `uiFramework` you must choose one of the following Storybook frameworks:
- `@storybook/angular`
- `@storybook/html-webpack5`
- `@storybook/nextjs`
- `@storybook/preact-webpack5`
- `@storybook/react-webpack5`
- `@storybook/react-vite`
- `@storybook/server-webpack5`
- `@storybook/svelte-webpack5`
- `@storybook/svelte-vite`
- `@storybook/sveltekit`
- `@storybook/vue-webpack5`
- `@storybook/vue-vite`
- `@storybook/vue3-webpack5`
- `@storybook/vue3-vite`
- `@storybook/web-components-webpack5`
- `@storybook/web-components-vite`
In Storybook 7, [the `framework` field in `.storybook/main.js|ts` is mandatory](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-field-mandatory). You must choose one of the above frameworks when setting up your application.
If you are using one of the framework-specific generators, the generator will automatically choose the correct framework for you.
Choosing one of these frameworks will have the following effects on your workspace:
1. Nx will install all the required Storybook packages that go with it.
2. Nx will generate a root `.storybook` folder and a project-level `.storybook` folder (located under `libs/your-project/.storybook` or `apps/your-project/.storybook`) containing the essential configuration files for Storybook.
3. If you are working on an Angular, a React or a React Native project _and you use one of the framework-specific generators_, Nx will also generate stories for all the components in your project.
4. Nx will create new `targets` in your project's `project.json`, called `storybook` and `build-storybook`, containing all the necessary configuration to serve and build Storybook.
5. Nx will generate a new Cypress e2e app for your project (if there isn't one already) to run against the Storybook instance.
### Changes from the v6.5 Storybook configuration
## Changes from the v6.5 Storybook configuration
The Storybook configuration generated by Nx for Storybook 7 is very similar to the one generated for Storybook 6.5. Here are the new things that you should expect to see:
#### Changes in `.storybook/main.js|ts` file
### Changes in `.storybook/main.js|ts` file
- No longer set the `core` field which contains the `builder` option.
- The `framework` field is now mandatory, and it "replaces" the `builder` configuration. You can read more [in the Storybook docs](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-framework-field).
- Nx no longer adds the `webpackFinal` field to the `.storybook/main.js|ts` files. This is just for the sake of simplicity. You can still edit your webpack configuration by using the `webpackFinal` field, just as you can edit your Vite configuration by using the `viteFinal` field. You can read more about how to customize your webpack configuration [in the Storybook webpack docs](https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config), and you can read more about how to customize your Vite configuration [in the Storybook Vite docs](https://storybook.js.org/docs/react/builders/vite#configuration).
#### Changes in the `storybook` and `build-storybook` targets
### Changes in the `storybook` and `build-storybook` targets
- The `uiFramework` field is not needed any more, thus it is not set. Nx was using the `uiFramework` field to load any framework specific options for the Storybook builder. This is no longer needed, since the `framework` set in `.storybook/main.js|ts` takes care of that.
- More options from the Storybook CLI are now exposed in the executors. You can see these in the [`@nx/storybook:storybook`](/packages/storybook/executors/storybook) and [`@nx/storybook:build`](/packages/storybook/executors/build) executor schemas. You can read more about these options in the [Storybook 7 CLI docs](https://storybook.js.org/docs/7.0/react/api/cli-options). If there's an option you need to pass but it's not in the executor schema, you can always pass it, since the executors are just passing the options to the Storybook CLI.
## Use Storybook 7
You can now use Storybook 7! 🎉
```bash
npx nx build-storybook PROJECT_NAME
```
and
```bash
npx nx storybook PROJECT_NAME
```
## Report any issues and bugs
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).

2
docs/generated/packages/storybook/executors/build.json
View File

@ -134,7 +134,7 @@
},
"additionalProperties": true,
"required": ["configDir"],
"examplesFile": "---\ntitle: Storybook builder executor examples\ndescription: This page contains examples for the @nx/storybook:build executor.\n---\n\n`project.json`:\n\n```json\n//...\n\"ui\": {\n \"targets\": {\n //...\n \"build-storybook\": {\n \"executor\": \"@nx/storybook:build\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ui\",\n \"configDir\": \"libs/ui/.storybook\"\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n }\n}\n```\n\n```bash\nnx run ui:build-storybook\n```\n\n## Examples\n\n### For non-Angular projects\n\n{% tabs %}\n{% tab label=\"Working in docsMode\" %}\n\nYou can work in docs mode, building a documentation-only site, by setting the `docsMode` option to `true` and using the `@storybook/addon-docs` addon.\n\nRead more on the [Storybook documentation page for `addon-docs`](https://storybook.js.org/addons/@storybook/addon-docs).\n\n```json\n\"storybook\": {\n \"executor\": \"@nx/storybook:build\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"docsMode\": true\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n\n### For Angular projects\n\n{% tabs %}\n{% tab label=\"Default configuration\" %}\n\nThis is the default configuration for Angular projects using Storybook. You can see that it uses the native `@storybook/angular:build-storybook` executor. You can read more about the configuration options at the relevant [Storybook documentation page](https://storybook.js.org/docs/angular/get-started/install).\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n{% tab label=\"Changing the browserTarget\" %}\n\nYou can set the [`browserTarget`](/packages/storybook/documents/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build-storybook\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Adding styles\" %}\n\nYou can add paths to stylesheets to be included in the Storybook build by using the `styles` array. You can also add `stylePreprocessorOptions`, much like you would do in the Angular builder. You can read more in our guide about [styles and preprocessor options for Storybook](/packages/storybook/documents/angular-configuring-styles).\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build-storybook\",\n \"compodoc\": false,\n \"styles\": [\"some-styles.css\"],\n \"stylePreprocessorOptions\": {\n \"includePaths\": [\"some-style-paths\"]\n }\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n"
"examplesFile": "---\ntitle: Storybook builder executor examples\ndescription: This page contains examples for the @nx/storybook:build executor.\n---\n\n`project.json`:\n\n```json\n//...\n\"ui\": {\n \"targets\": {\n //...\n \"build-storybook\": {\n \"executor\": \"@nx/storybook:build\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ui\",\n \"configDir\": \"libs/ui/.storybook\"\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n }\n}\n```\n\n```bash\nnx run ui:build-storybook\n```\n\n## Examples\n\n### For non-Angular projects\n\n{% tabs %}\n{% tab label=\"Working in docsMode\" %}\n\nYou can work in docs mode, building a documentation-only site, by setting the `docsMode` option to `true` and using the `@storybook/addon-docs` addon.\n\nRead more on the [Storybook documentation page for `addon-docs`](https://storybook.js.org/addons/@storybook/addon-docs).\n\n```json\n\"storybook\": {\n \"executor\": \"@nx/storybook:build\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"docsMode\": true\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n\n### For Angular projects\n\n{% tabs %}\n{% tab label=\"Default configuration\" %}\n\nThis is the default configuration for Angular projects using Storybook. You can see that it uses the native `@storybook/angular:build-storybook` executor. You can read more about the configuration options at the relevant [Storybook documentation page](https://storybook.js.org/docs/angular/get-started/install).\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n{% tab label=\"Changing the browserTarget\" %}\n\nYou can set the [`browserTarget`](/deprecated/storybook/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build-storybook\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Adding styles\" %}\n\nYou can add paths to stylesheets to be included in the Storybook build by using the `styles` array. You can also add `stylePreprocessorOptions`, much like you would do in the Angular builder. You can read more in our guide about [styles and preprocessor options for Storybook](/packages/storybook/documents/angular-configuring-styles).\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build-storybook\",\n \"compodoc\": false,\n \"styles\": [\"some-styles.css\"],\n \"stylePreprocessorOptions\": {\n \"includePaths\": [\"some-style-paths\"]\n }\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n"
},
"description": "Build Storybook.",
"aliases": [],

2
docs/generated/packages/storybook/executors/storybook.json
View File

@ -84,7 +84,7 @@
"additionalProperties": true,
"definitions": {},
"required": ["configDir"],
"examplesFile": "---\ntitle: Storybook dev server executor examples\ndescription: This page contains examples for the @nx/storybook:storybook executor.\n---\n\n`project.json`:\n\n```json\n//...\n\"ui\": {\n \"targets\": {\n //...\n \"storybook\": {\n \"executor\": \"@nx/storybook:storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\"\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n },\n }\n}\n```\n\n```bash\nnx run ui:storybook\n```\n\n## Examples\n\n### For non-Angular projects\n\n{% tabs %}\n{% tab label=\"Working in docsMode\" %}\n\nYou can work in docs mode, building a documentation-only site, by setting the `docsMode` option to `true` and using the `@storybook/addon-docs` addon.\n\nRead more on the [Storybook documentation page for `addon-docs`](https://storybook.js.org/addons/@storybook/addon-docs).\n\n```json\n\"storybook\": {\n \"executor\": \"@nx/storybook:storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"docsMode\": true\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n\n### For Angular projects\n\n{% tabs %}\n{% tab label=\"Default configuration\" %}\n\nThis is the default configuration for Angular projects using Storybook. You can see that it uses the native `@storybook/angular:start-storybook` executor. You can read more about the configuration options at the relevant [Storybook documentation page](https://storybook.js.org/docs/angular/get-started/install).\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n{% tab label=\"Changing the browserTarget\" %}\n\nYou can set the [`browserTarget`](/packages/storybook/documents/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build-storybook\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n\n{% tab label=\"Adding styles\" %}\n\nYou can add paths to stylesheets to be included in the Storybook build by using the `styles` array. You can also add `stylePreprocessorOptions`, much like you would do in the Angular builder. You can read more in our guide about [styles and preprocessor options for Storybook](/packages/storybook/documents/angular-configuring-styles).\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false,\n \"styles\": [\"some-styles.css\"],\n \"stylePreprocessorOptions\": {\n \"includePaths\": [\"some-style-paths\"]\n }\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n\n{% /tabs %}\n"
"examplesFile": "---\ntitle: Storybook dev server executor examples\ndescription: This page contains examples for the @nx/storybook:storybook executor.\n---\n\n`project.json`:\n\n```json\n//...\n\"ui\": {\n \"targets\": {\n //...\n \"storybook\": {\n \"executor\": \"@nx/storybook:storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\"\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n },\n }\n}\n```\n\n```bash\nnx run ui:storybook\n```\n\n## Examples\n\n### For non-Angular projects\n\n{% tabs %}\n{% tab label=\"Working in docsMode\" %}\n\nYou can work in docs mode, building a documentation-only site, by setting the `docsMode` option to `true` and using the `@storybook/addon-docs` addon.\n\nRead more on the [Storybook documentation page for `addon-docs`](https://storybook.js.org/addons/@storybook/addon-docs).\n\n```json\n\"storybook\": {\n \"executor\": \"@nx/storybook:storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"docsMode\": true\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n\n### For Angular projects\n\n{% tabs %}\n{% tab label=\"Default configuration\" %}\n\nThis is the default configuration for Angular projects using Storybook. You can see that it uses the native `@storybook/angular:start-storybook` executor. You can read more about the configuration options at the relevant [Storybook documentation page](https://storybook.js.org/docs/angular/get-started/install).\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n{% tab label=\"Changing the browserTarget\" %}\n\nYou can set the [`browserTarget`](/deprecated/storybook/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build-storybook\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n\n{% tab label=\"Adding styles\" %}\n\nYou can add paths to stylesheets to be included in the Storybook build by using the `styles` array. You can also add `stylePreprocessorOptions`, much like you would do in the Angular builder. You can read more in our guide about [styles and preprocessor options for Storybook](/packages/storybook/documents/angular-configuring-styles).\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false,\n \"styles\": [\"some-styles.css\"],\n \"stylePreprocessorOptions\": {\n \"includePaths\": [\"some-style-paths\"]\n }\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n\n{% /tabs %}\n"
},
"description": "Serve Storybook.",
"aliases": [],

91
docs/map.json
View File

@ -626,6 +626,49 @@
"name": "globalImplicitDependencies",
"id": "global-implicit-dependencies",
"file": "shared/deprecated/global-implicit-dependencies"
},
{
"name": "Storybook deprecated docs",
"id": "storybook",
"description": "Deprecated @nx/storybook package documentation and guides.",
"itemList": [
{
"id": "angular-storybook-targets",
"name": "Angular: Information about the Storybook targets",
"description": "This document explains the role of the storybook and build-storybook targets in Angular projects with a Storybook configuration, and specifically which executors are used for them.",
"file": "shared/deprecated/storybook/angular-storybook-targets"
},
{
"id": "angular-browser-target",
"name": "Angular: The browserTarget",
"description": "This document explains the role of the browserTarget in Angular projects with a Storybook configuration, and how the Storybook executors use it.",
"file": "shared/deprecated/storybook/angular-browser-target"
},
{
"id": "migrate-webpack-final-angular",
"name": "Angular: Storybook Migration to webpackFinal",
"description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration.",
"file": "shared/deprecated/storybook/migrate-webpack-final-angular"
},
{
"id": "upgrade-storybook-v6-angular",
"name": "Angular: Upgrading to Storybook 6",
"description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for Angular projects.",
"file": "shared/deprecated/storybook/storybook-v6-angular"
},
{
"id": "migrate-webpack-final-react",
"name": "React: Storybook Migration to webpackFinal and the Nx Addon",
"description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration and the Nx React Addon.",
"file": "shared/deprecated/storybook/migrate-webpack-final-react"
},
{
"id": "upgrade-storybook-v6-react",
"name": "React: Upgrading to Storybook 6",
"description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for React projects.",
"file": "shared/deprecated/storybook/storybook-v6-react"
}
]
}
]
},
@ -1838,18 +1881,18 @@
"description": "This guide explains how to set up Storybook for Angular projects in your Nx workspace.",
"file": "shared/packages/storybook/plugin-angular"
},
{
"id": "storybook-7-setup",
"name": "Storybook 7 setup guide",
"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.",
"file": "shared/packages/storybook/storybook-7-setup"
},
{
"id": "best-practices",
"name": "Storybook best practices for making the most out of Nx",
"description": "The purpose of this guide is to help you set up Storybook in your Nx workspace so that you can get the most out of Nx and its powerful capabilities.",
"file": "shared/packages/storybook/best-practices"
},
{
"id": "storybook-7-setup",
"name": "Storybook 7 overview",
"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.",
"file": "shared/packages/storybook/storybook-7-setup"
},
{
"id": "configuring-storybook",
"name": "Configuring Storybook on Nx",
@ -1879,42 +1922,6 @@
"name": "Angular: Configuring styles and preprocessor options",
"description": "This document explains how to configure styles and preprocessor options in Angular projects with a Storybook configuration.",
"file": "shared/packages/storybook/angular-configuring-styles"
},
{
"id": "angular-storybook-targets",
"name": "Angular: Information about the Storybook targets",
"description": "This document explains the role of the storybook and build-storybook targets in Angular projects with a Storybook configuration, and specifically which executors are used for them.",
"file": "shared/packages/storybook/angular-storybook-targets"
},
{
"id": "angular-browser-target",
"name": "Angular: The browserTarget",
"description": "This document explains the role of the browserTarget in Angular projects with a Storybook configuration, and how the Storybook executors use it.",
"file": "shared/packages/storybook/angular-browser-target"
},
{
"id": "migrate-webpack-final-angular",
"name": "Angular: Storybook Migration to webpackFinal",
"description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration.",
"file": "shared/packages/storybook/migrate-webpack-final-angular"
},
{
"id": "upgrade-storybook-v6-angular",
"name": "Angular: Upgrading to Storybook 6",
"description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for Angular projects.",
"file": "shared/packages/storybook/storybook-v6-angular"
},
{
"id": "migrate-webpack-final-react",
"name": "React: Storybook Migration to webpackFinal and the Nx Addon",
"description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration and the Nx React Addon.",
"file": "shared/packages/storybook/migrate-webpack-final-react"
},
{
"id": "upgrade-storybook-v6-react",
"name": "React: Upgrading to Storybook 6",
"description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for React projects.",
"file": "shared/packages/storybook/storybook-v6-react"
}
]
},

0
docs/shared/packages/storybook/angular-browser-target.md → docs/shared/deprecated/storybook/angular-browser-target.md
View File

0
docs/shared/packages/storybook/angular-storybook-targets.md → docs/shared/deprecated/storybook/angular-storybook-targets.md
View File

0
docs/shared/packages/storybook/migrate-webpack-final-angular.md → docs/shared/deprecated/storybook/migrate-webpack-final-angular.md
View File

0
docs/shared/packages/storybook/migrate-webpack-final-react.md → docs/shared/deprecated/storybook/migrate-webpack-final-react.md
View File

0
docs/shared/packages/storybook/storybook-v6-angular.md → docs/shared/deprecated/storybook/storybook-v6-angular.md
View File

0
docs/shared/packages/storybook/storybook-v6-react.md → docs/shared/deprecated/storybook/storybook-v6-react.md
View File

2
docs/shared/packages/storybook/angular-storybook-compodoc.md
View File

@ -141,7 +141,7 @@ Make sure you are on Nx version `>=14.1.8` and your `storybook` target is using
If you are using an older version of Nx, you can use [`nx migrate`](/packages/nx/documents/migrate) to migrate your codebase to a later version. Using `nx migrate` will also make sure to update your `storybook` and `build-storybook` targets to match the new format.
If you **are** on Nx `>=14.1.8` and you are still using the old executor (`@nx/storybook:storybook`), you can read our documentation about the [Angular Storybook targets](/packages/storybook/documents/angular-storybook-targets) to help you change your `storybook` and `build-storybook` targets across your workspace for your Angular projects using Storybook.
If you **are** on Nx `>=14.1.8` and you are still using the old executor (`@nx/storybook:storybook`), you can read our documentation about the [Angular Storybook targets](/deprecated/storybook/angular-storybook-targets) to help you change your `storybook` and `build-storybook` targets across your workspace for your Angular projects using Storybook.
{% /callout %}
### 4. Let Storybook know of the `documentation.json` file

39
docs/shared/packages/storybook/custom-builder-configs.md
View File

@ -103,11 +103,7 @@ module.exports = {
...
async viteFinal(config, { configType }) {
return mergeConfig(config, {
plugins: [
viteTsConfigPaths({
root: '../../../',
}),
],
... <your config here>
});
},
};
@ -117,51 +113,32 @@ If you are using a global, root-level, `vite` configuration in your workspace, y
```ts {% fileName="apps/my-react-vite-app/.storybook/main.js" %}
const { mergeConfig } = require('vite');
const viteTsConfigPaths = require('vite-tsconfig-paths').default;
const rootMain = require('../../../.storybook/main');
module.exports = {
...
async viteFinal(config, { configType }) {
return mergeConfig(config, {
...((await rootMain.viteFinal(config, { configType })) ?? {}),
plugins: [
viteTsConfigPaths({
root: '../../../',
}),
],
...((await rootMain.viteFinal(config, { configType })) ?? {})
});
},
};
```
{% callout type="check" title="Don't forget the vite-tsconfig-paths plugin" %}
For Vite.js to work on monorepos, and specifically on Nx workspaces, you need to use the `'vite-tsconfig-paths'` plugin! Starting Storybook version 7, however, Storybook will automatically read your project's `vite.config.ts` file, so you don't need to add the plugin to your Storybook Vite configuration anymore. You will only have to specify the path to your project's `vite.config.ts` file in your project's Storybook configuration.
{% /callout %}
It's important to note here that for Vite.js to work on monorepos, and specifically on Nx workspaces, you need to use the `'vite-tsconfig-paths'` plugin, just like you must already do in your project's `vite.config.ts` file. Storybook does not read your project's Vite configuration automatically, so you have to manually add the plugin to your project's Storybook Vite configuration.
So, a full project-level `.storybook/main.js|ts` file for a Vite.js project would look like this:
```ts {% fileName="apps/my-react-vite-app/.storybook/main.js" %}
const { mergeConfig } = require('vite');
const viteTsConfigPaths = require('vite-tsconfig-paths').default;
module.exports = {
core: { builder: '@storybook/builder-vite' },
stories: [
'../src/app/**/*.stories.mdx',
'../src/app/**/*.stories.@(js|jsx|ts|tsx)',
],
stories: ['../src/app/**/*.stories.@(mdx|js|jsx|ts|tsx)'],
addons: ['@storybook/addon-essentials'],
framework: {
name: '@storybook/react-vite',
options: {},
},
async viteFinal(config, { configType }) {
return mergeConfig(config, {
plugins: [
viteTsConfigPaths({
root: '../../../',
}),
],
});
return mergeConfig(config, {});
},
};
```

8
docs/shared/packages/storybook/plugin-angular.md
View File

@ -145,9 +145,9 @@ Depending on your Cypress version, the file will end with `.spec.ts` or `.cy.ts`
## More Documentation
- [Set up Compodoc for Storybook on Nx](/packages/storybook/documents/angular-storybook-compodoc)
- [Information about the `storybook` targets](/packages/storybook/documents/angular-storybook-targets)
- [Information about the `storybook` targets](/deprecated/storybook/angular-storybook-targets)
- [Configuring styles and preprocessor options](/packages/storybook/documents/angular-configuring-styles)
- [The `browserTarget`](/packages/storybook/documents/angular-browser-target)
- [The `browserTarget`](/deprecated/storybook/angular-browser-target)
You can find all Storybook-related Nx topics [here](/packages#storybook).
@ -162,5 +162,5 @@ Here's more information on common migration scenarios for Storybook with Nx. For
#### Older migration scenarios
- [Upgrading to Storybook 6](/packages/storybook/documents/upgrade-storybook-v6-angular)
- [Migrate to the new Storybook `webpackFinal` config](/packages/storybook/documents/migrate-webpack-final-angular)
- [Upgrading to Storybook 6](/deprecated/storybook/upgrade-storybook-v6-angular)
- [Migrate to the new Storybook `webpackFinal` config](/deprecated/storybook/migrate-webpack-final-angular)

50
docs/shared/packages/storybook/plugin-overview.md
View File

@ -8,7 +8,7 @@ description: This is an overview page for the Storybook plugin in Nx. It explain
This guide will briefly walk you through using Storybook within an Nx workspace.
{% callout type="info" title="Storybook 7 by default" %}
Starting with Nx 16, Storybook 7 is going to be used by default to configure your projects.
Starting with Nx 16, Storybook 7 is used by default to configure your projects.
{% /callout %}
## Setting Up Storybook
@ -42,7 +42,7 @@ You can generate Storybook configuration for an individual project with this com
nx g @nx/storybook:configuration project-name
```
If you are NOT using a framework-specific generator, in the field `uiFramework` you must choose one of the following Storybook frameworks:
If you are NOT using a framework-specific generator (for [Angular](/packages/angular/generators/storybook-configuration), [React](/packages/react/generators/storybook-configuration), [React Native](/packages/react-native/generators/storybook-configuration)), in the field `uiFramework` you must choose one of the following Storybook frameworks:
- `@storybook/angular`
- `@storybook/html-webpack5`
@ -71,12 +71,32 @@ Choosing one of these frameworks will have the following effects on your workspa
4. Nx will generate a new Cypress e2e app for your project (if there isn't one already) to run against the Storybook instance.
Make sure to **use the framework-specific generators** if your project is using Angular, React, Next.js or React Native: [`@nrwl/angular:storybook-configuration`](/packages/angular/generators/storybook-configuration), [`@nrwl/react:storybook-configuration`](/packages/react/generators/storybook-configuration), [`@nrwl/react-native:storybook-configuration`](/packages/react-native/generators/storybook-configuration), for example:
Make sure to **use the framework-specific generators** if your project is using Angular, React, Next.js or React Native: [`@nrwl/angular:storybook-configuration`](/packages/angular/generators/storybook-configuration), [`@nrwl/react:storybook-configuration`](/packages/react/generators/storybook-configuration), [`@nrwl/react-native:storybook-configuration`](/packages/react-native/generators/storybook-configuration):
{% tabs %}
{% tab label="Angular" %}
```shell
nx g @nrwl/angular:storybook-configuration my-angular-project
nx g @nx/angular:storybook-configuration my-angular-project
```
{% /tab %}
{% tab label="React" %}
```shell
nx g @nx/react:storybook-configuration my-react-project
```
{% /tab %}
{% tab label="React Native" %}
```shell
nx g @nx/react-native:storybook-configuration my-react-native-project
```
{% /tab %}
{% /tabs %}
These framework-specific generators will also **generate stories** for you.
### Configure your project using TypeScript
@ -87,7 +107,7 @@ You can choose to configure your project using TypeScript instead of JavaScript.
nx g @nx/storybook:configuration project-name --tsConfiguration=true
```
[Here is the Storybook documentation](https://storybook.js.org/docs/react/configure/overview#configure-your-project-with-typescript) if you want to learn more.
[Here is the Storybook documentation](https://storybook.js.org/docs/react/configure/overview#configure-your-project-with-typescript) if you want to learn more about configuring your project with TypeScript.
### Running Storybook
@ -121,7 +141,7 @@ nx build-storybook project-name
When running the Nx Storybook generator, it'll configure the Nx workspace to be able to run Storybook seamlessly. It'll create a project specific Storybook configuration.
The project-specific Storybook configuration is pretty much similar what you would have for a non-Nx setup of Storybook. There's a `.storybook` folder within the project root folder.
The project-specific Storybook configuration is pretty much similar to what you would have for a non-Nx setup of Storybook. There's a `.storybook` folder within the project root folder.
```text
<project root>/
@ -137,7 +157,7 @@ The project-specific Storybook configuration is pretty much similar what you wou
### Using Addons
To register a [Storybook addon](https://storybook.js.org/addons/) for all storybook instances in your workspace:
To register a [Storybook addon](https://storybook.js.org/addons/) for all Storybook instances in your workspace:
1. In your project's `.storybook/main.js` file, in the `addons` array of the `module.exports` object, add the new addon:
@ -162,16 +182,20 @@ You can find dedicated information for React and Angular:
- [Set up Storybook for Angular Projects](/packages/storybook/documents/overview-angular)
- [Set up Storybook for React Projects](/packages/storybook/documents/overview-react)
### Migration Scenarios
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/)
- [Upgrading to Storybook 6](/deprecated/storybook/upgrade-storybook-v6-react)
- [Migrate to the Nx React Storybook Addon](/deprecated/storybook/migrate-webpack-final-react)
- [Storybook 7 migration generator](/packages/storybook/generators/migrate-7)
- [Storybook 7 setup guide](/packages/storybook/documents/storybook-7-setup)
You can find all Storybook-related Nx documentation [here](/packages#storybook).
For more on using Storybook, see the [official Storybook documentation](https://storybook.js.org/docs/basics/introduction/).
### Migration Scenarios
## Older documentation
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/)
- [Upgrading to Storybook 6](/packages/storybook/documents/upgrade-storybook-v6-react)
- [Migrate to the Nx React Storybook Addon](/packages/storybook/documents/migrate-webpack-final-react)
- [Storybook 7 migration generator](/packages/storybook/generators/migrate-7)
You can find older documentation for the `@nx/storybook` package in our [deprecated section](/deprecated/storybook).

4
docs/shared/packages/storybook/plugin-react.md
View File

@ -167,5 +167,5 @@ Here's more information on common migration scenarios for Storybook with Nx. For
#### Older migration scenarios
- [Upgrading to Storybook 6](/packages/storybook/documents/upgrade-storybook-v6-react)
- [Migrate to the Nx React Storybook Addon](/packages/storybook/documents/migrate-webpack-final-react)
- [Upgrading to Storybook 6](/deprecated/storybook/upgrade-storybook-v6-react)
- [Migrate to the Nx React Storybook Addon](/deprecated/storybook/migrate-webpack-final-react)

108
docs/shared/packages/storybook/storybook-7-setup.md
View File

@ -1,131 +1,39 @@
---
title: Storybook 7 setup guide
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.
title: Storybook 7 overview
description: This guide explains how you can set up Storybook version 7 in your Nx workspace. It also highlights the changes that you should expect to see when migrating from Storybook 6 to Storybook 7.
---
# Storybook 7 is here - and Nx is ready
{% callout type="info" title="Available on Nx v15.6" %}
This is a new feature available on Nx v15.6.0. If you are using an older version of Nx, please [upgrade](/packages/nx/documents/migrate).
{% /callout %}
Storybook 7 is a major release that brings a lot of new features and improvements. You can read more about it in the [Storybook 7.0.0 release article](https://storybook.js.org/blog/storybook-7-0/). Apart from the new features and improvements it introduces, 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.0.0 migration guide](https://storybook.js.org/docs/react/migration-guide).
Nx provides new generators that allow you to generate Storybook 7 configuration for your projects, by installing the correct dependencies and creating the corresponding version 7 configuration files. Nx also provides a [Storybook 7 migration generator](/packages/storybook/generators/migrate-7) that you can use to migrate your existing Storybook configuration to version 7.
So, let's see how to get started with Storybook 7 on Nx workspaces.
So, let's see how you can use Storybook 7 on your Nx workspace.
## Migrate your existing workspace to Storybook 7
If you already have Storybook configured in your Nx workspace, you can use the [Storybook 7 migrator generator](/packages/storybook/generators/migrate-7) to migrate your existing Storybook configuration to version 7.
## Setting Up Storybook 7 in a _new_ Nx Workspace
## Set up Storybook 7 in a _new_ Nx Workspace
In this guide we will see how to set up Storybook version 7 in a new Nx workspace, or a workspace that does NOT already have Storybook configured.
Please read the [`@nx/storybook` package overview](/packages/storybook) to see how you can configure Storybook in your Nx workspace.
{% callout type="warning" title="Migrating existing Storybook configuration" %}
For migrating your existing Nx workspace with existing Storybook configuration to use Storybook version 7, please refer to our [Storybook 7 migration generator](/packages/storybook/generators/migrate-7).
{% /callout %}
### Add the Storybook plugin
{% tabs %}
{% tab label="yarn" %}
```shell
yarn add -D @nx/storybook
```
{% /tab %}
{% tab label="npm" %}
```shell
npm install -D @nx/storybook
```
{% /tab %}
{% /tabs %}
## Using Storybook
### Generating Storybook Configuration
You can generate Storybook configuration for an individual project with this command:
```shell
nx g @nx/storybook:configuration project-name --uiFramework=@storybook/react-webpack5
```
Make sure to **use the framework-specific generators** if your project is using Angular, React, Next.js or React Native: [`@nx/angular:storybook-configuration`](/packages/angular/generators/storybook-configuration), [`@nx/react:storybook-configuration`](/packages/react/generators/storybook-configuration), [`@nx/react-native:storybook-configuration`](/packages/react-native/generators/storybook-configuration), for example:
```shell
nx g @nx/angular:storybook-configuration my-angular-project
```
If you are NOT using a framework-specific generator, in the field `uiFramework` you must choose one of the following Storybook frameworks:
- `@storybook/angular`
- `@storybook/html-webpack5`
- `@storybook/nextjs`
- `@storybook/preact-webpack5`
- `@storybook/react-webpack5`
- `@storybook/react-vite`
- `@storybook/server-webpack5`
- `@storybook/svelte-webpack5`
- `@storybook/svelte-vite`
- `@storybook/sveltekit`
- `@storybook/vue-webpack5`
- `@storybook/vue-vite`
- `@storybook/vue3-webpack5`
- `@storybook/vue3-vite`
- `@storybook/web-components-webpack5`
- `@storybook/web-components-vite`
In Storybook 7, [the `framework` field in `.storybook/main.js|ts` is mandatory](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-field-mandatory). You must choose one of the above frameworks when setting up your application.
If you are using one of the framework-specific generators, the generator will automatically choose the correct framework for you.
Choosing one of these frameworks will have the following effects on your workspace:
1. Nx will install all the required Storybook packages that go with it.
2. Nx will generate a root `.storybook` folder and a project-level `.storybook` folder (located under `libs/your-project/.storybook` or `apps/your-project/.storybook`) containing the essential configuration files for Storybook.
3. If you are working on an Angular, a React or a React Native project _and you use one of the framework-specific generators_, Nx will also generate stories for all the components in your project.
4. Nx will create new `targets` in your project's `project.json`, called `storybook` and `build-storybook`, containing all the necessary configuration to serve and build Storybook.
5. Nx will generate a new Cypress e2e app for your project (if there isn't one already) to run against the Storybook instance.
### Changes from the v6.5 Storybook configuration
## Changes from the v6.5 Storybook configuration
The Storybook configuration generated by Nx for Storybook 7 is very similar to the one generated for Storybook 6.5. Here are the new things that you should expect to see:
#### Changes in `.storybook/main.js|ts` file
### Changes in `.storybook/main.js|ts` file
- No longer set the `core` field which contains the `builder` option.
- The `framework` field is now mandatory, and it "replaces" the `builder` configuration. You can read more [in the Storybook docs](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-framework-field).
- Nx no longer adds the `webpackFinal` field to the `.storybook/main.js|ts` files. This is just for the sake of simplicity. You can still edit your webpack configuration by using the `webpackFinal` field, just as you can edit your Vite configuration by using the `viteFinal` field. You can read more about how to customize your webpack configuration [in the Storybook webpack docs](https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config), and you can read more about how to customize your Vite configuration [in the Storybook Vite docs](https://storybook.js.org/docs/react/builders/vite#configuration).
#### Changes in the `storybook` and `build-storybook` targets
### Changes in the `storybook` and `build-storybook` targets
- The `uiFramework` field is not needed any more, thus it is not set. Nx was using the `uiFramework` field to load any framework specific options for the Storybook builder. This is no longer needed, since the `framework` set in `.storybook/main.js|ts` takes care of that.
- More options from the Storybook CLI are now exposed in the executors. You can see these in the [`@nx/storybook:storybook`](/packages/storybook/executors/storybook) and [`@nx/storybook:build`](/packages/storybook/executors/build) executor schemas. You can read more about these options in the [Storybook 7 CLI docs](https://storybook.js.org/docs/7.0/react/api/cli-options). If there's an option you need to pass but it's not in the executor schema, you can always pass it, since the executors are just passing the options to the Storybook CLI.
## Use Storybook 7
You can now use Storybook 7! 🎉
```bash
npx nx build-storybook PROJECT_NAME
```
and
```bash
npx nx storybook PROJECT_NAME
```
## Report any issues and bugs
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).

24
nx-dev/nx-dev/redirect-rules.config.js
View File

@ -509,19 +509,31 @@ const packagesDocuments = {
'/storybook/angular-storybook-compodoc':
'/packages/storybook/documents/angular-storybook-compodoc',
'/storybook/angular-storybook-targets':
'/packages/storybook/documents/angular-storybook-targets',
'/deprecated/storybook/angular-storybook-targets',
'/packages/storybook/documents/angular-storybook-targets':
'/deprecated/storybook/angular-storybook-targets',
'/storybook/angular-configuring-styles':
'/packages/storybook/documents/angular-configuring-styles',
'/storybook/angular-browser-target':
'/packages/storybook/documents/angular-browser-target',
'/deprecated/storybook/angular-browser-target',
'/storybook/migrate-webpack-final-angular':
'/packages/storybook/documents/migrate-webpack-final-angular',
'/deprecated/storybook/migrate-webpack-final-angular',
'/storybook/upgrade-storybook-v6-angular':
'/packages/storybook/documents/upgrade-storybook-v6-angular',
'/deprecated/storybook/upgrade-storybook-v6-angular',
'/storybook/migrate-webpack-final-react':
'/packages/storybook/documents/migrate-webpack-final-react',
'/deprecated/storybook/migrate-webpack-final-react',
'/storybook/upgrade-storybook-v6-react':
'/packages/storybook/documents/upgrade-storybook-v6-react',
'/deprecated/storybook/upgrade-storybook-v6-react',
'/packages/storybook/documents/angular-browser-target':
'/deprecated/storybook/angular-browser-target',
'/packages/storybook/documents/migrate-webpack-final-angular':
'/deprecated/storybook/migrate-webpack-final-angular',
'/packages/storybook/documents/upgrade-storybook-v6-angular':
'/deprecated/storybook/upgrade-storybook-v6-angular',
'/packages/storybook/documents/migrate-webpack-final-react':
'/deprecated/storybook/migrate-webpack-final-react',
'/packages/storybook/documents/upgrade-storybook-v6-react':
'/deprecated/storybook/upgrade-storybook-v6-react',
'/packages/storybook/documents/migrate-storybook-7':
'/packages/storybook/generators/migrate-7',
'/linter/eslint-plugin-nx': '/packages/linter/documents/eslint-plugin-nx',

2
packages/storybook/docs/build-storybook-executor-examples.md
View File

@ -89,7 +89,7 @@ This is the default configuration for Angular projects using Storybook. You can
{% /tab %}
{% tab label="Changing the browserTarget" %}
You can set the [`browserTarget`](/packages/storybook/documents/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.
You can set the [`browserTarget`](/deprecated/storybook/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.
```json
"build-storybook": {

2
packages/storybook/docs/storybook-executor-examples.md
View File

@ -88,7 +88,7 @@ This is the default configuration for Angular projects using Storybook. You can
{% /tab %}
{% tab label="Changing the browserTarget" %}
You can set the [`browserTarget`](/packages/storybook/documents/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.
You can set the [`browserTarget`](/deprecated/storybook/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.
```json
"storybook": {