feat(storybook): v7 mainjs new format and remove root config (#14777)

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

@@ -1,16 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`@nrwl/storybook:configuration for Storybook v7 basic functionalities should generate TS config for project if root config is TS 1`] = `
-"import { rootMain } from '../../../.storybook/main';
+"import type { StorybookConfig } from '@storybook/angular';
-
-import type { StorybookConfig, Options } from '@storybook/core-common';
 
 const config: StorybookConfig = {
-  ...rootMain,
   stories: [
-    ...rootMain.stories,
+    
     '../**/*.stories.@(js|jsx|ts|tsx|mdx)' ],
-  addons: [...(rootMain.addons || []) 
+  addons: ['@storybook/addon-essentials' 
     
   ],
   framework: {
@@ -21,7 +18,7 @@ const config: StorybookConfig = {
   },
 };
 
-module.exports = config;
+export default config;
 
 
 // To customize your webpack configuration you can use the webpackFinal field.
@@ -103,15 +100,7 @@ Object {
 }
 `;
 
-exports[`@nrwl/storybook:configuration for Storybook v7 basic functionalities should generate TypeScript Configuration files 2`] = `
+exports[`@nrwl/storybook:configuration for Storybook v7 basic functionalities should generate TypeScript Configuration files 2`] = `null`;
-"import type { StorybookConfig } from '@storybook/core-common';
-
-export const rootMain: StorybookConfig = {
-  stories: [],
-  addons: ['@storybook/addon-essentials']
-};
-"
-`;
 
 exports[`@nrwl/storybook:configuration for Storybook v7 basic functionalities should generate TypeScript Configuration files 3`] = `
 "{
@@ -135,16 +124,13 @@ exports[`@nrwl/storybook:configuration for Storybook v7 basic functionalities sh
 `;
 
 exports[`@nrwl/storybook:configuration for Storybook v7 basic functionalities should generate TypeScript Configuration files 4`] = `
-"import { rootMain } from '../../../.storybook/main';
+"import type { StorybookConfig } from '@storybook/angular';
-
-import type { StorybookConfig, Options } from '@storybook/core-common';
 
 const config: StorybookConfig = {
-  ...rootMain,
   stories: [
-    ...rootMain.stories,
+    
     '../**/*.stories.@(js|jsx|ts|tsx|mdx)' ],
-  addons: [...(rootMain.addons || []) 
+  addons: ['@storybook/addon-essentials' 
     
   ],
   framework: {
@@ -155,7 +141,7 @@ const config: StorybookConfig = {
   },
 };
 
-module.exports = config;
+export default config;
 
 
 // To customize your webpack configuration you can use the webpackFinal field.
@@ -191,16 +177,12 @@ exports[`@nrwl/storybook:configuration for Storybook v7 basic functionalities sh
 `;
 
 exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/main-vite/.storybook/" 1`] = `
-"const rootMain = require('../../../.storybook/main');
+"const config = {
-
-
-module.exports = {
-  ...rootMain,
   stories: [
-    ...rootMain.stories,
+    
     '../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'
   ],
-  addons: [...rootMain.addons 
+  addons: ['@storybook/addon-essentials' 
     
   ],
   framework: {
@@ -215,6 +197,9 @@ module.exports = {
   },
 };
 
+export default config;
+
+
 
 
 // To customize your Vite configuration you can use the viteFinal field. 
@@ -248,16 +233,14 @@ exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook confi
 `;
 
 exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/main-vite-ts/.storybook/" 1`] = `
-"const rootMain = require('../../../.storybook/main');
+"import type { StorybookConfig } from '@storybook/react-vite';
 
-
+const config: StorybookConfig = {
-module.exports = {
-  ...rootMain,
   stories: [
-    ...rootMain.stories,
+    
     '../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'
   ],
-  addons: [...rootMain.addons 
+  addons: ['@storybook/addon-essentials' 
     
   ],
   framework: {
@@ -272,6 +255,9 @@ module.exports = {
   },
 };
 
+export default config;
+
+
 
 
 // To customize your Vite configuration you can use the viteFinal field. 
@@ -299,22 +285,19 @@ exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook confi
     \\"../src/**/*.stories.jsx\\",
     \\"../src/**/*.stories.tsx\\",
     \\"../src/**/*.stories.mdx\\",
+    \\"*.ts\\",
     \\"*.js\\"]
 }
 "
 `;
 
 exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/main-webpack/.storybook/" 1`] = `
-"const rootMain = require('../../../.storybook/main');
+"const config = {
-
-
-module.exports = {
-  ...rootMain,
   stories: [
-    ...rootMain.stories,
+    
     '../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'
   ],
-  addons: [...rootMain.addons , '@nrwl/react/plugins/storybook' 
+  addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook' 
     
   ],
   framework: {
@@ -325,6 +308,9 @@ module.exports = {
   },
 };
 
+export default config;
+
+
 // To customize your webpack configuration you can use the webpackFinal field.
 // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
 // and https://nx.dev/packages/storybook/documents/custom-builder-configs
@@ -358,16 +344,12 @@ exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook confi
 `;
 
 exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/nextapp/.storybook/" 1`] = `
-"const rootMain = require('../../../.storybook/main');
+"const config = {
-
-
-module.exports = {
-  ...rootMain,
   stories: [
-    ...rootMain.stories,
+    
     '../components/**/*.stories.@(js|jsx|ts|tsx|mdx)'
   ],
-  addons: [...rootMain.addons 
+  addons: ['@storybook/addon-essentials' 
     
   ],
   framework: {
@@ -378,6 +360,9 @@ module.exports = {
   },
 };
 
+export default config;
+
+
 // To customize your webpack configuration you can use the webpackFinal field.
 // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
 // and https://nx.dev/packages/storybook/documents/custom-builder-configs
@@ -407,16 +392,12 @@ exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook confi
 `;
 
 exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/react-swc/.storybook/" 1`] = `
-"const rootMain = require('../../../.storybook/main');
+"const config = {
-
-
-module.exports = {
-  ...rootMain,
   stories: [
-    ...rootMain.stories,
+    
     '../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'
   ],
-  addons: [...rootMain.addons , '@nrwl/react/plugins/storybook' 
+  addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook' 
     , 'storybook-addon-swc' 
   ],
   framework: {
@@ -427,6 +408,9 @@ module.exports = {
   },
 };
 
+export default config;
+
+
 // To customize your webpack configuration you can use the webpackFinal field.
 // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
 // and https://nx.dev/packages/storybook/documents/custom-builder-configs
@@ -460,16 +444,12 @@ exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook confi
 `;
 
 exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/wv1/.storybook/" 1`] = `
-"const rootMain = require('../../../.storybook/main');
+"const config = {
-
-
-module.exports = {
-  ...rootMain,
   stories: [
-    ...rootMain.stories,
+    
     '../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'
   ],
-  addons: [...rootMain.addons 
+  addons: ['@storybook/addon-essentials' 
     
   ],
   framework: {
@@ -484,6 +464,9 @@ module.exports = {
   },
 };
 
+export default config;
+
+
 
 
 // To customize your Vite configuration you can use the viteFinal field. 
@@ -513,16 +496,12 @@ exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook confi
 `;
 
 exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "apps/ww1/.storybook/" 1`] = `
-"const rootMain = require('../../../.storybook/main');
+"const config = {
-
-
-module.exports = {
-  ...rootMain,
   stories: [
-    ...rootMain.stories,
+    
     '../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'
   ],
-  addons: [...rootMain.addons 
+  addons: ['@storybook/addon-essentials' 
     
   ],
   framework: {
@@ -533,6 +512,9 @@ module.exports = {
   },
 };
 
+export default config;
+
+
 // To customize your webpack configuration you can use the webpackFinal field.
 // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
 // and https://nx.dev/packages/storybook/documents/custom-builder-configs
@@ -562,16 +544,12 @@ exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook confi
 `;
 
 exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "libs/react-rollup/.storybook/" 1`] = `
-"const rootMain = require('../../../.storybook/main');
+"const config = {
-
-
-module.exports = {
-  ...rootMain,
   stories: [
-    ...rootMain.stories,
+    
     '../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'
   ],
-  addons: [...rootMain.addons , '@nrwl/react/plugins/storybook' 
+  addons: ['@storybook/addon-essentials' , '@nrwl/react/plugins/storybook' 
     
   ],
   framework: {
@@ -582,6 +560,9 @@ module.exports = {
   },
 };
 
+export default config;
+
+
 // To customize your webpack configuration you can use the webpackFinal field.
 // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
 // and https://nx.dev/packages/storybook/documents/custom-builder-configs
@@ -615,16 +596,12 @@ exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook confi
 `;
 
 exports[`@nrwl/storybook:configuration for Storybook v7 generate Storybook configuration for all types of projects should contain the correct configuration in "libs/react-vite/.storybook/" 1`] = `
-"const rootMain = require('../../../.storybook/main');
+"const config = {
-
-
-module.exports = {
-  ...rootMain,
   stories: [
-    ...rootMain.stories,
+    
     '../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'
   ],
-  addons: [...rootMain.addons 
+  addons: ['@storybook/addon-essentials' 
     
   ],
   framework: {
@@ -639,6 +616,9 @@ module.exports = {
   },
 };
 
+export default config;
+
+
 
 
 // To customize your Vite configuration you can use the viteFinal field. 

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

@@ -159,7 +159,9 @@ export async function configurationGenerator(
       viteConfigFilePath
     );
   } else {
+    if (!schema.storybook7betaConfiguration) {
       createRootStorybookDir(tree, schema.js, schema.tsConfiguration);
+    }
     createProjectStorybookDir(
       tree,
       schema.name,

packages/storybook/src/generators/configuration/project-files-7-ts/.storybook/main.ts__tmpl__

@@ -1,15 +1,12 @@
-<% if (!isRootProject){ %>import { rootMain } from '<%= offsetFromRoot %>../.storybook/<%= rootMainName %>';<% } %>
+import type { StorybookConfig } from '<%= uiFramework %>';
-<% if (isRootProject){ %>import { rootMain } from './main.root';<% } %>
-import type { StorybookConfig, Options } from '@storybook/core-common';
 
 const config: StorybookConfig = {
-  ...rootMain,
   stories: [
-    ...rootMain.stories,<% if(uiFramework === '@storybook/angular' && projectType === 'library') { %>
+    <% if(uiFramework === '@storybook/angular' && projectType === 'library') { %>
     '../**/*.stories.@(js|jsx|ts|tsx|mdx)' <% } else { %>
     '../<%= projectDirectory %>/**/*.stories.@(js|jsx|ts|tsx|mdx)'
   <% } %>],
-  addons: [...(rootMain.addons || []) <% if(uiFramework === '@storybook/react-webpack5') { %>, '@nrwl/react/plugins/storybook' <% } %><% if(uiFramework === '@storybook/react-native') { %>, '@storybook/addon-ondevice-actions',  '@storybook/addon-ondevice-backgrounds', '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-notes'  <% } %>
+  addons: ['@storybook/addon-essentials' <% if(uiFramework === '@storybook/react-webpack5') { %>, '@nrwl/react/plugins/storybook' <% } %><% if(uiFramework === '@storybook/react-native') { %>, '@storybook/addon-ondevice-actions',  '@storybook/addon-ondevice-backgrounds', '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-notes'  <% } %>
     <% if(usesSwc) { %>, 'storybook-addon-swc' <% } %>
   ],
   framework: {
@@ -24,7 +21,7 @@ const config: StorybookConfig = {
   },
 };
 
-module.exports = config;
+export default config;
 
 <% if(!usesVite) { %>
 // To customize your webpack configuration you can use the webpackFinal field.

packages/storybook/src/generators/configuration/project-files-7/.storybook/main.js__tmpl__

@@ -1,14 +1,10 @@
-<% if (!isRootProject){ %>const rootMain = require('<%= offsetFromRoot %>../.storybook/<%= rootMainName %>');<% } %>
+const config = {
-<% if (isRootProject){ %>const rootMain = require('./main.root');<% } %>
-
-module.exports = {
-  ...rootMain,
   stories: [
-    ...rootMain.stories,<% if(uiFramework === '@storybook/angular' && projectType === 'library') { %>
+    <% if(uiFramework === '@storybook/angular' && projectType === 'library') { %>
     '../**/*.stories.@(js|jsx|ts|tsx|mdx)' <% } else { %>
     '../<%= projectDirectory %>/**/*.stories.@(js|jsx|ts|tsx|mdx)'
   <% } %>],
-  addons: [...rootMain.addons <% if(uiFramework === '@storybook/react-webpack5') { %>, '@nrwl/react/plugins/storybook' <% } %><% if(uiFramework === '@storybook/react-native') { %>, '@storybook/addon-ondevice-actions',  '@storybook/addon-ondevice-backgrounds', '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-notes'  <% } %>
+  addons: ['@storybook/addon-essentials' <% if(uiFramework === '@storybook/react-webpack5') { %>, '@nrwl/react/plugins/storybook' <% } %><% if(uiFramework === '@storybook/react-native') { %>, '@storybook/addon-ondevice-actions',  '@storybook/addon-ondevice-backgrounds', '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-notes'  <% } %>
     <% if(usesSwc) { %>, 'storybook-addon-swc' <% } %>
   ],
   framework: {
@@ -22,6 +18,9 @@ module.exports = {
     },
   },
 };
+
+export default config;
+
 <% if(!usesVite) { %>
 // To customize your webpack configuration you can use the webpackFinal field.
 // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config