Merge remote-tracking branch 'refs/remotes/origin/vitest-integration' into kasper/render-agnostic

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 8.2.7
+
+- CPC: Fix type usage in renderers - [#28745](https://github.com/storybookjs/storybook/pull/28745), thanks @ndelangen!
+- Core: Introduce run over play in portable stories, and revert back play changes of 8.2 - [#28764](https://github.com/storybookjs/storybook/pull/28764), thanks @kasperpeulen!
+
 ## 8.2.6
 
 - CPC: Fix missing exports for addon-kit - [#28691](https://github.com/storybookjs/storybook/pull/28691), thanks @ndelangen!

code/core/src/manager-api/modules/shortcuts.ts

@@ -1,6 +1,11 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { global } from '@storybook/global';
-import { FORCE_REMOUNT, PREVIEW_KEYDOWN } from '@storybook/core/core-events';
+import {
+  FORCE_REMOUNT,
+  PREVIEW_KEYDOWN,
+  STORIES_COLLAPSE_ALL,
+  STORIES_EXPAND_ALL,
+} from '@storybook/core/core-events';
 
 import type { ModuleFn } from '../lib/types';
 
@@ -356,11 +361,11 @@ export const init: ModuleFn = ({ store, fullAPI, provider }) => {
           break;
         }
         case 'collapseAll': {
-          fullAPI.collapseAll();
+          fullAPI.emit(STORIES_COLLAPSE_ALL);
           break;
         }
         case 'expandAll': {
-          fullAPI.expandAll();
+          fullAPI.emit(STORIES_EXPAND_ALL);
           break;
         }
         case 'remount': {

code/core/src/manager/components/preview/Iframe.stories.tsx

@@ -60,17 +60,23 @@ WorkingStory.parameters = {
   chromatic: { disable: true },
 };
 
-export const MissingStory = () => (
+export const MissingStory = {
-  <IFrame
+  render: () => (
-    active
+    <IFrame
-    id="iframe"
+      active
-    title="Missing"
+      id="iframe"
-    src="/iframe.html?id=missing"
+      title="Missing"
-    allowFullScreen
+      src="/iframe.html?id=missing"
-    style={style}
+      allowFullScreen
-    scale={1.0}
+      style={style}
-  />
+      scale={1.0}
-);
+    />
+  ),
+  parameters: {
+    // Raise the threshold to ignore monospace font inconsistencies
+    chromatic: { diffThreshold: 0.65 },
+  },
+};
 
 export const PreparingStory = () => (
   <IFrame

code/core/src/manager/container/Menu.tsx

@@ -6,6 +6,7 @@ import type { API, State } from '@storybook/core/manager-api';
 import { shortcutToHumanString } from '@storybook/core/manager-api';
 import { styled, useTheme } from '@storybook/core/theming';
 import { CheckIcon, InfoIcon, ShareAltIcon, WandIcon } from '@storybook/icons';
+import { STORIES_COLLAPSE_ALL } from '@storybook/core/core-events';
 
 const focusableUIElements = {
   storySearchField: 'storybook-explorer-searchfield',
@@ -222,7 +223,7 @@ export const useMenu = (
     () => ({
       id: 'collapse',
       title: 'Collapse all',
-      onClick: () => api.collapseAll(),
+      onClick: () => api.emit(STORIES_COLLAPSE_ALL),
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.collapseAll} /> : null,
     }),
     [api, enableShortcuts, shortcutKeys]

code/core/src/preview-api/modules/store/csf/portable-stories.test.ts

@@ -127,7 +127,7 @@ describe('composeStory', () => {
         return context.canvas;
       },
     });
-    await composedStory.play({ canvasElement: null });
+    await composedStory.play?.({ canvasElement: null });
     expect(spy).toHaveBeenCalledWith(
       expect.objectContaining({
         args: {

docs/api/portable-stories/portable-stories-jest.mdx

@@ -18,6 +18,10 @@ sidebar:
 
   Normally, Storybook composes a story and its [annotations](#annotations) automatically, as part of the [story pipeline](#story-pipeline). When using stories in Jest tests, you must handle the story pipeline yourself, which is what the [`composeStories`](#composestories) and [`composeStory`](#composestory) functions enable.
 
+  <Callout variant="info">
+    The API specified here is available in Storybook `8.2.7` and up. If you're using an older version of Storybook, you can upgrade to the latest version (`npx storybook@latest upgrade`) to use this API. If you're unable to upgrade, you can use previous API, which uses the `.play()` method instead of `.run()`, but is otherwise identical.
+  </Callout>
+  
   <If renderer="react">
     <Callout variant="info">
       **Using `Next.js`?** You need to do three things differently when using portable stories in Jest with Next.js projects:

docs/api/portable-stories/portable-stories-vitest.mdx

@@ -22,6 +22,10 @@ sidebar:
 
   Normally, Storybook composes a story and its [annotations](#annotations) automatically, as part of the [story pipeline](#story-pipeline). When using stories in Vitest tests, you must handle the story pipeline yourself, which is what the [`composeStories`](#composestories) and [`composeStory`](#composestory) functions enable.
 
+  <Callout variant="info">
+    The API specified here is available in Storybook `8.2.7` and up. If you're using an older version of Storybook, you can upgrade to the latest version (`npx storybook@latest upgrade`) to use this API. If you're unable to upgrade, you can use previous API, which uses the `.play()` method instead of `.run()`, but is otherwise identical.
+  </Callout>
+
   <If renderer="react">
     <Callout variant="warning">
       **Using `Next.js`?** Next.js requires specific configuration that is only available in [Jest](./portable-stories-jest.mdx). The portable stories API is not supported in Next.js with Vitest.