feat(storybook): make v7 default (#16159)

nrwl · Apr 6, 2023 · f36d65c · f36d65c · vercel · Apr 6, 2023
1 parent 2887596
commit f36d65c
Show file tree

Hide file tree

Showing 20 changed files with 194 additions and 128 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...es/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap b/...es/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
@@ -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 () => {