Release: Prerelease 9.0.0-alpha.18

CHANGELOG.prerelease.md

@@ -1,3 +1,9 @@
+## 9.0.0-alpha.18
+
+- Addon-vitest: Fix coverage when restarting Vitest due to config change - [#31069](https://github.com/storybookjs/storybook/pull/31069), thanks @JReinhold!
+- Automigration: Misc addon-essentials migration fixes - [#31072](https://github.com/storybookjs/storybook/pull/31072), thanks @valentinpalkovic!
+- Docs: Consolidate blocks into addon-docs - [#31097](https://github.com/storybookjs/storybook/pull/31097), thanks @ndelangen!
+
 ## 9.0.0-alpha.17
 
 - Addon Test: Rename `@storybook/experimental-addon-test` to `@storybook/addon-vitest` - [#31014](https://github.com/storybookjs/storybook/pull/31014), thanks @valentinpalkovic!

MIGRATION.md

@@ -1,6 +1,7 @@
 <h1>Migration</h1>
 
 - [From version 8.x to 9.0.0](#from-version-8x-to-900)
+  - [Consolidate `@storybook/blocks` into addon docs](#consolidate-storybookblocks-into-addon-docs)
   - [Vitest 2.0 support is dropped](#vitest-20-support-is-dropped)
   - [Package Manager Support](#package-manager-support)
   - [A11y addon: Removed deprecated manual parameter](#a11y-addon-removed-deprecated-manual-parameter)
@@ -435,6 +436,12 @@
 
 ## From version 8.x to 9.0.0
 
+### Consolidate `@storybook/blocks` into addon docs
+
+The package `@storybook/blocks` is no longer published as of Storybook 9.
+
+All exports can now be found in the export `@storybook/addon-docs/blocks`.
+
 ### Vitest 2.0 support is dropped
 
 The Storybook Test addon now only supports Vitest 3.0 and higher, which is where browser mode was made into a stable state. Please upgrade to Vitest 3.0.
@@ -919,7 +926,6 @@ For more information on upgrading to Vite 5, see the [Vite Migration Guide](http
 
 ### Framework-specific changes
 
-
 #### Svelte: Require v5 and up
 
 Storybook has dropped support for Svelte versions 3 and 4. The minimum supported version is now Svelte 5.

code/.storybook/main.ts

@@ -127,10 +127,6 @@ const config = defineMain({
         },
       },
       plugins: [react()],
-      optimizeDeps: {
-        force: true,
-        include: ['@storybook/blocks'],
-      },
       build: {
         // disable sourcemaps in CI to not run out of memory
         sourcemap: process.env.CI !== 'true',

code/.storybook/preview.tsx

@@ -2,7 +2,6 @@ import React, { type FC, Fragment, useEffect } from 'react';
 
 import type { Channel } from 'storybook/internal/channels';
 
-import { DocsContext } from '@storybook/blocks';
 import { global } from '@storybook/global';
 
 import type { Decorator, Loader, ReactRenderer } from '@storybook/react-vite';
@@ -12,6 +11,7 @@ import { definePreview } from '@storybook/react-vite';
 
 import addonA11y from '@storybook/addon-a11y';
 import addonDocs from '@storybook/addon-docs';
+import { DocsContext } from '@storybook/addon-docs/blocks';
 import addonThemes from '@storybook/addon-themes';
 import addonTest from '@storybook/addon-vitest';
 
@@ -27,8 +27,8 @@ import {
   useTheme,
 } from 'storybook/theming';
 
+import { DocsPageWrapper } from '../addons/docs/src/blocks/components';
 import * as templatePreview from '../core/template/stories/preview';
-import { DocsPageWrapper } from '../lib/blocks/src/components';
 import '../renderers/react/template/components/index';
 import { isChromatic } from './isChromatic';
 

code/addons/docs/README.md

@@ -47,7 +47,7 @@ Here's an example file:
 <!-- prettier-ignore-start -->
 
 ```md
-import { Meta, Story, Canvas } from '@storybook/blocks';
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 import * as CheckboxStories from './Checkbox.stories';
 
 <Meta title="MDX/Checkbox" of={CheckboxStories} />

code/addons/docs/package.json

@@ -122,8 +122,8 @@
   },
   "dependencies": {
     "@mdx-js/react": "^3.0.0",
-    "@storybook/blocks": "workspace:*",
     "@storybook/csf-plugin": "workspace:*",
+    "@storybook/icons": "^1.2.12",
     "@storybook/react-dom-shim": "workspace:*",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
@@ -132,11 +132,21 @@
   "devDependencies": {
     "@mdx-js/mdx": "^3.0.0",
     "@rollup/pluginutils": "^5.0.2",
+    "@types/color-convert": "^2.0.0",
     "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "color-convert": "^2.0.1",
+    "es-toolkit": "^1.22.0",
+    "github-slugger": "^2.0.0",
+    "markdown-to-jsx": "^7.7.2",
+    "memoizerific": "^1.11.3",
+    "polished": "^4.2.2",
     "react": "^18.2.0",
+    "react-colorful": "^5.1.2",
     "react-dom": "^18.2.0",
     "rehype-external-links": "^3.0.0",
     "rehype-slug": "^6.0.0",
+    "telejson": "^7.2.0",
+    "tocbot": "^4.20.1",
     "typescript": "^5.7.3",
     "vite": "^6.2.5"
   },
@@ -153,8 +163,7 @@
       "./src/preview.ts",
       "./src/blocks.ts",
       "./src/shims/mdx-react-shim.ts",
-      "./src/mdx-loader.ts",
-      "./src/manager.tsx"
+      "./src/mdx-loader.ts"
     ],
     "managerEntries": [
       "./src/manager.tsx"

code/addons/docs/src/DocsRenderer.tsx

@@ -8,10 +8,12 @@ import type {
   Renderer,
 } from 'storybook/internal/types';
 
-import { AnchorMdx, CodeOrSourceMdx, Docs, HeadersMdx } from '@storybook/blocks';
-
 import { renderElement, unmountElement } from '@storybook/react-dom-shim';
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore (these types only work once the package is compiled)
+import { AnchorMdx, CodeOrSourceMdx, Docs, HeadersMdx } from '@storybook/addon-docs/blocks';
+
 // TS doesn't like that we export a component with types that it doesn't know about (TS4203)
 export const defaultComponents: Record<string, any> = {
   code: CodeOrSourceMdx,

code/addons/docs/src/blocks.ts

@@ -1,7 +1,7 @@
-import { deprecate } from 'storybook/internal/client-logger';
+// FIXME: sort this out, maybe with package.json exports map
+// https://medium.com/swlh/npm-new-package-json-exports-field-1a7d1f489ccf
+export { ArgsTable as PureArgsTable } from './blocks/components';
+export type { SortType } from './blocks/components';
 
-deprecate(
-  "Import from '@storybook/addon-docs/blocks' is deprecated. Please import from '@storybook/blocks' instead."
-);
-
-export * from '@storybook/blocks';
+export * from './blocks/blocks';
+export * from './blocks/controls';

code/lib/blocks/src/blocks/ArgTypes.stories.tsx → code/addons/docs/src/blocks/blocks/ArgTypes.stories.tsx

@@ -112,8 +112,8 @@ const findSubcomponentTabs = async (
   canvas: ReturnType<typeof within>,
   step: PlayFunctionContext['step']
 ) => {
-  let subcomponentATab: HTMLElement;
-  let subcomponentBTab: HTMLElement;
+  let subcomponentATab: HTMLElement | null = null;
+  let subcomponentBTab: HTMLElement | null = null;
   await step('should have tabs for the subcomponents', async () => {
     subcomponentATab = await canvas.findByText('SubcomponentA');
     subcomponentBTab = await canvas.findByText('SubcomponentB');
@@ -146,7 +146,9 @@ export const SubcomponentsIncludeProp: Story = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const { subcomponentBTab } = await findSubcomponentTabs(canvas, step);
-    await subcomponentBTab.click();
+    if (subcomponentBTab) {
+      await (subcomponentBTab as HTMLElement & { click: () => Promise<void> }).click();
+    }
   },
 };
 

code/lib/blocks/src/blocks/ArgTypes.tsx → code/addons/docs/src/blocks/blocks/ArgTypes.tsx

@@ -31,7 +31,7 @@ function extractComponentArgTypes(
   if (!extractArgTypes) {
     throw new Error(ArgsTableError.ARGS_UNSUPPORTED);
   }
-  return extractArgTypes(component);
+  return extractArgTypes(component) as StrictArgTypes;
 }
 
 function getArgTypesFromResolved(resolved: ReturnType<typeof useOf>) {
@@ -41,7 +41,7 @@ function getArgTypesFromResolved(resolved: ReturnType<typeof useOf>) {
       projectAnnotations: { parameters },
     } = resolved;
     return {
-      argTypes: extractComponentArgTypes(component, parameters),
+      argTypes: extractComponentArgTypes(component, parameters as Parameters),
       parameters,
       component,
     };
@@ -69,26 +69,30 @@ export const ArgTypes: FC<ArgTypesProps> = (props) => {
   }
   const resolved = useOf(of || 'meta');
   const { argTypes, parameters, component, subcomponents } = getArgTypesFromResolved(resolved);
-  const argTypesParameters = parameters.docs?.argTypes || ({} as ArgTypesParameters);
+  const argTypesParameters = parameters?.docs?.argTypes || ({} as ArgTypesParameters);
 
   const include = props.include ?? argTypesParameters.include;
   const exclude = props.exclude ?? argTypesParameters.exclude;
   const sort = props.sort ?? argTypesParameters.sort;
 
   const filteredArgTypes = filterArgTypes(argTypes, include, exclude);
 
-  const hasSubcomponents = Boolean(subcomponents) && Object.keys(subcomponents).length > 0;
+  const hasSubcomponents = Boolean(subcomponents) && Object.keys(subcomponents || {}).length > 0;
 
   if (!hasSubcomponents) {
-    return <PureArgsTable rows={filteredArgTypes} sort={sort} />;
+    return <PureArgsTable rows={filteredArgTypes as any} sort={sort} />;
   }
 
-  const mainComponentName = getComponentName(component);
+  const mainComponentName = getComponentName(component) || 'Main';
   const subcomponentTabs = Object.fromEntries(
-    Object.entries(subcomponents).map(([key, comp]) => [
+    Object.entries(subcomponents || {}).map(([key, comp]) => [
       key,
       {
-        rows: filterArgTypes(extractComponentArgTypes(comp, parameters), include, exclude),
+        rows: filterArgTypes(
+          extractComponentArgTypes(comp, parameters as Parameters),
+          include,
+          exclude
+        ),
         sort,
       },
     ])
@@ -97,5 +101,5 @@ export const ArgTypes: FC<ArgTypesProps> = (props) => {
     [mainComponentName]: { rows: filteredArgTypes, sort },
     ...subcomponentTabs,
   };
-  return <TabbedArgsTable tabs={tabs} sort={sort} />;
+  return <TabbedArgsTable tabs={tabs as any} sort={sort} />;
 };

code/lib/blocks/src/blocks/Canvas.tsx → code/addons/docs/src/blocks/blocks/Canvas.tsx

@@ -19,7 +19,7 @@ type CanvasProps = Pick<PurePreviewProps, 'withToolbar' | 'additionalActions' |
    * Pass the export defining a story to render that story
    *
    * ```jsx
-   * import { Meta, Canvas } from '@storybook/blocks';
+   * import { Meta, Canvas } from '@storybook/addon-docs/blocks';
    * import * as ButtonStories from './Button.stories';
    *
    * <Meta of={ButtonStories} />
@@ -31,7 +31,7 @@ type CanvasProps = Pick<PurePreviewProps, 'withToolbar' | 'additionalActions' |
    * Pass all exports of the CSF file if this MDX file is unattached
    *
    * ```jsx
-   * import { Canvas } from '@storybook/blocks';
+   * import { Canvas } from '@storybook/addon-docs/blocks';
    * import * as ButtonStories from './Button.stories';
    *
    * <Canvas of={ButtonStories.Primary} meta={ButtonStories} />;

code/lib/blocks/src/blocks/Controls.stories.tsx → code/addons/docs/src/blocks/blocks/Controls.stories.tsx

@@ -102,8 +102,8 @@ const findSubcomponentTabs = async (
   canvas: ReturnType<typeof within>,
   step: PlayFunctionContext['step']
 ) => {
-  let subcomponentATab: HTMLElement;
-  let subcomponentBTab: HTMLElement;
+  let subcomponentATab: HTMLElement | null = null;
+  let subcomponentBTab: HTMLElement | null = null;
   await step('should have tabs for the subcomponents', async () => {
     subcomponentATab = await canvas.findByText('SubcomponentA');
     subcomponentBTab = await canvas.findByText('SubcomponentB');
@@ -129,7 +129,9 @@ export const SubcomponentsIncludeProp: Story = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const { subcomponentBTab } = await findSubcomponentTabs(canvas, step);
-    await subcomponentBTab.click();
+    if (subcomponentBTab) {
+      await (subcomponentBTab as HTMLElement & { click: () => Promise<void> }).click();
+    }
   },
 };
 

code/lib/blocks/src/blocks/Controls.tsx → code/addons/docs/src/blocks/blocks/Controls.tsx

@@ -34,7 +34,7 @@ function extractComponentArgTypes(
   if (!extractArgTypes) {
     throw new Error(ArgsTableError.ARGS_UNSUPPORTED);
   }
-  return extractArgTypes(component);
+  return extractArgTypes(component) as StrictArgTypes;
 }
 
 export const Controls: FC<ControlsProps> = (props) => {
@@ -57,15 +57,15 @@ export const Controls: FC<ControlsProps> = (props) => {
 
   const filteredArgTypes = filterArgTypes(argTypes, include, exclude);
 
-  const hasSubcomponents = Boolean(subcomponents) && Object.keys(subcomponents).length > 0;
+  const hasSubcomponents = Boolean(subcomponents) && Object.keys(subcomponents || {}).length > 0;
 
   if (!hasSubcomponents) {
     if (!(Object.keys(filteredArgTypes).length > 0 || Object.keys(args).length > 0)) {
       return null;
     }
     return (
       <PureArgsTable
-        rows={filteredArgTypes}
+        rows={filteredArgTypes as any}
         sort={sort}
         args={args}
         globals={globals}
@@ -75,9 +75,9 @@ export const Controls: FC<ControlsProps> = (props) => {
     );
   }
 
-  const mainComponentName = getComponentName(component);
+  const mainComponentName = getComponentName(component) || 'Story';
   const subcomponentTabs = Object.fromEntries(
-    Object.entries(subcomponents).map(([key, comp]) => [
+    Object.entries(subcomponents || {}).map(([key, comp]) => [
       key,
       {
         rows: filterArgTypes(extractComponentArgTypes(comp, parameters), include, exclude),
@@ -91,7 +91,7 @@ export const Controls: FC<ControlsProps> = (props) => {
   };
   return (
     <TabbedArgsTable
-      tabs={tabs}
+      tabs={tabs as any}
       sort={sort}
       args={args}
       globals={globals}

code/lib/blocks/src/blocks/Description.tsx → code/addons/docs/src/blocks/blocks/Description.tsx

@@ -44,7 +44,7 @@ const getDescriptionFromResolvedOf = (resolvedOf: ReturnType<typeof useOf>): str
         projectAnnotations: { parameters },
       } = resolvedOf;
       return (
-        parameters.docs?.extractComponentDescription?.(component, {
+        parameters?.docs?.extractComponentDescription?.(component, {
           component,
           parameters,
         }) || null

code/lib/blocks/src/blocks/DocsContainer.tsx → code/addons/docs/src/blocks/blocks/DocsContainer.tsx

@@ -56,7 +56,7 @@ export const DocsContainer: FC<PropsWithChildren<DocsContainerProps>> = ({
   return (
     <DocsContext.Provider value={context}>
       <SourceContainer channel={context.channel}>
-        <ThemeProvider theme={ensureTheme(theme)}>
+        <ThemeProvider theme={ensureTheme(theme as ThemeVars)}>
           <DocsPageWrapper
             toc={
               toc ? (

code/lib/blocks/src/blocks/Source.tsx → code/addons/docs/src/blocks/blocks/Source.tsx

@@ -29,7 +29,7 @@ export type SourceProps = SourceParameters & {
    * Pass the export defining a story to render its source
    *
    * ```jsx
-   * import { Source } from '@storybook/blocks';
+   * import { Source } from '@storybook/addon-docs/blocks';
    * import * as ButtonStories from './Button.stories';
    *
    * <Source of={ButtonStories.Primary} />;
@@ -85,7 +85,7 @@ const useCode = ({
   const code = useSnippet ? snippet : sourceParameters.originalSource || '';
   const transformer = transformFromProps ?? sourceParameters.transform;
 
-  const transformedCode = useTransformCode(code, transformer, storyContext);
+  const transformedCode = transformer ? useTransformCode(code, transformer, storyContext) : code;
 
   if (sourceParameters.code !== undefined) {
     return sourceParameters.code;
@@ -130,7 +130,7 @@ export const useSourceProps = (
   const transformedCode = useCode({
     snippet: source ? source.code : '',
     storyContext: { ...storyContext, args: argsForSource },
-    typeFromProps: props.type,
+    typeFromProps: props.type as SourceType,
     transformFromProps: props.transform,
   });
 
@@ -157,7 +157,7 @@ export const useSourceProps = (
     };
   }
 
-  format = source.format ?? true;
+  format = source?.format ?? true;
 
   return {
     code: transformedCode,

code/lib/blocks/src/blocks/SourceContainer.tsx → code/addons/docs/src/blocks/blocks/SourceContainer.tsx

@@ -44,7 +44,7 @@ export const SourceContainer: FC<PropsWithChildren<{ channel: DocsContextProps['
   useEffect(() => {
     const handleSnippetRendered = (
       idOrEvent: StoryId | SnippetRenderedEvent,
-      inputSource: string = null,
+      inputSource: string | null = null,
       inputFormat: SyntaxHighlighterFormatTypes = false
     ) => {
       const {
@@ -75,7 +75,7 @@ export const SourceContainer: FC<PropsWithChildren<{ channel: DocsContextProps['
           ...current,
           [id]: {
             ...current[id],
-            [hash]: { code: source, format },
+            [hash]: { code: source || '', format },
           },
         };