Release: Prerelease 8.0.0-rc.3

CHANGELOG.prerelease.md

@@ -1,3 +1,14 @@
+## 8.0.0-rc.3
+
+- Addon-themes: Fix switcher initialization after first start - [#26353](https://github.com/storybookjs/storybook/pull/26353), thanks @valentinpalkovic!
+- Build: Upgrade `esbuild` (`0.20.1`) - [#26255](https://github.com/storybookjs/storybook/pull/26255), thanks @43081j!
+- Core: Fix path separator issue in check-addon-order - [#26362](https://github.com/storybookjs/storybook/pull/26362), thanks @valentinpalkovic!
+- Dependencies: Remove `qs` from `@storybook/manager-api` & `@storybook/channels` - [#26285](https://github.com/storybookjs/storybook/pull/26285), thanks @43081j!
+- UI: Fix sidebar scrolling to selected story when state changes - [#26337](https://github.com/storybookjs/storybook/pull/26337), thanks @JReinhold!
+- UI: Remove 'left' property from TooltipLinkList and Link components - [#26324](https://github.com/storybookjs/storybook/pull/26324), thanks @valentinpalkovic!
+- Viewport: Fix editing when default viewport is set - [#26360](https://github.com/storybookjs/storybook/pull/26360), thanks @shilman!
+- Vue: Fix reference error when using re-exports with "vue-component-meta" - [#26303](https://github.com/storybookjs/storybook/pull/26303), thanks @larsrickert!
+
 ## 8.0.0-rc.2
 
 - CLI: Add @storybook/addons automigration - [#26295](https://github.com/storybookjs/storybook/pull/26295), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!

MIGRATION.md

@@ -65,6 +65,7 @@
     - [Removed `passArgsFirst` option](#removed-passargsfirst-option)
     - [Methods and properties from AddonStore](#methods-and-properties-from-addonstore)
     - [Methods and properties from PreviewAPI](#methods-and-properties-from-previewapi)
+    - [Removals in @storybook/components](#removals-in-storybookcomponents)
     - [Removals in @storybook/types](#removals-in-storybooktypes)
     - [--use-npm flag in storybook CLI](#--use-npm-flag-in-storybook-cli)
     - [hideNoControlsWarning parameter from addon controls](#hidenocontrolswarning-parameter-from-addon-controls)
@@ -1068,6 +1069,44 @@ The following exports from `@storybook/preview-api` are now removed:
 
 Please file an issue if you need these APIs.
 
+#### Removals in @storybook/components
+
+The `TooltipLinkList` UI component used to customize the Storybook toolbar has been updated to use the `icon` property instead of the `left` property to position its content. If you've enabled this property in your `globalTypes` configuration, addons, or any other place, you'll need to replace it with an `icon` property to mimic the same behavior. For example:
+
+```diff
+// .storybook/preview.js|ts
+// Replace your-framework with the framework you are using (e.g., react, vue3)
+import { Preview } from '@storybook/your-framework';
+
+const preview: Preview = {
+  globalTypes: {
+    locale: {
+      description: 'Internationalization locale',
+      defaultValue: 'en',
+      toolbar: {
+        icon: 'globe',
+        items: [
+          {
+            value: 'en',
+            right: '🇺🇸',
+-            left: '＄'
++            icon: 'facehappy'
+            title: 'English'
+          },
+          { value: 'fr', right: '🇫🇷', title: 'Français' },
+          { value: 'es', right: '🇪🇸', title: 'Español' },
+          { value: 'zh', right: '🇨🇳', title: '中文' },
+          { value: 'kr', right: '🇰🇷', title: '한국어' },
+        ],
+      },
+    },
+  },
+};
+
+export default preview;
+```
+To learn more about the available icons and their names, see the [Storybook documentation](https://storybook.js.org/docs/8.0/faq#what-icons-are-available-for-my-toolbar-or-my-addon).
+
 #### Removals in @storybook/types
 
 The following exports from `@storybook/types` are now removed:

code/addons/themes/src/constants.ts

@@ -1,5 +1,5 @@
 export const PARAM_KEY = 'themes' as const;
-export const ADDON_ID = `storybook/${PARAM_KEY}}` as const;
+export const ADDON_ID = `storybook/${PARAM_KEY}` as const;
 export const GLOBAL_KEY = 'theme' as const;
 export const THEME_SWITCHER_ID = `${ADDON_ID}/theme-switcher` as const;
 

code/addons/themes/src/theme-switcher.tsx

@@ -1,5 +1,11 @@
 import React, { Fragment, useMemo } from 'react';
-import { useAddonState, useChannel, useGlobals, useParameter } from '@storybook/manager-api';
+import {
+  useAddonState,
+  useChannel,
+  useGlobals,
+  useParameter,
+  addons,
+} from '@storybook/manager-api';
 import { styled } from '@storybook/theming';
 import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 
@@ -20,16 +26,23 @@ const IconButtonLabel = styled.div(({ theme }) => ({
 const hasMultipleThemes = (themesList: ThemeAddonState['themesList']) => themesList.length > 1;
 const hasTwoThemes = (themesList: ThemeAddonState['themesList']) => themesList.length === 2;
 
-export const ThemeSwitcher = () => {
+export const ThemeSwitcher = React.memo(function ThemeSwitcher() {
   const { themeOverride } = useParameter<ThemeParameters>(
     PARAM_KEY,
     DEFAULT_THEME_PARAMETERS
   ) as ThemeParameters;
   const [{ theme: selected }, updateGlobals] = useGlobals();
 
+  const channel = addons.getChannel();
+  const fromLast = channel.last(THEMING_EVENTS.REGISTER_THEMES);
+  const initializeThemeState = Object.assign({}, DEFAULT_ADDON_STATE, {
+    themesList: fromLast?.[0]?.themes || [],
+    themeDefault: fromLast?.[0]?.defaultTheme || '',
+  });
+
   const [{ themesList, themeDefault }, updateState] = useAddonState<ThemeAddonState>(
     THEME_SWITCHER_ID,
-    DEFAULT_ADDON_STATE
+    initializeThemeState
   );
 
   useChannel({
@@ -103,4 +116,4 @@ export const ThemeSwitcher = () => {
   }
 
   return null;
-};
+});

code/addons/toolbars/src/types.ts

@@ -15,7 +15,6 @@ export type ToolbarShortcuts = Record<ToolbarShortcutType, ToolbarShortcutConfig
 export interface ToolbarItem {
   value?: string;
   icon?: IconsProps['icon'];
-  left?: string;
   right?: string;
   title?: string;
   hideIcon?: boolean;

code/addons/viewport/src/Tool.tsx

@@ -136,7 +136,7 @@ export const ViewportTool: FC = memo(
 
     useEffect(() => {
       registerShortcuts(api, globals, updateGlobals, Object.keys(viewports));
-    }, [viewports, globals.viewport]);
+    }, [viewports, globals, globals.viewport, updateGlobals, api]);
 
     useEffect(() => {
       const defaultRotated = defaultOrientation === 'landscape';
@@ -150,7 +150,18 @@ export const ViewportTool: FC = memo(
           viewportRotated: defaultRotated,
         });
       }
-    }, [defaultOrientation, defaultViewport, globals, updateGlobals]);
+      // NOTE: we don't want to re-run this effect when `globals` changes
+      // due to https://github.com/storybookjs/storybook/issues/26334
+      //
+      // Also, this *will* rerun every time you change story as the parameter is briefly `undefined`.
+      // This behaviour is intentional, if a bit of a happy accident in implementation.
+      //
+      // Ultimately this process of "locking in" a parameter value should be
+      // replaced by https://github.com/storybookjs/storybook/discussions/23347
+      // or something similar.
+      //
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [defaultOrientation, defaultViewport, updateGlobals]);
 
     const item =
       list.find((i) => i.id === globals.viewport) ||

code/builders/builder-manager/package.json

@@ -52,7 +52,7 @@
     "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
     "browser-assert": "^1.2.1",
     "ejs": "^3.1.8",
-    "esbuild": "^0.18.0",
+    "esbuild": "^18.0.0 || ^19.0.0 || ^0.20.0",
     "esbuild-plugin-alias": "^0.2.1",
     "express": "^4.17.3",
     "fs-extra": "^11.1.0",

code/e2e-tests/addon-viewport.spec.ts

@@ -40,4 +40,26 @@ test.describe('addon-viewport', () => {
     // Compare the two widths
     await expect(adjustedDimensions?.width).not.toBe(originalDimensions?.width);
   });
+
+  test('viewport should be editable when a default viewport is set', async ({ page }) => {
+    const sbPage = new SbPage(page);
+
+    // Story parameters/selected is set to small mobile
+    await sbPage.navigateToStory('addons/viewport/parameters', 'selected');
+
+    // Measure the original dimensions of previewRoot
+    const originalDimensions = await sbPage.getCanvasBodyElement().boundingBox();
+    await expect(originalDimensions?.width).toBeDefined();
+
+    // Manually select "large mobile" and give it time to adjust
+    await sbPage.selectToolbar('[title="Change the size of the preview"]', '#list-item-mobile2');
+    await new Promise((r) => setTimeout(r, 200));
+
+    // Measure the adjusted dimensions of previewRoot after clicking the mobile item.
+    const adjustedDimensions = await sbPage.getCanvasBodyElement().boundingBox();
+    await expect(adjustedDimensions?.width).toBeDefined();
+
+    // Compare the two widths
+    await expect(adjustedDimensions?.width).not.toBe(originalDimensions?.width);
+  });
 });

code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts

@@ -94,7 +94,13 @@ export async function vueComponentMeta(): Promise<PluginOption> {
           // we can only add the "__docgenInfo" to variables that are actually defined in the current file
           // so e.g. re-exports like "export { default as MyComponent } from './MyComponent.vue'" must be ignored
           // to prevent runtime errors
-          if (new RegExp(`export {.*${name}.*}`).test(src)) {
+          if (
+            new RegExp(`export {.*${name}.*}`).test(src) ||
+            new RegExp(`export \\* from ['"]\\S*${name}['"]`).test(src) ||
+            // when using re-exports, some exports might be resolved via checker.getExportNames
+            // but are not directly exported inside the current file so we need to ignore them too
+            !src.includes(name)
+          ) {
             return;
           }
 

code/lib/channels/package.json

@@ -47,7 +47,6 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/core-events": "workspace:*",
     "@storybook/global": "^5.0.0",
-    "qs": "^6.10.0",
     "telejson": "^7.2.0",
     "tiny-invariant": "^1.3.1"
   },

code/lib/channels/src/postmessage/index.ts

@@ -5,7 +5,6 @@ import { global } from '@storybook/global';
 import * as EVENTS from '@storybook/core-events';
 import { logger, pretty } from '@storybook/client-logger';
 import { isJSON, parse, stringify } from 'telejson';
-import qs from 'qs';
 import invariant from 'tiny-invariant';
 import type {
   ChannelTransport,
@@ -102,13 +101,13 @@ export class PostMessageTransport implements ChannelTransport {
 
     const frames = this.getFrames(target);
 
-    const query = qs.parse(location?.search || '', { ignoreQueryPrefix: true });
+    const query = new URLSearchParams(location?.search || '');
 
     const data = stringify(
       {
         key: KEY,
         event,
-        refId: query.refId,
+        refId: query.get('refId'),
       },
       stringifyOptions
     );

code/lib/core-common/package.json

@@ -52,7 +52,7 @@
     "@yarnpkg/libzip": "2.3.0",
     "chalk": "^4.1.0",
     "cross-spawn": "^7.0.3",
-    "esbuild": "^0.18.0",
+    "esbuild": "^18.0.0 || ^19.0.0 || ^0.20.0",
     "esbuild-register": "^3.5.0",
     "execa": "^5.0.0",
     "file-system-cache": "2.3.0",

code/lib/core-common/src/utils/__tests__/check-addon-order.test.ts

@@ -17,6 +17,7 @@ const essentialAddons = [
   'toolbars',
   'measure',
   'outline',
+  'highlight',
 ];
 
 const pkgName = (entry: CoreCommon_AddonEntry): string => {
@@ -42,6 +43,22 @@ afterEach(() => {
 describe.each([
   ['docs', 'controls', ['docs', 'controls']],
   ['docs', 'controls', ['docs', 'foo/node_modules/@storybook/addon-controls']],
+  [
+    'actions',
+    'interactions',
+    [
+      'foo\\node_modules\\@storybook\\addon-essentials',
+      'foo\\node_modules\\@storybook\\addon-interactions',
+    ],
+  ],
+  [
+    'actions',
+    'interactions',
+    [
+      'foo\\\\node_modules\\\\@storybook\\\\addon-essentials',
+      'foo\\\\node_modules\\\\@storybook\\\\addon-interactions',
+    ],
+  ],
   ['docs', 'controls', [{ name: '@storybook/addon-docs' }, 'controls']],
   ['docs', 'controls', ['essentials', 'controls']],
   ['docs', 'controls', ['essentials']],

code/lib/core-common/src/utils/check-addon-order.ts

@@ -15,7 +15,7 @@ interface Options {
 
 const predicateFor = (addon: string) => (entry: CoreCommon_AddonEntry) => {
   const name = (entry as CoreCommon_OptionsEntry).name || (entry as string);
-  return name && name.includes(addon);
+  return name && name.replaceAll(/(\\){1,2}/g, '/').includes(addon);
 };
 
 const isCorrectOrder = (

code/lib/manager-api/package.json

@@ -65,7 +65,6 @@
     "@types/qs": "^6",
     "@types/semver": "^7.3.4",
     "flush-promises": "^1.0.2",
-    "qs": "^6.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "semver": "^7.3.7",

code/lib/manager-api/src/tests/url.test.js

@@ -1,5 +1,4 @@
 import { describe, beforeEach, it, expect, vi } from 'vitest';
-import qs from 'qs';
 
 import { SET_CURRENT_STORY, GLOBALS_UPDATED, UPDATE_QUERY_PARAMS } from '@storybook/core-events';
 
@@ -15,7 +14,7 @@ describe('initial state', () => {
   describe('config query parameters', () => {
     it('handles full parameter', () => {
       const navigate = vi.fn();
-      const location = { search: qs.stringify({ full: '1' }) };
+      const location = { search: new URLSearchParams({ full: '1' }).toString() };
 
       const {
         state: { layout },
@@ -30,7 +29,7 @@ describe('initial state', () => {
 
     it('handles nav parameter', () => {
       const navigate = vi.fn();
-      const location = { search: qs.stringify({ nav: '0' }) };
+      const location = { search: new URLSearchParams({ nav: '0' }).toString() };
 
       const {
         state: { layout },
@@ -41,7 +40,7 @@ describe('initial state', () => {
 
     it('handles shortcuts parameter', () => {
       const navigate = vi.fn();
-      const location = { search: qs.stringify({ shortcuts: '0' }) };
+      const location = { search: new URLSearchParams({ shortcuts: '0' }).toString() };
 
       const {
         state: { ui },
@@ -52,7 +51,7 @@ describe('initial state', () => {
 
     it('handles panel parameter, bottom', () => {
       const navigate = vi.fn();
-      const location = { search: qs.stringify({ panel: 'bottom' }) };
+      const location = { search: new URLSearchParams({ panel: 'bottom' }).toString() };
 
       const {
         state: { layout },
@@ -63,7 +62,7 @@ describe('initial state', () => {
 
     it('handles panel parameter, right', () => {
       const navigate = vi.fn();
-      const location = { search: qs.stringify({ panel: 'right' }) };
+      const location = { search: new URLSearchParams({ panel: 'right' }).toString() };
 
       const {
         state: { layout },
@@ -74,7 +73,7 @@ describe('initial state', () => {
 
     it('handles panel parameter, 0', () => {
       const navigate = vi.fn();
-      const location = { search: qs.stringify({ panel: '0' }) };
+      const location = { search: new URLSearchParams({ panel: '0' }).toString() };
 
       const {
         state: { layout },

code/package.json

@@ -80,7 +80,7 @@
     "@storybook/theming": "workspace:*",
     "@types/node": "^18.0.0",
     "@vitest/expect@1.1.3": "patch:@vitest/expect@npm%3A1.1.3#~/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch",
-    "esbuild": "^0.18.0",
+    "esbuild": "^0.20.1",
     "playwright": "1.36.0",
     "playwright-core": "1.36.0",
     "serialize-javascript": "^3.1.0",
@@ -190,7 +190,7 @@
     "concurrently": "^5.3.0",
     "cross-env": "^7.0.3",
     "danger": "^11.2.6",
-    "esbuild": "^0.18.0",
+    "esbuild": "^18.0.0 || ^19.0.0 || ^0.20.0",
     "esbuild-loader": "^3.0.0",
     "esbuild-plugin-alias": "^0.2.1",
     "eslint": "^8.56.0",
@@ -294,5 +294,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.0.0-rc.3"
 }