diff --git a/packages/storybook/src/generators/configuration/__snapshots__/configuration-v7.spec.ts.snap b/packages/storybook/src/generators/configuration/__snapshots__/configuration-v7.spec.ts.snap index f8cad2b594..322b5bd075 100644 --- a/packages/storybook/src/generators/configuration/__snapshots__/configuration-v7.spec.ts.snap +++ b/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, Options } from '@storybook/core-common'; +"import type { StorybookConfig } from '@storybook/angular'; 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`] = ` -"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 2`] = `null`; 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, Options } from '@storybook/core-common'; +"import type { StorybookConfig } from '@storybook/angular'; 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'); - - -module.exports = { - ...rootMain, +"const config = { 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'; - -module.exports = { - ...rootMain, +const config: StorybookConfig = { 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'); - - -module.exports = { - ...rootMain, +"const config = { 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'); - - -module.exports = { - ...rootMain, +"const config = { 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'); - - -module.exports = { - ...rootMain, +"const config = { 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'); - - -module.exports = { - ...rootMain, +"const config = { 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'); - - -module.exports = { - ...rootMain, +"const config = { 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'); - - -module.exports = { - ...rootMain, +"const config = { 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'); - - -module.exports = { - ...rootMain, +"const config = { 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. diff --git a/packages/storybook/src/generators/configuration/configuration.ts b/packages/storybook/src/generators/configuration/configuration.ts index 1154dc09d4..ecb58a3d37 100644 --- a/packages/storybook/src/generators/configuration/configuration.ts +++ b/packages/storybook/src/generators/configuration/configuration.ts @@ -159,7 +159,9 @@ export async function configurationGenerator( viteConfigFilePath ); } else { - createRootStorybookDir(tree, schema.js, schema.tsConfiguration); + if (!schema.storybook7betaConfiguration) { + createRootStorybookDir(tree, schema.js, schema.tsConfiguration); + } createProjectStorybookDir( tree, schema.name, diff --git a/packages/storybook/src/generators/configuration/project-files-7-ts/.storybook/main.ts__tmpl__ b/packages/storybook/src/generators/configuration/project-files-7-ts/.storybook/main.ts__tmpl__ index ac99343175..d2e0218ef2 100644 --- a/packages/storybook/src/generators/configuration/project-files-7-ts/.storybook/main.ts__tmpl__ +++ b/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 %>';<% } %> -<% if (isRootProject){ %>import { rootMain } from './main.root';<% } %> -import type { StorybookConfig, Options } from '@storybook/core-common'; +import type { StorybookConfig } from '<%= uiFramework %>'; 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. diff --git a/packages/storybook/src/generators/configuration/project-files-7/.storybook/main.js__tmpl__ b/packages/storybook/src/generators/configuration/project-files-7/.storybook/main.js__tmpl__ index fb5a06b917..facd3221e1 100644 --- a/packages/storybook/src/generators/configuration/project-files-7/.storybook/main.js__tmpl__ +++ b/packages/storybook/src/generators/configuration/project-files-7/.storybook/main.js__tmpl__ @@ -1,14 +1,10 @@ -<% if (!isRootProject){ %>const rootMain = require('<%= offsetFromRoot %>../.storybook/<%= rootMainName %>');<% } %> -<% if (isRootProject){ %>const rootMain = require('./main.root');<% } %> - -module.exports = { - ...rootMain, +const config = { 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