From b7fe0a2311765fc52568b23711cde0b86ad21bba Mon Sep 17 00:00:00 2001 From: Katerina Skroumpelou Date: Wed, 1 Feb 2023 19:03:51 +0200 Subject: [PATCH] docs(storybook): add titles and descriptions to all docs (#14749) --- docs/generated/manifests/menus.json | 10 ++--- docs/generated/manifests/packages.json | 42 +++++++++---------- docs/generated/packages-metadata.json | 42 +++++++++---------- .../documents/angular-browser-target.md | 5 +++ .../documents/angular-configuring-styles.md | 5 +++ .../documents/angular-storybook-compodoc.md | 5 +++ .../documents/angular-storybook-targets.md | 5 +++ .../storybook/documents/best-practices.md | 5 +++ .../documents/custom-builder-configs.md | 7 +++- .../documents/migrate-storybook-7.md | 5 +++ .../migrate-webpack-final-angular.md | 11 ++++- .../documents/migrate-webpack-final-react.md | 15 +++++-- .../storybook/documents/overview-angular.md | 5 +++ .../storybook/documents/overview-react.md | 7 +++- .../packages/storybook/documents/overview.md | 7 +++- .../storybook/documents/storybook-7-setup.md | 5 +++ .../documents/storybook-composition-setup.md | 5 +++ .../documents/upgrade-storybook-v6-angular.md | 5 +++ .../documents/upgrade-storybook-v6-react.md | 5 +++ .../packages/storybook/executors/build.json | 2 +- .../storybook/executors/storybook.json | 4 +- .../generators/change-storybook-targets.json | 2 +- .../storybook/generators/configuration.json | 2 +- docs/map.json | 26 +++++++++--- .../storybook/angular-browser-target.md | 5 +++ .../storybook/angular-configuring-styles.md | 5 +++ .../storybook/angular-storybook-compodoc.md | 5 +++ .../storybook/angular-storybook-targets.md | 5 +++ .../packages/storybook/best-practices.md | 5 +++ .../storybook/custom-builder-configs.md | 7 +++- .../packages/storybook/migrate-storybook-7.md | 5 +++ .../migrate-webpack-final-angular.md | 11 ++++- .../storybook/migrate-webpack-final-react.md | 15 +++++-- .../packages/storybook/plugin-angular.md | 5 +++ .../packages/storybook/plugin-overview.md | 7 +++- .../shared/packages/storybook/plugin-react.md | 7 +++- .../packages/storybook/storybook-7-setup.md | 5 +++ .../storybook/storybook-composition-setup.md | 5 +++ .../storybook/storybook-v6-angular.md | 5 +++ .../packages/storybook/storybook-v6-react.md | 5 +++ .../src/e2e/additional-api-references.cy.ts | 4 +- packages/react/plugins/storybook/index.ts | 2 +- .../docs/build-storybook-executor-examples.md | 5 +++ .../docs/change-storybook-targets-example.md | 5 +++ .../docs/configuration-generator-examples.md | 5 +++ .../docs/storybook-executor-examples.md | 5 +++ .../src/executors/storybook/schema.json | 2 +- 47 files changed, 287 insertions(+), 75 deletions(-) diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index e4972ea28c..0adda7a60d 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -5821,7 +5821,7 @@ "name": "documents", "children": [ { - "name": "Overview Generic", + "name": "Nx Storybook Plugin Overview", "path": "/packages/storybook/documents/overview", "id": "overview", "isExternal": false, @@ -5853,7 +5853,7 @@ "disableCollapsible": false }, { - "name": "Migrate Storybook to version 7", + "name": " Migrate your Nx workspace to Storybook version 7", "path": "/packages/storybook/documents/migrate-storybook-7", "id": "migrate-storybook-7", "isExternal": false, @@ -5909,7 +5909,7 @@ "disableCollapsible": false }, { - "name": "Angular: Storybook Webpack Migration", + "name": "Angular: Storybook Migration to webpackFinal", "path": "/packages/storybook/documents/migrate-webpack-final-angular", "id": "migrate-webpack-final-angular", "isExternal": false, @@ -5925,7 +5925,7 @@ "disableCollapsible": false }, { - "name": "React: Migrate to the Nrwl React Storybook Preset", + "name": "React: Storybook Migration to webpackFinal and the Nx Addon", "path": "/packages/storybook/documents/migrate-webpack-final-react", "id": "migrate-webpack-final-react", "isExternal": false, @@ -5941,7 +5941,7 @@ "disableCollapsible": false }, { - "name": "Custom configurations for Webpack and Vite", + "name": "How to configure Webpack and Vite for Storybook", "path": "/packages/storybook/documents/custom-builder-configs", "id": "custom-builder-configs", "isExternal": false, diff --git a/docs/generated/manifests/packages.json b/docs/generated/manifests/packages.json index 907f2dde87..dbd6d00426 100644 --- a/docs/generated/manifests/packages.json +++ b/docs/generated/manifests/packages.json @@ -2379,8 +2379,8 @@ "documents": { "/packages/storybook/documents/overview": { "id": "overview", - "name": "Overview Generic", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "name": "Nx Storybook Plugin Overview", + "description": "This is an overview page for the Storybook plugin in Nx. It explains what Storybook is and how to set it up in your Nx workspace.", "file": "generated/packages/storybook/documents/overview", "itemList": [], "isExternal": false, @@ -2391,7 +2391,7 @@ "/packages/storybook/documents/overview-react": { "id": "overview-react", "name": "Set up Storybook for React Projects", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "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, @@ -2402,7 +2402,7 @@ "/packages/storybook/documents/overview-angular": { "id": "overview-angular", "name": "Set up Storybook for Angular Projects", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "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, @@ -2413,7 +2413,7 @@ "/packages/storybook/documents/storybook-7-setup": { "id": "storybook-7-setup", "name": "Storybook 7 setup guide", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "description": "This guide explains how you can set up Storybook version 7 in your Nx workspace. It contains information about the generators and the frameworks that are supported.", "file": "generated/packages/storybook/documents/storybook-7-setup", "itemList": [], "isExternal": false, @@ -2423,8 +2423,8 @@ }, "/packages/storybook/documents/migrate-storybook-7": { "id": "migrate-storybook-7", - "name": "Migrate Storybook to version 7", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "name": " Migrate your Nx workspace to Storybook version 7", + "description": "This guide explains how migrate your Nx workspace to Storybook version 7.", "file": "generated/packages/storybook/documents/migrate-storybook-7", "itemList": [], "isExternal": false, @@ -2435,7 +2435,7 @@ "/packages/storybook/documents/best-practices": { "id": "best-practices", "name": "Storybook best practices for making the most out of Nx", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "description": "The purpose of this guide is to help you set up Storybook in your Nx workspace so that you can get the most out of Nx and its powerful capabilities.", "file": "generated/packages/storybook/documents/best-practices", "itemList": [], "isExternal": false, @@ -2446,7 +2446,7 @@ "/packages/storybook/documents/storybook-composition-setup": { "id": "storybook-composition-setup", "name": "Setting up Storybook Composition with Nx", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "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, @@ -2457,7 +2457,7 @@ "/packages/storybook/documents/angular-storybook-compodoc": { "id": "angular-storybook-compodoc", "name": "Angular: Set up Compodoc for Storybook on Nx", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "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, @@ -2468,7 +2468,7 @@ "/packages/storybook/documents/angular-storybook-targets": { "id": "angular-storybook-targets", "name": "Angular: Information about the Storybook targets", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "description": "This document explains the role of the storybook and build-storybook targets in Angular projects with a Storybook configuration, and specifically which executors are used for them.", "file": "generated/packages/storybook/documents/angular-storybook-targets", "itemList": [], "isExternal": false, @@ -2479,7 +2479,7 @@ "/packages/storybook/documents/angular-configuring-styles": { "id": "angular-configuring-styles", "name": "Angular: Configuring styles and preprocessor options", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "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, @@ -2490,7 +2490,7 @@ "/packages/storybook/documents/angular-browser-target": { "id": "angular-browser-target", "name": "Angular: The browserTarget", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "description": "This document explains the role of the browserTarget in Angular projects with a Storybook configuration, and how the Storybook executors use it.", "file": "generated/packages/storybook/documents/angular-browser-target", "itemList": [], "isExternal": false, @@ -2500,8 +2500,8 @@ }, "/packages/storybook/documents/migrate-webpack-final-angular": { "id": "migrate-webpack-final-angular", - "name": "Angular: Storybook Webpack Migration", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "name": "Angular: Storybook Migration to webpackFinal", + "description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration.", "file": "generated/packages/storybook/documents/migrate-webpack-final-angular", "itemList": [], "isExternal": false, @@ -2512,7 +2512,7 @@ "/packages/storybook/documents/upgrade-storybook-v6-angular": { "id": "upgrade-storybook-v6-angular", "name": "Angular: Upgrading to Storybook 6", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for Angular projects.", "file": "generated/packages/storybook/documents/upgrade-storybook-v6-angular", "itemList": [], "isExternal": false, @@ -2522,8 +2522,8 @@ }, "/packages/storybook/documents/migrate-webpack-final-react": { "id": "migrate-webpack-final-react", - "name": "React: Migrate to the Nrwl React Storybook Preset", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "name": "React: Storybook Migration to webpackFinal and the Nx Addon", + "description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration and the Nx React Addon.", "file": "generated/packages/storybook/documents/migrate-webpack-final-react", "itemList": [], "isExternal": false, @@ -2534,7 +2534,7 @@ "/packages/storybook/documents/upgrade-storybook-v6-react": { "id": "upgrade-storybook-v6-react", "name": "React: Upgrading to Storybook 6", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for React projects.", "file": "generated/packages/storybook/documents/upgrade-storybook-v6-react", "itemList": [], "isExternal": false, @@ -2544,8 +2544,8 @@ }, "/packages/storybook/documents/custom-builder-configs": { "id": "custom-builder-configs", - "name": "Custom configurations for Webpack and Vite", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "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, diff --git a/docs/generated/packages-metadata.json b/docs/generated/packages-metadata.json index 918a8680f2..d39f958ba9 100644 --- a/docs/generated/packages-metadata.json +++ b/docs/generated/packages-metadata.json @@ -2352,8 +2352,8 @@ "documents": [ { "id": "overview", - "name": "Overview Generic", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "name": "Nx Storybook Plugin Overview", + "description": "This is an overview page for the Storybook plugin in Nx. It explains what Storybook is and how to set it up in your Nx workspace.", "file": "generated/packages/storybook/documents/overview", "itemList": [], "isExternal": false, @@ -2364,7 +2364,7 @@ { "id": "overview-react", "name": "Set up Storybook for React Projects", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "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, @@ -2375,7 +2375,7 @@ { "id": "overview-angular", "name": "Set up Storybook for Angular Projects", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "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, @@ -2386,7 +2386,7 @@ { "id": "storybook-7-setup", "name": "Storybook 7 setup guide", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "description": "This guide explains how you can set up Storybook version 7 in your Nx workspace. It contains information about the generators and the frameworks that are supported.", "file": "generated/packages/storybook/documents/storybook-7-setup", "itemList": [], "isExternal": false, @@ -2396,8 +2396,8 @@ }, { "id": "migrate-storybook-7", - "name": "Migrate Storybook to version 7", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "name": " Migrate your Nx workspace to Storybook version 7", + "description": "This guide explains how migrate your Nx workspace to Storybook version 7.", "file": "generated/packages/storybook/documents/migrate-storybook-7", "itemList": [], "isExternal": false, @@ -2408,7 +2408,7 @@ { "id": "best-practices", "name": "Storybook best practices for making the most out of Nx", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "description": "The purpose of this guide is to help you set up Storybook in your Nx workspace so that you can get the most out of Nx and its powerful capabilities.", "file": "generated/packages/storybook/documents/best-practices", "itemList": [], "isExternal": false, @@ -2419,7 +2419,7 @@ { "id": "storybook-composition-setup", "name": "Setting up Storybook Composition with Nx", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "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, @@ -2430,7 +2430,7 @@ { "id": "angular-storybook-compodoc", "name": "Angular: Set up Compodoc for Storybook on Nx", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "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, @@ -2441,7 +2441,7 @@ { "id": "angular-storybook-targets", "name": "Angular: Information about the Storybook targets", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "description": "This document explains the role of the storybook and build-storybook targets in Angular projects with a Storybook configuration, and specifically which executors are used for them.", "file": "generated/packages/storybook/documents/angular-storybook-targets", "itemList": [], "isExternal": false, @@ -2452,7 +2452,7 @@ { "id": "angular-configuring-styles", "name": "Angular: Configuring styles and preprocessor options", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "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, @@ -2463,7 +2463,7 @@ { "id": "angular-browser-target", "name": "Angular: The browserTarget", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "description": "This document explains the role of the browserTarget in Angular projects with a Storybook configuration, and how the Storybook executors use it.", "file": "generated/packages/storybook/documents/angular-browser-target", "itemList": [], "isExternal": false, @@ -2473,8 +2473,8 @@ }, { "id": "migrate-webpack-final-angular", - "name": "Angular: Storybook Webpack Migration", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "name": "Angular: Storybook Migration to webpackFinal", + "description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration.", "file": "generated/packages/storybook/documents/migrate-webpack-final-angular", "itemList": [], "isExternal": false, @@ -2485,7 +2485,7 @@ { "id": "upgrade-storybook-v6-angular", "name": "Angular: Upgrading to Storybook 6", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for Angular projects.", "file": "generated/packages/storybook/documents/upgrade-storybook-v6-angular", "itemList": [], "isExternal": false, @@ -2495,8 +2495,8 @@ }, { "id": "migrate-webpack-final-react", - "name": "React: Migrate to the Nrwl React Storybook Preset", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "name": "React: Storybook Migration to webpackFinal and the Nx Addon", + "description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration and the Nx React Addon.", "file": "generated/packages/storybook/documents/migrate-webpack-final-react", "itemList": [], "isExternal": false, @@ -2507,7 +2507,7 @@ { "id": "upgrade-storybook-v6-react", "name": "React: Upgrading to Storybook 6", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for React projects.", "file": "generated/packages/storybook/documents/upgrade-storybook-v6-react", "itemList": [], "isExternal": false, @@ -2517,8 +2517,8 @@ }, { "id": "custom-builder-configs", - "name": "Custom configurations for Webpack and Vite", - "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.", + "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, diff --git a/docs/generated/packages/storybook/documents/angular-browser-target.md b/docs/generated/packages/storybook/documents/angular-browser-target.md index ce151471f0..62dcfe098d 100644 --- a/docs/generated/packages/storybook/documents/angular-browser-target.md +++ b/docs/generated/packages/storybook/documents/angular-browser-target.md @@ -1,3 +1,8 @@ +--- +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" %} diff --git a/docs/generated/packages/storybook/documents/angular-configuring-styles.md b/docs/generated/packages/storybook/documents/angular-configuring-styles.md index 2c8cd0be03..3abd446ae5 100644 --- a/docs/generated/packages/storybook/documents/angular-configuring-styles.md +++ b/docs/generated/packages/storybook/documents/angular-configuring-styles.md @@ -1,3 +1,8 @@ +--- +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" %} diff --git a/docs/generated/packages/storybook/documents/angular-storybook-compodoc.md b/docs/generated/packages/storybook/documents/angular-storybook-compodoc.md index 71a31b692c..01f55ef2c1 100644 --- a/docs/generated/packages/storybook/documents/angular-storybook-compodoc.md +++ b/docs/generated/packages/storybook/documents/angular-storybook-compodoc.md @@ -1,3 +1,8 @@ +--- +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" %} diff --git a/docs/generated/packages/storybook/documents/angular-storybook-targets.md b/docs/generated/packages/storybook/documents/angular-storybook-targets.md index e3b934b049..fbf3b05d57 100644 --- a/docs/generated/packages/storybook/documents/angular-storybook-targets.md +++ b/docs/generated/packages/storybook/documents/angular-storybook-targets.md @@ -1,3 +1,8 @@ +--- +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" %} diff --git a/docs/generated/packages/storybook/documents/best-practices.md b/docs/generated/packages/storybook/documents/best-practices.md index 10ef4776ed..7fd0094b9f 100644 --- a/docs/generated/packages/storybook/documents/best-practices.md +++ b/docs/generated/packages/storybook/documents/best-practices.md @@ -1,3 +1,8 @@ +--- +title: Storybook best practices for making the most out of Nx +description: The purpose of this guide is to help you set up Storybook in your Nx workspace so that you can get the most out of Nx and its powerful capabilities. +--- + # Storybook best practices for making the most out of Nx ## Purpose of this guide diff --git a/docs/generated/packages/storybook/documents/custom-builder-configs.md b/docs/generated/packages/storybook/documents/custom-builder-configs.md index 7ac8cdbb8d..b6914c79f7 100644 --- a/docs/generated/packages/storybook/documents/custom-builder-configs.md +++ b/docs/generated/packages/storybook/documents/custom-builder-configs.md @@ -1,4 +1,9 @@ -# Custom configurations for Webpack and Vite +--- +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). diff --git a/docs/generated/packages/storybook/documents/migrate-storybook-7.md b/docs/generated/packages/storybook/documents/migrate-storybook-7.md index 1d74ffe95a..a48042a59e 100644 --- a/docs/generated/packages/storybook/documents/migrate-storybook-7.md +++ b/docs/generated/packages/storybook/documents/migrate-storybook-7.md @@ -1,3 +1,8 @@ +--- +title: Migrate your Nx workspace to Storybook version 7 +description: This guide explains how migrate your Nx workspace to Storybook version 7. +--- + # Migrate your Nx workspace to Storybook version 7 {% callout type="info" title="Available on Nx v15.5" %} diff --git a/docs/generated/packages/storybook/documents/migrate-webpack-final-angular.md b/docs/generated/packages/storybook/documents/migrate-webpack-final-angular.md index 32560c7276..22ac16b49b 100644 --- a/docs/generated/packages/storybook/documents/migrate-webpack-final-angular.md +++ b/docs/generated/packages/storybook/documents/migrate-webpack-final-angular.md @@ -1,4 +1,13 @@ -# Storybook Webpack Migration +--- +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. diff --git a/docs/generated/packages/storybook/documents/migrate-webpack-final-react.md b/docs/generated/packages/storybook/documents/migrate-webpack-final-react.md index f782dc3072..490f705b92 100644 --- a/docs/generated/packages/storybook/documents/migrate-webpack-final-react.md +++ b/docs/generated/packages/storybook/documents/migrate-webpack-final-react.md @@ -1,6 +1,15 @@ -# Nrwl React Storybook Preset +--- +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 12.7 comes with a dedicated Storybook preset for React which drammatically simplifies the Storybook setup and makes sure that Storybook uses the same webpack configuration as your React applications running within an Nx workspace. +# 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" @@ -10,7 +19,7 @@ width="100%" /%} 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 preset exported by `@nrwl/react/plugins/storybook`. +- the `main.js` file now contains a predefined Storybook addon exported by `@nrwl/react/plugins/storybook`. Here's an example of a newly generated `main.js` file: diff --git a/docs/generated/packages/storybook/documents/overview-angular.md b/docs/generated/packages/storybook/documents/overview-angular.md index 907277e069..b1f19661b0 100644 --- a/docs/generated/packages/storybook/documents/overview-angular.md +++ b/docs/generated/packages/storybook/documents/overview-angular.md @@ -1,3 +1,8 @@ +--- +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. diff --git a/docs/generated/packages/storybook/documents/overview-react.md b/docs/generated/packages/storybook/documents/overview-react.md index b792d4b159..e20b09d4d9 100644 --- a/docs/generated/packages/storybook/documents/overview-react.md +++ b/docs/generated/packages/storybook/documents/overview-react.md @@ -1,3 +1,8 @@ +--- +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. @@ -156,4 +161,4 @@ For more on using Storybook, see the [official Storybook documentation](https:// Here's more information on common migration scenarios for Storybook with Nx. For Storybook specific migrations that are not automatically handled by Nx please refer to the [official Storybook page](https://storybook.js.org/) - [Upgrading to Storybook 6](/packages/storybook/documents/upgrade-storybook-v6-react) -- [Migrate to the Nrwl React Storybook Preset](/packages/storybook/documents/migrate-webpack-final-react) +- [Migrate to the Nx React Storybook Addon](/packages/storybook/documents/migrate-webpack-final-react) diff --git a/docs/generated/packages/storybook/documents/overview.md b/docs/generated/packages/storybook/documents/overview.md index c168381acc..312a911659 100644 --- a/docs/generated/packages/storybook/documents/overview.md +++ b/docs/generated/packages/storybook/documents/overview.md @@ -1,3 +1,8 @@ +--- +title: Nx Storybook Plugin Overview +description: This is an overview page for the Storybook plugin in Nx. It explains what Storybook is and how to set it up in your Nx workspace. +--- + [Storybook](https://storybook.js.org) is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. This guide will briefly walk you through using Storybook within an Nx workspace. @@ -188,4 +193,4 @@ For more on using Storybook, see the [official Storybook documentation](https:// Here's more information on common migration scenarios for Storybook with Nx. For Storybook specific migrations that are not automatically handled by Nx please refer to the [official Storybook page](https://storybook.js.org/) - [Upgrading to Storybook 6](/packages/storybook/documents/upgrade-storybook-v6-react) -- [Migrate to the Nrwl React Storybook Preset](/packages/storybook/documents/migrate-webpack-final-react) +- [Migrate to the Nx React Storybook Addon](/packages/storybook/documents/migrate-webpack-final-react) diff --git a/docs/generated/packages/storybook/documents/storybook-7-setup.md b/docs/generated/packages/storybook/documents/storybook-7-setup.md index 69cff81e04..810072f702 100644 --- a/docs/generated/packages/storybook/documents/storybook-7-setup.md +++ b/docs/generated/packages/storybook/documents/storybook-7-setup.md @@ -1,3 +1,8 @@ +--- +title: Storybook 7 setup guide +description: This guide explains how you can set up Storybook version 7 in your Nx workspace. It contains information about the generators and the frameworks that are supported. +--- + # Storybook 7 is here - and Nx is ready {% callout type="info" title="Available on Nx v15.6" %} diff --git a/docs/generated/packages/storybook/documents/storybook-composition-setup.md b/docs/generated/packages/storybook/documents/storybook-composition-setup.md index 3274cf285b..d2970dd7b4 100644 --- a/docs/generated/packages/storybook/documents/storybook-composition-setup.md +++ b/docs/generated/packages/storybook/documents/storybook-composition-setup.md @@ -1,3 +1,8 @@ +--- +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 diff --git a/docs/generated/packages/storybook/documents/upgrade-storybook-v6-angular.md b/docs/generated/packages/storybook/documents/upgrade-storybook-v6-angular.md index 55c8adb266..7cf6449f1e 100644 --- a/docs/generated/packages/storybook/documents/upgrade-storybook-v6-angular.md +++ b/docs/generated/packages/storybook/documents/upgrade-storybook-v6-angular.md @@ -1,3 +1,8 @@ +--- +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._ diff --git a/docs/generated/packages/storybook/documents/upgrade-storybook-v6-react.md b/docs/generated/packages/storybook/documents/upgrade-storybook-v6-react.md index 9c3412bebb..053fa0caa6 100644 --- a/docs/generated/packages/storybook/documents/upgrade-storybook-v6-react.md +++ b/docs/generated/packages/storybook/documents/upgrade-storybook-v6-react.md @@ -1,3 +1,8 @@ +--- +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._ diff --git a/docs/generated/packages/storybook/executors/build.json b/docs/generated/packages/storybook/executors/build.json index 3d3da2a4e2..a2ab75c747 100644 --- a/docs/generated/packages/storybook/executors/build.json +++ b/docs/generated/packages/storybook/executors/build.json @@ -138,7 +138,7 @@ }, "additionalProperties": true, "required": ["uiFramework", "configDir"], - "examplesFile": "`project.json`:\n\n```json\n//...\n\"ui\": {\n \"targets\": {\n //...\n \"build-storybook\": {\n \"executor\": \"@nrwl/storybook:build\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"uiFramework\": \"@storybook/react\",\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=\"Setting the uiFramework\" %}\n\nYou can change the `uiFramework` option, to correspond to the framework you are using for your project. Supported values are: `\"@storybook/react\"`, `\"@storybook/html\"`, `\"@storybook/web-components\"`, `\"@storybook/vue\"`, `\"@storybook/vue3\"` and `\"@storybook/svelte\"`. If you are using Angular, please check out the Angular-specific Storybook executor.\n\n```json\n\"build-storybook\": {\n \"executor\": \"@nrwl/storybook:build\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"uiFramework\": \"@storybook/web-components\",\n \"outputDir\": \"dist/storybook/ui\",\n \"configDir\": \"libs/ui/.storybook\"\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\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\": \"@nrwl/storybook:build\",\n \"options\": {\n \"uiFramework\": \"@storybook/react\",\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"docsMode\": true\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n\n### For Angular projects\n\n{% tabs %}\n{% tab label=\"Default configuration\" %}\n\nThis is the default configuration for Angular projects using Storybook. You can see that it uses the native `@storybook/angular:build-storybook` executor. You can read more about the configuration options at the relevant [Storybook documentation page](https://storybook.js.org/docs/angular/get-started/install).\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n{% tab label=\"Changing the browserTarget\" %}\n\nYou can set the [`browserTarget`](/packages/storybook/documents/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build-storybook\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Adding styles\" %}\n\nYou can add paths to stylesheets to be included in the Storybook build by using the `styles` array. You can also add `stylePreprocessorOptions`, much like you would do in the Angular builder. You can read more in our guide about [styles and preprocessor options for Storybook](/packages/storybook/documents/angular-configuring-styles).\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build-storybook\",\n \"compodoc\": false,\n \"styles\": [\"some-styles.css\"],\n \"stylePreprocessorOptions\": {\n \"includePaths\": [\"some-style-paths\"]\n }\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n" + "examplesFile": "---\ntitle: Storybook builder executor examples\ndescription: This page contains examples for the @nrwl/storybook:build executor.\n---\n\n`project.json`:\n\n```json\n//...\n\"ui\": {\n \"targets\": {\n //...\n \"build-storybook\": {\n \"executor\": \"@nrwl/storybook:build\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"uiFramework\": \"@storybook/react\",\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=\"Setting the uiFramework\" %}\n\nYou can change the `uiFramework` option, to correspond to the framework you are using for your project. Supported values are: `\"@storybook/react\"`, `\"@storybook/html\"`, `\"@storybook/web-components\"`, `\"@storybook/vue\"`, `\"@storybook/vue3\"` and `\"@storybook/svelte\"`. If you are using Angular, please check out the Angular-specific Storybook executor.\n\n```json\n\"build-storybook\": {\n \"executor\": \"@nrwl/storybook:build\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"uiFramework\": \"@storybook/web-components\",\n \"outputDir\": \"dist/storybook/ui\",\n \"configDir\": \"libs/ui/.storybook\"\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\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\": \"@nrwl/storybook:build\",\n \"options\": {\n \"uiFramework\": \"@storybook/react\",\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"docsMode\": true\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n\n### For Angular projects\n\n{% tabs %}\n{% tab label=\"Default configuration\" %}\n\nThis is the default configuration for Angular projects using Storybook. You can see that it uses the native `@storybook/angular:build-storybook` executor. You can read more about the configuration options at the relevant [Storybook documentation page](https://storybook.js.org/docs/angular/get-started/install).\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n{% tab label=\"Changing the browserTarget\" %}\n\nYou can set the [`browserTarget`](/packages/storybook/documents/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build-storybook\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Adding styles\" %}\n\nYou can add paths to stylesheets to be included in the Storybook build by using the `styles` array. You can also add `stylePreprocessorOptions`, much like you would do in the Angular builder. You can read more in our guide about [styles and preprocessor options for Storybook](/packages/storybook/documents/angular-configuring-styles).\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build-storybook\",\n \"compodoc\": false,\n \"styles\": [\"some-styles.css\"],\n \"stylePreprocessorOptions\": {\n \"includePaths\": [\"some-style-paths\"]\n }\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n" }, "description": "Build Storybook.", "aliases": [], diff --git a/docs/generated/packages/storybook/executors/storybook.json b/docs/generated/packages/storybook/executors/storybook.json index 2258abbcac..3e07b8f312 100644 --- a/docs/generated/packages/storybook/executors/storybook.json +++ b/docs/generated/packages/storybook/executors/storybook.json @@ -6,7 +6,7 @@ "outputCapture": "direct-nodejs", "title": "Storybook Dev Builder", "cli": "nx", - "description": "Serve up storybook in development mode.", + "description": "Serve up Storybook in development mode.", "type": "object", "presets": [ { @@ -88,7 +88,7 @@ "additionalProperties": true, "definitions": {}, "required": ["uiFramework", "configDir"], - "examplesFile": "`project.json`:\n\n```json\n//...\n\"ui\": {\n \"targets\": {\n //...\n \"storybook\": {\n \"executor\": \"@nrwl/storybook:storybook\",\n \"options\": {\n \"uiFramework\": \"@storybook/react\",\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=\"Setting the uiFramework\" %}\n\nYou can change the `uiFramework` option, to correspond to the framework you are using for your project. Supported values are: `\"@storybook/react\"`, `\"@storybook/html\"`, `\"@storybook/web-components\"`, `\"@storybook/vue\"`, `\"@storybook/vue3\"` and `\"@storybook/svelte\"`. If you are using Angular, please check out the Angular-specific Storybook executor.\n\n```json\n\"storybook\": {\n \"executor\": \"@nrwl/storybook:storybook\",\n \"options\": {\n \"uiFramework\": \"@storybook/web-components\",\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\"\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\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\": \"@nrwl/storybook:storybook\",\n \"options\": {\n \"uiFramework\": \"@storybook/react\",\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"docsMode\": true\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n\n### For Angular projects\n\n{% tabs %}\n{% tab label=\"Default configuration\" %}\n\nThis is the default configuration for Angular projects using Storybook. You can see that it uses the native `@storybook/angular:start-storybook` executor. You can read more about the configuration options at the relevant [Storybook documentation page](https://storybook.js.org/docs/angular/get-started/install).\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n{% tab label=\"Changing the browserTarget\" %}\n\nYou can set the [`browserTarget`](/packages/storybook/documents/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build-storybook\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n\n{% tab label=\"Adding styles\" %}\n\nYou can add paths to stylesheets to be included in the Storybook build by using the `styles` array. You can also add `stylePreprocessorOptions`, much like you would do in the Angular builder. You can read more in our guide about [styles and preprocessor options for Storybook](/packages/storybook/documents/angular-configuring-styles).\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false,\n \"styles\": [\"some-styles.css\"],\n \"stylePreprocessorOptions\": {\n \"includePaths\": [\"some-style-paths\"]\n }\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n\n{% /tabs %}\n" + "examplesFile": "---\ntitle: Storybook dev server executor examples\ndescription: This page contains examples for the @nrwl/storybook:storybook executor.\n---\n\n`project.json`:\n\n```json\n//...\n\"ui\": {\n \"targets\": {\n //...\n \"storybook\": {\n \"executor\": \"@nrwl/storybook:storybook\",\n \"options\": {\n \"uiFramework\": \"@storybook/react\",\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=\"Setting the uiFramework\" %}\n\nYou can change the `uiFramework` option, to correspond to the framework you are using for your project. Supported values are: `\"@storybook/react\"`, `\"@storybook/html\"`, `\"@storybook/web-components\"`, `\"@storybook/vue\"`, `\"@storybook/vue3\"` and `\"@storybook/svelte\"`. If you are using Angular, please check out the Angular-specific Storybook executor.\n\n```json\n\"storybook\": {\n \"executor\": \"@nrwl/storybook:storybook\",\n \"options\": {\n \"uiFramework\": \"@storybook/web-components\",\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\"\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\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\": \"@nrwl/storybook:storybook\",\n \"options\": {\n \"uiFramework\": \"@storybook/react\",\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"docsMode\": true\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n\n### For Angular projects\n\n{% tabs %}\n{% tab label=\"Default configuration\" %}\n\nThis is the default configuration for Angular projects using Storybook. You can see that it uses the native `@storybook/angular:start-storybook` executor. You can read more about the configuration options at the relevant [Storybook documentation page](https://storybook.js.org/docs/angular/get-started/install).\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n{% tab label=\"Changing the browserTarget\" %}\n\nYou can set the [`browserTarget`](/packages/storybook/documents/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build-storybook\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n\n{% tab label=\"Adding styles\" %}\n\nYou can add paths to stylesheets to be included in the Storybook build by using the `styles` array. You can also add `stylePreprocessorOptions`, much like you would do in the Angular builder. You can read more in our guide about [styles and preprocessor options for Storybook](/packages/storybook/documents/angular-configuring-styles).\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false,\n \"styles\": [\"some-styles.css\"],\n \"stylePreprocessorOptions\": {\n \"includePaths\": [\"some-style-paths\"]\n }\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n\n{% /tabs %}\n" }, "description": "Serve Storybook.", "aliases": [], diff --git a/docs/generated/packages/storybook/generators/change-storybook-targets.json b/docs/generated/packages/storybook/generators/change-storybook-targets.json index 24656e4e9d..bd5069c9a6 100644 --- a/docs/generated/packages/storybook/generators/change-storybook-targets.json +++ b/docs/generated/packages/storybook/generators/change-storybook-targets.json @@ -10,7 +10,7 @@ "type": "object", "properties": {}, "required": [], - "examplesFile": "This generator 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 (`@nrwl/storybook:build-storybook` and `@nrwl/storybook:storybook`).\n\nThis generator is usually invoked through a migrator, when you are using `nx migrate` to upgrade your workspace to Nx `14.1.8` or later.\n\nIf you are on Nx `14.1.8` or later and you did not use `nx migrate`, you can run this generator manually by running the following command:\n\n```bash\nnx g @nrwl/storybook:change-storybook-targets\n```\n\nYou can read more about how this generator works, and why we are changing the Storybook targets, in the [Angular Storybook targets documentation page](/packages/storybook/documents/angular-storybook-targets).\n", + "examplesFile": "---\ntitle: Change Storybook targets generator examples\ndescription: This page contains examples for the @nrwl/storybook:change-storybook-targets generator, targeted to Angular projects set up with Storybook.\n---\n\nThis generator 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 (`@nrwl/storybook:build-storybook` and `@nrwl/storybook:storybook`).\n\nThis generator is usually invoked through a migrator, when you are using `nx migrate` to upgrade your workspace to Nx `14.1.8` or later.\n\nIf you are on Nx `14.1.8` or later and you did not use `nx migrate`, you can run this generator manually by running the following command:\n\n```bash\nnx g @nrwl/storybook:change-storybook-targets\n```\n\nYou can read more about how this generator works, and why we are changing the Storybook targets, in the [Angular Storybook targets documentation page](/packages/storybook/documents/angular-storybook-targets).\n", "presets": [] }, "description": "Change storybook targets for Angular projects to use @storybook/angular executors", diff --git a/docs/generated/packages/storybook/generators/configuration.json b/docs/generated/packages/storybook/generators/configuration.json index 194fb2840a..d044bd34b8 100644 --- a/docs/generated/packages/storybook/generators/configuration.json +++ b/docs/generated/packages/storybook/generators/configuration.json @@ -110,7 +110,7 @@ } }, "required": ["name"], - "examplesFile": "This is a framework-agnostic generator for setting up Storybook configuration for a project.\n\n```bash\nnx g @nrwl/storybook:configuration\n```\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- The `uiFramework` you want to use. Supported values are: `\"@storybook/angular\"`, `\"@storybook/react\"`, `\"@storybook/react-native\"`, `\"@storybook/html\"`, `\"@storybook/web-components\"`, `\"@storybook/vue\"`, `\"@storybook/vue3\"` and `\"@storybook/svelte\"`.\n- Whether you want to `configureCypress`. If you choose `yes`, a Cypress e2e app will be created (or configured) to run against the project's Storybook instance.\n- Whether you want to `configureTestRunner`. If you choose `yes`, 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).\n\nYou must provide a `name` and a `uiFramework` for the generator to work.\n\nYou can read more about how this generator works, in the [Storybook package overview page](https://nx.dev/packages/storybook#generating-storybook-configuration).\n\nIf you are using Angular, React, React Native or Next.js in your project, it's best to use the framework specific generator:\n\n- [React Storybook Configuration Generator](/packages/react/generators/storybook-configuration) (React and Next.js projects)\n\n- [Angular Storybook Configuration Generator](/packages/angular/generators/storybook-configuration)\n\n- [React Native Storybook Configuration Generator](/packages/react-native/generators/storybook-configuration)\n\n## Examples\n\n### Generate Storybook configuration using TypeScript\n\n```bash\nnx g @nrwl/storybook:configuration ui --uiFramework=@storybook/web-components --tsConfiguration=true\n```\n\nThis will generate a Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory).\n\n### Generate Storybook configuration for Storybook version 7\n\n```bash\nnx g @nrwl/storybook:configuration ui --uiFramework=@storybook/react --storybook7betaConfiguration=true\n```\n\nOR\n\n```bash\nnx g @nrwl/storybook:configuration ui --storybook7UiFramework=@storybook/react-vite --storybook7betaConfiguration=true\n```\n\nThis will generate a Storybook configuration for the `ui` project using Storybook version 7. It will install the Storybook version 7 dependencies and configure the Storybook configuration files (the files inside the `.storybook` directory) to use Storybook version 7. You can read more about Storybook 7 Nx support in the [Storybook 7 setup guide](/packages/storybook/documents/storybook-7-setup).\n", + "examplesFile": "---\ntitle: Storybook configuration generator examples\ndescription: This page contains examples for the @nrwl/storybook:configuration generator.\n---\n\nThis is a framework-agnostic generator for setting up Storybook configuration for a project.\n\n```bash\nnx g @nrwl/storybook:configuration\n```\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- The `uiFramework` you want to use. Supported values are: `\"@storybook/angular\"`, `\"@storybook/react\"`, `\"@storybook/react-native\"`, `\"@storybook/html\"`, `\"@storybook/web-components\"`, `\"@storybook/vue\"`, `\"@storybook/vue3\"` and `\"@storybook/svelte\"`.\n- Whether you want to `configureCypress`. If you choose `yes`, a Cypress e2e app will be created (or configured) to run against the project's Storybook instance.\n- Whether you want to `configureTestRunner`. If you choose `yes`, 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).\n\nYou must provide a `name` and a `uiFramework` for the generator to work.\n\nYou can read more about how this generator works, in the [Storybook package overview page](https://nx.dev/packages/storybook#generating-storybook-configuration).\n\nIf you are using Angular, React, React Native or Next.js in your project, it's best to use the framework specific generator:\n\n- [React Storybook Configuration Generator](/packages/react/generators/storybook-configuration) (React and Next.js projects)\n\n- [Angular Storybook Configuration Generator](/packages/angular/generators/storybook-configuration)\n\n- [React Native Storybook Configuration Generator](/packages/react-native/generators/storybook-configuration)\n\n## Examples\n\n### Generate Storybook configuration using TypeScript\n\n```bash\nnx g @nrwl/storybook:configuration ui --uiFramework=@storybook/web-components --tsConfiguration=true\n```\n\nThis will generate a Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory).\n\n### Generate Storybook configuration for Storybook version 7\n\n```bash\nnx g @nrwl/storybook:configuration ui --uiFramework=@storybook/react --storybook7betaConfiguration=true\n```\n\nOR\n\n```bash\nnx g @nrwl/storybook:configuration ui --storybook7UiFramework=@storybook/react-vite --storybook7betaConfiguration=true\n```\n\nThis will generate a Storybook configuration for the `ui` project using Storybook version 7. It will install the Storybook version 7 dependencies and configure the Storybook configuration files (the files inside the `.storybook` directory) to use Storybook version 7. You can read more about Storybook 7 Nx support in the [Storybook 7 setup guide](/packages/storybook/documents/storybook-7-setup).\n", "presets": [] }, "description": "Add Storybook configuration to a UI library or an application.", diff --git a/docs/map.json b/docs/map.json index 423b81e66a..6ce11c0d70 100644 --- a/docs/map.json +++ b/docs/map.json @@ -1703,83 +1703,99 @@ "itemList": [ { "id": "overview", - "name": "Overview Generic", + "name": "Nx Storybook Plugin Overview", + "description": "This is an overview page for the Storybook plugin in Nx. It explains what Storybook is and how to set it up in your Nx workspace.", "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": "storybook-7-setup", "name": "Storybook 7 setup guide", + "description": "This guide explains how you can set up Storybook version 7 in your Nx workspace. It contains information about the generators and the frameworks that are supported.", "file": "shared/packages/storybook/storybook-7-setup" }, { "id": "migrate-storybook-7", - "name": "Migrate Storybook to version 7", + "name": " Migrate your Nx workspace to Storybook version 7", + "description": "This guide explains how migrate your Nx workspace to Storybook version 7.", "file": "shared/packages/storybook/migrate-storybook-7" }, { "id": "best-practices", "name": "Storybook best practices for making the most out of Nx", + "description": "The purpose of this guide is to help you set up Storybook in your Nx workspace so that you can get the most out of Nx and its powerful capabilities.", "file": "shared/packages/storybook/best-practices" }, { "id": "storybook-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-storybook-targets", "name": "Angular: Information about the Storybook targets", + "description": "This document explains the role of the storybook and build-storybook targets in Angular projects with a Storybook configuration, and specifically which executors are used for them.", "file": "shared/packages/storybook/angular-storybook-targets" }, { "id": "angular-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" }, { "id": "angular-browser-target", "name": "Angular: The browserTarget", + "description": "This document explains the role of the browserTarget in Angular projects with a Storybook configuration, and how the Storybook executors use it.", "file": "shared/packages/storybook/angular-browser-target" }, { "id": "migrate-webpack-final-angular", - "name": "Angular: Storybook Webpack Migration", + "name": "Angular: Storybook Migration to webpackFinal", + "description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration.", "file": "shared/packages/storybook/migrate-webpack-final-angular" }, { "id": "upgrade-storybook-v6-angular", "name": "Angular: Upgrading to Storybook 6", + "description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for Angular projects.", "file": "shared/packages/storybook/storybook-v6-angular" }, { "id": "migrate-webpack-final-react", - "name": "React: Migrate to the Nrwl React Storybook Preset", + "name": "React: Storybook Migration to webpackFinal and the Nx Addon", + "description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration and the Nx React Addon.", "file": "shared/packages/storybook/migrate-webpack-final-react" }, { "id": "upgrade-storybook-v6-react", "name": "React: Upgrading to Storybook 6", + "description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for React projects.", "file": "shared/packages/storybook/storybook-v6-react" }, { "id": "custom-builder-configs", - "name": "Custom configurations for Webpack and Vite", + "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" } ] diff --git a/docs/shared/packages/storybook/angular-browser-target.md b/docs/shared/packages/storybook/angular-browser-target.md index ce151471f0..62dcfe098d 100644 --- a/docs/shared/packages/storybook/angular-browser-target.md +++ b/docs/shared/packages/storybook/angular-browser-target.md @@ -1,3 +1,8 @@ +--- +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" %} diff --git a/docs/shared/packages/storybook/angular-configuring-styles.md b/docs/shared/packages/storybook/angular-configuring-styles.md index 2c8cd0be03..3abd446ae5 100644 --- a/docs/shared/packages/storybook/angular-configuring-styles.md +++ b/docs/shared/packages/storybook/angular-configuring-styles.md @@ -1,3 +1,8 @@ +--- +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" %} diff --git a/docs/shared/packages/storybook/angular-storybook-compodoc.md b/docs/shared/packages/storybook/angular-storybook-compodoc.md index 71a31b692c..01f55ef2c1 100644 --- a/docs/shared/packages/storybook/angular-storybook-compodoc.md +++ b/docs/shared/packages/storybook/angular-storybook-compodoc.md @@ -1,3 +1,8 @@ +--- +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" %} diff --git a/docs/shared/packages/storybook/angular-storybook-targets.md b/docs/shared/packages/storybook/angular-storybook-targets.md index e3b934b049..fbf3b05d57 100644 --- a/docs/shared/packages/storybook/angular-storybook-targets.md +++ b/docs/shared/packages/storybook/angular-storybook-targets.md @@ -1,3 +1,8 @@ +--- +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" %} diff --git a/docs/shared/packages/storybook/best-practices.md b/docs/shared/packages/storybook/best-practices.md index 10ef4776ed..7fd0094b9f 100644 --- a/docs/shared/packages/storybook/best-practices.md +++ b/docs/shared/packages/storybook/best-practices.md @@ -1,3 +1,8 @@ +--- +title: Storybook best practices for making the most out of Nx +description: The purpose of this guide is to help you set up Storybook in your Nx workspace so that you can get the most out of Nx and its powerful capabilities. +--- + # Storybook best practices for making the most out of Nx ## Purpose of this guide diff --git a/docs/shared/packages/storybook/custom-builder-configs.md b/docs/shared/packages/storybook/custom-builder-configs.md index 7ac8cdbb8d..b6914c79f7 100644 --- a/docs/shared/packages/storybook/custom-builder-configs.md +++ b/docs/shared/packages/storybook/custom-builder-configs.md @@ -1,4 +1,9 @@ -# Custom configurations for Webpack and Vite +--- +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). diff --git a/docs/shared/packages/storybook/migrate-storybook-7.md b/docs/shared/packages/storybook/migrate-storybook-7.md index 1d74ffe95a..a48042a59e 100644 --- a/docs/shared/packages/storybook/migrate-storybook-7.md +++ b/docs/shared/packages/storybook/migrate-storybook-7.md @@ -1,3 +1,8 @@ +--- +title: Migrate your Nx workspace to Storybook version 7 +description: This guide explains how migrate your Nx workspace to Storybook version 7. +--- + # Migrate your Nx workspace to Storybook version 7 {% callout type="info" title="Available on Nx v15.5" %} diff --git a/docs/shared/packages/storybook/migrate-webpack-final-angular.md b/docs/shared/packages/storybook/migrate-webpack-final-angular.md index 32560c7276..22ac16b49b 100644 --- a/docs/shared/packages/storybook/migrate-webpack-final-angular.md +++ b/docs/shared/packages/storybook/migrate-webpack-final-angular.md @@ -1,4 +1,13 @@ -# Storybook Webpack Migration +--- +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. diff --git a/docs/shared/packages/storybook/migrate-webpack-final-react.md b/docs/shared/packages/storybook/migrate-webpack-final-react.md index f782dc3072..490f705b92 100644 --- a/docs/shared/packages/storybook/migrate-webpack-final-react.md +++ b/docs/shared/packages/storybook/migrate-webpack-final-react.md @@ -1,6 +1,15 @@ -# Nrwl React Storybook Preset +--- +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 12.7 comes with a dedicated Storybook preset for React which drammatically simplifies the Storybook setup and makes sure that Storybook uses the same webpack configuration as your React applications running within an Nx workspace. +# 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" @@ -10,7 +19,7 @@ width="100%" /%} 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 preset exported by `@nrwl/react/plugins/storybook`. +- the `main.js` file now contains a predefined Storybook addon exported by `@nrwl/react/plugins/storybook`. Here's an example of a newly generated `main.js` file: diff --git a/docs/shared/packages/storybook/plugin-angular.md b/docs/shared/packages/storybook/plugin-angular.md index 907277e069..b1f19661b0 100644 --- a/docs/shared/packages/storybook/plugin-angular.md +++ b/docs/shared/packages/storybook/plugin-angular.md @@ -1,3 +1,8 @@ +--- +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. diff --git a/docs/shared/packages/storybook/plugin-overview.md b/docs/shared/packages/storybook/plugin-overview.md index c168381acc..312a911659 100644 --- a/docs/shared/packages/storybook/plugin-overview.md +++ b/docs/shared/packages/storybook/plugin-overview.md @@ -1,3 +1,8 @@ +--- +title: Nx Storybook Plugin Overview +description: This is an overview page for the Storybook plugin in Nx. It explains what Storybook is and how to set it up in your Nx workspace. +--- + [Storybook](https://storybook.js.org) is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. This guide will briefly walk you through using Storybook within an Nx workspace. @@ -188,4 +193,4 @@ For more on using Storybook, see the [official Storybook documentation](https:// Here's more information on common migration scenarios for Storybook with Nx. For Storybook specific migrations that are not automatically handled by Nx please refer to the [official Storybook page](https://storybook.js.org/) - [Upgrading to Storybook 6](/packages/storybook/documents/upgrade-storybook-v6-react) -- [Migrate to the Nrwl React Storybook Preset](/packages/storybook/documents/migrate-webpack-final-react) +- [Migrate to the Nx React Storybook Addon](/packages/storybook/documents/migrate-webpack-final-react) diff --git a/docs/shared/packages/storybook/plugin-react.md b/docs/shared/packages/storybook/plugin-react.md index b792d4b159..e20b09d4d9 100644 --- a/docs/shared/packages/storybook/plugin-react.md +++ b/docs/shared/packages/storybook/plugin-react.md @@ -1,3 +1,8 @@ +--- +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. @@ -156,4 +161,4 @@ For more on using Storybook, see the [official Storybook documentation](https:// Here's more information on common migration scenarios for Storybook with Nx. For Storybook specific migrations that are not automatically handled by Nx please refer to the [official Storybook page](https://storybook.js.org/) - [Upgrading to Storybook 6](/packages/storybook/documents/upgrade-storybook-v6-react) -- [Migrate to the Nrwl React Storybook Preset](/packages/storybook/documents/migrate-webpack-final-react) +- [Migrate to the Nx React Storybook Addon](/packages/storybook/documents/migrate-webpack-final-react) diff --git a/docs/shared/packages/storybook/storybook-7-setup.md b/docs/shared/packages/storybook/storybook-7-setup.md index 69cff81e04..810072f702 100644 --- a/docs/shared/packages/storybook/storybook-7-setup.md +++ b/docs/shared/packages/storybook/storybook-7-setup.md @@ -1,3 +1,8 @@ +--- +title: Storybook 7 setup guide +description: This guide explains how you can set up Storybook version 7 in your Nx workspace. It contains information about the generators and the frameworks that are supported. +--- + # Storybook 7 is here - and Nx is ready {% callout type="info" title="Available on Nx v15.6" %} diff --git a/docs/shared/packages/storybook/storybook-composition-setup.md b/docs/shared/packages/storybook/storybook-composition-setup.md index 3274cf285b..d2970dd7b4 100644 --- a/docs/shared/packages/storybook/storybook-composition-setup.md +++ b/docs/shared/packages/storybook/storybook-composition-setup.md @@ -1,3 +1,8 @@ +--- +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 diff --git a/docs/shared/packages/storybook/storybook-v6-angular.md b/docs/shared/packages/storybook/storybook-v6-angular.md index 55c8adb266..7cf6449f1e 100644 --- a/docs/shared/packages/storybook/storybook-v6-angular.md +++ b/docs/shared/packages/storybook/storybook-v6-angular.md @@ -1,3 +1,8 @@ +--- +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._ diff --git a/docs/shared/packages/storybook/storybook-v6-react.md b/docs/shared/packages/storybook/storybook-v6-react.md index 9c3412bebb..053fa0caa6 100644 --- a/docs/shared/packages/storybook/storybook-v6-react.md +++ b/docs/shared/packages/storybook/storybook-v6-react.md @@ -1,3 +1,8 @@ +--- +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._ diff --git a/nx-dev/nx-dev-e2e/src/e2e/additional-api-references.cy.ts b/nx-dev/nx-dev-e2e/src/e2e/additional-api-references.cy.ts index d467d267de..c4585af317 100644 --- a/nx-dev/nx-dev-e2e/src/e2e/additional-api-references.cy.ts +++ b/nx-dev/nx-dev-e2e/src/e2e/additional-api-references.cy.ts @@ -29,11 +29,11 @@ describe('nx-dev: Additional API references section', () => { { title: 'Storybook', path: '/storybook/overview-react' }, { title: 'Storybook', path: '/storybook/overview-angular' }, { - title: 'Nrwl React Storybook Preset', + title: 'Nx React Storybook Addon', path: '/storybook/migrate-webpack-final-react', }, { - title: 'Storybook Webpack Migration', + title: 'Storybook Migration to webpackFinal', path: '/storybook/migrate-webpack-final-angular', }, { diff --git a/packages/react/plugins/storybook/index.ts b/packages/react/plugins/storybook/index.ts index b726243737..0ebc2072f1 100644 --- a/packages/react/plugins/storybook/index.ts +++ b/packages/react/plugins/storybook/index.ts @@ -63,7 +63,7 @@ export const webpack = async ( options: any ): Promise => { logger.info( - '=> Loading Nrwl React Storybook preset from "@nrwl/react/plugins/storybook"' + '=> Loading Nx React Storybook Addon from "@nrwl/react/plugins/storybook"' ); // In case anyone is missing dep and did not run migrations. // See: https://github.com/nrwl/nx/issues/14455 diff --git a/packages/storybook/docs/build-storybook-executor-examples.md b/packages/storybook/docs/build-storybook-executor-examples.md index c21a43c159..4e768678d9 100644 --- a/packages/storybook/docs/build-storybook-executor-examples.md +++ b/packages/storybook/docs/build-storybook-executor-examples.md @@ -1,3 +1,8 @@ +--- +title: Storybook builder executor examples +description: This page contains examples for the @nrwl/storybook:build executor. +--- + `project.json`: ```json diff --git a/packages/storybook/docs/change-storybook-targets-example.md b/packages/storybook/docs/change-storybook-targets-example.md index eb3bf3d5ba..016833408e 100644 --- a/packages/storybook/docs/change-storybook-targets-example.md +++ b/packages/storybook/docs/change-storybook-targets-example.md @@ -1,3 +1,8 @@ +--- +title: Change Storybook targets generator examples +description: This page contains examples for the @nrwl/storybook:change-storybook-targets generator, targeted to Angular projects set up with Storybook. +--- + This generator 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 (`@nrwl/storybook:build-storybook` and `@nrwl/storybook:storybook`). This generator is usually invoked through a migrator, when you are using `nx migrate` to upgrade your workspace to Nx `14.1.8` or later. diff --git a/packages/storybook/docs/configuration-generator-examples.md b/packages/storybook/docs/configuration-generator-examples.md index 448aad7eb8..5245d65bcb 100644 --- a/packages/storybook/docs/configuration-generator-examples.md +++ b/packages/storybook/docs/configuration-generator-examples.md @@ -1,3 +1,8 @@ +--- +title: Storybook configuration generator examples +description: This page contains examples for the @nrwl/storybook:configuration generator. +--- + This is a framework-agnostic generator for setting up Storybook configuration for a project. ```bash diff --git a/packages/storybook/docs/storybook-executor-examples.md b/packages/storybook/docs/storybook-executor-examples.md index edc35be79a..1ab8dacf82 100644 --- a/packages/storybook/docs/storybook-executor-examples.md +++ b/packages/storybook/docs/storybook-executor-examples.md @@ -1,3 +1,8 @@ +--- +title: Storybook dev server executor examples +description: This page contains examples for the @nrwl/storybook:storybook executor. +--- + `project.json`: ```json diff --git a/packages/storybook/src/executors/storybook/schema.json b/packages/storybook/src/executors/storybook/schema.json index 6ea526c1b4..3e3e69a0c1 100644 --- a/packages/storybook/src/executors/storybook/schema.json +++ b/packages/storybook/src/executors/storybook/schema.json @@ -3,7 +3,7 @@ "outputCapture": "direct-nodejs", "title": "Storybook Dev Builder", "cli": "nx", - "description": "Serve up storybook in development mode.", + "description": "Serve up Storybook in development mode.", "type": "object", "presets": [ {