create-appraisejs 0.3.0 → 0.3.1-alpha.1

package/templates/starter/src/components/test-suite/test-suite-picker.tsx

@@ -1,27 +1,23 @@
 'use client'
 
-import { useMemo, useState } from 'react'
+import { useMemo, useReducer } from 'react'
 
-import { Button } from '@/components/ui/button'
+import { PickerBrowseDialogFrame, PickerBrowseTriggerButton } from '@/components/ui/picker-browse-shell'
 import { Badge } from '@/components/ui/badge'
-import { Checkbox } from '@/components/ui/checkbox'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { cn } from '@/lib/utils'
-import { getFilterTags } from '@/lib/tag-utils'
 import type { TestSuitePickerRow, TestSuiteSelection } from '@/types/test-suite-picker'
-import { CheckedState } from '@radix-ui/react-checkbox'
-import { ChevronDown, ChevronRight, FolderTree, Search } from 'lucide-react'
 
-import { createDraftSelections, normalizeSuiteSelection, suiteMatchesQuery, type DraftSelectionMap } from './test-suite-picker-helpers'
+import {
+  applyChildCheckboxSelection,
+  applySuiteCheckboxSelection,
+  buildNormalizedSelectionsFromDraft,
+  createDraftSelections,
+  normalizeSuiteSelection,
+  suiteMatchesQuery,
+  type DraftSelectionMap,
+} from './test-suite-picker-helpers'
+import { TestSuitePickerSuiteRow } from './test-suite-picker-suite-row'
 
 type TestSuitePickerProps = {
   testSuites: TestSuitePickerRow[]
@@ -33,7 +29,64 @@ type TestSuitePickerProps = {
   selectedLabel: string
 }
 
-export function TestSuitePicker({
+type Updater<T> = T | ((prev: T) => T)
+
+function applyUpdater<T>(updater: Updater<T>, prev: T): T {
+  return typeof updater === 'function' ? (updater as (p: T) => T)(prev) : updater
+}
+
+type SuitePickerState = {
+  open: boolean
+  query: string
+  draftSelections: DraftSelectionMap
+  expandedSuites: Record<string, boolean>
+}
+
+type SuitePickerAction =
+  | { type: 'openDialog'; selectedSuites: TestSuiteSelection[] }
+  | { type: 'setOpen'; open: boolean }
+  | { type: 'setQuery'; query: string }
+  | { type: 'setDraftSelections'; updater: Updater<DraftSelectionMap> }
+  | { type: 'toggleExpanded'; suiteId: string }
+
+function suitePickerReducer(state: SuitePickerState, action: SuitePickerAction): SuitePickerState {
+  switch (action.type) {
+    case 'openDialog':
+      return {
+        open: true,
+        query: '',
+        draftSelections: createDraftSelections(action.selectedSuites),
+        expandedSuites: {},
+      }
+    case 'setOpen':
+      return { ...state, open: action.open }
+    case 'setQuery':
+      return { ...state, query: action.query }
+    case 'setDraftSelections':
+      return { ...state, draftSelections: applyUpdater(action.updater, state.draftSelections) }
+    case 'toggleExpanded':
+      return {
+        ...state,
+        expandedSuites: {
+          ...state.expandedSuites,
+          [action.suiteId]: !state.expandedSuites[action.suiteId],
+        },
+      }
+    default:
+      return state
+  }
+}
+
+function createInitialSuitePickerState(): SuitePickerState {
+  return {
+    open: false,
+    query: '',
+    draftSelections: {},
+    expandedSuites: {},
+  }
+}
+
+function TestSuitePicker({
   testSuites,
   selectedSuites,
   onSave,
@@ -42,10 +95,8 @@ export function TestSuitePicker({
   dialogDescription,
   selectedLabel,
 }: TestSuitePickerProps) {
-  const [open, setOpen] = useState(false)
-  const [query, setQuery] = useState('')
-  const [draftSelections, setDraftSelections] = useState<DraftSelectionMap>(() => createDraftSelections(selectedSuites))
-  const [expandedSuites, setExpandedSuites] = useState<Record<string, boolean>>({})
+  const [state, dispatch] = useReducer(suitePickerReducer, undefined, createInitialSuitePickerState)
+  const { open, query, draftSelections, expandedSuites } = state
 
   const filteredSuites = useMemo(
     () => testSuites.filter(testSuite => suiteMatchesQuery(testSuite, query.trim())),
@@ -55,287 +106,95 @@ export function TestSuitePicker({
   const totalSelectedSuites = Object.keys(draftSelections).length
 
   const openDialog = () => {
-    setQuery('')
-    setDraftSelections(createDraftSelections(selectedSuites))
-    setExpandedSuites({})
-    setOpen(true)
-  }
-
-  const toggleExpanded = (testSuiteId: string) => {
-    setExpandedSuites(current => ({
-      ...current,
-      [testSuiteId]: !current[testSuiteId],
-    }))
+    dispatch({ type: 'openDialog', selectedSuites })
   }
 
   const updateSuiteSelection = (testSuite: TestSuitePickerRow, checked: boolean) => {
-    setDraftSelections(current => {
-      const next = { ...current }
-
-      if (!checked) {
-        delete next[testSuite.id]
-        return next
-      }
-
-      next[testSuite.id] = {
-        testSuiteId: testSuite.id,
-        runAll: true,
-        testCaseIds: [],
-      }
-
-      return next
+    dispatch({
+      type: 'setDraftSelections',
+      updater: current => applySuiteCheckboxSelection(current, testSuite, checked),
     })
   }
 
   const updateChildSelection = (testSuite: TestSuitePickerRow, testCaseId: string, checked: boolean) => {
-    setDraftSelections(current => {
-      const childIds = testSuite.testCases.map(testCase => testCase.id)
-      const currentSelection = current[testSuite.id]
-      const nextSelectedIds = new Set(
-        currentSelection?.runAll ? childIds : currentSelection?.testCaseIds ?? [],
-      )
-
-      if (checked) {
-        nextSelectedIds.add(testCaseId)
-      } else {
-        nextSelectedIds.delete(testCaseId)
-      }
-
-      const next = { ...current }
-
-      if (nextSelectedIds.size === 0) {
-        delete next[testSuite.id]
-        return next
-      }
-
-      if (nextSelectedIds.size === childIds.length) {
-        next[testSuite.id] = {
-          testSuiteId: testSuite.id,
-          runAll: true,
-          testCaseIds: [],
-        }
-        return next
-      }
-
-      next[testSuite.id] = {
-        testSuiteId: testSuite.id,
-        runAll: false,
-        testCaseIds: Array.from(nextSelectedIds),
-      }
-
-      return next
+    dispatch({
+      type: 'setDraftSelections',
+      updater: current => applyChildCheckboxSelection(current, testSuite, testCaseId, checked),
     })
   }
 
   const saveDraftSelection = () => {
-    const normalizedSelections = testSuites
-      .map(testSuite => {
-        const selection = draftSelections[testSuite.id]
-        return selection ? normalizeSuiteSelection(testSuite, selection) : null
-      })
-      .filter((selection): selection is TestSuiteSelection => Boolean(selection))
-
-    onSave(normalizedSelections)
-    setOpen(false)
+    onSave(buildNormalizedSelectionsFromDraft(testSuites, draftSelections))
+    dispatch({ type: 'setOpen', open: false })
   }
 
-  const savedSuites = selectedSuites
-    .map(selection => {
+  const savedSuites = selectedSuites.reduce<{ suite: TestSuitePickerRow; selection: TestSuiteSelection }[]>(
+    (suites, selection) => {
       const suite = testSuites.find(testSuite => testSuite.id === selection.testSuiteId)
       if (!suite) {
-        return null
+        return suites
       }
 
-      return {
-        suite,
-        selection: normalizeSuiteSelection(suite, selection),
+      const normalizedSelection = normalizeSuiteSelection(suite, selection)
+      if (normalizedSelection) {
+        suites.push({
+          suite,
+          selection: normalizedSelection,
+        })
       }
-    })
-    .filter(
-      (entry): entry is { suite: TestSuitePickerRow; selection: TestSuiteSelection } =>
-        Boolean(entry?.suite && entry.selection),
-    )
+
+      return suites
+    },
+    [],
+  )
 
   const selectionSummaryLabel = selectedLabel.replace(/^selected\s+/i, '')
   const shouldConstrainSavedListHeight = savedSuites.length > 2
 
   return (
     <div className="flex flex-col gap-3">
-      <Button type="button" variant="outline" className="justify-between" onClick={openDialog}>
-        <span className={selectedSuites.length > 0 ? 'text-foreground' : 'text-muted-foreground'}>
-          {selectedSuites.length > 0
-            ? `${selectedSuites.length} ${selectionSummaryLabel.toLowerCase()} selected`
-            : triggerPlaceholder}
-        </span>
-        <span className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Browse</span>
-      </Button>
-
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent className="max-h-[90vh] max-w-6xl gap-0 overflow-hidden p-0">
-          <DialogHeader className="border-b px-6 py-4">
-            <DialogTitle>{dialogTitle}</DialogTitle>
-            <DialogDescription>{dialogDescription}</DialogDescription>
-          </DialogHeader>
-
-          <div className="flex flex-col gap-4 px-6 py-4">
-            <div className="flex items-center gap-3">
-              <div className="relative flex-1">
-                <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                <Input
-                  value={query}
-                  onChange={event => setQuery(event.target.value)}
-                  placeholder="Search suites, modules, tags, or child test cases..."
-                  className="pl-9"
+      <PickerBrowseTriggerButton
+        selected={selectedSuites.length > 0}
+        summaryWhenSelected={`${selectedSuites.length} ${selectionSummaryLabel.toLowerCase()} selected`}
+        placeholder={triggerPlaceholder}
+        onClick={openDialog}
+      />
+
+      <PickerBrowseDialogFrame
+        open={open}
+        onOpenChange={nextOpen => dispatch({ type: 'setOpen', open: nextOpen })}
+        title={dialogTitle}
+        description={dialogDescription}
+        searchValue={query}
+        onSearchChange={value => dispatch({ type: 'setQuery', query: value })}
+        searchPlaceholder="Search suites, modules, tags, or child test cases..."
+        summaryAside={`${totalSelectedSuites} suites selected`}
+        onCancel={() => dispatch({ type: 'setOpen', open: false })}
+        onSave={saveDraftSelection}
+      >
+        <ScrollArea className="h-[480px] rounded-md border">
+          <div className="divide-y">
+            {filteredSuites.length > 0 ? (
+              filteredSuites.map(testSuite => (
+                <TestSuitePickerSuiteRow
+                  key={testSuite.id}
+                  testSuite={testSuite}
+                  currentSelection={draftSelections[testSuite.id]}
+                  isExpanded={expandedSuites[testSuite.id] ?? false}
+                  onToggleExpand={suiteId => dispatch({ type: 'toggleExpanded', suiteId })}
+                  onSuiteSelection={updateSuiteSelection}
+                  onChildSelection={updateChildSelection}
                 />
-              </div>
-              <div className="text-sm text-muted-foreground">{totalSelectedSuites} suites selected</div>
-            </div>
-
-            <ScrollArea className="h-[480px] rounded-md border">
-              <div className="divide-y">
-                {filteredSuites.length > 0 ? (
-                  filteredSuites.map(testSuite => {
-                    const currentSelection = draftSelections[testSuite.id]
-                    const childIds = testSuite.testCases.map(testCase => testCase.id)
-                    const selectedChildIds = currentSelection?.runAll ? childIds : currentSelection?.testCaseIds ?? []
-                    const selectionCount = selectedChildIds.length
-                    const isExpanded = expandedSuites[testSuite.id] ?? false
-                    const suiteCheckedState: CheckedState =
-                      selectionCount === 0 ? false : selectionCount === childIds.length ? true : 'indeterminate'
-                    const suiteTags = getFilterTags(testSuite.tags)
-
-                    return (
-                      <div key={testSuite.id} className="bg-background">
-                        <div className="flex items-start gap-3 px-4 py-4">
-                          <Checkbox
-                            checked={suiteCheckedState}
-                            onCheckedChange={checked => updateSuiteSelection(testSuite, !!checked)}
-                            disabled={childIds.length === 0}
-                            aria-label={`Select suite ${testSuite.name}`}
-                            className="mt-1"
-                          />
-
-                          <div className="min-w-0 flex-1">
-                            <div className="flex flex-wrap items-center gap-2">
-                              <button
-                                type="button"
-                                className="inline-flex items-center gap-2 text-left"
-                                onClick={() => toggleExpanded(testSuite.id)}
-                              >
-                                {isExpanded ? (
-                                  <ChevronDown className="h-4 w-4 text-muted-foreground" />
-                                ) : (
-                                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
-                                )}
-                                <span className="font-semibold">{testSuite.name}</span>
-                              </button>
-                              <Badge variant="outline" className="gap-1">
-                                <FolderTree className="h-3.5 w-3.5" />
-                                {testSuite.module.name}
-                              </Badge>
-                              <Badge variant="secondary">{childIds.length} test cases</Badge>
-                              {selectionCount > 0 && (
-                                <Badge variant={currentSelection?.runAll ? 'default' : 'secondary'}>
-                                  {currentSelection?.runAll ? 'Full suite selected' : `${selectionCount} selected`}
-                                </Badge>
-                              )}
-                            </div>
-
-                            <p className="mt-2 text-sm text-muted-foreground">
-                              {testSuite.description?.trim() || 'No description provided.'}
-                            </p>
-
-                            <div className="mt-3 flex flex-wrap gap-2">
-                              {suiteTags.length > 0 ? (
-                                suiteTags.map(tag => (
-                                  <Badge key={tag.id} variant="outline">
-                                    {tag.name}
-                                  </Badge>
-                                ))
-                              ) : (
-                                <span className="text-xs text-muted-foreground">No filter tags</span>
-                              )}
-                            </div>
-                          </div>
-                        </div>
-
-                        {isExpanded && (
-                          <div className="border-t bg-muted/20 px-4 py-3">
-                            {testSuite.testCases.length > 0 ? (
-                              <div className="space-y-2">
-                                {testSuite.testCases.map(testCase => {
-                                  const testCaseTags = getFilterTags(testCase.tags)
-                                  const checked =
-                                    currentSelection?.runAll || currentSelection?.testCaseIds.includes(testCase.id) || false
-
-                                  return (
-                                    <label
-                                      key={testCase.id}
-                                      className={cn(
-                                        'flex items-start gap-3 rounded-md border bg-background px-3 py-3',
-                                        checked && 'border-primary/40',
-                                      )}
-                                    >
-                                      <Checkbox
-                                        checked={checked}
-                                        onCheckedChange={value => updateChildSelection(testSuite, testCase.id, !!value)}
-                                        aria-label={`Select test case ${testCase.title}`}
-                                        className="mt-1"
-                                      />
-                                      <div className="min-w-0 flex-1">
-                                        <div className="flex flex-wrap items-center gap-2">
-                                          <span className="text-sm font-medium">{testCase.title}</span>
-                                          <Badge variant="secondary">{testCase.steps.length} steps</Badge>
-                                        </div>
-                                        <p className="mt-1 text-xs text-muted-foreground">
-                                          {testCase.description?.trim() || 'No description provided.'}
-                                        </p>
-                                        <div className="mt-2 flex flex-wrap gap-2">
-                                          {testCaseTags.length > 0 ? (
-                                            testCaseTags.map(tag => (
-                                              <Badge key={tag.id} variant="outline">
-                                                {tag.name}
-                                              </Badge>
-                                            ))
-                                          ) : (
-                                            <span className="text-xs text-muted-foreground">No filter tags</span>
-                                          )}
-                                        </div>
-                                      </div>
-                                    </label>
-                                  )
-                                })}
-                              </div>
-                            ) : (
-                              <div className="rounded-md border border-dashed bg-background px-4 py-6 text-sm text-muted-foreground">
-                                This suite has no test cases yet and cannot be selected.
-                              </div>
-                            )}
-                          </div>
-                        )}
-                      </div>
-                    )
-                  })
-                ) : (
-                  <div className="px-4 py-10 text-center text-sm text-muted-foreground">No test suites found.</div>
-                )}
-              </div>
-            </ScrollArea>
+              ))
+            ) : (
+              <div className="px-4 py-10 text-center text-sm text-muted-foreground">No test suites found.</div>
+            )}
           </div>
-
-          <DialogFooter className="border-t px-6 py-4">
-            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
-              Cancel
-            </Button>
-            <Button type="button" onClick={saveDraftSelection}>
-              Save
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+        </ScrollArea>
+      </PickerBrowseDialogFrame>
 
       {savedSuites.length > 0 && (
-        <div className="rounded-md border bg-muted/20">
+        <div className="bg-muted/20 rounded-md border">
           <div className="border-b px-4 py-3 text-sm font-medium">{selectedLabel}</div>
           <ScrollArea className={cn(shouldConstrainSavedListHeight && 'h-72')}>
             <div className="space-y-3 p-4">

package/templates/starter/src/components/theme/theme-provider.tsx

@@ -9,7 +9,13 @@ type ThemeProviderProps = {
 
 export function ThemeProvider({ children }: ThemeProviderProps) {
   return (
-    <NextThemesProvider attribute="class" defaultTheme="dark" forcedTheme="dark" enableSystem={false} disableTransitionOnChange>
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="dark"
+      forcedTheme="dark"
+      enableSystem={false}
+      disableTransitionOnChange
+    >
       {children}
     </NextThemesProvider>
   )

package/templates/starter/src/components/ui/alert.tsx

@@ -18,26 +18,20 @@ const alertVariants = cva(
   },
 )
 
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
-))
-Alert.displayName = 'Alert'
+function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+  return <div role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+}
 
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props} />
-  ),
-)
-AlertTitle.displayName = 'AlertTitle'
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props} />
+}
 
-const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
-  ),
-)
+function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
+}
+
+Alert.displayName = 'Alert'
+AlertTitle.displayName = 'AlertTitle'
 AlertDescription.displayName = 'AlertDescription'
 
 export { Alert, AlertTitle, AlertDescription }

package/templates/starter/src/components/ui/badge.tsx

@@ -26,4 +26,4 @@ function Badge({ className, variant, ...props }: BadgeProps) {
   return <div className={cn(badgeVariants({ variant }), className)} {...props} />
 }
 
-export { Badge, badgeVariants }
+export { Badge }

package/templates/starter/src/components/ui/button.tsx

@@ -20,7 +20,7 @@ const buttonVariants = cva(
         default: 'h-9 px-4 py-2',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9',
+        icon: 'size-9',
       },
     },
     defaultVariants: {
@@ -30,18 +30,21 @@ const buttonVariants = cva(
   },
 )
 
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
   asChild?: boolean
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button'
-    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
-  },
-)
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ref,
+  ...props
+}: ButtonProps & { ref?: React.Ref<HTMLButtonElement> }) {
+  const Comp = asChild ? Slot : 'button'
+  return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+}
 Button.displayName = 'Button'
 
 export { Button, buttonVariants }

package/templates/starter/src/components/ui/calendar.tsx

@@ -80,7 +80,7 @@ function Calendar({
         week_number_header: cn('w-[--cell-size] select-none', defaultClassNames.week_number_header),
         week_number: cn('text-muted-foreground select-none text-[0.8rem]', defaultClassNames.week_number),
         day: cn(
-          'group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md',
+          'group/day relative aspect-square size-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md',
           defaultClassNames.day,
         ),
         range_start: cn('bg-accent rounded-l-md', defaultClassNames.range_start),
@@ -146,7 +146,7 @@ function CalendarDayButton({ className, day, modifiers, ...props }: React.Compon
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        'flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-end=true]:bg-primary data-[range-middle=true]:bg-accent data-[range-start=true]:bg-primary data-[selected-single=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:text-accent-foreground data-[range-start=true]:text-primary-foreground data-[selected-single=true]:text-primary-foreground group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 [&>span]:text-xs [&>span]:opacity-70',
+        'group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-end=true]:bg-primary data-[range-middle=true]:bg-accent data-[range-start=true]:bg-primary data-[selected-single=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:text-accent-foreground data-[range-start=true]:text-primary-foreground data-[selected-single=true]:text-primary-foreground group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70',
         defaultClassNames.day,
         className,
       )}
@@ -155,4 +155,4 @@ function CalendarDayButton({ className, day, modifiers, ...props }: React.Compon
   )
 }
 
-export { Calendar, CalendarDayButton }
+export { Calendar }

package/templates/starter/src/components/ui/card.tsx

@@ -2,42 +2,24 @@ import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('rounded-xl border bg-card text-card-foreground shadow', className)} {...props} />
-))
-Card.displayName = 'Card'
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div className={cn('rounded-xl border bg-card text-card-foreground shadow', className)} {...props} />
+}
 
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
-  ),
-)
-CardHeader.displayName = 'CardHeader'
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+}
 
-const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('font-semibold leading-none tracking-tight', className)} {...props} />
-  ),
-)
-CardTitle.displayName = 'CardTitle'
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div className={cn('font-semibold leading-none tracking-tight', className)} {...props} />
+}
 
-const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
-  ),
-)
-CardDescription.displayName = 'CardDescription'
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div className={cn('text-sm text-muted-foreground', className)} {...props} />
+}
 
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />,
-)
-CardContent.displayName = 'CardContent'
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div className={cn('p-6 pt-0', className)} {...props} />
+}
 
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
-  ),
-)
-CardFooter.displayName = 'CardFooter'
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export { Card, CardHeader, CardTitle, CardDescription, CardContent }