feat(storybook): show warning about version 5 support drop (#9257)

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 ...`);

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 };

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;
 }): {

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'

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'
+    }
+    `
+  );
+}