Skip to content

Common UI Components ## Business Purpose Provide a set of reusable, accessible UI components that ensure consistent look and behavior across the application. ## Current Behaviors - Buttons: loading-button.tsx extends button.tsx with loading spinner state; used for form submissions.

  • Forms: form.tsx provides form field wrappers with validation error display using React Hook Form.
  • Inputs: input.tsx and password-input.tsx with styling and size variants.
  • Dialogs: dialog.tsx and sheet.tsx for modals and slide-out panels.
  • Tables: table.tsx and DataTable.tsx provide sortable, paginated table components.
  • Dropdown Menus: dropdown-menu.tsx for action menus (used in items/admin).
  • Alerts, Badges, Cards, etc.: Additional UI primitives (alert.tsx, badge.tsx, card.tsx, separator.tsx, pagination.tsx, select.tsx, tabs.tsx, tooltip.tsx, skeleton.tsx, sonner.tsx). ## Technical Implementation - Base Components: All located in components/ui/ and use cn utility from utils.ts:24-28 for class merging.
  • Input Components: input.tsx:5, password-input.tsx (no methods shown), checkbox.tsx:7.
  • Dialog Components: dialog.tsx:7-117 with DialogContent, DialogHeader, etc.
  • Table Components: table.tsx:5-83 with TableHeader, TableBody, etc.
  • Dropdown Menu: dropdown-menu.tsx:9-225 with DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem.
  • Button Components: button.tsx:39-54 (root), loading-button.tsx:44-78 with loading state.
  • Form Components: form.tsx:30-136 using React Hook Form's useFormContext. ## Definition of Done - Buttons display a spinner when loading prop is true LoadingButton.tsx:44.
  • Text inputs accept props and apply correct styling (Input component renders with className).
  • Modal dialogs open/close with animation dialog.tsx:47.
  • DataTable renders rows with correct columns and pagination DataTable.tsx:37.
  • Dropdown menu items show correct icons and trigger actions dropdown-menu.tsx:94.