Merge pull request #33878 from storybookjs/kasper/fix-manifest-stories-no-title

React: Fix manifest stories empty when meta has no explicit title
(cherry picked from commit a5282fc)

Author: kasperpeulen

code/renderers/react/src/componentManifest/generator.test.ts

@@ -575,6 +575,89 @@ test('should create component manifest when only attached-mdx docs have manifest
   `);
 });
 
+test('stories are populated when meta has no explicit title', async () => {
+  vol.fromJSON(
+    {
+      ['./package.json']: JSON.stringify({ name: 'some-package' }),
+      ['./src/stories/Card.stories.ts']: dedent`
+        import type { Meta, StoryObj } from '@storybook/react';
+        import { Card } from './Card';
+
+        const meta: Meta<typeof Card> = {
+          component: Card,
+        };
+        export default meta;
+        type Story = StoryObj<typeof meta>;
+
+        export const Default: Story = { args: { label: 'Click me' } };
+        export const Large: Story = { args: { label: 'Big button', size: 'large' } };
+      `,
+      ['./src/stories/Card.tsx']: dedent`
+        import React from 'react';
+        export interface CardProps {
+          label: string;
+          size?: 'small' | 'large';
+        }
+
+        /** A simple card component */
+        export const Card = ({ label, size }: CardProps) => {
+          return <div className={size}>{label}</div>;
+        };
+      `,
+    },
+    '/app'
+  );
+
+  const manifestEntries = [
+    {
+      type: 'story',
+      subtype: 'story',
+      id: 'card--default',
+      name: 'Default',
+      title: 'Card',
+      importPath: './src/stories/Card.stories.ts',
+      componentPath: './src/stories/Card.tsx',
+      tags: [Tag.DEV, Tag.TEST, Tag.MANIFEST],
+      exportName: 'Default',
+    },
+    {
+      type: 'story',
+      subtype: 'story',
+      id: 'card--large',
+      name: 'Large',
+      title: 'Card',
+      importPath: './src/stories/Card.stories.ts',
+      componentPath: './src/stories/Card.tsx',
+      tags: [Tag.DEV, Tag.TEST, Tag.MANIFEST],
+      exportName: 'Large',
+    },
+  ];
+
+  const result = await manifests(undefined, { manifestEntries } as any);
+  const component = result?.components?.components?.['card'];
+
+  // When no explicit title is in the meta, stories should still be populated
+  // because the generator should use the index entry's title as fallback
+  expect(component?.stories).toMatchInlineSnapshot(`
+    [
+      {
+        "description": undefined,
+        "id": "card--default",
+        "name": "Default",
+        "snippet": "const Default = () => <Card label="Click me" />;",
+        "summary": undefined,
+      },
+      {
+        "description": undefined,
+        "id": "card--large",
+        "name": "Large",
+        "snippet": "const Large = () => <Card label="Big button" size="large" />;",
+        "summary": undefined,
+      },
+    ]
+  `);
+});
+
 test('should extract story description and summary from JSDoc comments', async () => {
   const code = withCSF3(dedent`
     /**

code/renderers/react/src/componentManifest/generator.ts

@@ -130,7 +130,7 @@ export const manifests: PresetPropertyFn<
             (entry as DocsIndexEntry).storiesImports[0];
       const absoluteImportPath = path.join(process.cwd(), storyFilePath);
       const storyFile = cachedReadFileSync(absoluteImportPath, 'utf-8') as string;
-      const csf = loadCsf(storyFile, { makeTitle: (title) => title ?? 'No title' }).parse();
+      const csf = loadCsf(storyFile, { makeTitle: () => entry.title }).parse();
 
       const componentName = csf._meta?.component;
       const id = entry.id.split('--')[0];