From 97fd012d274ed2966200224403adc17ec25a6ef8 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 29 Jan 2026 14:26:52 +0100 Subject: [PATCH 1/2] use correct story name in manifests --- .../react/src/componentManifest/generator.test.ts | 4 ++-- .../react/src/componentManifest/generator.ts | 11 ++++++----- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/code/renderers/react/src/componentManifest/generator.test.ts b/code/renderers/react/src/componentManifest/generator.test.ts index af68047e1dcb..cbacb6d12545 100644 --- a/code/renderers/react/src/componentManifest/generator.test.ts +++ b/code/renderers/react/src/componentManifest/generator.test.ts @@ -215,7 +215,7 @@ test('manifests generates correct id, name, description and examples ', async () "stories": [ { "description": undefined, - "name": "LoggedIn", + "name": "Logged In", "snippet": "const LoggedIn = () =>
;", "summary": undefined, }, diff --git a/code/renderers/react/src/componentManifest/generator.ts b/code/renderers/react/src/componentManifest/generator.ts index 7c8324689bcc..b95d66d7daa8 100644 --- a/code/renderers/react/src/componentManifest/generator.ts +++ b/code/renderers/react/src/componentManifest/generator.ts @@ -1,5 +1,6 @@ import { recast } from 'storybook/internal/babel'; import { Tag } from 'storybook/internal/core-server'; +import { storyNameFromExport } from 'storybook/internal/csf'; import { extractDescription, loadCsf } from 'storybook/internal/csf-tools'; import { logger } from 'storybook/internal/node-logger'; import type { DocsIndexEntry, IndexEntry } from 'storybook/internal/types'; @@ -61,22 +62,22 @@ function extractStories( // Only include stories that are in the list of entries already filtered for the 'manifest' tag manifestEntryIds.has(story.id) ) - .map(([storyName]) => { + .map(([storyExport, story]) => { try { - const jsdocComment = extractDescription(csf._storyStatements[storyName]); + const jsdocComment = extractDescription(csf._storyStatements[storyExport]); const { tags = {}, description } = jsdocComment ? extractJSDocInfo(jsdocComment) : {}; const finalDescription = (tags?.describe?.[0] || tags?.desc?.[0]) ?? description; return { - name: storyName, - snippet: recast.print(getCodeSnippet(csf, storyName, componentName)).code, + name: story.name ?? storyNameFromExport(storyExport), + snippet: recast.print(getCodeSnippet(csf, storyExport, componentName)).code, description: finalDescription?.trim(), summary: tags.summary?.[0], }; } catch (e) { invariant(e instanceof Error); return { - name: storyName, + name: story.name ?? storyNameFromExport(storyExport), error: { name: e.name, message: e.message }, }; } From 1f3acef1795b7ec8c713711223f3c95e54f1ee3e Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 3 Feb 2026 09:41:09 +0100 Subject: [PATCH 2/2] add story id to manifests --- .../src/componentManifest/generator.test.ts | 415 ++++++++++-------- .../react/src/componentManifest/generator.ts | 2 + 2 files changed, 226 insertions(+), 191 deletions(-) diff --git a/code/renderers/react/src/componentManifest/generator.test.ts b/code/renderers/react/src/componentManifest/generator.test.ts index cbacb6d12545..1bf32627f73d 100644 --- a/code/renderers/react/src/componentManifest/generator.test.ts +++ b/code/renderers/react/src/componentManifest/generator.test.ts @@ -20,222 +20,228 @@ test('manifests generates correct id, name, description and examples ', async () const result = await manifests(undefined, { manifestEntries } as any); expect(result?.components).toMatchInlineSnapshot(` - { - "components": { - "example-button": { - "description": "Primary UI component for user interaction", - "error": undefined, - "id": "example-button", - "import": "import { Button } from "@design-system/components/override";", - "jsDocTags": { - "import": [ - "import { Button } from '@design-system/components/override';", - ], - }, - "name": "Button", - "path": "./src/stories/Button.stories.ts", - "reactDocgen": { - "actualName": "Button", - "definedInFile": "./src/stories/Button.tsx", - "description": "Primary UI component for user interaction - @import import { Button } from '@design-system/components/override';", - "displayName": "Button", - "exportName": "Button", - "methods": [], - "props": { - "backgroundColor": { - "description": "", - "required": false, - "tsType": { - "name": "string", + { + "components": { + "example-button": { + "description": "Primary UI component for user interaction", + "error": undefined, + "id": "example-button", + "import": "import { Button } from "@design-system/components/override";", + "jsDocTags": { + "import": [ + "import { Button } from '@design-system/components/override';", + ], + }, + "name": "Button", + "path": "./src/stories/Button.stories.ts", + "reactDocgen": { + "actualName": "Button", + "definedInFile": "./src/stories/Button.tsx", + "description": "Primary UI component for user interaction + @import import { Button } from '@design-system/components/override';", + "displayName": "Button", + "exportName": "Button", + "methods": [], + "props": { + "backgroundColor": { + "description": "", + "required": false, + "tsType": { + "name": "string", + }, }, - }, - "label": { - "description": "", - "required": true, - "tsType": { - "name": "string", + "label": { + "description": "", + "required": true, + "tsType": { + "name": "string", + }, }, - }, - "onClick": { - "description": "", - "required": false, - "tsType": { - "name": "signature", - "raw": "() => void", - "signature": { - "arguments": [], - "return": { - "name": "void", + "onClick": { + "description": "", + "required": false, + "tsType": { + "name": "signature", + "raw": "() => void", + "signature": { + "arguments": [], + "return": { + "name": "void", + }, }, + "type": "function", }, - "type": "function", - }, - }, - "primary": { - "defaultValue": { - "computed": false, - "value": "false", }, - "description": "Description of primary", - "required": false, - "tsType": { - "name": "boolean", - }, - }, - "size": { - "defaultValue": { - "computed": false, - "value": "'medium'", + "primary": { + "defaultValue": { + "computed": false, + "value": "false", + }, + "description": "Description of primary", + "required": false, + "tsType": { + "name": "boolean", + }, }, - "description": "", - "required": false, - "tsType": { - "elements": [ - { - "name": "literal", - "value": "'small'", - }, - { - "name": "literal", - "value": "'medium'", - }, - { - "name": "literal", - "value": "'large'", - }, - ], - "name": "union", - "raw": "'small' | 'medium' | 'large'", + "size": { + "defaultValue": { + "computed": false, + "value": "'medium'", + }, + "description": "", + "required": false, + "tsType": { + "elements": [ + { + "name": "literal", + "value": "'small'", + }, + { + "name": "literal", + "value": "'medium'", + }, + { + "name": "literal", + "value": "'large'", + }, + ], + "name": "union", + "raw": "'small' | 'medium' | 'large'", + }, }, }, }, - }, - "stories": [ - { - "description": undefined, - "name": "Primary", - "snippet": "const Primary = () =>