feat: UI design system primitives, accessibility, and performance improvements

- Add Button component with CVA variants (primary, secondary, destructive, ghost, link)
- Add Input, Textarea, FormField, and Skeleton UI primitives
- Add focus trapping to Modal for WCAG accessibility compliance
- Add prefers-reduced-motion media query for motion-sensitive users
- Add route-level ErrorBoundary wrapping via page() helper in router
- Add route prefetching on sidebar nav hover for instant navigation
- Add PageMeta component with OG/Twitter meta tags (react-helmet-async)
- Add PageMeta to SharedSessionPage and SurveyPage for social sharing
- Replace lodash with custom debounce utility (saves ~71KB bundle)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-07 16:18:57 -05:00
parent 44e3bfe474
commit 5108d0bc38
19 changed files with 542 additions and 363 deletions

View File

@@ -0,0 +1,24 @@
import type { ReactNode } from 'react'
interface FormFieldProps {
label: string
htmlFor?: string
required?: boolean
hint?: string
children: ReactNode
}
export function FormField({ label, htmlFor, required, hint, children }: FormFieldProps) {
return (
<div className="space-y-1.5">
<label htmlFor={htmlFor} className="text-sm font-medium text-foreground">
{label}
{required && <span className="ml-0.5 text-red-400">*</span>}
</label>
{children}
{hint && (
<p className="text-xs text-muted-foreground">{hint}</p>
)}
</div>
)
}