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

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"]
       }

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"]
       }

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.",

docs/generated/packages/storybook/generators/init.json

@@ -50,8 +50,8 @@
       "storybook7Configuration": {
         "description": "Configure your workspace using Storybook version 7.",
         "type": "boolean",
-        "default": false,
+        "default": true,
-        "hidden": true,
+        "hidden": false,
         "aliases": ["storybook7betaConfiguration"]
       },
       "js": {

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"]
     }

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

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(() => {

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"]
     }

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

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;

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') {

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 type { StorybookConfig } from '@storybook/react-vite';
-
-import { mergeConfig } from 'vite';
-import viteTsConfigPaths from 'vite-tsconfig-paths';
 
 const config: StorybookConfig = {
-  core: { builder: '@storybook/builder-vite' },
+  stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-  stories: [
-    '../src/app/**/*.stories.mdx',
-    '../src/app/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
   addons: ['@storybook/addon-essentials'],
-  async viteFinal(config: any) {
+  framework: {
-    return mergeConfig(config, {
+    name: '@storybook/react-vite',
-      plugins: [
+    options: {
-        viteTsConfigPaths({
+      builder: {
-          root: './../',
+        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.@(js|jsx|ts|tsx|mdx)'],
-  stories: [
-    '../src/app/**/*.stories.mdx',
-    '../src/app/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
   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

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/addon-essentials': '7.0.2',
-          '@storybook/react': '~6.2.9',
+          '@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 () => {

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<TsConfig>(
@@ -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<TsConfig>(
@@ -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',
       });
     });

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/addon-essentials': '~6.5.9',
-          '@storybook/react': '~6.2.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<TsConfig>(
         tree,
@@ -259,6 +271,7 @@ describe('@nrwl/storybook:configuration', () => {
       await configurationGenerator(tree, {
         name: 'test-ui-lib',
         uiFramework: '@storybook/react',
+        storybook7Configuration: false,
       });
       const tsconfigJson = readJson<TsConfig>(
         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();

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 (
+  if (nextBuildTarget && projectType === 'application' && !storybook7) {
-    nextBuildTarget &&
-    projectType === 'application' &&
-    !schema.storybook7Configuration
-  ) {
     devDeps['storybook-addon-next'] = storybookNextAddonVersion;
     devDeps['storybook-addon-swc'] = storybookSwcAddonVersion;
   } else if (compiler === 'swc') {

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.",

packages/storybook/src/generators/init/schema.json

@@ -47,8 +47,8 @@
     "storybook7Configuration": {
       "description": "Configure your workspace using Storybook version 7.",
       "type": "boolean",
-      "default": false,
+      "default": true,
-      "hidden": true,
+      "hidden": false,
       "aliases": ["storybook7betaConfiguration"]
     },
     "js": {

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

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