From 7f519d151a87f2d765d96fd7ac540d27b4045bc0 Mon Sep 17 00:00:00 2001 From: Katerina Skroumpelou Date: Mon, 21 Aug 2023 18:44:29 +0300 Subject: [PATCH] docs(storybook): rearrange recipes and docs (#18732) --- docs/generated/manifests/menus.json | 256 ++++++++++++---- docs/generated/manifests/nx.json | 280 ++++++++++++++++-- docs/generated/manifests/packages.json | 88 ------ docs/generated/manifests/tags.json | 68 ++++- docs/generated/packages-metadata.json | 88 ------ .../packages/angular/generators/stories.json | 2 +- .../generators/storybook-configuration.json | 2 +- .../packages/cypress/documents/overview.md | 2 +- .../packages/react/documents/overview.md | 2 +- .../packages/react/generators/stories.json | 2 +- .../generators/storybook-configuration.json | 2 +- .../documents/angular-browser-target.md | 77 ----- .../documents/angular-storybook-targets.md | 28 -- .../storybook/documents/best-practices.md | 8 +- .../migrate-webpack-final-angular.md | 151 ---------- .../documents/migrate-webpack-final-react.md | 216 -------------- .../storybook/documents/overview-angular.md | 166 ----------- .../storybook/documents/overview-react.md | 171 ----------- .../packages/storybook/documents/overview.md | 14 +- .../documents/storybook-interaction-tests.md | 138 --------- .../documents/upgrade-storybook-v6-angular.md | 204 ------------- .../documents/upgrade-storybook-v6-react.md | 201 ------------- .../packages/storybook/executors/build.json | 2 +- .../storybook/executors/storybook.json | 2 +- docs/map.json | 115 +++---- .../angular-standalone.md | 2 +- .../storybook/angular-browser-target.md | 2 +- .../storybook/angular-storybook-targets.md | 4 +- .../migrate-webpack-final-angular.md | 2 +- .../storybook/migrate-webpack-final-react.md | 2 +- .../shared/packages/cypress/cypress-plugin.md | 2 +- docs/shared/packages/react/react-plugin.md | 2 +- .../storybook/angular-configuring-styles.md | 68 ----- .../storybook/angular-storybook-compodoc.md | 192 ------------ .../packages/storybook/best-practices.md | 8 +- .../storybook/configuring-storybook.md | 49 --- .../storybook/custom-builder-configs.md | 144 --------- .../packages/storybook/plugin-overview.md | 14 +- .../storybook/storybook-composition-setup.md | 207 ------------- .../react-standalone.md | 2 +- .../storybook}/angular-configuring-styles.md | 2 +- .../storybook}/angular-storybook-compodoc.md | 8 +- .../storybook/button-docs.png | Bin .../storybook/button-size-input.png | Bin .../storybook}/configuring-storybook.md | 2 +- .../storybook}/custom-builder-configs.md | 0 .../storybook/interaction-tests.md | 0 .../{ => storybook}/one-storybook-for-all.md | 5 + .../one-storybook-per-scope.md | 5 + .../one-storybook-with-composition.md | 9 +- .../storybook/plugin-angular.md | 4 +- .../storybook/plugin-react.md | 0 .../storybook}/storybook-composition-setup.md | 0 docs/shared/reference/sitemap.md | 16 +- nx-dev/nx-dev/redirect-rules.js | 16 + packages/angular/docs/stories-examples.md | 2 +- .../docs/storybook-configuration-examples.md | 2 +- .../storybook-configuration.spec.ts.snap | 2 +- packages/react/docs/stories-examples.md | 2 +- .../docs/storybook-configuration-examples.md | 2 +- .../__snapshots__/configuration.spec.ts.snap | 2 +- .../docs/build-storybook-executor-examples.md | 2 +- .../docs/storybook-executor-examples.md | 2 +- .../configuration-nested.spec.ts.snap | 4 +- .../__snapshots__/configuration.spec.ts.snap | 26 +- .../.storybook/main.ts__tmpl__ | 4 +- .../project-files/.storybook/main.js__tmpl__ | 4 +- 67 files changed, 692 insertions(+), 2414 deletions(-) delete mode 100644 docs/generated/packages/storybook/documents/angular-browser-target.md delete mode 100644 docs/generated/packages/storybook/documents/angular-storybook-targets.md delete mode 100644 docs/generated/packages/storybook/documents/migrate-webpack-final-angular.md delete mode 100644 docs/generated/packages/storybook/documents/migrate-webpack-final-react.md delete mode 100644 docs/generated/packages/storybook/documents/overview-angular.md delete mode 100644 docs/generated/packages/storybook/documents/overview-react.md delete mode 100644 docs/generated/packages/storybook/documents/storybook-interaction-tests.md delete mode 100644 docs/generated/packages/storybook/documents/upgrade-storybook-v6-angular.md delete mode 100644 docs/generated/packages/storybook/documents/upgrade-storybook-v6-react.md delete mode 100644 docs/shared/packages/storybook/angular-configuring-styles.md delete mode 100644 docs/shared/packages/storybook/angular-storybook-compodoc.md delete mode 100644 docs/shared/packages/storybook/configuring-storybook.md delete mode 100644 docs/shared/packages/storybook/custom-builder-configs.md delete mode 100644 docs/shared/packages/storybook/storybook-composition-setup.md rename docs/{generated/packages/storybook/documents => shared/recipes/storybook}/angular-configuring-styles.md (97%) rename docs/{generated/packages/storybook/documents => shared/recipes/storybook}/angular-storybook-compodoc.md (96%) rename docs/shared/{packages => recipes}/storybook/button-docs.png (100%) rename docs/shared/{packages => recipes}/storybook/button-size-input.png (100%) rename docs/{generated/packages/storybook/documents => shared/recipes/storybook}/configuring-storybook.md (98%) rename docs/{generated/packages/storybook/documents => shared/recipes/storybook}/custom-builder-configs.md (100%) rename docs/shared/{packages => recipes}/storybook/interaction-tests.md (100%) rename docs/shared/recipes/{ => storybook}/one-storybook-for-all.md (95%) rename docs/shared/recipes/{ => storybook}/one-storybook-per-scope.md (96%) rename docs/shared/recipes/{ => storybook}/one-storybook-with-composition.md (89%) rename docs/shared/{packages => recipes}/storybook/plugin-angular.md (96%) rename docs/shared/{packages => recipes}/storybook/plugin-react.md (100%) rename docs/{generated/packages/storybook/documents => shared/recipes/storybook}/storybook-composition-setup.md (100%) diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index bd54cc163b..38ae5e57ad 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -1898,6 +1898,30 @@ "id": "storybook", "isExternal": false, "children": [ + { + "name": "Set up Storybook for React Projects", + "path": "/recipes/storybook/overview-react", + "id": "overview-react", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, + { + "name": "Set up Storybook for Angular Projects", + "path": "/recipes/storybook/overview-angular", + "id": "overview-angular", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, + { + "name": "Configuring Storybook on Nx", + "path": "/recipes/storybook/configuring-storybook", + "id": "configuring-storybook", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, { "name": "One main Storybook instance for all projects", "path": "/recipes/storybook/one-storybook-for-all", @@ -1921,6 +1945,46 @@ "isExternal": false, "children": [], "disableCollapsible": false + }, + { + "name": "How to configure Webpack and Vite for Storybook", + "path": "/recipes/storybook/custom-builder-configs", + "id": "custom-builder-configs", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, + { + "name": "Setting up Storybook Interaction Tests with Nx", + "path": "/recipes/storybook/storybook-interaction-tests", + "id": "storybook-interaction-tests", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, + { + "name": "Setting up Storybook Composition with Nx", + "path": "/recipes/storybook/storybook-composition-setup", + "id": "storybook-composition-setup", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, + { + "name": "Angular: Set up Compodoc for Storybook on Nx", + "path": "/recipes/storybook/angular-storybook-compodoc", + "id": "angular-storybook-compodoc", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, + { + "name": "Angular: Configuring styles and preprocessor options", + "path": "/recipes/storybook/angular-configuring-styles", + "id": "angular-configuring-styles", + "isExternal": false, + "children": [], + "disableCollapsible": false } ], "disableCollapsible": false @@ -2842,6 +2906,30 @@ "id": "storybook", "isExternal": false, "children": [ + { + "name": "Set up Storybook for React Projects", + "path": "/recipes/storybook/overview-react", + "id": "overview-react", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, + { + "name": "Set up Storybook for Angular Projects", + "path": "/recipes/storybook/overview-angular", + "id": "overview-angular", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, + { + "name": "Configuring Storybook on Nx", + "path": "/recipes/storybook/configuring-storybook", + "id": "configuring-storybook", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, { "name": "One main Storybook instance for all projects", "path": "/recipes/storybook/one-storybook-for-all", @@ -2865,10 +2953,74 @@ "isExternal": false, "children": [], "disableCollapsible": false + }, + { + "name": "How to configure Webpack and Vite for Storybook", + "path": "/recipes/storybook/custom-builder-configs", + "id": "custom-builder-configs", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, + { + "name": "Setting up Storybook Interaction Tests with Nx", + "path": "/recipes/storybook/storybook-interaction-tests", + "id": "storybook-interaction-tests", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, + { + "name": "Setting up Storybook Composition with Nx", + "path": "/recipes/storybook/storybook-composition-setup", + "id": "storybook-composition-setup", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, + { + "name": "Angular: Set up Compodoc for Storybook on Nx", + "path": "/recipes/storybook/angular-storybook-compodoc", + "id": "angular-storybook-compodoc", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, + { + "name": "Angular: Configuring styles and preprocessor options", + "path": "/recipes/storybook/angular-configuring-styles", + "id": "angular-configuring-styles", + "isExternal": false, + "children": [], + "disableCollapsible": false } ], "disableCollapsible": false }, + { + "name": "Set up Storybook for React Projects", + "path": "/recipes/storybook/overview-react", + "id": "overview-react", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, + { + "name": "Set up Storybook for Angular Projects", + "path": "/recipes/storybook/overview-angular", + "id": "overview-angular", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, + { + "name": "Configuring Storybook on Nx", + "path": "/recipes/storybook/configuring-storybook", + "id": "configuring-storybook", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, { "name": "One main Storybook instance for all projects", "path": "/recipes/storybook/one-storybook-for-all", @@ -2893,6 +3045,46 @@ "children": [], "disableCollapsible": false }, + { + "name": "How to configure Webpack and Vite for Storybook", + "path": "/recipes/storybook/custom-builder-configs", + "id": "custom-builder-configs", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, + { + "name": "Setting up Storybook Interaction Tests with Nx", + "path": "/recipes/storybook/storybook-interaction-tests", + "id": "storybook-interaction-tests", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, + { + "name": "Setting up Storybook Composition with Nx", + "path": "/recipes/storybook/storybook-composition-setup", + "id": "storybook-composition-setup", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, + { + "name": "Angular: Set up Compodoc for Storybook on Nx", + "path": "/recipes/storybook/angular-storybook-compodoc", + "id": "angular-storybook-compodoc", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, + { + "name": "Angular: Configuring styles and preprocessor options", + "path": "/recipes/storybook/angular-configuring-styles", + "id": "angular-configuring-styles", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, { "name": "Enforce Module Boundaries", "path": "/recipes/enforce-module-boundaries", @@ -7837,22 +8029,6 @@ "children": [], "disableCollapsible": false }, - { - "name": "Set up Storybook for React Projects", - "path": "/packages/storybook/documents/overview-react", - "id": "overview-react", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, - { - "name": "Set up Storybook for Angular Projects", - "path": "/packages/storybook/documents/overview-angular", - "id": "overview-angular", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, { "name": "Storybook best practices for making the most out of Nx", "path": "/packages/storybook/documents/best-practices", @@ -7868,54 +8044,6 @@ "isExternal": false, "children": [], "disableCollapsible": false - }, - { - "name": "Configuring Storybook on Nx", - "path": "/packages/storybook/documents/configuring-storybook", - "id": "configuring-storybook", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, - { - "name": "How to configure Webpack and Vite for Storybook", - "path": "/packages/storybook/documents/custom-builder-configs", - "id": "custom-builder-configs", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, - { - "name": "Setting up Storybook Interaction Tests with Nx", - "path": "/packages/storybook/documents/storybook-interaction-tests", - "id": "storybook-interaction-tests", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, - { - "name": "Setting up Storybook Composition with Nx", - "path": "/packages/storybook/documents/storybook-composition-setup", - "id": "storybook-composition-setup", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, - { - "name": "Angular: Set up Compodoc for Storybook on Nx", - "path": "/packages/storybook/documents/angular-storybook-compodoc", - "id": "angular-storybook-compodoc", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, - { - "name": "Angular: Configuring styles and preprocessor options", - "path": "/packages/storybook/documents/angular-configuring-styles", - "id": "angular-configuring-styles", - "isExternal": false, - "children": [], - "disableCollapsible": false } ], "isExternal": false, diff --git a/docs/generated/manifests/nx.json b/docs/generated/manifests/nx.json index cb9eab73c9..00ee3f507f 100644 --- a/docs/generated/manifests/nx.json +++ b/docs/generated/manifests/nx.json @@ -2363,14 +2363,44 @@ { "id": "storybook", "name": "Storybook", - "description": "Storybook how tos.", + "description": "Storybook strategies and setups.", "file": "", "itemList": [ + { + "id": "overview-react", + "name": "Set up Storybook for React Projects", + "description": "This guide explains how to set up Storybook for React projects in your Nx workspace.", + "file": "shared/recipes/storybook/plugin-react", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/overview-react", + "tags": ["storybook"] + }, + { + "id": "overview-angular", + "name": "Set up Storybook for Angular Projects", + "description": "This guide explains how to set up Storybook for Angular projects in your Nx workspace.", + "file": "shared/recipes/storybook/plugin-angular", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/overview-angular", + "tags": ["storybook"] + }, + { + "id": "configuring-storybook", + "name": "Configuring Storybook on Nx", + "description": "This guide explains how Storybook is configured on your Nx workspace.", + "file": "shared/recipes/storybook/configuring-storybook", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/configuring-storybook", + "tags": ["storybook"] + }, { "id": "one-storybook-for-all", "name": "One main Storybook instance for all projects", - "description": "", - "file": "shared/recipes/one-storybook-for-all", + "description": "This guide explains how to consolidate all your Storybook stories from different projects into one unified Storybook instance. Ideal for Nx workspaces leveraging a single framework.", + "file": "shared/recipes/storybook/one-storybook-for-all", "itemList": [], "isExternal": false, "path": "/recipes/storybook/one-storybook-for-all", @@ -2379,8 +2409,8 @@ { "id": "one-storybook-per-scope", "name": "One Storybook instance per scope", - "description": "", - "file": "shared/recipes/one-storybook-per-scope", + "description": "This guide explains how to set up individual Storybook instances for each scope within an Nx workspace. It provides a structured approach, emphasizing folder organization and thematic scope separation.", + "file": "shared/recipes/storybook/one-storybook-per-scope", "itemList": [], "isExternal": false, "path": "/recipes/storybook/one-storybook-per-scope", @@ -2389,12 +2419,62 @@ { "id": "one-storybook-with-composition", "name": "One main Storybook instance using Storybook Composition", - "description": "", - "file": "shared/recipes/one-storybook-with-composition", + "description": "This guide explains how to publish a unified Storybook instance from multiple frameworks within an Nx workspace using Storybook Composition.", + "file": "shared/recipes/storybook/one-storybook-with-composition", "itemList": [], "isExternal": false, "path": "/recipes/storybook/one-storybook-with-composition", "tags": ["storybook"] + }, + { + "id": "custom-builder-configs", + "name": "How to configure Webpack and Vite for Storybook", + "description": "This guide explains how to customize the webpack configuration and your vite configuration for Storybook.", + "file": "shared/recipes/storybook/custom-builder-configs", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/custom-builder-configs", + "tags": ["storybook"] + }, + { + "id": "storybook-interaction-tests", + "name": "Setting up Storybook Interaction Tests with Nx", + "description": "This guide explains how you can set up Storybook interaction tests on your Nx workspace.", + "file": "shared/recipes/storybook/interaction-tests", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/storybook-interaction-tests", + "tags": ["storybook"] + }, + { + "id": "storybook-composition-setup", + "name": "Setting up Storybook Composition with Nx", + "description": "This guide explains how you can set up Storybook composition on your Nx workspace.", + "file": "shared/recipes/storybook/storybook-composition-setup", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/storybook-composition-setup", + "tags": ["storybook"] + }, + { + "id": "angular-storybook-compodoc", + "name": "Angular: Set up Compodoc for Storybook on Nx", + "description": "This guide explains how to set up Compodoc for Storybook on Angular projects in a Nx workspace.", + "file": "shared/recipes/storybook/angular-storybook-compodoc", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/angular-storybook-compodoc", + "tags": ["storybook"] + }, + { + "id": "angular-configuring-styles", + "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/recipes/storybook/angular-configuring-styles", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/angular-configuring-styles", + "tags": ["storybook"] } ], "isExternal": false, @@ -3541,14 +3621,44 @@ "/recipes/storybook": { "id": "storybook", "name": "Storybook", - "description": "Storybook how tos.", + "description": "Storybook strategies and setups.", "file": "", "itemList": [ + { + "id": "overview-react", + "name": "Set up Storybook for React Projects", + "description": "This guide explains how to set up Storybook for React projects in your Nx workspace.", + "file": "shared/recipes/storybook/plugin-react", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/overview-react", + "tags": ["storybook"] + }, + { + "id": "overview-angular", + "name": "Set up Storybook for Angular Projects", + "description": "This guide explains how to set up Storybook for Angular projects in your Nx workspace.", + "file": "shared/recipes/storybook/plugin-angular", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/overview-angular", + "tags": ["storybook"] + }, + { + "id": "configuring-storybook", + "name": "Configuring Storybook on Nx", + "description": "This guide explains how Storybook is configured on your Nx workspace.", + "file": "shared/recipes/storybook/configuring-storybook", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/configuring-storybook", + "tags": ["storybook"] + }, { "id": "one-storybook-for-all", "name": "One main Storybook instance for all projects", - "description": "", - "file": "shared/recipes/one-storybook-for-all", + "description": "This guide explains how to consolidate all your Storybook stories from different projects into one unified Storybook instance. Ideal for Nx workspaces leveraging a single framework.", + "file": "shared/recipes/storybook/one-storybook-for-all", "itemList": [], "isExternal": false, "path": "/recipes/storybook/one-storybook-for-all", @@ -3557,8 +3667,8 @@ { "id": "one-storybook-per-scope", "name": "One Storybook instance per scope", - "description": "", - "file": "shared/recipes/one-storybook-per-scope", + "description": "This guide explains how to set up individual Storybook instances for each scope within an Nx workspace. It provides a structured approach, emphasizing folder organization and thematic scope separation.", + "file": "shared/recipes/storybook/one-storybook-per-scope", "itemList": [], "isExternal": false, "path": "/recipes/storybook/one-storybook-per-scope", @@ -3567,23 +3677,103 @@ { "id": "one-storybook-with-composition", "name": "One main Storybook instance using Storybook Composition", - "description": "", - "file": "shared/recipes/one-storybook-with-composition", + "description": "This guide explains how to publish a unified Storybook instance from multiple frameworks within an Nx workspace using Storybook Composition.", + "file": "shared/recipes/storybook/one-storybook-with-composition", "itemList": [], "isExternal": false, "path": "/recipes/storybook/one-storybook-with-composition", "tags": ["storybook"] + }, + { + "id": "custom-builder-configs", + "name": "How to configure Webpack and Vite for Storybook", + "description": "This guide explains how to customize the webpack configuration and your vite configuration for Storybook.", + "file": "shared/recipes/storybook/custom-builder-configs", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/custom-builder-configs", + "tags": ["storybook"] + }, + { + "id": "storybook-interaction-tests", + "name": "Setting up Storybook Interaction Tests with Nx", + "description": "This guide explains how you can set up Storybook interaction tests on your Nx workspace.", + "file": "shared/recipes/storybook/interaction-tests", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/storybook-interaction-tests", + "tags": ["storybook"] + }, + { + "id": "storybook-composition-setup", + "name": "Setting up Storybook Composition with Nx", + "description": "This guide explains how you can set up Storybook composition on your Nx workspace.", + "file": "shared/recipes/storybook/storybook-composition-setup", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/storybook-composition-setup", + "tags": ["storybook"] + }, + { + "id": "angular-storybook-compodoc", + "name": "Angular: Set up Compodoc for Storybook on Nx", + "description": "This guide explains how to set up Compodoc for Storybook on Angular projects in a Nx workspace.", + "file": "shared/recipes/storybook/angular-storybook-compodoc", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/angular-storybook-compodoc", + "tags": ["storybook"] + }, + { + "id": "angular-configuring-styles", + "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/recipes/storybook/angular-configuring-styles", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/angular-configuring-styles", + "tags": ["storybook"] } ], "isExternal": false, "path": "/recipes/storybook", "tags": [] }, + "/recipes/storybook/overview-react": { + "id": "overview-react", + "name": "Set up Storybook for React Projects", + "description": "This guide explains how to set up Storybook for React projects in your Nx workspace.", + "file": "shared/recipes/storybook/plugin-react", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/overview-react", + "tags": ["storybook"] + }, + "/recipes/storybook/overview-angular": { + "id": "overview-angular", + "name": "Set up Storybook for Angular Projects", + "description": "This guide explains how to set up Storybook for Angular projects in your Nx workspace.", + "file": "shared/recipes/storybook/plugin-angular", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/overview-angular", + "tags": ["storybook"] + }, + "/recipes/storybook/configuring-storybook": { + "id": "configuring-storybook", + "name": "Configuring Storybook on Nx", + "description": "This guide explains how Storybook is configured on your Nx workspace.", + "file": "shared/recipes/storybook/configuring-storybook", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/configuring-storybook", + "tags": ["storybook"] + }, "/recipes/storybook/one-storybook-for-all": { "id": "one-storybook-for-all", "name": "One main Storybook instance for all projects", - "description": "", - "file": "shared/recipes/one-storybook-for-all", + "description": "This guide explains how to consolidate all your Storybook stories from different projects into one unified Storybook instance. Ideal for Nx workspaces leveraging a single framework.", + "file": "shared/recipes/storybook/one-storybook-for-all", "itemList": [], "isExternal": false, "path": "/recipes/storybook/one-storybook-for-all", @@ -3592,8 +3782,8 @@ "/recipes/storybook/one-storybook-per-scope": { "id": "one-storybook-per-scope", "name": "One Storybook instance per scope", - "description": "", - "file": "shared/recipes/one-storybook-per-scope", + "description": "This guide explains how to set up individual Storybook instances for each scope within an Nx workspace. It provides a structured approach, emphasizing folder organization and thematic scope separation.", + "file": "shared/recipes/storybook/one-storybook-per-scope", "itemList": [], "isExternal": false, "path": "/recipes/storybook/one-storybook-per-scope", @@ -3602,13 +3792,63 @@ "/recipes/storybook/one-storybook-with-composition": { "id": "one-storybook-with-composition", "name": "One main Storybook instance using Storybook Composition", - "description": "", - "file": "shared/recipes/one-storybook-with-composition", + "description": "This guide explains how to publish a unified Storybook instance from multiple frameworks within an Nx workspace using Storybook Composition.", + "file": "shared/recipes/storybook/one-storybook-with-composition", "itemList": [], "isExternal": false, "path": "/recipes/storybook/one-storybook-with-composition", "tags": ["storybook"] }, + "/recipes/storybook/custom-builder-configs": { + "id": "custom-builder-configs", + "name": "How to configure Webpack and Vite for Storybook", + "description": "This guide explains how to customize the webpack configuration and your vite configuration for Storybook.", + "file": "shared/recipes/storybook/custom-builder-configs", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/custom-builder-configs", + "tags": ["storybook"] + }, + "/recipes/storybook/storybook-interaction-tests": { + "id": "storybook-interaction-tests", + "name": "Setting up Storybook Interaction Tests with Nx", + "description": "This guide explains how you can set up Storybook interaction tests on your Nx workspace.", + "file": "shared/recipes/storybook/interaction-tests", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/storybook-interaction-tests", + "tags": ["storybook"] + }, + "/recipes/storybook/storybook-composition-setup": { + "id": "storybook-composition-setup", + "name": "Setting up Storybook Composition with Nx", + "description": "This guide explains how you can set up Storybook composition on your Nx workspace.", + "file": "shared/recipes/storybook/storybook-composition-setup", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/storybook-composition-setup", + "tags": ["storybook"] + }, + "/recipes/storybook/angular-storybook-compodoc": { + "id": "angular-storybook-compodoc", + "name": "Angular: Set up Compodoc for Storybook on Nx", + "description": "This guide explains how to set up Compodoc for Storybook on Angular projects in a Nx workspace.", + "file": "shared/recipes/storybook/angular-storybook-compodoc", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/angular-storybook-compodoc", + "tags": ["storybook"] + }, + "/recipes/storybook/angular-configuring-styles": { + "id": "angular-configuring-styles", + "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/recipes/storybook/angular-configuring-styles", + "itemList": [], + "isExternal": false, + "path": "/recipes/storybook/angular-configuring-styles", + "tags": ["storybook"] + }, "/recipes/enforce-module-boundaries": { "id": "enforce-module-boundaries", "name": "Enforce Module Boundaries", diff --git a/docs/generated/manifests/packages.json b/docs/generated/manifests/packages.json index faf7598da2..9e8834754d 100644 --- a/docs/generated/manifests/packages.json +++ b/docs/generated/manifests/packages.json @@ -2436,28 +2436,6 @@ "tags": [], "originalFilePath": "shared/packages/storybook/plugin-overview" }, - "/packages/storybook/documents/overview-react": { - "id": "overview-react", - "name": "Set up Storybook for React Projects", - "description": "This guide explains how to set up Storybook for React projects in your Nx workspace.", - "file": "generated/packages/storybook/documents/overview-react", - "itemList": [], - "isExternal": false, - "path": "/packages/storybook/documents/overview-react", - "tags": [], - "originalFilePath": "shared/packages/storybook/plugin-react" - }, - "/packages/storybook/documents/overview-angular": { - "id": "overview-angular", - "name": "Set up Storybook for Angular Projects", - "description": "This guide explains how to set up Storybook for Angular projects in your Nx workspace.", - "file": "generated/packages/storybook/documents/overview-angular", - "itemList": [], - "isExternal": false, - "path": "/packages/storybook/documents/overview-angular", - "tags": [], - "originalFilePath": "shared/packages/storybook/plugin-angular" - }, "/packages/storybook/documents/best-practices": { "id": "best-practices", "name": "Storybook best practices for making the most out of Nx", @@ -2479,72 +2457,6 @@ "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", - "description": "This guide explains how Storybook is configured on your Nx workspace.", - "file": "generated/packages/storybook/documents/configuring-storybook", - "itemList": [], - "isExternal": false, - "path": "/packages/storybook/documents/configuring-storybook", - "tags": [], - "originalFilePath": "shared/packages/storybook/configuring-storybook" - }, - "/packages/storybook/documents/custom-builder-configs": { - "id": "custom-builder-configs", - "name": "How to configure Webpack and Vite for Storybook", - "description": "This guide explains how to customize the webpack configuration and your vite configuration for Storybook.", - "file": "generated/packages/storybook/documents/custom-builder-configs", - "itemList": [], - "isExternal": false, - "path": "/packages/storybook/documents/custom-builder-configs", - "tags": [], - "originalFilePath": "shared/packages/storybook/custom-builder-configs" - }, - "/packages/storybook/documents/storybook-interaction-tests": { - "id": "storybook-interaction-tests", - "name": "Setting up Storybook Interaction Tests with Nx", - "description": "This guide explains how you can set up Storybook interaction tests on your Nx workspace.", - "file": "generated/packages/storybook/documents/storybook-interaction-tests", - "itemList": [], - "isExternal": false, - "path": "/packages/storybook/documents/storybook-interaction-tests", - "tags": [], - "originalFilePath": "shared/packages/storybook/interaction-tests" - }, - "/packages/storybook/documents/storybook-composition-setup": { - "id": "storybook-composition-setup", - "name": "Setting up Storybook Composition with Nx", - "description": "This guide explains how you can set up Storybook composition on your Nx workspace.", - "file": "generated/packages/storybook/documents/storybook-composition-setup", - "itemList": [], - "isExternal": false, - "path": "/packages/storybook/documents/storybook-composition-setup", - "tags": [], - "originalFilePath": "shared/packages/storybook/storybook-composition-setup" - }, - "/packages/storybook/documents/angular-storybook-compodoc": { - "id": "angular-storybook-compodoc", - "name": "Angular: Set up Compodoc for Storybook on Nx", - "description": "This guide explains how to set up Compodoc for Storybook on Angular projects in a Nx workspace.", - "file": "generated/packages/storybook/documents/angular-storybook-compodoc", - "itemList": [], - "isExternal": false, - "path": "/packages/storybook/documents/angular-storybook-compodoc", - "tags": [], - "originalFilePath": "shared/packages/storybook/angular-storybook-compodoc" - }, - "/packages/storybook/documents/angular-configuring-styles": { - "id": "angular-configuring-styles", - "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": "generated/packages/storybook/documents/angular-configuring-styles", - "itemList": [], - "isExternal": false, - "path": "/packages/storybook/documents/angular-configuring-styles", - "tags": [], - "originalFilePath": "shared/packages/storybook/angular-configuring-styles" } }, "root": "/packages/storybook", diff --git a/docs/generated/manifests/tags.json b/docs/generated/manifests/tags.json index f40665f51b..8e32923dbb 100644 --- a/docs/generated/manifests/tags.json +++ b/docs/generated/manifests/tags.json @@ -879,25 +879,81 @@ ], "storybook": [ { - "description": "", - "file": "shared/recipes/one-storybook-for-all", + "description": "This guide explains how to set up Storybook for React projects in your Nx workspace.", + "file": "shared/recipes/storybook/plugin-react", + "id": "overview-react", + "name": "Set up Storybook for React Projects", + "path": "/recipes/storybook/overview-react" + }, + { + "description": "This guide explains how to set up Storybook for Angular projects in your Nx workspace.", + "file": "shared/recipes/storybook/plugin-angular", + "id": "overview-angular", + "name": "Set up Storybook for Angular Projects", + "path": "/recipes/storybook/overview-angular" + }, + { + "description": "This guide explains how Storybook is configured on your Nx workspace.", + "file": "shared/recipes/storybook/configuring-storybook", + "id": "configuring-storybook", + "name": "Configuring Storybook on Nx", + "path": "/recipes/storybook/configuring-storybook" + }, + { + "description": "This guide explains how to consolidate all your Storybook stories from different projects into one unified Storybook instance. Ideal for Nx workspaces leveraging a single framework.", + "file": "shared/recipes/storybook/one-storybook-for-all", "id": "one-storybook-for-all", "name": "One main Storybook instance for all projects", "path": "/recipes/storybook/one-storybook-for-all" }, { - "description": "", - "file": "shared/recipes/one-storybook-per-scope", + "description": "This guide explains how to set up individual Storybook instances for each scope within an Nx workspace. It provides a structured approach, emphasizing folder organization and thematic scope separation.", + "file": "shared/recipes/storybook/one-storybook-per-scope", "id": "one-storybook-per-scope", "name": "One Storybook instance per scope", "path": "/recipes/storybook/one-storybook-per-scope" }, { - "description": "", - "file": "shared/recipes/one-storybook-with-composition", + "description": "This guide explains how to publish a unified Storybook instance from multiple frameworks within an Nx workspace using Storybook Composition.", + "file": "shared/recipes/storybook/one-storybook-with-composition", "id": "one-storybook-with-composition", "name": "One main Storybook instance using Storybook Composition", "path": "/recipes/storybook/one-storybook-with-composition" + }, + { + "description": "This guide explains how to customize the webpack configuration and your vite configuration for Storybook.", + "file": "shared/recipes/storybook/custom-builder-configs", + "id": "custom-builder-configs", + "name": "How to configure Webpack and Vite for Storybook", + "path": "/recipes/storybook/custom-builder-configs" + }, + { + "description": "This guide explains how you can set up Storybook interaction tests on your Nx workspace.", + "file": "shared/recipes/storybook/interaction-tests", + "id": "storybook-interaction-tests", + "name": "Setting up Storybook Interaction Tests with Nx", + "path": "/recipes/storybook/storybook-interaction-tests" + }, + { + "description": "This guide explains how you can set up Storybook composition on your Nx workspace.", + "file": "shared/recipes/storybook/storybook-composition-setup", + "id": "storybook-composition-setup", + "name": "Setting up Storybook Composition with Nx", + "path": "/recipes/storybook/storybook-composition-setup" + }, + { + "description": "This guide explains how to set up Compodoc for Storybook on Angular projects in a Nx workspace.", + "file": "shared/recipes/storybook/angular-storybook-compodoc", + "id": "angular-storybook-compodoc", + "name": "Angular: Set up Compodoc for Storybook on Nx", + "path": "/recipes/storybook/angular-storybook-compodoc" + }, + { + "description": "This document explains how to configure styles and preprocessor options in Angular projects with a Storybook configuration.", + "file": "shared/recipes/storybook/angular-configuring-styles", + "id": "angular-configuring-styles", + "name": "Angular: Configuring styles and preprocessor options", + "path": "/recipes/storybook/angular-configuring-styles" } ], "docker": [ diff --git a/docs/generated/packages-metadata.json b/docs/generated/packages-metadata.json index ab7e810ac3..5f32df27d5 100644 --- a/docs/generated/packages-metadata.json +++ b/docs/generated/packages-metadata.json @@ -2411,28 +2411,6 @@ "tags": [], "originalFilePath": "shared/packages/storybook/plugin-overview" }, - { - "id": "overview-react", - "name": "Set up Storybook for React Projects", - "description": "This guide explains how to set up Storybook for React projects in your Nx workspace.", - "file": "generated/packages/storybook/documents/overview-react", - "itemList": [], - "isExternal": false, - "path": "storybook/documents/overview-react", - "tags": [], - "originalFilePath": "shared/packages/storybook/plugin-react" - }, - { - "id": "overview-angular", - "name": "Set up Storybook for Angular Projects", - "description": "This guide explains how to set up Storybook for Angular projects in your Nx workspace.", - "file": "generated/packages/storybook/documents/overview-angular", - "itemList": [], - "isExternal": false, - "path": "storybook/documents/overview-angular", - "tags": [], - "originalFilePath": "shared/packages/storybook/plugin-angular" - }, { "id": "best-practices", "name": "Storybook best practices for making the most out of Nx", @@ -2454,72 +2432,6 @@ "path": "storybook/documents/storybook-7-setup", "tags": [], "originalFilePath": "shared/packages/storybook/storybook-7-setup" - }, - { - "id": "configuring-storybook", - "name": "Configuring Storybook on Nx", - "description": "This guide explains how Storybook is configured on your Nx workspace.", - "file": "generated/packages/storybook/documents/configuring-storybook", - "itemList": [], - "isExternal": false, - "path": "storybook/documents/configuring-storybook", - "tags": [], - "originalFilePath": "shared/packages/storybook/configuring-storybook" - }, - { - "id": "custom-builder-configs", - "name": "How to configure Webpack and Vite for Storybook", - "description": "This guide explains how to customize the webpack configuration and your vite configuration for Storybook.", - "file": "generated/packages/storybook/documents/custom-builder-configs", - "itemList": [], - "isExternal": false, - "path": "storybook/documents/custom-builder-configs", - "tags": [], - "originalFilePath": "shared/packages/storybook/custom-builder-configs" - }, - { - "id": "storybook-interaction-tests", - "name": "Setting up Storybook Interaction Tests with Nx", - "description": "This guide explains how you can set up Storybook interaction tests on your Nx workspace.", - "file": "generated/packages/storybook/documents/storybook-interaction-tests", - "itemList": [], - "isExternal": false, - "path": "storybook/documents/storybook-interaction-tests", - "tags": [], - "originalFilePath": "shared/packages/storybook/interaction-tests" - }, - { - "id": "storybook-composition-setup", - "name": "Setting up Storybook Composition with Nx", - "description": "This guide explains how you can set up Storybook composition on your Nx workspace.", - "file": "generated/packages/storybook/documents/storybook-composition-setup", - "itemList": [], - "isExternal": false, - "path": "storybook/documents/storybook-composition-setup", - "tags": [], - "originalFilePath": "shared/packages/storybook/storybook-composition-setup" - }, - { - "id": "angular-storybook-compodoc", - "name": "Angular: Set up Compodoc for Storybook on Nx", - "description": "This guide explains how to set up Compodoc for Storybook on Angular projects in a Nx workspace.", - "file": "generated/packages/storybook/documents/angular-storybook-compodoc", - "itemList": [], - "isExternal": false, - "path": "storybook/documents/angular-storybook-compodoc", - "tags": [], - "originalFilePath": "shared/packages/storybook/angular-storybook-compodoc" - }, - { - "id": "angular-configuring-styles", - "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": "generated/packages/storybook/documents/angular-configuring-styles", - "itemList": [], - "isExternal": false, - "path": "storybook/documents/angular-configuring-styles", - "tags": [], - "originalFilePath": "shared/packages/storybook/angular-configuring-styles" } ], "executors": [ diff --git a/docs/generated/packages/angular/generators/stories.json b/docs/generated/packages/angular/generators/stories.json index 60b86a13be..cf2f930fa7 100644 --- a/docs/generated/packages/angular/generators/stories.json +++ b/docs/generated/packages/angular/generators/stories.json @@ -54,7 +54,7 @@ }, "additionalProperties": false, "required": ["name"], - "examplesFile": "This generator will generate stories for all your components in your project. The stories will be generated using [Component Story Format 3 (CSF3)](https://storybook.js.org/blog/storybook-csf3-is-here/).\n\n```bash\nnx g @nx/angular:stories project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for Angular overview page](/packages/storybook/documents/overview-angular#auto-generate-stories).\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- Whether you want to set up [Storybook interaction tests](https://storybook.js.org/docs/angular/writing-tests/interaction-testing) (`interactionTests`). If you choose `yes`, a `play` function will be added to your stories, and all the necessary dependencies will be installed. You can read more about this in the [Nx Storybook interaction tests documentation page](/packages/storybook/documents/interaction-tests).\n\nYou must provide a `name` for the generator to work.\n\nBy default, this generator will also set up [Storybook interaction tests](https://storybook.js.org/docs/angular/writing-tests/interaction-testing). If you don't want to set up Storybook interaction tests, you can pass the `--interactionTests=false` option, but it's not recommended.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nx/angular:stories ui --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*\n```\n\nThis will generate stories for all the components in the `ui` project, except for the ones in the `libs/ui/src/not-stories` directory, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n", + "examplesFile": "This generator will generate stories for all your components in your project. The stories will be generated using [Component Story Format 3 (CSF3)](https://storybook.js.org/blog/storybook-csf3-is-here/).\n\n```bash\nnx g @nx/angular:stories project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for Angular overview page](/recipes/storybook/overview-angular#auto-generate-stories).\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- Whether you want to set up [Storybook interaction tests](https://storybook.js.org/docs/angular/writing-tests/interaction-testing) (`interactionTests`). If you choose `yes`, a `play` function will be added to your stories, and all the necessary dependencies will be installed. You can read more about this in the [Nx Storybook interaction tests documentation page](/packages/storybook/documents/interaction-tests).\n\nYou must provide a `name` for the generator to work.\n\nBy default, this generator will also set up [Storybook interaction tests](https://storybook.js.org/docs/angular/writing-tests/interaction-testing). If you don't want to set up Storybook interaction tests, you can pass the `--interactionTests=false` option, but it's not recommended.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nx/angular:stories ui --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*\n```\n\nThis will generate stories for all the components in the `ui` project, except for the ones in the `libs/ui/src/not-stories` directory, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n", "presets": [] }, "description": "Creates stories/specs for all components declared in a project.", diff --git a/docs/generated/packages/angular/generators/storybook-configuration.json b/docs/generated/packages/angular/generators/storybook-configuration.json index 485de50efc..3682f68e33 100644 --- a/docs/generated/packages/angular/generators/storybook-configuration.json +++ b/docs/generated/packages/angular/generators/storybook-configuration.json @@ -85,7 +85,7 @@ }, "additionalProperties": false, "required": ["name"], - "examplesFile": "This generator will set up Storybook for your **Angular** project. By default, starting Nx 16, Storybook v7 is used.\n\n```bash\nnx g @nx/angular:storybook-configuration project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for Angular overview page](/packages/storybook/documents/overview-angular#generate-storybook-configuration-for-an-angular-project).\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- Whether you want to set up [Storybook interaction tests](https://storybook.js.org/docs/angular/writing-tests/interaction-testing) (`interactionTests`). If you choose `yes`, a `play` function will be added to your stories, and all the necessary dependencies will be installed. Also, a `test-storybook` target will be generated in your project's `project.json`, with a command to invoke the [Storybook `test-runner`](https://storybook.js.org/docs/angular/writing-tests/test-runner). You can read more about this in the [Nx Storybook interaction tests documentation page](/packages/storybook/documents/interaction-tests).\n- Whether you want to `generateStories` for the components in your project. If you choose `yes`, a `.stories.ts` file will be generated next to each of your components in your project.\n\nYou must provide a `name` for the generator to work.\n\nBy default, this generator will also set up [Storybook interaction tests](https://storybook.js.org/docs/angular/writing-tests/interaction-testing). If you don't want to set up Storybook interaction tests, you can pass the `--interactionTests=false` option, but it's not recommended.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Generate Storybook configuration\n\n```bash\nnx g @nx/angular:storybook-configuration ui\n```\n\nThis will generate Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory, eg. `.storybook/main.ts`).\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nx/angular:storybook-configuration ui --generateStories=true --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts\n```\n\nThis will generate a Storybook configuration for the `ui` project and generate stories for all components in the `libs/ui/src/lib` directory, except for the ones in the `libs/ui/src/not-stories` directory, and the ones in the `apps/my-app` directory that end with `.something.ts`, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\n### Generate Storybook configuration using JavaScript\n\n```bash\nnx g @nx/angular:storybook-configuration ui --tsConfiguration=false\n```\n\nBy default, our generator generates TypeScript Storybook configuration files. You can choose to use JavaScript for the Storybook configuration files of your project (the files inside the `.storybook` directory, eg. `.storybook/main.js`).\n", + "examplesFile": "This generator will set up Storybook for your **Angular** project. By default, starting Nx 16, Storybook v7 is used.\n\n```bash\nnx g @nx/angular:storybook-configuration project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for Angular overview page](/recipes/storybook/overview-angular#generate-storybook-configuration-for-an-angular-project).\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- Whether you want to set up [Storybook interaction tests](https://storybook.js.org/docs/angular/writing-tests/interaction-testing) (`interactionTests`). If you choose `yes`, a `play` function will be added to your stories, and all the necessary dependencies will be installed. Also, a `test-storybook` target will be generated in your project's `project.json`, with a command to invoke the [Storybook `test-runner`](https://storybook.js.org/docs/angular/writing-tests/test-runner). You can read more about this in the [Nx Storybook interaction tests documentation page](/packages/storybook/documents/interaction-tests).\n- Whether you want to `generateStories` for the components in your project. If you choose `yes`, a `.stories.ts` file will be generated next to each of your components in your project.\n\nYou must provide a `name` for the generator to work.\n\nBy default, this generator will also set up [Storybook interaction tests](https://storybook.js.org/docs/angular/writing-tests/interaction-testing). If you don't want to set up Storybook interaction tests, you can pass the `--interactionTests=false` option, but it's not recommended.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Generate Storybook configuration\n\n```bash\nnx g @nx/angular:storybook-configuration ui\n```\n\nThis will generate Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory, eg. `.storybook/main.ts`).\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nx/angular:storybook-configuration ui --generateStories=true --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts\n```\n\nThis will generate a Storybook configuration for the `ui` project and generate stories for all components in the `libs/ui/src/lib` directory, except for the ones in the `libs/ui/src/not-stories` directory, and the ones in the `apps/my-app` directory that end with `.something.ts`, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\n### Generate Storybook configuration using JavaScript\n\n```bash\nnx g @nx/angular:storybook-configuration ui --tsConfiguration=false\n```\n\nBy default, our generator generates TypeScript Storybook configuration files. You can choose to use JavaScript for the Storybook configuration files of your project (the files inside the `.storybook` directory, eg. `.storybook/main.js`).\n", "presets": [] }, "description": "Adds Storybook configuration to a project.", diff --git a/docs/generated/packages/cypress/documents/overview.md b/docs/generated/packages/cypress/documents/overview.md index 986a180e81..1fe24ec9a2 100644 --- a/docs/generated/packages/cypress/documents/overview.md +++ b/docs/generated/packages/cypress/documents/overview.md @@ -11,7 +11,7 @@ Cypress is a test runner built for the modern web. It has a lot of great feature > Info about [Cypress Component Testing can be found here](/packages/cypress/documents/cypress-component-testing) > -> Info about [using Cypress and Storybook can be found here](/packages/storybook/documents/overview-react#cypress-tests-for-storiesbook) +> Info about [using Cypress and Storybook can be found here](/recipes/storybook/overview-react#cypress-tests-for-storiesbook) If the `@nx/cypress` package is not installed, install the version that matches your `nx` package version. diff --git a/docs/generated/packages/react/documents/overview.md b/docs/generated/packages/react/documents/overview.md index 1953591a95..34cb819043 100644 --- a/docs/generated/packages/react/documents/overview.md +++ b/docs/generated/packages/react/documents/overview.md @@ -122,4 +122,4 @@ The library in `dist` is publishable to npm or a private registry. - [Using Cypress](/packages/cypress) - [Using Jest](/packages/jest) -- [Using Storybook](/packages/storybook/documents/overview-react) +- [Using Storybook](/recipes/storybook/overview-react) diff --git a/docs/generated/packages/react/generators/stories.json b/docs/generated/packages/react/generators/stories.json index 3fe7c00699..f2c7c75c9c 100644 --- a/docs/generated/packages/react/generators/stories.json +++ b/docs/generated/packages/react/generators/stories.json @@ -57,7 +57,7 @@ } }, "required": ["project"], - "examplesFile": "This generator will generate stories for all your components in your project. The stories will be generated using [Component Story Format 3 (CSF3)](https://storybook.js.org/blog/storybook-csf3-is-here/).\n\n```bash\nnx g @nx/react:stories project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for React overview page](/packages/storybook/documents/overview-react#auto-generate-stories).\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- Whether you want to set up [Storybook interaction tests](https://storybook.js.org/docs/angular/writing-tests/interaction-testing) (`interactionTests`). If you choose `yes`, a `play` function will be added to your stories, and all the necessary dependencies will be installed. You can read more about this in the [Nx Storybook interaction tests documentation page](/packages/storybook/documents/interaction-tests)..\n\nYou must provide a `name` for the generator to work.\n\nBy default, this generator will also set up [Storybook interaction tests](https://storybook.js.org/docs/angular/writing-tests/interaction-testing). If you don't want to set up Storybook interaction tests, you can pass the `--interactionTests=false` option, but it's not recommended.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nx/react:stories --name=ui --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*\n```\n\nThis will generate stories for all the components in the `ui` project, except for the ones in the `libs/ui/src/not-stories` directory, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\n### Generate stories using JavaScript instead of TypeScript\n\n```bash\nnx g @nx/react:stories --name=ui --js=true\n```\n\nThis will generate stories for all the components in the `ui` project using JavaScript instead of TypeScript. So, you will have `.stories.js` files next to your components.\n", + "examplesFile": "This generator will generate stories for all your components in your project. The stories will be generated using [Component Story Format 3 (CSF3)](https://storybook.js.org/blog/storybook-csf3-is-here/).\n\n```bash\nnx g @nx/react:stories project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for React overview page](/recipes/storybook/overview-react#auto-generate-stories).\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- Whether you want to set up [Storybook interaction tests](https://storybook.js.org/docs/angular/writing-tests/interaction-testing) (`interactionTests`). If you choose `yes`, a `play` function will be added to your stories, and all the necessary dependencies will be installed. You can read more about this in the [Nx Storybook interaction tests documentation page](/packages/storybook/documents/interaction-tests)..\n\nYou must provide a `name` for the generator to work.\n\nBy default, this generator will also set up [Storybook interaction tests](https://storybook.js.org/docs/angular/writing-tests/interaction-testing). If you don't want to set up Storybook interaction tests, you can pass the `--interactionTests=false` option, but it's not recommended.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nx/react:stories --name=ui --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*\n```\n\nThis will generate stories for all the components in the `ui` project, except for the ones in the `libs/ui/src/not-stories` directory, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\n### Generate stories using JavaScript instead of TypeScript\n\n```bash\nnx g @nx/react:stories --name=ui --js=true\n```\n\nThis will generate stories for all the components in the `ui` project using JavaScript instead of TypeScript. So, you will have `.stories.js` files next to your components.\n", "presets": [] }, "description": "Create stories/specs for all components declared in an app or library.", diff --git a/docs/generated/packages/react/generators/storybook-configuration.json b/docs/generated/packages/react/generators/storybook-configuration.json index bae3614598..7c49f78c30 100644 --- a/docs/generated/packages/react/generators/storybook-configuration.json +++ b/docs/generated/packages/react/generators/storybook-configuration.json @@ -82,7 +82,7 @@ } }, "required": ["name"], - "examplesFile": "This generator will set up Storybook for your **React** project. You can also use this generator to generate Storybook configuration for your **Next.js** project. By default, starting Nx 16, Storybook v7 is used.\n\n```bash\nnx g @nx/react:storybook-configuration project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for React overview page](/packages/storybook/documents/overview-react#generate-storybook-configuration-for-an-react-project).\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- Whether you want to set up [Storybook interaction tests](https://storybook.js.org/docs/react/writing-tests/interaction-testing) (`interactionTests`). If you choose `yes`, a `play` function will be added to your stories, and all the necessary dependencies will be installed. Also, a `test-storybook` target will be generated in your project's `project.json`, with a command to invoke the [Storybook `test-runner`](https://storybook.js.org/docs/react/writing-tests/test-runner). You can read more about this in the [Nx Storybook interaction tests documentation page](/packages/storybook/documents/interaction-tests)..\n- Whether you want to `generateStories` for the components in your project. If you choose `yes`, a `.stories.ts` file will be generated next to each of your components in your project.\n\nYou must provide a `name` for the generator to work.\n\nBy default, this generator will also set up [Storybook interaction tests](https://storybook.js.org/docs/react/writing-tests/interaction-testing). If you don't want to set up Storybook interaction tests, you can pass the `--interactionTests=false` option, but it's not recommended.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Generate Storybook configuration\n\n```bash\nnx g @nx/react:storybook-configuration ui\n```\n\nThis will generate Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory, eg. `.storybook/main.ts`).\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nx/react:storybook-configuration ui --generateStories=true --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts\n```\n\nThis will generate a Storybook configuration for the `ui` project and generate stories for all components in the `libs/ui/src/lib` directory, except for the ones in the `libs/ui/src/not-stories` directory, and the ones in the `apps/my-app` directory that end with `.something.ts`, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\n### Generate stories using JavaScript instead of TypeScript\n\n```bash\nnx g @nx/react:storybook-configuration ui --generateStories=true --js=true\n```\n\nThis will generate stories for all the components in the `ui` project using JavaScript instead of TypeScript. So, you will have `.stories.js` files next to your components.\n\n### Generate Storybook configuration using JavaScript\n\n```bash\nnx g @nx/react:storybook-configuration ui --tsConfiguration=false\n```\n\nBy default, our generator generates TypeScript Storybook configuration files. You can choose to use JavaScript for the Storybook configuration files of your project (the files inside the `.storybook` directory, eg. `.storybook/main.js`).\n", + "examplesFile": "This generator will set up Storybook for your **React** project. You can also use this generator to generate Storybook configuration for your **Next.js** project. By default, starting Nx 16, Storybook v7 is used.\n\n```bash\nnx g @nx/react:storybook-configuration project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for React overview page](/recipes/storybook/overview-react#generate-storybook-configuration-for-an-react-project).\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- Whether you want to set up [Storybook interaction tests](https://storybook.js.org/docs/react/writing-tests/interaction-testing) (`interactionTests`). If you choose `yes`, a `play` function will be added to your stories, and all the necessary dependencies will be installed. Also, a `test-storybook` target will be generated in your project's `project.json`, with a command to invoke the [Storybook `test-runner`](https://storybook.js.org/docs/react/writing-tests/test-runner). You can read more about this in the [Nx Storybook interaction tests documentation page](/packages/storybook/documents/interaction-tests)..\n- Whether you want to `generateStories` for the components in your project. If you choose `yes`, a `.stories.ts` file will be generated next to each of your components in your project.\n\nYou must provide a `name` for the generator to work.\n\nBy default, this generator will also set up [Storybook interaction tests](https://storybook.js.org/docs/react/writing-tests/interaction-testing). If you don't want to set up Storybook interaction tests, you can pass the `--interactionTests=false` option, but it's not recommended.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Generate Storybook configuration\n\n```bash\nnx g @nx/react:storybook-configuration ui\n```\n\nThis will generate Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory, eg. `.storybook/main.ts`).\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nx/react:storybook-configuration ui --generateStories=true --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts\n```\n\nThis will generate a Storybook configuration for the `ui` project and generate stories for all components in the `libs/ui/src/lib` directory, except for the ones in the `libs/ui/src/not-stories` directory, and the ones in the `apps/my-app` directory that end with `.something.ts`, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\n### Generate stories using JavaScript instead of TypeScript\n\n```bash\nnx g @nx/react:storybook-configuration ui --generateStories=true --js=true\n```\n\nThis will generate stories for all the components in the `ui` project using JavaScript instead of TypeScript. So, you will have `.stories.js` files next to your components.\n\n### Generate Storybook configuration using JavaScript\n\n```bash\nnx g @nx/react:storybook-configuration ui --tsConfiguration=false\n```\n\nBy default, our generator generates TypeScript Storybook configuration files. You can choose to use JavaScript for the Storybook configuration files of your project (the files inside the `.storybook` directory, eg. `.storybook/main.js`).\n", "presets": [] }, "description": "Set up storybook for a React app or library.", diff --git a/docs/generated/packages/storybook/documents/angular-browser-target.md b/docs/generated/packages/storybook/documents/angular-browser-target.md deleted file mode 100644 index 9c4537da40..0000000000 --- a/docs/generated/packages/storybook/documents/angular-browser-target.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 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. ---- - -# The `browserTarget` for Angular projects with a Storybook configuration - -{% callout type="note" title="Note" %} -This documentation page contains information about the [Storybook plugin](/packages/storybook), specifically regarding [Angular projects that are using Storybook](/packages/storybook/documents/overview-angular). -{% /callout %} - -## Setting up `browserTarget` - -If you're using [Storybook](/packages/storybook) in your Angular project, you will notice that `browserTarget` is specified for the `storybook` and `build-storybook` targets, much like it is done for `serve` or other targets. Angular needs the `browserTarget` for Storybook in order to know which configuration to use for the build. If your project is buildable (it has a `build` target, and uses the main Angular builder - `@angular-devkit/build-angular:browser`) the `browserTarget` for Storybook will use the `build` target, if it's not buildable it will use the `build-storybook` target. -You do not have to do anything manually. Nx will create the configuration for you. Even if you are migrating from an older version of Nx, Nx will make sure to change your `package.json` Storybook targets to match the new schema. - -You can read more about the `browserTarget` in the [official Angular documentation](https://angular.io/cli/serve). - -Your Storybook targets in your `project.json` will look like this: - -```jsonc {% fileName="project.json" %} - "storybook": { - "executor": "@storybook/angular:start-storybook", - "options": { - ... - "browserTarget": "my-project:build" - }, - ... - }, - "build-storybook": { - "executor": "@storybook/angular:build-storybook", - ... - "options": { - ... - "browserTarget": "my-project:build" - }, - ... - } -``` - -This setup instructs Nx to use the configuration under the `build` target of `my-project` when using the `storybook` and `build-storybook` executors. - -## Setting up `projectBuildConfig` for Nx versions `<14.1.8` - -**_Careful: This is for older versions of Nx - for the latest version please look at the section above, about `browserTarget`_** - -If you are on Nx version `<14.1.8`, you're still using our custom executor, which means that you have to comply by the Nx Storybook schema. This means that the contents of `browserTarget` should be placed in the `projectBuildConfig` property. This is telling Storybook where to get the build configuration from. To know more about the purpose of `browserTarget` (and `projectBuildConfig`) read the section above. - -If you're using Nx version `>=13.4.6` either in a new Nx workspace, or you migrated your older Nx workspace to Nx version `>=13.4.6`, Nx will automatically add the `projectBuildConfig` property in your projects `project.json` files, for projects that are using Storybook. - -Your Storybook targets in your `project.json` will look like this: - -```jsonc {% fileName="project.json" %} - "storybook": { - "executor": "@nx/storybook:storybook", - "options": { - ... - "projectBuildConfig": "my-project:build-storybook" - }, - ... - }, - "build-storybook": { - "executor": "@nx/storybook:build", - ... - "options": { - ... - "projectBuildConfig": "my-project:build-storybook" - }, - ... - } -``` - -This setup instructs Nx to use the configuration under the `build-storybook` target of `my-project` when using the `storybook` and `build-storybook` executors. - -## Notes about the `defaultProject` - -Storybook for Angular needs a default project specified in order to run. The reason is that it uses that default project to read the build configuration from (paths to files to include in the build, and other configurations/settings). In a pure Angular/Storybook setup (**not** an Nx workspace), the Angular application/project would have an `angular.json` file. That file would have a property called `defaultProject`. In an Nx workspace the `defaultProject` property would be specified in the `nx.json` file. Previously, Nx would try to resolve the `defaultProject` of the workspace, and use the build configuration of that project. In most cases, the `defaultProject`'s build configuration would not work for some other project set up with Storybook, since there would most probably be mismatches in paths or other project-specific options. diff --git a/docs/generated/packages/storybook/documents/angular-storybook-targets.md b/docs/generated/packages/storybook/documents/angular-storybook-targets.md deleted file mode 100644 index bebfe5e2ca..0000000000 --- a/docs/generated/packages/storybook/documents/angular-storybook-targets.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: 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. ---- - -# Information about `storybook` and `build-storybook` targets for Angular projects with a Storybook configuration - -{% callout type="note" title="Note" %} -This documentation page contains information about the [Storybook plugin](/packages/storybook), specifically regarding [Angular projects that are using Storybook](/packages/storybook/documents/overview-angular). -{% /callout %} - -If you are on Nx version `>=14.1.8`, the [Nx Storybook plugin for _Angular_ projects](/packages/storybook/documents/overview-angular) uses the original Storybook executors for Angular (`"@storybook/angular:start-storybook"` and `"@storybook/angular:build-storybook"`) to serve and build Storybook. - -That means that you can use the official [Storybook for Angular documentation (expand the "Troubleshooting" section)](https://storybook.js.org/docs/angular/get-started/install#troubleshooting) to configure the options for serving and building Storybook. - -## Moving your project targets to the new (native Storybook) schema - -If you are on Nx version `<14.1.8` and you want to move to the latest version (or any version `>=14.1.8`) you can use the `nx migrate` command, which will take care of migrating your Storybook targets across all your Angular projects using Storybook to use the new schema, the original Storybook executors for Angular. The configuration changes that you need to make will be handled automatically by Nx, so you will not have to do any manual work. - -If you have already moved on a version of Nx `>=14.1.8` without using `nx migrate` and now you are having trouble with your Angular projects using Storybook (eg. `Property 'uiFramework' does not match the schema. '@storybook/angular' should be one of ...`), that means that your targets are still using the old schema and they should change. The way to fix that is to call `nx migrate` again like this: - -```bash -nx migrate @nx/storybook@14.1.0 --to="@nx/storybook@14.2.0" -``` - -and follow the instructions that will be printed in the console. - -This command will generate a new `migrations.json` file which will contain the "change-storybook-targets" migration script. This script (when called with `yarn nx migrate --run-migrations`) will change the `storybook` and `build-storybook` targets in all your Angular projects that are configured to use Storybook. The new target configuration will use the native Storybook builders (`@storybook/angular:build-storybook` and `@storybook/angular:start-storybook`) instead of the Nx Storybook builders (`@nx/storybook:build-storybook` and `@nx/storybook:storybook`). diff --git a/docs/generated/packages/storybook/documents/best-practices.md b/docs/generated/packages/storybook/documents/best-practices.md index c4c3ba91fd..07d3e92684 100644 --- a/docs/generated/packages/storybook/documents/best-practices.md +++ b/docs/generated/packages/storybook/documents/best-practices.md @@ -39,9 +39,9 @@ If you are on a project using Angular, React or React Native, you can also gener If your project is not configured yet, check out one of these guides: -- [Set up Storybook for React Projects](/packages/storybook/documents/overview-react) +- [Set up Storybook for React Projects](/recipes/storybook/overview-react) -- [Set up Storybook for Angular Projects](/packages/storybook/documents/overview-angular) +- [Set up Storybook for Angular Projects](/recipes/storybook/overview-angular) If your project is [already configured](/packages/storybook), you can use the `stories` generator: @@ -55,7 +55,7 @@ The stories generator will read your inputs (if you’re using Angular), or your #### Cypress tests generation -Nx also generates Cypress tests for your components, that point to the corresponding component’s story. You can read more about how the Cypress tests are generated and how they look like in the [storybook-configuration generator documentation](/packages/storybook/documents/overview-react#cypress-tests-for-stories). +Nx also generates Cypress tests for your components, that point to the corresponding component’s story. You can read more about how the Cypress tests are generated and how they look like in the [storybook-configuration generator documentation](/recipes/storybook/overview-react#cypress-tests-for-stories). Take a look at the generated code of the Cypress test file, specifically at the URL which Cypress visits: @@ -128,7 +128,7 @@ You can think of the central Storybook container as a grouping of similar-concep Then, according to your use-case, you can have one central Storybook for your whole workspace, importing all the stories from all the projects. Alternatively, you can have one Storybook per "scope", which imports all the stories from projects the same scope. Or even one Storybook per application, importing all the stories of all the libraries that it is depending on. As you can see, there are many options, and you can choose the one that best suits your needs. {% callout type="note" title="Storybook Composition" %} -In order to achieve some things mentioned above, you may use [Storybook Composition](/packages/storybook/documents/storybook-composition-setup). However, in this case, you would still need to build each project’s Storybook individually, and also deploy it individually. So in the cases where you have multiple projects, Storybook Composition would not be very efficient. +In order to achieve some things mentioned above, you may use [Storybook Composition](/recipes/storybook/storybook-composition-setup). However, in this case, you would still need to build each project’s Storybook individually, and also deploy it individually. So in the cases where you have multiple projects, Storybook Composition would not be very efficient. {% /callout %} Before moving on to the examples section, it could be useful to read the [Library Types](/concepts/more-concepts/library-types) documentation page and the [Grouping libraries](/concepts/more-concepts/grouping-libraries) documentation page. These could help you decide which way fits your use case better. diff --git a/docs/generated/packages/storybook/documents/migrate-webpack-final-angular.md b/docs/generated/packages/storybook/documents/migrate-webpack-final-angular.md deleted file mode 100644 index 22ac16b49b..0000000000 --- a/docs/generated/packages/storybook/documents/migrate-webpack-final-angular.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: 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. ---- - -# Storybook Migration to webpackFinal - -{% callout type="info" title="Configure webpack for Storybook" %} -If you are looking for how you can configure webpack for Storybook, please check out our guide: [How to configure Webpack and Vite for Storybook](/packages/storybook/documents/custom-builder-configs). -{% /callout %} - -Nx 12.7 as in combination with Storybook v6.3 doesn't need a custom `webpack.config.js` which was previously required and auto-generated by Nx. - -Here are the main differences to the previous setups: - -- there's no `webpack.config.js` -- custom webpack configurations can be added in the `webpackFinal` property of the `main.js` file - -Here's an example of a newly generated `main.js` file: - -```javascript {% fileName=".storybook/main.js" %} -// project-level .storybook/main.js file -const rootMain = require('../../../.storybook/main'); - -module.exports = { - ...rootMain, - - core: { ...rootMain.core, builder: 'webpack5' }, - - stories: [ - ...rootMain.stories, - '../src/lib/**/*.stories.mdx', - '../src/lib/**/*.stories.@(js|jsx|ts|tsx)', - ], - addons: [...rootMain.addons], - webpackFinal: async (config, { configType }) => { - // apply any global webpack configs that might have been specified in .storybook/main.js - if (rootMain.webpackFinal) { - config = await rootMain.webpackFinal(config, { configType }); - } - - // add your own webpack tweaks if needed - - return config; - }, -}; -``` - -At the Nx workspace root level, the configuration file looks as follows: - -```javascript {% fileName=".storybook/main.js" %} -// root level .storybook/main.js file -module.exports = { - stories: [], - addons: ['@storybook/addon-essentials'], - // uncomment the property below if you want to apply some webpack config globally - // webpackFinal: async (config, { configType }) => { - // // Make whatever fine-grained changes you need that should apply to all storybook configs - - // // Return the altered config - // return config; - // }, -}; -``` - -## Migrating - -If you're upgrading from a lower version of Nx, your old Storybook configuration will still work. New configurations generated will use the new syntax as shown above. The newly generated code will also make sure to extend from a global `webpack.config.js` which might exist in the root-level `.storybook/` directory of your Nx workspace. - -This gives you the flexibility to incrementally migrate your configurations. - -Here's the step-by-step migration process: - -### 1. adjust the `main.js` file - -Restructure your `main.js` file so that it looks like in the example illustrated above. - -If you need to keep your root-level `.storybook/webpack.config.js` for now, then make sure you adjust the `main.js` in a way that it properly calls the root-level `webpack.config.js` to inherit all of the global configurations. - -```javascript {% fileName=".storybook/webpack.config.js" %} -const rootMain = require('../../../.storybook/main'); -const rootWebpackConfig = require('../../../.storybook/webpack.config'); - -module.exports = { - ...rootMain, - ... - webpackFinal: async (config) => { - // for backwards compatibility call the `rootWebpackConfig` - // this can be removed once that one is migrated fully to - // use the `webpackFinal` property in the `main.js` file - config = rootWebpackConfig({ config }); - - // add your own webpack tweaks if needed - - return config; - }, -}; -``` - -{% callout type="note" title="Tip!" %} -The easiest way is probably to generate a new library and Storybook configuration and then copy & paste the `main.js`. -{% /callout %} - -### 2. Move any custom webpack configuration to `webpackFinal` - -In previous versions of Nx a custom `webpack.config.js` was generated with the following content: - -```javascript {% fileName="webpack.config.js" %} -const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); -const rootWebpackConfig = require('../../../.storybook/webpack.config'); -/** - * Export a function. Accept the base config as the only param. - * - * @param {Parameters[0]} options - */ -module.exports = async ({ config, mode }) => { - config = await rootWebpackConfig({ config, mode }); - - const tsPaths = new TsconfigPathsPlugin({ - configFile: './tsconfig.base.json', - }); - - config.resolve.plugins - ? config.resolve.plugins.push(tsPaths) - : (config.resolve.plugins = [tsPaths]); - - return config; -}; -``` - -Such webpack file is no more needed as Storybook v6.3+ has proper TypeScript support already built-in now. - -In case you made custom modifications to the `webpack.config.js` file, you need to move them over to the `main.js` `webpackFinal` property and then delete the `webpack.config.js`. - -### 3. Remove the root-level `.storybook/webpack.config.js` file - -Once you've migrated all your libraries, you can think about removing the root-level `.storybook/webpack.config.js` file and migrate any custom configuration there to `.storybook/main.js` `webpackFinal` property in the very same folder. - -### 4. Opting in to Webpack 5 - -If you choose to opt-in to Webpack 5, by specifying `builder: 'webpack5'` in your project's `.storybook/main.(js|ts)` (as shown above, in the example of a newly generated `main.js` file), don't forget to add the Storybook dependencies for Webpack 5 to work: - -```shell -yarn add -D @storybook/builder-webpack5 @storybook/manager-webpack5 -``` - -or if you're using `npm`: - -```shell -npm install --save-dev @storybook/builder-webpack5 @storybook/manager-webpack5 -``` diff --git a/docs/generated/packages/storybook/documents/migrate-webpack-final-react.md b/docs/generated/packages/storybook/documents/migrate-webpack-final-react.md deleted file mode 100644 index 53600951a1..0000000000 --- a/docs/generated/packages/storybook/documents/migrate-webpack-final-react.md +++ /dev/null @@ -1,216 +0,0 @@ ---- -title: 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. ---- - -# Nx React Storybook Addon - -{% callout type="info" title="Configure webpack for Storybook" %} -If you are looking for how you can configure webpack for Storybook, please check out our guide: [How to configure Webpack and Vite for Storybook](/packages/storybook/documents/custom-builder-configs). -{% /callout %} - -Nx 12.7 comes with a dedicated Storybook addon for React which dramatically simplifies the Storybook setup and makes sure that Storybook uses the same webpack configuration as your React applications running within an Nx workspace. - -{% youtube -src="https://www.youtube.com/embed/oUE74McS_NY" -title="New in Nx 12.7: React Storybook Preset" -/%} - -Here are the main differences to the previous versions of Nx: - -- there's no `webpack.config.js`; Custom webpack configurations can be added in the `webpackFinal` property of the `main.js` file -- the `main.js` file now contains a predefined Storybook addon exported by `@nx/react/plugins/storybook`. - -Here's an example of a newly generated `main.js` file: - -```javascript {% fileName=".storybook/main.js" %} -// project-level .storybook/main.js file -const rootMain = require('../../../.storybook/main'); - -module.exports = { - ...rootMain, - - core: { - ...rootMain.core, - // opt-into Storybook Webpack 5 - builder: 'webpack5', - }, - - stories: [ - ...rootMain.stories, - '../src/lib/**/*.stories.mdx', - '../src/lib/**/*.stories.@(js|jsx|ts|tsx)', - ], - addons: [...rootMain.addons, '@nx/react/plugins/storybook'], - webpackFinal: async (config, { configType }) => { - // apply any global webpack configs that might have been specified in .storybook/main.js - if (rootMain.webpackFinal) { - config = await rootMain.webpackFinal(config, { configType }); - } - - // add your own webpack tweaks if needed - - return config; - }, -}; -``` - -At the Nx workspace root level, the configuration file looks as follows: - -```javascript {% fileName=".storybook/main.js" %} -// root level .storybook/main.js file -module.exports = { - stories: [], - addons: ['@storybook/addon-essentials'], - // uncomment the property below if you want to apply some webpack config globally - // webpackFinal: async (config, { configType }) => { - // // Make whatever fine-grained changes you need that should apply to all storybook configs - - // // Return the altered config - // return config; - // }, -}; -``` - -## Migrating - -If you're upgrading from a lower version of Nx, your old Storybook configuration will still work. New configurations generated will use the new syntax as shown above. The newly generated code will also make sure to extend from a global `webpack.config.js` which might exist in the root-level `.storybook/` directory of your Nx workspace. - -This gives you the flexibility to incrementally migrate your configurations. - -Here's the step-by-step migration process: - -### 1. adjust the `main.js` file - -Restructure your `main.js` file so that it looks like in the example illustrated above. - -If you need to keep your root-level `.storybook/webpack.config.js` for now, then make sure you adjust the `main.js` in a way that it properly calls the root-level `webpack.config.js` to inherit all of the global configurations. - -```javascript {% fileName=".storybook/webpack.config.js" %} -const rootMain = require('../../../.storybook/main'); -const rootWebpackConfig = require('../../../.storybook/webpack.config'); - -module.exports = { - ...rootMain, - //... - webpackFinal: async (config) => { - // for backwards compatibility call the `rootWebpackConfig` - // this can be removed once that one is migrated fully to - // use the `webpackFinal` property in the `main.js` file - config = rootWebpackConfig({ config }); - - // add your own webpack tweaks if needed - - return config; - }, -}; -``` - -{% callout type="note" title="Tip!" %} -The easiest way is probably to generate a new library and Storybook configuration and then copy & paste the `main.js`. -{% /callout %} - -### 2. Move any custom webpack configuration to `webpackFinal` - -In previous versions of Nx a custom `webpack.config.js` was generated with the following content: - -```javascript {% fileName="webpack.config.js" %} -module.exports = async ({ config, mode }) => { - config = await rootWebpackConfig({ config, mode }); - - const tsPaths = new TsconfigPathsPlugin({ - configFile: './tsconfig.base.json', - }); - - config.resolve.plugins - ? config.resolve.plugins.push(tsPaths) - : (config.resolve.plugins = [tsPaths]); - - // Found this here: https://github.com/nrwl/nx/issues/2859 - // And copied the part of the solution that made it work - - const svgRuleIndex = config.module.rules.findIndex((rule) => { - const { test } = rule; - - return test.toString().startsWith('/\\.(svg|ico'); - }); - config.module.rules[svgRuleIndex].test = - /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/; - - config.module.rules.push( - { - test: /\.(png|jpe?g|gif|webp)$/, - loader: require.resolve('url-loader'), - options: { - limit: 10000, // 10kB - name: '[name].[hash:7].[ext]', - }, - }, - { - test: /\.svg$/, - oneOf: [ - // If coming from JS/TS file, then transform into React component using SVGR. - { - issuer: { - test: /\.[jt]sx?$/, - }, - use: [ - { - loader: require.resolve('@svgr/webpack'), - options: { - svgo: false, - titleProp: true, - ref: true, - }, - }, - { - loader: require.resolve('url-loader'), - options: { - limit: 10000, // 10kB - name: '[name].[hash:7].[ext]', - esModule: false, - }, - }, - ], - }, - // Fallback to plain URL loader. - { - use: [ - { - loader: require.resolve('url-loader'), - options: { - limit: 10000, // 10kB - name: '[name].[hash:7].[ext]', - }, - }, - ], - }, - ], - } - ); - - return config; -}; -``` - -Such webpack file is no more needed as the `@nx/react/plugins/storybook` now takes care of it. - -In case you made custom modifications to the `webpack.config.js` file, you need to move them over to the `main.js` `webpackFinal` property and then delete the `webpack.config.js`. - -### 3. Remove the root-level `.storybook/webpack.config.js` file - -Once you've migrated all your libraries, you can think about removing the root-level `.storybook/webpack.config.js` file and migrate any custom configuration there to `.storybook/main.js` `webpackFinal` property in the very same folder. - -### 4. Opting in to Webpack 5 - -If you choose to opt-in to Webpack 5, by specifying `builder: 'webpack5'` in your project's `.storybook/main.(js|ts)` (as shown above, in the example of a newly generated `main.js` file), don't forget to add the Storybook dependencies for Webpack 5 to work: - -```shell -yarn add -D @storybook/builder-webpack5 @storybook/manager-webpack5 -``` - -or if you're using `npm`: - -```shell -npm install --save-dev @storybook/builder-webpack5 @storybook/manager-webpack5 -``` diff --git a/docs/generated/packages/storybook/documents/overview-angular.md b/docs/generated/packages/storybook/documents/overview-angular.md deleted file mode 100644 index 24a1c24357..0000000000 --- a/docs/generated/packages/storybook/documents/overview-angular.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Set up Storybook for Angular Projects -description: This guide explains how to set up Storybook for Angular projects in your Nx workspace. ---- - -# Set up Storybook for Angular Projects - -This guide will walk you through setting up [Storybook](https://storybook.js.org) for Angular projects in your Nx workspace. - -{% callout type="warning" title="Set up Storybook in your workspace" %} -You first need to set up Storybook for your Nx workspace, if you haven't already. You can read the [Storybook plugin overview guide](/packages/storybook) to get started. -{% /callout %} - -## Generate Storybook Configuration for an Angular project - -You can generate Storybook configuration for an individual Angular project by using the [`@nx/angular:storybook-configuration` generator](/packages/angular/generators/storybook-configuration), like this: - -```shell -nx g @nx/angular:storybook-configuration project-name -``` - -## Auto-generate Stories - -The [`@nx/angular:storybook-configuration` generator](/packages/angular/generators/storybook-configuration) has the option to automatically generate `*.stories.ts` files for each component declared in the library. The stories will be generated using [Component Story Format 3 (CSF3)](https://storybook.js.org/blog/storybook-csf3-is-here/). - -```text -/ -├── my.component.ts -└── my.component.stories.ts -``` - -If you add more components to your project, and want to generate stories for all your (new) components at any point, you can use the [`@nx/angular:stories` generator](/packages/angular/generators/stories): - -```shell -nx g @nx/angular:stories --project= -``` - -{% callout type="note" title="Example" %} -Let's take for a example a library in your workspace, under `libs/feature/ui`, called `feature-ui`. This library contains a component, called `my-button`. - -The command to generate stories for that library would be: - -```shell -nx g @nx/angular:stories --project=feature-ui -``` - -and the result would be the following: - -```text -/ -├── apps/ -├── libs/ -│ ├── feature/ -│ │ ├── ui/ -| | | ├── .storybook/ -| | | ├── src/ -| | | | ├──lib -| | | | | ├──my-button -| | | | | | ├── my-button.component.ts -| | | | | | ├── my-button.component.stories.ts -| | | | | | └── etc... -| | | | | └── etc... -| | | ├── README.md -| | | ├── tsconfig.json -| | | └── etc... -| | └── etc... -| └── etc... -├── nx.json -├── package.json -├── README.md -└── etc... -``` - -{% /callout %} - -## Cypress tests for Stories - -The [`@nx/angular:storybook-configuration` generator](/packages/angular/generators/storybook-configuration) gives the option to set up an e2e Cypress app that is configured to run against the project's Storybook instance. - -To launch Storybook and run the Cypress tests against the iframe inside of Storybook: - -```shell -nx run project-name-e2e:e2e -``` - -The url that Cypress points to should look like this: - -`'/iframe.html?id=buttoncomponent--primary&args=text:Click+me!;padding;style:default'` - -- `buttoncomponent` is a lowercase version of the `Title` in the `*.stories.ts` file. -- `primary` is the name of an individual story. -- `style=default` sets the `style` arg to a value of `default`. - -Changing args in the url query parameters allows your Cypress tests to test different configurations of your component. You can [read the documentation](https://storybook.js.org/docs/angular/writing-stories/args#setting-args-through-the-url) for more information. - -## Example Files - -Let's take for a example a library in your workspace, under `libs/feature/ui`, called `feature-ui` with a component, called `my-button`. - -### Story file - -The [`@nx/angular:storybook-configuration` generator](/packages/angular/generators/storybook-configuration) would generate a Story file that looks like this: - -```typescript {% fileName="libs/feature/ui/src/lib/my-button/my-button.component.stories.ts" %} -import { Meta } from '@storybook/angular'; -import { MyButtonComponent } from './my-button.component'; - -export default { - title: 'MyButtonComponent', - component: MyButtonComponent, -} as Meta; - -export const Primary = { - render: (args: MyButtonComponent) => ({ - props: args, - }), - args: { - text: 'Click me!', - padding: 10, - disabled: true, - }, -}; -``` - -### Cypress test file - -For the library described above, Nx would generate an E2E project called `feature-ui-e2e` with a Cypress test file that looks like this: - -```typescript {% fileName="apps/feature-ui-e2e/src/e2e/my-button/my-button.component.cy.ts" %} -describe('feature-ui', () => { - beforeEach(() => - cy.visit( - '/iframe.html?id=mybuttoncomponent--primary&args=text:Click+me!;padding:10;disabled:true;' - ) - ); - - it('should contain the right text', () => { - cy.get('button').should('contain', 'Click me!'); - }); -}); -``` - -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](/deprecated/storybook/angular-storybook-targets) -- [Configuring styles and preprocessor options](/packages/storybook/documents/angular-configuring-styles) -- [The `browserTarget`](/deprecated/storybook/angular-browser-target) - -You can find all Storybook-related Nx topics [here](/packages#storybook). - -For more on using Storybook, see the [official Storybook documentation](https://storybook.js.org/docs/angular/get-started/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/) - -- [Set up Storybook version 7](/packages/storybook/documents/storybook-7-setup) -- [Migrate to Storybook version 7](/packages/storybook/generators/migrate-7) - -#### Older migration scenarios - -- [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 deleted file mode 100644 index 523bd77de8..0000000000 --- a/docs/generated/packages/storybook/documents/overview-react.md +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: Set up Storybook for React Projects -description: This guide explains how to set up Storybook for React projects in your Nx workspace. ---- - -# Set up Storybook for React Projects - -This guide will walk you through setting up [Storybook](https://storybook.js.org) for React projects in your Nx workspace. - -{% callout type="warning" title="Set up Storybook in your workspace" %} -You first need to set up Storybook for your Nx workspace, if you haven't already. You can read the [Storybook plugin overview guide](/packages/storybook) to get started. -{% /callout %} - -## Generate Storybook Configuration for a React project - -You can generate Storybook configuration for an individual React project by using the [`@nx/react:storybook-configuration` generator](/packages/react/generators/storybook-configuration), like this: - -```shell -nx g @nx/react:storybook-configuration project-name -``` - -## Nx React Storybook Preset - -The [`@nx/react`](/packages/react) package ships with a Storybook addon to make sure it uses the very same configuration as your Nx React application. When you generate a Storybook configuration for a project, it'll automatically add the addon to your configuration. - -```typescript -module.exports = { - ... - addons: ['@storybook/addon-essentials', ..., '@nx/react/plugins/storybook'], - ... -}; -``` - -## Auto-generate Stories - -The [`@nx/react:storybook-configuration` generator](/packages/react/generators/storybook-configuration) has the option to automatically generate `*.stories.ts|tsx` files for each component declared in the library. The stories will be generated using [Component Story Format 3 (CSF3)](https://storybook.js.org/blog/storybook-csf3-is-here/). - -```text -/ -├── my-component.tsx -└── my-component.stories.tsx -``` - -If you add more components to your project, and want to generate stories for all your (new) components at any point, you can use the [`@nx/react:stories` generator](/packages/react/generators/stories): - -```shell -nx g @nx/react:stories --project= -``` - -{% callout type="note" title="Example" %} -Let's take for a example a library in your workspace, under `libs/feature/ui`, called `feature-ui`. This library contains a component, called `my-button`. - -The command to generate stories for that library would be: - -```shell -nx g @nx/react:stories --project=feature-ui -``` - -and the result would be the following: - -```text -/ -├── apps/ -├── libs/ -│ ├── feature/ -│ │ ├── ui/ -| | | ├── .storybook/ -| | | ├── src/ -| | | | ├──lib -| | | | | ├──my-button -| | | | | | ├── my-button.tsx -| | | | | | ├── my-button.stories.tsx -| | | | | | └── etc... -| | | | | └── etc... -| | | ├── README.md -| | | ├── tsconfig.json -| | | └── etc... -| | └── etc... -| └── etc... -├── nx.json -├── package.json -├── README.md -└── etc... -``` - -{% /callout %} - -## Cypress tests for Stories - -The [`@nx/react:storybook-configuration` generator](/packages/react/generators/storybook-configuration) gives the option to set up an e2e Cypress app that is configured to run against the project's Storybook instance. - -To launch Storybook and run the Cypress tests against the iframe inside of Storybook: - -```shell -nx run project-name-e2e:e2e -``` - -The url that Cypress points to should look like this: - -`'/iframe.html?id=mybutton--primary&args=text:Click+me!;padding;style:default'` - -- `buttoncomponent` is a lowercase version of the `Title` in the `*.stories.tsx` file. -- `primary` is the name of an individual story. -- `style=default` sets the `style` arg to a value of `default`. - -Changing args in the url query parameters allows your Cypress tests to test different configurations of your component. You can [read the documentation](https://storybook.js.org/docs/react/writing-stories/args#setting-args-through-the-url) for more information. - -## Example Files - -Let's take for a example a library in your workspace, under `libs/feature/ui`, called `feature-ui` with a component, called `my-button`. - -### Story file - -The [`@nx/react:storybook-configuration` generator](/packages/react/generators/storybook-configuration) would generate a Story file that looks like this: - -```typescript {% fileName="libs/feature/ui/src/lib/my-button/my-button.stories.tsx" %} -import type { Meta } from '@storybook/react'; -import { MyButton } from './my-button'; - -const Story: Meta = { - component: MyButton, - title: 'MyButton', -}; -export default Story; - -export const Primary = { - args: { - text: 'Click me!', - padding: 10, - disabled: true, - }, -}; -``` - -### Cypress test file - -For the library described above, Nx would generate an E2E project called `feature-ui-e2e` with a Cypress test file that looks like this: - -```typescript {% fileName="apps/feature-ui-e2e/src/e2e/my-button/my-button.cy.ts" %} -describe('feature-ui: MyButton component', () => { - beforeEach(() => - cy.visit( - '/iframe.html?id=mybutton--primary&args=text:Click+me!;padding;style:default' - ) - ); - - it('should contain the right text', () => { - cy.get('button').should('contain', 'Click me!'); - }); -}); -``` - -Depending on your Cypress version, the file will end with `.spec.ts` or `.cy.ts`. - -## More Documentation - -You can find all Storybook-related Nx topics [here](/packages#storybook). - -For more on using Storybook, see the [official Storybook documentation](https://storybook.js.org/docs/react/get-started/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/) - -- [Set up Storybook version 7](/packages/storybook/documents/storybook-7-setup) -- [Migrate to Storybook version 7](/packages/storybook/generators/migrate-7) - -#### Older migration scenarios - -- [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 b06f7f7b5c..6656f74d4e 100644 --- a/docs/generated/packages/storybook/documents/overview.md +++ b/docs/generated/packages/storybook/documents/overview.md @@ -185,7 +185,7 @@ To register a [Storybook addon](https://storybook.js.org/addons/) for all Storyb ### Setting up documentation -To set up documentation, you can use [Storybook Autodocs](https://storybook.js.org/docs/react/writing-docs/autodocs). For Angular, [you can use `compodoc`](/packages/storybook/documents/angular-storybook-compodoc) to infer `argTypes`. You can read more about `argTypes` in the [official Storybook `argTypes` documentation](https://storybook.js.org/docs/angular/api/argtypes#automatic-argtype-inference). +To set up documentation, you can use [Storybook Autodocs](https://storybook.js.org/docs/react/writing-docs/autodocs). For Angular, [you can use `compodoc`](/recipes/storybook/angular-storybook-compodoc) to infer `argTypes`. You can read more about `argTypes` in the [official Storybook `argTypes` documentation](https://storybook.js.org/docs/angular/api/argtypes#automatic-argtype-inference). You can read more about how to best set up documentation using Storybook for your project in the [official Storybook documentation](https://storybook.js.org/docs/react/writing-docs/introduction). @@ -193,8 +193,12 @@ You can read more about how to best set up documentation using Storybook for you 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) +- [Set up Storybook for Angular Projects](/recipes/storybook/overview-angular) +- [Set up Storybook for React Projects](/recipes/storybook/overview-react) + +You can find all Storybook-related Nx documentation in the [Storybook recipes section](/recipes/storybook). + +For more on using Storybook, see the [official Storybook documentation](https://storybook.js.org/docs/basics/introduction/). ### Migration Scenarios @@ -205,10 +209,6 @@ Here's more information on common migration scenarios for Storybook with Nx. For - [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/). - ## Older documentation 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-interaction-tests.md b/docs/generated/packages/storybook/documents/storybook-interaction-tests.md deleted file mode 100644 index b09cbe9ea2..0000000000 --- a/docs/generated/packages/storybook/documents/storybook-interaction-tests.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Setting up Storybook Interaction Tests with Nx -description: This guide explains how you can set up Storybook interaction tests on your Nx workspace. ---- - -# Setting up Storybook Interaction Tests with Nx - -[Storybook interaction tests](https://storybook.js.org/docs/react/writing-tests/interaction-testing) allow you to test user interactions within your Storybook stories. It enhances your [Storybook](https://storybook.js.org/) setup, ensuring that not only do your components look right, but they also work correctly when interacted with. - -You can read more about Storybook interaction tests in the following sections of the Storybook documentation: - -- [Storybook interaction tests for React](https://storybook.js.org/docs/react/writing-tests/interaction-testing) -- [Storybook interaction tests for Angular](https://storybook.js.org/docs/angular/writing-tests/interaction-testing) -- [Storybook test runner](https://storybook.js.org/docs/react/writing-tests/test-runner) -- [The `play` function](https://storybook.js.org/docs/react/writing-stories/play-function) - -{% callout type="warning" title="Set up Storybook in your workspace" %} -You first need to set up Storybook for your Nx workspace, if you haven't already. You can read the [Storybook plugin overview guide](/packages/storybook) to get started. -{% /callout %} - -## Setup Storybook Interaction Tests - -During the setup, you'll be prompted about setting up interaction tests. Choose `yes` when asked if you want to set up Storybook interaction tests. - -The `--interactionTests` flag is true by default, so when you're setting up Storybook, you can just press enter to accept the default value, or even pass the flag directly. Make sure to use the framework-specific generators, so that you also get your stories set up correctly: - -{% tabs %} -{% tab label="Angular" %} - -```shell -nx g @nx/angular:storybook-configuration project-name --interactionTests=true -``` - -{% /tab %} -{% tab label="React" %} - -```shell -nx g @nx/react:storybook-configuration project-name --interactionTests=true -``` - -{% /tab %} -{% tab label="No framework" %} - -```shell -nx g @nx/storybook:configuration project-name --interactionTests=true -``` - -{% /tab %} -{% /tabs %} - -This command will: - -- [Set up Storybook for your project](/packages/storybook) - including the `@storybook/addon-interactions` addon. -- Add a `play` function to your stories. -- Install the necessary dependencies. -- Generate a `test-storybook` target in your project's `project.json`, which has a command to invoke the Storybook test runner. - -## Writing an Interaction Test - -The Nx generator will create a very simple interaction test for you. You can find it in the `.stories.ts` file for your component. This test will only be asserting if some text exists in your component. -You can modify it to suit your needs. - -Let's take an example of a simple React component for a button: - -```typescript -import React, { useState } from 'react'; - -export function Button() { - const [count, setCount] = useState(0); - - const handleClick = () => { - setCount(count + 1); - }; - - return ( - - ); -} - -export default Button; -``` - -In your `.stories.ts` file for that component, you can use the play function to simulate interactions. For example: - -```typescript -export const ButtonClicked: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - const button = canvas.getByRole('button'); - await userEvent.click(button); - expect(canvas.getByRole('button').innerText).toBe( - "You've clicked me 1 times" - ); - await userEvent.click(button); - expect(canvas.getByRole('button').innerText).toBe( - "You've clicked me 2 times" - ); - }, -}; -``` - -Here, the play function is simulating a click on the button using the `userEvent.click` method. It is then asserting that the button's text has changed to reflect the number of times it has been clicked. - -You can read more about how to write interaction tests in the [Storybook documentation](https://storybook.js.org/docs/react/writing-tests/interaction-testing). - -## Running Interaction Tests - -To run the interaction tests, you can use the `test-storybook` target that was generated for your project: - -```bash -nx test-storybook project-name -``` - -Make sure you have Storybook running in another tab, so that the test runner can connect to it: - -```bash -nx storybook project-name -``` - -## Interaction Tests vs. Cypress E2E Tests - -As the landscape of testing has evolves, we are also adjusting our approach to testing in Nx, and the Storybook generators. Nx has been consistently suggesting the use of Cypress for e2e tests in conjunction with Storybook. This approach, while effective, had its own challenges. A new, separate e2e project would be generated, and setup specifically to work with Storybook, leading to a bifurcated setup: your component stories in one place, and the e2e tests that validated them in another. - -However, with the introduction of Storybook Interaction Tests, this approach can be simplified. This new feature allows developers to integrate tests directly within the stories they are already creating, making the development and testing process more straightforward. Why maintain two separate projects or setups when you can do everything in one place? - -Choosing to promote Storybook Interaction Tests over the previous Cypress e2e setup was not a decision made lightly. Here's why we believe it's a beneficial shift: - -- **Unified Workflow:** Interaction tests allow developers to keep their focus on one tool. Instead of juggling between Storybook and a separate e2e project, everything is integrated. This means quicker iterations and a simplified dev experience. - -- **Leaner Project Structure:** Avoiding the need to generate a separate e2e project means fewer files, less configuration, and a more straightforward project structure. This can make onboarding new developers or navigating the codebase simpler. - -- **Optimized Performance:** Interaction tests are lightweight and quick to execute compared to traditional e2e tests. They run directly in the context of the component story, ensuring that tests are precise and fast. - -- **Consistency:** Keeping the stories and their associated tests together ensures a tighter bond between what's developed and what's tested. It reduces the chances of tests becoming outdated or misaligned with the component's actual behavior. - -Because of these benefits, it made sense for our Storybook configuration generator to switch from the Cypress e2e + Storybook combination to the integrated approach of Storybook Interaction Tests. By integrating e2e-like tests into the existing Storybook setup, we offer developers a smoother, more efficient, and simpler setup and testing experience. diff --git a/docs/generated/packages/storybook/documents/upgrade-storybook-v6-angular.md b/docs/generated/packages/storybook/documents/upgrade-storybook-v6-angular.md deleted file mode 100644 index d2a5fd4a36..0000000000 --- a/docs/generated/packages/storybook/documents/upgrade-storybook-v6-angular.md +++ /dev/null @@ -1,204 +0,0 @@ ---- -title: 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. ---- - -# Upgrading to Storybook 6 (and Nx versions >10.1.x and <14.0.0) - -_Disclaimer: From Nx 14.0.0 and on, Nx does not support Storybook v.5. If your workspace is on a version of Nx older than Nx 14, then you will be able to use the generators described in this guide. If you're using Nx >14, then you will already have been automatically migrated to Storybook 6._ - -Nx now comes with [Storybook version 6](https://storybook.js.org/releases/6.0). Chances are, if you used Nx version `10.1.x` or older with Storybook, you are using [Storybook version 5.3](https://storybook.js.org/releases/5.3) with configuration files of [Storybook version 5.2](https://storybook.js.org/releases/5.2). - -Nx version `10.2.x` will continue to support Storybook version `5.2.x`, however newer versions of Nx will only support Storybook version `6` (and on). - -When you are running the Nx workspace migration script, your Storybook instances and configurations across your apps and libraries will NOT be migrated automatically. We chose not to migrate your Storybook instances and configurations across your apps and libraries automatically, since there a number of breaking changes that Storybook introduced in versions `5.3` and `6.0`, and making decisions on what to migrate automatically would risk the integrity of your code. - -Instead, when you choose to migrate from Nx versions `<10.1.x` to Nx versions `>10.2.x` (using the Nx migration script - `nx migrate`) we will keep your Storybook packages and Storybook instances and configurations intact. We suggest that you do the migration on your own, using the guide below, with all the references to the official Storybook migration guides. Look at the use cases below, and follow the one that matches your case. - -## Use Cases - -### Use case 1: Create an Nx workspace from scratch using the latest version of Nx - -If you are creating an Nx workspace using the latest version of Nx, the latest version of Storybook (version 6) will be used as well. You do not need to do anything. - -### Use case 2: I already have an Nx workspace that does NOT use Storybook and I want to migrate to the latest Nx - -If you already have an Nx workspace with a previous version of Nx that does NOT use Storybook, and you migrate to the latest Nx using the migrate scripts provided by Nx, and then, after the migration to the latest Nx, you choose to add Storybook, the latest version of Storybook will be used. You do not need to do anything. - -### Use case 3: I already have an Nx workspace with Storybook and I want to migrate to the latest Nx - -In that case, when you run the Nx migration scripts, the scripts will ignore the Storybook packages, the Storybook configuration files, the Storybook instances in your apps and libraries, and all the generated stories. If you continue to add Storybook configurations and Storybook instances to new libraries and applications, then the version of Storybook that you already have will be used (most probably, if you have not changed anything manually, that version will be `5.3.9` using, however, the configuration files of `5.2`). You will have to do the [upgrade to the latest Storybook on your own, manually](#upgrading-to-storybook-6-manually). After that, Nx will use that version, and configure all new Storybook instances using the new version. - -## Upgrading to Storybook 6 using the Nx migration generator - -### Some info about the generator - -The `@nx/angular:storybook-migrate-defaults-5-to-6` generator will not exactly do a migration. It will perform the following actions: - -- It will generate new Storybook configuration files using the new (`>6.x`) Storybook way. The way it will do that is, it will look in all the `project.json` files and it will find all the projects that have a `Storybook` configuration. Using the `configFolder` path provided there, it will go and generate new Storybook instances in all these paths. Finally, it will generate a new Storybook instance at the root directory. - -- If you choose to `keepOld`, then it will add all your existing Storybook configuration files into another folder labeled `.old_storybook`. - -- It will update all the Storybook-related (`@storybook/*`) packages in your `package.json`. - -### How to use the generator - -That way, you can have working Storybook instances for all your projects just by running - -```shell -nx g @nx/angular:storybook-migrate-defaults-5-to-6 -``` - -### What if I had made changes to the defaults? - -In case you had made customizations to the default Storybook configurations, you can then manually change each of your Storybook instance configuration files using the official [Storybook 6 Migration Guide](https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5) to make sure you use the new syntax. Your old configuration files are available to you to use as a reference. - -Please check out this official [Storybook 6 Migration Guide](https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5) article, as well as the [detailed guides here](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-53x-to-60x). - -### What if I am not ready to change everything at once? - -The generator gives you the option to migrate one project at a time. You can provide the `--name=PROJECT_NAME` flag, and then the generator will **only** generate new files for the specified project. - -Please note that this option will NOT update all the Storybook-related (`@storybook/*`) packages in your `package.json`, or the root Storybook folder. The reason is that if you want to do the migration gradually, one project at a time, you want your old, existing, projects, to still work. That way, you will still be able to run your old, non-migrated Storybook projects. However, you will not be able to run any migrated Storbook projects. Once you have migrated all your Storybook projects, you can run `nx g @nx/angular:storybook-migrate-defaults-5-to-6` once again, and the generator will take care of updating all the Storybook-related (`@storybook/*`) packages in your `package.json` and it will also generate the new Storybook files for the root Storybook directory. - -### General tip: - -**Commit any changes you have locally**. We would suggest that you start the migration with a clean git history, in case anything goes wrong. - -## Upgrading to Storybook 6 manually - -There is really no great reason for doing the migration completely manually. The `@nx/angular:storybook-migrate-defaults-5-to-6` generator [will take care of Steps 1, 2 and 3](#upgrading-to-storybook-6-using-the-nx-migration-generator). What you will need to do after running the generator is that you have to manually migrate any custom changes you had done to the default Storybook configuration files that were automatically generated by Nx when you first used Nx Storybook. To do the manual migration you should use the official [Storybook 6 Migration Guide](https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5) article, as well as the [detailed guides here](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-53x-to-60x). - -However, if you still want to do everything manually, these are the steps you should follow: - -### Step 0: - -**Commit any changes you have locally**. We would suggest that you start the migration with a clean git history, in case anything goes wrong. - -### Step 1: Changing the configuration files from version 5.2 to 5.3 - -The most noticeable change in Storybook versions newer than `5.2` is that the configuration files have changed names and content. -Quoting from the [official Storybook migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-52x-to-53x): - -- `presets.js` has been renamed to `main.js`. `main.js` is the main point of configuration for storybook. -- `config.js` has been renamed to `preview.js`. `preview.js` configures the "preview" iframe that renders your components. -- `addons.js` has been renamed to `manager.js`. `manager.js` configures Storybook's "manager" UI that wraps the preview, and also configures addons panel. - -Please follow the [official Storybook version 5.2.x to 5.3.x migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-52x-to-53x) to change your files accordingly. - -If you are using Storybook using only the generated files after running the `storybook-configuration` generator, things might be easier for you. Please check the [sample files for a manual upgrade](#sample-files-for-manual-upgrade). - -### Step 2: Going from version 5.3 to 6.0 - -Please check out this official [Storybook 6 Migration Guide](https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5) article, as well as the [detailed guides here](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-53x-to-60x). - -- One big change in Storybook version `6` is that it has **built-in Typescript support**. This means that you can remove Typescript configurations from your configuration files. -- Please also **check that your stories match any differences in syntax** introduced in versions `5.3` and `6.0`. - -### Step 3: Upgrade all `@storybook/*` packages in your project - -Check your `package.json` file for all `@storybook` packages. Install the latest versions of these, using `yarn`: - -For example: - -```shell -yarn add --dev @storybook/angular@latest -``` - -### Step 4: Check that everything works as expected - -Check that everything works as expected. If you are still having trouble, you can submit you issue in the [GitHub Nx repo](https://github.com/nrwl/nx). We wish you luck! - -## Sample files for manual upgrade - -If you have not changed the content of the files which the `storybook-configuration` generator produced, you can use the following samples to migrate to Storybook `6`: - -### Configuring the root `./storybook` directory - -- In the root `./storybook` directory, create a new file named `main.js` with the following content: - -```typescript {% fileName="main.js" %} -module.exports = { - stories: [], - addons: ['@storybook/addon-essentials'], -}; -``` - -- If you have any addons in the `addons.js` file, add them in the `addons` array in the `main.js` file. If you are using the default generated files without any changes, you should not have any addons. You can now delete the `addons.js` file. - -- The other two files remain unchanged. - -### Configuring the Storybook instances across apps and libraries - the library-specific `./storybook` directories - -- In the library `./storybook` directory, create a new file named `main.js` with the following content: - -```typescript {% fileName="main.js" %} -const lib_main_module = require('../../.storybook/main'); - -lib_main_module.stories.push('../src/lib/**/*.stories.mdx'); -lib_main_module.stories.push('../src/lib/**/*.stories.@(js|jsx|ts|tsx)'); -module.exports = lib_main_module; -``` - -Please take extra care making sure that the path to the root `./storybook` directory provided in the first line is correct. - -- If you have any addons in the `addons.js` file, add them in the `addons` array in the `main.js` file. You can add any addons in the `addons` module array using the following syntax: - -```typescript {% fileName="main.js" %} -lib_main_module.addons.push(''); -``` - -After you add any addons in the `main.js` file, you can safely delete the `addons.js` file. If you are using the default generated files without any changes, your `addons.js` file should be empty (but an import line, referencing the root `addons.js` file). - -- Rename the file `config.js` to `preview.js` and remove the last line where your stories paths are configured. Now, the contents of the `preview.js` file will look like this: - -```typescript {% fileName="preview.js" %} -import { addDecorator } from '@storybook/angular'; -import { YourDecorator } from '@storybook/'; - -addDecorator(YourDecorator); -``` - -- Modify the contents of `webpack.config.js`. Remove the following lines, which are the TypeScript configuration, which is not needed by Storybook any more: - -```typescript {% fileName="webpack.config.js" %} -config.resolve.extensions.push('.ts', '.tsx'); -config.module.rules.push({ - test: /\.(ts|tsx)$/, - loader: require.resolve('babel-loader'), - options: { - presets: [ - '@babel/preset-env', - '@babel/preset-react', - '@babel/preset-typescript', - ], - }, -}); -``` - -### Check final folder structure - -Your folder structure should now look like this: - -```text -/ -├── .storybook/ -│ ├── main.js -│ ├── tsconfig.json -│ └── webpack.config.js -├── apps/ -├── libs/ -│ └── / -│ ├── .storybook/ -│ │ ├── main.js -│ │ ├── tsconfig.json -│ │ └── webpack.config.js -│ ├── src/ -│ ├── README.md -│ ├── tsconfig.json -│ └── etc... -├── nx.json -├── package.json -├── README.md -└── etc... -``` diff --git a/docs/generated/packages/storybook/documents/upgrade-storybook-v6-react.md b/docs/generated/packages/storybook/documents/upgrade-storybook-v6-react.md deleted file mode 100644 index ff90ea654a..0000000000 --- a/docs/generated/packages/storybook/documents/upgrade-storybook-v6-react.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: 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. ---- - -# Upgrading to Storybook 6 (and Nx versions >10.1.x and <14.0.0) - -_Disclaimer: From Nx 14.0.0 and on, Nx does not support Storybook v.5. If your workspace is on a version of Nx older than Nx 14, then you will be able to use the generators described in this guide. If you're using Nx >14, then you will already have been automatically migrated to Storybook 6._ - -Nx now comes with [Storybook version 6](https://storybook.js.org/releases/6.0). Chances are, if you used Nx version `10.1.x` or older with Storybook, you are using [Storybook version 5.3](https://storybook.js.org/releases/5.3) with configuration files of [Storybook version 5.2](https://storybook.js.org/releases/5.2). - -Nx version `10.2.x` will continue to support Storybook version `5.2.x`, however newer versions of Nx will only support Storybook version `6` (and on). - -When you are running the Nx workspace migration script, your Storybook instances and configurations across your apps and libraries will NOT be migrated automatically. We chose not to migrate your Storybook instances and configurations across your apps and libraries automatically, since there a number of breaking changes that Storybook introduced in versions `5.3` and `6.0`, and making decisions on what to migrate automatically would risk the integrity of your code. - -Instead, when you choose to migrate from Nx versions `<10.1.x` to Nx versions `>10.2.x` (using the Nx migration script - `nx migrate`) we will keep your Storybook packages and Storybook instances and configurations intact. We suggest that you do the migration on your own, using the guide below, with all the references to the official Storybook migration guides. Look at the use cases below, and follow the one that matches your case. - -## Use Cases - -### Use case 1: Create an Nx workspace from scratch using the latest version of Nx - -If you are creating an Nx workspace using the latest version of Nx, the latest version of Storybook (version 6) will be used as well. You do not need to do anything. - -### Use case 2: I already have an Nx workspace that does NOT use Storybook and I want to migrate to the latest Nx - -If you already have an Nx workspace with a previous version of Nx that does NOT use Storybook, and you migrate to the latest Nx using the migrate scripts provided by Nx, and then, after the migration to the latest Nx, you choose to add Storybook, the latest version of Storybook will be used. You do not need to do anything. - -### Use case 3: I already have an Nx workspace with Storybook and I want to migrate to the latest Nx - -In that case, when you run the Nx migration scripts, the scripts will ignore the Storybook packages, the Storybook configuration files, the Storybook instances in your apps and libraries, and all the generated stories. If you continue to add Storybook configurations and Storybook instances to new libraries and applications, then the version of Storybook that you already have will be used (most probably, if you have not changed anything manually, that version will be `5.3.9` using, however, the configuration files of `5.2`). You will have to do the [upgrade to the latest Storybook on your own, manually](#upgrading-to-storybook-6-manually). After that, Nx will use that version, and configure all new Storybook instances using the new version. - -## Upgrading to Storybook 6 using the Nx migration generator - -### Some info about the generator - -The `@nx/react:storybook-migrate-defaults-5-to-6` generator will not exactly do a migration. It will perform the following actions: - -- It will generate new Storybook configuration files using the new (`>6.x`) Storybook way. The way it will do that is, it will look in all the `project.json` files and it will find all the projects that have a `Storybook` configuration. Using the `configFolder` path provided there, it will go and generate new Storybook instances in all these paths. Finally, it will generate a new Storybook instance at the root directory. - -- If you choose to `keepOld`, then it will add all your existing Storybook configuration files into another folder labeled `.old_storybook`. - -- It will update all the Storybook-related (`@storybook/*`) packages in your `package.json`. - -### How to use the generator - -That way, you can have working Storybook instances for all your projects just by running - -```shell -nx g @nx/react:storybook-migrate-defaults-5-to-6 -``` - -### What if I had made changes to the defaults? - -In case you had made customizations to the default Storybook configurations, you can then manually change each of your Storybook instance configuration files using the official [Storybook 6 Migration Guide](https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5) to make sure you use the new syntax. Your old configuration files are available to you to use as a reference. - -Please check out this official [Storybook 6 Migration Guide](https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5) article, as well as the [detailed guides here](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-53x-to-60x). - -### What if I am not ready to change everything at once? - -The generator gives you the option to migrate one project at a time. You can provide the `--name=PROJECT_NAME` flag, and then the generator will **only** generate new files for the specified project. - -Please note that this option will NOT update all the Storybook-related (`@storybook/*`) packages in your `package.json`, or the root Storybook folder. The reason is that if you want to do the migration gradually, one project at a time, you want your old, existing, projects, to still work. That way, you will still be able to run your old, non-migrated Storybook projects. However, you will not be able to run any migrated Storbook projects. Once you have migrated all your Storybook projects, you can run `nx g @nx/react:storybook-migrate-defaults-5-to-6` once again, and the generator will take care of updating all the Storybook-related (`@storybook/*`) packages in your `package.json` and it will also generate the new Storybook files for the root Storybook directory. - -### General tip: - -**Commit any changes you have locally**. We would suggest that you start the migration with a clean git history, in case anything goes wrong. - -## Upgrading to Storybook 6 manually - -There is really no great reason for doing the migration completely manually. The `@nx/react:storybook-migrate-defaults-5-to-6` generator [will take care of Steps 1, 2 and 3](#upgrading-to-storybook-6-using-the-nx-migration-generator). What you will need to do after running the generator is that you have to manually migrate any custom changes you had done to the default Storybook configuration files that were automatically generated by Nx when you first used Nx Storybook. To do the manual migration you should use the official [Storybook 6 Migration Guide](https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5) article, as well as the [detailed guides here](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-53x-to-60x). - -However, if you still want to do everything manually, these are the steps you should follow: - -### Step 0: - -**Commit any changes you have locally**. We would suggest that you start the migration with a clean git history, in case anything goes wrong. - -### Step 1: Changing the configuration files from version 5.2 to 5.3 - -The most noticeable change in Storybook versions newer than `5.2` is that the configuration files have changed names and content. -Quoting from the [official Storybook migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-52x-to-53x): - -- `presets.js` has been renamed to `main.js`. `main.js` is the main point of configuration for storybook. -- `config.js` has been renamed to `preview.js`. `preview.js` configures the "preview" iframe that renders your components. -- `addons.js` has been renamed to `manager.js`. `manager.js` configures Storybook's "manager" UI that wraps the preview, and also configures addons panel. - -Please follow the [official Storybook version 5.2.x to 5.3.x migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-52x-to-53x) to change your files accordingly. - -### Step 2: Going from version 5.3 to 6.0 - -Please check out this official [Storybook 6 Migration Guide](https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5) article, as well as the [detailed guides here](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-53x-to-60x). - -- One big change in Storybook version `6` is that it has **built-in Typescript support**. This means that you can remove Typescript configurations from your configuration files. -- Please also **check that your stories match any differences in syntax** introduced in versions `5.3` and `6.0`. - -### Step 3: Upgrade all `@storybook/*` packages in your project - -Check your `package.json` file for all `@storybook` packages. Install the latest versions of these, using `yarn`: - -For example: - -```shell -yarn add --dev @storybook/react@latest -``` - -### Step 4: Check that everything works as expected - -Check that everything works as expected. If you are still having trouble, you can submit you issue in the [GitHub Nx repo](https://github.com/nrwl/nx). We wish you luck! - -### Sample files for manual upgrade - -If you have not changed the content of the files which the `storybook-configuration` generator produced, you can use the following samples to migrate to Storybook `6`: - -### Configuring the root `./storybook` directory - -- In the root `./storybook` directory, create a new file named `main.js` with the following content: - -```typescript {% fileName="main.js" %} -module.exports = { - stories: [], - addons: ['@storybook/addon-essentials'], -}; -``` - -- If you have any addons in the `addons.js` file, add them in the `addons` array in the `main.js` file. If you are using the default generated files without any changes, you should not have any addons. You can now delete the `addons.js` file. - -- The other two files remain unchanged. - -### Configuring the Storybook instances across apps and libraries - the library-specific `./storybook` directories - -- In the library `./storybook` directory, create a new file named `main.js` with the following content: - -```typescript {% fileName="main.js" %} -const lib_main_module = require('../../.storybook/main'); - -lib_main_module.stories.push('../src/lib/**/*.stories.mdx'); -lib_main_module.stories.push('../src/lib/**/*.stories.@(js|jsx|ts|tsx)'); -module.exports = lib_main_module; -``` - -Please take extra care making sure that the path to the root `./storybook` directory provided in the first line is correct. - -- If you have any addons in the `addons.js` file, add them in the `addons` array in the `main.js` file. You can add any addons in the `addons` module array using the following syntax: - -```typescript {% fileName="main.js" %} -lib_main_module.addons.push(''); -``` - -After you add any addons in the `main.js` file, you can safely delete the `addons.js` file. If you are using the default generated files without any changes, your `addons.js` file should be empty (but an import line, referencing the root `addons.js` file). - -- Rename the file `config.js` to `preview.js` and remove the last line where your stories paths are configured. Now, the contents of the `preview.js` file will look like this: - -```typescript {% fileName="preview.js" %} -import { addDecorator } from '@storybook/react'; - -addDecorator(); -``` - -- Modify the contents of `webpack.config.js`. Remove the following lines, which are the TypeScript configuration, which is not needed by Storybook anymore: - -```typescript {% fileName="webpack.config.js" %} -config.resolve.extensions.push('.ts', '.tsx'); -config.module.rules.push({ - test: /\.(ts|tsx)$/, - loader: require.resolve('babel-loader'), - options: { - presets: [ - '@babel/preset-env', - '@babel/preset-react', - '@babel/preset-typescript', - ], - }, -}); -``` - -### Check final folder structure - -Your folder structure should now look like this: - -```treeview -/ -├── .storybook/ -│ ├── main.js -│ ├── tsconfig.json -│ └── webpack.config.js -├── apps/ -├── libs/ -│ └── / -│ ├── .storybook/ -│ │ ├── main.js -│ │ ├── tsconfig.json -│ │ └── webpack.config.js -│ ├── src/ -│ ├── README.md -│ ├── tsconfig.json -│ └── etc... -├── nx.json -├── package.json -├── README.md -└── etc... -``` diff --git a/docs/generated/packages/storybook/executors/build.json b/docs/generated/packages/storybook/executors/build.json index df5baa5d07..2715cb20aa 100644 --- a/docs/generated/packages/storybook/executors/build.json +++ b/docs/generated/packages/storybook/executors/build.json @@ -147,7 +147,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`](/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" + "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](/recipes/storybook/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 eb83f4d795..6cc2a1403f 100644 --- a/docs/generated/packages/storybook/executors/storybook.json +++ b/docs/generated/packages/storybook/executors/storybook.json @@ -113,7 +113,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`](/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" + "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](/recipes/storybook/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 cd73e68a13..1b065a2cb5 100644 --- a/docs/map.json +++ b/docs/map.json @@ -716,25 +716,84 @@ { "name": "Storybook", "id": "storybook", - "description": "Storybook how tos.", + "description": "Storybook strategies and setups.", "itemList": [ + { + "name": "Set up Storybook for React Projects", + "id": "overview-react", + "tags": ["storybook"], + "description": "This guide explains how to set up Storybook for React projects in your Nx workspace.", + "file": "shared/recipes/storybook/plugin-react" + }, + { + "name": "Set up Storybook for Angular Projects", + "id": "overview-angular", + "tags": ["storybook"], + "description": "This guide explains how to set up Storybook for Angular projects in your Nx workspace.", + "file": "shared/recipes/storybook/plugin-angular" + }, + { + "name": "Configuring Storybook on Nx", + "id": "configuring-storybook", + "tags": ["storybook"], + "description": "This guide explains how Storybook is configured on your Nx workspace.", + "file": "shared/recipes/storybook/configuring-storybook" + }, { "name": "One main Storybook instance for all projects", "id": "one-storybook-for-all", "tags": ["storybook"], - "file": "shared/recipes/one-storybook-for-all" + "description": "This guide explains how to consolidate all your Storybook stories from different projects into one unified Storybook instance. Ideal for Nx workspaces leveraging a single framework.", + "file": "shared/recipes/storybook/one-storybook-for-all" }, { "name": "One Storybook instance per scope", "id": "one-storybook-per-scope", "tags": ["storybook"], - "file": "shared/recipes/one-storybook-per-scope" + "description": "This guide explains how to set up individual Storybook instances for each scope within an Nx workspace. It provides a structured approach, emphasizing folder organization and thematic scope separation.", + "file": "shared/recipes/storybook/one-storybook-per-scope" }, { "name": "One main Storybook instance using Storybook Composition", "id": "one-storybook-with-composition", "tags": ["storybook"], - "file": "shared/recipes/one-storybook-with-composition" + "description": "This guide explains how to publish a unified Storybook instance from multiple frameworks within an Nx workspace using Storybook Composition.", + "file": "shared/recipes/storybook/one-storybook-with-composition" + }, + { + "name": "How to configure Webpack and Vite for Storybook", + "id": "custom-builder-configs", + "tags": ["storybook"], + "description": "This guide explains how to customize the webpack configuration and your vite configuration for Storybook.", + "file": "shared/recipes/storybook/custom-builder-configs" + }, + { + "name": "Setting up Storybook Interaction Tests with Nx", + "id": "storybook-interaction-tests", + "tags": ["storybook"], + "description": "This guide explains how you can set up Storybook interaction tests on your Nx workspace.", + "file": "shared/recipes/storybook/interaction-tests" + }, + { + "name": "Setting up Storybook Composition with Nx", + "id": "storybook-composition-setup", + "tags": ["storybook"], + "description": "This guide explains how you can set up Storybook composition on your Nx workspace.", + "file": "shared/recipes/storybook/storybook-composition-setup" + }, + { + "name": "Angular: Set up Compodoc for Storybook on Nx", + "id": "angular-storybook-compodoc", + "tags": ["storybook"], + "description": "This guide explains how to set up Compodoc for Storybook on Angular projects in a Nx workspace.", + "file": "shared/recipes/storybook/angular-storybook-compodoc" + }, + { + "name": "Angular: Configuring styles and preprocessor options", + "id": "angular-configuring-styles", + "tags": ["storybook"], + "description": "This document explains how to configure styles and preprocessor options in Angular projects with a Storybook configuration.", + "file": "shared/recipes/storybook/angular-configuring-styles" } ] }, @@ -2022,18 +2081,6 @@ "path": "/packages/storybook", "file": "shared/packages/storybook/plugin-overview" }, - { - "id": "overview-react", - "name": "Set up Storybook for React Projects", - "description": "This guide explains how to set up Storybook for React projects in your Nx workspace.", - "file": "shared/packages/storybook/plugin-react" - }, - { - "id": "overview-angular", - "name": "Set up Storybook for Angular Projects", - "description": "This guide explains how to set up Storybook for Angular projects in your Nx workspace.", - "file": "shared/packages/storybook/plugin-angular" - }, { "id": "best-practices", "name": "Storybook best practices for making the most out of Nx", @@ -2045,42 +2092,6 @@ "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", - "description": "This guide explains how Storybook is configured on your Nx workspace.", - "file": "shared/packages/storybook/configuring-storybook" - }, - { - "id": "custom-builder-configs", - "name": "How to configure Webpack and Vite for Storybook", - "description": "This guide explains how to customize the webpack configuration and your vite configuration for Storybook.", - "file": "shared/packages/storybook/custom-builder-configs" - }, - { - "id": "storybook-interaction-tests", - "name": "Setting up Storybook Interaction Tests with Nx", - "description": "This guide explains how you can set up Storybook interaction tests on your Nx workspace.", - "file": "shared/packages/storybook/interaction-tests" - }, - { - "id": "storybook-composition-setup", - "name": "Setting up Storybook Composition with Nx", - "description": "This guide explains how you can set up Storybook composition on your Nx workspace.", - "file": "shared/packages/storybook/storybook-composition-setup" - }, - { - "id": "angular-storybook-compodoc", - "name": "Angular: Set up Compodoc for Storybook on Nx", - "description": "This guide explains how to set up Compodoc for Storybook on Angular projects in a Nx workspace.", - "file": "shared/packages/storybook/angular-storybook-compodoc" - }, - { - "id": "angular-configuring-styles", - "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" } ] }, diff --git a/docs/shared/angular-standalone-tutorial/angular-standalone.md b/docs/shared/angular-standalone-tutorial/angular-standalone.md index f5c5019e95..95d324b2b7 100644 --- a/docs/shared/angular-standalone-tutorial/angular-standalone.md +++ b/docs/shared/angular-standalone-tutorial/angular-standalone.md @@ -822,7 +822,7 @@ Congrats, you made it!! You now know how to leverage the Nx standalone applicati Here's some more things you can dive into next: - Learn more about the [underlying mental model of Nx](/concepts/mental-model) -- Learn about popular generators such as [how to setup Tailwind](/recipes/angular/using-tailwind-css-with-angular-projects) or [add Storybook to your UI library](/packages/storybook/documents/overview-angular) +- Learn about popular generators such as [how to setup Tailwind](/recipes/angular/using-tailwind-css-with-angular-projects) or [add Storybook to your UI library](/recipes/storybook/overview-angular) - Learn how to [migrate your existing Angular CLI repo to Nx](/recipes/angular/migration/angular) - [Speed up CI: Run only tasks for project that got changed](/core-features/run-tasks#run-tasks-affected-by-a-pr) - [Speed up CI: Share your cache](/core-features/remote-cache) diff --git a/docs/shared/deprecated/storybook/angular-browser-target.md b/docs/shared/deprecated/storybook/angular-browser-target.md index 9c4537da40..dc1f6d1955 100644 --- a/docs/shared/deprecated/storybook/angular-browser-target.md +++ b/docs/shared/deprecated/storybook/angular-browser-target.md @@ -6,7 +6,7 @@ description: This document explains the role of the browserTarget in Angular pro # The `browserTarget` for Angular projects with a Storybook configuration {% callout type="note" title="Note" %} -This documentation page contains information about the [Storybook plugin](/packages/storybook), specifically regarding [Angular projects that are using Storybook](/packages/storybook/documents/overview-angular). +This documentation page contains information about the [Storybook plugin](/packages/storybook), specifically regarding [Angular projects that are using Storybook](/recipes/storybook/overview-angular). {% /callout %} ## Setting up `browserTarget` diff --git a/docs/shared/deprecated/storybook/angular-storybook-targets.md b/docs/shared/deprecated/storybook/angular-storybook-targets.md index bebfe5e2ca..d49ec1e083 100644 --- a/docs/shared/deprecated/storybook/angular-storybook-targets.md +++ b/docs/shared/deprecated/storybook/angular-storybook-targets.md @@ -6,10 +6,10 @@ description: This document explains the role of the storybook and build-storyboo # Information about `storybook` and `build-storybook` targets for Angular projects with a Storybook configuration {% callout type="note" title="Note" %} -This documentation page contains information about the [Storybook plugin](/packages/storybook), specifically regarding [Angular projects that are using Storybook](/packages/storybook/documents/overview-angular). +This documentation page contains information about the [Storybook plugin](/packages/storybook), specifically regarding [Angular projects that are using Storybook](/recipes/storybook/overview-angular). {% /callout %} -If you are on Nx version `>=14.1.8`, the [Nx Storybook plugin for _Angular_ projects](/packages/storybook/documents/overview-angular) uses the original Storybook executors for Angular (`"@storybook/angular:start-storybook"` and `"@storybook/angular:build-storybook"`) to serve and build Storybook. +If you are on Nx version `>=14.1.8`, the [Nx Storybook plugin for _Angular_ projects](/recipes/storybook/overview-angular) uses the original Storybook executors for Angular (`"@storybook/angular:start-storybook"` and `"@storybook/angular:build-storybook"`) to serve and build Storybook. That means that you can use the official [Storybook for Angular documentation (expand the "Troubleshooting" section)](https://storybook.js.org/docs/angular/get-started/install#troubleshooting) to configure the options for serving and building Storybook. diff --git a/docs/shared/deprecated/storybook/migrate-webpack-final-angular.md b/docs/shared/deprecated/storybook/migrate-webpack-final-angular.md index 22ac16b49b..379c9759ed 100644 --- a/docs/shared/deprecated/storybook/migrate-webpack-final-angular.md +++ b/docs/shared/deprecated/storybook/migrate-webpack-final-angular.md @@ -6,7 +6,7 @@ description: This guide explains how migrate from older versions of Storybook wh # Storybook Migration to webpackFinal {% callout type="info" title="Configure webpack for Storybook" %} -If you are looking for how you can configure webpack for Storybook, please check out our guide: [How to configure Webpack and Vite for Storybook](/packages/storybook/documents/custom-builder-configs). +If you are looking for how you can configure webpack for Storybook, please check out our guide: [How to configure Webpack and Vite for Storybook](/recipes/storybook/custom-builder-configs). {% /callout %} Nx 12.7 as in combination with Storybook v6.3 doesn't need a custom `webpack.config.js` which was previously required and auto-generated by Nx. diff --git a/docs/shared/deprecated/storybook/migrate-webpack-final-react.md b/docs/shared/deprecated/storybook/migrate-webpack-final-react.md index 53600951a1..cc122d9a3a 100644 --- a/docs/shared/deprecated/storybook/migrate-webpack-final-react.md +++ b/docs/shared/deprecated/storybook/migrate-webpack-final-react.md @@ -6,7 +6,7 @@ description: This guide explains how migrate from older versions of Storybook wh # Nx React Storybook Addon {% callout type="info" title="Configure webpack for Storybook" %} -If you are looking for how you can configure webpack for Storybook, please check out our guide: [How to configure Webpack and Vite for Storybook](/packages/storybook/documents/custom-builder-configs). +If you are looking for how you can configure webpack for Storybook, please check out our guide: [How to configure Webpack and Vite for Storybook](/recipes/storybook/custom-builder-configs). {% /callout %} Nx 12.7 comes with a dedicated Storybook addon for React which dramatically simplifies the Storybook setup and makes sure that Storybook uses the same webpack configuration as your React applications running within an Nx workspace. diff --git a/docs/shared/packages/cypress/cypress-plugin.md b/docs/shared/packages/cypress/cypress-plugin.md index 986a180e81..1fe24ec9a2 100644 --- a/docs/shared/packages/cypress/cypress-plugin.md +++ b/docs/shared/packages/cypress/cypress-plugin.md @@ -11,7 +11,7 @@ Cypress is a test runner built for the modern web. It has a lot of great feature > Info about [Cypress Component Testing can be found here](/packages/cypress/documents/cypress-component-testing) > -> Info about [using Cypress and Storybook can be found here](/packages/storybook/documents/overview-react#cypress-tests-for-storiesbook) +> Info about [using Cypress and Storybook can be found here](/recipes/storybook/overview-react#cypress-tests-for-storiesbook) If the `@nx/cypress` package is not installed, install the version that matches your `nx` package version. diff --git a/docs/shared/packages/react/react-plugin.md b/docs/shared/packages/react/react-plugin.md index 1953591a95..34cb819043 100644 --- a/docs/shared/packages/react/react-plugin.md +++ b/docs/shared/packages/react/react-plugin.md @@ -122,4 +122,4 @@ The library in `dist` is publishable to npm or a private registry. - [Using Cypress](/packages/cypress) - [Using Jest](/packages/jest) -- [Using Storybook](/packages/storybook/documents/overview-react) +- [Using Storybook](/recipes/storybook/overview-react) diff --git a/docs/shared/packages/storybook/angular-configuring-styles.md b/docs/shared/packages/storybook/angular-configuring-styles.md deleted file mode 100644 index 3abd446ae5..0000000000 --- a/docs/shared/packages/storybook/angular-configuring-styles.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Angular - Configuring styles and preprocessor options -description: This document explains how to configure styles and preprocessor options in Angular projects with a Storybook configuration. ---- - -# Configuring styles and preprocessor options for Angular projects with a Storybook configuration - -{% callout type="note" title="Note" %} -This documentation page contains information about the [Storybook plugin](/packages/storybook), specifically regarding [Angular projects that are using Storybook](/packages/storybook/documents/overview-angular). -{% /callout %} - -Angular supports including extra entry-point files for styles. Also, in case you use Sass, you can add extra base paths that will be checked for imports. In your project's `project.json` file you can use the `styles` and `stylePreprocessorOptions` properties in your `storybook` and `build-storybook` target `options`, as you would in your Storybook or your Angular configurations. If your project is an application, you can add these extra options in your `build` target. Your `storybook` and `build-storybook` `browserTarget` are going to be pointing to the `build` target, so they will pick up these styles from there. Check out the [Angular Workspace Configuration](https://angular.io/guide/workspace-config#styles-and-scripts-configuration) documentation for more information. You can also check the [official Storybook for Angular documentation](https://storybook.js.org/docs/angular/configure/styling-and-css) on working with styles and CSS. - -Your Storybook targets in your `project.json` will look like this: - -```jsonc {% fileName="project.json" %} - "storybook": { - "executor": "@storybook/angular:start-storybook", - "options": { - ... - "styles": ["some-styles.css"], - "stylePreprocessorOptions": { - "includePaths": ["some-style-paths"] - } - }, - ... - }, - "build-storybook": { - "executor": "@storybook/angular:build-storybook", - ... - "options": { - ... - "styles": ["some-styles.css"], - "stylePreprocessorOptions": { - "includePaths": ["some-style-paths"] - } - }, - ... - } -``` - -## Using build-storybook for styles - -Chances are, you will most probably need the same `styles` and `stylePreprocessorOptions` for your `storybook` and your `build-storybook` targets. Since you're using `browserTarget`, that means that Storybook will use the `options` of `build` or `build-storybook` when executing the `storybook` task (when compiling your Storybook). In that case, as explained, you _only_ need to add the `styles` or `stylePreprocessorOptions` to the corresponding target (`build` or `build-storybook`) that the `browserTarget` is pointing to. In that case, for example, the configuration shown above would look like this: - -```jsonc {% fileName="project.json" %} - "storybook": { - "executor": "@storybook/angular:start-storybook", - "options": { - ... - "browserTarget": "my-project:build-storybook" - }, - ... - }, - "build-storybook": { - "executor": "@storybook/angular:build-storybook", - ... - "options": { - ... - "browserTarget": "my-project:build-storybook", - "styles": ["some-styles.css"], - "stylePreprocessorOptions": { - "includePaths": ["some-style-paths"] - } - }, - ... - } -``` diff --git a/docs/shared/packages/storybook/angular-storybook-compodoc.md b/docs/shared/packages/storybook/angular-storybook-compodoc.md deleted file mode 100644 index 06f8ba79be..0000000000 --- a/docs/shared/packages/storybook/angular-storybook-compodoc.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -title: Angular - Set up Compodoc for Storybook on Nx -description: This guide explains how to set up Compodoc for Storybook on Angular projects in a Nx workspace. ---- - -# Set up Compodoc for Storybook on Nx - -{% callout type="note" title="Note" %} -This documentation page contains information about the [Storybook plugin](/packages/storybook), specifically regarding [Angular projects that are using Storybook](/packages/storybook/documents/overview-angular). -{% /callout %} - -{% github-repository url="https://github.com/nrwl/nx-recipes/tree/main/storybook-compodoc-angular" /%} - -## What is Compodoc - -[Compodoc](https://compodoc.app/) is a documentation generator for Angular applications. You can use [JSDoc](https://jsdoc.app/) comment blocks above your components, directives, and other Angular constructs, to add documentation to the elements that you want. These comments are used by `compodoc` to generate documentation for your application. As is noted in the [Compodoc documentation](https://compodoc.app/guides/comments.html), "Compodoc uses the Typescript AST parser and it's internal APIs, so the comments have to be JSDoc comments". You can read more about the JSDoc tags that Compodoc supports [here](https://compodoc.app/guides/jsdoc-tags.html). - -## How to use Compodoc in Storybook to write documentation - -In Storybook, it makes sense to add explanatory comments above your `@Input`s and `@Output`s, since these are the main elements that Storybook focuses on. The `@Input`s and `@Output`s are the elements that you can interact with in the Storybook UI, the controls. - -Let's take for example an Angular component - a button - that has an `@Input` for the size of the button. In Compodoc, we could describe this input as follows: - -```ts - /** - * How large should the button be? - */ - @Input() - size: 'small' | 'medium' | 'large' = 'medium'; -``` - -This comment would result in the following documentation in Compodoc: - -![Button size `@Input` generated documentation](/shared/packages/storybook/button-size-input.png) - -If we add a description and a default value to each of our component `@Input`s, we will end up with a full documentation page. See a full example of the button component [here](https://github.com/nrwl/nx-recipes/tree/main/storybook-compodoc-angular/apps/web/src/app/butn/butn.component.ts). The generated documentation of this example will look like this: - -![Generated Docs page for the Button](/shared/packages/storybook/button-docs.png) - -When you run Compodoc, it will generate a `documentation.json` file. Storybook will then use that file to render the documentation in the `Docs` tab. - -## How to enable Compodoc for Storybook - -The main things that you need to do are: - -1. Install the necessary packages for `compodoc`. -2. Include the component files in the TypeScript compilation for Compodoc (or any other files that contain your Compodoc documentation). -3. Use `compodoc` to generate a `documentation.json` file. -4. Tell Storybook to use the `documentation.json` file to display the documentation. -5. Do not forget to enable [Storybook Autodocs](https://storybook.js.org/docs/react/writing-docs/autodocs) in your Storybook configuration. - -Let's see how you can do that. - -{% callout type="note" title="Note" %} -This guide assumes that you have an Angular project with Storybook configured in your Nx workspace. If you do not know how to set these up, please read about [setting up Storybook for Angular](/packages/storybook/documents/overview-angular) on the Nx documentation website. -{% /callout %} - -### 1. Install the necessary packages - -First we need to install the necessary packages: - -```shell -yarn add -D @compodoc/compodoc -``` - -or - -```shell -npm install --save-dev @compodoc/compodoc -``` - -### 2. Include the component files in the TypeScript compilation for Compodoc - -When you are using Compodoc, you need to create a `tsconfig` file, and in the `include` array you need to place all the files that you want Compodoc to include in its compilation. Compodoc [suggests](https://compodoc.app/guides/installation.html) to add a `tsconfig.doc.json` to do that. Then, when running `compodoc` you can use the `-p` (or `--tsconfig`) flag to specify the path to that file. See all the options that Compodoc supports [here](https://compodoc.app/guides/options.html). - -In the Storybook case, Storybook has the `--tsconfig` option [prefilled](https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/builders/utils/run-compodoc.ts#L23) to point to the `.storybook/tsconfig.json` file. As is noted in the [Storybook schema for the Angular builders](https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/builders/start-storybook/schema.json#L76), "_Options `-p` with tsconfig path and `-d` with workspace root is always given._". What this means is that you can add the paths to the component files (where Compodoc will look for JSDoc comment blocks) in the `include` array of the `.storybook/tsconfig.json` file. This is the file that Storybook will use to compile the TypeScript files, and it will also be the file that Compodoc will use to compile the TypeScript files. - -In your project's `.storybook/tsconfig.json` file, in the `include` array, add the path to the component files (eg. `"../src/**/*.component.ts"`). For example, if you have an application called `web`, the file `apps/web/.storybook/tsconfig.json` will look like this: - -```json {% fileName="apps/web/.storybook/tsconfig.json" %} -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "emitDecoratorMetadata": true - }, - "files": ["../src/polyfills.ts"], - "exclude": ["../**/*.spec.ts"], - "include": ["../src/**/*.stories.ts", "../src/**/*.component.ts", "*.js"] -} -``` - -{% callout type="warning" title="Don't forget all the paths!" %} -Important! If you are importing stories from other places, and you want the docs for these stories to be generated, too, you need to add the paths to the other components in the `include` array, as well! - -For example, if your stories paths look like this: - -``` -"../../../**/**/src/lib/**/*.stories.ts" -``` - -make sure to also include - -``` -"../../../**/**/src/lib/**/*.component.ts" -``` - -for the components to be included in the TypeScript compilation as well. - -This applies in cases where, for example, you have [one single Storybook for your whole workspace](/recipes/storybook/one-storybook-for-all), where you import stories from all the projects. In that case, you need to import all the components as well! -{% /callout %} - -### 3. Enable `compodoc` and configure it - -#### a. Set `compodoc: true` - -In your project's `project.json` file (e.g. `apps/web/project.json`), find the `storybook` and the `build-storybook` targets. - -In the `options` you will see `"compodoc": false`. Change that to `true`. - -#### b. Set the directory - -Storybook has [preconfigured `compodoc`](https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/builders/utils/run-compodoc.ts#L25) to generate a `documentation.json` file at the root of your workspace by default. We want to change that, and keep the documentation file project-specific. Of course, you can change that later, or as you see fit for your use case. But let's keep it project-specific for now. - -In your project's `project.json` file (eg. `apps/web/project.json`), find the `storybook` and the `build-storybook` targets. Below the `"compodoc"` option, create a new option called `"compodocArgs` which contains the following: `["-e", "json", "-d", "apps/web"]`. This means that the `exportFormat` (`-e`) will be `json` and the `output` directory (`-d`) will be `apps/web` (change that, of course, to the directory of your project). - -Let's see the result for our `web` app `storybook` target, for example (in `apps/web/project.json`): - -```jsonc {% fileName="project.json" %} - "storybook": { - "executor": "@storybook/angular:start-storybook", - "options": { - "port": 4400, - "configDir": "apps/web/.storybook", - "browserTarget": "web:build", - "compodoc": true, - "compodocArgs": ["-e", "json", "-d", "apps/web"] - }, - }, -``` - -{% callout type="warning" title="Check the version!" %} -Make sure you are on Nx version `>=14.1.8` and your `storybook` target is using `@storybook/angular:start-storybook` as the `executor` (like the example above). - -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](/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 - -In your project's `.storybook/preview.js` file (for example for your `web` app the path would be `apps/web/.storybook/preview.js`), add the following: - -```js {% fileName="apps/web/.storybook/preview.js" %} -import { setCompodocJson } from '@storybook/addon-docs/angular'; -import docJson from '../documentation.json'; -setCompodocJson(docJson); -``` - -### 5. Set up Autodocs - -In your project's `.storybook/main.js` file you have to enable autodocs: - -```js {% fileName="apps/web/.storybook/main.js" %} -const config = { - stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'], - addons: ['@storybook/addon-essentials'], - framework: { - name: '@storybook/angular', - options: {}, - }, - docs: { - autodocs: true, - defaultName: 'Docs', - }, -}; - -export default config; -``` - -### Now run Storybook and see the results! - -Now you can run Storybook or build Storybook, and documentation will be included. Just check the Docs tab! - -```shell -nx storybook web -``` - -and - -```shell -nx build-storybook web -``` diff --git a/docs/shared/packages/storybook/best-practices.md b/docs/shared/packages/storybook/best-practices.md index c4c3ba91fd..07d3e92684 100644 --- a/docs/shared/packages/storybook/best-practices.md +++ b/docs/shared/packages/storybook/best-practices.md @@ -39,9 +39,9 @@ If you are on a project using Angular, React or React Native, you can also gener If your project is not configured yet, check out one of these guides: -- [Set up Storybook for React Projects](/packages/storybook/documents/overview-react) +- [Set up Storybook for React Projects](/recipes/storybook/overview-react) -- [Set up Storybook for Angular Projects](/packages/storybook/documents/overview-angular) +- [Set up Storybook for Angular Projects](/recipes/storybook/overview-angular) If your project is [already configured](/packages/storybook), you can use the `stories` generator: @@ -55,7 +55,7 @@ The stories generator will read your inputs (if you’re using Angular), or your #### Cypress tests generation -Nx also generates Cypress tests for your components, that point to the corresponding component’s story. You can read more about how the Cypress tests are generated and how they look like in the [storybook-configuration generator documentation](/packages/storybook/documents/overview-react#cypress-tests-for-stories). +Nx also generates Cypress tests for your components, that point to the corresponding component’s story. You can read more about how the Cypress tests are generated and how they look like in the [storybook-configuration generator documentation](/recipes/storybook/overview-react#cypress-tests-for-stories). Take a look at the generated code of the Cypress test file, specifically at the URL which Cypress visits: @@ -128,7 +128,7 @@ You can think of the central Storybook container as a grouping of similar-concep Then, according to your use-case, you can have one central Storybook for your whole workspace, importing all the stories from all the projects. Alternatively, you can have one Storybook per "scope", which imports all the stories from projects the same scope. Or even one Storybook per application, importing all the stories of all the libraries that it is depending on. As you can see, there are many options, and you can choose the one that best suits your needs. {% callout type="note" title="Storybook Composition" %} -In order to achieve some things mentioned above, you may use [Storybook Composition](/packages/storybook/documents/storybook-composition-setup). However, in this case, you would still need to build each project’s Storybook individually, and also deploy it individually. So in the cases where you have multiple projects, Storybook Composition would not be very efficient. +In order to achieve some things mentioned above, you may use [Storybook Composition](/recipes/storybook/storybook-composition-setup). However, in this case, you would still need to build each project’s Storybook individually, and also deploy it individually. So in the cases where you have multiple projects, Storybook Composition would not be very efficient. {% /callout %} Before moving on to the examples section, it could be useful to read the [Library Types](/concepts/more-concepts/library-types) documentation page and the [Grouping libraries](/concepts/more-concepts/grouping-libraries) documentation page. These could help you decide which way fits your use case better. diff --git a/docs/shared/packages/storybook/configuring-storybook.md b/docs/shared/packages/storybook/configuring-storybook.md deleted file mode 100644 index 77af8424ff..0000000000 --- a/docs/shared/packages/storybook/configuring-storybook.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: How Storybook is configured on your Nx workspace -description: This guide explains how Storybook is configured on your Nx workspace. ---- - -# Configuring Storybook on Nx - -{% callout type="info" title="Best practices" %} -Read our [Using Storybook in a Nx workspace - Best practices](/packages/storybook/documents/best-practices) guide! -{% /callout %} - -Starting with version 15.7, Nx is no longer generating a root Storybook directory and shared root Storybook configurations. Instead, it is only generating a Storybook configuration for each project in your workspace. You may still manually create a root Storybook configuration file, if it is needed for your use case. - -You can read all about creating and using a root Storybook configuration in our guide [How to configure Webpack and Vite for Storybook](/packages/storybook/documents/custom-builder-configs). - -This change means that each of your projects that has Storybook configured has only one, project-level, project-specific `.storybook/main.js|ts` file that it relies on, without importing settings from external files. This simplifies the configuration process, makes it easier for the user to understand the configuration that each project is using, and also makes it easier to maintain, relying on automatic migration scripts, for example. - -This does not change much for the user, as the configuration process is still the same, and you may still manually create a root Storybook configuration file, if it is needed for your use case. - -## Project-specific configuration - -You will notice that all project-specific configuration files contain the `@storybook/addon-essentials` addon, which is the shared setting among projects. Other than that, depending on the project type, the settings differ in regards to the builder used, the stories import glob pattern, and, in the case of projects using Vite, the path to the `vite.config.ts` file or the root of the project, for correct path resolution. -All these are automatically generated by Nx, so you don't have to worry about them. - -## Root Storybook configuration - -If you need to create a root Storybook configuration file, you can do so by creating a `.storybook/main.js|ts` file in your workspace root. Then, you may import this file in your project-level Storybook configuration files. However, this is rarely needed in most cases, since most settings for builders like Webpack and Vite, for example, are already built-in into the Storybook builders. - -## Moving away from the root Storybook configuration - -If you are using `nx migrate` and you migrate to version 15.7 or later, Nx will try to automatically migrate your root Storybook configuration to the project-level Storybook configuration files. However, if you are not using `nx migrate`, you can still manually migrate your root Storybook configuration to the project-level Storybook configuration files. - -If you still want to keep your root Storybook configuration files, and if you have settings there that Nx cannot move to the project-level Storybook configuration files, Nx will leave your files untouched. You may keep your root Storybook configuration files, and Nx will still work as it did. - -The Nx migrator will do the following: - -1. It will add the `@storybook/addon-essentials` addon to all project-level Storybook configuration files. -2. It will remove the `@storybook/addon-essentials` addon from the root Storybook configuration file. -3. If the `addons` array in the root Storybook configuration file is empty after removing the `@storybook/addon-essentials` addon, it will remove the `addons` array from the root Storybook configuration file. -4. If the `stories` array in the root Storybook configuration file is empty, it will remove the `stories` array from the root Storybook configuration file. -5. If the root `.storybook/main.js|ts` configuration file is empty after removing the `addons` and `stories` arrays, it will remove the root `.storybook/main.js|ts` Storybook configuration file. - -In all the other cases, Nx will not interfere with your Storybook setup. - -## Read our guides for Configuring Storybook - -You can read all our guides for configuring Storybook in our [Storybook documents page](/packages/storybook/documents). - -Please also make sure to read our [Using Storybook in a Nx workspace - Best practices](/packages/storybook/documents/best-practices) guide, where you can find some best practices for using Storybook in a Nx workspace. diff --git a/docs/shared/packages/storybook/custom-builder-configs.md b/docs/shared/packages/storybook/custom-builder-configs.md deleted file mode 100644 index 34886558ae..0000000000 --- a/docs/shared/packages/storybook/custom-builder-configs.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: How to configure Webpack and Vite for Storybook -description: This guide explains how to customize the webpack configuration and your vite configuration for Storybook. ---- - -# How to configure Webpack and Vite for Storybook - -Storybook allows you to customize the `webpack` configuration and your `vite` configuration. For that, it offers two fields you can add in your `.storybook/main.js|ts` file, called `webpackFinal` and `viteFinal`. These fields are functions that take the default configuration as an argument, and return the modified configuration. You can read more about them in the [Storybook documentation for `webpack`](https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config) and the [Storybook documentation for `vite`](https://storybook.js.org/docs/react/builders/vite#configuration). - -You can use these fields in your Nx workspace Storybook configurations normally, following the Storybook docs. However, let's see how you can create a global configuration for every project in your workspace, and how you can override it for specific projects. - -## Global configuration - -If you want to add a global configuration for Webpack or Vite in your workspace, you may create a `.storybook/main.js` file at the root of your workspace. In that root `.storybook/main.js|ts` file, you can add the `webpackFinal` or `viteFinal` field, and return the modified configuration. This will be applied to every project in your workspace. - -### `webpack` and `webpackFinal` - -The `webpackFinal` field would look like this: - -```ts {% fileName=".storybook/main.js" %} -webpackFinal: async (config, { configType }) => { - // Make whatever fine-grained changes you need that should apply to all storybook configs - - // Return the altered config - return config; -}, -``` - -### `vite` and `viteFinal` - -The `viteFinal` field would look like this: - -```ts {% fileName=".storybook/main.js" %} -async viteFinal(config, { configType }) { - if (configType === 'DEVELOPMENT') { - // Your development configuration goes here - } - if (configType === 'PRODUCTION') { - // Your production configuration goes here. - } - return mergeConfig(config, { - // Your environment configuration here - }); - }, -``` - -In the `viteFinal` case, you would have to import the `mergeConfig` function from `vite`. So, on the top of your root `.storybook/main.js|ts` file, you would have to add: - -```ts {% fileName=".storybook/main.js" %} -import { mergeConfig } from 'vite'; -``` - -## Project-specific configuration - -### `webpack` and `webpackFinal` - -You can customize the `webpack` configuration for a specific project by adding a `webpackFinal` field in your project-specific `.storybok/main.js|ts` file, like this: - -```ts {% fileName="apps/my-react-webpack-app/.storybook/main.js" %} -export default { - ... - webpackFinal: async (config, { configType }) => { - - // add your own webpack tweaks if needed - - return config; - }, -}; -``` - -If you are using a global, root-level, `webpack` configuration in your project, you can customize or extend that for a specific project like this: - -```ts {% fileName="apps/my-react-webpack-app/.storybook/main.js" %} -import rootMain from '../../../.storybook/main'; - -export default { - ...rootMain, - ... - webpackFinal: async (config, { configType }) => { - // apply any global webpack configs that might have been specified in .storybook/main.js - if (rootMain.webpackFinal) { - config = await rootMain.webpackFinal(config, { configType }); - } - - // add your own webpack tweaks if needed - - return config; - }, -}; -``` - -Take note how, in this case, we are first applying the global `webpack` configuration, and then adding our own tweaks. If you don't want to apply any global configuration, you can just return your own configuration, and skip the `rootMain.webpackFinal` check. - -### `vite` and `viteFinal` - -You can customize the `vite` configuration for a specific project by adding a `viteFinal` field in your project-specific `.storybok/main.js|ts` file, like this: - -```ts {% fileName="apps/my-react-vite-app/.storybook/main.js" %} -import { mergeConfig } from 'vite'; -import viteTsConfigPaths from 'vite-tsconfig-paths'; - -export default { - ... - async viteFinal(config, { configType }) { - return mergeConfig(config, { - ... - }); - }, -}; -``` - -If you are using a global, root-level, `vite` configuration in your workspace, you can customize or extend that for a specific project like this: - -```ts {% fileName="apps/my-react-vite-app/.storybook/main.js" %} -import { mergeConfig } from 'vite'; -import rootMain from '../../../.storybook/main'; - -export default { - ... - async viteFinal(config, { configType }) { - return mergeConfig(config, { - ...((await rootMain.viteFinal(config, { configType })) ?? {}) - }); - }, -}; -``` - -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" %} -import { mergeConfig } from 'vite'; - -export default { - 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, {}); - }, -}; -``` diff --git a/docs/shared/packages/storybook/plugin-overview.md b/docs/shared/packages/storybook/plugin-overview.md index b06f7f7b5c..6656f74d4e 100644 --- a/docs/shared/packages/storybook/plugin-overview.md +++ b/docs/shared/packages/storybook/plugin-overview.md @@ -185,7 +185,7 @@ To register a [Storybook addon](https://storybook.js.org/addons/) for all Storyb ### Setting up documentation -To set up documentation, you can use [Storybook Autodocs](https://storybook.js.org/docs/react/writing-docs/autodocs). For Angular, [you can use `compodoc`](/packages/storybook/documents/angular-storybook-compodoc) to infer `argTypes`. You can read more about `argTypes` in the [official Storybook `argTypes` documentation](https://storybook.js.org/docs/angular/api/argtypes#automatic-argtype-inference). +To set up documentation, you can use [Storybook Autodocs](https://storybook.js.org/docs/react/writing-docs/autodocs). For Angular, [you can use `compodoc`](/recipes/storybook/angular-storybook-compodoc) to infer `argTypes`. You can read more about `argTypes` in the [official Storybook `argTypes` documentation](https://storybook.js.org/docs/angular/api/argtypes#automatic-argtype-inference). You can read more about how to best set up documentation using Storybook for your project in the [official Storybook documentation](https://storybook.js.org/docs/react/writing-docs/introduction). @@ -193,8 +193,12 @@ You can read more about how to best set up documentation using Storybook for you 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) +- [Set up Storybook for Angular Projects](/recipes/storybook/overview-angular) +- [Set up Storybook for React Projects](/recipes/storybook/overview-react) + +You can find all Storybook-related Nx documentation in the [Storybook recipes section](/recipes/storybook). + +For more on using Storybook, see the [official Storybook documentation](https://storybook.js.org/docs/basics/introduction/). ### Migration Scenarios @@ -205,10 +209,6 @@ Here's more information on common migration scenarios for Storybook with Nx. For - [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/). - ## Older documentation You can find older documentation for the `@nx/storybook` package in our [deprecated section](/deprecated/storybook). diff --git a/docs/shared/packages/storybook/storybook-composition-setup.md b/docs/shared/packages/storybook/storybook-composition-setup.md deleted file mode 100644 index 747ba8ee0d..0000000000 --- a/docs/shared/packages/storybook/storybook-composition-setup.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -title: Setting up Storybook Composition with Nx -description: This guide explains how you can set up Storybook composition on your Nx workspace. ---- - -# Setting up Storybook Composition with Nx - -## What is Storybook Composition - -As explained in the [Storybook official docs](https://storybook.js.org/docs/angular/workflows/storybook-composition), Storybook Composition allows you to embed components from any Storybook inside your local Storybook. If you want to learn more about Storybook Composition, please take a look at the following articles, which explain it in detail: - -- [Storybook Composition - Chromatic blog](https://www.chromatic.com/blog/storybook-composition/) -- [Storybook Composition - Storybook docs](https://storybook.js.org/docs/angular/workflows/storybook-composition) - -## How it works - -In essence, you have a Storybook running, which will be the host of the embeded Storybooks as well. Then, you provide this "host" Storybook with a URL of a live/running Storybook. The composed Storybook is then displayed in a new Canvas iframe as part of the host Storybook, and is listed on the left-hand-side stories inventory, too. You can read more about this in the docs listed above. - -## How to use it - -All you need is a URL of a live Storybook, and a "host" Storybook. In the `.storybook/main.js` file of the "host" Storybook, inside `module.exports` you add a new `refs` attribute, which will contain the link(s) for the composed Storybook(s). - -In the example below, we have a host Storybook running on local port 4400 (http://localhost:4400) - not displayed here. In it, we want to compose three other Storybooks. The "one-composed" and "two-composed", running on local ports `4401` and `4402` accordingly, as well as the [Storybook website's Storybook](https://next--storybookjs.netlify.app/official-storybook) which is live on the address that you see. - -```javascript -// .storybook/main.js of our Host Storybook - assuming it's running on port 4400 -module.exports = { - ..., - refs: { - 'one-composed': { - title: 'One composed', - url: 'http://localhost:4401', - }, - 'two-composed': { - title: 'Two composed', - url: 'http://localhost:4402', - }, - 'storybook-website-storybook': { - title: 'The Storybook of the Storybook website', - url: 'https://next--storybookjs.netlify.app/official-storybook/', - }, - }, -}; -``` - -You can always read more in the [official Storybook docs](https://storybook.js.org/docs/angular/workflows/storybook-composition#compose-published-storybooks). - -## How to use it in Nx - -It's quite easy to use this feature, in Nx and in general, since you do not need to make any code changes, you just need to have the "composed" Storybook instances (the ones you need to "compose") running, choose a "host" Storybook, and just add the composed Storybooks in it's `.storybook/main.js` file. - -Nx provides the [`run-many`](/packages/nx/documents/run-many) command, which will allow you to easily run multiple Storybooks at the same time. You need to run the `run-many` command with the parallel flag (eg. `--parallel=3`), because you want to run all your Storybooks in parallel. You can change the value of the `parallel` flag to be of as many Storybooks you want to run in parallel as you need. However, be **very carefull** with putting large numbers in this -flag, since it can cause big delays or get stuck. You can play around and adjust that number to one your machine runs comfortably with. Keep in mind that you can add in this feature however many live/public Storybooks as you need (Storybooks that you do not run locally). - -In order to get it working for you, you need to two things: - -1. Make sure your "composed" Storybook instances are running. For that you can do: - -```shell -nx run-many -t storybook -p one-composed two-composed three-composed --parallel=3 -``` - -2. Start your host Storybook in another tab of your terminal: - -```shell -nx storybook main-host -``` - -Before doing the above steps to actually compose our Storybook instances under the **`main-host`** project, we would need to do the following adjustments to our workspace: - -### Adjust the Storybook ports in `project.json` - -Take a look in your `project.json` file of each one of your projects (e.g. for the `main-host` project, you can find it in the path `apps/main-host/project.json`). -In your project's targets, in the `storybook` target, you will notice that the default port that Nx assigns to your projects' Storybook is always `4400`: - -```jsonc {% fileName="project.json" %} -{ - ... - "targets": { - ... - "storybook": { - ... - "options": { - ... - "port": 4400, - ... - }, - ... - }, - ... -` }, -} -``` - -We can keep this port for the project which will serve as the host of our configuration, but we must change the port numbers of the other projects, the projects which will be composed/composed. The reason for that is the following: - -- When the `nx run-many -t storybook --parallel=3` command executes, it will go and look into your `project.json` file to see the port you have assigned for that project's Storybook. -- When it finds a port that it is already used, it will change the port number randomly (usually adding `1` until it finds an empty port). - -Since we are using the `--parallel` flag, and the commands are executed in parallel, we cannot know for sure the order that the `storybook` command will be executed. So, we cannot be sure which port will correspond to which of the projects. - -If we don't change the port numbers, and there are projects that want to use the same port for their Storybooks, the `run-many` command will change that port, and the result will be that we will not know for sure which -of our projects runs on which port. The problem that this creates is that we will not be able to create the proper configuration for Storybook Composition, since we will not be able to tell which URLs our composed Storybooks run on. - -### Add the refs in our host project's `.storybook/main.js` file - -Now, we need to add to our host project's `main.js` file (the path of which would be `apps/main-host/.storybook/main.js`) a `refs` object, to configure our composition. An example of such a configuration looks like this: - -```javascript {% fileName="apps/main-host/.storybook/main.js" %} -module.exports = { - ..., - refs: { - one-composed: { - title: 'One composed', - url: 'http://localhost:4401', - }, - two-composed: { - title: 'Two composed', - url: 'http://localhost:4402', - }, - three-composed: { - title: 'Three composed', - url: 'http://localhost:4403', - }, - }, -}; -``` - -### Optional: use `run-commands` and create a `storybook-composition` target - -If you want to take advantage of the [`run-commands`](https://nx.dev/packages/nx/executors/run-commands) functionality of Nx, you can create a custom target that will invoke the `run-parallel` command for your "composed" Storybook instances. - -The objective is to end up with a new target in your `main-host`'s `project.json` file (`apps/main-host/project.json`) that looks like this: - -```jsonc {% fileName="apps/main-host/project.json" %} - "storybook-composition": { - "executor": "nx:run-commands", - "options": { - "commands": [ - "nx storybook one-composed", - "nx storybook two-composed", - "nx storybook three-composed" - ], - "parallel": true - } - } -``` - -which you can then invoke like this: - -```shell -nx run main-host:storybook-composition -``` - -which will take care of starting all your "composed" Storybook instances, before you run `nx storybook main-host`. - -#### Generating a new `target` in our `main-host` - -Let's first generate a new `target` called `storybook-composition` for our `main-host`. - -Run the following command: - -```shell -nx generate nx:run-commands storybook-composition --command='nx storybook one-composed' --project=main-host -``` - -This will create a new `target` in your `apps/main-host/project.json`: - -```jsonc {% fileName="apps/main-host/project.json" %} - "storybook-composition": { - "executor": "nx:run-commands", - "outputs": [], - "options": { - "command": "nx storybook one-composed" - } - } -``` - -Now, change the `command` option to be `commands`, add the `"parallel": true` option, and add all the other "composed" Storybook commands: - -```jsonc {% fileName="apps/main-host/project.json" %} - "storybook-composition": { - "executor": "nx:run-commands", - "options": { - "commands": [ - "nx storybook one-composed", - "nx storybook two-composed", - "nx storybook three-composed" - ], - "parallel": true - } - } -``` - -Now, you can start all your "composed" Storybook instances by running: - -```shell -nx run main-host:storybook-composition -``` - -**After** all of your "composed" Storybook instances have started, you can run in a new terminal: - -```shell -nx storybook main-host -``` - -This approach takes the "burden" of writing the `run-many` command manually, and makes it easier to add/remove "composed" Storybook instances. diff --git a/docs/shared/react-standalone-tutorial/react-standalone.md b/docs/shared/react-standalone-tutorial/react-standalone.md index 676ca5edef..d4f576cc2e 100644 --- a/docs/shared/react-standalone-tutorial/react-standalone.md +++ b/docs/shared/react-standalone-tutorial/react-standalone.md @@ -827,7 +827,7 @@ Here's some more things you can dive into next: - Learn more about the [underlying mental model of Nx](/concepts/mental-model) - Learn how to [migrate your CRA app to Nx](/recipes/react/migration-cra) - [Learn how to setup Tailwind](/recipes/react/using-tailwind-css-in-react) -- [Setup Storybook for our shared UI library](/packages/storybook/documents/overview-react) +- [Setup Storybook for our shared UI library](/recipes/storybook/overview-react) - [Speed up CI: Run only tasks for project that got changed](/core-features/run-tasks#run-tasks-affected-by-a-pr)] - [Speed up CI: Share your cache](/core-features/remote-cache)] - [Speed up CI: Distribute your tasks across machines](/core-features/distribute-task-execution) diff --git a/docs/generated/packages/storybook/documents/angular-configuring-styles.md b/docs/shared/recipes/storybook/angular-configuring-styles.md similarity index 97% rename from docs/generated/packages/storybook/documents/angular-configuring-styles.md rename to docs/shared/recipes/storybook/angular-configuring-styles.md index 3abd446ae5..62c95478e6 100644 --- a/docs/generated/packages/storybook/documents/angular-configuring-styles.md +++ b/docs/shared/recipes/storybook/angular-configuring-styles.md @@ -6,7 +6,7 @@ description: This document explains how to configure styles and preprocessor opt # Configuring styles and preprocessor options for Angular projects with a Storybook configuration {% callout type="note" title="Note" %} -This documentation page contains information about the [Storybook plugin](/packages/storybook), specifically regarding [Angular projects that are using Storybook](/packages/storybook/documents/overview-angular). +This documentation page contains information about the [Storybook plugin](/packages/storybook), specifically regarding [Angular projects that are using Storybook](/recipes/storybook/overview-angular). {% /callout %} Angular supports including extra entry-point files for styles. Also, in case you use Sass, you can add extra base paths that will be checked for imports. In your project's `project.json` file you can use the `styles` and `stylePreprocessorOptions` properties in your `storybook` and `build-storybook` target `options`, as you would in your Storybook or your Angular configurations. If your project is an application, you can add these extra options in your `build` target. Your `storybook` and `build-storybook` `browserTarget` are going to be pointing to the `build` target, so they will pick up these styles from there. Check out the [Angular Workspace Configuration](https://angular.io/guide/workspace-config#styles-and-scripts-configuration) documentation for more information. You can also check the [official Storybook for Angular documentation](https://storybook.js.org/docs/angular/configure/styling-and-css) on working with styles and CSS. diff --git a/docs/generated/packages/storybook/documents/angular-storybook-compodoc.md b/docs/shared/recipes/storybook/angular-storybook-compodoc.md similarity index 96% rename from docs/generated/packages/storybook/documents/angular-storybook-compodoc.md rename to docs/shared/recipes/storybook/angular-storybook-compodoc.md index 06f8ba79be..081ca8e20e 100644 --- a/docs/generated/packages/storybook/documents/angular-storybook-compodoc.md +++ b/docs/shared/recipes/storybook/angular-storybook-compodoc.md @@ -6,7 +6,7 @@ description: This guide explains how to set up Compodoc for Storybook on Angular # Set up Compodoc for Storybook on Nx {% callout type="note" title="Note" %} -This documentation page contains information about the [Storybook plugin](/packages/storybook), specifically regarding [Angular projects that are using Storybook](/packages/storybook/documents/overview-angular). +This documentation page contains information about the [Storybook plugin](/packages/storybook), specifically regarding [Angular projects that are using Storybook](/recipes/storybook/overview-angular). {% /callout %} {% github-repository url="https://github.com/nrwl/nx-recipes/tree/main/storybook-compodoc-angular" /%} @@ -31,11 +31,11 @@ Let's take for example an Angular component - a button - that has an `@Input` fo This comment would result in the following documentation in Compodoc: -![Button size `@Input` generated documentation](/shared/packages/storybook/button-size-input.png) +![Button size `@Input` generated documentation](/shared/recipes/storybook/button-size-input.png) If we add a description and a default value to each of our component `@Input`s, we will end up with a full documentation page. See a full example of the button component [here](https://github.com/nrwl/nx-recipes/tree/main/storybook-compodoc-angular/apps/web/src/app/butn/butn.component.ts). The generated documentation of this example will look like this: -![Generated Docs page for the Button](/shared/packages/storybook/button-docs.png) +![Generated Docs page for the Button](/shared/recipes/storybook/button-docs.png) When you run Compodoc, it will generate a `documentation.json` file. Storybook will then use that file to render the documentation in the `Docs` tab. @@ -52,7 +52,7 @@ The main things that you need to do are: Let's see how you can do that. {% callout type="note" title="Note" %} -This guide assumes that you have an Angular project with Storybook configured in your Nx workspace. If you do not know how to set these up, please read about [setting up Storybook for Angular](/packages/storybook/documents/overview-angular) on the Nx documentation website. +This guide assumes that you have an Angular project with Storybook configured in your Nx workspace. If you do not know how to set these up, please read about [setting up Storybook for Angular](/recipes/storybook/overview-angular) on the Nx documentation website. {% /callout %} ### 1. Install the necessary packages diff --git a/docs/shared/packages/storybook/button-docs.png b/docs/shared/recipes/storybook/button-docs.png similarity index 100% rename from docs/shared/packages/storybook/button-docs.png rename to docs/shared/recipes/storybook/button-docs.png diff --git a/docs/shared/packages/storybook/button-size-input.png b/docs/shared/recipes/storybook/button-size-input.png similarity index 100% rename from docs/shared/packages/storybook/button-size-input.png rename to docs/shared/recipes/storybook/button-size-input.png diff --git a/docs/generated/packages/storybook/documents/configuring-storybook.md b/docs/shared/recipes/storybook/configuring-storybook.md similarity index 98% rename from docs/generated/packages/storybook/documents/configuring-storybook.md rename to docs/shared/recipes/storybook/configuring-storybook.md index 77af8424ff..fd8f46d587 100644 --- a/docs/generated/packages/storybook/documents/configuring-storybook.md +++ b/docs/shared/recipes/storybook/configuring-storybook.md @@ -11,7 +11,7 @@ Read our [Using Storybook in a Nx workspace - Best practices](/packages/storyboo Starting with version 15.7, Nx is no longer generating a root Storybook directory and shared root Storybook configurations. Instead, it is only generating a Storybook configuration for each project in your workspace. You may still manually create a root Storybook configuration file, if it is needed for your use case. -You can read all about creating and using a root Storybook configuration in our guide [How to configure Webpack and Vite for Storybook](/packages/storybook/documents/custom-builder-configs). +You can read all about creating and using a root Storybook configuration in our guide [How to configure Webpack and Vite for Storybook](/recipes/storybook/custom-builder-configs). This change means that each of your projects that has Storybook configured has only one, project-level, project-specific `.storybook/main.js|ts` file that it relies on, without importing settings from external files. This simplifies the configuration process, makes it easier for the user to understand the configuration that each project is using, and also makes it easier to maintain, relying on automatic migration scripts, for example. diff --git a/docs/generated/packages/storybook/documents/custom-builder-configs.md b/docs/shared/recipes/storybook/custom-builder-configs.md similarity index 100% rename from docs/generated/packages/storybook/documents/custom-builder-configs.md rename to docs/shared/recipes/storybook/custom-builder-configs.md diff --git a/docs/shared/packages/storybook/interaction-tests.md b/docs/shared/recipes/storybook/interaction-tests.md similarity index 100% rename from docs/shared/packages/storybook/interaction-tests.md rename to docs/shared/recipes/storybook/interaction-tests.md diff --git a/docs/shared/recipes/one-storybook-for-all.md b/docs/shared/recipes/storybook/one-storybook-for-all.md similarity index 95% rename from docs/shared/recipes/one-storybook-for-all.md rename to docs/shared/recipes/storybook/one-storybook-for-all.md index bb7c401543..e735b99bad 100644 --- a/docs/shared/recipes/one-storybook-for-all.md +++ b/docs/shared/recipes/storybook/one-storybook-for-all.md @@ -1,3 +1,8 @@ +--- +title: Publishing Storybook - One main Storybook instance for all projects +description: Dive into a comprehensive guide on how to consolidate all your Storybook stories from different projects into one unified Storybook instance. Ideal for Nx workspaces leveraging a single framework. +--- + # Publishing Storybook: One main Storybook instance for all projects This guide extends the diff --git a/docs/shared/recipes/one-storybook-per-scope.md b/docs/shared/recipes/storybook/one-storybook-per-scope.md similarity index 96% rename from docs/shared/recipes/one-storybook-per-scope.md rename to docs/shared/recipes/storybook/one-storybook-per-scope.md index 305822470d..d7c4367c79 100644 --- a/docs/shared/recipes/one-storybook-per-scope.md +++ b/docs/shared/recipes/storybook/one-storybook-per-scope.md @@ -1,3 +1,8 @@ +--- +title: Publishing Storybook - One Storybook instance per scope +description: Learn how to set up individual Storybook instances for each scope within an Nx workspace. This guide provides a structured approach, emphasizing folder organization and thematic scope separation. +--- + # Publishing Storybook: One Storybook instance per scope This guide extends the diff --git a/docs/shared/recipes/one-storybook-with-composition.md b/docs/shared/recipes/storybook/one-storybook-with-composition.md similarity index 89% rename from docs/shared/recipes/one-storybook-with-composition.md rename to docs/shared/recipes/storybook/one-storybook-with-composition.md index 59f0ab7095..54d9229f77 100644 --- a/docs/shared/recipes/one-storybook-with-composition.md +++ b/docs/shared/recipes/storybook/one-storybook-with-composition.md @@ -1,7 +1,12 @@ +--- +title: Publishing Storybook - One main Storybook instance using Storybook Composition +description: Dive into the comprehensive guide on publishing a unified Storybook instance from multiple frameworks within an Nx workspace using Storybook Composition. +--- + # Publishing Storybook: One main Storybook instance using Storybook Composition This guide extends the -[Using Storybook in a Nx workspace - Best practices](/packages/storybook/documents/best-practices) guide. In that guide, we discussed the best practices of using Storybook in a Nx workspace. We explained the main concepts and the mental model of how to best set up Storybook. In this guide, we are going to see how to put that into practice, by looking at a real-world example. We are going to see how you can publish one single Storybook for your workspace, even you are using multiple frameworks, taking advantage of [Storybook Composition](/packages/storybook/documents/storybook-composition-setup). +[Using Storybook in a Nx workspace - Best practices](/packages/storybook/documents/best-practices) guide. In that guide, we discussed the best practices of using Storybook in a Nx workspace. We explained the main concepts and the mental model of how to best set up Storybook. In this guide, we are going to see how to put that into practice, by looking at a real-world example. We are going to see how you can publish one single Storybook for your workspace, even you are using multiple frameworks, taking advantage of [Storybook Composition](/recipes/storybook/storybook-composition-setup). In this case, we are dealing with a Nx workspace that uses multiple frameworks. Essentially, you would need to have one Storybook host for each of the frameworks, containing all the stories of that specific framework, since the Storybook builder can not handle multiple frameworks simultaneously. @@ -11,7 +16,7 @@ Let’s assume that you have a structure like the one described in the previous First of all, you have to create two Storybook host apps, one for Angular and one for React. Let’s call them `storybook-host-angular` and `storybook-host-react`, which are configured to import all the Angular stories and all the React stories accordingly. -Now, we are going to combine the two Storybook host apps into one, using Storybook composition. You can read our [Storybook Composition guide](/packages/storybook/documents/storybook-composition-setup) for a detailed explanation for how Storybook Composition works. In a nutshell, you can have one “host” Storybook instance running, where you can link other running Storybook instances. +Now, we are going to combine the two Storybook host apps into one, using Storybook composition. You can read our [Storybook Composition guide](/recipes/storybook/storybook-composition-setup) for a detailed explanation for how Storybook Composition works. In a nutshell, you can have one “host” Storybook instance running, where you can link other running Storybook instances. {% github-repository url="https://github.com/nrwl/nx-recipes/tree/main/storybook-publishing-strategies-multiple-frameworks" /%} diff --git a/docs/shared/packages/storybook/plugin-angular.md b/docs/shared/recipes/storybook/plugin-angular.md similarity index 96% rename from docs/shared/packages/storybook/plugin-angular.md rename to docs/shared/recipes/storybook/plugin-angular.md index 24a1c24357..6216e3f814 100644 --- a/docs/shared/packages/storybook/plugin-angular.md +++ b/docs/shared/recipes/storybook/plugin-angular.md @@ -144,9 +144,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) +- [Set up Compodoc for Storybook on Nx](/recipes/storybook/angular-storybook-compodoc) - [Information about the `storybook` targets](/deprecated/storybook/angular-storybook-targets) -- [Configuring styles and preprocessor options](/packages/storybook/documents/angular-configuring-styles) +- [Configuring styles and preprocessor options](/recipes/storybook/angular-configuring-styles) - [The `browserTarget`](/deprecated/storybook/angular-browser-target) You can find all Storybook-related Nx topics [here](/packages#storybook). diff --git a/docs/shared/packages/storybook/plugin-react.md b/docs/shared/recipes/storybook/plugin-react.md similarity index 100% rename from docs/shared/packages/storybook/plugin-react.md rename to docs/shared/recipes/storybook/plugin-react.md diff --git a/docs/generated/packages/storybook/documents/storybook-composition-setup.md b/docs/shared/recipes/storybook/storybook-composition-setup.md similarity index 100% rename from docs/generated/packages/storybook/documents/storybook-composition-setup.md rename to docs/shared/recipes/storybook/storybook-composition-setup.md diff --git a/docs/shared/reference/sitemap.md b/docs/shared/reference/sitemap.md index c94b69a0cf..c00980c8e2 100644 --- a/docs/shared/reference/sitemap.md +++ b/docs/shared/reference/sitemap.md @@ -124,9 +124,17 @@ - [Add and Deploy Netlify Edge Functions with Node](/recipes/node/node-serverless-functions-netlify) - [Deploying AWS lambda in Node.js](/recipes/node/node-aws-lambda) - [Storybook](/recipes/storybook) + - [Set up Storybook for React Projects](/recipes/storybook/overview-react) + - [Set up Storybook for Angular Projects](/recipes/storybook/overview-angular) + - [Configuring Storybook on Nx](/recipes/storybook/configuring-storybook) - [One main Storybook instance for all projects](/recipes/storybook/one-storybook-for-all) - [One Storybook instance per scope](/recipes/storybook/one-storybook-per-scope) - [One main Storybook instance using Storybook Composition](/recipes/storybook/one-storybook-with-composition) + - [How to configure Webpack and Vite for Storybook](/recipes/storybook/custom-builder-configs) + - [Setting up Storybook Interaction Tests with Nx](/recipes/storybook/storybook-interaction-tests) + - [Setting up Storybook Composition with Nx](/recipes/storybook/storybook-composition-setup) + - [Angular: Set up Compodoc for Storybook on Nx](/recipes/storybook/angular-storybook-compodoc) + - [Angular: Configuring styles and preprocessor options](/recipes/storybook/angular-configuring-styles) - [Enforce Module Boundaries](/recipes/enforce-module-boundaries) - [Ban Dependencies with Certain Tags](/recipes/enforce-module-boundaries/ban-dependencies-with-tags) - [Tag in Multiple Dimensions](/recipes/enforce-module-boundaries/tag-multiple-dimensions) @@ -576,16 +584,8 @@ - [storybook](/packages/storybook) - [documents](/packages/storybook/documents) - [Nx Storybook Plugin Overview](/packages/storybook/documents/overview) - - [Set up Storybook for React Projects](/packages/storybook/documents/overview-react) - - [Set up Storybook for Angular Projects](/packages/storybook/documents/overview-angular) - [Storybook best practices for making the most out of Nx](/packages/storybook/documents/best-practices) - [Storybook 7 overview](/packages/storybook/documents/storybook-7-setup) - - [Configuring Storybook on Nx](/packages/storybook/documents/configuring-storybook) - - [How to configure Webpack and Vite for Storybook](/packages/storybook/documents/custom-builder-configs) - - [Setting up Storybook Interaction Tests with Nx](/packages/storybook/documents/storybook-interaction-tests) - - [Setting up Storybook Composition with Nx](/packages/storybook/documents/storybook-composition-setup) - - [Angular: Set up Compodoc for Storybook on Nx](/packages/storybook/documents/angular-storybook-compodoc) - - [Angular: Configuring styles and preprocessor options](/packages/storybook/documents/angular-configuring-styles) - [executors](/packages/storybook/executors) - [storybook](/packages/storybook/executors/storybook) - [build](/packages/storybook/executors/build) diff --git a/nx-dev/nx-dev/redirect-rules.js b/nx-dev/nx-dev/redirect-rules.js index de0a6692ea..46c7ff53e4 100644 --- a/nx-dev/nx-dev/redirect-rules.js +++ b/nx-dev/nx-dev/redirect-rules.js @@ -573,19 +573,35 @@ const packagesDocuments = { '/cypress/v11-migration-guide': '/packages/cypress/documents/v11-migration-guide', '/storybook/overview-react': '/packages/storybook/documents/overview-react', + '/packages/storybook/documents/overview-react': + '/recipes/storybook/overview-react', '/storybook/overview-angular': '/packages/storybook/documents/overview-angular', + '/packages/storybook/documents/overview-angular': + '/recipes/storybook/overview-angular', + '/packages/storybook/documents/configuring-storybook': + '/recipes/storybook/configuring-storybook', + '/packages/storybook/documents/custom-builder-configs': + '/recipes/storybook/custom-builder-configs', + '/packages/storybook/documents/storybook-interaction-tests': + '/recipes/storybook/storybook-interaction-tests', '/storybook/best-practices': '/packages/storybook/documents/best-practices', '/storybook/storybook-composition-setup': '/packages/storybook/documents/storybook-composition-setup', + '/packages/storybook/documents/storybook-composition-setup': + '/recipes/storybook/storybook-composition-setup', '/storybook/angular-storybook-compodoc': '/packages/storybook/documents/angular-storybook-compodoc', + '/packages/storybook/documents/angular-storybook-compodoc': + '/recipes/storybook/angular-storybook-compodoc', '/storybook/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', + '/packages/storybook/documents/angular-configuring-styles': + '/recipes/storybook/angular-configuring-styles', '/storybook/angular-browser-target': '/deprecated/storybook/angular-browser-target', '/storybook/migrate-webpack-final-angular': diff --git a/packages/angular/docs/stories-examples.md b/packages/angular/docs/stories-examples.md index 969684d8ce..cd40d53055 100644 --- a/packages/angular/docs/stories-examples.md +++ b/packages/angular/docs/stories-examples.md @@ -4,7 +4,7 @@ This generator will generate stories for all your components in your project. Th nx g @nx/angular:stories project-name ``` -You can read more about how this generator works, in the [Storybook for Angular overview page](/packages/storybook/documents/overview-angular#auto-generate-stories). +You can read more about how this generator works, in the [Storybook for Angular overview page](/recipes/storybook/overview-angular#auto-generate-stories). When running this generator, you will be prompted to provide the following: diff --git a/packages/angular/docs/storybook-configuration-examples.md b/packages/angular/docs/storybook-configuration-examples.md index 81fdc92fad..7dd6a6e42c 100644 --- a/packages/angular/docs/storybook-configuration-examples.md +++ b/packages/angular/docs/storybook-configuration-examples.md @@ -4,7 +4,7 @@ This generator will set up Storybook for your **Angular** project. By default, s nx g @nx/angular:storybook-configuration project-name ``` -You can read more about how this generator works, in the [Storybook for Angular overview page](/packages/storybook/documents/overview-angular#generate-storybook-configuration-for-an-angular-project). +You can read more about how this generator works, in the [Storybook for Angular overview page](/recipes/storybook/overview-angular#generate-storybook-configuration-for-an-angular-project). When running this generator, you will be prompted to provide the following: diff --git a/packages/angular/src/generators/storybook-configuration/__snapshots__/storybook-configuration.spec.ts.snap b/packages/angular/src/generators/storybook-configuration/__snapshots__/storybook-configuration.spec.ts.snap index ad0b84ef36..72b8297443 100644 --- a/packages/angular/src/generators/storybook-configuration/__snapshots__/storybook-configuration.spec.ts.snap +++ b/packages/angular/src/generators/storybook-configuration/__snapshots__/storybook-configuration.spec.ts.snap @@ -16,7 +16,7 @@ export default config; // To customize your webpack configuration you can use the webpackFinal field. // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config -// and https://nx.dev/packages/storybook/documents/custom-builder-configs +// and https://nx.dev/recipes/storybook/custom-builder-configs " `; diff --git a/packages/react/docs/stories-examples.md b/packages/react/docs/stories-examples.md index 3dc1d3956a..f04ad30dc0 100644 --- a/packages/react/docs/stories-examples.md +++ b/packages/react/docs/stories-examples.md @@ -4,7 +4,7 @@ This generator will generate stories for all your components in your project. Th nx g @nx/react:stories project-name ``` -You can read more about how this generator works, in the [Storybook for React overview page](/packages/storybook/documents/overview-react#auto-generate-stories). +You can read more about how this generator works, in the [Storybook for React overview page](/recipes/storybook/overview-react#auto-generate-stories). When running this generator, you will be prompted to provide the following: diff --git a/packages/react/docs/storybook-configuration-examples.md b/packages/react/docs/storybook-configuration-examples.md index bbd36b40bc..91dcc5df47 100644 --- a/packages/react/docs/storybook-configuration-examples.md +++ b/packages/react/docs/storybook-configuration-examples.md @@ -4,7 +4,7 @@ This generator will set up Storybook for your **React** project. You can also us nx g @nx/react:storybook-configuration project-name ``` -You can read more about how this generator works, in the [Storybook for React overview page](/packages/storybook/documents/overview-react#generate-storybook-configuration-for-an-react-project). +You can read more about how this generator works, in the [Storybook for React overview page](/recipes/storybook/overview-react#generate-storybook-configuration-for-an-react-project). When running this generator, you will be prompted to provide the following: diff --git a/packages/react/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap b/packages/react/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap index 9fc45bed48..bd8771f3a1 100644 --- a/packages/react/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap +++ b/packages/react/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap @@ -20,7 +20,7 @@ export default config; // To customize your Vite configuration you can use the viteFinal field. // Check https://storybook.js.org/docs/react/builders/vite#configuration -// and https://nx.dev/packages/storybook/documents/custom-builder-configs +// and https://nx.dev/recipes/storybook/custom-builder-configs " `; diff --git a/packages/storybook/docs/build-storybook-executor-examples.md b/packages/storybook/docs/build-storybook-executor-examples.md index acbe91e9f5..b07a201f34 100644 --- a/packages/storybook/docs/build-storybook-executor-examples.md +++ b/packages/storybook/docs/build-storybook-executor-examples.md @@ -113,7 +113,7 @@ You can set the [`browserTarget`](/deprecated/storybook/angular-browser-target) {% tab label="Adding styles" %} -You 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). +You 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](/recipes/storybook/angular-configuring-styles). ```json "build-storybook": { diff --git a/packages/storybook/docs/storybook-executor-examples.md b/packages/storybook/docs/storybook-executor-examples.md index aa1b91329b..2d21ac3390 100644 --- a/packages/storybook/docs/storybook-executor-examples.md +++ b/packages/storybook/docs/storybook-executor-examples.md @@ -111,7 +111,7 @@ You can set the [`browserTarget`](/deprecated/storybook/angular-browser-target) {% tab label="Adding styles" %} -You 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). +You 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](/recipes/storybook/angular-configuring-styles). ```json "storybook": { diff --git a/packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap b/packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap index 82909b11da..9f8fbaed90 100644 --- a/packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap +++ b/packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap @@ -20,7 +20,7 @@ export default config; // To customize your Vite configuration you can use the viteFinal field. // Check https://storybook.js.org/docs/react/builders/vite#configuration -// and https://nx.dev/packages/storybook/documents/custom-builder-configs +// and https://nx.dev/recipes/storybook/custom-builder-configs " `; @@ -81,7 +81,7 @@ export default config; // To customize your webpack configuration you can use the webpackFinal field. // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config -// and https://nx.dev/packages/storybook/documents/custom-builder-configs +// and https://nx.dev/recipes/storybook/custom-builder-configs " `; diff --git a/packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap b/packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap index eb7d53d7cf..19ffa199c1 100644 --- a/packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap +++ b/packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap @@ -16,7 +16,7 @@ export default config; // To customize your webpack configuration you can use the webpackFinal field. // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config -// and https://nx.dev/packages/storybook/documents/custom-builder-configs +// and https://nx.dev/recipes/storybook/custom-builder-configs " `; @@ -115,7 +115,7 @@ export default config; // To customize your webpack configuration you can use the webpackFinal field. // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config -// and https://nx.dev/packages/storybook/documents/custom-builder-configs +// and https://nx.dev/recipes/storybook/custom-builder-configs " `; @@ -172,7 +172,7 @@ export default config; // To customize your Vite configuration you can use the viteFinal field. // Check https://storybook.js.org/docs/react/builders/vite#configuration -// and https://nx.dev/packages/storybook/documents/custom-builder-configs +// and https://nx.dev/recipes/storybook/custom-builder-configs " `; @@ -198,7 +198,7 @@ export default config; // To customize your Vite configuration you can use the viteFinal field. // Check https://storybook.js.org/docs/react/builders/vite#configuration -// and https://nx.dev/packages/storybook/documents/custom-builder-configs +// and https://nx.dev/recipes/storybook/custom-builder-configs " `; @@ -224,7 +224,7 @@ export default config; // To customize your webpack configuration you can use the webpackFinal field. // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config -// and https://nx.dev/packages/storybook/documents/custom-builder-configs +// and https://nx.dev/recipes/storybook/custom-builder-configs " `; @@ -246,7 +246,7 @@ export default config; // To customize your webpack configuration you can use the webpackFinal field. // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config -// and https://nx.dev/packages/storybook/documents/custom-builder-configs +// and https://nx.dev/recipes/storybook/custom-builder-configs " `; @@ -272,7 +272,7 @@ export default config; // To customize your webpack configuration you can use the webpackFinal field. // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config -// and https://nx.dev/packages/storybook/documents/custom-builder-configs +// and https://nx.dev/recipes/storybook/custom-builder-configs " `; @@ -296,7 +296,7 @@ export default config; // To customize your Vite configuration you can use the viteFinal field. // Check https://storybook.js.org/docs/react/builders/vite#configuration -// and https://nx.dev/packages/storybook/documents/custom-builder-configs +// and https://nx.dev/recipes/storybook/custom-builder-configs " `; @@ -322,7 +322,7 @@ export default config; // To customize your webpack configuration you can use the webpackFinal field. // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config -// and https://nx.dev/packages/storybook/documents/custom-builder-configs +// and https://nx.dev/recipes/storybook/custom-builder-configs " `; @@ -348,7 +348,7 @@ export default config; // To customize your Vite configuration you can use the viteFinal field. // Check https://storybook.js.org/docs/react/builders/vite#configuration -// and https://nx.dev/packages/storybook/documents/custom-builder-configs +// and https://nx.dev/recipes/storybook/custom-builder-configs " `; @@ -370,7 +370,7 @@ export default config; // To customize your webpack configuration you can use the webpackFinal field. // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config -// and https://nx.dev/packages/storybook/documents/custom-builder-configs +// and https://nx.dev/recipes/storybook/custom-builder-configs " `; @@ -396,7 +396,7 @@ export default config; // To customize your webpack configuration you can use the webpackFinal field. // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config -// and https://nx.dev/packages/storybook/documents/custom-builder-configs +// and https://nx.dev/recipes/storybook/custom-builder-configs " `; @@ -422,7 +422,7 @@ export default config; // To customize your Vite configuration you can use the viteFinal field. // Check https://storybook.js.org/docs/react/builders/vite#configuration -// and https://nx.dev/packages/storybook/documents/custom-builder-configs +// and https://nx.dev/recipes/storybook/custom-builder-configs " `; diff --git a/packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__ b/packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__ index 0e8a45f81a..fbded88511 100644 --- a/packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__ +++ b/packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__ @@ -24,11 +24,11 @@ export default config; <% if(!usesVite) { %> // To customize your webpack configuration you can use the webpackFinal field. // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config -// and https://nx.dev/packages/storybook/documents/custom-builder-configs +// and https://nx.dev/recipes/storybook/custom-builder-configs <% } %> <% if(usesVite) { %> // To customize your Vite configuration you can use the viteFinal field. // Check https://storybook.js.org/docs/react/builders/vite#configuration -// and https://nx.dev/packages/storybook/documents/custom-builder-configs +// and https://nx.dev/recipes/storybook/custom-builder-configs <% } %> diff --git a/packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__ b/packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__ index 67a0e00d9b..7a5b06cff8 100644 --- a/packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__ +++ b/packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__ @@ -22,11 +22,11 @@ export default config; <% if(!usesVite) { %> // To customize your webpack configuration you can use the webpackFinal field. // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config -// and https://nx.dev/packages/storybook/documents/custom-builder-configs +// and https://nx.dev/recipes/storybook/custom-builder-configs <% } %> <% if(usesVite) { %> // To customize your Vite configuration you can use the viteFinal field. // Check https://storybook.js.org/docs/react/builders/vite#configuration -// and https://nx.dev/packages/storybook/documents/custom-builder-configs +// and https://nx.dev/recipes/storybook/custom-builder-configs <% } %>