fix(mcp): expand aliased enum values in react-docgen-typescript output

When a prop's type is a named alias of a string-literal union (e.g.
`variant?: ButtonVariant`), `shouldExtractLiteralValuesFromEnum` makes
RDT record the alias name in `type.raw` and the resolved literals in
`type.value`. The serializer only read `type.raw`, so consumers got the
alias name and lost the member list (`variant?: ButtonVariant` instead
of `variant?: "primary" | "neutral" | ...`).

Walk `type.value` for `enum`-named types and fall back to `type.raw` /
`type.name` only when no members are present. Inline and aliased unions
now render the same way.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: keidy9

.changeset/fix-rdt-aliased-enum-values.md

@@ -0,0 +1,7 @@
+---
+'@storybook/mcp': patch
+---
+
+Expand aliased string-literal unions in `react-docgen-typescript` output.
+
+When a prop's type is a named alias of a string-literal union (e.g. `variant?: ButtonVariant`), `shouldExtractLiteralValuesFromEnum` makes RDT record the alias name in `type.raw` and the resolved members in `type.value`. The previous serializer only read `type.raw`, so consumers received the alias name and lost the member list. The serializer now walks `type.value` for `enum`-named types and falls back to `type.raw` / `type.name` only when no members are present, so inline and aliased unions render the same way.

packages/mcp/src/utils/parse-react-docgen.test.ts

@@ -348,7 +348,7 @@ describe('parseReactDocgenTypescript', () => {
 		`);
 	});
 
-	test('prefers type.raw over type.name for enums', () => {
+	test('expands enum members for inline string-literal unions', () => {
 		const result = parseReactDocgenTypescript({
 			displayName: 'Button',
 			filePath: 'src/Button.tsx',
@@ -382,6 +382,57 @@ describe('parseReactDocgenTypescript', () => {
 		`);
 	});
 
+	test('expands enum members when type.raw is a named alias (not the inline union)', () => {
+		// With `shouldExtractLiteralValuesFromEnum: true`, RDT records `type.raw` as the
+		// alias name (e.g. "ButtonVariant") and puts the resolved literals in `type.value`.
+		// Without expanding `type.value`, the alias name leaks through and downstream
+		// consumers lose the actual member list.
+		const result = parseReactDocgenTypescript({
+			displayName: 'Button',
+			filePath: 'src/Button.tsx',
+			description: '',
+			methods: [],
+			props: {
+				variant: {
+					name: 'variant',
+					description: 'The variant',
+					type: {
+						name: 'enum',
+						raw: 'ButtonVariant',
+						value: [
+							{ value: '"primary"' },
+							{ value: '"neutral"' },
+							{ value: '"danger"' },
+							{ value: '"custom"' },
+						],
+					},
+					defaultValue: { value: 'primary' },
+					required: false,
+				},
+			},
+		});
+		expect(result.props.variant!.type).toBe('"primary" | "neutral" | "danger" | "custom"');
+	});
+
+	test('falls back to type.raw when enum has no value array', () => {
+		const result = parseReactDocgenTypescript({
+			displayName: 'Button',
+			filePath: 'src/Button.tsx',
+			description: '',
+			methods: [],
+			props: {
+				variant: {
+					name: 'variant',
+					description: '',
+					type: { name: 'enum', raw: 'ButtonVariant' } as never,
+					defaultValue: null,
+					required: false,
+				},
+			},
+		});
+		expect(result.props.variant!.type).toBe('ButtonVariant');
+	});
+
 	test('falls back to type.name when type.raw is not present', () => {
 		const result = parseReactDocgenTypescript({
 			displayName: 'Callback',

packages/mcp/src/utils/parse-react-docgen.ts

@@ -92,10 +92,34 @@ export const parseReactDocgen = (reactDocgen: Documentation): ParsedDocgen => {
 	};
 };
 
+/**
+ * Serialize a react-docgen-typescript prop type into a TypeScript-like string.
+ *
+ * For enum types (which RDT uses for both string-literal unions and TS enums when
+ * `shouldExtractLiteralValuesFromEnum` is enabled), `type.raw` only contains the
+ * literal members when the union is written inline on the prop. When the prop
+ * references a named alias (e.g. `variant?: ButtonVariant`), `type.raw` is just
+ * the alias name, while the resolved literal members live in `type.value`.
+ * Walking `type.value` ensures aliased unions are expanded the same as inline ones.
+ */
+const serializeRdtType = (
+	type: ComponentDoc['props'][string]['type'] | undefined,
+): string | undefined => {
+	if (!type) return undefined;
+	const value = (type as { value?: unknown }).value;
+	if (type.name === 'enum' && Array.isArray(value)) {
+		const members = value
+			.map((v) => (v && typeof v === 'object' && 'value' in v ? (v as { value: unknown }).value : undefined))
+			.filter((v): v is string => typeof v === 'string');
+		if (members.length > 0) return members.join(' | ');
+	}
+	return type.raw ?? type.name;
+};
+
 /**
  * Parse react-docgen-typescript output into the same simplified ParsedDocgen format.
  * RDT uses flat type strings (prop.type.name / prop.type.raw) instead of react-docgen's
- * nested tsType structure, so no serialization is needed.
+ * nested tsType structure.
  */
 const parseComponentDocLike = (componentDoc: ComponentDocLike): ParsedDocgen => {
 	const props = componentDoc.props ?? {};
@@ -105,9 +129,7 @@ const parseComponentDocLike = (componentDoc: ComponentDocLike): ParsedDocgen =>
 				propName,
 				{
 					description: prop.description || undefined,
-					// RDT uses prop.type.name as a flat string (e.g. "() => void", "{ id: string }")
-					// For enums, prefer prop.type.raw which has the full union
-					type: prop.type?.raw ?? prop.type?.name,
+					type: serializeRdtType(prop.type),
 					defaultValue: prop.defaultValue?.value,
 					required: prop.required,
 				},