create-appraisejs 0.2.0-alpha.6 → 0.3.0-alpha.0

package/templates/default/src/components/ui/kbd.tsx

@@ -1,28 +1,28 @@
-import { cn } from "@/lib/utils"
-
-function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
-  return (
-    <kbd
-      data-slot="kbd"
-      className={cn(
-        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium",
-        "[&_svg:not([class*='size-'])]:size-3",
-        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <kbd
-      data-slot="kbd-group"
-      className={cn("inline-flex items-center gap-1", className)}
-      {...props}
-    />
-  )
-}
-
-export { Kbd, KbdGroup }
+import { cn } from "@/lib/utils"
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium",
+        "[&_svg:not([class*='size-'])]:size-3",
+        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }

package/templates/default/src/components/ui/label.tsx

@@ -1,19 +1,19 @@
-'use client'
-
-import * as React from 'react'
-import * as LabelPrimitive from '@radix-ui/react-label'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from '@/lib/utils'
-
-const labelVariants = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70')
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
-))
-Label.displayName = LabelPrimitive.Root.displayName
-
-export { Label }
+'use client'
+
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const labelVariants = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70')
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

package/templates/default/src/components/ui/loading.tsx

@@ -1,12 +1,12 @@
-import { LoaderCircle } from 'lucide-react'
-
-export default function Loading() {
-  return (
-    <div className="flex items-center justify-center p-10">
-      <span className="mr-2 text-muted-foreground">
-        <LoaderCircle className="h-5 w-5 animate-spin" />
-      </span>
-      <span className="text-sm font-medium text-muted-foreground">Loading...</span>
-    </div>
-  )
-}
+import { LoaderCircle } from 'lucide-react'
+
+export default function Loading() {
+  return (
+    <div className="flex items-center justify-center p-10">
+      <span className="mr-2 text-muted-foreground">
+        <LoaderCircle className="h-5 w-5 animate-spin" />
+      </span>
+      <span className="text-sm font-medium text-muted-foreground">Loading...</span>
+    </div>
+  )
+}

package/templates/default/src/components/ui/multi-select-with-preview.tsx

@@ -1,116 +1,116 @@
-'use client'
-
-import * as React from 'react'
-import { Check, ChevronsUpDown, X } from 'lucide-react'
-
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { TooltipProvider } from '@/components/ui/tooltip'
-
-interface Option {
-  value: string
-  label: string
-}
-
-interface MultiSelectWithPreviewProps {
-  id: string
-  className?: string
-  options: Option[]
-  placeholder?: string
-  emptyMessage?: string
-  selectedLabel?: string
-  onSelectChange: (value: string[]) => void
-  defaultSelectedValues?: string[]
-  searchPlaceholder?: string
-}
-
-export function MultiSelectWithPreview({
-  id,
-  className,
-  options,
-  placeholder = 'Select options...',
-  emptyMessage = 'No option found.',
-  selectedLabel = 'option(s) selected',
-  onSelectChange,
-  defaultSelectedValues = [],
-  searchPlaceholder = 'Search options...',
-}: MultiSelectWithPreviewProps) {
-  const [open, setOpen] = React.useState(false)
-  const [selectedValues, setSelectedValues] = React.useState<string[]>(defaultSelectedValues)
-
-  const handleSelect = (value: string) => {
-    const newSelectedValues = selectedValues.includes(value)
-      ? selectedValues.filter(item => item !== value)
-      : [...selectedValues, value]
-    setSelectedValues(newSelectedValues)
-    onSelectChange(newSelectedValues)
-  }
-
-  return (
-    <TooltipProvider>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
-            role="combobox"
-            aria-expanded={open}
-            className={cn('w-full justify-between text-muted-foreground', className)}
-          >
-            {selectedValues.length > 0 ? `${selectedValues.length} ${selectedLabel.toLowerCase()}` : placeholder}
-            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className={cn('w-full max-w-[600px] p-0', className)} align="start">
-          <Command className={cn('w-full', className)}>
-            <CommandInput placeholder={searchPlaceholder ?? `Search item(s)...`} className="w-full" />
-            <CommandList className={cn('w-full', className)}>
-              <CommandEmpty>{emptyMessage}</CommandEmpty>
-              <CommandGroup className={cn('w-full', className)}>
-                {options.map(option => (
-                  <CommandItem
-                    key={option.value}
-                    id={id}
-                    onSelect={() => handleSelect(option.value)}
-                    className={cn('w-full', className)}
-                  >
-                    <Check
-                      className={cn(
-                        'mr-2 h-4 w-4 flex-shrink-0',
-                        selectedValues.includes(option.value) ? 'opacity-100' : 'opacity-0',
-                      )}
-                    />
-                    <span>{option.label}</span>
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-      {selectedValues.length > 0 && (
-        <div className={cn('mt-4', className)}>
-          <h3 className="mb-2 text-sm font-semibold text-muted-foreground">{selectedLabel}</h3>
-          <ul className="space-y-2">
-            {selectedValues.map(value => {
-              const option = options.find(opt => opt.value === value)
-              if (!option) return null
-              return (
-                <li key={value} className="flex items-center justify-between rounded-md bg-secondary p-2">
-                  <span className="text-sm">{option.label}</span>
-                  <Button variant="ghost" size="sm" onClick={() => handleSelect(value)} className="h-auto p-1">
-                    <X className="h-4 w-4" />
-                    <span className="sr-only">Remove</span>
-                  </Button>
-                </li>
-              )
-            })}
-          </ul>
-        </div>
-      )}
-    </TooltipProvider>
-  )
-}
-
-export default MultiSelectWithPreview
+'use client'
+
+import * as React from 'react'
+import { Check, ChevronsUpDown, X } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { TooltipProvider } from '@/components/ui/tooltip'
+
+interface Option {
+  value: string
+  label: string
+}
+
+interface MultiSelectWithPreviewProps {
+  id: string
+  className?: string
+  options: Option[]
+  placeholder?: string
+  emptyMessage?: string
+  selectedLabel?: string
+  onSelectChange: (value: string[]) => void
+  defaultSelectedValues?: string[]
+  searchPlaceholder?: string
+}
+
+export function MultiSelectWithPreview({
+  id,
+  className,
+  options,
+  placeholder = 'Select options...',
+  emptyMessage = 'No option found.',
+  selectedLabel = 'option(s) selected',
+  onSelectChange,
+  defaultSelectedValues = [],
+  searchPlaceholder = 'Search options...',
+}: MultiSelectWithPreviewProps) {
+  const [open, setOpen] = React.useState(false)
+  const [selectedValues, setSelectedValues] = React.useState<string[]>(defaultSelectedValues)
+
+  const handleSelect = (value: string) => {
+    const newSelectedValues = selectedValues.includes(value)
+      ? selectedValues.filter(item => item !== value)
+      : [...selectedValues, value]
+    setSelectedValues(newSelectedValues)
+    onSelectChange(newSelectedValues)
+  }
+
+  return (
+    <TooltipProvider>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className={cn('w-full justify-between text-muted-foreground', className)}
+          >
+            {selectedValues.length > 0 ? `${selectedValues.length} ${selectedLabel.toLowerCase()}` : placeholder}
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className={cn('w-full max-w-[600px] p-0', className)} align="start">
+          <Command className={cn('w-full', className)}>
+            <CommandInput placeholder={searchPlaceholder ?? `Search item(s)...`} className="w-full" />
+            <CommandList className={cn('w-full', className)}>
+              <CommandEmpty>{emptyMessage}</CommandEmpty>
+              <CommandGroup className={cn('w-full', className)}>
+                {options.map(option => (
+                  <CommandItem
+                    key={option.value}
+                    id={id}
+                    onSelect={() => handleSelect(option.value)}
+                    className={cn('w-full', className)}
+                  >
+                    <Check
+                      className={cn(
+                        'mr-2 h-4 w-4 flex-shrink-0',
+                        selectedValues.includes(option.value) ? 'opacity-100' : 'opacity-0',
+                      )}
+                    />
+                    <span>{option.label}</span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      {selectedValues.length > 0 && (
+        <div className={cn('mt-4', className)}>
+          <h3 className="mb-2 text-sm font-semibold text-muted-foreground">{selectedLabel}</h3>
+          <ul className="space-y-2">
+            {selectedValues.map(value => {
+              const option = options.find(opt => opt.value === value)
+              if (!option) return null
+              return (
+                <li key={value} className="flex items-center justify-between rounded-md bg-secondary p-2">
+                  <span className="text-sm">{option.label}</span>
+                  <Button variant="ghost" size="sm" onClick={() => handleSelect(value)} className="h-auto p-1">
+                    <X className="h-4 w-4" />
+                    <span className="sr-only">Remove</span>
+                  </Button>
+                </li>
+              )
+            })}
+          </ul>
+        </div>
+      )}
+    </TooltipProvider>
+  )
+}
+
+export default MultiSelectWithPreview

package/templates/default/src/components/ui/multi-select.test.tsx

@@ -0,0 +1,45 @@
+// @vitest-environment jsdom
+
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import { MultiSelect } from './multi-select'
+
+const OPTIONS = [
+  { label: 'Smoke', value: 'smoke' },
+  { label: 'Regression', value: 'regression', disabled: true },
+]
+
+describe('MultiSelect', () => {
+  it('selects and removes values through its combobox controls', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    const { rerender } = render(<MultiSelect label="Tags" options={OPTIONS} selected={[]} onChange={onChange} />)
+
+    await user.click(screen.getByRole('combobox', { name: 'Tags' }))
+    await user.click(screen.getByRole('option', { name: 'Smoke' }))
+
+    expect(onChange).toHaveBeenCalledWith(['smoke'])
+
+    rerender(<MultiSelect label="Tags" options={OPTIONS} selected={['smoke']} onChange={onChange} />)
+
+    await user.click(screen.getByRole('button', { name: 'Remove Smoke' }))
+
+    expect(onChange).toHaveBeenCalledWith([])
+  })
+
+  it('does not call onChange for disabled options', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+
+    render(<MultiSelect label="Tags" options={OPTIONS} selected={[]} onChange={onChange} />)
+
+    await user.click(screen.getByRole('combobox', { name: 'Tags' }))
+    await user.click(screen.getByRole('option', { name: 'Regression' }))
+
+    await waitFor(() => {
+      expect(onChange).not.toHaveBeenCalled()
+    })
+  })
+})