Release: Prerelease 8.5.0-alpha.22

CHANGELOG.prerelease.md

@@ -1,3 +1,19 @@
+## 8.5.0-alpha.22
+
+- Addon Docs: Dynamically import rehype - [#29544](https://github.com/storybookjs/storybook/pull/29544), thanks @valentinpalkovic!
+- Addon Test: Fix duplicate `test.include` patterns - [#30029](https://github.com/storybookjs/storybook/pull/30029), thanks @JReinhold!
+- Addon Test: Fix environment variable for Vitest Storybook integration - [#30054](https://github.com/storybookjs/storybook/pull/30054), thanks @valentinpalkovic!
+- Addon Test: Use local storybook binary instead - [#30021](https://github.com/storybookjs/storybook/pull/30021), thanks @kasperpeulen!
+- Addon Test: Wait for 2 seconds before showing result mismatch warning - [#30002](https://github.com/storybookjs/storybook/pull/30002), thanks @ghengeveld!
+- Angular: Support statsJson in angular schemas - [#29233](https://github.com/storybookjs/storybook/pull/29233), thanks @yannbf!
+- Core: Fix `scrollIntoView` behavior and reimplement testing module time rendering - [#30044](https://github.com/storybookjs/storybook/pull/30044), thanks @ghengeveld!
+- Docs: Add code snippet to addons panel - [#29253](https://github.com/storybookjs/storybook/pull/29253), thanks @larsrickert!
+- Next.js: Fix webpack fsCache not working - [#29654](https://github.com/storybookjs/storybook/pull/29654), thanks @sentience!
+- Nextjs-Vite: Add TS docgen support - [#29824](https://github.com/storybookjs/storybook/pull/29824), thanks @yannbf!
+- Nextjs-Vite: Fix docgen types in main config - [#30042](https://github.com/storybookjs/storybook/pull/30042), thanks @yannbf!
+- React: Fix RSC compatibility with addon-themes and hooks - [#26243](https://github.com/storybookjs/storybook/pull/26243), thanks @shilman!
+- UI: Fix controls and parameters on tag-filtered stories - [#30038](https://github.com/storybookjs/storybook/pull/30038), thanks @shilman!
+
 ## 8.5.0-alpha.21
 
 - Addon A11y: Add typesVersions support for TypeScript definitions in a11y package - [#30005](https://github.com/storybookjs/storybook/pull/30005), thanks @valentinpalkovic!

MIGRATION.md

@@ -1,6 +1,7 @@
 <h1>Migration</h1>
 
 - [From version 8.4.x to 8.5.x](#from-version-84x-to-85x)
+  - [Added source code panel to docs](#added-source-code-panel-to-docs)
   - [Addon-a11y: Component test integration](#addon-a11y-component-test-integration)
   - [Addon-a11y: Deprecated `parameters.a11y.manual`](#addon-a11y-deprecated-parametersa11ymanual)
   - [Indexing behavior of @storybook/experimental-addon-test is changed](#indexing-behavior-of-storybookexperimental-addon-test-is-changed)
@@ -425,14 +426,32 @@
 
 ## From version 8.4.x to 8.5.x
 
+### Added source code panel to docs
+
+Starting in 8.5, Storybook Docs (`@storybook/addon-docs`) automatically adds a new addon panel to stories that displays a source snippet beneath each story. This works similarly to the existing [source snippet doc block](https://storybook.js.org/docs/writing-docs/doc-blocks#source), but in the story view. It is intended to replace the [Storysource addon](https://storybook.js.org/addons/@storybook/addon-storysource).
+
+If you wish to disable this panel globally, add the following line to your `.storybook/preview.js` project configuration. You can also selectively disable/enable at the story level.
+
+```js
+export default {
+  parameters: {
+    docs: {
+      codePanel: false,
+    },
+  },
+};
+```
+
 ### Addon-a11y: Component test integration
 
-In Storybook 8.4, we introduced a new addon called [addon test](https://storybook.js.org/docs/writing-tests/test-addon). Powered by Vitest under the hood, this addon lets you watch, run, and debug your component tests directly in Storybook.
+In Storybook 8.4, we introduced the [Test addon](https://storybook.js.org/docs/writing-tests/test-addon) (`@storybook/experimental-addon-test`). Powered by Vitest under the hood, this addon lets you watch, run, and debug your component tests directly in Storybook.
+
+In Storybook 8.5, we revamped the [Accessibility addon](https://storybook.js.org/docs/writing-tests/accessibility-testing) (`@storybook/addon-a11y`) to integrate it with the component tests feature. This means you can now extend your component tests to include accessibility tests.
 
-In Storybook 8.5, we revamped the Accessibility addon (`@storybook/addon-a11y`) to integrate it with the component tests feature. This means you can now extend your component tests to include accessibility tests. If you upgrade to Storybook 8.5 via `npx storybook@latest upgrade`, the Accessibility addon will be automatically configured to work with the component tests. However, if you're upgrading manually and you have the [addon test](https://storybook.js.org/docs/writing-tests/test-addon) installed, adjust your configuration as follows:
+If you upgrade to Storybook 8.5 via `npx storybook@latest upgrade`, the Accessibility addon will be automatically configured to work with the component tests. However, if you're upgrading manually and you have the Test addon installed, adjust your configuration as follows:
 
 ```diff
-// .storybook/vitest.config.ts
+// .storybook/vitest.setup.ts
 ...
 +import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
 

code/addons/docs/package.json

@@ -71,7 +71,12 @@
     "./angular": "./angular/index.js",
     "./angular/index.js": "./angular/index.js",
     "./web-components/index.js": "./web-components/index.js",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./manager": {
+      "types": "./dist/manager.d.ts",
+      "import": "./dist/manager.mjs",
+      "require": "./dist/manager.js"
+    }
   },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -129,7 +134,11 @@
       "./src/preview.ts",
       "./src/blocks.ts",
       "./src/shims/mdx-react-shim.ts",
-      "./src/mdx-loader.ts"
+      "./src/mdx-loader.ts",
+      "./src/manager.tsx"
+    ],
+    "managerEntries": [
+      "./src/manager.tsx"
     ]
   },
   "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",

code/addons/docs/src/manager.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { AddonPanel, type SyntaxHighlighterFormatTypes } from 'storybook/internal/components';
+import { ADDON_ID, PANEL_ID, PARAM_KEY, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
+import { addons, types, useAddonState, useChannel } from 'storybook/internal/manager-api';
+
+import { Source } from '@storybook/blocks';
+
+addons.register(ADDON_ID, (api) => {
+  addons.add(PANEL_ID, {
+    title: 'Code',
+    type: types.PANEL,
+    paramKey: PARAM_KEY,
+    /**
+     * This code panel can be disabled by the user by adding this parameter:
+     *
+     * @example
+     *
+     * ```ts
+     *  parameters: {
+     *    docs: {
+     *      codePanel: false,
+     *    },
+     *  },
+     * ```
+     */
+    disabled: (parameters) => {
+      return (
+        !!parameters &&
+        typeof parameters[PARAM_KEY] === 'object' &&
+        parameters[PARAM_KEY].codePanel === false
+      );
+    },
+    match: ({ viewMode }) => viewMode === 'story',
+    render: ({ active }) => {
+      const [codeSnippet, setSourceCode] = useAddonState<{
+        source: string;
+        format: SyntaxHighlighterFormatTypes;
+      }>(ADDON_ID, {
+        source: '',
+        format: 'html',
+      });
+
+      useChannel({
+        [SNIPPET_RENDERED]: ({ source, format }) => {
+          setSourceCode({ source, format });
+        },
+      });
+
+      return (
+        <AddonPanel active={!!active}>
+          <Source code={codeSnippet.source} format={codeSnippet.format} dark />
+        </AddonPanel>
+      );
+    },
+  });
+});

code/addons/docs/src/plugins/mdx-plugin.ts

@@ -3,8 +3,6 @@ import { dirname, join } from 'node:path';
 import type { Options } from 'storybook/internal/types';
 
 import { createFilter } from '@rollup/pluginutils';
-import rehypeExternalLinks from 'rehype-external-links';
-import rehypeSlug from 'rehype-slug';
 import type { Plugin } from 'vite';
 
 import type { CompileOptions } from '../compiler';
@@ -24,6 +22,9 @@ export async function mdxPlugin(options: Options): Promise<Plugin> {
   const presetOptions = await presets.apply<Record<string, any>>('options', {});
   const mdxPluginOptions = presetOptions?.mdxPluginOptions as CompileOptions;
 
+  const rehypeSlug = (await import('rehype-slug')).default;
+  const rehypeExternalLinks = (await import('rehype-external-links')).default;
+
   return {
     name: 'storybook:mdx-plugin',
     enforce: 'pre',

code/addons/docs/src/preset.ts

@@ -5,9 +5,6 @@ import type { DocsOptions, Options, PresetProperty } from 'storybook/internal/ty
 
 import type { CsfPluginOptions } from '@storybook/csf-plugin';
 
-import rehypeExternalLinks from 'rehype-external-links';
-import rehypeSlug from 'rehype-slug';
-
 import type { CompileOptions } from './compiler';
 
 /**
@@ -42,6 +39,9 @@ async function webpack(
 
   const { csfPluginOptions = {}, mdxPluginOptions = {} } = options;
 
+  const rehypeSlug = (await import('rehype-slug')).default;
+  const rehypeExternalLinks = (await import('rehype-external-links')).default;
+
   const mdxLoaderOptions: CompileOptions = await options.presets.apply('mdxLoaderOptions', {
     ...mdxPluginOptions,
     mdxCompileOptions: {
@@ -175,6 +175,9 @@ export const viteFinal = async (config: any, options: Options) => {
   const { plugins = [] } = config;
   const { mdxPlugin } = await import('./plugins/mdx-plugin');
 
+  const rehypeSlug = (await import('rehype-slug')).default;
+  const rehypeExternalLinks = (await import('rehype-external-links')).default;
+
   // Use the resolvedReact preset to alias react and react-dom to either the users version or the version shipped with addon-docs
   const { react, reactDom, mdx } = await getResolvedReact(options);
 

code/addons/docs/template/stories/sourcePanel/index.stories.tsx

@@ -0,0 +1,23 @@
+export default {
+  component: globalThis.Components.Button,
+  tags: ['autodocs'],
+  parameters: {
+    chromatic: { disable: true },
+    docs: {
+      codePanel: false,
+    },
+  },
+};
+
+export const One = { args: { label: 'One' } };
+
+export const Two = { args: { label: 'Two' } };
+
+export const WithSource = {
+  args: { label: 'Three' },
+  parameters: {
+    docs: {
+      codePanel: true,
+    },
+  },
+};

code/addons/essentials/package.json

@@ -40,6 +40,7 @@
     },
     "./backgrounds/manager": "./dist/backgrounds/manager.js",
     "./controls/manager": "./dist/controls/manager.js",
+    "./docs/manager": "./dist/docs/manager.js",
     "./docs/preview": {
       "types": "./dist/docs/preview.d.ts",
       "import": "./dist/docs/preview.mjs",
@@ -114,10 +115,14 @@
       "./src/docs/preset.ts",
       "./src/docs/mdx-react-shim.ts"
     ],
+    "entries": [
+      "./src/docs/manager.ts"
+    ],
     "managerEntries": [
       "./src/actions/manager.ts",
       "./src/backgrounds/manager.ts",
       "./src/controls/manager.ts",
+      "./src/docs/manager.ts",
       "./src/measure/manager.ts",
       "./src/outline/manager.ts",
       "./src/toolbars/manager.ts",

code/addons/essentials/src/docs/manager.ts

@@ -0,0 +1,2 @@
+// @ts-expect-error (no types needed for this)
+export * from '@storybook/addon-docs/manager';

code/addons/essentials/src/index.ts

@@ -88,9 +88,9 @@ export function addons(options: PresetOptions) {
 
   // NOTE: The order of these addons is important.
   return [
-    'docs',
     'controls',
     'actions',
+    'docs',
     'backgrounds',
     'viewport',
     'toolbars',

code/addons/test/src/components/Description.tsx

@@ -60,10 +60,10 @@ export function Description({ state, ...props }: DescriptionProps) {
     );
   } else if (state.progress?.finishedAt) {
     description = (
-      <RelativeTime
-        timestamp={new Date(state.progress.finishedAt)}
-        testCount={state.progress.numTotalTests}
-      />
+      <>
+        Ran {state.progress.numTotalTests} {state.progress.numTotalTests === 1 ? 'test' : 'tests'}{' '}
+        <RelativeTime timestamp={state.progress.finishedAt} />
+      </>
     );
   } else if (state.watching) {
     description = 'Watching for file changes';

code/addons/test/src/components/InteractionsPanel.stories.tsx

@@ -58,7 +58,6 @@ const meta = {
     endRef: null,
     // prop for the AddonPanel used as wrapper of Panel
     active: true,
-    storyId: 'story-id',
   },
 } as Meta<typeof InteractionsPanel>;
 

code/addons/test/src/components/InteractionsPanel.tsx

@@ -44,8 +44,6 @@ interface InteractionsPanelProps {
   onScrollToEnd?: () => void;
   hasResultMismatch?: boolean;
   browserTestStatus?: CallStates;
-  storyId: StoryId;
-  testRunId: string;
 }
 
 const Container = styled.div(({ theme }) => ({
@@ -105,20 +103,12 @@ export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
     endRef,
     hasResultMismatch,
     browserTestStatus,
-    storyId,
-    testRunId,
   }) {
     const filter = useAnsiToHtmlFilter();
 
     return (
       <Container>
-        {hasResultMismatch && (
-          <TestDiscrepancyMessage
-            browserTestStatus={browserTestStatus}
-            storyId={storyId}
-            testRunId={testRunId}
-          />
-        )}
+        {hasResultMismatch && <TestDiscrepancyMessage browserTestStatus={browserTestStatus} />}
         {(interactions.length > 0 || hasException) && (
           <Subnav
             controls={controls}