From 32c176c359196356dd38a37ee04eea43a086a894 Mon Sep 17 00:00:00 2001 From: Katerina Skroumpelou Date: Fri, 5 May 2023 17:53:46 +0300 Subject: [PATCH] docs(storybook): rearrange docs and more some to deprecated (#16805) --- docs/generated/manifests/menus.json | 222 +++++++++++++----- docs/generated/manifests/nx.json | 202 ++++++++++++++++ docs/generated/manifests/packages.json | 88 +------ docs/generated/packages-metadata.json | 88 +------ .../documents/angular-storybook-compodoc.md | 2 +- .../documents/custom-builder-configs.md | 39 +-- .../storybook/documents/overview-angular.md | 8 +- .../storybook/documents/overview-react.md | 4 +- .../packages/storybook/documents/overview.md | 50 +++- .../storybook/documents/storybook-7-setup.md | 108 +-------- .../packages/storybook/executors/build.json | 2 +- .../storybook/executors/storybook.json | 2 +- docs/map.json | 91 +++---- .../storybook/angular-browser-target.md | 0 .../storybook/angular-storybook-targets.md | 0 .../migrate-webpack-final-angular.md | 0 .../storybook/migrate-webpack-final-react.md | 0 .../storybook/storybook-v6-angular.md | 0 .../storybook/storybook-v6-react.md | 0 .../storybook/angular-storybook-compodoc.md | 2 +- .../storybook/custom-builder-configs.md | 39 +-- .../packages/storybook/plugin-angular.md | 8 +- .../packages/storybook/plugin-overview.md | 50 +++- .../shared/packages/storybook/plugin-react.md | 4 +- .../packages/storybook/storybook-7-setup.md | 108 +-------- nx-dev/nx-dev/redirect-rules.config.js | 24 +- .../docs/build-storybook-executor-examples.md | 2 +- .../docs/storybook-executor-examples.md | 2 +- 28 files changed, 583 insertions(+), 562 deletions(-) rename docs/shared/{packages => deprecated}/storybook/angular-browser-target.md (100%) rename docs/shared/{packages => deprecated}/storybook/angular-storybook-targets.md (100%) rename docs/shared/{packages => deprecated}/storybook/migrate-webpack-final-angular.md (100%) rename docs/shared/{packages => deprecated}/storybook/migrate-webpack-final-react.md (100%) rename docs/shared/{packages => deprecated}/storybook/storybook-v6-angular.md (100%) rename docs/shared/{packages => deprecated}/storybook/storybook-v6-react.md (100%) diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index 302d336a490a7..780e25c4d6ac2 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -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, diff --git a/docs/generated/manifests/nx.json b/docs/generated/manifests/nx.json index 44d4fddd96cb1..1b4a6fe10678d 100644 --- a/docs/generated/manifests/nx.json +++ b/docs/generated/manifests/nx.json @@ -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", diff --git a/docs/generated/manifests/packages.json b/docs/generated/manifests/packages.json index 7a2c691edc2bf..624e20a760302 100644 --- a/docs/generated/manifests/packages.json +++ b/docs/generated/manifests/packages.json @@ -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", diff --git a/docs/generated/packages-metadata.json b/docs/generated/packages-metadata.json index 18a63c5124f0e..2eec66faf1184 100644 --- a/docs/generated/packages-metadata.json +++ b/docs/generated/packages-metadata.json @@ -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": [ diff --git a/docs/generated/packages/storybook/documents/angular-storybook-compodoc.md b/docs/generated/packages/storybook/documents/angular-storybook-compodoc.md index 9ba52a8ff1c4d..2243d8abdff48 100644 --- a/docs/generated/packages/storybook/documents/angular-storybook-compodoc.md +++ b/docs/generated/packages/storybook/documents/angular-storybook-compodoc.md @@ -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 diff --git a/docs/generated/packages/storybook/documents/custom-builder-configs.md b/docs/generated/packages/storybook/documents/custom-builder-configs.md index 64bd24064bce5..d9012829bdf7b 100644 --- a/docs/generated/packages/storybook/documents/custom-builder-configs.md +++ b/docs/generated/packages/storybook/documents/custom-builder-configs.md @@ -103,11 +103,7 @@ module.exports = { ... async viteFinal(config, { configType }) { return mergeConfig(config, { - plugins: [ - viteTsConfigPaths({ - root: '../../../', - }), - ], + ... }); }, }; @@ -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, {}); }, }; ``` diff --git a/docs/generated/packages/storybook/documents/overview-angular.md b/docs/generated/packages/storybook/documents/overview-angular.md index 6745532ca332a..24a1c243571a9 100644 --- a/docs/generated/packages/storybook/documents/overview-angular.md +++ b/docs/generated/packages/storybook/documents/overview-angular.md @@ -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) diff --git a/docs/generated/packages/storybook/documents/overview-react.md b/docs/generated/packages/storybook/documents/overview-react.md index 7f1056e356a98..523bd77de827f 100644 --- a/docs/generated/packages/storybook/documents/overview-react.md +++ b/docs/generated/packages/storybook/documents/overview-react.md @@ -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) diff --git a/docs/generated/packages/storybook/documents/overview.md b/docs/generated/packages/storybook/documents/overview.md index 4c0dc0d106467..c5bb6761c2f68 100644 --- a/docs/generated/packages/storybook/documents/overview.md +++ b/docs/generated/packages/storybook/documents/overview.md @@ -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 @nx/angular:storybook-configuration my-angular-project +``` + +{% /tab %} +{% tab label="React" %} ```shell -nx g @nrwl/angular:storybook-configuration my-angular-project +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 / @@ -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 - -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/) +## Older documentation -- [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). diff --git a/docs/generated/packages/storybook/documents/storybook-7-setup.md b/docs/generated/packages/storybook/documents/storybook-7-setup.md index f3fee7b70ac6e..747ebf37ac8c3 100644 --- a/docs/generated/packages/storybook/documents/storybook-7-setup.md +++ b/docs/generated/packages/storybook/documents/storybook-7-setup.md @@ -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 - -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. - -{% 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 -``` +## Set up Storybook 7 in a _new_ Nx Workspace -If you are NOT using a framework-specific generator, in the field `uiFramework` you must choose one of the following Storybook frameworks: +Please read the [`@nx/storybook` package overview](/packages/storybook) to see how you can configure Storybook in your Nx workspace. -- `@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). diff --git a/docs/generated/packages/storybook/executors/build.json b/docs/generated/packages/storybook/executors/build.json index 48e0b52bb7423..103a5ac9becc8 100644 --- a/docs/generated/packages/storybook/executors/build.json +++ b/docs/generated/packages/storybook/executors/build.json @@ -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": [], diff --git a/docs/generated/packages/storybook/executors/storybook.json b/docs/generated/packages/storybook/executors/storybook.json index 700097d8d1900..333a58d62eb38 100644 --- a/docs/generated/packages/storybook/executors/storybook.json +++ b/docs/generated/packages/storybook/executors/storybook.json @@ -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": [], diff --git a/docs/map.json b/docs/map.json index 4a56c9a182c04..fead52c1819a6 100644 --- a/docs/map.json +++ b/docs/map.json @@ -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" } ] }, diff --git a/docs/shared/packages/storybook/angular-browser-target.md b/docs/shared/deprecated/storybook/angular-browser-target.md similarity index 100% rename from docs/shared/packages/storybook/angular-browser-target.md rename to docs/shared/deprecated/storybook/angular-browser-target.md diff --git a/docs/shared/packages/storybook/angular-storybook-targets.md b/docs/shared/deprecated/storybook/angular-storybook-targets.md similarity index 100% rename from docs/shared/packages/storybook/angular-storybook-targets.md rename to docs/shared/deprecated/storybook/angular-storybook-targets.md diff --git a/docs/shared/packages/storybook/migrate-webpack-final-angular.md b/docs/shared/deprecated/storybook/migrate-webpack-final-angular.md similarity index 100% rename from docs/shared/packages/storybook/migrate-webpack-final-angular.md rename to docs/shared/deprecated/storybook/migrate-webpack-final-angular.md diff --git a/docs/shared/packages/storybook/migrate-webpack-final-react.md b/docs/shared/deprecated/storybook/migrate-webpack-final-react.md similarity index 100% rename from docs/shared/packages/storybook/migrate-webpack-final-react.md rename to docs/shared/deprecated/storybook/migrate-webpack-final-react.md diff --git a/docs/shared/packages/storybook/storybook-v6-angular.md b/docs/shared/deprecated/storybook/storybook-v6-angular.md similarity index 100% rename from docs/shared/packages/storybook/storybook-v6-angular.md rename to docs/shared/deprecated/storybook/storybook-v6-angular.md diff --git a/docs/shared/packages/storybook/storybook-v6-react.md b/docs/shared/deprecated/storybook/storybook-v6-react.md similarity index 100% rename from docs/shared/packages/storybook/storybook-v6-react.md rename to docs/shared/deprecated/storybook/storybook-v6-react.md diff --git a/docs/shared/packages/storybook/angular-storybook-compodoc.md b/docs/shared/packages/storybook/angular-storybook-compodoc.md index 9ba52a8ff1c4d..2243d8abdff48 100644 --- a/docs/shared/packages/storybook/angular-storybook-compodoc.md +++ b/docs/shared/packages/storybook/angular-storybook-compodoc.md @@ -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 diff --git a/docs/shared/packages/storybook/custom-builder-configs.md b/docs/shared/packages/storybook/custom-builder-configs.md index 64bd24064bce5..d9012829bdf7b 100644 --- a/docs/shared/packages/storybook/custom-builder-configs.md +++ b/docs/shared/packages/storybook/custom-builder-configs.md @@ -103,11 +103,7 @@ module.exports = { ... async viteFinal(config, { configType }) { return mergeConfig(config, { - plugins: [ - viteTsConfigPaths({ - root: '../../../', - }), - ], + ... }); }, }; @@ -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, {}); }, }; ``` diff --git a/docs/shared/packages/storybook/plugin-angular.md b/docs/shared/packages/storybook/plugin-angular.md index 6745532ca332a..24a1c243571a9 100644 --- a/docs/shared/packages/storybook/plugin-angular.md +++ b/docs/shared/packages/storybook/plugin-angular.md @@ -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) diff --git a/docs/shared/packages/storybook/plugin-overview.md b/docs/shared/packages/storybook/plugin-overview.md index 4c0dc0d106467..c5bb6761c2f68 100644 --- a/docs/shared/packages/storybook/plugin-overview.md +++ b/docs/shared/packages/storybook/plugin-overview.md @@ -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 @nx/angular:storybook-configuration my-angular-project +``` + +{% /tab %} +{% tab label="React" %} ```shell -nx g @nrwl/angular:storybook-configuration my-angular-project +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 / @@ -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 - -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/) +## Older documentation -- [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). diff --git a/docs/shared/packages/storybook/plugin-react.md b/docs/shared/packages/storybook/plugin-react.md index 7f1056e356a98..523bd77de827f 100644 --- a/docs/shared/packages/storybook/plugin-react.md +++ b/docs/shared/packages/storybook/plugin-react.md @@ -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) diff --git a/docs/shared/packages/storybook/storybook-7-setup.md b/docs/shared/packages/storybook/storybook-7-setup.md index f3fee7b70ac6e..747ebf37ac8c3 100644 --- a/docs/shared/packages/storybook/storybook-7-setup.md +++ b/docs/shared/packages/storybook/storybook-7-setup.md @@ -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 - -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. - -{% 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 -``` +## Set up Storybook 7 in a _new_ Nx Workspace -If you are NOT using a framework-specific generator, in the field `uiFramework` you must choose one of the following Storybook frameworks: +Please read the [`@nx/storybook` package overview](/packages/storybook) to see how you can configure Storybook in your Nx workspace. -- `@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). diff --git a/nx-dev/nx-dev/redirect-rules.config.js b/nx-dev/nx-dev/redirect-rules.config.js index 1ea6481f66d43..41c924d83f285 100644 --- a/nx-dev/nx-dev/redirect-rules.config.js +++ b/nx-dev/nx-dev/redirect-rules.config.js @@ -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', diff --git a/packages/storybook/docs/build-storybook-executor-examples.md b/packages/storybook/docs/build-storybook-executor-examples.md index b8f2219f7eb88..acbe91e9f5851 100644 --- a/packages/storybook/docs/build-storybook-executor-examples.md +++ b/packages/storybook/docs/build-storybook-executor-examples.md @@ -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": { diff --git a/packages/storybook/docs/storybook-executor-examples.md b/packages/storybook/docs/storybook-executor-examples.md index 289b6c17ad6ea..aa1b91329b08b 100644 --- a/packages/storybook/docs/storybook-executor-examples.md +++ b/packages/storybook/docs/storybook-executor-examples.md @@ -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": {