From f36d65c2ef5776e4702422e4049e60e2f3fb243c Mon Sep 17 00:00:00 2001 From: Katerina Skroumpelou Date: Thu, 6 Apr 2023 18:39:03 +0300 Subject: [PATCH] feat(storybook): make v7 default (#16159) --- .../generators/storybook-configuration.json | 2 +- .../generators/storybook-configuration.json | 2 +- .../storybook/generators/configuration.json | 36 ++++---- .../packages/storybook/generators/init.json | 4 +- .../storybook-configuration/schema.json | 2 +- .../storybook-configuration.spec.ts | 2 +- .../configuration.spec.ts | 4 + .../storybook-configuration/schema.json | 2 +- .../build-storybook/build-storybook.impl.ts | 7 +- .../src/executors/storybook/storybook.impl.ts | 7 +- packages/storybook/src/executors/utils.ts | 12 +++ .../configuration-nested.spec.ts.snap | 44 ++++------ .../configuration-nested.spec.ts | 10 ++- .../configuration/configuration-v7.spec.ts | 25 ++---- .../configuration/configuration.spec.ts | 21 ++++- .../generators/configuration/configuration.ts | 86 ++++++++++++------- .../src/generators/configuration/schema.json | 36 ++++---- .../storybook/src/generators/init/schema.json | 4 +- packages/storybook/src/utils/utilities.ts | 14 ++- packages/storybook/src/utils/versions.ts | 2 +- 20 files changed, 194 insertions(+), 128 deletions(-) diff --git a/docs/generated/packages/angular/generators/storybook-configuration.json b/docs/generated/packages/angular/generators/storybook-configuration.json index 0cd789743b444..134fca072e24a 100644 --- a/docs/generated/packages/angular/generators/storybook-configuration.json +++ b/docs/generated/packages/angular/generators/storybook-configuration.json @@ -87,7 +87,7 @@ "storybook7Configuration": { "description": "Configure your workspace using Storybook version 7.", "type": "boolean", - "default": false, + "default": true, "hidden": true, "aliases": ["storybook7betaConfiguration"] } diff --git a/docs/generated/packages/react/generators/storybook-configuration.json b/docs/generated/packages/react/generators/storybook-configuration.json index 7b5b14257ce2d..da74a8b3006db 100644 --- a/docs/generated/packages/react/generators/storybook-configuration.json +++ b/docs/generated/packages/react/generators/storybook-configuration.json @@ -96,7 +96,7 @@ "storybook7Configuration": { "description": "Configure your workspace using Storybook version 7.", "type": "boolean", - "default": false, + "default": true, "hidden": true, "aliases": ["storybook7betaConfiguration"] } diff --git a/docs/generated/packages/storybook/generators/configuration.json b/docs/generated/packages/storybook/generators/configuration.json index 76496422e7518..df0bfa21c7919 100644 --- a/docs/generated/packages/storybook/generators/configuration.json +++ b/docs/generated/packages/storybook/generators/configuration.json @@ -18,21 +18,6 @@ "x-dropdown": "projects", "x-priority": "important" }, - "uiFramework": { - "type": "string", - "description": "Storybook UI Framework to use.", - "enum": [ - "@storybook/angular", - "@storybook/react", - "@storybook/react-native", - "@storybook/html", - "@storybook/web-components", - "@storybook/vue", - "@storybook/vue3", - "@storybook/svelte" - ], - "x-priority": "important" - }, "configureCypress": { "type": "boolean", "description": "Run the cypress-configure generator.", @@ -83,9 +68,9 @@ "x-priority": "important" }, "storybook7Configuration": { - "description": "Configure your workspace using Storybook version 7.", + "description": "Configure your workspace using Storybook version 7. Defaults to true.", "type": "boolean", - "default": false, + "default": true, "hidden": true, "aliases": ["storybook7betaConfiguration"] }, @@ -110,7 +95,22 @@ "@storybook/web-components-webpack5", "@storybook/web-components-vite" ], - "hidden": true + "x-priority": "important", + "hidden": false + }, + "uiFramework": { + "type": "string", + "description": "Storybook UI Framework to use.", + "enum": [ + "@storybook/angular", + "@storybook/react", + "@storybook/react-native", + "@storybook/html", + "@storybook/web-components", + "@storybook/vue", + "@storybook/vue3", + "@storybook/svelte" + ] }, "skipFormat": { "description": "Skip formatting files.", diff --git a/docs/generated/packages/storybook/generators/init.json b/docs/generated/packages/storybook/generators/init.json index efd1ba7b0feae..a4b656cf0bffe 100644 --- a/docs/generated/packages/storybook/generators/init.json +++ b/docs/generated/packages/storybook/generators/init.json @@ -50,8 +50,8 @@ "storybook7Configuration": { "description": "Configure your workspace using Storybook version 7.", "type": "boolean", - "default": false, - "hidden": true, + "default": true, + "hidden": false, "aliases": ["storybook7betaConfiguration"] }, "js": { diff --git a/packages/angular/src/generators/storybook-configuration/schema.json b/packages/angular/src/generators/storybook-configuration/schema.json index 3c521d94cc167..64ba217c9357c 100644 --- a/packages/angular/src/generators/storybook-configuration/schema.json +++ b/packages/angular/src/generators/storybook-configuration/schema.json @@ -90,7 +90,7 @@ "storybook7Configuration": { "description": "Configure your workspace using Storybook version 7.", "type": "boolean", - "default": false, + "default": true, "hidden": true, "aliases": ["storybook7betaConfiguration"] } diff --git a/packages/angular/src/generators/storybook-configuration/storybook-configuration.spec.ts b/packages/angular/src/generators/storybook-configuration/storybook-configuration.spec.ts index d5380661ea0b1..5321392af7c22 100644 --- a/packages/angular/src/generators/storybook-configuration/storybook-configuration.spec.ts +++ b/packages/angular/src/generators/storybook-configuration/storybook-configuration.spec.ts @@ -50,7 +50,7 @@ describe('StorybookConfiguration generator', () => { }); jest.resetModules(); jest.doMock('@storybook/angular/package.json', () => ({ - version: '6.4.0-rc.1', + version: '7.0.2', })); }); diff --git a/packages/react/src/generators/storybook-configuration/configuration.spec.ts b/packages/react/src/generators/storybook-configuration/configuration.spec.ts index cdd0a617c8adb..067bc3afe06fe 100644 --- a/packages/react/src/generators/storybook-configuration/configuration.spec.ts +++ b/packages/react/src/generators/storybook-configuration/configuration.spec.ts @@ -26,6 +26,10 @@ describe('react:storybook-configuration', () => { mockedInstalledCypressVersion.mockReturnValue(10); jest.spyOn(logger, 'warn').mockImplementation(() => {}); jest.spyOn(logger, 'debug').mockImplementation(() => {}); + jest.resetModules(); + jest.doMock('@storybook/angular/package.json', () => ({ + version: '7.0.2', + })); }); afterEach(() => { diff --git a/packages/react/src/generators/storybook-configuration/schema.json b/packages/react/src/generators/storybook-configuration/schema.json index f113909008db8..a5d7af41925ce 100644 --- a/packages/react/src/generators/storybook-configuration/schema.json +++ b/packages/react/src/generators/storybook-configuration/schema.json @@ -99,7 +99,7 @@ "storybook7Configuration": { "description": "Configure your workspace using Storybook version 7.", "type": "boolean", - "default": false, + "default": true, "hidden": true, "aliases": ["storybook7betaConfiguration"] } diff --git a/packages/storybook/src/executors/build-storybook/build-storybook.impl.ts b/packages/storybook/src/executors/build-storybook/build-storybook.impl.ts index f9169cc74c25d..9b37d37028041 100644 --- a/packages/storybook/src/executors/build-storybook/build-storybook.impl.ts +++ b/packages/storybook/src/executors/build-storybook/build-storybook.impl.ts @@ -7,7 +7,11 @@ import { storybookConfigExistsCheck, } from '../../utils/utilities'; import { CommonNxStorybookConfig } from '../../utils/models'; -import { getStorybookFrameworkPath, runStorybookSetupCheck } from '../utils'; +import { + getStorybookFrameworkPath, + pleaseUpgrade, + runStorybookSetupCheck, +} from '../utils'; export default async function buildStorybookExecutor( options: CLIOptions & CommonNxStorybookConfig, @@ -26,6 +30,7 @@ export default async function buildStorybookExecutor( // TODO(katerina): Remove when Storybook 7 // print warnings runStorybookSetupCheck(options); + pleaseUpgrade(); logger.info(`NX ui framework: ${options.uiFramework}`); diff --git a/packages/storybook/src/executors/storybook/storybook.impl.ts b/packages/storybook/src/executors/storybook/storybook.impl.ts index 229ca3c75d7e9..8eb515dad0612 100644 --- a/packages/storybook/src/executors/storybook/storybook.impl.ts +++ b/packages/storybook/src/executors/storybook/storybook.impl.ts @@ -5,7 +5,11 @@ import { isStorybookV7, storybookConfigExistsCheck, } from '../../utils/utilities'; -import { getStorybookFrameworkPath, runStorybookSetupCheck } from '../utils'; +import { + getStorybookFrameworkPath, + pleaseUpgrade, + runStorybookSetupCheck, +} from '../utils'; import { CLIOptions } from '@storybook/types'; // TODO(katerina): Remove when Storybook 7 import { CommonNxStorybookConfig } from '../../utils/models'; @@ -38,6 +42,7 @@ export default async function* storybookExecutor( // TODO(katerina): Remove when Storybook 7 // print warnings runStorybookSetupCheck(options); + pleaseUpgrade(); let frameworkPath = getStorybookFrameworkPath(options.uiFramework); const frameworkOptions = (await import(frameworkPath)).default; diff --git a/packages/storybook/src/executors/utils.ts b/packages/storybook/src/executors/utils.ts index ba0d30f2f501e..a1d1657b7bb1e 100644 --- a/packages/storybook/src/executors/utils.ts +++ b/packages/storybook/src/executors/utils.ts @@ -67,6 +67,18 @@ export function runStorybookSetupCheck( reactWebpack5Check(options); } +export function pleaseUpgrade() { + logger.warn( + ` + Please consider upgrading to Storybook version 7, + as version 6 is no longer maintained. + + Here is a guide on how to upgrade: + https://nx.dev/packages/storybook/generators/migrate-7 + ` + ); +} + // TODO(katerina): Remove when Storybook 7 function reactWebpack5Check(options: CLIOptions & CommonNxStorybookConfig) { if (options.uiFramework === '@storybook/react') { diff --git a/packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap b/packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap index a3116a06605de..b19660997ff47 100644 --- a/packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap +++ b/packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap @@ -1,30 +1,22 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`@nrwl/storybook:configuration for workspaces with Root project basic functionalities should generate Storybook files for nested project only 1`] = ` -"import type { StorybookConfig } from '@storybook/core-common'; - -import { mergeConfig } from 'vite'; -import viteTsConfigPaths from 'vite-tsconfig-paths'; +"import type { StorybookConfig } from '@storybook/react-vite'; const config: StorybookConfig = { - core: { builder: '@storybook/builder-vite' }, - stories: [ - '../src/app/**/*.stories.mdx', - '../src/app/**/*.stories.@(js|jsx|ts|tsx)', - ], + stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'], addons: ['@storybook/addon-essentials'], - async viteFinal(config: any) { - return mergeConfig(config, { - plugins: [ - viteTsConfigPaths({ - root: './../', - }), - ], - }); + framework: { + name: '@storybook/react-vite', + options: { + builder: { + viteConfigPath: '', + }, + }, }, -} as StorybookConfig; +}; -module.exports = config; +export default config; // To customize your Vite configuration you can use the viteFinal field. // Check https://storybook.js.org/docs/react/builders/vite#configuration @@ -66,18 +58,18 @@ exports[`@nrwl/storybook:configuration for workspaces with Root project basic fu exports[`@nrwl/storybook:configuration for workspaces with Root project basic functionalities should generate Storybook files for nested project only 3`] = `""`; exports[`@nrwl/storybook:configuration for workspaces with Root project basic functionalities should generate Storybook files for nested project only 4`] = ` -"import type { StorybookConfig } from '@storybook/core-common'; +"import type { StorybookConfig } from '@storybook/react-webpack5'; const config: StorybookConfig = { - core: { builder: 'webpack5' }, - stories: [ - '../src/app/**/*.stories.mdx', - '../src/app/**/*.stories.@(js|jsx|ts|tsx)', - ], + stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'], addons: ['@storybook/addon-essentials', '@nrwl/react/plugins/storybook'], + framework: { + name: '@storybook/react-webpack5', + options: {}, + }, }; -module.exports = config; +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 diff --git a/packages/storybook/src/generators/configuration/configuration-nested.spec.ts b/packages/storybook/src/generators/configuration/configuration-nested.spec.ts index 2dcd6037dfdd4..2d237fd36b649 100644 --- a/packages/storybook/src/generators/configuration/configuration-nested.spec.ts +++ b/packages/storybook/src/generators/configuration/configuration-nested.spec.ts @@ -85,10 +85,16 @@ describe('@nrwl/storybook:configuration for workspaces with Root project', () => }); writeJson(tree, 'package.json', { devDependencies: { - '@storybook/addon-essentials': '~6.2.9', - '@storybook/react': '~6.2.9', + '@storybook/addon-essentials': '7.0.2', + '@storybook/react': '7.0.2', + '@storybook/core-server': '7.0.2', }, }); + + jest.resetModules(); + jest.doMock('@storybook/core-server/package.json', () => ({ + version: '7.0.2', + })); }); it('should generate files for root app', async () => { diff --git a/packages/storybook/src/generators/configuration/configuration-v7.spec.ts b/packages/storybook/src/generators/configuration/configuration-v7.spec.ts index 4dd50ad6c6864..0cc54d2a6c216 100644 --- a/packages/storybook/src/generators/configuration/configuration-v7.spec.ts +++ b/packages/storybook/src/generators/configuration/configuration-v7.spec.ts @@ -50,8 +50,14 @@ describe('@nrwl/storybook:configuration for Storybook v7', () => { devDependencies: { '@storybook/addon-essentials': storybook7Version, '@storybook/react': storybook7Version, + '@storybook/core-server': storybook7Version, }, }); + + jest.resetModules(); + jest.doMock('@storybook/core-server/package.json', () => ({ + version: '7.0.2', + })); }); it('should generate TypeScript Configuration files', async () => { @@ -59,7 +65,6 @@ describe('@nrwl/storybook:configuration for Storybook v7', () => { name: 'test-ui-lib', standaloneConfig: false, tsConfiguration: true, - storybook7Configuration: true, storybook7UiFramework: '@storybook/angular', }); const project = readProjectConfiguration(tree, 'test-ui-lib'); @@ -81,7 +86,6 @@ describe('@nrwl/storybook:configuration for Storybook v7', () => { await configurationGenerator(tree, { name: 'test-ui-lib', standaloneConfig: false, - storybook7Configuration: true, storybook7UiFramework: '@storybook/react-webpack5', }); const tsconfigJson = readJson( @@ -99,7 +103,7 @@ describe('@nrwl/storybook:configuration for Storybook v7', () => { await configurationGenerator(tree, { name: 'test-ui-lib', standaloneConfig: false, - storybook7Configuration: true, + storybook7UiFramework: '@storybook/react-webpack5', }); const tsconfigJson = readJson( @@ -139,7 +143,6 @@ describe('@nrwl/storybook:configuration for Storybook v7', () => { await configurationGenerator(tree, { name: 'test-ui-lib2', standaloneConfig: false, - storybook7Configuration: true, storybook7UiFramework: '@storybook/react-webpack5', }); @@ -163,7 +166,6 @@ describe('@nrwl/storybook:configuration for Storybook v7', () => { await configurationGenerator(tree, { name: 'test-ui-lib2', standaloneConfig: false, - storybook7Configuration: true, storybook7UiFramework: '@storybook/react-webpack5', }); @@ -177,7 +179,6 @@ describe('@nrwl/storybook:configuration for Storybook v7', () => { name: 'test-ui-lib', standaloneConfig: false, tsConfiguration: true, - storybook7Configuration: true, storybook7UiFramework: '@storybook/angular', }); @@ -195,7 +196,6 @@ describe('@nrwl/storybook:configuration for Storybook v7', () => { await configurationGenerator(tree, { name: 'test-ui-lib', configureTestRunner: true, - storybook7Configuration: true, storybook7UiFramework: '@storybook/react-webpack5', }); @@ -251,64 +251,53 @@ describe('@nrwl/storybook:configuration for Storybook v7', () => { await configurationGenerator(tree, { name: 'reapp', tsConfiguration: false, - storybook7Configuration: true, storybook7UiFramework: '@storybook/react-vite', }); await configurationGenerator(tree, { name: 'main-vite', tsConfiguration: false, - storybook7Configuration: true, storybook7UiFramework: '@storybook/react-vite', }); await configurationGenerator(tree, { name: 'main-vite-ts', tsConfiguration: true, - storybook7Configuration: true, storybook7UiFramework: '@storybook/react-vite', }); await configurationGenerator(tree, { name: 'main-webpack', - storybook7Configuration: true, storybook7UiFramework: '@storybook/react-webpack5', }); await configurationGenerator(tree, { name: 'reappw', - storybook7Configuration: true, storybook7UiFramework: '@storybook/react-webpack5', }); await configurationGenerator(tree, { name: 'react-rollup', - storybook7Configuration: true, storybook7UiFramework: '@storybook/react-webpack5', }); await configurationGenerator(tree, { name: 'react-vite', - storybook7Configuration: true, storybook7UiFramework: '@storybook/react-vite', }); await configurationGenerator(tree, { name: 'nextapp', - storybook7Configuration: true, storybook7UiFramework: '@storybook/nextjs', }); await configurationGenerator(tree, { name: 'react-swc', - storybook7Configuration: true, storybook7UiFramework: '@storybook/react-webpack5', }); await configurationGenerator(tree, { name: 'wv1', - storybook7Configuration: true, storybook7UiFramework: '@storybook/web-components-vite', }); await configurationGenerator(tree, { name: 'ww1', - storybook7Configuration: true, storybook7UiFramework: '@storybook/web-components-webpack5', }); }); diff --git a/packages/storybook/src/generators/configuration/configuration.spec.ts b/packages/storybook/src/generators/configuration/configuration.spec.ts index 685c2b82bd22b..a44bc119e8ebb 100644 --- a/packages/storybook/src/generators/configuration/configuration.spec.ts +++ b/packages/storybook/src/generators/configuration/configuration.spec.ts @@ -52,17 +52,23 @@ describe('@nrwl/storybook:configuration', () => { }); writeJson(tree, 'package.json', { devDependencies: { - '@storybook/addon-essentials': '~6.2.9', - '@storybook/react': '~6.2.9', + '@storybook/addon-essentials': '~6.5.9', + '@storybook/react': '~6.5.9', + '@storybook/core-server': '~6.5.9', '@nrwl/web': nxVersion, }, }); + jest.resetModules(); + jest.doMock('@storybook/core-server/package.json', () => ({ + version: '6.5.9', + })); }); it('should generate files', async () => { await configurationGenerator(tree, { name: 'test-ui-lib', uiFramework: '@storybook/angular', + storybook7Configuration: false, }); expect( @@ -98,6 +104,7 @@ describe('@nrwl/storybook:configuration', () => { name: 'test-ui-lib', uiFramework: '@storybook/angular', tsConfiguration: true, + storybook7Configuration: false, }); expect( @@ -113,6 +120,7 @@ describe('@nrwl/storybook:configuration', () => { await configurationGenerator(tree, { name: 'test-ui-lib', uiFramework: '@storybook/angular', + storybook7Configuration: false, }); expect( @@ -129,6 +137,7 @@ describe('@nrwl/storybook:configuration', () => { await configurationGenerator(tree, { name: 'test-ui-lib', uiFramework: '@storybook/react', + storybook7Configuration: false, }); const project = readProjectConfiguration(tree, 'test-ui-lib'); @@ -164,6 +173,7 @@ describe('@nrwl/storybook:configuration', () => { await configurationGenerator(tree, { name: 'test-ui-lib-2', uiFramework: '@storybook/angular', + storybook7Configuration: false, }); const project = readProjectConfiguration(tree, 'test-ui-lib-2'); @@ -201,6 +211,7 @@ describe('@nrwl/storybook:configuration', () => { await configurationGenerator(tree, { name: 'test-ui-lib-5', uiFramework: '@storybook/angular', + storybook7Configuration: false, }); const project = readProjectConfiguration(tree, 'test-ui-lib-5'); @@ -237,6 +248,7 @@ describe('@nrwl/storybook:configuration', () => { await configurationGenerator(tree, { name: 'test-ui-lib', uiFramework: '@storybook/react', + storybook7Configuration: false, }); const tsconfigJson = readJson( tree, @@ -259,6 +271,7 @@ describe('@nrwl/storybook:configuration', () => { await configurationGenerator(tree, { name: 'test-ui-lib', uiFramework: '@storybook/react', + storybook7Configuration: false, }); const tsconfigJson = readJson( tree, @@ -302,6 +315,7 @@ describe('@nrwl/storybook:configuration', () => { await configurationGenerator(tree, { name: 'test-ui-lib2', uiFramework: '@storybook/react', + storybook7Configuration: false, }); expect(enquirer.prompt).toHaveBeenCalled(); @@ -329,6 +343,7 @@ describe('@nrwl/storybook:configuration', () => { await configurationGenerator(tree, { name: 'test-ui-lib2', uiFramework: '@storybook/react', + storybook7Configuration: false, }); expect(enquirer.prompt).toHaveBeenCalled(); @@ -342,6 +357,7 @@ describe('@nrwl/storybook:configuration', () => { name: 'test-ui-lib', uiFramework: '@storybook/angular', tsConfiguration: true, + storybook7Configuration: false, }); expect(tree.exists('libs/test-ui-lib/.storybook/main.ts')).toBeTruthy(); expect( @@ -361,6 +377,7 @@ describe('@nrwl/storybook:configuration', () => { name: 'test-ui-lib', uiFramework: '@storybook/react', configureTestRunner: true, + storybook7Configuration: false, }); expect(enquirer.prompt).toHaveBeenCalled(); diff --git a/packages/storybook/src/generators/configuration/configuration.ts b/packages/storybook/src/generators/configuration/configuration.ts index 318b3ecea16e9..70f25b7e5cc64 100644 --- a/packages/storybook/src/generators/configuration/configuration.ts +++ b/packages/storybook/src/generators/configuration/configuration.ts @@ -30,7 +30,7 @@ import { import { Linter } from '@nrwl/linter'; import { findStorybookAndBuildTargetsAndCompiler, - isStorybookV7, + storybookMajorVersion, } from '../../utils/utilities'; import { nxVersion, @@ -41,11 +41,38 @@ import { tsNodeVersion, } from '../../utils/versions'; import { getGeneratorConfigurationOptions } from './lib/user-prompts'; +import { pleaseUpgrade } from '../../executors/utils'; export async function configurationGenerator( tree: Tree, rawSchema: StorybookConfigureSchema ) { + /** + * Make sure someone is not trying to configure Storybook + * with the wrong version. + */ + + let storybook7 = + storybookMajorVersion() === 7 ?? rawSchema.storybook7Configuration; + + if (storybookMajorVersion() === 6 && rawSchema.storybook7Configuration) { + logger.error( + `You are using Storybook version 6. + So Nx will configure Storybook for version 6.` + ); + pleaseUpgrade(); + rawSchema.storybook7Configuration = false; + storybook7 = false; + } + + if (storybook7 && !rawSchema.storybook7Configuration) { + rawSchema.storybook7Configuration = true; + logger.info( + `You are using Storybook version 7. + So Nx will configure Storybook for version 7.` + ); + } + if (process.env.NX_INTERACTIVE === 'true') { rawSchema = await getGeneratorConfigurationOptions(rawSchema); } @@ -61,30 +88,11 @@ export async function configurationGenerator( const { nextBuildTarget, compiler, viteBuildTarget } = findStorybookAndBuildTargetsAndCompiler(targets); - /** - * Make sure someone is not trying to configure Storybook - * with the wrong version. - */ - let storybook7; - try { - storybook7 = isStorybookV7(); - } catch (e) { - storybook7 = schema.storybook7Configuration; - } - - if (storybook7 && !schema.storybook7Configuration) { - schema.storybook7Configuration = true; - logger.info( - `You are using Storybook version 7. - So Nx will configure Storybook for version 7.` - ); - } - let viteConfigFilePath: string | undefined; if (viteBuildTarget) { if (schema.bundler !== 'vite') { - if (!schema.storybook7Configuration) { + if (!storybook7) { // The warnings for v7 are handled in the next if statement logger.info( `Your project ${schema.name} uses Vite as a bundler. @@ -103,7 +111,7 @@ export async function configurationGenerator( ); } - if (schema.storybook7Configuration) { + if (storybook7) { if (viteBuildTarget) { if (schema.storybook7UiFramework === '@storybook/react-webpack5') { logger.info( @@ -142,10 +150,30 @@ export async function configurationGenerator( schema.storybook7UiFramework = `${schema.uiFramework}-webpack5`; } } + } else { + if (!schema.uiFramework) { + if (schema.storybook7UiFramework?.startsWith('@storybook/react')) { + schema.uiFramework = '@storybook/react'; + } else if ( + schema.storybook7UiFramework?.startsWith('@storybook/web-components') + ) { + schema.uiFramework = '@storybook/web-components'; + } else if (schema.storybook7UiFramework === '@storybook/angular') { + schema.uiFramework = '@storybook/angular'; + } else if ( + schema.storybook7UiFramework?.startsWith('@storybook/react-native') + ) { + schema.uiFramework = '@storybook/react-native'; + } else { + logger.error( + `You have to specify a uiFramework for Storybook version 6.` + ); + } + } } // If we're on Storybook 7, ignore schema.uiFramework - const uiFrameworkUsed = schema.storybook7Configuration + const uiFrameworkUsed = storybook7 ? schema.storybook7UiFramework : schema.uiFramework; @@ -153,7 +181,7 @@ export async function configurationGenerator( uiFramework: uiFrameworkUsed, js: schema.js, bundler: schema.bundler, - storybook7Configuration: schema.storybook7Configuration, + storybook7Configuration: storybook7, }); tasks.push(initTask); @@ -169,7 +197,7 @@ export async function configurationGenerator( !!nextBuildTarget, compiler === 'swc', schema.bundler === 'vite', - schema.storybook7Configuration, + storybook7, viteConfigFilePath ); @@ -188,7 +216,7 @@ export async function configurationGenerator( schema.name, uiFrameworkUsed, schema.configureTestRunner, - schema.storybook7Configuration + storybook7 ); } @@ -224,11 +252,7 @@ export async function configurationGenerator( devDeps['@storybook/core-common'] = storybookVersion; devDeps['ts-node'] = tsNodeVersion; } - if ( - nextBuildTarget && - projectType === 'application' && - !schema.storybook7Configuration - ) { + if (nextBuildTarget && projectType === 'application' && !storybook7) { devDeps['storybook-addon-next'] = storybookNextAddonVersion; devDeps['storybook-addon-swc'] = storybookSwcAddonVersion; } else if (compiler === 'swc') { diff --git a/packages/storybook/src/generators/configuration/schema.json b/packages/storybook/src/generators/configuration/schema.json index 18f7960297fef..2049c3acb3d26 100644 --- a/packages/storybook/src/generators/configuration/schema.json +++ b/packages/storybook/src/generators/configuration/schema.json @@ -18,21 +18,6 @@ "x-dropdown": "projects", "x-priority": "important" }, - "uiFramework": { - "type": "string", - "description": "Storybook UI Framework to use.", - "enum": [ - "@storybook/angular", - "@storybook/react", - "@storybook/react-native", - "@storybook/html", - "@storybook/web-components", - "@storybook/vue", - "@storybook/vue3", - "@storybook/svelte" - ], - "x-priority": "important" - }, "configureCypress": { "type": "boolean", "description": "Run the cypress-configure generator.", @@ -83,9 +68,9 @@ "x-priority": "important" }, "storybook7Configuration": { - "description": "Configure your workspace using Storybook version 7.", + "description": "Configure your workspace using Storybook version 7. Defaults to true.", "type": "boolean", - "default": false, + "default": true, "hidden": true, "aliases": ["storybook7betaConfiguration"] }, @@ -110,7 +95,22 @@ "@storybook/web-components-webpack5", "@storybook/web-components-vite" ], - "hidden": true + "x-priority": "important", + "hidden": false + }, + "uiFramework": { + "type": "string", + "description": "Storybook UI Framework to use.", + "enum": [ + "@storybook/angular", + "@storybook/react", + "@storybook/react-native", + "@storybook/html", + "@storybook/web-components", + "@storybook/vue", + "@storybook/vue3", + "@storybook/svelte" + ] }, "skipFormat": { "description": "Skip formatting files.", diff --git a/packages/storybook/src/generators/init/schema.json b/packages/storybook/src/generators/init/schema.json index fb720dc5a7f76..aeb5cdb24b8d2 100644 --- a/packages/storybook/src/generators/init/schema.json +++ b/packages/storybook/src/generators/init/schema.json @@ -47,8 +47,8 @@ "storybook7Configuration": { "description": "Configure your workspace using Storybook version 7.", "type": "boolean", - "default": false, - "hidden": true, + "default": true, + "hidden": false, "aliases": ["storybook7betaConfiguration"] }, "js": { diff --git a/packages/storybook/src/utils/utilities.ts b/packages/storybook/src/utils/utilities.ts index 403c1a9732e71..b7f1c1034fd5f 100644 --- a/packages/storybook/src/utils/utilities.ts +++ b/packages/storybook/src/utils/utilities.ts @@ -9,7 +9,7 @@ import { storybookVersion } from './versions'; import { statSync } from 'fs'; import { findNodes } from 'nx/src/utils/typescript'; import ts = require('typescript'); -import { gte } from 'semver'; +import { gte, lt, major } from 'semver'; import { join } from 'path'; export const Constants = { @@ -64,6 +64,18 @@ export function isStorybookV7() { return gte(storybookPackageVersion, '7.0.0-alpha.0'); } +export function storybookMajorVersion() { + try { + const storybookPackageVersion = require(join( + '@storybook/core-server', + 'package.json' + )).version; + return major(storybookPackageVersion); + } catch { + return undefined; + } +} + export function safeFileDelete(tree: Tree, path: string): boolean { if (tree.exists(path)) { tree.delete(path); diff --git a/packages/storybook/src/utils/versions.ts b/packages/storybook/src/utils/versions.ts index 9357c9d3e1fc6..fee5f276d5e6c 100644 --- a/packages/storybook/src/utils/versions.ts +++ b/packages/storybook/src/utils/versions.ts @@ -17,5 +17,5 @@ export const litVersion = '^2.6.1'; export const htmlWebpackPluginVersion = '^5.5.0'; export const tsNodeVersion = '10.9.1'; -export const storybook7Version = '^7.0.1'; +export const storybook7Version = '^7.0.2'; export const reactVersion = '^18.2.0';