feat(storybook): remove root config files

docs/generated/manifests/menus.json

@@ -5892,6 +5892,14 @@
                 "children": [],
                 "disableCollapsible": false
               },
+              {
+                "name": "Configuring Storybook on Nx",
+                "path": "/packages/storybook/documents/configuring-storybook",
+                "id": "configuring-storybook",
+                "isExternal": false,
+                "children": [],
+                "disableCollapsible": false
+              },
               {
                 "name": "Setting up Storybook Composition with Nx",
                 "path": "/packages/storybook/documents/storybook-composition-setup",

docs/generated/manifests/packages.json

@@ -2454,6 +2454,17 @@
         "tags": [],
         "originalFilePath": "shared/packages/storybook/best-practices"
       },
+      "/packages/storybook/documents/configuring-storybook": {
+        "id": "configuring-storybook",
+        "name": "Configuring Storybook on Nx",
+        "description": "This guide explains how Storybook is configured on your Nx workspace.",
+        "file": "generated/packages/storybook/documents/configuring-storybook",
+        "itemList": [],
+        "isExternal": false,
+        "path": "/packages/storybook/documents/configuring-storybook",
+        "tags": [],
+        "originalFilePath": "shared/packages/storybook/configuring-storybook"
+      },
       "/packages/storybook/documents/storybook-composition-setup": {
         "id": "storybook-composition-setup",
         "name": "Setting up Storybook Composition with Nx",

docs/generated/packages-metadata.json

@@ -2427,6 +2427,17 @@
         "tags": [],
         "originalFilePath": "shared/packages/storybook/best-practices"
       },
+      {
+        "id": "configuring-storybook",
+        "name": "Configuring Storybook on Nx",
+        "description": "This guide explains how Storybook is configured on your Nx workspace.",
+        "file": "generated/packages/storybook/documents/configuring-storybook",
+        "itemList": [],
+        "isExternal": false,
+        "path": "storybook/documents/configuring-storybook",
+        "tags": [],
+        "originalFilePath": "shared/packages/storybook/configuring-storybook"
+      },
       {
         "id": "storybook-composition-setup",
         "name": "Setting up Storybook Composition with Nx",

docs/generated/packages/storybook/documents/angular-storybook-compodoc.md

@@ -150,7 +150,7 @@ You can read more about the `storybook` and `build-storybook` targets for Angula
 
 In your project's `.storybook/preview.js` file (for example for your `web` app the path would be `apps/web/.storybook/preview.js`), add the following:
 
-```js {% fileName=".storybook/preview.js" %}
+```js {% fileName="apps/web/.storybook/preview.js" %}
 import { setCompodocJson } from '@storybook/addon-docs/angular';
 import docJson from '../documentation.json';
 setCompodocJson(docJson);

docs/generated/packages/storybook/documents/configuring-storybook.md

@@ -0,0 +1,49 @@
+---
+title: How Storybook is configured on your Nx workspace
+description: This guide explains how Storybook is configured on your Nx workspace.
+---
+
+# Configuring Storybook on Nx
+
+{% callout type="info" title="Best practices" %}
+Read our [Using Storybook in a Nx workspace - Best practices](/packages/storybook/documents/best-practices) guide!
+{% /callout %}
+
+Starting with version 15.7, Nx is no longer generating a root Storybook directory and shared root Storybook configurations. Instead, it is only generating a Storybook configuration for each project in your workspace. You may still manually create a root Storybook configuration file, if it is needed for your use case.
+
+You can read all about creating and using a root Storybook configuration in our guide [How to configure Webpack and Vite for Storybook](/packages/storybook/documents/custom-builder-configs).
+
+This change means that each of your projects that has Storybook configured has only one, project-level, project-specific `.storybook/main.js|ts` file that it relies on, without importing settings from external files. This simplifies the configuration process, makes it easier for the user to understand the configuration that each project is using, and also makes it easier to maintain, relying on automatic migration scripts, for example.
+
+This does not change much for the user, as the configuration process is still the same, and you may still manually create a root Storybook configuration file, if it is needed for your use case.
+
+## Project-specific configuration
+
+You will notice that all project-specific configuration files contain the `@storybook/addon-essentials` addon, which is the shared setting among projects. Other than that, depending on the project type, the settings differ in regards to the builder used, the stories import glob pattern, and, in the case of projects using Vite, the path to the `vite.config.ts` file or the root of the project, for correct path resolution.
+All these are automatically generated by Nx, so you don't have to worry about them.
+
+## Root Storybook configuration
+
+If you need to create a root Storybook configuration file, you can do so by creating a `.storybook/main.js|ts` file in your workspace root. Then, you may import this file in your project-level Storybook configuration files. However, this is rarely needed in most cases, since most settings for builders like Webpack and Vite, for example, are already built-in into the Storybook builders.
+
+## Moving away from the root Storybook configuration
+
+If you are using `nx migrate` and you migrate to version 15.7 or later, Nx will try to automatically migrate your root Storybook configuration to the project-level Storybook configuration files. However, if you are not using `nx migrate`, you can still manually migrate your root Storybook configuration to the project-level Storybook configuration files.
+
+If you still want to keep your root Storybook configuration files, and if you have settings there that Nx cannot move to the project-level Storybook configuration files, Nx will leave your files untouched. You may keep your root Storybook configuration files, and Nx will still work as it did.
+
+The Nx migrator will do the following:
+
+1. It will add the `@storybook/addon-essentials` addon to all project-level Storybook configuration files.
+2. It will remove the `@storybook/addon-essentials` addon from the root Storybook configuration file.
+3. If the `addons` array in the root Storybook configuration file is empty after removing the `@storybook/addon-essentials` addon, it will remove the `addons` array from the root Storybook configuration file.
+4. If the `stories` array in the root Storybook configuration file is empty, it will remove the `stories` array from the root Storybook configuration file.
+5. If the root `.storybook/main.js|ts` configuration file is empty after removing the `addons` and `stories` arrays, it will remove the root `.storybook/main.js|ts` Storybook configuration file.
+
+In all the other cases, Nx will not interfere with your Storybook setup.
+
+## Read our guides for Configuring Storybook
+
+You can read all our guides for configuring Storybook in our [Storybook documents page](packages/storybook/documents).
+
+Please also make sure to read our [Using Storybook in a Nx workspace - Best practices](/packages/storybook/documents/best-practices) guide, where you can find some best practices for using Storybook in a Nx workspace.

docs/generated/packages/storybook/documents/overview-angular.md

@@ -49,7 +49,6 @@ and the result would be the following:
 
 ```text
 <workspace name>/
-├── .storybook/
 ├── apps/
 ├── libs/
 │   ├── feature/

docs/generated/packages/storybook/documents/overview-react.md

@@ -21,14 +21,12 @@ nx g @nrwl/react:storybook-configuration project-name
 
 ## Nx React Storybook Preset
 
-`@nrwl/react` ships with a Storybook preset to make sure it uses the very same configuration as your Nx React application. When you generate a Storybook configuration for a project, it'll automatically add the preset to your configuration.
+`@nrwl/react` ships with a Storybook addon to make sure it uses the very same configuration as your Nx React application. When you generate a Storybook configuration for a project, it'll automatically add the addon to your configuration.
 
 ```typescript
-const rootMain = require('../../../.storybook/main');
-
 module.exports = {
-  ...rootMain,
-  addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
+  ...
+  addons: ['@storybook/addon-essentials', ..., '@nrwl/react/plugins/storybook'],
   ...
 };
 ```
@@ -63,7 +61,6 @@ and the result would be the following:
 
 ```text
 <workspace name>/
-├── .storybook/
 ├── apps/
 ├── libs/
 │   ├── feature/

docs/generated/packages/storybook/documents/overview.md

@@ -57,7 +57,7 @@ Choosing one of these frameworks will have the following effects on your workspa
 
 1. Nx will install all the required Storybook packages that go with it.
 
-2. Nx will generate a root `.storybook` folder and a project-level `.storybook` folder (located under `libs/your-project/.storybook` or `apps/your-project/.storybook`) containing the essential configuration files for Storybook.
+2. Nx will generate a project-level `.storybook` folder (located under `libs/your-project/.storybook` or `apps/your-project/.storybook`) containing the essential configuration files for Storybook.
 
 3. If you are working on an Angular, a React or a React Native project (and you choose `@storybook/angular`, `@storybook/react` or `@storybook/react-native`) the Nx generator will also generate stories for all the components in your project.
 
@@ -105,25 +105,7 @@ nx build-storybook project-name
 
 ### Anatomy of the Storybook setup
 
-When running the Nx Storybook generator, it'll configure the Nx workspace to be able to run Storybook seamlessly. It'll create
-
-- a global Storybook configuration
-- a project specific Storybook configuration
-
-The **global** Storybook configuration allows to set addon-ons or custom webpack configuration at a global level that applies to all Storybook's within the Nx workspace. You can find that folder at `.storybook/` at the root of the workspace.
-
-```text
-<workspace name>/
-├── .storybook/
-│   ├── main.js
-│   ├── tsconfig.json
-├── apps/
-├── libs/
-├── nx.json
-├── package.json
-├── README.md
-└── etc...
-```
+When running the Nx Storybook generator, it'll configure the Nx workspace to be able to run Storybook seamlessly. It'll create a project specific Storybook configuration.
 
 The project-specific Storybook configuration is pretty much similar what you would have for a non-Nx setup of Storybook. There's a `.storybook` folder within the project root folder.
 

docs/map.json

@@ -1749,6 +1749,12 @@
               "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": "configuring-storybook",
+              "name": "Configuring Storybook on Nx",
+              "description": "This guide explains how Storybook is configured on your Nx workspace.",
+              "file": "shared/packages/storybook/configuring-storybook"
+            },
             {
               "id": "storybook-composition-setup",
               "name": "Setting up Storybook Composition with Nx",

docs/shared/packages/storybook/angular-storybook-compodoc.md

@@ -150,7 +150,7 @@ You can read more about the `storybook` and `build-storybook` targets for Angula
 
 In your project's `.storybook/preview.js` file (for example for your `web` app the path would be `apps/web/.storybook/preview.js`), add the following:
 
-```js {% fileName=".storybook/preview.js" %}
+```js {% fileName="apps/web/.storybook/preview.js" %}
 import { setCompodocJson } from '@storybook/addon-docs/angular';
 import docJson from '../documentation.json';
 setCompodocJson(docJson);

docs/shared/packages/storybook/configuring-storybook.md

@@ -0,0 +1,49 @@
+---
+title: How Storybook is configured on your Nx workspace
+description: This guide explains how Storybook is configured on your Nx workspace.
+---
+
+# Configuring Storybook on Nx
+
+{% callout type="info" title="Best practices" %}
+Read our [Using Storybook in a Nx workspace - Best practices](/packages/storybook/documents/best-practices) guide!
+{% /callout %}
+
+Starting with version 15.7, Nx is no longer generating a root Storybook directory and shared root Storybook configurations. Instead, it is only generating a Storybook configuration for each project in your workspace. You may still manually create a root Storybook configuration file, if it is needed for your use case.
+
+You can read all about creating and using a root Storybook configuration in our guide [How to configure Webpack and Vite for Storybook](/packages/storybook/documents/custom-builder-configs).
+
+This change means that each of your projects that has Storybook configured has only one, project-level, project-specific `.storybook/main.js|ts` file that it relies on, without importing settings from external files. This simplifies the configuration process, makes it easier for the user to understand the configuration that each project is using, and also makes it easier to maintain, relying on automatic migration scripts, for example.
+
+This does not change much for the user, as the configuration process is still the same, and you may still manually create a root Storybook configuration file, if it is needed for your use case.
+
+## Project-specific configuration
+
+You will notice that all project-specific configuration files contain the `@storybook/addon-essentials` addon, which is the shared setting among projects. Other than that, depending on the project type, the settings differ in regards to the builder used, the stories import glob pattern, and, in the case of projects using Vite, the path to the `vite.config.ts` file or the root of the project, for correct path resolution.
+All these are automatically generated by Nx, so you don't have to worry about them.
+
+## Root Storybook configuration
+
+If you need to create a root Storybook configuration file, you can do so by creating a `.storybook/main.js|ts` file in your workspace root. Then, you may import this file in your project-level Storybook configuration files. However, this is rarely needed in most cases, since most settings for builders like Webpack and Vite, for example, are already built-in into the Storybook builders.
+
+## Moving away from the root Storybook configuration
+
+If you are using `nx migrate` and you migrate to version 15.7 or later, Nx will try to automatically migrate your root Storybook configuration to the project-level Storybook configuration files. However, if you are not using `nx migrate`, you can still manually migrate your root Storybook configuration to the project-level Storybook configuration files.
+
+If you still want to keep your root Storybook configuration files, and if you have settings there that Nx cannot move to the project-level Storybook configuration files, Nx will leave your files untouched. You may keep your root Storybook configuration files, and Nx will still work as it did.
+
+The Nx migrator will do the following:
+
+1. It will add the `@storybook/addon-essentials` addon to all project-level Storybook configuration files.
+2. It will remove the `@storybook/addon-essentials` addon from the root Storybook configuration file.
+3. If the `addons` array in the root Storybook configuration file is empty after removing the `@storybook/addon-essentials` addon, it will remove the `addons` array from the root Storybook configuration file.
+4. If the `stories` array in the root Storybook configuration file is empty, it will remove the `stories` array from the root Storybook configuration file.
+5. If the root `.storybook/main.js|ts` configuration file is empty after removing the `addons` and `stories` arrays, it will remove the root `.storybook/main.js|ts` Storybook configuration file.
+
+In all the other cases, Nx will not interfere with your Storybook setup.
+
+## Read our guides for Configuring Storybook
+
+You can read all our guides for configuring Storybook in our [Storybook documents page](packages/storybook/documents).
+
+Please also make sure to read our [Using Storybook in a Nx workspace - Best practices](/packages/storybook/documents/best-practices) guide, where you can find some best practices for using Storybook in a Nx workspace.

docs/shared/packages/storybook/plugin-angular.md

@@ -49,7 +49,6 @@ and the result would be the following:
 
 ```text
 <workspace name>/
-├── .storybook/
 ├── apps/
 ├── libs/
 │   ├── feature/

docs/shared/packages/storybook/plugin-overview.md

@@ -57,7 +57,7 @@ Choosing one of these frameworks will have the following effects on your workspa
 
 1. Nx will install all the required Storybook packages that go with it.
 
-2. Nx will generate a root `.storybook` folder and a project-level `.storybook` folder (located under `libs/your-project/.storybook` or `apps/your-project/.storybook`) containing the essential configuration files for Storybook.
+2. Nx will generate a project-level `.storybook` folder (located under `libs/your-project/.storybook` or `apps/your-project/.storybook`) containing the essential configuration files for Storybook.
 
 3. If you are working on an Angular, a React or a React Native project (and you choose `@storybook/angular`, `@storybook/react` or `@storybook/react-native`) the Nx generator will also generate stories for all the components in your project.
 
@@ -105,25 +105,7 @@ nx build-storybook project-name
 
 ### Anatomy of the Storybook setup
 
-When running the Nx Storybook generator, it'll configure the Nx workspace to be able to run Storybook seamlessly. It'll create
-
-- a global Storybook configuration
-- a project specific Storybook configuration
-
-The **global** Storybook configuration allows to set addon-ons or custom webpack configuration at a global level that applies to all Storybook's within the Nx workspace. You can find that folder at `.storybook/` at the root of the workspace.
-
-```text
-<workspace name>/
-├── .storybook/
-│   ├── main.js
-│   ├── tsconfig.json
-├── apps/
-├── libs/
-├── nx.json
-├── package.json
-├── README.md
-└── etc...
-```
+When running the Nx Storybook generator, it'll configure the Nx workspace to be able to run Storybook seamlessly. It'll create a project specific Storybook configuration.
 
 The project-specific Storybook configuration is pretty much similar what you would have for a non-Nx setup of Storybook. There's a `.storybook` folder within the project root folder.
 

docs/shared/packages/storybook/plugin-react.md

@@ -21,14 +21,12 @@ nx g @nrwl/react:storybook-configuration project-name
 
 ## Nx React Storybook Preset
 
-`@nrwl/react` ships with a Storybook preset to make sure it uses the very same configuration as your Nx React application. When you generate a Storybook configuration for a project, it'll automatically add the preset to your configuration.
+`@nrwl/react` ships with a Storybook addon to make sure it uses the very same configuration as your Nx React application. When you generate a Storybook configuration for a project, it'll automatically add the addon to your configuration.
 
 ```typescript
-const rootMain = require('../../../.storybook/main');
-
 module.exports = {
-  ...rootMain,
-  addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
+  ...
+  addons: ['@storybook/addon-essentials', ..., '@nrwl/react/plugins/storybook'],
   ...
 };
 ```
@@ -63,7 +61,6 @@ and the result would be the following:
 
 ```text
 <workspace name>/
-├── .storybook/
 ├── apps/
 ├── libs/
 │   ├── feature/

docs/shared/recipes/one-storybook-for-all.md

@@ -40,12 +40,10 @@ Now it’s time to import the stories of our other projects in our new library's
 Here is a sample `libs/storybook-host/.storybook/main.js` file:
 
 ```javascript {% fileName="libs/storybook-host/.storybook/main.js" %}
-const rootMain = require('../../../.storybook/main');
 module.exports = {
-  ...rootMain,
-  core: { ...rootMain.core, builder: 'webpack5' },
+  core: { builder: 'webpack5' },
   stories: ['../../**/ui/**/src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-  addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
+  addons: ['@storybook/addon-essentials', '@nrwl/react/plugins/storybook'],
 };
 ```