@wakastellar/ui 2.0.0 → 2.1.1

package/src/components/waka-combobox/index.tsx

@@ -0,0 +1,497 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Check, ChevronsUpDown, Plus, X, Loader2 } from "lucide-react"
+import { Button } from "../button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "../command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../popover"
+import { Badge } from "../badge"
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface ComboboxOption<T = string> {
+  /** Valeur unique de l'option */
+  value: T
+  /** Libellé affiché */
+  label: string
+  /** Description secondaire */
+  description?: string
+  /** Icône */
+  icon?: React.ReactNode
+  /** Désactiver l'option */
+  disabled?: boolean
+  /** Groupe de l'option */
+  group?: string
+}
+
+export interface WakaComboboxProps<T = string> {
+  /** Options disponibles */
+  options: ComboboxOption<T>[]
+  /** Valeur sélectionnée (single) ou valeurs (multiple) */
+  value?: T | T[]
+  /** Callback lors du changement */
+  onChange?: (value: T | T[] | undefined) => void
+  /** Placeholder */
+  placeholder?: string
+  /** Placeholder de recherche */
+  searchPlaceholder?: string
+  /** Message si aucune option */
+  emptyMessage?: string
+  /** Mode multiple */
+  multiple?: boolean
+  /** Permettre la création de nouvelles options */
+  creatable?: boolean
+  /** Callback lors de la création */
+  onCreate?: (inputValue: string) => ComboboxOption<T> | Promise<ComboboxOption<T>>
+  /** Texte du bouton de création */
+  createLabel?: string
+  /** Recherche asynchrone */
+  onSearch?: (query: string) => Promise<ComboboxOption<T>[]>
+  /** Délai de debounce pour la recherche (ms) */
+  searchDebounce?: number
+  /** Désactivé */
+  disabled?: boolean
+  /** Erreur */
+  error?: boolean
+  /** Chargement */
+  loading?: boolean
+  /** Taille */
+  size?: "sm" | "md" | "lg"
+  /** Permettre de vider la sélection */
+  clearable?: boolean
+  /** Nombre maximum de sélections (multiple) */
+  maxSelections?: number
+  /** Classes CSS additionnelles */
+  className?: string
+  /** ID pour l'accessibilité */
+  id?: string
+  /** Nom du champ */
+  name?: string
+}
+
+// ============================================
+// HELPER FUNCTIONS
+// ============================================
+
+function groupOptions<T>(options: ComboboxOption<T>[]): Map<string | undefined, ComboboxOption<T>[]> {
+  const groups = new Map<string | undefined, ComboboxOption<T>[]>()
+
+  for (const option of options) {
+    const group = option.group
+    if (!groups.has(group)) {
+      groups.set(group, [])
+    }
+    groups.get(group)!.push(option)
+  }
+
+  return groups
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+export function WakaCombobox<T = string>({
+  options: initialOptions,
+  value,
+  onChange,
+  placeholder = "Sélectionner...",
+  searchPlaceholder = "Rechercher...",
+  emptyMessage = "Aucun résultat trouvé.",
+  multiple = false,
+  creatable = false,
+  onCreate,
+  createLabel = "Créer",
+  onSearch,
+  searchDebounce = 300,
+  disabled = false,
+  error = false,
+  loading: externalLoading = false,
+  size = "md",
+  clearable = true,
+  maxSelections,
+  className,
+  id,
+  name,
+}: WakaComboboxProps<T>) {
+  const [open, setOpen] = React.useState(false)
+  const [searchQuery, setSearchQuery] = React.useState("")
+  const [options, setOptions] = React.useState<ComboboxOption<T>[]>(initialOptions)
+  const [internalLoading, setInternalLoading] = React.useState(false)
+  const [createdOptions, setCreatedOptions] = React.useState<ComboboxOption<T>[]>([])
+
+  const loading = externalLoading || internalLoading
+
+  // Update options when initialOptions change
+  React.useEffect(() => {
+    if (!onSearch) {
+      setOptions(initialOptions)
+    }
+  }, [initialOptions, onSearch])
+
+  // Debounced search
+  React.useEffect(() => {
+    if (!onSearch) return
+
+    const timer = setTimeout(async () => {
+      setInternalLoading(true)
+      try {
+        const results = await onSearch(searchQuery)
+        setOptions(results)
+      } catch (error) {
+        console.error("Search error:", error)
+      } finally {
+        setInternalLoading(false)
+      }
+    }, searchDebounce)
+
+    return () => clearTimeout(timer)
+  }, [searchQuery, onSearch, searchDebounce])
+
+  // Combined options (initial + created)
+  const allOptions = React.useMemo(() => {
+    return [...options, ...createdOptions]
+  }, [options, createdOptions])
+
+  // Filter options based on search (if not async)
+  const filteredOptions = React.useMemo(() => {
+    if (onSearch) return allOptions // Async search handles filtering
+
+    if (!searchQuery) return allOptions
+
+    const query = searchQuery.toLowerCase()
+    return allOptions.filter(
+      (option) =>
+        option.label.toLowerCase().includes(query) ||
+        option.description?.toLowerCase().includes(query)
+    )
+  }, [allOptions, searchQuery, onSearch])
+
+  // Selected values as array
+  const selectedValues = React.useMemo(() => {
+    if (value === undefined) return []
+    return Array.isArray(value) ? value : [value]
+  }, [value])
+
+  // Selected options
+  const selectedOptions = React.useMemo(() => {
+    return allOptions.filter((option) =>
+      selectedValues.some((v) => v === option.value)
+    )
+  }, [allOptions, selectedValues])
+
+  // Handle selection
+  const handleSelect = (option: ComboboxOption<T>) => {
+    if (option.disabled) return
+
+    if (multiple) {
+      const isSelected = selectedValues.includes(option.value)
+      let newValues: T[]
+
+      if (isSelected) {
+        newValues = selectedValues.filter((v) => v !== option.value)
+      } else {
+        if (maxSelections && selectedValues.length >= maxSelections) return
+        newValues = [...selectedValues, option.value]
+      }
+
+      onChange?.(newValues.length > 0 ? newValues : undefined)
+    } else {
+      const isSelected = selectedValues.includes(option.value)
+      if (isSelected) {
+        onChange?.(undefined)
+      } else {
+        onChange?.(option.value)
+      }
+      setOpen(false)
+    }
+  }
+
+  // Handle creation
+  const handleCreate = async () => {
+    if (!creatable || !searchQuery.trim()) return
+
+    setInternalLoading(true)
+    try {
+      let newOption: ComboboxOption<T>
+
+      if (onCreate) {
+        newOption = await onCreate(searchQuery.trim())
+      } else {
+        // Default creation (only works for string values)
+        newOption = {
+          value: searchQuery.trim() as unknown as T,
+          label: searchQuery.trim(),
+        }
+      }
+
+      setCreatedOptions((prev) => [...prev, newOption])
+      handleSelect(newOption)
+      setSearchQuery("")
+    } catch (error) {
+      console.error("Creation error:", error)
+    } finally {
+      setInternalLoading(false)
+    }
+  }
+
+  // Handle clear
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onChange?.(undefined)
+    setSearchQuery("")
+  }
+
+  // Remove single value (multiple mode)
+  const handleRemove = (valueToRemove: T) => {
+    if (multiple) {
+      const newValues = selectedValues.filter((v) => v !== valueToRemove)
+      onChange?.(newValues.length > 0 ? newValues : undefined)
+    }
+  }
+
+  // Check if option matches search for creation
+  const canCreate = React.useMemo(() => {
+    if (!creatable || !searchQuery.trim()) return false
+    const query = searchQuery.trim().toLowerCase()
+    return !allOptions.some((option) => option.label.toLowerCase() === query)
+  }, [creatable, searchQuery, allOptions])
+
+  // Group options
+  const groupedOptions = React.useMemo(() => {
+    return groupOptions(filteredOptions)
+  }, [filteredOptions])
+
+  // Display value
+  const displayValue = React.useMemo(() => {
+    if (selectedOptions.length === 0) return ""
+    if (multiple) {
+      return `${selectedOptions.length} sélectionné${selectedOptions.length > 1 ? "s" : ""}`
+    }
+    return selectedOptions[0]?.label || ""
+  }, [selectedOptions, multiple])
+
+  const sizeClasses = {
+    sm: "h-8 text-xs",
+    md: "h-9 text-sm",
+    lg: "h-10 text-base",
+  }
+
+  const iconSizes = {
+    sm: "h-3 w-3",
+    md: "h-4 w-4",
+    lg: "h-5 w-5",
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn(
+            "w-full justify-between font-normal",
+            sizeClasses[size],
+            !displayValue && "text-muted-foreground",
+            error && "border-destructive focus-visible:ring-destructive",
+            className
+          )}
+        >
+          <span className="flex-1 text-left truncate">
+            {displayValue || placeholder}
+          </span>
+          <div className="flex items-center gap-1 ml-2">
+            {loading && <Loader2 className={cn(iconSizes[size], "animate-spin")} />}
+            {clearable && selectedValues.length > 0 && !disabled && (
+              <X
+                className={cn(iconSizes[size], "opacity-50 hover:opacity-100")}
+                onClick={handleClear}
+              />
+            )}
+            <ChevronsUpDown className={cn(iconSizes[size], "opacity-50")} />
+          </div>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start">
+        <Command shouldFilter={false}>
+          <CommandInput
+            placeholder={searchPlaceholder}
+            value={searchQuery}
+            onValueChange={setSearchQuery}
+          />
+          <CommandList>
+            {loading && (
+              <div className="flex items-center justify-center py-6">
+                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+              </div>
+            )}
+
+            {!loading && filteredOptions.length === 0 && !canCreate && (
+              <CommandEmpty>{emptyMessage}</CommandEmpty>
+            )}
+
+            {!loading && Array.from(groupedOptions.entries()).map(([group, groupOptions], groupIndex) => (
+              <React.Fragment key={group || "ungrouped"}>
+                {groupIndex > 0 && <CommandSeparator />}
+                <CommandGroup heading={group}>
+                  {groupOptions.map((option) => {
+                    const isSelected = selectedValues.includes(option.value)
+
+                    return (
+                      <CommandItem
+                        key={String(option.value)}
+                        value={String(option.value)}
+                        onSelect={() => handleSelect(option)}
+                        disabled={option.disabled || (multiple && !!maxSelections && selectedValues.length >= maxSelections && !isSelected)}
+                        className={cn(
+                          "flex items-center gap-2",
+                          option.disabled && "opacity-50"
+                        )}
+                      >
+                        <div className={cn(
+                          "flex items-center justify-center w-4 h-4 border rounded",
+                          isSelected ? "bg-primary border-primary text-primary-foreground" : "border-muted-foreground/30"
+                        )}>
+                          {isSelected && <Check className="h-3 w-3" />}
+                        </div>
+                        {option.icon && <span className="flex-shrink-0">{option.icon}</span>}
+                        <div className="flex-1 min-w-0">
+                          <div className="truncate">{option.label}</div>
+                          {option.description && (
+                            <div className="text-xs text-muted-foreground truncate">
+                              {option.description}
+                            </div>
+                          )}
+                        </div>
+                      </CommandItem>
+                    )
+                  })}
+                </CommandGroup>
+              </React.Fragment>
+            ))}
+
+            {/* Create option */}
+            {canCreate && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem onSelect={handleCreate} className="flex items-center gap-2">
+                    <Plus className={iconSizes[size]} />
+                    <span>
+                      {createLabel} "{searchQuery.trim()}"
+                    </span>
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+
+      {/* Hidden input for form submission */}
+      {name && (
+        <input
+          type="hidden"
+          name={name}
+          value={multiple ? selectedValues.join(",") : String(selectedValues[0] || "")}
+        />
+      )}
+
+      {/* Selected badges (multiple mode) */}
+      {multiple && selectedOptions.length > 0 && (
+        <div className="flex flex-wrap gap-1 mt-2">
+          {selectedOptions.map((option) => (
+            <Badge
+              key={String(option.value)}
+              variant="secondary"
+              className="gap-1"
+            >
+              {option.icon}
+              {option.label}
+              <X
+                className="h-3 w-3 cursor-pointer hover:text-destructive"
+                onClick={() => handleRemove(option.value)}
+              />
+            </Badge>
+          ))}
+        </div>
+      )}
+    </Popover>
+  )
+}
+
+// ============================================
+// HOOK
+// ============================================
+
+export interface UseComboboxOptions<T = string> {
+  /** Options initiales */
+  options?: ComboboxOption<T>[]
+  /** Valeur initiale */
+  initialValue?: T | T[]
+  /** Mode multiple */
+  multiple?: boolean
+}
+
+export function useCombobox<T = string>(options: UseComboboxOptions<T> = {}) {
+  const { options: initialOptions = [], initialValue, multiple = false } = options
+  const [value, setValue] = React.useState<T | T[] | undefined>(initialValue)
+  const [comboboxOptions, setComboboxOptions] = React.useState<ComboboxOption<T>[]>(initialOptions)
+
+  const clear = () => setValue(undefined)
+
+  const addOption = (option: ComboboxOption<T>) => {
+    setComboboxOptions((prev) => [...prev, option])
+  }
+
+  const removeOption = (valueToRemove: T) => {
+    setComboboxOptions((prev) => prev.filter((o) => o.value !== valueToRemove))
+    // Also remove from selection if selected
+    if (multiple && Array.isArray(value)) {
+      setValue(value.filter((v) => v !== valueToRemove))
+    } else if (value === valueToRemove) {
+      setValue(undefined)
+    }
+  }
+
+  const selectAll = () => {
+    if (multiple) {
+      setValue(comboboxOptions.filter((o) => !o.disabled).map((o) => o.value))
+    }
+  }
+
+  const selectNone = () => setValue(multiple ? [] : undefined)
+
+  return {
+    value,
+    onChange: setValue,
+    options: comboboxOptions,
+    setOptions: setComboboxOptions,
+    clear,
+    addOption,
+    removeOption,
+    selectAll,
+    selectNone,
+    multiple,
+  }
+}
+
+export default WakaCombobox