PDD-CLI Bug: Misunderstands React Component Prop Types

[jiaminc-cmu]

PDD-CLI Bug: Misunderstands React Component Prop Types

PDD-CLI generates React component usage with props that pass JSX elements when the component expects component references, or uses wrong prop names/types. This happens because PDD doesn't parse TypeScript prop interfaces.

Why this matters: TypeScript compilation fails, or components receive wrong prop types causing runtime errors.

Concrete Example

Imagine a React component that takes an icon as a prop:

// components/Card.tsx
import { LucideIcon } from 'lucide-react';

interface CardProps {
  title: string;
  icon: LucideIcon;        // ← Expects component reference, not JSX
  value: number;
}

export function Card({ title, icon: Icon, value }: CardProps) {
  return <div><Icon /> {title}: {value}</div>;
}

When PDD-CLI generates usage of this component:

// PDD generated this (WRONG):
import { Users } from 'lucide-react';
import { Card } from './components/Card';

<Card
  title="Users"
  icon={<Users />}     // ← Passing JSX element
  value={100}
/>

// Should have generated (CORRECT):
import { Users } from 'lucide-react';
import { Card } from './components/Card';

<Card
  title="Users"
  icon={Users}         // ← Passing component reference
  value={100}
/>

What went wrong: PDD saw icon prop and assumed it should render the icon, so it passed <Users />. But the prop type is LucideIcon (a component type), not ReactElement.

Impact: Type 'Element' is not assignable to type 'LucideIcon' - TypeScript compilation fails.

Why PDD Makes This Mistake

PDD-CLI currently:

• Assumes props that look like UI elements should be rendered (icon={<Icon />})
• Doesn't understand difference between ComponentType<T> and ReactElement
• Doesn't parse prop interface definitions

But it should:

1. Parse TypeScript component prop interfaces
2. Detect when props expect component references vs elements
3. Generate correct syntax for each case

How to Prevent This in PDD-CLI

What PDD should do differently:

1. Parse prop interfaces: Extract TypeScript interface for component props.

2. Understand React types: Recognize ComponentType, FC, LucideIcon as component reference types (not elements).

3. Generate type-correct props: For component reference props, pass reference without JSX brackets.

Example improvement:

Current: <Card icon={...} /> → assume render → icon={<Users />}

Improved: <Card icon={...} /> → parse CardProps:
  - icon: LucideIcon (ComponentType)
→ Generate: icon={Users} (reference, not element)

Severity

P1 - High Priority

• Frequency: Medium - affects component library integration
• Impact: Build failures, blocks development
• Detectability: High - TypeScript catches immediately
• Prevention cost: Medium - requires TypeScript AST parsing

Category

schema-validation

Related Issues

• Generated tests use incorrect sys.modules paths for mocking #412 - Constructor validation (same schema validation gap)
• Generated tests use fragile try/except ImportError pattern for mocking #413 - Function export checking (similar verification need)
• Fix #418: Clean up temp directories when git clone fails #421 - Component library structure assumptions

---

For Contributors: Discovered in frontend/src/components/crm/AnalyticsDashboard.tsx, fixed in commit 34a651d5.

[jiaminc-cmu]

Closing: These issues were created from a private test case and contain too much context-specific information for open source contributors. They will be refined and reopened with clearer, more actionable descriptions.