Merge pull request storybookjs#35109 from storybookjs/split/docgen-ui-consumption

Docs: Route ArgTypes and Controls through docgen service when flag enabled

Author: JReinhold

AGENTS.md

@@ -258,7 +258,7 @@ Do **not** use `/tmp` paths or replace `node:fs/promises` with a full async fact
 
 After changing files:
 
-1. Format with `yarn fmt:write` (run from the repo root)
+1. **Always** format with `yarn fmt:write`, run from the `code/` directory (`cd code && yarn fmt:write`), once you are done editing. The repo uses `oxfmt`, so hand-written formatting will frequently be wrong — do not skip this step.
 2. Lint with `yarn --cwd code lint:js:cmd <file-relative-to-code-folder> --fix` or `cd code && yarn lint:js:cmd <file-relative-to-code-folder>`
 3. Run relevant tests before submitting a PR
 

code/.storybook/main.ts

@@ -156,7 +156,9 @@ const config = defineMain({
   features: {
     developmentModeForBuild: true,
     experimentalTestSyntax: true,
-    experimentalDocgenServer: true,
+    // Disabled for now: the docgen service does not yet work in production builds. Keeping it off
+    // ensures this branch exercises the normal (non-experimental) docgen path without regressions.
+    experimentalDocgenServer: false,
     experimentalReactComponentMeta: true,
     changeDetection: true,
   },

code/addons/docs/src/blocks/blocks/ArgTypes.mdx

@@ -0,0 +1,73 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+import * as ArgTypesStories from './ArgTypes.stories.tsx';
+import * as ExampleStories from '../examples/ArgTypesParameters.stories';
+import * as SubcomponentsExampleStories from '../examples/ArgTypesWithSubcomponentsParameters.stories';
+
+import { ArgTypes } from './ArgTypes';
+
+<Meta of={ArgTypesStories} />
+
+# ArgTypes block (MDX)
+
+Each section below uses the `ArgTypes` block the same way as the matching story in `ArgTypes.stories.tsx`.
+
+## OfComponent
+
+<ArgTypes of={ExampleStories.default.component} />
+
+## OfMeta
+
+<ArgTypes of={ExampleStories.default} />
+
+## OfStory
+
+<ArgTypes of={ExampleStories.NoParameters} />
+
+## IncludeProp
+
+<ArgTypes of={ExampleStories.NoParameters} include={['a']} />
+
+## IncludeParameter
+
+<ArgTypes of={ExampleStories.Include} />
+
+## ExcludeProp
+
+<ArgTypes of={ExampleStories.NoParameters} exclude={['a']} />
+
+## ExcludeParameter
+
+<ArgTypes of={ExampleStories.Exclude} />
+
+## SortProp
+
+<ArgTypes of={ExampleStories.NoParameters} sort="alpha" />
+
+## SortParameter
+
+<ArgTypes of={ExampleStories.Sort} />
+
+## Categories
+
+<ArgTypes of={ExampleStories.Categories} />
+
+## SubcomponentsOfMeta
+
+<ArgTypes of={SubcomponentsExampleStories.default} />
+
+## SubcomponentsOfStory
+
+<ArgTypes of={SubcomponentsExampleStories.NoParameters} />
+
+## SubcomponentsIncludeProp
+
+<ArgTypes of={SubcomponentsExampleStories.NoParameters} include={['a', 'f']} />
+
+## SubcomponentsExcludeProp
+
+<ArgTypes of={SubcomponentsExampleStories.NoParameters} exclude={['a', 'c', 'f', 'g']} />
+
+## SubcomponentsSortProp
+
+<ArgTypes of={SubcomponentsExampleStories.NoParameters} sort="alpha" />

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

@@ -1,16 +1,13 @@
-import React from 'react';
-
+/** Custom docs page: {@link ./ArgTypes.mdx} (attached via `<Meta of={...} />`). */
 import type { PlayFunctionContext } from 'storybook/internal/csf';
 
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { within } from 'storybook/test';
-
 import * as ExampleStories from '../examples/ArgTypesParameters.stories';
 import * as SubcomponentsExampleStories from '../examples/ArgTypesWithSubcomponentsParameters.stories';
 import { ArgTypes } from './ArgTypes';
 
-const meta: Meta<typeof ArgTypes> = {
+const meta = {
   title: 'Blocks/ArgTypes',
   component: ArgTypes,
   parameters: {
@@ -21,7 +18,8 @@ const meta: Meta<typeof ArgTypes> = {
     ],
     docsStyles: true,
   },
-};
+} satisfies Meta<typeof ArgTypes>;
+
 export default meta;
 
 type Story = StoryObj<typeof meta>;
@@ -108,7 +106,7 @@ export const Categories: Story = {
 };
 
 const findSubcomponentTabs = async (
-  canvas: ReturnType<typeof within>,
+  canvas: Parameters<NonNullable<Story['play']>>[0]['canvas'],
   step: PlayFunctionContext['step']
 ) => {
   let subcomponentATab: HTMLElement | null = null;
@@ -124,26 +122,26 @@ export const SubcomponentsOfMeta: Story = {
   args: {
     of: SubcomponentsExampleStories.default,
   },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
+  play: async ({ canvas, step }) => {
     await findSubcomponentTabs(canvas, step);
   },
 };
 
 export const SubcomponentsOfStory: Story = {
-  ...SubcomponentsOfMeta,
   args: {
     of: SubcomponentsExampleStories.NoParameters,
   },
+  play: async ({ canvas, step }) => {
+    await findSubcomponentTabs(canvas, step);
+  },
 };
 
 export const SubcomponentsIncludeProp: Story = {
   args: {
     of: SubcomponentsExampleStories.NoParameters,
     include: ['a', 'f'],
   },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
+  play: async ({ canvas, step }) => {
     const { subcomponentBTab } = await findSubcomponentTabs(canvas, step);
     if (subcomponentBTab) {
       await (subcomponentBTab as HTMLElement & { click: () => Promise<void> }).click();