Merge remote-tracking branch 'refs/remotes/origin/next' into kasper/m…

…odule-mocking

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

@@ -1,6 +1,8 @@
 <h1>Migration</h1>
 
 - [From version 8.0.x to 8.1.x](#from-version-80x-to-81x)
+  - [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle)
+      - [Title block](#title-block)
   - [Portable stories](#portable-stories)
     - [@storybook/nextjs requires specific path aliases to be setup](#storybooknextjs-requires-specific-path-aliases-to-be-setup)
 - [From version 7.x to 8.0.0](#from-version-7x-to-800)
@@ -428,6 +430,18 @@ module.exports = createJestConfig(customJestConfig);
 
 This will make sure you end using the correct implementation of the packages and avoid having issues in your tests.
 
+### Subtitle block and `parameters.componentSubtitle`
+
+The `Subtitle` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta).
+
+`parameters.componentSubtitle` has been deprecated to be consistent with other parameters related to autodocs, instead use `parameters.docs.subtitle`.
+
+##### Title block
+
+The `Title` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta).
+
+It still accepts being passed `children`.
+
 ## From version 7.x to 8.0.0
 
 ### Portable stories

code/addons/actions/src/components/ActionLogger/index.tsx

@@ -61,7 +61,7 @@ export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => {
                 sortObjectKeys
                 showNonenumerable={false}
                 name={action.data.name}
-                data={action.data.args || action.data}
+                data={action.data.args ?? action.data}
               />
             </InspectorContainer>
           </Action>

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

@@ -67,7 +67,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.5--canary.82.2c2dd28.0",
+    "@storybook/csf": "^0.1.5",
     "@storybook/global": "^5.0.0",
     "ts-dedent": "^2.0.0"
   },

code/addons/links/template/stories/decorator.stories.ts

@@ -9,29 +9,44 @@ export default {
   decorators: [withLinks],
 };
 
-export const Basic = {
+export const Target = {
   args: {
     content: `
       <div>
-        <a class="link" href="#" data-sb-story="other">go to other</a>
+      This is just a story to target with the links
       </div>
     `,
   },
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
-export const Other = {
+
+export const KindAndStory = {
   args: {
     content: `
       <div>
-        <a class="link" href="#" data-sb-story="third">go to third</a>
+        <a class="link" href="#" data-sb-kind="addons-links-decorator" data-sb-story="story-only">go to story only</a>
       </div>
     `,
   },
 };
-export const Third = {
+
+export const StoryOnly = {
+  args: {
+    content: `
+      <div>
+        <a class="link" href="#" data-sb-story="target">go to target</a>
+      </div>
+    `,
+  },
+};
+
+export const KindOnly = {
   args: {
     content: `
       <div>
-        <a class="link" href="#" data-sb-story="basic">go to basic</a>
+        <a class="link" href="#" data-sb-kind="addons-links-decorator">go to target</a>
       </div>
     `,
   },

code/addons/links/template/stories/hrefto.stories.ts

@@ -0,0 +1,22 @@
+import { hrefTo } from '@storybook/addon-links';
+
+export default {
+  component: globalThis.Components.Html,
+  title: 'hrefTo',
+  parameters: {
+    chromatic: { disable: true },
+  },
+  args: {
+    content: '<div><code id="content">Waiting for hrefTo to resolve...</code></div>',
+  },
+};
+
+export const Default = {
+  play: async () => {
+    const href = await hrefTo('addons-links-hrefto', 'target');
+    const content = document.querySelector('#content');
+    if (content) {
+      content.textContent = href;
+    }
+  },
+};

code/addons/links/template/stories/linkto.stories.ts

@@ -3,6 +3,7 @@ import { linkTo } from '@storybook/addon-links';
 
 export default {
   component: globalThis.Components.Button,
+  title: 'linkTo',
   args: {
     label: 'Click Me!',
   },
@@ -11,34 +12,69 @@ export default {
   },
 };
 
-export const ID = {
+export const Target = {
   args: {
-    onClick: linkTo('addons-links-parameters--basic'),
+    label: 'This is just a story to target with the links',
+  },
+  parameters: {
+    chromatic: { disable: true },
   },
 };
-export const Title = {
+
+export const Id = {
   args: {
-    onClick: linkTo('addons-links-parameters'),
+    onClick: linkTo('addons-links-linkto--target'),
+    label: 'addons-links-linkto--target',
   },
 };
-export const Basic = {
+
+export const TitleOnly = {
   args: {
-    onClick: linkTo('addons-links-parameters', 'basic'),
+    onClick: linkTo('addons/links/linkTo'),
+    label: 'addons/links/linkTo',
   },
 };
-export const Other = {
+
+export const NormalizedTitleOnly = {
   args: {
-    onClick: linkTo('addons-links-parameters', 'basic'),
+    onClick: linkTo('addons-links-linkto'),
+    label: 'addons-links-linkto',
   },
 };
-export const Third = {
+
+export const TitleAndName = {
   args: {
-    onClick: linkTo('addons-links-parameters', 'other'),
+    onClick: linkTo('addons/links/linkTo', 'Target'),
+    label: 'addons/links/linkTo, Target',
+  },
+};
+
+export const NormalizedTitleAndName = {
+  args: {
+    onClick: linkTo('addons-links-linkto', 'target'),
+    label: 'addons-links-linkto, target',
   },
 };
 
 export const Callback = {
   args: {
-    onClick: linkTo('addons-links-parameters', (event: Event) => 'basic'),
+    onClick: linkTo(
+      (event: Event) => 'addons-links-linkto',
+      (event: Event) => 'target'
+    ),
+  },
+};
+
+export const ToMDXDocs = {
+  args: {
+    onClick: linkTo('Configure Your Project'),
+    label: 'Configure Your Project',
+  },
+};
+
+export const ToAutodocs = {
+  args: {
+    onClick: linkTo('Example Button', 'Docs'),
+    label: 'Example Button, Docs',
   },
 };

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/builders/builder-vite/src/assetsInclude.ts

@@ -0,0 +1,15 @@
+import type { InlineConfig as ViteInlineConfig } from 'vite';
+
+export function getAssetsInclude(config: ViteInlineConfig, newPath: string[]): (string | RegExp)[] {
+  const { assetsInclude } = config;
+
+  if (!assetsInclude) {
+    return newPath;
+  }
+
+  if (Array.isArray(assetsInclude)) {
+    return [...assetsInclude, ...newPath];
+  } else {
+    return [assetsInclude, ...newPath];
+  }
+}

code/builders/builder-vite/src/vite-server.ts

@@ -3,6 +3,7 @@ import type { Options } from '@storybook/types';
 import { commonConfig } from './vite-config';
 import { getOptimizeDeps } from './optimizeDeps';
 import { sanitizeEnvVars } from './envs';
+import { getAssetsInclude } from './assetsInclude';
 
 export async function createViteServer(options: Options, devServer: Server) {
   const { presets } = options;
@@ -12,7 +13,7 @@ export async function createViteServer(options: Options, devServer: Server) {
   const config = {
     ...commonCfg,
     // Needed in Vite 5: https://github.com/storybookjs/storybook/issues/25256
-    assetsInclude: ['/sb-preview/**'],
+    assetsInclude: getAssetsInclude(commonCfg, ['/sb-preview/**']),
     // Set up dev server
     server: {
       middlewareMode: true,

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

@@ -67,7 +67,7 @@ test.describe('addon-docs', () => {
         await new Promise(resolve => resolve('Play function'));
       }
     }`;
-    await expect(sourceCode.textContent()).resolves.toContain(expectedSource);
+    await expect(sourceCode).toHaveText(expectedSource);
   });
 
   test('should render errors', async ({ page }) => {

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/e2e-tests/framework-svelte.spec.ts

@@ -41,7 +41,7 @@ test.describe('Svelte', () => {
     await showCodeButton.click();
     const sourceCode = root.locator('pre.prismjs');
     const expectedSource = '<ButtonJavaScript primary/>';
-    await expect(sourceCode.textContent()).resolves.toContain(expectedSource);
+    await expect(sourceCode).toHaveText(expectedSource);
   });
 
   test('Decorators runs only once', async ({ page }) => {