Automigrations: Enhance experience for upgrades from Storybook 6 to 8

code/lib/cli/src/autoblock/block-dependencies-versions.ts

@@ -9,6 +9,7 @@ const minimalVersionsMap = {
   preact: '10.0.0',
   svelte: '4.0.0',
   vue: '3.0.0',
+  vite: '4.0.0',
 };
 
 type Result = {
@@ -80,7 +81,7 @@ export const blocker = createBlocker({
       default:
         return dedent`
           Support for ${data.packageName} version < ${data.minimumVersion} has been removed.
-          Storybook 8 needs minimum version of ${data.minimumVersion}, but you had version ${data.installedVersion}.
+          Since version 8, Storybook needs a minimum version of ${data.minimumVersion}, but you have version ${data.installedVersion}.
 
           Please update this dependency.
         `;

code/lib/cli/src/autoblock/index.ts

@@ -8,7 +8,6 @@ const excludesFalse = <T>(x: T | false): x is T => x !== false;
 const blockers: () => BlockerModule<any>[] = () => [
   // add/remove blockers here
   import('./block-storystorev6'),
-  import('./block-stories-mdx'),
   import('./block-dependencies-versions'),
   import('./block-node-version'),
 ];

code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.ts

@@ -12,6 +12,8 @@ export const angularBuildersMultiproject: Fix<AngularBuildersMultiprojectRunOpti
   id: 'angular-builders-multiproject',
   promptType: 'manual',
 
+  versionRange: ['<7', '>=7'],
+
   async check({ packageManager, mainConfig }) {
     // Skip in case of NX
     const angularVersion = await packageManager.getPackageVersion('@angular/core');

code/lib/cli/src/automigrate/fixes/angular-builders.test.ts

@@ -71,24 +71,6 @@ describe('is not Nx project', () => {
       });
     });
 
-    describe('Angular < 15.0.0', () => {
-      const packageManager = {
-        getPackageVersion: (packageName: string) => {
-          if (packageName === '@angular/core') {
-            return Promise.resolve('14.0.0');
-          }
-
-          return null;
-        },
-      } as Partial<JsPackageManager>;
-
-      it('should throw an Error', async () => {
-        await expect(
-          checkAngularBuilders({ packageManager, mainConfig: { framework: '@storybook/angular' } })
-        ).rejects.toThrowErrorMatchingSnapshot();
-      });
-    });
-
     describe('Angular >= 16.0.0', () => {
       const packageManager = {
         getPackageVersion: (packageName) => {

code/lib/cli/src/automigrate/fixes/angular-builders.ts

@@ -1,5 +1,4 @@
 import { dedent } from 'ts-dedent';
-import semver from 'semver';
 import type { StorybookConfig } from '@storybook/types';
 import chalk from 'chalk';
 import prompts from 'prompts';
@@ -17,6 +16,8 @@ interface AngularBuildersRunOptions {
 export const angularBuilders: Fix<AngularBuildersRunOptions> = {
   id: 'angular-builders',
 
+  versionRange: ['<7', '>=7'],
+
   async check({ packageManager, mainConfig }) {
     const angularVersion = await packageManager.getPackageVersion('@angular/core');
 
@@ -31,13 +32,6 @@ export const angularBuilders: Fix<AngularBuildersRunOptions> = {
       return null;
     }
 
-    if (semver.lt(angularVersion, '15.0.0')) {
-      throw new Error(dedent`
-      ❌ Your project uses Angular < 15.0.0. Storybook 8.0 for Angular requires Angular 15.0.0 or higher. 
-      Please upgrade your Angular version to at least version 15.0.0 to use Storybook 8.0 in your project.
-      `);
-    }
-
     const angularJSON = new AngularJSON();
 
     const { hasStorybookBuilder } = angularJSON;

code/lib/cli/src/automigrate/fixes/autodocs-true.ts

@@ -16,6 +16,8 @@ interface AutodocsTrueFrameworkRunOptions {
 export const autodocsTrue: Fix<AutodocsTrueFrameworkRunOptions> = {
   id: 'autodocsTrue',
 
+  versionRange: ['<7', '>=7'],
+
   async check({ mainConfig }) {
     const { docs } = mainConfig;
 

code/lib/cli/src/automigrate/fixes/bare-mdx-stories-glob.test.ts

@@ -29,16 +29,6 @@ describe('bare-mdx fix', () => {
   });
 
   describe('should no-op', () => {
-    it('in SB < v7.0.0', async () => {
-      const packageJson = {
-        dependencies: { '@storybook/react': '^6.2.0' },
-      };
-      const main = { stories: ['../**/*.stories.mdx'] };
-      await expect(
-        checkBareMdxStoriesGlob({ packageJson, main, storybookVersion: '6.5.0' })
-      ).resolves.toBeFalsy();
-    });
-
     describe('in SB >= v7.0.0', () => {
       it('without main', async () => {
         const packageJson = {
@@ -162,7 +152,7 @@ describe('bare-mdx fix', () => {
           }
 
         In Storybook 7, we have deprecated defining stories in MDX files, and consequently have changed the suffix to simply .mdx.
-
+        Now, since Storybook 8.0, we have removed support for .stories.mdx files.
         We can automatically migrate your 'stories' config to include any .mdx file instead of just .stories.mdx.
         That would result in the following 'stories' config:
           "../src/**/*.mdx"
@@ -171,7 +161,6 @@ describe('bare-mdx fix', () => {
             "directory": "../src/**",
             "files": "*.mdx"
           }
-
         To learn more about this change, see: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mdx-docs-files"
       `);
     });

code/lib/cli/src/automigrate/fixes/bare-mdx-stories-glob.ts → code/lib/cli/src/automigrate/fixes/bare-mdx-stories-glob.tsx

@@ -1,6 +1,5 @@
 import chalk from 'chalk';
 import dedent from 'ts-dedent';
-import semver from 'semver';
 import type { StoriesEntry } from '@storybook/types';
 import { updateMainConfig } from '../helpers/mainConfigFile';
 import type { Fix } from '../types';
@@ -31,11 +30,8 @@ const getNextGlob = (glob: string) => {
 
 export const bareMdxStoriesGlob: Fix<BareMdxStoriesGlobRunOptions> = {
   id: 'bare-mdx-stories-glob',
-  async check({ storybookVersion, mainConfig }) {
-    if (!semver.gte(storybookVersion, '7.0.0')) {
-      return null;
-    }
-
+  versionRange: ['<7', '>=7'],
+  async check({ mainConfig }) {
     const existingStoriesEntries = mainConfig.stories as StoriesEntry[];
 
     if (!existingStoriesEntries) {
@@ -45,10 +41,9 @@ export const bareMdxStoriesGlob: Fix<BareMdxStoriesGlobRunOptions> = {
       )}, skipping ${chalk.cyan(this.id)} fix.
 
       In Storybook 7, we have deprecated defining stories in MDX files, and consequently have changed the suffix to simply .mdx.
-
+      Now, since Storybook 8.0, we have removed support for .stories.mdx files.
       We were unable to automatically migrate your 'stories' config to include any .mdx file instead of just .stories.mdx.
       We suggest you make this change manually.
-
       To learn more about this change, see: ${chalk.yellow(
         'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mdx-docs-files'
       )}
@@ -100,11 +95,10 @@ export const bareMdxStoriesGlob: Fix<BareMdxStoriesGlobRunOptions> = {
       ${chalk.cyan(prettyExistingStoriesEntries)}
 
     In Storybook 7, we have deprecated defining stories in MDX files, and consequently have changed the suffix to simply .mdx.
-
+    Now, since Storybook 8.0, we have removed support for .stories.mdx files.
     We can automatically migrate your 'stories' config to include any .mdx file instead of just .stories.mdx.
     That would result in the following 'stories' config:
       ${chalk.cyan(prettyNextStoriesEntries)}
-
     To learn more about this change, see: ${chalk.yellow(
       'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mdx-docs-files'
     )}

code/lib/cli/src/automigrate/fixes/builder-vite.ts

@@ -27,6 +27,8 @@ interface BuilderViteOptions {
 export const builderVite: Fix<BuilderViteOptions> = {
   id: 'builder-vite',
 
+  versionRange: ['<7', '>=7'],
+
   async check({ packageManager, mainConfig }) {
     const packageJson = await packageManager.retrievePackageJson();
     const builder = mainConfig.core?.builder;

code/lib/cli/src/automigrate/fixes/cra5.ts

@@ -20,6 +20,8 @@ interface CRA5RunOptions {
 export const cra5: Fix<CRA5RunOptions> = {
   id: 'cra5',
 
+  versionRange: ['<7', '>=7'],
+
   async check({ packageManager, mainConfig, storybookVersion }) {
     const craVersion = await packageManager.getPackageVersion('react-scripts');
 

code/lib/cli/src/automigrate/fixes/eslint-plugin.ts

@@ -26,6 +26,8 @@ interface EslintPluginRunOptions {
 export const eslintPlugin: Fix<EslintPluginRunOptions> = {
   id: 'eslintPlugin',
 
+  versionRange: ['<8', '>=7'],
+
   async check({ packageManager }) {
     const { hasEslint, isStorybookPluginInstalled } = await extractEslintInfo(packageManager);
 

code/lib/cli/src/automigrate/fixes/incompatible-addons.ts

@@ -10,6 +10,7 @@ interface IncompatibleAddonsOptions {
 export const incompatibleAddons: Fix<IncompatibleAddonsOptions> = {
   id: 'incompatible-addons',
   promptType: 'manual',
+  versionRange: ['*', '*'],
 
   async check({ mainConfig, packageManager }) {
     const incompatibleAddonList = await getIncompatibleAddons(mainConfig, packageManager);
@@ -20,14 +21,14 @@ export const incompatibleAddons: Fix<IncompatibleAddonsOptions> = {
     return dedent`
       ${chalk.bold(
         'Attention'
-      )}: We've detected that you're using the following addons in versions which are known to be incompatible with Storybook 7:
+      )}: We've detected that you're using the following addons in versions which are known to be incompatible with Storybook 8:
 
       ${incompatibleAddonList
         .map(({ name, version }) => `- ${chalk.cyan(`${name}@${version}`)}`)
         .join('\n')}
 
-      Please be aware they might not work in Storybook 7. Reach out to their maintainers for updates and check the following Github issue for more information:
-      ${chalk.yellow('https://github.com/storybookjs/storybook/issues/20529')}
+      Please be aware they might not work in Storybook 8. Reach out to their maintainers for updates and check the following Github issue for more information:
+      ${chalk.yellow('https://github.com/storybookjs/storybook/issues/26031')}
     `;
   },
 };

code/lib/cli/src/automigrate/fixes/index.ts

@@ -2,7 +2,6 @@ import type { Fix } from '../types';
 
 import { cra5 } from './cra5';
 import { webpack5 } from './webpack5';
-import { vite4 } from './vite4';
 import { vue3 } from './vue3';
 import { mdxgfm } from './mdx-gfm';
 import { removeLegacyMDX1 } from './remove-legacymdx1';
@@ -13,10 +12,8 @@ import { sbScripts } from './sb-scripts';
 import { sbBinary } from './sb-binary';
 import { newFrameworks } from './new-frameworks';
 import { removedGlobalClientAPIs } from './remove-global-client-apis';
-import { mdx1to2 } from './mdx-1-to-2';
 import { autodocsTrue } from './autodocs-true';
 import { angularBuilders } from './angular-builders';
-import { incompatibleAddons } from './incompatible-addons';
 import { angularBuildersMultiproject } from './angular-builders-multiproject';
 import { wrapRequire } from './wrap-require';
 import { reactDocgen } from './react-docgen';
@@ -25,6 +22,7 @@ import { storyshotsMigration } from './storyshots-migration';
 import { removeArgtypesRegex } from './remove-argtypes-regex';
 import { webpack5CompilerSetup } from './webpack5-compiler-setup';
 import { removeJestTestingLibrary } from './remove-jest-testing-library';
+import { mdx1to3 } from './mdx-1-to-3';
 
 export * from '../types';
 
@@ -33,17 +31,14 @@ export const allFixes: Fix[] = [
   cra5,
   webpack5,
   vue3,
-  vite4,
   viteConfigFile,
   eslintPlugin,
   builderVite,
   sbBinary,
   sbScripts,
-  incompatibleAddons,
   removeArgtypesRegex,
   removeJestTestingLibrary,
   removedGlobalClientAPIs,
-  mdx1to2,
   mdxgfm,
   autodocsTrue,
   angularBuildersMultiproject,
@@ -54,6 +49,7 @@ export const allFixes: Fix[] = [
   removeReactDependency,
   removeLegacyMDX1,
   webpack5CompilerSetup,
+  mdx1to3,
 ];
 
 export const initFixes: Fix[] = [eslintPlugin];

code/lib/cli/src/automigrate/fixes/mdx-1-to-2.test.ts → code/lib/cli/src/automigrate/fixes/mdx-1-to-3.test.ts

@@ -1,7 +1,7 @@
 import { it, expect } from 'vitest';
 
 import { dedent } from 'ts-dedent';
-import { fixMdxStyleTags, fixMdxComments } from './mdx-1-to-2';
+import { fixMdxStyleTags, fixMdxComments } from './mdx-1-to-3';
 
 it('fixMdxStyleTags fixes badly-formatted style blocks', () => {
   expect(

code/lib/cli/src/automigrate/fixes/mdx-1-to-2.ts → code/lib/cli/src/automigrate/fixes/mdx-1-to-3.ts

@@ -31,7 +31,7 @@ export const fixMdxComments = (mdx: string) => {
 
 const logger = console;
 
-interface Mdx1to2Options {
+interface Mdx1to3Options {
   storiesMdxFiles: string[];
 }
 
@@ -40,10 +40,12 @@ interface Mdx1to2Options {
  *
  * If so:
  * - Assume they might be MDX1
- * - Offer to help migrate to MDX2
+ * - Offer to help migrate to MDX3
  */
-export const mdx1to2: Fix<Mdx1to2Options> = {
-  id: 'mdx1to2',
+export const mdx1to3: Fix<Mdx1to3Options> = {
+  id: 'mdx1to3',
+
+  versionRange: ['<7.0.0', '>=8.0.0-alpha.0'],
 
   async check() {
     const storiesMdxFiles = await globby('./!(node_modules)**/*.(story|stories).mdx');
@@ -54,8 +56,8 @@ export const mdx1to2: Fix<Mdx1to2Options> = {
     return dedent`
       We've found ${chalk.yellow(storiesMdxFiles.length)} '.stories.mdx' files in your project.
 
-      Storybook has upgraded to MDX2 (https://mdxjs.com/blog/v2/), which contains breaking changes from MDX1.
-      We can try to automatically upgrade your MDX files to MDX2 format using some common patterns.
+      Storybook has upgraded to MDX3 (https://mdxjs.com/blog/v3/). MDX3 itself doesn't contain disruptive breaking changes, whereas the transition from MDX1 to MDX2 was a significant change.
+      We can try to automatically upgrade your MDX files to MDX3 format using some common patterns.
 
       After this install completes, and before you start Storybook, we strongly recommend reading the MDX2 section
       of the 7.0 migration guide. It contains useful tools for detecting and fixing any remaining issues.