docs(storybook): add titles and descriptions to all docs (#14749)

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,

docs/generated/manifests/packages.json

@@ -2379,8 +2379,8 @@
     "documents": {
       "/packages/storybook/documents/overview": {
         "id": "overview",
-        "name": "Overview Generic",
+        "name": "Nx Storybook Plugin Overview",
-        "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 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",
+        "name": " Migrate your Nx workspace to Storybook 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.",
+        "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",
+        "name": "Angular: Storybook Migration to webpackFinal",
-        "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 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",
+        "name": "React: Storybook Migration to webpackFinal and the Nx Addon",
-        "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 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",
+        "name": "How to configure Webpack and Vite for Storybook",
-        "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 customize the webpack configuration and your vite configuration for Storybook.",
         "file": "generated/packages/storybook/documents/custom-builder-configs",
         "itemList": [],
         "isExternal": false,

docs/generated/packages-metadata.json

@@ -2352,8 +2352,8 @@
     "documents": [
       {
         "id": "overview",
-        "name": "Overview Generic",
+        "name": "Nx Storybook Plugin Overview",
-        "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 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",
+        "name": " Migrate your Nx workspace to Storybook 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.",
+        "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",
+        "name": "Angular: Storybook Migration to webpackFinal",
-        "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 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",
+        "name": "React: Storybook Migration to webpackFinal and the Nx Addon",
-        "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 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",
+        "name": "How to configure Webpack and Vite for Storybook",
-        "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 customize the webpack configuration and your vite configuration for Storybook.",
         "file": "generated/packages/storybook/documents/custom-builder-configs",
         "itemList": [],
         "isExternal": false,

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" %}

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" %}

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" %}

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" %}

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

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).
 

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" %}

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.
 

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:
 

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.

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)

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)

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" %}

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

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._

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._

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": [],

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": [],

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",

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.",

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"
             }
           ]

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" %}

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" %}

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" %}

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" %}

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

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).
 

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" %}

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.
 

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:
 

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.

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)

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)

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" %}

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

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._

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._

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',
     },
     {

packages/react/plugins/storybook/index.ts

@@ -63,7 +63,7 @@ export const webpack = async (
   options: any
 ): Promise<Configuration> => {
   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

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

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.

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

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

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": [
     {