components

Component Development Rules

Component Patterns

GOOD Component Structure

// Single responsibility, 20-80 lines
interface UserCardProps {
  user: User
  onEdit: (id: string) => void
  className?: string
}

export const UserCard = ({ user, onEdit, className }: UserCardProps) => {
  return (
    <Card className={cn("p-4", className)}>
      <Avatar src={user.avatar} />
      <div>
        <h3 className="font-semibold">{user.name}</h3>
        <p className="text-muted-foreground">{user.email}</p>
        <Button onClick={() => onEdit(user.id)}>Edit</Button>
      </div>
    </Card>
  )
}

AVOID: Monolithic Components

// DON'T: 300+ lines mixing concerns
const UserManagement = () => {
  // Massive component with multiple responsibilities
}

Component Composition Pattern

// Build complex UI from smaller components
const Dashboard = () => (
  <PageLayout>
    <DashboardHeader />
    <DashboardMetrics />
    <DashboardCharts />
    <DashboardActivity />
  </PageLayout>
)

UI Component Rules

shadcn/ui Components

• NEVER modify files in src/components/ui/ directly
• EXTEND by creating wrappers in src/components/common/
• COMPOSE multiple ui components to build features

Form Components

// Use React Hook Form + Zod pattern
export const UserForm = ({ onSubmit, initialData }: UserFormProps) => {
  const form = useForm<UserFormData>({
    resolver: zodResolver(userSchema),
    defaultValues: initialData
  })

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name="name"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Name</FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
      </form>
    </Form>
  )
}

Page Component Rules

Pages = Composition Only

// PERFECT: Thin orchestration layer (10-30 lines max)
const DashboardPage = () => {
  const { data: user, isLoading } = useCurrentUser()
  
  if (isLoading) return <PageSkeleton />
  
  return (
    <PageLayout>
      <DashboardHeader user={user} />
      <DashboardMetrics />
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <DashboardCharts />
        <DashboardActivity />
      </div>
    </PageLayout>
  )
}