Merge branch 'next' into norbert/fix-caret-in-upgrade

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)!

MIGRATION.md

@@ -127,6 +127,7 @@
     - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
     - [Changed decorator order between preview.js and addons/frameworks](#changed-decorator-order-between-previewjs-and-addonsframeworks)
     - [Dark mode detection](#dark-mode-detection)
+    - [`addons.setConfig` should now be imported from `@storybook/manager-api`.](#addonssetconfig-should-now-be-imported-from-storybookmanager-api)
   - [7.0 core addons changes](#70-core-addons-changes)
     - [Removed auto injection of @storybook/addon-actions decorator](#removed-auto-injection-of-storybookaddon-actions-decorator)
     - [Addon-backgrounds: Removed deprecated grid parameter](#addon-backgrounds-removed-deprecated-grid-parameter)
@@ -468,7 +469,10 @@ In Storybook 7, these packages existed for backwards compatibility, but were mar
 - `@storybook/store` - this package has been merged into `@storybook/preview-api`.
 - `@storybook/api` - this package has been replaced with `@storybook/manager-api`.
 
-This section explains the rationale, and the required changed you might have to make: [New Addons API](#new-addons-api)
+These sections explain the rationale, and the required changes you might have to make:
+
+- [New Addons API](#new-addons-api)
+- [`addons.setConfig` should now be imported from `@storybook/manager-api`.](#addonssetconfig-should-now-be-imported-from-storybookmanager-api)
 
 ### Framework-specific Vite plugins have to be explicitly added
 
@@ -2029,6 +2033,19 @@ Earlier versions used the light theme by default, so if you don't set a theme an
 
 To learn more about theming, read our [documentation](https://storybook.js.org/docs/react/configure/theming).
 
+#### `addons.setConfig` should now be imported from `@storybook/manager-api`.
+
+The previous package, `@storybook/addons`, is now deprecated and will be removed in 8.0.
+
+```diff
+- import { addons } from '@storybook/addons';
++ import { addons } from '@storybook/manager-api';
+
+addons.setConfig({
+  // ...
+})
+```
+
 ### 7.0 core addons changes
 
 #### Removed auto injection of @storybook/addon-actions decorator

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/actions/src/runtime/action.ts

@@ -103,6 +103,7 @@ export function action(name: string, options: ActionOptions = {}): HandlerFuncti
     channel.emit(EVENT_ID, actionDisplayToEmit);
   };
   handler.isAction = true;
+  handler.implicit = options.implicit;
 
   return handler;
 }

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/interactions/src/preview.ts

@@ -1,11 +1,11 @@
-/* eslint-disable no-underscore-dangle */
 import type {
-  Args,
-  LoaderFunction,
+  ArgsEnhancer,
   PlayFunction,
   PlayFunctionContext,
+  Renderer,
   StepLabel,
 } from '@storybook/types';
+import { fn, isMockFunction } from '@storybook/test';
 import { instrument } from '@storybook/instrumenter';
 
 export const { step: runStep } = instrument(
@@ -16,26 +16,47 @@ export const { step: runStep } = instrument(
   { intercept: true }
 );
 
-const instrumentSpies: LoaderFunction = ({ initialArgs }) => {
-  const argTypesWithAction = Object.entries(initialArgs).filter(
-    ([, value]) =>
-      typeof value === 'function' &&
-      '_isMockFunction' in value &&
-      value._isMockFunction &&
-      !value._instrumented
-  );
-
-  return argTypesWithAction.reduce((acc, [key, value]) => {
-    const instrumented = instrument({ [key]: () => value }, { retain: true })[key];
-    acc[key] = instrumented();
-    // this enhancer is being called multiple times
-
-    value._instrumented = true;
-    return acc;
-  }, {} as Args);
+const traverseArgs = (value: unknown, depth = 0, key?: string): any => {
+  // Make sure to not get in infinite loops with self referencing args
+  if (depth > 5) return value;
+  if (value == null) return value;
+  if (isMockFunction(value)) {
+    // Makes sure we get the arg name in the interactions panel
+    if (key) value.mockName(key);
+    return value;
+  }
+
+  // wrap explicit actions in a spy
+  if (
+    typeof value === 'function' &&
+    'isAction' in value &&
+    value.isAction &&
+    !('implicit' in value && value.implicit)
+  ) {
+    const mock = fn(value as any);
+    if (key) mock.mockName(key);
+    return mock;
+  }
+
+  if (Array.isArray(value)) {
+    depth++;
+    return value.map((item) => traverseArgs(item, depth));
+  }
+
+  if (typeof value === 'object' && value.constructor === Object) {
+    depth++;
+    // We have to mutate the original object for this to survive HMR.
+    for (const [k, v] of Object.entries(value)) {
+      (value as Record<string, unknown>)[k] = traverseArgs(v, depth, k);
+    }
+    return value;
+  }
+  return value;
 };
 
-export const argsEnhancers = [instrumentSpies];
+const wrapActionsInSpyFns: ArgsEnhancer<Renderer> = ({ initialArgs }) => traverseArgs(initialArgs);
+
+export const argsEnhancers = [wrapActionsInSpyFns];
 
 export const parameters = {
   throwPlayFunctionExceptions: false,

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-vite/src/build.ts

@@ -41,7 +41,7 @@ export async function build(options: Options) {
 
   const turbosnapPluginName = 'rollup-plugin-turbosnap';
   const hasTurbosnapPlugin =
-    finalConfig.plugins && hasVitePlugins(finalConfig.plugins, [turbosnapPluginName]);
+    finalConfig.plugins && (await hasVitePlugins(finalConfig.plugins, [turbosnapPluginName]));
   if (hasTurbosnapPlugin) {
     logger.warn(dedent`Found '${turbosnapPluginName}' which is now included by default in Storybook 8.
       Removing from your plugins list. Ensure you pass \`--webpack-stats-json\` to generate stats.
@@ -53,6 +53,9 @@ export async function build(options: Options) {
 
   await viteBuild(await sanitizeEnvVars(options, finalConfig));
 
-  const statsPlugin = findPlugin(finalConfig, 'rollup-plugin-webpack-stats') as WebpackStatsPlugin;
+  const statsPlugin = findPlugin(
+    finalConfig,
+    'storybook:rollup-plugin-webpack-stats'
+  ) as WebpackStatsPlugin;
   return statsPlugin?.storybookGetStats();
 }

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/e2e-tests/addon-docs.spec.ts

@@ -34,8 +34,7 @@ test.describe('addon-docs', () => {
     await expect(anotherStory).toContainText('Another button, just to show multiple stories');
   });
 
-  // FIXME - get rid of the flake
-  test.skip('should show source=code view for stories', async ({ page }) => {
+  test('should show source=code view for stories', async ({ page }) => {
     const skipped = [
       // SSv6 does not render stories in the correct order in our sandboxes
       'internal\\/ssv6',

code/e2e-tests/tags.spec.ts

@@ -3,8 +3,7 @@ import { SbPage } from './util';
 
 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
 
-// FIXME - get rid of the flake
-test.describe.skip('tags', () => {
+test.describe('tags', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
     await new SbPage(page).waitUntilLoaded();

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"
   },