Merge branch 'next' into docs_fix_api_csf

code/builders/builder-vite/src/build.ts

@@ -41,7 +41,7 @@ export async function build(options: Options) {
 
   const turbosnapPluginName = 'rollup-plugin-turbosnap';
   const hasTurbosnapPlugin =
-    finalConfig.plugins && hasVitePlugins(finalConfig.plugins, [turbosnapPluginName]);
+    finalConfig.plugins && (await hasVitePlugins(finalConfig.plugins, [turbosnapPluginName]));
   if (hasTurbosnapPlugin) {
     logger.warn(dedent`Found '${turbosnapPluginName}' which is now included by default in Storybook 8.
       Removing from your plugins list. Ensure you pass \`--webpack-stats-json\` to generate stats.
@@ -53,6 +53,9 @@ export async function build(options: Options) {
 
   await viteBuild(await sanitizeEnvVars(options, finalConfig));
 
-  const statsPlugin = findPlugin(finalConfig, 'rollup-plugin-webpack-stats') as WebpackStatsPlugin;
+  const statsPlugin = findPlugin(
+    finalConfig,
+    'storybook:rollup-plugin-webpack-stats'
+  ) as WebpackStatsPlugin;
   return statsPlugin?.storybookGetStats();
 }

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

@@ -34,8 +34,7 @@ test.describe('addon-docs', () => {
     await expect(anotherStory).toContainText('Another button, just to show multiple stories');
   });
 
-  // FIXME - get rid of the flake
-  test.skip('should show source=code view for stories', async ({ page }) => {
+  test('should show source=code view for stories', async ({ page }) => {
     const skipped = [
       // SSv6 does not render stories in the correct order in our sandboxes
       'internal\\/ssv6',

code/e2e-tests/tags.spec.ts

@@ -3,8 +3,7 @@ import { SbPage } from './util';
 
 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
 
-// FIXME - get rid of the flake
-test.describe.skip('tags', () => {
+test.describe('tags', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
     await new SbPage(page).waitUntilLoaded();

code/frameworks/nextjs/src/preset.ts

@@ -117,7 +117,8 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig,
   });
 
   const babelRCPath = join(getProjectRoot(), '.babelrc');
-  const hasBabelConfig = fs.existsSync(babelRCPath);
+  const babelConfigPath = join(getProjectRoot(), 'babel.config.js');
+  const hasBabelConfig = fs.existsSync(babelRCPath) || fs.existsSync(babelConfigPath);
   const nextjsVersion = getNextjsVersion();
   const isDevelopment = options.configType !== 'PRODUCTION';
 

code/lib/cli/package.json

@@ -56,6 +56,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
+    "@babel/core": "^7.23.0",
     "@babel/types": "^7.23.0",
     "@ndelangen/get-tarball": "^3.0.7",
     "@storybook/codemod": "workspace:*",

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

@@ -10,7 +10,7 @@ interface AngularBuildersMultiprojectRunOptions {}
 
 export const angularBuildersMultiproject: Fix<AngularBuildersMultiprojectRunOptions> = {
   id: 'angular-builders-multiproject',
-  promptOnly: true,
+  promptType: 'manual',
 
   async check({ packageManager, mainConfig }) {
     // Skip in case of NX

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

@@ -9,7 +9,7 @@ interface IncompatibleAddonsOptions {
 
 export const incompatibleAddons: Fix<IncompatibleAddonsOptions> = {
   id: 'incompatible-addons',
-  promptOnly: true,
+  promptType: 'manual',
 
   async check({ mainConfig, packageManager }) {
     const incompatibleAddonList = await getIncompatibleAddons(mainConfig, packageManager);

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

@@ -21,6 +21,8 @@ import { wrapRequire } from './wrap-require';
 import { reactDocgen } from './react-docgen';
 import { removeReactDependency } from './prompt-remove-react';
 import { storyshotsMigration } from './storyshots-migration';
+import { removeArgtypesRegex } from './remove-argtypes-regex';
+import { webpack5CompilerSetup } from './webpack5-compiler-setup';
 import { removeJestTestingLibrary } from './remove-jest-testing-library';
 
 export * from '../types';
@@ -37,6 +39,7 @@ export const allFixes: Fix[] = [
   sbBinary,
   sbScripts,
   incompatibleAddons,
+  removeArgtypesRegex,
   removeJestTestingLibrary,
   removedGlobalClientAPIs,
   mdx1to2,
@@ -48,6 +51,7 @@ export const allFixes: Fix[] = [
   reactDocgen,
   storyshotsMigration,
   removeReactDependency,
+  webpack5CompilerSetup,
 ];
 
 export const initFixes: Fix[] = [eslintPlugin];

code/lib/cli/src/automigrate/fixes/prompt-remove-react.ts

@@ -5,7 +5,7 @@ import type { Fix } from '../types';
 
 export const removeReactDependency: Fix<{}> = {
   id: 'remove-react-dependency',
-  promptOnly: true,
+  promptType: 'manual',
 
   async check({ packageManager, mainConfig, storybookVersion }) {
     // when the user is using the react renderer, we should not prompt them to remove react

code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts

@@ -0,0 +1,81 @@
+import type { Fix } from '../types';
+import * as fs from 'node:fs/promises';
+import * as babel from '@babel/core';
+import type { BabelFile, NodePath } from '@babel/core';
+import { babelParse } from '@storybook/csf-tools';
+import dedent from 'ts-dedent';
+import chalk from 'chalk';
+
+export const removeArgtypesRegex: Fix<{ argTypesRegex: NodePath; previewConfigPath: string }> = {
+  id: 'remove-argtypes-regex',
+  promptType: 'manual',
+  async check({ previewConfigPath }) {
+    if (!previewConfigPath) return null;
+
+    const previewFile = await fs.readFile(previewConfigPath, { encoding: 'utf-8' });
+
+    // @ts-expect-error File is not yet exposed, see https://github.com/babel/babel/issues/11350#issuecomment-644118606
+    const file: BabelFile = new babel.File(
+      { filename: previewConfigPath },
+      { code: previewFile, ast: babelParse(previewFile) }
+    );
+
+    let argTypesRegex;
+
+    file.path.traverse({
+      Identifier: (path) => {
+        if (path.node.name === 'argTypesRegex') {
+          argTypesRegex = path;
+        }
+      },
+    });
+
+    return argTypesRegex ? { argTypesRegex, previewConfigPath } : null;
+  },
+  prompt({ argTypesRegex, previewConfigPath }) {
+    const snippet = dedent`
+      import { fn } from '@storybook/test';
+      export default {
+        args: { onClick: fn() }, // will log to the action panel when clicked
+      };`;
+
+    // @ts-expect-error File is not yet exposed, see https://github.com/babel/babel/issues/11350#issuecomment-644118606
+    const file: BabelFile = new babel.File(
+      { file: 'story.tsx' },
+      { code: snippet, ast: babelParse(snippet) }
+    );
+
+    let formattedSnippet;
+    file.path.traverse({
+      Identifier: (path) => {
+        if (path.node.name === 'fn') {
+          formattedSnippet = path.buildCodeFrameError(``).message;
+        }
+      },
+    });
+
+    return dedent`
+      ${chalk.bold('Attention')}: We've detected that you're using argTypesRegex:
+      
+      ${argTypesRegex.buildCodeFrameError(`${previewConfigPath}`).message}
+
+      In Storybook 8, we recommend removing this regex.
+      Assign explicit spies with the ${chalk.cyan('fn')} function instead:      
+      ${formattedSnippet}
+      
+      The above pattern is needed when using spies in the play function, ${chalk.bold(
+        'even'
+      )} if you keep using argTypesRegex.
+      Implicit spies (based on a combination of argTypesRegex and docgen) is not supported in Storybook 8.
+      
+      Use the following command to check for spy usages in your play functions:
+       ${chalk.cyan(
+         'npx storybook migrate find-implicit-spies --glob="**/*.stories.@(js|jsx|ts|tsx)"'
+       )}
+       
+      Make sure to assign an explicit ${chalk.cyan('fn')} to your args for those usages. 
+      
+      For more information please visit our migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function
+    `;
+  },
+};

code/lib/cli/src/automigrate/fixes/remove-global-client-apis.ts

@@ -19,7 +19,7 @@ interface GlobalClientAPIOptions {
 
 export const removedGlobalClientAPIs: Fix<GlobalClientAPIOptions> = {
   id: 'removedglobalclientapis',
-  promptOnly: true,
+  promptType: 'manual',
 
   async check({ previewConfigPath }) {
     if (previewConfigPath) {

code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts

@@ -4,7 +4,7 @@ import type { Fix } from '../types';
 
 export const removeJestTestingLibrary: Fix<{ incompatiblePackages: string[] }> = {
   id: 'remove-jest-testing-library',
-  promptOnly: true,
+  promptType: 'manual',
   async check({ mainConfig, packageManager }) {
     const deps = await packageManager.getAllDependencies();
 

code/lib/cli/src/automigrate/fixes/storyshots-migration.ts

@@ -4,7 +4,7 @@ import type { Fix } from '../types';
 
 export const storyshotsMigration: Fix = {
   id: 'storyshots-migration',
-  promptOnly: true,
+  promptType: 'manual',
 
   async check({ mainConfig, packageManager }) {
     const allDeps = await packageManager.getAllDependencies();

code/lib/cli/src/automigrate/fixes/vite-config-file.ts

@@ -5,7 +5,7 @@ import { getFrameworkPackageName } from '../helpers/mainConfigFile';
 import { frameworkToRenderer } from '../../helpers';
 import { frameworkPackages } from '@storybook/core-common';
 
-interface Webpack5RunOptions {
+interface ViteConfigFileRunOptions {
   plugins: string[];
   existed: boolean;
 }
@@ -108,4 +108,4 @@ export const viteConfigFile = {
       This change was necessary to support newer versions of Vite.
     `;
   },
-} satisfies Fix<Webpack5RunOptions>;
+} satisfies Fix<ViteConfigFileRunOptions>;

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

@@ -5,7 +5,7 @@ import type { Fix } from '../types';
 
 const logger = console;
 
-interface Webpack5RunOptions {
+interface Vite4RunOptions {
   viteVersion: string | null;
 }
 
@@ -40,4 +40,4 @@ export const vite4 = {
       await packageManager.addDependencies({ installAsDevDependencies: true }, deps);
     }
   },
-} satisfies Fix<Webpack5RunOptions>;
+} satisfies Fix<Vite4RunOptions>;