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

2023-04-06 18:39:03 +03:00 · 2023-04-06 18:39:03 +03:00 · f36d65c2ef
commit f36d65c2ef
parent 2887596099
20 changed files with 194 additions and 128 deletions
--- 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"]
      }
--- 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"]
      }
--- 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.",
--- 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": {
--- 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"]
    }
--- 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',
    }));
  });

--- 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(() => {
--- 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"]
    }
--- 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}`);

--- 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;
--- 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') {
--- 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
--- 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 () => {
--- 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<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',
      });
    });
--- 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<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();
--- 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') {
--- 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.",
--- 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": {
--- 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);
--- 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';