Add react-docgen-typescript support (#167)

* refactor: use official types from react-docgen-typescript

Replace custom type definitions with official ComponentDoc type from react-docgen-typescript package. Extend the official type with exportName property which is added by the manifest. This improves maintainability and alignment with the official package.

* fix: use ComponentDoc from npm correctly in tests

Remove excess `exportName` property and add required `methods` field
to satisfy the ComponentDoc interface from react-docgen-typescript.
Fix formatting with oxfmt.

* move react-docgen-typescript to devDependencies

Only used for type imports, consistent with react-docgen.

* Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: kasperpeulen

packages/mcp/package.json

@@ -41,6 +41,7 @@
 	"devDependencies": {
 		"@tmcp/transport-stdio": "catalog:",
 		"react-docgen": "^8.0.2",
+		"react-docgen-typescript": "^2.4.0",
 		"srvx": "^0.8.16",
 		"tinyexec": "^1.0.2"
 	}

packages/mcp/pnpm-lock.yaml

@@ -1,4 +1,5 @@
 import type { Documentation } from 'react-docgen';
+import type { ComponentDoc } from 'react-docgen-typescript';
 import * as v from 'valibot';
 
 /**
@@ -115,6 +116,12 @@ const Doc = v.object({
 });
 export type Doc = v.InferOutput<typeof Doc>;
 
+/**
+ * Component documentation from react-docgen-typescript, extended with export name.
+ * Matches the shape produced by Storybook's manifest generator.
+ */
+export type ComponentDocWithExportName = ComponentDoc & { exportName: string };
+
 export const ComponentManifest = v.object({
 	...BaseManifest.entries,
 	id: v.string(),
@@ -124,6 +131,8 @@ export const ComponentManifest = v.object({
 	stories: v.optional(v.array(Story)),
 	// loose schema for react-docgen types, as they are pretty complex
 	reactDocgen: v.optional(v.custom<Documentation>(() => true)),
+	// loose schema for react-docgen-typescript types
+	reactDocgenTypescript: v.optional(v.custom<ComponentDocWithExportName>(() => true)),
 	docs: v.optional(v.record(v.string(), Doc)),
 });
 export type ComponentManifest = v.InferOutput<typeof ComponentManifest>;

packages/mcp/src/types.ts

@@ -517,6 +517,158 @@ describe('MarkdownFormatter - formatComponentManifest', () => {
 	});
 
 	describe('props section', () => {
+		it('should format props from reactDocgenTypescript', () => {
+			const manifest: ComponentManifest = {
+				id: 'button',
+				name: 'Button',
+				path: 'src/components/Button.tsx',
+				reactDocgenTypescript: {
+					displayName: 'Button',
+					filePath: 'src/components/Button.tsx',
+					description: '',
+					exportName: 'Button',
+					methods: [],
+					props: {
+						variant: {
+							name: 'variant',
+							description: 'The visual style variant',
+							type: { name: 'enum', raw: '"primary" | "secondary"' },
+							defaultValue: { value: 'primary' },
+							required: false,
+						},
+						disabled: {
+							name: 'disabled',
+							description: 'Whether the button is disabled',
+							type: { name: 'boolean' },
+							defaultValue: { value: 'false' },
+							required: false,
+						},
+						onClick: {
+							name: 'onClick',
+							description: 'Click handler',
+							type: { name: '(event: MouseEvent) => void' },
+							defaultValue: null,
+							required: true,
+						},
+					},
+				},
+			};
+
+			const result = formatComponentManifest(manifest);
+
+			expect(result).toMatchInlineSnapshot(`
+				"# Button
+
+				ID: button
+
+				## Props
+
+				\`\`\`
+				export type Props = {
+				  /**
+				    The visual style variant
+				  */
+				  variant?: "primary" | "secondary" = primary;
+				  /**
+				    Whether the button is disabled
+				  */
+				  disabled?: boolean = false;
+				  /**
+				    Click handler
+				  */
+				  onClick: (event: MouseEvent) => void;
+				}
+				\`\`\`"
+			`);
+		});
+
+		it('should prefer reactDocgen over reactDocgenTypescript when both are present', () => {
+			const manifest: ComponentManifest = {
+				id: 'button',
+				name: 'Button',
+				path: 'src/components/Button.tsx',
+				reactDocgen: {
+					props: {
+						label: {
+							type: { name: 'string' },
+							description: 'From react-docgen',
+						},
+					},
+				},
+				reactDocgenTypescript: {
+					displayName: 'Button',
+					filePath: 'src/components/Button.tsx',
+					description: '',
+					exportName: 'Button',
+					methods: [],
+					props: {
+						label: {
+							name: 'label',
+							description: 'From react-docgen-typescript',
+							type: { name: 'string' },
+							defaultValue: null,
+							required: true,
+						},
+					},
+				},
+			};
+
+			const result = formatComponentManifest(manifest);
+
+			expect(result).toContain('From react-docgen');
+			expect(result).not.toContain('From react-docgen-typescript');
+		});
+
+		it('should limit stories when reactDocgenTypescript has props', () => {
+			const manifest: ComponentManifest = {
+				id: 'button',
+				name: 'Button',
+				path: 'src/components/Button.tsx',
+				import: 'import { Button } from "@/components";',
+				stories: [
+					{ name: 'Default', snippet: '<Button>Default</Button>' },
+					{ name: 'Primary', snippet: '<Button variant="primary">Primary</Button>' },
+					{ name: 'Secondary', snippet: '<Button variant="secondary">Secondary</Button>' },
+					{
+						name: 'Disabled',
+						summary: 'Button in disabled state',
+						snippet: '<Button disabled>Disabled</Button>',
+					},
+					{
+						name: 'WithIcon',
+						description: 'Button with an icon',
+						snippet: '<Button icon="check">With Icon</Button>',
+					},
+				],
+				reactDocgenTypescript: {
+					displayName: 'Button',
+					filePath: 'src/components/Button.tsx',
+					description: '',
+					exportName: 'Button',
+					methods: [],
+					props: {
+						variant: {
+							name: 'variant',
+							description: '',
+							type: { name: 'string' },
+							defaultValue: null,
+							required: false,
+						},
+					},
+				},
+			};
+
+			const result = formatComponentManifest(manifest);
+
+			// Should show first 3 stories in full, then remaining under "Other Stories"
+			expect(result).toContain('### Default');
+			expect(result).toContain('### Primary');
+			expect(result).toContain('### Secondary');
+			expect(result).toContain('### Other Stories');
+			expect(result).toContain('- Disabled: Button in disabled state');
+			expect(result).toContain('- WithIcon: Button with an icon');
+		});
+
 		it('should format props with only name and type as bullet list', () => {
 			const manifest: ComponentManifest = {
 				id: 'button',