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 256224a5a629c..93478fa4dbb89 100644 --- a/packages/storybook/src/executors/build-storybook/build-storybook.impl.ts +++ b/packages/storybook/src/executors/build-storybook/build-storybook.impl.ts @@ -1,9 +1,11 @@ import { ExecutorContext, logger } from '@nrwl/devkit'; import * as build from '@storybook/core/standalone'; import 'dotenv/config'; +import { showStorybookV5Warning } from '../../utils/utilities'; import { CommonNxStorybookConfig } from '../models'; import { getStorybookFrameworkPath, + isStorybookLT6, normalizeAngularBuilderStylesOptions, resolveCommonStorybookOptionMapper, runStorybookSetupCheck, @@ -30,6 +32,10 @@ export default async function buildStorybookExecutor( // print warnings runStorybookSetupCheck(options); + if (isStorybookLT6()) { + showStorybookV5Warning(options.uiFramework); + } + logger.info(`NX Storybook builder starting ...`); await runInstance(option); logger.info(`NX Storybook builder finished ...`); diff --git a/packages/storybook/src/executors/storybook/storybook.impl.ts b/packages/storybook/src/executors/storybook/storybook.impl.ts index 099454f0990ed..86af19b336272 100644 --- a/packages/storybook/src/executors/storybook/storybook.impl.ts +++ b/packages/storybook/src/executors/storybook/storybook.impl.ts @@ -1,12 +1,14 @@ import { ExecutorContext, logger } from '@nrwl/devkit'; import { buildDevStandalone } from '@storybook/core/server'; import 'dotenv/config'; +import { showStorybookV5Warning } from '../../utils/utilities'; import { CommonNxStorybookConfig } from '../models'; import { getStorybookFrameworkPath, normalizeAngularBuilderStylesOptions, resolveCommonStorybookOptionMapper, runStorybookSetupCheck, + isStorybookLT6, } from '../utils'; export interface StorybookExecutorOptions extends CommonNxStorybookConfig { host?: string; @@ -34,6 +36,10 @@ export default async function* storybookExecutor( // print warnings runStorybookSetupCheck(options); + if (isStorybookLT6()) { + showStorybookV5Warning(options.uiFramework); + } + await runInstance(option); yield { success: true }; diff --git a/packages/storybook/src/executors/utils.ts b/packages/storybook/src/executors/utils.ts index 08b17b0f198f5..726ef94afbaf1 100644 --- a/packages/storybook/src/executors/utils.ts +++ b/packages/storybook/src/executors/utils.ts @@ -13,7 +13,7 @@ import { checkAndCleanWithSemver } from '@nrwl/workspace/src/utilities/version-u import 'dotenv/config'; import { existsSync, readFileSync } from 'fs'; import { join } from 'path'; -import { gte } from 'semver'; +import { gte, lt } from 'semver'; import { findOrCreateConfig, readCurrentWorkspaceStorybookVersionFromExecutor, @@ -296,6 +296,15 @@ function isStorybookGTE6_4() { ); } +export function isStorybookLT6() { + const storybookVersion = readCurrentWorkspaceStorybookVersionFromExecutor(); + + return lt( + checkAndCleanWithSemver('@storybook/core', storybookVersion), + '6.0.0' + ); +} + export function findStorybookAndBuildTargets(targets: { [targetName: string]: TargetConfiguration; }): { diff --git a/packages/storybook/src/generators/configuration/configuration.ts b/packages/storybook/src/generators/configuration/configuration.ts index 27d4e134777bc..cd4bab1602650 100644 --- a/packages/storybook/src/generators/configuration/configuration.ts +++ b/packages/storybook/src/generators/configuration/configuration.ts @@ -22,6 +22,7 @@ import { join } from 'path'; import { isFramework, readCurrentWorkspaceStorybookVersionFromGenerator, + showStorybookV5Warning, TsConfig, } from '../../utils/utilities'; import { cypressProjectGenerator } from '../cypress-project/cypress-project'; @@ -78,6 +79,10 @@ export async function configurationGenerator( } } + if (workspaceStorybookVersion !== '6') { + showStorybookV5Warning(rawSchema.uiFramework); + } + await formatFiles(tree); return runTasksInSerial(...tasks); @@ -112,6 +117,7 @@ function createRootStorybookDir( `adding .storybook folder to the root directory - based on the Storybook version installed (v${workspaceStorybookVersion}), we'll bootstrap a scaffold for that particular version.` ); + const templatePath = join( __dirname, workspaceStorybookVersion === '6' ? './root-files' : './root-files-5' diff --git a/packages/storybook/src/utils/utilities.ts b/packages/storybook/src/utils/utilities.ts index aac3ffba7c94d..8f61965c138df 100644 --- a/packages/storybook/src/utils/utilities.ts +++ b/packages/storybook/src/utils/utilities.ts @@ -1,4 +1,10 @@ -import { ExecutorContext, readJson, readJsonFile, Tree } from '@nrwl/devkit'; +import { + ExecutorContext, + logger, + readJson, + readJsonFile, + Tree, +} from '@nrwl/devkit'; import { CompilerOptions } from 'typescript'; import { storybookVersion } from './versions'; import { StorybookConfig } from '../executors/models'; @@ -198,3 +204,30 @@ function createStorybookConfig( ); return tmpFolder; } + +export function showStorybookV5Warning( + uiFramework: + | '@storybook/angular' + | '@storybook/react' + | '@storybook/html' + | '@storybook/web-components' + | '@storybook/vue' + | '@storybook/vue3' + | '@storybook/svelte' + | '@storybook/react-native' +) { + logger.warn( + `It looks like you're using Storybook version 5. + Please note that starting with version 14, Nx will drop support for Storybook version 5. + Before upgrading to Nx 14, please make sure you have migrated your Storybook configurations + to the latest version of Storybook. + + For more information, please take a look at our upgrade guide: + ${ + uiFramework === '@storybook/angular' + ? 'https://nx.dev/storybook/upgrade-storybook-v6-angular' + : 'https://nx.dev/storybook/upgrade-storybook-v6-react' + } + ` + ); +}