Release: Prerelease 10.3.0-alpha.17

.github/workflows/generate-sandboxes.yml

@@ -2,7 +2,7 @@ name: Generate and publish sandboxes
 
 on:
   schedule:
-    - cron: "2 2 */1 * *"
+    - cron: '2 2 */1 * *'
   workflow_dispatch:
   # To test fixes on push rather than wait for the scheduling, do the following:
   # 1. Uncomment the lines below and add your branch.
@@ -14,8 +14,9 @@ on:
   # 4. 👉 DON'T FORGET TO UNDO THE STEPS BEFORE YOU MERGE YOUR CHANGES!
 
 env:
-  YARN_ENABLE_IMMUTABLE_INSTALLS: "false"
-  CLEANUP_SANDBOX_NODE_MODULES: "true"
+  YARN_ENABLE_IMMUTABLE_INSTALLS: 'false'
+  CLEANUP_SANDBOX_NODE_MODULES: 'true'
+  NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
 
 defaults:
   run:
@@ -50,7 +51,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version-file: ".nvmrc"
+          node-version-file: '.nvmrc'
 
       - name: Setup git user
         run: |
@@ -119,7 +120,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version-file: ".nvmrc"
+          node-version-file: '.nvmrc'
 
       - name: Setup git user
         run: |

CHANGELOG.prerelease.md

@@ -1,3 +1,10 @@
+## 10.3.0-alpha.17
+
+- Core: Correctly fallback to first detected vitest config file - [#33865](https://github.com/storybookjs/storybook/pull/33865), thanks @yannbf!
+- ESLint-plugin: Disallow extra properties in eslint plugin rule options - [#32056](https://github.com/storybookjs/storybook/pull/32056), thanks @andreww2012!
+- ESLint: bail out config setup if eslint-plugin-storybook is already imported - [#34089](https://github.com/storybookjs/storybook/pull/34089), thanks @copilot-swe-agent!
+- Revert "Toolbar: Remove extra toolbar divider when zoom controls not shown" - [#34099](https://github.com/storybookjs/storybook/pull/34099), thanks @valentinpalkovic!
+
 ## 10.3.0-alpha.16
 
 - A11y: Underline MDX links for WCAG SC 1.4.1 compliance - [#33139](https://github.com/storybookjs/storybook/pull/33139), thanks @NikhilChowdhury27!

code/core/src/cli/eslintPlugin.test.ts

@@ -583,6 +583,53 @@ describe('configureEslintPlugin', () => {
         export default someCustomConfig({}, [{}]);"
       `);
     });
+
+    it('should not modify config if eslint-plugin-storybook is already imported', async () => {
+      const mockPackageManager = {
+        getAllDependencies: vi.fn(),
+      } satisfies Partial<JsPackageManager>;
+
+      const mockConfigFile = dedent`
+        import sb from 'eslint-plugin-storybook';
+        export default [
+          ...sb.configs['flat/recommended'],
+        ];
+      `;
+
+      vi.mocked(readFile).mockResolvedValue(mockConfigFile);
+
+      await configureEslintPlugin({
+        eslintConfigFile: 'eslint.config.js',
+        packageManager: mockPackageManager as any,
+        isFlatConfig: true,
+      });
+      expect(vi.mocked(writeFile).mock.calls).toHaveLength(0);
+    });
+
+    it('should not modify config if eslint-plugin-storybook is already dynamically imported', async () => {
+      const mockPackageManager = {
+        getAllDependencies: vi.fn(),
+      } satisfies Partial<JsPackageManager>;
+
+      const mockConfigFile = dedent`
+        import { includeIgnoreFile } from '@eslint/compat';
+        import { FlatCompat } from '@eslint/eslintrc';
+        import { composer } from 'eslint-flat-config-utils';
+
+        export default composer(
+          import('eslint-plugin-storybook').then((m) => m.default.configs['flat/recommended']),
+        );
+      `;
+
+      vi.mocked(readFile).mockResolvedValue(mockConfigFile);
+
+      await configureEslintPlugin({
+        eslintConfigFile: 'eslint.config.js',
+        packageManager: mockPackageManager as any,
+        isFlatConfig: true,
+      });
+      expect(vi.mocked(writeFile).mock.calls).toHaveLength(0);
+    });
   });
 });
 

code/core/src/cli/eslintPlugin.ts

@@ -55,6 +55,35 @@ function unwrapTSExpression(expr: any): t.Expression | null | undefined {
 export const configureFlatConfig = async (code: string) => {
   const ast = babelParse(code);
 
+  // Bail out if eslint-plugin-storybook is already imported (static or dynamic) to avoid
+  // referencing an undefined variable or duplicating the config spread.
+  // Some configs use dynamic import() expressions (e.g. via eslint-flat-config-utils).
+  let alreadyHasStorybookImport = false;
+  traverse(ast, {
+    ImportDeclaration(path) {
+      if (path.node.source.value === 'eslint-plugin-storybook') {
+        alreadyHasStorybookImport = true;
+        path.stop();
+      }
+    },
+    CallExpression(path) {
+      // Dynamic import: import('eslint-plugin-storybook')
+      // Babel represents this as a CallExpression with callee.type === 'Import'
+      if (
+        t.isImport(path.node.callee) &&
+        path.node.arguments.length > 0 &&
+        t.isStringLiteral(path.node.arguments[0]) &&
+        path.node.arguments[0].value === 'eslint-plugin-storybook'
+      ) {
+        alreadyHasStorybookImport = true;
+        path.stop();
+      }
+    },
+  });
+  if (alreadyHasStorybookImport) {
+    return code;
+  }
+
   let tsEslintLocalName = '';
   let eslintDefineConfigLocalName = '';
   let eslintConfigExpression: any = null;
@@ -267,6 +296,9 @@ export async function configureEslintPlugin({
         logger.debug(`Detected flat config at ${eslintConfigFile}`);
         const code = await readFile(eslintConfigFile, { encoding: 'utf8' });
         const output = await configureFlatConfig(code);
+        if (output === code) {
+          return;
+        }
         await writeFile(eslintConfigFile, output);
       } else {
         const eslint = await readConfig(eslintConfigFile);

code/core/src/core-server/server-channel/ghost-stories-channel.test.ts

@@ -432,7 +432,7 @@ describe('ghostStoriesChannel', () => {
           runError: 'Failed to analyze components',
           stats: {
             globMatchCount: 0,
-            candidateAnalysisDuration: 0,
+            candidateAnalysisDuration: expect.any(Number),
             totalRunDuration: expect.any(Number),
             analyzedCount: 0,
             avgComplexity: 0,
@@ -516,12 +516,12 @@ describe('ghostStoriesChannel', () => {
           runError: 'JSON report not found',
           stats: {
             globMatchCount: 5,
-            candidateAnalysisDuration: 0,
-            totalRunDuration: 0,
+            candidateAnalysisDuration: expect.any(Number),
+            totalRunDuration: expect.any(Number),
             analyzedCount: 2,
             avgComplexity: 1.0,
             candidateCount: 1,
-            testRunDuration: 0,
+            testRunDuration: expect.any(Number),
           },
         });
       });
@@ -569,12 +569,12 @@ describe('ghostStoriesChannel', () => {
           runError: 'Startup Error',
           stats: {
             globMatchCount: 5,
-            candidateAnalysisDuration: 0,
-            totalRunDuration: 0,
+            candidateAnalysisDuration: expect.any(Number),
+            totalRunDuration: expect.any(Number),
             analyzedCount: 2,
             avgComplexity: 1.0,
             candidateCount: 1,
-            testRunDuration: 0,
+            testRunDuration: expect.any(Number),
           },
         });
       });

code/core/src/manager/components/preview/tools/menu.tsx

@@ -11,7 +11,6 @@ import type { Combo } from 'storybook/manager-api';
 const menuMapper = ({ api, state }: Combo) => ({
   isVisible: api.getIsNavShown(),
   singleStory: state.singleStory,
-  viewMode: state.viewMode,
   toggle: () => api.toggleNav(),
 });
 
@@ -23,7 +22,7 @@ export const menuTool: Addon_BaseType = {
   match: ({ viewMode }) => ['story', 'docs'].includes(viewMode),
   render: () => (
     <Consumer filter={menuMapper}>
-      {({ isVisible, toggle, singleStory, viewMode }) =>
+      {({ isVisible, toggle, singleStory }) =>
         !singleStory &&
         !isVisible && (
           <>
@@ -36,7 +35,7 @@ export const menuTool: Addon_BaseType = {
             >
               <MenuIcon />
             </Button>
-            {viewMode === 'story' && <Separator />}
+            <Separator />
           </>
         )
       }

code/lib/eslint-plugin/src/rules/no-uninstalled-addons.ts

@@ -59,6 +59,7 @@ export default createStorybookRule({
             },
           },
         },
+        additionalProperties: false,
       },
     ],
   },

code/package.json

@@ -214,5 +214,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "10.3.0-alpha.17"
 }

docs/_snippets/addon-mcp-add.md

@@ -0,0 +1,11 @@
+```shell renderer="common" language="js" packageManager="npm"
+npx storybook add @storybook/addon-mcp
+```
+
+```shell renderer="common" language="js" packageManager="pnpm"
+pnpm exec storybook add @storybook/addon-mcp
+```
+
+```shell renderer="common" language="js" packageManager="yarn"
+yarn exec storybook add @storybook/addon-mcp
+```

docs/_snippets/addon-mcp-options.md

@@ -0,0 +1,86 @@
+```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3"
+export default {
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    // ... your existing addons
+    {
+      name: '@storybook/addon-mcp',
+      options: {
+        toolsets: {
+          dev: false,
+        },
+      },
+    },
+  ],
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    // ... your existing addons
+    {
+      name: '@storybook/addon-mcp',
+      options: {
+        toolsets: {
+          dev: false,
+        },
+      },
+    },
+  ],
+};
+
+export default config;
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    // ... your existing addons
+    {
+      name: '@storybook/addon-mcp',
+      options: {
+        toolsets: {
+          dev: false,
+        },
+      },
+    },
+  ],
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    // ... your existing addons
+    {
+      name: '@storybook/addon-mcp',
+      options: {
+        toolsets: {
+          dev: false,
+        },
+      },
+    },
+  ],
+});
+```