Merge pull request #31557 from storybookjs/valentin/monorepo-enhancements

CLI: Improve support for upgrading Storybook in monorepos
(cherry picked from commit 9c2f2fd)

Author: yannbf

.cursor/mcp.json

@@ -0,0 +1,10 @@
+{
+  "mcpServers": {
+    "wallaby": {
+      "command": "node",
+      "args": [
+        "~/.wallaby/mcp/"
+      ]
+    }
+  }
+}

.cursorrules

@@ -0,0 +1,50 @@
+## Test Configuration
+
+This Storybook repository uses Vitest as the test runner. Here are the key commands and configuration:
+
+### Test Scripts
+
+- `yarn test` - Run all tests (from root directory, delegates to `cd code; yarn test`)
+- `yarn test <test-name>` - Run focused tests matching the pattern
+- `yarn test:watch` - Run tests in watch mode
+- `yarn test:watch <test-name>` - Run focused tests in watch mode
+
+### Test Directory Structure
+
+- Tests are located in the `code/` directory
+- Vitest configuration is in `code/vitest.workspace.ts`
+- Test files typically follow the pattern `*.test.ts`, `*.test.tsx`, `*.spec.ts`, or `*.spec.tsx`
+
+### Running Tests in Cursor
+
+1. Use Cmd+Shift+P (or Ctrl+Shift+P) and search for "Tasks: Run Task"
+2. Select from the available test tasks:
+   - "Run All Tests" - Runs all tests
+   - "Run Test (Watch Mode)" - Runs tests in watch mode
+   - "Run Focused Test" - Prompts for test name/pattern to run specific tests
+   - "Run Focused Test (Watch Mode)" - Runs specific tests in watch mode
+
+### Vitest Configuration
+
+- Workspace configuration: `./code/vitest.workspace.ts`
+- Command line: `yarn --cwd code test`
+- Root directory for tests: `./code/`
+
+### Test Execution Context
+
+- Tests run from the `code/` directory
+- Use `NODE_OPTIONS=--max_old_space_size=4096` for memory optimization
+- Supports both watch mode and single-run execution
+
+### Focused Test Patterns
+
+When running focused tests, you can use:
+
+- File names: `Button.test.ts`
+- Test descriptions: `"should render correctly"`
+- Directory patterns: `components/`
+- Vitest patterns: `-t "pattern"` for test name matching
+
+### Test Mocking Rules
+
+Follow the spy mocking rules defined in `.cursor/rules/spy-mocking.mdc` for consistent mocking patterns with Vitest.

.vscode/settings.json

@@ -50,5 +50,6 @@
   "typescript.preferences.quoteStyle": "single",
   "typescript.preferGoToSourceDefinition": true,
   "typescript.tsdk": "./code/node_modules/typescript/lib",
-  "vitest.workspaceConfig": "./code/vitest.workspace.ts"
+  "vitest.workspaceConfig": "./code/vitest.workspace.ts",
+  "vitest.rootConfig": "./code/vitest.workspace.ts",
 }

MIGRATION.md

@@ -17,6 +17,7 @@
     - [Vitest Addon (former @storybook/experimental-addon-test): Vitest 2.0 support is dropped](#vitest-addon-former-storybookexperimental-addon-test-vitest-20-support-is-dropped)
     - [Viewport/Backgrounds Addon synchronized configuration and `globals` usage](#viewportbackgrounds-addon-synchronized-configuration-and-globals-usage)
     - [Storysource Addon removed](#storysource-addon-removed)
+    - [Mdx-gfm Addon removed](#mdx-gfm-addon-removed)
   - [API and Component Changes](#api-and-component-changes)
     - [Button Component API Changes](#button-component-api-changes)
     - [Icon System Updates](#icon-system-updates)
@@ -726,6 +727,10 @@ See here for the ways you have to configure addon viewports & backgrounds:
 
 The `@storybook/addon-storysource` addon and the `@storybook/source-loader` package are removed in Storybook 9.0. Instead, Storybook now provides a Code Panel via `@storybook/addon-docs` that offers similar functionality with improved integration and performance.
 
+#### Mdx-gfm Addon removed
+
+The `@storybook/addon-mdx-gfm` addon is removed in Storybook 9.0 since it is no longer needed.
+
 **Migration Steps:**
 
 1. Remove the old addon

code/addons/a11y/src/postinstall.ts

@@ -11,7 +11,10 @@ const $ = execa({
 });
 
 export default async function postinstall(options: PostinstallOptions) {
-  const command = ['storybook', 'automigrate', 'addonA11yAddonTest'];
+  const command = ['storybook', 'automigrate', 'addon-a11y-addon-test'];
+
+  command.push('--loglevel', 'silent');
+  command.push('--skip-doctor');
 
   if (options.yes) {
     command.push('--yes');

code/addons/vitest/src/node/vitest-manager.ts

@@ -9,7 +9,7 @@ import type {
   WorkspaceProject,
 } from 'vitest/node';
 
-import { resolvePathInStorybookCache } from 'storybook/internal/common';
+import { getProjectRoot, resolvePathInStorybookCache } from 'storybook/internal/common';
 import type { StoryId, StoryIndex, StoryIndexEntry } from 'storybook/internal/types';
 
 import { findUp } from 'find-up';
@@ -65,10 +65,13 @@ export class VitestManager {
         : { enabled: false }
     ) as CoverageOptions;
 
-    const vitestWorkspaceConfig = await findUp([
-      ...VITEST_WORKSPACE_FILE_EXTENSION.map((ext) => `vitest.workspace.${ext}`),
-      ...VITEST_CONFIG_FILE_EXTENSIONS.map((ext) => `vitest.config.${ext}`),
-    ]);
+    const vitestWorkspaceConfig = await findUp(
+      [
+        ...VITEST_WORKSPACE_FILE_EXTENSION.map((ext) => `vitest.workspace.${ext}`),
+        ...VITEST_CONFIG_FILE_EXTENSIONS.map((ext) => `vitest.config.${ext}`),
+      ],
+      { stopAt: getProjectRoot() }
+    );
 
     const projectName = 'storybook:' + process.env.STORYBOOK_CONFIG_DIR;
 

code/addons/vitest/src/postinstall-logger.ts

@@ -1,7 +1,5 @@
 import { colors, logger } from 'storybook/internal/node-logger';
 
-import boxen, { type Options } from 'boxen';
-
 const fancy =
   process.platform !== 'win32' || process.env.CI || process.env.TERM === 'xterm-256color';
 
@@ -11,14 +9,16 @@ export const success = colors.green(fancy ? '✔' : '√');
 export const warning = colors.orange(fancy ? '⚠' : '‼');
 export const error = colors.red(fancy ? '✖' : '×');
 
+type Options = Parameters<typeof logger.logBox>[1];
+
 const baseOptions: Options = {
   borderStyle: 'round',
   padding: 1,
 };
 
 export const print = (message: string, options: Options) => {
   logger.line(1);
-  logger.plain(boxen(message, { ...baseOptions, ...options }));
+  logger.logBox(message, { ...baseOptions, ...options });
 };
 
 export const printInfo = (title: string, message: string, options?: Options) =>

code/addons/vitest/src/postinstall.ts

@@ -7,6 +7,7 @@ import {
   JsPackageManagerFactory,
   extractProperFrameworkName,
   formatFileContent,
+  getProjectRoot,
   loadAllPresets,
   loadMainConfig,
   scanAndTransformFiles,
@@ -39,7 +40,10 @@ const EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx', '.cts', '.mts', '.cjs', '.mjs'
 const addonA11yName = '@storybook/addon-a11y';
 
 const findFile = async (basename: string, extensions = EXTENSIONS) =>
-  findUp(extensions.map((ext) => basename + ext));
+  findUp(
+    extensions.map((ext) => basename + ext),
+    { stopAt: getProjectRoot() }
+  );
 
 export default async function postInstall(options: PostinstallOptions) {
   printSuccess(
@@ -56,13 +60,11 @@ export default async function postInstall(options: PostinstallOptions) {
   });
 
   const info = await getStorybookInfo(options);
-  const allDeps = await packageManager.getAllDependencies();
+  const allDeps = packageManager.getAllDependencies();
   // only install these dependencies if they are not already installed
   const dependencies = ['vitest', '@vitest/browser', 'playwright'].filter((p) => !allDeps[p]);
   const vitestVersionSpecifier = await packageManager.getInstalledVersion('vitest');
   const coercedVitestVersion = vitestVersionSpecifier ? coerce(vitestVersionSpecifier) : null;
-  // if Vitest is installed, we use the same version to keep consistency across Vitest packages
-  const vitestVersionToInstall = vitestVersionSpecifier ?? 'latest';
 
   const mainJsPath = serverResolve(resolve(options.configDir, 'main')) as string;
   const config = await readConfig(mainJsPath);
@@ -88,16 +90,11 @@ export default async function postInstall(options: PostinstallOptions) {
           });
 
     if (out.migrateToNextjsVite) {
-      await packageManager.addDependencies(
-        {
-          installAsDevDependencies: true,
-          skipInstall: options.skipInstall,
-          packageJson: await packageManager.readPackageJson(),
-        },
-        [`@storybook/nextjs-vite@${versions['@storybook/nextjs-vite']}`]
-      );
+      await packageManager.addDependencies({ type: 'devDependencies', skipInstall: true }, [
+        '@storybook/nextjs-vite',
+      ]);
 
-      await packageManager.removeDependencies({}, ['@storybook/nextjs']);
+      await packageManager.removeDependencies(['@storybook/nextjs']);
 
       traverse(config._ast, {
         StringLiteral(path) {
@@ -260,27 +257,24 @@ export default async function postInstall(options: PostinstallOptions) {
 
   const versionedDependencies = dependencies.map((p) => {
     if (p.includes('vitest')) {
-      return `${p}@${vitestVersionToInstall ?? 'latest'}`;
+      return vitestVersionSpecifier ? `${p}@${vitestVersionSpecifier}` : p;
     }
 
     return p;
   });
 
   if (versionedDependencies.length > 0) {
-    logger.line(1);
-    logger.plain(`${step} Installing dependencies:`);
-    logger.plain(colors.gray('  ' + versionedDependencies.join(', ')));
-
     await packageManager.addDependencies(
-      {
-        installAsDevDependencies: true,
-        skipInstall: options.skipInstall,
-        packageJson: await packageManager.readPackageJson(),
-      },
+      { type: 'devDependencies', skipInstall: true },
       versionedDependencies
     );
+    logger.line(1);
+    logger.plain(`${step} Installing dependencies:`);
+    logger.plain(colors.gray('  ' + versionedDependencies.join(', ')));
   }
 
+  await packageManager.installDependencies();
+
   logger.line(1);
 
   if (options.skipInstall) {
@@ -489,11 +483,10 @@ export default async function postInstall(options: PostinstallOptions) {
   if (a11yAddon) {
     try {
       logger.plain(`${step} Setting up ${addonA11yName} for @storybook/addon-vitest:`);
-      const command = ['automigrate', 'addonA11yAddonTest'];
+      const command = ['automigrate', 'addon-a11y-addon-test'];
 
-      if (options.yes) {
-        command.push('--yes');
-      }
+      command.push('--loglevel', 'silent');
+      command.push('--yes', '--skip-doctor');
 
       if (options.packageManager) {
         command.push('--package-manager', options.packageManager);
@@ -544,8 +537,8 @@ export default async function postInstall(options: PostinstallOptions) {
 }
 
 async function getStorybookInfo({ configDir, packageManager: pkgMgr }: PostinstallOptions) {
-  const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr });
-  const packageJson = await packageManager.retrievePackageJson();
+  const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr, configDir });
+  const { packageJson } = packageManager.primaryPackageJson;
 
   const config = await loadMainConfig({ configDir, noCache: true });
   const { framework } = config;
@@ -559,8 +552,8 @@ async function getStorybookInfo({ configDir, packageManager: pkgMgr }: Postinsta
     overridePresets: [
       require.resolve('storybook/internal/core-server/presets/common-override-preset'),
     ],
-    configDir,
     packageJson,
+    configDir,
     isCritical: true,
   });
 

code/addons/vitest/src/vitest-plugin/index.ts

@@ -67,17 +67,22 @@ const getStoryGlobsAndFiles = async (
   directories: { configDir: string; workingDir: string }
 ) => {
   const stories = await presets.apply('stories', []);
-  const docs = await presets.apply('docs', {});
-  const indexers = await presets.apply('experimental_indexers', []);
-  const generator = new StoryIndexGenerator(normalizeStories(stories, directories), {
-    ...directories,
-    indexers,
-    docs,
+
+  const normalizedStories = normalizeStories(stories, {
+    configDir: directories.configDir,
+    workingDir: directories.workingDir,
   });
-  await generator.initialize();
+
+  const matchingStoryFiles = await StoryIndexGenerator.findMatchingFilesForSpecifiers(
+    normalizedStories,
+    directories.workingDir
+  );
+
   return {
     storiesGlobs: stories,
-    storiesFiles: generator.storyFileNames(),
+    storiesFiles: StoryIndexGenerator.storyFileNames(
+      new Map(matchingStoryFiles.map(([specifier, cache]) => [specifier, cache]))
+    ),
   };
 };
 

code/addons/vitest/template/stories/basics.stories.ts

@@ -18,6 +18,7 @@ export default {
   globals: {
     sb_theme: 'light',
   },
+  tags: ['!vitest'],
 };
 
 export const Validation = {
@@ -45,8 +46,9 @@ export const Step = {
 };
 
 export const TypeAndClear = {
-  play: async ({ canvasElement, userEvent }) => {
-    const canvas = within(canvasElement);
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.clear(canvas.getByTestId('value'));
+
     await userEvent.type(canvas.getByTestId('value'), 'initial value');
     await userEvent.clear(canvas.getByTestId('value'));
     await userEvent.type(canvas.getByTestId('value'), 'final value');