Merge branch 'next' into anto/fix-function-arg-renders-in-docs

storybookjs · Feb 25, 2024 · b04a9bf · b04a9bf
2 parents 554e9e1 + 995abe0
commit b04a9bf
Show file tree

Hide file tree

Showing 140 changed files with 4,930 additions and 289 deletions.
diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
@@ -1,3 +1,12 @@
+## 8.0.0-beta.5
+
+- Addon-controls: Dont show "setup controls" if control is disabled or a function - [#26120](https://github.com/storybookjs/storybook/pull/26120), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- Addon-interactions: Only mutate arg keys when writable - [#26118](https://github.com/storybookjs/storybook/pull/26118), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- CLI: Fix logic to add `^` packages in upgrade - [#26049](https://github.com/storybookjs/storybook/pull/26049), thanks [@ndelangen](https://github.com/ndelangen)!
+- Core: Fix addon bundling script - [#26145](https://github.com/storybookjs/storybook/pull/26145), thanks [@ndelangen](https://github.com/ndelangen)!
+- Vue3: Fix SourceDecorator Exception  - [#25773](https://github.com/storybookjs/storybook/pull/25773), thanks [@chakAs3](https://github.com/chakAs3)!
+- Vue: Replace vue-docgen-api with Volar vue-component-meta - [#22285](https://github.com/storybookjs/storybook/pull/22285), thanks [@chakAs3](https://github.com/chakAs3)!
+
 ## 8.0.0-beta.4
 
 - Addon-actions: Warn when argTypesRegex is used together with the visual test addon - [#26094](https://github.com/storybookjs/storybook/pull/26094), thanks [@kasperpeulen](https://github.com/kasperpeulen)!

diff --git a/MIGRATION.md b/MIGRATION.md
@@ -15,6 +15,7 @@
     - [For Solid:](#for-solid)
     - [For Qwik:](#for-qwik)
   - [TurboSnap Vite plugin is no longer needed](#turbosnap-vite-plugin-is-no-longer-needed)
+  - [`--webpack-stats-json` option renamed `--stats-json`](#--webpack-stats-json-option-renamed---stats-json)
   - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function)
   - [MDX related changes](#mdx-related-changes)
     - [MDX is upgraded to v3](#mdx-is-upgraded-to-v3)
@@ -551,6 +552,11 @@ At least in build mode, `builder-vite` now supports the `--webpack-stats-json` f
 
 This means https://github.com/IanVS/vite-plugin-turbosnap is no longer necessary, and duplicative, and the plugin will automatically be removed if found.
 
+### `--webpack-stats-json` option renamed `--stats-json`
+
+Now that both Vite and Webpack support the `preview-stats.json` file, the flag has been renamed. The old flag will continue to work.
+
+
 ### Implicit actions can not be used during rendering (for example in the play function)
 
 In Storybook 7, we inferred if the component accepts any action props,

diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",

diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",

diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/interactions/src/preview.test.ts b/code/addons/interactions/src/preview.test.ts
@@ -0,0 +1,42 @@
+import { describe, expect, test } from 'vitest';
+import { fn, isMockFunction } from '@storybook/test';
+import { action } from '@storybook/addon-actions';
+
+import { traverseArgs } from './preview';
+
+describe('traverseArgs', () => {
+  const args = {
+    deep: {
+      deeper: {
+        fnKey: fn(),
+        actionKey: action('name'),
+      },
+    },
+    arg2: Object.freeze({ frozen: true }),
+  };
+
+  expect(args.deep.deeper.fnKey.getMockName()).toEqual('spy');
+
+  const traversed = traverseArgs(args) as typeof args;
+
+  test('The same structure is maintained', () =>
+    expect(traversed).toEqual({
+      deep: {
+        deeper: {
+          fnKey: args.deep.deeper.fnKey,
+          actionKey: args.deep.deeper.actionKey,
+        },
+      },
+      // We don't mutate frozen objects, but we do insert them back in the tree
+      arg2: args.arg2,
+    }));
+
+  test('The mock name is mutated to be the arg key', () =>
+    expect(traversed.deep.deeper.fnKey.getMockName()).toEqual('fnKey'));
+
+  const actionFn = traversed.deep.deeper.actionKey;
+
+  test('Actions are wrapped in a spy', () => expect(isMockFunction(actionFn)).toBeTruthy());
+  test('The spy of the action is also matching the arg key ', () =>
+    expect(isMockFunction(actionFn) && actionFn.getMockName()).toEqual('actionKey'));
+});
diff --git a/code/addons/interactions/src/preview.ts b/code/addons/interactions/src/preview.ts
@@ -16,7 +16,7 @@ export const { step: runStep } = instrument(
   { intercept: true }
 );
 
-const traverseArgs = (value: unknown, depth = 0, key?: string): any => {
+export const traverseArgs = (value: unknown, depth = 0, key?: string): unknown => {
   // Make sure to not get in infinite loops with self referencing args
   if (depth > 5) return value;
   if (value == null) return value;
@@ -45,9 +45,11 @@ const traverseArgs = (value: unknown, depth = 0, key?: string): any => {
 
   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);
+      if (Object.getOwnPropertyDescriptor(value, k).writable) {
+        // We have to mutate the original object for this to survive HMR.
+        (value as Record<string, unknown>)[k] = traverseArgs(v, depth, k);
+      }
     }
     return value;
   }

diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",

diff --git a/code/addons/links/package.json b/code/addons/links/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "addon",

diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",

diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",

diff --git a/code/addons/themes/src/theme-switcher.tsx b/code/addons/themes/src/theme-switcher.tsx
@@ -15,10 +15,10 @@ import {
 
 const IconButtonLabel = styled.div(({ theme }) => ({
   fontSize: theme.typography.size.s2 - 1,
-  marginLeft: 10,
 }));
 
 const hasMultipleThemes = (themesList: ThemeAddonState['themesList']) => themesList.length > 1;
+const hasTwoThemes = (themesList: ThemeAddonState['themesList']) => themesList.length === 2;
 
 export const ThemeSwitcher = () => {
   const { themeOverride } = useParameter<ThemeParameters>(
@@ -52,33 +52,55 @@ export const ThemeSwitcher = () => {
     return themeName && <>{`${themeName} theme`}</>;
   }, [themeOverride, themeDefault, selected]);
 
-  return hasMultipleThemes(themesList) ? (
-    <Fragment>
-      <WithTooltip
-        placement="top"
-        trigger="click"
-        closeOnOutsideClick
-        tooltip={({ onHide }) => {
-          return (
-            <TooltipLinkList
-              links={themesList.map((theme) => ({
-                id: theme,
-                title: theme,
-                active: selected === theme,
-                onClick: () => {
-                  updateGlobals({ theme });
-                  onHide();
-                },
-              }))}
-            />
-          );
+  if (hasTwoThemes(themesList)) {
+    const currentTheme = selected || themeDefault;
+    const alternateTheme = themesList.find((theme) => theme !== currentTheme);
+    return (
+      <IconButton
+        key={THEME_SWITCHER_ID}
+        active={!themeOverride}
+        title="Theme"
+        onClick={() => {
+          updateGlobals({ theme: alternateTheme });
         }}
       >
-        <IconButton key={THEME_SWITCHER_ID} active={!themeOverride} title="Theme">
-          <PaintBrushIcon />
-          {label && <IconButtonLabel>{label}</IconButtonLabel>}
-        </IconButton>
-      </WithTooltip>
-    </Fragment>
-  ) : null;
+        <PaintBrushIcon />
+        {label && <IconButtonLabel>{label}</IconButtonLabel>}
+      </IconButton>
+    );
+  }
+
+  if (hasMultipleThemes(themesList)) {
+    return (
+      <Fragment>
+        <WithTooltip
+          placement="top"
+          trigger="click"
+          closeOnOutsideClick
+          tooltip={({ onHide }) => {
+            return (
+              <TooltipLinkList
+                links={themesList.map((theme) => ({
+                  id: theme,
+                  title: theme,
+                  active: selected === theme,
+                  onClick: () => {
+                    updateGlobals({ theme });
+                    onHide();
+                  },
+                }))}
+              />
+            );
+          }}
+        >
+          <IconButton key={THEME_SWITCHER_ID} active={!themeOverride} title="Theme">
+            <PaintBrushIcon />
+            {label && <IconButtonLabel>{label}</IconButtonLabel>}
+          </IconButton>
+        </WithTooltip>
+      </Fragment>
+    );
+  }
+
+  return null;
 };
diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",

diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",

diff --git a/code/builders/builder-manager/package.json b/code/builders/builder-manager/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-manager",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "Storybook manager builder",
   "keywords": [
     "storybook"

diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "A plugin to run and build Storybooks with Vite",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
   "bugs": {
@@ -46,6 +46,7 @@
     "@storybook/channels": "workspace:*",
     "@storybook/client-logger": "workspace:*",
     "@storybook/core-common": "workspace:*",
+    "@storybook/core-events": "workspace:*",
     "@storybook/csf-plugin": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/preview": "workspace:*",

diff --git a/code/builders/builder-vite/src/build.ts b/code/builders/builder-vite/src/build.ts
@@ -44,7 +44,7 @@ export async function build(options: Options) {
     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.
+      Removing from your plugins list. Ensure you pass \`--stats-json\` to generate stats.
 
       For more information, see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#turbosnap-vite-plugin-is-no-longer-needed`);
 

diff --git a/code/builders/builder-vite/src/index.ts b/code/builders/builder-vite/src/index.ts
@@ -5,6 +5,7 @@ import type { RequestHandler } from 'express';
 import type { ViteDevServer } from 'vite';
 import express from 'express';
 import { dirname, join, parse } from 'path';
+import { NoStatsForViteDevError } from '@storybook/core-events/server-errors';
 import type { Options } from '@storybook/types';
 import { transformIframeHtml } from './transform-iframe-html';
 import { createViteServer } from './vite-server';
@@ -68,7 +69,11 @@ export const start: ViteBuilder['start'] = async ({
 
   return {
     bail,
-    stats: { toJson: () => null },
+    stats: {
+      toJson: () => {
+        throw new NoStatsForViteDevError();
+      },
+    },
     totalTime: process.hrtime(startTime),
   };
 };

diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"

diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",