storybookjs · yannbf · Apr 17, 2025 · Mar 31, 2025 · Mar 31, 2025 · Mar 31, 2025
diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
@@ -1,3 +1,16 @@
+## 9.0.0-alpha.20
+
+- Addon Docs: Update telejson - [#31115](https://github.com/storybookjs/storybook/pull/31115), thanks @valentinpalkovic!
+- AddonVitest: Use framework package, not renderer - [#31133](https://github.com/storybookjs/storybook/pull/31133), thanks @ndelangen!
+- Automigration: Fix consolidated-imports with sub-paths - [#31135](https://github.com/storybookjs/storybook/pull/31135), thanks @ndelangen!
+- Core: Add highlight as public API - [#31134](https://github.com/storybookjs/storybook/pull/31134), thanks @valentinpalkovic!
+- Core: Rename local tests to interactions - [#31141](https://github.com/storybookjs/storybook/pull/31141), thanks @yannbf!
+- Dependencies: Update dependencies - [#31143](https://github.com/storybookjs/storybook/pull/31143), thanks @valentinpalkovic!
+- Interactions: Rename component test panel - [#31130](https://github.com/storybookjs/storybook/pull/31130), thanks @valentinpalkovic!
+- Migration: Improve glob question text - [#31118](https://github.com/storybookjs/storybook/pull/31118), thanks @ndelangen!
+- Refactor: Update panel IDs in vitest addon to use new constants - [#31132](https://github.com/storybookjs/storybook/pull/31132), thanks @ndelangen!
+- Save from Controls: Replace rendererPackage with frameworkPackage - [#31114](https://github.com/storybookjs/storybook/pull/31114), thanks @valentinpalkovic!
+
 ## 9.0.0-alpha.19
 
 - CLI: Fix framework for preview imports - [#31101](https://github.com/storybookjs/storybook/pull/31101), thanks @valentinpalkovic!

diff --git a/MIGRATION.md b/MIGRATION.md
diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
@@ -145,7 +145,7 @@
     "react-dom": "^18.2.0",
     "rehype-external-links": "^3.0.0",
     "rehype-slug": "^6.0.0",
-    "telejson": "^7.2.0",
+    "telejson": "8.0.0",
     "tocbot": "^4.20.1",
     "typescript": "^5.7.3",
     "vite": "^6.2.5"

diff --git a/code/addons/vitest/src/components/TestProviderRender.tsx b/code/addons/vitest/src/components/TestProviderRender.tsx
@@ -16,7 +16,7 @@ import { addons } from 'storybook/manager-api';
 import type { API } from 'storybook/manager-api';
 import { styled } from 'storybook/theming';
 
-import { A11Y_ADDON_ID, A11Y_PANEL_ID, PANEL_ID } from '../constants';
+import { A11Y_ADDON_ID, A11Y_PANEL_ID, COMPONENT_TESTING_PANEL_ID } from '../constants';
 import type { StoreState } from '../types';
 import type { StatusValueToStoryIds } from '../use-test-provider-state';
 import { Description } from './Description';
@@ -124,7 +124,7 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
     ComponentProps<typeof TestStatusIcon>['status'],
     string,
   ] = fatalError
-    ? ['critical', 'Local tests crashed']
+    ? ['critical', 'Component tests crashed']
     : componentTestStatusValueToStoryIds['status-value:error'].length > 0
       ? ['negative', 'Component tests failed']
       : isRunning
@@ -137,7 +137,7 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
     ComponentProps<typeof TestStatusIcon>['status'],
     string,
   ] = fatalError
-    ? ['critical', 'Local tests crashed']
+    ? ['critical', 'Component tests crashed']
     : a11yStatusValueToStoryIds['status-value:error'].length > 0
       ? ['negative', 'Accessibility tests failed']
       : a11yStatusValueToStoryIds['status-value:warning'].length > 0
@@ -153,7 +153,7 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
       <Heading>
         <Info>
           {entry ? (
-            <Title id="testing-module-title">Run local tests</Title>
+            <Title id="testing-module-title">Run component tests</Title>
           ) : (
             <Title
               id="testing-module-title"
@@ -164,12 +164,12 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
               }
             >
               {currentRun.unhandledErrors.length === 1
-                ? 'Local tests completed with an error'
+                ? 'Component tests completed with an error'
                 : currentRun.unhandledErrors.length > 1
-                  ? 'Local tests completed with errors'
+                  ? 'Component tests completed with errors'
                   : fatalError
-                    ? 'Local tests didn’t complete'
-                    : 'Run local tests'}
+                    ? 'Component tests didn’t complete'
+                    : 'Run component tests'}
             </Title>
           )}
           <Description
@@ -264,7 +264,7 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
         <Row>
           <ListItem
             as="label"
-            title="Component tests"
+            title="Interactions"
             icon={entry ? null : <Checkbox type="checkbox" checked disabled />}
           />
           <WithTooltip
@@ -282,7 +282,7 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
               onClick={() => {
                 openPanel({
                   api,
-                  panelId: PANEL_ID,
+                  panelId: COMPONENT_TESTING_PANEL_ID,
                   entryId:
                     componentTestStatusValueToStoryIds['status-value:error'][0] ??
                     componentTestStatusValueToStoryIds['status-value:warning'][0] ??
@@ -336,7 +336,7 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
                           : currentRun.coverageSummary
                             ? 'View coverage report'
                             : fatalError
-                              ? 'Local tests crashed'
+                              ? 'Component tests crashed'
                               : 'Run tests to calculate coverage'
                   }
                 />

diff --git a/code/addons/vitest/src/constants.ts b/code/addons/vitest/src/constants.ts
@@ -2,14 +2,16 @@ import type { StoreOptions } from 'storybook/internal/types';
 
 import type { StoreState } from './types';
 
+export { PANEL_ID as COMPONENT_TESTING_PANEL_ID } from '../../../core/src/component-testing/constants';
+export {
+  PANEL_ID as A11Y_PANEL_ID,
+  ADDON_ID as A11Y_ADDON_ID,
+} from '../../../addons/a11y/src/constants';
+
 export const ADDON_ID = 'storybook/test';
 export const TEST_PROVIDER_ID = `${ADDON_ID}/test-provider`;
-export const PANEL_ID = `${ADDON_ID}/panel`;
 export const STORYBOOK_ADDON_TEST_CHANNEL = 'STORYBOOK_ADDON_TEST_CHANNEL';
 
-export const A11Y_ADDON_ID = 'storybook/a11y';
-export const A11Y_PANEL_ID = `${A11Y_ADDON_ID}/panel`;
-
 export const TUTORIAL_VIDEO_LINK = 'https://youtu.be/Waht9qq7AoA';
 export const DOCUMENTATION_LINK = 'writing-tests/test-addon';
 export const DOCUMENTATION_FATAL_ERROR_LINK = `${DOCUMENTATION_LINK}#what-happens-if-vitest-itself-has-an-error`;
@@ -19,11 +21,14 @@ export const COVERAGE_DIRECTORY = 'coverage';
 export const SUPPORTED_FRAMEWORKS = [
   '@storybook/nextjs',
   '@storybook/nextjs-vite',
+  '@storybook/react-vite',
+  '@storybook/svelte-vite',
+  '@storybook/vue3-vite',
+  '@storybook/html-vite',
+  '@storybook/web-components-vite',
   '@storybook/sveltekit',
 ];
 
-export const SUPPORTED_RENDERERS = ['@storybook/react', '@storybook/svelte', '@storybook/vue3'];
-
 export const storeOptions = {
   id: ADDON_ID,
   initialState: {

diff --git a/code/addons/vitest/src/manager.tsx b/code/addons/vitest/src/manager.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { type Addon_TestProviderType, Addon_TypesEnum } from 'storybook/internal/types';
+import { Addon_TypesEnum } from 'storybook/internal/types';
 
 import {
   a11yStatusStore,
@@ -13,7 +13,7 @@ import { addons } from 'storybook/manager-api';
 import { GlobalErrorContext, GlobalErrorModal } from './components/GlobalErrorModal';
 import { SidebarContextMenu } from './components/SidebarContextMenu';
 import { TestProviderRender } from './components/TestProviderRender';
-import { A11Y_PANEL_ID, ADDON_ID, PANEL_ID, TEST_PROVIDER_ID } from './constants';
+import { A11Y_PANEL_ID, ADDON_ID, COMPONENT_TESTING_PANEL_ID, TEST_PROVIDER_ID } from './constants';
 import { useTestProvider } from './use-test-provider-state';
 
 addons.register(ADDON_ID, (api) => {
@@ -24,7 +24,7 @@ addons.register(ADDON_ID, (api) => {
       api.togglePanel(true);
     };
     componentTestStatusStore.onSelect(() => {
-      openPanel(PANEL_ID);
+      openPanel(COMPONENT_TESTING_PANEL_ID);
     });
     a11yStatusStore.onSelect(() => {
       openPanel(A11Y_PANEL_ID);

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
@@ -26,7 +26,7 @@ import { coerce, satisfies } from 'semver';
 import { dedent } from 'ts-dedent';
 
 import { type PostinstallOptions } from '../../../lib/cli-storybook/src/add';
-import { SUPPORTED_FRAMEWORKS, SUPPORTED_RENDERERS } from './constants';
+import { SUPPORTED_FRAMEWORKS } from './constants';
 import { printError, printInfo, printSuccess, printWarning, step } from './postinstall-logger';
 import { loadTemplate, updateConfigFile, updateWorkspaceFile } from './updateVitestFile';
 import { getAddonNames } from './utils';
@@ -112,9 +112,7 @@ export default async function postInstall(options: PostinstallOptions) {
     ? info.frameworkPackageName === '@storybook/nextjs'
       ? '@storybook/nextjs-vite'
       : info.frameworkPackageName
-    : info.rendererPackageName && SUPPORTED_RENDERERS.includes(info.rendererPackageName)
-      ? info.rendererPackageName
-      : null;
+    : null;
 
   const isRendererSupported = !!annotationsImport;
 

diff --git a/code/addons/vitest/src/vitest-plugin/setup-file.test.ts b/code/addons/vitest/src/vitest-plugin/setup-file.test.ts
@@ -27,7 +27,7 @@ describe('modifyErrorMessage', () => {
 
     expect(task.result?.errors?.[0].message).toMatchInlineSnapshot(`
       "
-      [34mClick to debug the error directly in Storybook: http://localhost:6006/?path=/story/my-story&addonPanel=storybook/test/panel[39m
+      [34mClick to debug the error directly in Storybook: http://localhost:6006/?path=/story/my-story&addonPanel=storybook/interactions/panel[39m
 
       Original error message"
     `);

diff --git a/code/addons/vitest/src/vitest-plugin/setup-file.ts b/code/addons/vitest/src/vitest-plugin/setup-file.ts
@@ -6,6 +6,8 @@ import type { RunnerTask } from 'vitest';
 
 import { Channel } from 'storybook/internal/channels';
 
+import { COMPONENT_TESTING_PANEL_ID } from '../constants';
+
 declare global {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore - The module is augmented elsewhere but we need to duplicate it to avoid issues in no-link mode.
@@ -30,7 +32,7 @@ export const modifyErrorMessage = ({ task }: { task: Task }) => {
   ) {
     const currentError = task.result.errors[0];
     const storybookUrl = import.meta.env.__STORYBOOK_URL__;
-    const storyUrl = `${storybookUrl}/?path=/story/${meta.storyId}&addonPanel=storybook/test/panel`;
+    const storyUrl = `${storybookUrl}/?path=/story/${meta.storyId}&addonPanel=${COMPONENT_TESTING_PANEL_ID}`;
     currentError.message = `\n\x1B[34mClick to debug the error directly in Storybook: ${storyUrl}\x1B[39m\n\n${currentError.message}`;
   }
 };

diff --git a/code/core/package.json b/code/core/package.json
@@ -148,6 +148,11 @@
       "import": "./dist/highlight/index.js",
       "require": "./dist/highlight/index.cjs"
     },
+    "./highlight": {
+      "types": "./dist/highlight/index.d.ts",
+      "import": "./dist/highlight/index.js",
+      "require": "./dist/highlight/index.cjs"
+    },
     "./internal/highlight/preview": {
       "types": "./dist/highlight/preview.d.ts",
       "import": "./dist/highlight/preview.js",
@@ -464,6 +469,9 @@
       "internal/highlight": [
         "./dist/highlight/index.d.ts"
       ],
+      "highlight": [
+        "./dist/highlight/index.d.ts"
+      ],
       "internal/highlight/preview": [
         "./dist/highlight/preview.d.ts"
       ],
@@ -760,7 +768,7 @@
     "store2": "^2.14.2",
     "strip-ansi": "^7.1.0",
     "strip-json-comments": "^5.0.1",
-    "telejson": "8.0.0--canary.106.377d63b.0",
+    "telejson": "8.0.0",
     "tiny-invariant": "^1.3.1",
     "tinyspy": "^3.0.2",
     "ts-dedent": "^2.0.0",

diff --git a/code/core/scripts/entries.ts b/code/core/scripts/entries.ts
@@ -29,7 +29,7 @@ export const getEntries = (cwd: string) => {
     define('src/outline/index.ts', ['browser', 'node'], true, ['react'], [], [], true),
     define('src/outline/preview.ts', ['browser', 'node'], true, ['react'], [], [], true),
 
-    define('src/highlight/index.ts', ['browser', 'node'], true, ['react'], [], [], false),
+    define('src/highlight/index.ts', ['browser', 'node'], true, ['react'], [], [], true),
     define('src/highlight/preview.ts', ['browser', 'node'], true, ['react'], [], [], true),
 
     define('src/actions/index.ts', ['browser', 'node'], true, ['react'], [], [], true),

diff --git a/code/core/src/component-testing/components/EmptyState.tsx b/code/core/src/component-testing/components/EmptyState.tsx
@@ -42,10 +42,10 @@ export const Empty = () => {
   return (
     <div>
       <EmptyTabContent
-        title="Component testing"
+        title="Interactions"
         description={
           <>
-            Component tests allow you to verify the functional aspects of UIs. Write a play function
+            Interactions allow you to verify the functional aspects of UIs. Write a play function
             for your story and you&apos;ll see it run here.
           </>
         }

diff --git a/code/core/src/component-testing/components/Interaction.tsx b/code/core/src/component-testing/components/Interaction.tsx
@@ -229,6 +229,8 @@ export const Interaction = ({
           <RowLabel aria-label="Render step" call={call} disabled>
             {call.status === CallStates.ERROR ? (
               <StatusIcon status={CallStates.ERROR} />
+            ) : call.status === CallStates.ACTIVE ? (
+              <StatusIcon status={CallStates.ACTIVE} />
             ) : (
               <RenderIcon />
             )}
@@ -240,7 +242,7 @@ export const Interaction = ({
             <WithTooltip
               trigger="hover"
               hasChrome={false}
-              tooltip={<Note note="Render is the first step of all component tests" />}
+              tooltip={<Note note="Render is the first step of all interactions" />}
             >
               <RenderLockIcon />
             </WithTooltip>

diff --git a/code/core/src/component-testing/components/PanelTitle.tsx b/code/core/src/component-testing/components/PanelTitle.tsx
@@ -16,7 +16,7 @@ export function PanelTitle() {
 
   return (
     <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-      <span>Component tests</span>
+      <span>Interactions</span>
       {interactionsCount && !isErrored && !hasException ? (
         <Badge compact status={selectedPanel === PANEL_ID ? 'active' : 'neutral'}>
           {interactionsCount}

diff --git a/code/core/src/component-testing/components/TestDiscrepancyMessage.tsx b/code/core/src/component-testing/components/TestDiscrepancyMessage.tsx
@@ -48,7 +48,7 @@ export const TestDiscrepancyMessage = ({ browserTestStatus }: TestDiscrepancyMes
 
   return (
     <Wrapper>
-      This component test passed in {passed}, but the tests failed in {failed}.{' '}
+      This interaction test passed in {passed}, but the tests failed in {failed}.{' '}
       <Link href={docsUrl} target="_blank" withArrow>
         Learn what could cause this
       </Link>

diff --git a/code/core/src/component-testing/constants.ts b/code/core/src/component-testing/constants.ts
@@ -1,4 +1,4 @@
-export const ADDON_ID = 'storybook/component-tests';
+export const ADDON_ID = 'storybook/interactions';
 export const PANEL_ID = `${ADDON_ID}/panel`;
 
 export const DOCUMENTATION_LINK = 'writing-tests/test-addon';

diff --git a/code/core/src/core-server/utils/get-new-story-file.test.ts b/code/core/src/core-server/utils/get-new-story-file.test.ts
@@ -34,7 +34,45 @@ describe('get-new-story-file', () => {
 
     expect(exportedStoryName).toBe('Default');
     expect(storyFileContent).toMatchInlineSnapshot(`
-      "import type { Meta, StoryObj } from '@storybook/react';
+      "import type { Meta, StoryObj } from '@storybook/nextjs';
+
+      import { Page } from './Page';
+
+      const meta = {
+        component: Page,
+      } satisfies Meta<typeof Page>;
+
+      export default meta;
+
+      type Story = StoryObj<typeof meta>;
+
+      export const Default: Story = {};"
+    `);
+    expect(storyFilePath).toBe(join(__dirname, 'src', 'components', 'Page.stories.tsx'));
+  });
+
+  it('should create a new story file (TypeScript) with a framework package using the pnp workaround', async () => {
+    const { exportedStoryName, storyFileContent, storyFilePath } = await getNewStoryFile(
+      {
+        componentFilePath: 'src/components/Page.tsx',
+        componentExportName: 'Page',
+        componentIsDefaultExport: false,
+        componentExportCount: 1,
+      },
+      {
+        presets: {
+          apply: (val: string) => {
+            if (val === 'framework') {
+              return Promise.resolve('path/to/@storybook/react-vite');
+            }
+          },
+        },
+      } as any
+    );
+
+    expect(exportedStoryName).toBe('Default');
+    expect(storyFileContent).toMatchInlineSnapshot(`
+      "import type { Meta, StoryObj } from '@storybook/react-vite';
 
       import { Page } from './Page';
 

diff --git a/code/core/src/core-server/utils/get-new-story-file.ts b/code/core/src/core-server/utils/get-new-story-file.ts
@@ -3,6 +3,7 @@ import { readFile } from 'node:fs/promises';
 import { basename, dirname, extname, join } from 'node:path';
 
 import {
+  extractProperFrameworkName,
   extractProperRendererNameFromFramework,
   findConfigFile,
   getFrameworkName,
@@ -30,10 +31,7 @@ export async function getNewStoryFile(
   const cwd = getProjectRoot();
 
   const frameworkPackageName = await getFrameworkName(options);
-  const rendererName = await extractProperRendererNameFromFramework(frameworkPackageName);
-  const rendererPackage = Object.entries(rendererPackages).find(
-    ([, value]) => value === rendererName
-  )?.[0];
+  const sanitizedFrameworkPackageName = extractProperFrameworkName(frameworkPackageName);
 
   const base = basename(componentFilePath);
   const extension = extname(componentFilePath);
@@ -67,12 +65,12 @@ export async function getNewStoryFile(
     });
   } else {
     storyFileContent =
-      isTypescript && rendererPackage
+      isTypescript && frameworkPackageName
         ? await getTypeScriptTemplateForNewStoryFile({
             basenameWithoutExtension,
             componentExportName,
             componentIsDefaultExport,
-            rendererPackage,
+            frameworkPackage: sanitizedFrameworkPackageName,
             exportedStoryName,
           })
         : await getJavaScriptTemplateForNewStoryFile({