Component Patterns

Server Component Pattern

Pattern

// Default to server component
export default async function PatientList() {
  const patients = await getPatients()
  
  return (
    <div>
      {patients.map(patient => (
        <PatientCard key={patient.id} patient={patient} />
      ))}
    </div>
  )
}

Usage

• Data fetching components
• Layout components
• Static content
• SEO-critical pages

Benefits

• No client JavaScript
• Direct database access
• Better performance
• Simplified data flow

---

Client Component Pattern

Pattern

'use client'

export function InteractiveChart({ data }: Props) {
  const [selectedRange, setSelectedRange] = useState('week')
  
  return (
    <div>
      <RangeSelector value={selectedRange} onChange={setSelectedRange} />
      <Chart data={filterByRange(data, selectedRange)} />
    </div>
  )
}

Usage

• Interactive elements
• Browser APIs
• State management
• Real-time updates

---

Composite Component Pattern

Pattern

// Main component
export function PatientDashboard({ patientId }: Props) {
  return (
    <div className="grid gap-6">
      <PatientDashboard.Header patientId={patientId} />
      <PatientDashboard.Summary patientId={patientId} />
      <PatientDashboard.Timeline patientId={patientId} />
    </div>
  )
}

// Sub-components
PatientDashboard.Header = PatientHeader
PatientDashboard.Summary = PatientSummary
PatientDashboard.Timeline = PatientTimeline

Benefits

• Logical grouping
• Flexible composition
• Clear relationships
• Easy to extend

---

Loading State Pattern

Pattern

// loading.tsx
export default function Loading() {
  return (
    <div className="space-y-4">
      <Skeleton className="h-12 w-full" />
      <Skeleton className="h-64 w-full" />
    </div>
  )
}

// Component with Suspense
<Suspense fallback={<Loading />}>
  <AsyncComponent />
</Suspense>

Implementation

• Skeleton screens
• Progressive loading
• Optimistic updates
• Loading boundaries

---

Error Boundary Pattern

Pattern

// error.tsx
'use client'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <div className="flex flex-col items-center justify-center min-h-[400px]">
      <h2 className="text-xl font-semibold mb-4">Something went wrong!</h2>
      <Button onClick={reset}>Try again</Button>
    </div>
  )
}

Features

• Graceful degradation
• User-friendly messages
• Recovery options
• Error logging

---

Form Pattern with Server Actions

Pattern

export function PatientForm() {
  return (
    <form action={createPatient}>
      <Input name="name" required />
      <Input name="email" type="email" />
      <Button type="submit">Create Patient</Button>
    </form>
  )
}

// Server action
async function createPatient(formData: FormData) {
  'use server'
  
  const data = Object.fromEntries(formData)
  const validated = patientSchema.parse(data)
  
  await db.patients.create(validated)
  revalidatePath('/patients')
}

Benefits

• Progressive enhancement
• Type safety
• No client state
• Automatic revalidation

---

Data Table Pattern

Pattern

export function PatientsTable({ patients }: Props) {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>MRN</TableHead>
          <TableHead>Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {patients.map(patient => (
          <TableRow key={patient.id}>
            <TableCell>{patient.name}</TableCell>
            <TableCell>{patient.mrn}</TableCell>
            <TableCell>
              <Badge>{patient.status}</Badge>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

Features

• Responsive design
• Sortable columns
• Pagination support
• Row actions

---

Modal/Dialog Pattern

Pattern

export function EditPatientDialog({ patient, trigger }: Props) {
  return (
    <Dialog>
      <DialogTrigger asChild>{trigger}</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Edit Patient</DialogTitle>
        </DialogHeader>
        <PatientForm 
          patient={patient} 
          onSubmit={updatePatient}
        />
      </DialogContent>
    </Dialog>
  )
}

Usage

• Form dialogs
• Confirmations
• Detail views
• Quick actions

---

Card Component Pattern

Pattern

export function MetricCard({ 
  title, 
  value, 
  change, 
  icon 
}: MetricCardProps) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between">
        <CardTitle className="text-sm font-medium">
          {title}
        </CardTitle>
        {icon}
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold">{value}</div>
        {change && (
          <p className="text-xs text-muted-foreground">
            {change}
          </p>
        )}
      </CardContent>
    </Card>
  )
}

Variants

• Stat cards
• Feature cards
• List cards
• Action cards

---

Layout Pattern

Pattern

export function DashboardLayout({ children }: Props) {
  return (
    <div className="flex h-screen">
      <Sidebar />
      <div className="flex-1 flex flex-col">
        <Header />
        <main className="flex-1 overflow-y-auto p-6">
          {children}
        </main>
      </div>
    </div>
  )
}

Structure

• Consistent layouts
• Responsive design
• Nested layouts
• Layout composition

---

List/Detail Pattern

Pattern

export function PatientListView() {
  const [selected, setSelected] = useState<string>()
  
  return (
    <div className="grid grid-cols-12 gap-6">
      <div className="col-span-4">
        <PatientList 
          onSelect={setSelected}
          selected={selected}
        />
      </div>
      <div className="col-span-8">
        {selected ? (
          <PatientDetail id={selected} />
        ) : (
          <EmptyState />
        )}
      </div>
    </div>
  )
}

Benefits

• Efficient navigation
• Context preservation
• Quick comparisons
• Responsive adaptation

These patterns form the foundation of our component architecture and ensure consistency across the application.