Merge branch 'next' into migration-guide-updates-2

* next: (39 commits)
  Typo
  cleanup
  Add story for empty argTypes and address review
  fix issues with types, change the comment to not be jsdoc
  Add E2E test for multiple CSF files with same title in autodocs
  Fix overflow bug by using a better link
  remove deprecation of `manager-api`'s `types` export
  Don't show empty arg tables in doc pages
  Fix Yarn2Proxy findInstallations method
  revert component values back to array
  done
  perf(manager): improve performance when switching stories
  Add todo comment
  Refactor MDX to CSF transform function to return an object instead of a tuple
  Rename broken MDX files to .mdx.broken
  Upgrade migration-guide to mention limitations of mdx-to-csf codemod
  Fix issues where stories.js files were generated although a story doesn't exist
  Rename transformed mdx files
  Add version range for removeLegacyMDX1 fix
  Fix typo in automigrate/types.ts
  ...

code/addons/docs/template/stories/docs2/multiple-csf-files-a.stories.ts

@@ -0,0 +1,23 @@
+import { global as globalThis } from '@storybook/global';
+
+export default {
+  title: 'Multiple CSF Files Same Title',
+  component: globalThis.Components.Html,
+  tags: ['autodocs'],
+  args: {
+    content: '<p>paragraph</p>',
+  },
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export const DefaultA = {};
+
+export const SpanContent = {
+  args: { content: '<span>span</span>' },
+};
+
+export const CodeContent = {
+  args: { content: '<code>code</code>' },
+};

code/addons/docs/template/stories/docs2/multiple-csf-files-b.stories.ts

@@ -0,0 +1,23 @@
+import { global as globalThis } from '@storybook/global';
+
+export default {
+  title: 'Multiple CSF Files Same Title',
+  component: globalThis.Components.Html,
+  tags: ['autodocs'],
+  args: {
+    content: '<p>paragraph</p>',
+  },
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export const DefaultB = {};
+
+export const H1Content = {
+  args: { content: '<h1>heading 1</h1>' },
+};
+
+export const H2Content = {
+  args: { content: '<h2>heading 2</h2>' },
+};

code/e2e-tests/addon-docs.spec.ts

@@ -210,4 +210,19 @@ test.describe('addon-docs', () => {
     await expect(componentReactVersion).toHaveText(expectedReactVersion);
     await expect(componentReactDomVersion).toHaveText(expectedReactVersion);
   });
+
+  test('should have stories from multiple CSF files in autodocs', async ({ page }) => {
+    const sbPage = new SbPage(page);
+    await sbPage.navigateToStory('/addons/docs/multiple-csf-files-same-title', 'docs');
+    const root = sbPage.previewRoot();
+
+    const storyHeadings = root.locator('.sb-anchor > h3');
+    await expect(await storyHeadings.count()).toBe(6);
+    await expect(storyHeadings.nth(0)).toHaveText('Default A');
+    await expect(storyHeadings.nth(1)).toHaveText('Span Content');
+    await expect(storyHeadings.nth(2)).toHaveText('Code Content');
+    await expect(storyHeadings.nth(3)).toHaveText('Default B');
+    await expect(storyHeadings.nth(4)).toHaveText('H 1 Content');
+    await expect(storyHeadings.nth(5)).toHaveText('H 2 Content');
+  });
 });

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(