fix(storybook): v7 vite settings docs remove rootMain (#14992)

.storybook/main.js

@@ -1,11 +0,0 @@
-module.exports = {
-  stories: [],
-  addons: ['@storybook/addon-essentials'],
-  // uncomment the property below if you want to apply some webpack config globally
-  // webpackFinal: async (config, { configType }) => {
-  //   // Make whatever fine-grained changes you need that should apply to all storybook configs
-
-  //   // Return the altered config
-  //   return config;
-  // },
-};

docs/generated/packages/storybook/documents/migrate-storybook-7.md

@@ -52,7 +52,7 @@ The Storybook CLI will prompt you to run some code generators and modifiers.
 
 Say `yes` to the following:
 
-- `mainjsFramework`: It will add the `framework` field in your root `.storybook/main.js|ts` file. We are going to delete it since it's not needed in the root file, but it's handy to have it ready to copy. Also, it shows you an indication of what it looks like.
+- `mainjsFramework`: It will try to add the `framework` field in your project's `.storybook/main.js|ts` file.
 - `eslintPlugin`: installs the `eslint-plugin-storybook`
 - `storybook-binary`: installs Storybook's `storybook` binary
 - `newFrameworks`: removes unused dependencies (eg. `@storybook/builder-webpack5`, `@storybook/manager-webpack5`, `@storybook/builder-vite`)
@@ -61,21 +61,6 @@ Say `no` to the following:
 
 - `autodocsTrue`: we don't need it and it can potentially cause issues with missing dependencies on your Nx workspace
 
-### 3. Restore the root `.storybook/main.js|ts` file
-
-You will have noticed that the Storybook automigrator added the `framework` option to your root `.storybook/main.js|ts` file. Let's remove that.
-
-So, remove:
-
-```ts
-  framework: {
-    name: '@storybook/angular',
-    options: {}
-  }
-```
-
-from your root `.storybook/main.js|ts` file.
-
 ### 3. Edit all the project-level `.storybook/main.js|ts` files
 
 Find all your project-level `.storybook/main.js|ts` files and edit them to add the `framework` option. While you are at it, remove the `builder` from `core` options.
@@ -87,7 +72,7 @@ In your project-level `.storybook/main.js|ts` files, remove the `builder` from `
 Your core options most probably look like this:
 
 ```ts
-core: { ...rootMain.core, builder: '@storybook/builder-vite' },
+core: { builder: '@storybook/builder-vite' },
 ```
 
 You must remove the `builder`, or you can also delete the `core` object entirely.
@@ -126,12 +111,16 @@ Choose the `@storybook/angular` framework. So add this in your project-level `.s
 
 #### For React projects using `'@storybook/builder-vite'`
 
-Choose the `@storybook/react-vite` framework. So add this in your project-level `.storybook/main.js|ts` file:
+Choose the `@storybook/react-vite` framework. You must also point the builder to the Vite configuration file path, so that it can read the settings from there. If your project's root path is `apps/my-app` and it's using a Vite configuration file at `apps/my-app/vite.config.ts`, then you must add this in your project-level `.storybook/main.js|ts` file:
 
 ```ts
   framework: {
     name: '@storybook/react-vite',
-    options: {}
+    options: {
+       builder: {
+        viteConfigPath: 'apps/my-app/vite.config.ts',
+      },
+    }
   }
 ```
 
@@ -159,12 +148,16 @@ Choose the `@storybook/nextjs` framework. So add this in your project-level `.st
 
 #### For Web Components projects using `'@storybook/builder-vite'`
 
-Choose the `@storybook/web-components-vite` framework. So add this in your project-level `.storybook/main.js|ts` file:
+Choose the `@storybook/web-components-vite` framework. You must also point the builder to the Vite configuration file path, so that it can read the settings from there. If your project's root path is `apps/my-app` and it's using a Vite configuration file at `apps/my-app/vite.config.ts`, then you must add this in your project-level `.storybook/main.js|ts` file:
 
 ```ts
   framework: {
     name: '@storybook/web-components-vite',
-    options: {}
+    options: {
+      builder: {
+        viteConfigPath: 'apps/my-app/vite.config.ts',
+      },
+    }
   }
 ```
 
@@ -183,79 +176,67 @@ Choose the `@storybook/web-components-webpack5` framework. So add this in your p
 
 You can easily find the correct framework by looking at the `builder` option in your project-level `.storybook/main.js|ts` file.
 
-#### Resulting project-level `.storybook/main.js|ts` file
+### 4. Check result of project-level `.storybook/main.js|ts` file
+
+#### Full example for Angular projects
 
 Here is an example of a project-level `.storybook/main.js|ts` file for an Angular project:
 
-```ts
+```ts {% fileName="apps/my-angular-app/.storybook/main.js" %}
-// apps/my-angular-app/.storybook/main.js|ts
+const config = {
-
+  stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-const rootMain = require('../../../.storybook/main');
+  addons: ['@storybook/addon-essentials'],
-
-module.exports = {
-  ...rootMain,
-  stories: [
-    ...rootMain.stories,
-    '../src/app/**/*.stories.mdx',
-    '../src/app/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
-  addons: [...rootMain.addons],
   framework: {
     name: '@storybook/angular',
     options: {},
   },
 };
+
+export default config;
 ```
 
-### 4. For Vite.js projects
+#### Full example for React projects with Vite
 
-Make sure to add the `viteFinal` option to your project-level `.storybook/main.js|ts` files on projects that use Vite.js.
+Here is an example of a project-level `.storybook/main.js|ts` file for a React project using Vite:
 
-```ts
+```ts {% fileName="apps/my-react-app/.storybook/main.js" %}
-  async viteFinal(config, { configType }) {
+const config = {
-    return mergeConfig(config, {
+  stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-      plugins: [
+  addons: ['@storybook/addon-essentials'],
-        viteTsConfigPaths({
-          root: '<PATH_TO_PROJECT_ROOT>',
-        }),
-      ],
-    });
-  },
-```
-
-This will take care of any path resolution issues.
-
-An example of a project-level `.storybook/main.js|ts` file for a React project that uses Vite.js:
-
-```ts
-// apps/my-react-vite-app/.storybook/main.js|ts
-
-const { mergeConfig } = require('vite');
-const viteTsConfigPaths = require('vite-tsconfig-paths').default;
-const rootMain = require('../../../.storybook/main');
-
-module.exports = {
-  ...rootMain,
-  stories: [
-    ...rootMain.stories,
-    '../src/app/**/*.stories.mdx',
-    '../src/app/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
-  addons: [...rootMain.addons],
-  async viteFinal(config, { configType }) {
-    return mergeConfig(config, {
-      plugins: [
-        viteTsConfigPaths({
-          root: '../../../',
-        }),
-      ],
-    });
-  },
   framework: {
     name: '@storybook/react-vite',
-    options: {},
+    options: {
+      builder: {
+        viteConfigPath: 'apps/rv1/vite.config.ts',
+      },
+    },
   },
 };
+
+export default config;
+```
+
+### 5. Remove `uiFramework` from `project.json`
+
+You can now remove the `uiFramework` option from your `storybook` and `build-storybook` targets in your project's `project.json` file.
+
+So, for example, this is what a resulting `storybook` target would look for a non-Angular project:
+
+```json {% fileName="apps/my-react-app/project.json" %}
+{
+  ...
+  "targets": {
+    ...
+    "storybook": {
+      "executor": "@nrwl/storybook:storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "apps/my-react-app/.storybook"
+      },
+      "configurations": {
+        ...
+      }
+    },
 ```
 
 ## Use Storybook 7 beta

docs/shared/packages/storybook/migrate-storybook-7.md

@@ -52,7 +52,7 @@ The Storybook CLI will prompt you to run some code generators and modifiers.
 
 Say `yes` to the following:
 
-- `mainjsFramework`: It will add the `framework` field in your root `.storybook/main.js|ts` file. We are going to delete it since it's not needed in the root file, but it's handy to have it ready to copy. Also, it shows you an indication of what it looks like.
+- `mainjsFramework`: It will try to add the `framework` field in your project's `.storybook/main.js|ts` file.
 - `eslintPlugin`: installs the `eslint-plugin-storybook`
 - `storybook-binary`: installs Storybook's `storybook` binary
 - `newFrameworks`: removes unused dependencies (eg. `@storybook/builder-webpack5`, `@storybook/manager-webpack5`, `@storybook/builder-vite`)
@@ -61,21 +61,6 @@ Say `no` to the following:
 
 - `autodocsTrue`: we don't need it and it can potentially cause issues with missing dependencies on your Nx workspace
 
-### 3. Restore the root `.storybook/main.js|ts` file
-
-You will have noticed that the Storybook automigrator added the `framework` option to your root `.storybook/main.js|ts` file. Let's remove that.
-
-So, remove:
-
-```ts
-  framework: {
-    name: '@storybook/angular',
-    options: {}
-  }
-```
-
-from your root `.storybook/main.js|ts` file.
-
 ### 3. Edit all the project-level `.storybook/main.js|ts` files
 
 Find all your project-level `.storybook/main.js|ts` files and edit them to add the `framework` option. While you are at it, remove the `builder` from `core` options.
@@ -87,7 +72,7 @@ In your project-level `.storybook/main.js|ts` files, remove the `builder` from `
 Your core options most probably look like this:
 
 ```ts
-core: { ...rootMain.core, builder: '@storybook/builder-vite' },
+core: { builder: '@storybook/builder-vite' },
 ```
 
 You must remove the `builder`, or you can also delete the `core` object entirely.
@@ -126,12 +111,16 @@ Choose the `@storybook/angular` framework. So add this in your project-level `.s
 
 #### For React projects using `'@storybook/builder-vite'`
 
-Choose the `@storybook/react-vite` framework. So add this in your project-level `.storybook/main.js|ts` file:
+Choose the `@storybook/react-vite` framework. You must also point the builder to the Vite configuration file path, so that it can read the settings from there. If your project's root path is `apps/my-app` and it's using a Vite configuration file at `apps/my-app/vite.config.ts`, then you must add this in your project-level `.storybook/main.js|ts` file:
 
 ```ts
   framework: {
     name: '@storybook/react-vite',
-    options: {}
+    options: {
+       builder: {
+        viteConfigPath: 'apps/my-app/vite.config.ts',
+      },
+    }
   }
 ```
 
@@ -159,12 +148,16 @@ Choose the `@storybook/nextjs` framework. So add this in your project-level `.st
 
 #### For Web Components projects using `'@storybook/builder-vite'`
 
-Choose the `@storybook/web-components-vite` framework. So add this in your project-level `.storybook/main.js|ts` file:
+Choose the `@storybook/web-components-vite` framework. You must also point the builder to the Vite configuration file path, so that it can read the settings from there. If your project's root path is `apps/my-app` and it's using a Vite configuration file at `apps/my-app/vite.config.ts`, then you must add this in your project-level `.storybook/main.js|ts` file:
 
 ```ts
   framework: {
     name: '@storybook/web-components-vite',
-    options: {}
+    options: {
+      builder: {
+        viteConfigPath: 'apps/my-app/vite.config.ts',
+      },
+    }
   }
 ```
 
@@ -183,79 +176,67 @@ Choose the `@storybook/web-components-webpack5` framework. So add this in your p
 
 You can easily find the correct framework by looking at the `builder` option in your project-level `.storybook/main.js|ts` file.
 
-#### Resulting project-level `.storybook/main.js|ts` file
+### 4. Check result of project-level `.storybook/main.js|ts` file
+
+#### Full example for Angular projects
 
 Here is an example of a project-level `.storybook/main.js|ts` file for an Angular project:
 
-```ts
+```ts {% fileName="apps/my-angular-app/.storybook/main.js" %}
-// apps/my-angular-app/.storybook/main.js|ts
+const config = {
-
+  stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-const rootMain = require('../../../.storybook/main');
+  addons: ['@storybook/addon-essentials'],
-
-module.exports = {
-  ...rootMain,
-  stories: [
-    ...rootMain.stories,
-    '../src/app/**/*.stories.mdx',
-    '../src/app/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
-  addons: [...rootMain.addons],
   framework: {
     name: '@storybook/angular',
     options: {},
   },
 };
+
+export default config;
 ```
 
-### 4. For Vite.js projects
+#### Full example for React projects with Vite
 
-Make sure to add the `viteFinal` option to your project-level `.storybook/main.js|ts` files on projects that use Vite.js.
+Here is an example of a project-level `.storybook/main.js|ts` file for a React project using Vite:
 
-```ts
+```ts {% fileName="apps/my-react-app/.storybook/main.js" %}
-  async viteFinal(config, { configType }) {
+const config = {
-    return mergeConfig(config, {
+  stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-      plugins: [
+  addons: ['@storybook/addon-essentials'],
-        viteTsConfigPaths({
-          root: '<PATH_TO_PROJECT_ROOT>',
-        }),
-      ],
-    });
-  },
-```
-
-This will take care of any path resolution issues.
-
-An example of a project-level `.storybook/main.js|ts` file for a React project that uses Vite.js:
-
-```ts
-// apps/my-react-vite-app/.storybook/main.js|ts
-
-const { mergeConfig } = require('vite');
-const viteTsConfigPaths = require('vite-tsconfig-paths').default;
-const rootMain = require('../../../.storybook/main');
-
-module.exports = {
-  ...rootMain,
-  stories: [
-    ...rootMain.stories,
-    '../src/app/**/*.stories.mdx',
-    '../src/app/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
-  addons: [...rootMain.addons],
-  async viteFinal(config, { configType }) {
-    return mergeConfig(config, {
-      plugins: [
-        viteTsConfigPaths({
-          root: '../../../',
-        }),
-      ],
-    });
-  },
   framework: {
     name: '@storybook/react-vite',
-    options: {},
+    options: {
+      builder: {
+        viteConfigPath: 'apps/rv1/vite.config.ts',
+      },
+    },
   },
 };
+
+export default config;
+```
+
+### 5. Remove `uiFramework` from `project.json`
+
+You can now remove the `uiFramework` option from your `storybook` and `build-storybook` targets in your project's `project.json` file.
+
+So, for example, this is what a resulting `storybook` target would look for a non-Angular project:
+
+```json {% fileName="apps/my-react-app/project.json" %}
+{
+  ...
+  "targets": {
+    ...
+    "storybook": {
+      "executor": "@nrwl/storybook:storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "apps/my-react-app/.storybook"
+      },
+      "configurations": {
+        ...
+      }
+    },
 ```
 
 ## Use Storybook 7 beta

docs/shared/recipes/one-storybook-per-scope.md

@@ -111,7 +111,6 @@ Thanks to our folder structure, we can easily configure Storybook to import all
 For example, `libs/storybook-host-admin/.storybook/main.js`:
 
 ```javascript {% fileName="libs/storybook-host-admin/.storybook/main.js" %}
-const rootMain = require('../../../.storybook/main');
 module.exports = {
   core: { builder: 'webpack5' },
   stories: ['../../admin/ui/**/src/lib/**/*.stories.ts'],

graph/.storybook/main.js

@@ -1,11 +0,0 @@
-module.exports = {
-  stories: [],
-  addons: ['@storybook/addon-essentials'],
-  // uncomment the property below if you want to apply some webpack config globally
-  // webpackFinal: async (config, { configType }) => {
-  //   // Make whatever fine-grained changes you need that should apply to all storybook configs
-
-  //   // Return the altered config
-  //   return config;
-  // },
-};

graph/.storybook/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "exclude": [
-    "../**/*.spec.js",
-    "../**/*.test.js",
-    "../**/*.spec.ts",
-    "../**/*.test.ts",
-    "../**/*.spec.tsx",
-    "../**/*.test.tsx",
-    "../**/*.spec.jsx",
-    "../**/*.test.jsx"
-  ],
-  "include": ["../**/*"]
-}

graph/client/.storybook/main.js

@@ -1,28 +1,12 @@
-const rootMain = require('../../.storybook/main');
-
 module.exports = {
-  ...rootMain,
+  core: { builder: 'webpack5' },
-
-  core: { ...rootMain.core, builder: 'webpack5' },
-
   stories: [
-    ...rootMain.stories,
     '../src/app/**/*.stories.mdx',
     '../src/app/**/*.stories.@(js|jsx|ts|tsx)',
   ],
   addons: [
-    ...rootMain.addons,
+    '@storybook/addon-essentials',
     '@nrwl/react/plugins/storybook',
     'storybook-dark-mode',
   ],
-  webpackFinal: async (config, { configType }) => {
-    // apply any global webpack configs that might have been specified in .storybook/main.js
-    if (rootMain.webpackFinal) {
-      config = await rootMain.webpackFinal(config, { configType });
-    }
-
-    // add your own webpack tweaks if needed
-
-    return config;
-  },
 };

graph/ui-components/.storybook/main.js

@@ -1,24 +1,8 @@
-const rootMain = require('../../.storybook/main');
-
 module.exports = {
-  ...rootMain,
+  core: { builder: 'webpack5' },
-
-  core: { ...rootMain.core, builder: 'webpack5' },
-
   stories: [
-    ...rootMain.stories,
     '../src/lib/**/*.stories.mdx',
     '../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
   ],
-  addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
+  addons: ['@storybook/addon-essentials', '@nrwl/react/plugins/storybook'],
-  webpackFinal: async (config, { configType }) => {
-    // apply any global webpack configs that might have been specified in .storybook/main.js
-    if (rootMain.webpackFinal) {
-      config = await rootMain.webpackFinal(config, { configType });
-    }
-
-    // add your own webpack tweaks if needed
-
-    return config;
-  },
 };

graph/ui-graph/.storybook/main.js

@@ -1,24 +1,8 @@
-const rootMain = require('../../.storybook/main');
-
 module.exports = {
-  ...rootMain,
+  core: { builder: 'webpack5' },
-
-  core: { ...rootMain.core, builder: 'webpack5' },
-
   stories: [
-    ...rootMain.stories,
     '../src/lib/**/*.stories.mdx',
     '../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
   ],
-  addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
+  addons: ['@storybook/addon-essentials', '@nrwl/react/plugins/storybook'],
-  webpackFinal: async (config, { configType }) => {
-    // apply any global webpack configs that might have been specified in .storybook/main.js
-    if (rootMain.webpackFinal) {
-      config = await rootMain.webpackFinal(config, { configType });
-    }
-
-    // add your own webpack tweaks if needed
-
-    return config;
-  },
 };

graph/ui-tooltips/.storybook/main.js

@@ -1,22 +1,8 @@
-const rootMain = require('../../.storybook/main');
-
 module.exports = {
-  ...rootMain,
+  core: { builder: 'webpack5' },
-  core: { ...rootMain.core, builder: 'webpack5' },
   stories: [
-    ...rootMain.stories,
     '../src/lib/**/*.stories.mdx',
     '../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
   ],
-  addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
+  addons: ['@storybook/addon-essentials', '@nrwl/react/plugins/storybook'],
-  webpackFinal: async (config, { configType }) => {
-    // apply any global webpack configs that might have been specified in .storybook/main.js
-    if (rootMain.webpackFinal) {
-      config = await rootMain.webpackFinal(config, { configType });
-    }
-
-    // add your own webpack tweaks if needed
-
-    return config;
-  },
 };

packages/storybook/src/executors/utils.spec.ts

@@ -6,11 +6,8 @@ describe('testing utilities', () => {
   describe('builderIsWebpackButNotWebpack5', () => {
     it('should return false if builder is webpack5', () => {
       const sourceCode = stripIndents`
-    const rootMain = require('../../../.storybook/main');
+      module.exports = {
-
+      core: {  builder: 'webpack5' },
-    module.exports = {
-      ...rootMain,
-      core: { ...rootMain.core, builder: 'webpack5' },
     };    
     `;
 
@@ -26,12 +23,9 @@ describe('testing utilities', () => {
 
     it('should return false if builder is @storybook/webpack5', () => {
       const sourceCode = stripIndents`
-    const rootMain = require('../../../.storybook/main');
+       module.exports = {
-
+         core: { builder: '@storybook/webpack5' },
-    module.exports = {
+       };    
-      ...rootMain,
-      core: { ...rootMain.core, builder: '@storybook/webpack5' },
-    };    
     `;
 
       const source = ts.createSourceFile(
@@ -46,11 +40,8 @@ describe('testing utilities', () => {
 
     it('should return false if builder exists but does not contain webpack', () => {
       const sourceCode = stripIndents`
-    const rootMain = require('../../../.storybook/main');
+      module.exports = {
-
+      core: { builder: '@storybook/vite-builder' },
-    module.exports = {
-      ...rootMain,
-      core: { ...rootMain.core, builder: '@storybook/vite-builder' },
     };    
     `;
 
@@ -66,11 +57,8 @@ describe('testing utilities', () => {
 
     it('should return true if builder is webpack4', () => {
       const sourceCode = stripIndents`
-    const rootMain = require('../../../.storybook/main');
+      module.exports = {
-
+      core: { builder: 'webpack4' },
-    module.exports = {
-      ...rootMain,
-      core: { ...rootMain.core, builder: 'webpack4' },
     };    
     `;
 
@@ -86,11 +74,8 @@ describe('testing utilities', () => {
 
     it('should return true if builder does not exist because default is webpack', () => {
       const sourceCode = stripIndents`
-    const rootMain = require('../../../.storybook/main');
+      module.exports = {
-
+      };    
-    module.exports = {
-      ...rootMain,
-    };    
     `;
 
       const source = ts.createSourceFile(

packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap

@@ -1,21 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`@nrwl/storybook:configuration basic functionalities should generate a webpackFinal into the main.js and reference a potential global webpackFinal definition 1`] = `
-"const rootMain = require('../../../.storybook/main');
+"
-
-
-
 
 
 
 module.exports = {
-  ...rootMain,
+  core: { builder: 'webpack5' },
-  core: { ...rootMain.core, builder: 'webpack5' },
   stories: [
-    ...rootMain.stories,
+    
     '../**/*.stories.mdx',
     '../**/*.stories.@(js|jsx|ts|tsx)' ],
-  addons: [...rootMain.addons 
+  addons: ['@storybook/addon-essentials' 
     
     
   ]
@@ -52,7 +48,7 @@ Object {
       "inputs": Array [
         "default",
         "^production",
-        "{workspaceRoot}/.storybook/**/*",
+        "!{projectRoot}/.storybook/**/*",
       ],
     },
     "e2e": Object {
@@ -100,27 +96,23 @@ Array [
 ]
 `;
 
-exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.ts and tsconfig.json for NextJS buildable libs 1`] = `
+exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.js and tsconfig.json for NextJS buildable libs 1`] = `
-"import { rootMain } from '../../../.storybook/main';
+"const { mergeConfig } = require('vite');
+const viteTsConfigPaths = require('vite-tsconfig-paths').default;
 
-import type { StorybookConfig, Options } from '@storybook/core-common';
 
-import { mergeConfig } from 'vite';
+module.exports = {
-import viteTsConfigPaths from 'vite-tsconfig-paths';
+  core: { builder: '@storybook/builder-vite' },
-
-const config: StorybookConfig = {
-  ...rootMain,
-  core: { ...rootMain.core, builder: '@storybook/builder-vite' },
   stories: [
-    ...rootMain.stories,
+    
     '../src/lib/**/*.stories.mdx',
     '../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  addons: [...(rootMain.addons || []) 
+  addons: ['@storybook/addon-essentials' 
     
     
   ],
-  async viteFinal(config: any) {
+  async viteFinal(config, { configType }) {
     return mergeConfig(config, {
       plugins: [
         viteTsConfigPaths({
@@ -129,9 +121,7 @@ const config: StorybookConfig = {
       ],
     });
   },
-} as StorybookConfig;
+};
-
-module.exports = config;
 
 
 
@@ -142,7 +132,127 @@ module.exports = config;
 "
 `;
 
-exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.ts and tsconfig.json for NextJS buildable libs 2`] = `
+exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.js and tsconfig.json for NextJS buildable libs 2`] = `
+"{
+  \\"extends\\": \\"../tsconfig.json\\",
+  \\"compilerOptions\\": {
+    \\"emitDecoratorMetadata\\": true
+    , \\"outDir\\": \\"\\" 
+  },
+  \\"files\\": [
+    \\"../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts\\",
+    \\"../../../node_modules/@nrwl/react/typings/cssmodule.d.ts\\",
+    \\"../../../node_modules/@nrwl/react/typings/image.d.ts\\"
+  ],
+  \\"exclude\\": [\\"../**/*.spec.ts\\" , \\"../**/*.spec.js\\", \\"../**/*.spec.tsx\\", \\"../**/*.spec.jsx\\"],
+  \\"include\\": [
+    \\"../src/**/*.stories.ts\\",
+    \\"../src/**/*.stories.js\\",
+    \\"../src/**/*.stories.jsx\\",
+    \\"../src/**/*.stories.tsx\\",
+    \\"../src/**/*.stories.mdx\\",
+    \\"*.js\\"]
+}
+"
+`;
+
+exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.js and tsconfig.json for React apps using the swc compiler 1`] = `
+"const { mergeConfig } = require('vite');
+const viteTsConfigPaths = require('vite-tsconfig-paths').default;
+
+
+module.exports = {
+  core: { builder: '@storybook/builder-vite' },
+  stories: [
+    
+    '../src/app/**/*.stories.mdx',
+    '../src/app/**/*.stories.@(js|jsx|ts|tsx)'
+  ],
+  addons: ['@storybook/addon-essentials' 
+    , 'storybook-addon-swc' 
+    
+  ],
+  async viteFinal(config, { configType }) {
+    return mergeConfig(config, {
+      plugins: [
+        viteTsConfigPaths({
+          root: '../../../',
+        }),
+      ],
+    });
+  },
+};
+
+
+
+
+// To customize your Vite configuration you can use the viteFinal field. 
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/packages/storybook/documents/custom-builder-configs
+"
+`;
+
+exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.js and tsconfig.json for React apps using the swc compiler 2`] = `
+"{
+  \\"extends\\": \\"../tsconfig.json\\",
+  \\"compilerOptions\\": {
+    \\"emitDecoratorMetadata\\": true
+    , \\"outDir\\": \\"\\" 
+  },
+  \\"files\\": [
+    \\"../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts\\",
+    \\"../../../node_modules/@nrwl/react/typings/cssmodule.d.ts\\",
+    \\"../../../node_modules/@nrwl/react/typings/image.d.ts\\"
+  ],
+  \\"exclude\\": [\\"../**/*.spec.ts\\" , \\"../**/*.spec.js\\", \\"../**/*.spec.tsx\\", \\"../**/*.spec.jsx\\"],
+  \\"include\\": [
+    \\"../src/**/*.stories.ts\\",
+    \\"../src/**/*.stories.js\\",
+    \\"../src/**/*.stories.jsx\\",
+    \\"../src/**/*.stories.tsx\\",
+    \\"../src/**/*.stories.mdx\\",
+    \\"*.js\\"]
+}
+"
+`;
+
+exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.js and tsconfig.json for React buildable libs 1`] = `
+"const { mergeConfig } = require('vite');
+const viteTsConfigPaths = require('vite-tsconfig-paths').default;
+
+
+module.exports = {
+  core: { builder: '@storybook/builder-vite' },
+  stories: [
+    
+    '../src/lib/**/*.stories.mdx',
+    '../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
+  ],
+  addons: ['@storybook/addon-essentials' 
+    
+    
+  ],
+  async viteFinal(config, { configType }) {
+    return mergeConfig(config, {
+      plugins: [
+        viteTsConfigPaths({
+          root: '../../../',
+        }),
+      ],
+    });
+  },
+};
+
+
+
+
+// To customize your Vite configuration you can use the viteFinal field. 
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/packages/storybook/documents/custom-builder-configs
+"
+`;
+
+exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.js and tsconfig.json for React buildable libs 2`] = `
 "{
   \\"extends\\": \\"../tsconfig.json\\",
   \\"compilerOptions\\": {
@@ -161,29 +271,25 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
     \\"../src/**/*.stories.jsx\\",
     \\"../src/**/*.stories.tsx\\",
     \\"../src/**/*.stories.mdx\\",
-    \\"*.ts\\",
     \\"*.js\\"]
 }
 "
 `;
 
 exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.ts and tsconfig.json for NextJS libs 1`] = `
-"import { rootMain } from '../../../.storybook/main';
+"import type { StorybookConfig } from '@storybook/core-common';
-
-import type { StorybookConfig, Options } from '@storybook/core-common';
 
 import { mergeConfig } from 'vite';
 import viteTsConfigPaths from 'vite-tsconfig-paths';
 
 const config: StorybookConfig = {
-  ...rootMain,
+  core: { builder: '@storybook/builder-vite' },
-  core: { ...rootMain.core, builder: '@storybook/builder-vite' },
   stories: [
-    ...rootMain.stories,
+    
     '../src/lib/**/*.stories.mdx',
     '../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  addons: [...(rootMain.addons || []) 
+  addons: ['@storybook/addon-essentials' 
     
     
   ],
@@ -235,22 +341,19 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
 `;
 
 exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.ts and tsconfig.json for NextJs apps 1`] = `
-"import { rootMain } from '../../../.storybook/main';
+"import type { StorybookConfig } from '@storybook/core-common';
-
-import type { StorybookConfig, Options } from '@storybook/core-common';
 import path from 'path';
 import { mergeConfig } from 'vite';
 import viteTsConfigPaths from 'vite-tsconfig-paths';
 
 const config: StorybookConfig = {
-  ...rootMain,
+  core: { builder: '@storybook/builder-vite' },
-  core: { ...rootMain.core, builder: '@storybook/builder-vite' },
   stories: [
-    ...rootMain.stories,
+    
     '../components/**/*.stories.mdx',
     '../components/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  addons: [...(rootMain.addons || []) 
+  addons: ['@storybook/addon-essentials' 
     
     , 'storybook-addon-swc', 
         {
@@ -309,22 +412,19 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
 `;
 
 exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.ts and tsconfig.json for React apps 1`] = `
-"import { rootMain } from '../../../.storybook/main';
+"import type { StorybookConfig } from '@storybook/core-common';
-
-import type { StorybookConfig, Options } from '@storybook/core-common';
 
 import { mergeConfig } from 'vite';
 import viteTsConfigPaths from 'vite-tsconfig-paths';
 
 const config: StorybookConfig = {
-  ...rootMain,
+  core: { builder: '@storybook/builder-vite' },
-  core: { ...rootMain.core, builder: '@storybook/builder-vite' },
   stories: [
-    ...rootMain.stories,
+    
     '../src/app/**/*.stories.mdx',
     '../src/app/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  addons: [...(rootMain.addons || []) 
+  addons: ['@storybook/addon-essentials' 
     
     
   ],
@@ -375,157 +475,20 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
 "
 `;
 
-exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.ts and tsconfig.json for React apps using the swc compiler 1`] = `
-"import { rootMain } from '../../../.storybook/main';
-
-import type { StorybookConfig, Options } from '@storybook/core-common';
-
-import { mergeConfig } from 'vite';
-import viteTsConfigPaths from 'vite-tsconfig-paths';
-
-const config: StorybookConfig = {
-  ...rootMain,
-  core: { ...rootMain.core, builder: '@storybook/builder-vite' },
-  stories: [
-    ...rootMain.stories,
-    '../src/app/**/*.stories.mdx',
-    '../src/app/**/*.stories.@(js|jsx|ts|tsx)'
-  ],
-  addons: [...(rootMain.addons || []) 
-    , 'storybook-addon-swc' 
-    
-  ],
-  async viteFinal(config: any) {
-    return mergeConfig(config, {
-      plugins: [
-        viteTsConfigPaths({
-          root: '../../../',
-        }),
-      ],
-    });
-  },
-} as StorybookConfig;
-
-module.exports = config;
-
-
-
-
-// To customize your Vite configuration you can use the viteFinal field. 
-// Check https://storybook.js.org/docs/react/builders/vite#configuration
-// and https://nx.dev/packages/storybook/documents/custom-builder-configs
-"
-`;
-
-exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.ts and tsconfig.json for React apps using the swc compiler 2`] = `
-"{
-  \\"extends\\": \\"../tsconfig.json\\",
-  \\"compilerOptions\\": {
-    \\"emitDecoratorMetadata\\": true
-    , \\"outDir\\": \\"\\" 
-  },
-  \\"files\\": [
-    \\"../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts\\",
-    \\"../../../node_modules/@nrwl/react/typings/cssmodule.d.ts\\",
-    \\"../../../node_modules/@nrwl/react/typings/image.d.ts\\"
-  ],
-  \\"exclude\\": [\\"../**/*.spec.ts\\" , \\"../**/*.spec.js\\", \\"../**/*.spec.tsx\\", \\"../**/*.spec.jsx\\"],
-  \\"include\\": [
-    \\"../src/**/*.stories.ts\\",
-    \\"../src/**/*.stories.js\\",
-    \\"../src/**/*.stories.jsx\\",
-    \\"../src/**/*.stories.tsx\\",
-    \\"../src/**/*.stories.mdx\\",
-    \\"*.ts\\",
-    \\"*.js\\"]
-}
-"
-`;
-
-exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.ts and tsconfig.json for React buildable libs 1`] = `
-"import { rootMain } from '../../../.storybook/main';
-
-import type { StorybookConfig, Options } from '@storybook/core-common';
-
-import { mergeConfig } from 'vite';
-import viteTsConfigPaths from 'vite-tsconfig-paths';
-
-const config: StorybookConfig = {
-  ...rootMain,
-  core: { ...rootMain.core, builder: '@storybook/builder-vite' },
-  stories: [
-    ...rootMain.stories,
-    '../src/lib/**/*.stories.mdx',
-    '../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
-  ],
-  addons: [...(rootMain.addons || []) 
-    
-    
-  ],
-  async viteFinal(config: any) {
-    return mergeConfig(config, {
-      plugins: [
-        viteTsConfigPaths({
-          root: '../../../',
-        }),
-      ],
-    });
-  },
-} as StorybookConfig;
-
-module.exports = config;
-
-
-
-
-// To customize your Vite configuration you can use the viteFinal field. 
-// Check https://storybook.js.org/docs/react/builders/vite#configuration
-// and https://nx.dev/packages/storybook/documents/custom-builder-configs
-"
-`;
-
-exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for Storybook configurations with Vite should create correct main.ts and tsconfig.json for React buildable libs 2`] = `
-"{
-  \\"extends\\": \\"../tsconfig.json\\",
-  \\"compilerOptions\\": {
-    \\"emitDecoratorMetadata\\": true
-    , \\"outDir\\": \\"\\" 
-  },
-  \\"files\\": [
-    \\"../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts\\",
-    \\"../../../node_modules/@nrwl/react/typings/cssmodule.d.ts\\",
-    \\"../../../node_modules/@nrwl/react/typings/image.d.ts\\"
-  ],
-  \\"exclude\\": [\\"../**/*.spec.ts\\" , \\"../**/*.spec.js\\", \\"../**/*.spec.tsx\\", \\"../**/*.spec.jsx\\"],
-  \\"include\\": [
-    \\"../src/**/*.stories.ts\\",
-    \\"../src/**/*.stories.js\\",
-    \\"../src/**/*.stories.jsx\\",
-    \\"../src/**/*.stories.tsx\\",
-    \\"../src/**/*.stories.mdx\\",
-    \\"*.ts\\",
-    \\"*.js\\"]
-}
-"
-`;
-
 exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for TypeScript Storybook configurations should create correct main.ts and tsconfig.json for NextJS buildable libs 1`] = `
-"import { rootMain } from '../../../.storybook/main';
+"import type { StorybookConfig } from '@storybook/core-common';
-
-import type { StorybookConfig, Options } from '@storybook/core-common';
 
 
 
 
 const config: StorybookConfig = {
-  ...rootMain,
+  core: { builder: 'webpack5' },
-  core: { ...rootMain.core, builder: 'webpack5' },
   stories: [
-    ...rootMain.stories,
+    
     '../src/lib/**/*.stories.mdx',
     '../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook' 
+  addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook' 
     
     
   ]
@@ -568,22 +531,19 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
 `;
 
 exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for TypeScript Storybook configurations should create correct main.ts and tsconfig.json for NextJS libs 1`] = `
-"import { rootMain } from '../../../.storybook/main';
+"import type { StorybookConfig } from '@storybook/core-common';
-
-import type { StorybookConfig, Options } from '@storybook/core-common';
 
 
 
 
 const config: StorybookConfig = {
-  ...rootMain,
+  core: { builder: 'webpack5' },
-  core: { ...rootMain.core, builder: 'webpack5' },
   stories: [
-    ...rootMain.stories,
+    
     '../src/lib/**/*.stories.mdx',
     '../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook' 
+  addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook' 
     
     
   ]
@@ -626,22 +586,19 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
 `;
 
 exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for TypeScript Storybook configurations should create correct main.ts and tsconfig.json for NextJs apps 1`] = `
-"import { rootMain } from '../../../.storybook/main';
+"import type { StorybookConfig } from '@storybook/core-common';
-
-import type { StorybookConfig, Options } from '@storybook/core-common';
 import path from 'path';
 
 
 
 const config: StorybookConfig = {
-  ...rootMain,
+  core: { builder: 'webpack5' },
-  core: { ...rootMain.core, builder: 'webpack5' },
   stories: [
-    ...rootMain.stories,
+    
     '../components/**/*.stories.mdx',
     '../components/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook' 
+  addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook' 
     
     , 'storybook-addon-swc', 
         {
@@ -691,22 +648,19 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
 `;
 
 exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for TypeScript Storybook configurations should create correct main.ts and tsconfig.json for React apps 1`] = `
-"import { rootMain } from '../../../.storybook/main';
+"import type { StorybookConfig } from '@storybook/core-common';
-
-import type { StorybookConfig, Options } from '@storybook/core-common';
 
 
 
 
 const config: StorybookConfig = {
-  ...rootMain,
+  core: { builder: 'webpack5' },
-  core: { ...rootMain.core, builder: 'webpack5' },
   stories: [
-    ...rootMain.stories,
+    
     '../src/app/**/*.stories.mdx',
     '../src/app/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook' 
+  addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook' 
     
     
   ]
@@ -804,22 +758,19 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
 `;
 
 exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for TypeScript Storybook configurations should create correct main.ts and tsconfig.json for React buildable libs 1`] = `
-"import { rootMain } from '../../../.storybook/main';
+"import type { StorybookConfig } from '@storybook/core-common';
-
-import type { StorybookConfig, Options } from '@storybook/core-common';
 
 
 
 
 const config: StorybookConfig = {
-  ...rootMain,
+  core: { builder: 'webpack5' },
-  core: { ...rootMain.core, builder: 'webpack5' },
   stories: [
-    ...rootMain.stories,
+    
     '../src/lib/**/*.stories.mdx',
     '../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook' 
+  addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook' 
     
     
   ]
@@ -862,22 +813,18 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
 `;
 
 exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for js Storybook configurations should create correct main.js and tsconfig.json for NextJS buildable libs 1`] = `
-"const rootMain = require('../../../.storybook/main');
+"
-
-
-
 
 
 
 module.exports = {
-  ...rootMain,
+  core: { builder: 'webpack5' },
-  core: { ...rootMain.core, builder: 'webpack5' },
   stories: [
-    ...rootMain.stories,
+    
     '../src/lib/**/*.stories.mdx',
     '../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  addons: [...rootMain.addons , '@nrwl/react/plugins/storybook' 
+  addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook' 
     
     
   ]
@@ -917,22 +864,18 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
 `;
 
 exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for js Storybook configurations should create correct main.js and tsconfig.json for NextJS libs 1`] = `
-"const rootMain = require('../../../.storybook/main');
+"
-
-
-
 
 
 
 module.exports = {
-  ...rootMain,
+  core: { builder: 'webpack5' },
-  core: { ...rootMain.core, builder: 'webpack5' },
   stories: [
-    ...rootMain.stories,
+    
     '../src/lib/**/*.stories.mdx',
     '../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  addons: [...rootMain.addons , '@nrwl/react/plugins/storybook' 
+  addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook' 
     
     
   ]
@@ -972,22 +915,18 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
 `;
 
 exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for js Storybook configurations should create correct main.js and tsconfig.json for NextJs apps 1`] = `
-"const rootMain = require('../../../.storybook/main');
+"
-
-
-
 
 const path = require('path');
 
 module.exports = {
-  ...rootMain,
+  core: { builder: 'webpack5' },
-  core: { ...rootMain.core, builder: 'webpack5' },
   stories: [
-    ...rootMain.stories,
+    
     '../components/**/*.stories.mdx',
     '../components/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  addons: [...rootMain.addons , '@nrwl/react/plugins/storybook' 
+  addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook' 
     
     , 'storybook-addon-swc', 
         {
@@ -1034,22 +973,18 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
 `;
 
 exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for js Storybook configurations should create correct main.js and tsconfig.json for React apps 1`] = `
-"const rootMain = require('../../../.storybook/main');
+"
-
-
-
 
 
 
 module.exports = {
-  ...rootMain,
+  core: { builder: 'webpack5' },
-  core: { ...rootMain.core, builder: 'webpack5' },
   stories: [
-    ...rootMain.stories,
+    
     '../src/app/**/*.stories.mdx',
     '../src/app/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  addons: [...rootMain.addons , '@nrwl/react/plugins/storybook' 
+  addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook' 
     
     
   ]
@@ -1089,22 +1024,18 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
 `;
 
 exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for js Storybook configurations should create correct main.js and tsconfig.json for React apps using the swc compiler 1`] = `
-"const rootMain = require('../../../.storybook/main');
+"
-
-
-
 
 
 
 module.exports = {
-  ...rootMain,
+  core: { builder: 'webpack5' },
-  core: { ...rootMain.core, builder: 'webpack5' },
   stories: [
-    ...rootMain.stories,
+    
     '../src/app/**/*.stories.mdx',
     '../src/app/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  addons: [...rootMain.addons , '@nrwl/react/plugins/storybook' 
+  addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook' 
     , 'storybook-addon-swc' 
     
   ]
@@ -1144,22 +1075,18 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and
 `;
 
 exports[`@nrwl/storybook:configuration for other types of projects - Next.js and the swc compiler for js Storybook configurations should create correct main.js and tsconfig.json for React buildable libs 1`] = `
-"const rootMain = require('../../../.storybook/main');
+"
-
-
-
 
 
 
 module.exports = {
-  ...rootMain,
+  core: { builder: 'webpack5' },
-  core: { ...rootMain.core, builder: 'webpack5' },
   stories: [
-    ...rootMain.stories,
+    
     '../src/lib/**/*.stories.mdx',
     '../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  addons: [...rootMain.addons , '@nrwl/react/plugins/storybook' 
+  addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook' 
     
     
   ]

packages/storybook/src/generators/configuration/configuration.spec.ts

@@ -16,7 +16,7 @@ import configurationGenerator from './configuration';
 import * as workspaceConfiguration from './test-configs/workspace-conifiguration.json';
 
 describe('@nrwl/storybook:configuration', () => {
-  xdescribe('basic functionalities', () => {
+  describe('basic functionalities', () => {
     let tree: Tree;
 
     beforeEach(async () => {
@@ -99,31 +99,6 @@ describe('@nrwl/storybook:configuration', () => {
       ).toMatchSnapshot();
     });
 
-    it('should not update root files after generating them once', async () => {
-      await configurationGenerator(tree, {
-        name: 'test-ui-lib',
-        uiFramework: '@storybook/angular',
-      });
-
-      const newContents = `module.exports = {
-        stories: [],
-        addons: ['@storybook/addon-essentials', 'new-addon'],
-      };
-      `;
-      // Setup a new lib
-      await libraryGenerator(tree, {
-        name: 'test-ui-lib-2',
-      });
-
-      tree.write('.storybook/main.js', newContents);
-      await configurationGenerator(tree, {
-        name: 'test-ui-lib-2',
-        uiFramework: '@storybook/angular',
-      });
-
-      expect(tree.read('.storybook/main.js', 'utf-8')).toEqual(newContents);
-    });
-
     it('should update workspace file for react libs', async () => {
       await configurationGenerator(tree, {
         name: 'test-ui-lib',
@@ -317,14 +292,12 @@ describe('@nrwl/storybook:configuration', () => {
         uiFramework: '@storybook/angular',
         tsConfiguration: true,
       });
-      expect(tree.exists('libs/test-ui-lib-2/.storybook/main.ts')).toBeTruthy();
+      expect(tree.exists('libs/test-ui-lib/.storybook/main.ts')).toBeTruthy();
       expect(
-        tree.exists('libs/test-ui-lib-2/.storybook/preview.ts')
+        tree.exists('libs/test-ui-lib/.storybook/preview.ts')
       ).toBeTruthy();
-      expect(tree.exists('libs/test-ui-lib-2/.storybook/main.js')).toBeFalsy();
+      expect(tree.exists('libs/test-ui-lib/.storybook/main.js')).toBeFalsy();
-      expect(
+      expect(tree.exists('libs/test-ui-lib/.storybook/preview.js')).toBeFalsy();
-        tree.exists('libs/test-ui-lib-2/.storybook/preview.js')
-      ).toBeFalsy();
     });
 
     it('should add test-storybook target', async () => {
@@ -350,7 +323,7 @@ describe('@nrwl/storybook:configuration', () => {
   });
 
   describe('for other types of projects - Next.js and the swc compiler', () => {
-    xdescribe('for js Storybook configurations', () => {
+    describe('for js Storybook configurations', () => {
       let tree: Tree;
       beforeAll(async () => {
         tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
@@ -449,110 +422,6 @@ describe('@nrwl/storybook:configuration', () => {
     });
 
     describe('for TypeScript Storybook configurations', () => {
-      let tree: Tree;
-      beforeAll(async () => {
-        tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
-        writeConfig(tree, workspaceConfiguration);
-        writeJson(tree, 'apps/nxapp/tsconfig.json', {});
-        writeJson(tree, 'apps/reapp/tsconfig.json', {});
-        writeJson(tree, 'libs/nxlib/tsconfig.json', {});
-        writeJson(tree, 'libs/nxlib-buildable/tsconfig.json', {});
-        writeJson(tree, 'libs/relib-buildable/tsconfig.json', {});
-        writeJson(tree, 'apps/reapp-swc/tsconfig.json', {});
-        // await configurationGenerator(tree, {
-        //   name: 'nxapp',
-        //   uiFramework: '@storybook/react',
-        //   tsConfiguration: true,
-        // });
-        // await configurationGenerator(tree, {
-        //   name: 'reapp',
-        //   uiFramework: '@storybook/react',
-        //   tsConfiguration: true,
-        // });
-        // await configurationGenerator(tree, {
-        //   name: 'nxlib',
-        //   uiFramework: '@storybook/react',
-        //   tsConfiguration: true,
-        // });
-        // await configurationGenerator(tree, {
-        //   name: 'nxlib-buildable',
-        //   uiFramework: '@storybook/react',
-        //   tsConfiguration: true,
-        // });
-        // await configurationGenerator(tree, {
-        //   name: 'relib-buildable',
-        //   uiFramework: '@storybook/react',
-        //   tsConfiguration: true,
-        // });
-        await configurationGenerator(tree, {
-          name: 'reapp-swc',
-          uiFramework: '@storybook/react',
-          tsConfiguration: true,
-        });
-      });
-
-      it(`should create correct main.ts and tsconfig.json for NextJs apps`, async () => {
-        expect(
-          tree.read('apps/nxapp/.storybook/main.ts', 'utf-8')
-        ).toMatchSnapshot();
-
-        expect(
-          tree.read('apps/nxapp/.storybook/tsconfig.json', 'utf-8')
-        ).toMatchSnapshot();
-      });
-
-      it(`should create correct main.ts and tsconfig.json for React apps`, async () => {
-        expect(
-          tree.read('apps/reapp/.storybook/main.ts', 'utf-8')
-        ).toMatchSnapshot();
-
-        expect(
-          tree.read('apps/reapp/.storybook/tsconfig.json', 'utf-8')
-        ).toMatchSnapshot();
-      });
-
-      it(`should create correct main.ts and tsconfig.json for NextJS libs`, async () => {
-        expect(
-          tree.read('libs/nxlib/.storybook/main.ts', 'utf-8')
-        ).toMatchSnapshot();
-
-        expect(
-          tree.read('libs/nxlib/.storybook/tsconfig.json', 'utf-8')
-        ).toMatchSnapshot();
-      });
-
-      it(`should create correct main.ts and tsconfig.json for NextJS buildable libs`, async () => {
-        expect(
-          tree.read('libs/nxlib-buildable/.storybook/main.ts', 'utf-8')
-        ).toMatchSnapshot();
-
-        expect(
-          tree.read('libs/nxlib-buildable/.storybook/tsconfig.json', 'utf-8')
-        ).toMatchSnapshot();
-      });
-
-      it(`should create correct main.ts and tsconfig.json for React buildable libs`, async () => {
-        expect(
-          tree.read('libs/relib-buildable/.storybook/main.ts', 'utf-8')
-        ).toMatchSnapshot();
-
-        expect(
-          tree.read('libs/relib-buildable/.storybook/tsconfig.json', 'utf-8')
-        ).toMatchSnapshot();
-      });
-
-      it.only(`should create correct main.ts and tsconfig.json for React apps using the swc compiler`, async () => {
-        expect(
-          tree.read('apps/reapp-swc/.storybook/main.ts', 'utf-8')
-        ).toMatchSnapshot();
-
-        expect(
-          tree.read('apps/reapp-swc/.storybook/tsconfig.json', 'utf-8')
-        ).toMatchSnapshot();
-      });
-    });
-
-    describe('for Storybook configurations with Vite', () => {
       let tree: Tree;
       beforeAll(async () => {
         tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
@@ -566,33 +435,32 @@ describe('@nrwl/storybook:configuration', () => {
         await configurationGenerator(tree, {
           name: 'nxapp',
           uiFramework: '@storybook/react',
-          bundler: 'vite',
           tsConfiguration: true,
         });
         await configurationGenerator(tree, {
           name: 'reapp',
           uiFramework: '@storybook/react',
-          bundler: 'vite',
+          tsConfiguration: true,
         });
         await configurationGenerator(tree, {
           name: 'nxlib',
           uiFramework: '@storybook/react',
-          bundler: 'vite',
+          tsConfiguration: true,
         });
         await configurationGenerator(tree, {
           name: 'nxlib-buildable',
           uiFramework: '@storybook/react',
-          bundler: 'vite',
+          tsConfiguration: true,
         });
         await configurationGenerator(tree, {
           name: 'relib-buildable',
           uiFramework: '@storybook/react',
-          bundler: 'vite',
+          tsConfiguration: true,
         });
         await configurationGenerator(tree, {
           name: 'reapp-swc',
           uiFramework: '@storybook/react',
-          bundler: 'vite',
+          tsConfiguration: true,
         });
       });
 
@@ -656,6 +524,113 @@ describe('@nrwl/storybook:configuration', () => {
         ).toMatchSnapshot();
       });
     });
+
+    describe('for Storybook configurations with Vite', () => {
+      let tree: Tree;
+      beforeAll(async () => {
+        tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+        writeConfig(tree, workspaceConfiguration);
+        writeJson(tree, 'apps/nxapp/tsconfig.json', {});
+        writeJson(tree, 'apps/reapp/tsconfig.json', {});
+        writeJson(tree, 'libs/nxlib/tsconfig.json', {});
+        writeJson(tree, 'libs/nxlib-buildable/tsconfig.json', {});
+        writeJson(tree, 'libs/relib-buildable/tsconfig.json', {});
+        writeJson(tree, 'apps/reapp-swc/tsconfig.json', {});
+        await configurationGenerator(tree, {
+          name: 'nxapp',
+          uiFramework: '@storybook/react',
+          bundler: 'vite',
+          tsConfiguration: true,
+        });
+        await configurationGenerator(tree, {
+          name: 'reapp',
+          uiFramework: '@storybook/react',
+          bundler: 'vite',
+          tsConfiguration: true,
+        });
+        await configurationGenerator(tree, {
+          name: 'nxlib',
+          uiFramework: '@storybook/react',
+          bundler: 'vite',
+          tsConfiguration: true,
+        });
+        await configurationGenerator(tree, {
+          name: 'nxlib-buildable',
+          uiFramework: '@storybook/react',
+          bundler: 'vite',
+        });
+        await configurationGenerator(tree, {
+          name: 'relib-buildable',
+          uiFramework: '@storybook/react',
+          bundler: 'vite',
+        });
+        await configurationGenerator(tree, {
+          name: 'reapp-swc',
+          uiFramework: '@storybook/react',
+          bundler: 'vite',
+        });
+      });
+
+      it(`should create correct main.ts and tsconfig.json for NextJs apps`, async () => {
+        expect(
+          tree.read('apps/nxapp/.storybook/main.ts', 'utf-8')
+        ).toMatchSnapshot();
+
+        expect(
+          tree.read('apps/nxapp/.storybook/tsconfig.json', 'utf-8')
+        ).toMatchSnapshot();
+      });
+
+      it(`should create correct main.ts and tsconfig.json for React apps`, async () => {
+        expect(
+          tree.read('apps/reapp/.storybook/main.ts', 'utf-8')
+        ).toMatchSnapshot();
+
+        expect(
+          tree.read('apps/reapp/.storybook/tsconfig.json', 'utf-8')
+        ).toMatchSnapshot();
+      });
+
+      it(`should create correct main.ts and tsconfig.json for NextJS libs`, async () => {
+        expect(
+          tree.read('libs/nxlib/.storybook/main.ts', 'utf-8')
+        ).toMatchSnapshot();
+
+        expect(
+          tree.read('libs/nxlib/.storybook/tsconfig.json', 'utf-8')
+        ).toMatchSnapshot();
+      });
+
+      it(`should create correct main.js and tsconfig.json for NextJS buildable libs`, async () => {
+        expect(
+          tree.read('libs/nxlib-buildable/.storybook/main.js', 'utf-8')
+        ).toMatchSnapshot();
+
+        expect(
+          tree.read('libs/nxlib-buildable/.storybook/tsconfig.json', 'utf-8')
+        ).toMatchSnapshot();
+      });
+
+      it(`should create correct main.js and tsconfig.json for React buildable libs`, async () => {
+        expect(
+          tree.read('libs/relib-buildable/.storybook/main.js', 'utf-8')
+        ).toMatchSnapshot();
+
+        expect(
+          tree.read('libs/relib-buildable/.storybook/tsconfig.json', 'utf-8')
+        ).toMatchSnapshot();
+      });
+
+      it(`should create correct main.js and tsconfig.json for React apps using the swc compiler`, async () => {
+        expect(
+          tree.read('apps/reapp-swc/.storybook/main.js', 'utf-8')
+        ).toMatchSnapshot();
+
+        expect(
+          tree.read('apps/reapp-swc/.storybook/tsconfig.json', 'utf-8')
+        ).toMatchSnapshot();
+      });
+    });
   });
 });
 

packages/storybook/src/migrations/update-15-7-0/add-addon-essentials-to-all.ts

@@ -82,7 +82,7 @@ export default async function (tree: Tree) {
   logger.info(
     `
     Read more about our effort to deprecate the root .storybook folder here:
-    https://nx.dev/packages/storybook/configuring-storybook
+    https://nx.dev/packages/storybook/documents/configuring-storybook
     `
   );