Merge pull request #26821 from storybookjs/version-patch-from-8.0.8

Release: Patch 8.0.9

CHANGELOG.md

@@ -1,3 +1,14 @@
+## 8.0.9
+
+- Addon-docs: Fix MDX compilation when using `@vitejs/plugin-react-swc` with plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold!
+- CSF: Fix typings for control and other properties of argTypes - [#26824](https://github.com/storybookjs/storybook/pull/26824), thanks @kasperpeulen!
+- Controls: Fix crashing when docgen extraction partially fails - [#26862](https://github.com/storybookjs/storybook/pull/26862), thanks @yannbf!
+- Doc Tools: Signature Type Error Handling - [#26774](https://github.com/storybookjs/storybook/pull/26774), thanks @ethriel3695!
+- Next.js: Move sharp into optional deps - [#26787](https://github.com/storybookjs/storybook/pull/26787), thanks @shuta13!
+- Nextjs: Support next 14.2 useParams functionality - [#26874](https://github.com/storybookjs/storybook/pull/26874), thanks @yannbf!
+- Test: Remove chai as dependency of @storybook/test - [#26852](https://github.com/storybookjs/storybook/pull/26852), thanks @kasperpeulen!
+- UI: Fix sidebar search hanging when selecting a story in touch mode - [#26807](https://github.com/storybookjs/storybook/pull/26807), thanks @JReinhold!
+
 ## 8.0.8
 
 - Automigration: Fix name of VTA addon - [#26816](https://github.com/storybookjs/storybook/pull/26816), thanks @valentinpalkovic!

MIGRATION.md

@@ -5477,7 +5477,7 @@ Currently there is no recommended way of accessing the component options of a st
 
 ## From version 4.0.x to 4.1.x
 
-There are are a few migrations you should be aware of in 4.1, including one unintentionally breaking change for advanced addon usage.
+There are a few migrations you should be aware of in 4.1, including one unintentionally breaking change for advanced addon usage.
 
 ### Private addon config
 

code/addons/controls/src/ControlsPanel.tsx

@@ -35,8 +35,10 @@ export const ControlsPanel: FC = () => {
   const hasControls = Object.values(rows).some((arg) => arg?.control);
 
   const withPresetColors = Object.entries(rows).reduce((acc, [key, arg]) => {
-    if (arg?.control?.type !== 'color' || arg?.control?.presetColors) acc[key] = arg;
-    else acc[key] = { ...arg, control: { ...arg.control, presetColors } };
+    const control = arg?.control;
+    if (typeof control !== 'object' || control?.type !== 'color' || control?.presetColors)
+      acc[key] = arg;
+    else acc[key] = { ...arg, control: { ...control, presetColors } };
     return acc;
   }, {} as ArgTypes);
 

code/addons/docs/src/preset.ts

@@ -166,7 +166,8 @@ export const viteFinal = async (config: any, options: Options) => {
   // add alias plugin early to ensure any other plugins that also add the aliases will override this
   // eg. the preact vite plugin adds its own aliases
   plugins.unshift(packageDeduplicationPlugin);
-  plugins.push(mdxPlugin(options));
+  // mdx plugin needs to be before any react plugins
+  plugins.unshift(mdxPlugin(options));
 
   return config;
 };

code/addons/links/package.json

@@ -63,7 +63,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "^0.1.2",
+    "@storybook/csf": "^0.1.4",
     "@storybook/global": "^5.0.0",
     "ts-dedent": "^2.0.0"
   },

code/addons/themes/docs/api.md

@@ -166,7 +166,7 @@ export const withVuetifyTheme = ({ themes, defaultTheme }) => {
       setup() {
         const theme = useTheme();
 
-        theme.global.name.value = selected;
+        theme.global.name.value = themes[selected];
 
         return {
           theme,
@@ -195,12 +195,14 @@ setup((app) => {
 
 export const decorators = [
   withVuetifyTheme({
+    // These keys are the labels that will be displayed in the toolbar theme switcher
+    // The values must match the theme keys from your VuetifyOptions
     themes: {
       light: 'light',
       dark: 'dark',
-      customTheme: 'myCustomTheme',
+      'high contrast': 'highContrast',
     },
-    defaultTheme: 'customTheme', // The key of your default theme
+    defaultTheme: 'light', // The key of your default theme
   }),
 ];
 ```

code/addons/viewport/README.md

@@ -22,7 +22,7 @@ export default {
 };
 ```
 
-You should now be able to see the viewport addon icon in the the toolbar at the top of the screen.
+You should now be able to see the viewport addon icon in the toolbar at the top of the screen.
 
 ## Usage
 

code/e2e-tests/framework-nextjs.spec.ts

@@ -10,7 +10,7 @@ test.describe('Next.js', () => {
   // TODO: improve these E2E tests given that we have more version of Next.js to test
   // and this only tests nextjs/default-js
   test.skip(
-    !templateName?.includes('nextjs/default-js'),
+    !templateName?.includes('nextjs/default-ts'),
     'Only run this test for the Frameworks that support next/navigation'
   );
 
@@ -66,7 +66,7 @@ test.describe('Next.js', () => {
       sbPage = new SbPage(page);
 
       await sbPage.navigateToStory(
-        'stories/frameworks/nextjs-nextjs-default-js/Navigation',
+        'stories/frameworks/nextjs-nextjs-default-ts/Navigation',
         'default'
       );
       root = sbPage.previewRoot();
@@ -100,7 +100,7 @@ test.describe('Next.js', () => {
     test.beforeEach(async ({ page }) => {
       sbPage = new SbPage(page);
 
-      await sbPage.navigateToStory('stories/frameworks/nextjs-nextjs-default-js/Router', 'default');
+      await sbPage.navigateToStory('stories/frameworks/nextjs-nextjs-default-ts/Router', 'default');
       root = sbPage.previewRoot();
     });
 

code/frameworks/angular/src/client/docs/compodoc.ts

@@ -200,7 +200,7 @@ const extractDefaultValueFromComments = (property: Property, value: any) => {
 
 const extractDefaultValue = (property: Property) => {
   try {
-    let value: string | boolean = property.defaultValue?.replace(/^'(.*)'$/, '$1');
+    let value: string = property.defaultValue?.replace(/^'(.*)'$/, '$1');
     value = castDefaultValue(property, value);
 
     if (value == null && property.jsdoctags?.length > 0) {

code/frameworks/nextjs/package.json

@@ -114,7 +114,6 @@
     "resolve-url-loader": "^5.0.0",
     "sass-loader": "^12.4.0",
     "semver": "^7.3.5",
-    "sharp": "^0.32.6",
     "style-loader": "^3.3.1",
     "styled-jsx": "5.1.1",
     "ts-dedent": "^2.0.0",
@@ -146,6 +145,9 @@
       "optional": true
     }
   },
+  "optionalDependencies": {
+    "sharp": "^0.33.3"
+  },
   "engines": {
     "node": ">=18.0.0"
   },

code/frameworks/nextjs/src/next-image-loader-stub.ts

@@ -2,18 +2,27 @@ import { interpolateName } from 'loader-utils';
 import imageSizeOf from 'image-size';
 import type { RawLoaderDefinition } from 'webpack';
 import type { NextConfig } from 'next';
-import sharp from 'sharp';
 import { cpus } from 'os';
+import { NextJsSharpError } from '@storybook/core-events/preview-errors';
 
 interface LoaderOptions {
   filename: string;
   nextConfig: NextConfig;
 }
 
-if (sharp.concurrency() > 1) {
-  // Reducing concurrency reduces the memory usage too.
-  const divisor = process.env.NODE_ENV === 'development' ? 4 : 2;
-  sharp.concurrency(Math.floor(Math.max(cpus().length / divisor, 1)));
+let sharp: typeof import('sharp') | undefined;
+
+try {
+  sharp = require('sharp');
+  if (sharp && sharp.concurrency() > 1) {
+    // Reducing concurrency reduces the memory usage too.
+    const divisor = process.env.NODE_ENV === 'development' ? 4 : 2;
+    sharp.concurrency(Math.floor(Math.max(cpus().length / divisor, 1)));
+  }
+} catch (e) {
+  console.warn(
+    'You have to install sharp in order to use image optimization features in Next.js. AVIF support is also disabled.'
+  );
 }
 
 const nextImageLoaderStub: RawLoaderDefinition<LoaderOptions> = async function NextImageLoader(
@@ -37,10 +46,14 @@ const nextImageLoaderStub: RawLoaderDefinition<LoaderOptions> = async function N
   let height;
 
   if (extension === 'avif') {
-    const transformer = sharp(content);
-    const result = await transformer.metadata();
-    width = result.width;
-    height = result.height;
+    if (sharp) {
+      const transformer = sharp(content);
+      const result = await transformer.metadata();
+      width = result.width;
+      height = result.height;
+    } else {
+      throw new NextJsSharpError();
+    }
   } else {
     const result = imageSizeOf(this.resourcePath);
     width = result.width;

code/frameworks/nextjs/src/routing/app-router-provider.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   LayoutRouterContext,
   AppRouterContext,
@@ -7,7 +7,10 @@ import {
 import {
   PathnameContext,
   SearchParamsContext,
+  PathParamsContext,
 } from 'next/dist/shared/lib/hooks-client-context.shared-runtime';
+import { type Params } from 'next/dist/shared/lib/router/utils/route-matcher';
+import { PAGE_SEGMENT_KEY } from 'next/dist/shared/lib/segment';
 import type { FlightRouterState } from 'next/dist/server/app-render/types';
 import type { RouteParams } from './types';
 
@@ -16,6 +19,32 @@ type AppRouterProviderProps = {
   routeParams: RouteParams;
 };
 
+// Since Next 14.2.x
+// https://github.com/vercel/next.js/pull/60708/files#diff-7b6239af735eba0c401e1a0db1a04dd4575c19a031934f02d128cf3ac813757bR106
+function getSelectedParams(currentTree: FlightRouterState, params: Params = {}): Params {
+  const parallelRoutes = currentTree[1];
+
+  for (const parallelRoute of Object.values(parallelRoutes)) {
+    const segment = parallelRoute[0];
+    const isDynamicParameter = Array.isArray(segment);
+    const segmentValue = isDynamicParameter ? segment[1] : segment;
+    if (!segmentValue || segmentValue.startsWith(PAGE_SEGMENT_KEY)) continue;
+
+    // Ensure catchAll and optional catchall are turned into an array
+    const isCatchAll = isDynamicParameter && (segment[2] === 'c' || segment[2] === 'oc');
+
+    if (isCatchAll) {
+      params[segment[0]] = segment[1].split('/');
+    } else if (isDynamicParameter) {
+      params[segment[0]] = segment[1];
+    }
+
+    params = getSelectedParams(parallelRoute, params);
+  }
+
+  return params;
+}
+
 const getParallelRoutes = (segmentsList: Array<string>): FlightRouterState => {
   const segment = segmentsList.shift();
 
@@ -34,62 +63,67 @@ export const AppRouterProvider: React.FC<React.PropsWithChildren<AppRouterProvid
   const { pathname, query, segments = [], ...restRouteParams } = routeParams;
 
   const tree: FlightRouterState = [pathname, { children: getParallelRoutes([...segments]) }];
+  const pathParams = useMemo(() => {
+    return getSelectedParams(tree);
+  }, [tree]);
 
   // https://github.com/vercel/next.js/blob/canary/packages/next/src/client/components/app-router.tsx#L436
   return (
-    <PathnameContext.Provider value={pathname}>
-      <SearchParamsContext.Provider value={new URLSearchParams(query)}>
-        <GlobalLayoutRouterContext.Provider
-          value={{
-            changeByServerResponse() {
-              // NOOP
-            },
-            buildId: 'storybook',
-            tree,
-            focusAndScrollRef: {
-              apply: false,
-              hashFragment: null,
-              segmentPaths: [tree],
-              onlyHashChange: false,
-            },
-            nextUrl: pathname,
-          }}
-        >
-          <AppRouterContext.Provider
+    <PathParamsContext.Provider value={pathParams}>
+      <PathnameContext.Provider value={pathname}>
+        <SearchParamsContext.Provider value={new URLSearchParams(query)}>
+          <GlobalLayoutRouterContext.Provider
             value={{
-              push(...args) {
-                action('nextNavigation.push')(...args);
-              },
-              replace(...args) {
-                action('nextNavigation.replace')(...args);
-              },
-              forward(...args) {
-                action('nextNavigation.forward')(...args);
-              },
-              back(...args) {
-                action('nextNavigation.back')(...args);
-              },
-              prefetch(...args) {
-                action('nextNavigation.prefetch')(...args);
+              changeByServerResponse() {
+                // NOOP
               },
-              refresh: () => {
-                action('nextNavigation.refresh')();
+              buildId: 'storybook',
+              tree,
+              focusAndScrollRef: {
+                apply: false,
+                hashFragment: null,
+                segmentPaths: [tree],
+                onlyHashChange: false,
               },
-              ...restRouteParams,
+              nextUrl: pathname,
             }}
           >
-            <LayoutRouterContext.Provider
+            <AppRouterContext.Provider
               value={{
-                childNodes: new Map(),
-                tree,
-                url: pathname,
+                push(...args) {
+                  action('nextNavigation.push')(...args);
+                },
+                replace(...args) {
+                  action('nextNavigation.replace')(...args);
+                },
+                forward(...args) {
+                  action('nextNavigation.forward')(...args);
+                },
+                back(...args) {
+                  action('nextNavigation.back')(...args);
+                },
+                prefetch(...args) {
+                  action('nextNavigation.prefetch')(...args);
+                },
+                refresh: () => {
+                  action('nextNavigation.refresh')();
+                },
+                ...restRouteParams,
               }}
             >
-              {children}
-            </LayoutRouterContext.Provider>
-          </AppRouterContext.Provider>
-        </GlobalLayoutRouterContext.Provider>
-      </SearchParamsContext.Provider>
-    </PathnameContext.Provider>
+              <LayoutRouterContext.Provider
+                value={{
+                  childNodes: new Map(),
+                  tree,
+                  url: pathname,
+                }}
+              >
+                {children}
+              </LayoutRouterContext.Provider>
+            </AppRouterContext.Provider>
+          </GlobalLayoutRouterContext.Provider>
+        </SearchParamsContext.Provider>
+      </PathnameContext.Provider>
+    </PathParamsContext.Provider>
   );
 };

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

@@ -22,7 +22,7 @@ export default {
 };
 
 export const Default = {
-  play: async ({ canvasElement }) => {
+  play: async () => {
     await waitFor(() => expect(document.title).toEqual('Next.js Head Title'));
     await expect(document.querySelectorAll('meta[property="og:title"]')).toHaveLength(1);
     await expect(document.querySelector('meta[property="og:title"]').content).toEqual(