Merge branch 'next' into doc/contributingmd

CHANGELOG.prerelease.md

@@ -1,3 +1,13 @@
+## 8.0.0-beta.3
+
+- Addon-actions: Add spy to action for explicit actions - [#26033](https://github.com/storybookjs/storybook/pull/26033), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- Addon-themes: Make type generic less strict - [#26042](https://github.com/storybookjs/storybook/pull/26042), thanks [@yannbf](https://github.com/yannbf)!
+- Addon-docs: Fix pnpm+Vite failing to build with `@storybook/theming` Rollup error - [#26024](https://github.com/storybookjs/storybook/pull/26024), thanks [@JReinhold](https://github.com/JReinhold)!
+- CLI: Refactor to add autoblockers - [#25934](https://github.com/storybookjs/storybook/pull/25934), thanks [@ndelangen](https://github.com/ndelangen)!
+- Codemod: Migrate to test package - [#25958](https://github.com/storybookjs/storybook/pull/25958), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- Portable stories: Only provide a play function wrapper if it exists - [#25974](https://github.com/storybookjs/storybook/pull/25974), thanks [@yannbf](https://github.com/yannbf)!
+- Test: Bump user-event to 14.5.2 - [#25889](https://github.com/storybookjs/storybook/pull/25889), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+
 ## 8.0.0-beta.2
 
 - Core: Fix boolean `true` args in URL getting ignored - [#25950](https://github.com/storybookjs/storybook/pull/25950), thanks [@JReinhold](https://github.com/JReinhold)!

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

code/addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

code/addons/essentials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",

code/addons/gfm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

code/addons/highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",

code/addons/interactions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",

code/addons/jest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",

code/addons/links/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "addon",

code/addons/measure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",

code/addons/outline/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",

code/addons/storysource/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",

code/addons/themes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",

code/addons/toolbars/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",

code/addons/viewport/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",

code/builders/builder-manager/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-manager",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Storybook manager builder",
   "keywords": [
     "storybook"

code/builders/builder-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "A plugin to run and build Storybooks with Vite",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
   "bugs": {

code/builders/builder-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"

code/frameworks/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",

code/frameworks/ember/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember",
   "bugs": {

code/frameworks/html-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html-vite",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/html-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html-webpack5",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/nextjs",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Storybook for Next.js",
   "keywords": [
     "storybook",
@@ -128,7 +128,7 @@
     "@types/babel__preset-env": "^7",
     "@types/loader-utils": "^2.0.5",
     "@types/react-refresh": "^0",
-    "next": "^14.0.2",
+    "next": "^14.1.0",
     "typescript": "^5.3.2",
     "webpack": "^5.65.0"
   },

code/frameworks/nextjs/src/images/next-image.tsx

@@ -1,7 +1,8 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore import is aliased in webpack config
-import OriginalNextImage from 'sb-original/next/image';
+import * as NextImageNamespace from 'sb-original/next/image';
 import type * as _NextImage from 'next/image';
+
 import React from 'react';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -11,6 +12,8 @@ import { ImageContext as ImageContextValue } from '@storybook/nextjs/dist/image-
 import { type ImageContext as ImageContextType } from '../image-context';
 import { defaultLoader } from './next-image-default-loader';
 
+const OriginalNextImage = NextImageNamespace.default;
+const { getImageProps: originalGetImageProps } = NextImageNamespace;
 const ImageContext = ImageContextValue as typeof ImageContextType;
 
 const MockedNextImage = React.forwardRef<HTMLImageElement, _NextImage.ImageProps>(
@@ -30,4 +33,7 @@ const MockedNextImage = React.forwardRef<HTMLImageElement, _NextImage.ImageProps
 
 MockedNextImage.displayName = 'NextImage';
 
+export const getImageProps = (props: _NextImage.ImageProps) =>
+  originalGetImageProps?.({ loader: defaultLoader, ...props });
+
 export default MockedNextImage;

code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts

@@ -92,6 +92,8 @@ async function loaderTransform(this: any, parentTrace: any, source?: string, inp
     swcCacheDir,
     relativeFilePathFromRoot,
     serverComponents,
+    // @ts-expect-error Relevant for Next.js < 14.1
+    // TODO: Remove this when Next.js < 14.1 is no longer supported
     isReactServerLayer,
   });
 

code/frameworks/nextjs/template/stories_nextjs-default-js/GetImageProps.stories.jsx

@@ -0,0 +1,33 @@
+import { getImageProps } from 'next/image';
+import React from 'react';
+
+import Accessibility from '../../assets/accessibility.svg';
+import Testing from '../../assets/testing.png';
+
+// referenced from https://nextjs.org/docs/pages/api-reference/components/image#theme-detection-picture
+const Component = (props) => {
+  const {
+    props: { srcSet: dark },
+  } = getImageProps({ src: Accessibility, ...props });
+  const {
+    // capture rest on one to spread to img as default; it doesn't matter which barring art direction
+    props: { srcSet: light, ...rest },
+  } = getImageProps({ src: Testing, ...props });
+
+  return (
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcSet={dark} />
+      <source media="(prefers-color-scheme: light)" srcSet={light} />
+      <img {...rest} />
+    </picture>
+  );
+};
+
+export default {
+  component: Component,
+  args: {
+    alt: 'getImageProps Example',
+  },
+};
+
+export const Default = {};

code/frameworks/preact-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact-vite",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/preact-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact-webpack5",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"

code/frameworks/react-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-vite",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/react-vite/src/types.ts

@@ -56,7 +56,7 @@ type TypescriptOptions = TypescriptOptionsBase & {
  */
 export type StorybookConfig = Omit<
   StorybookConfigBase,
-  keyof StorybookConfigVite | keyof StorybookConfigFramework
+  keyof StorybookConfigVite | keyof StorybookConfigFramework | 'typescript'
 > &
   StorybookConfigVite &
   StorybookConfigFramework & {

code/frameworks/react-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-webpack5",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/server-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server-webpack5",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/svelte-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte-vite",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/svelte-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte-webpack5",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/sveltekit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/sveltekit",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Storybook for SvelteKit",
   "keywords": [
     "storybook",

code/frameworks/vue3-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3-vite",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/vue3-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3-webpack5",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/web-components-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components-vite",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/web-components-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components-webpack5",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
   "keywords": [
     "lit",