@wakastellar/ui 2.0.0 → 2.1.0

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

@@ -0,0 +1,358 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown, X, Loader2, Plus } from "lucide-react"
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../command"
+import { Popover, PopoverContent, PopoverTrigger } from "../popover"
+import { Badge } from "../badge"
+import { Button } from "../button"
+import { Label } from "../label"
+import { cn } from "../../utils/cn"
+
+export interface AutocompleteOption {
+  value: string
+  label: string
+  disabled?: boolean
+  group?: string
+}
+
+export interface WakaAutocompleteProps {
+  /** Options disponibles */
+  options: AutocompleteOption[]
+  /** Valeur sélectionnée (string ou array pour multiple) */
+  value?: string | string[]
+  /** Callback de changement */
+  onChange?: (value: string | string[] | null) => void
+  /** Recherche asynchrone */
+  onSearch?: (query: string) => Promise<AutocompleteOption[]>
+  /** Mode sélection multiple */
+  multiple?: boolean
+  /** Permet de créer de nouvelles options */
+  creatable?: boolean
+  /** Callback lors de la création d'une option */
+  onCreate?: (value: string) => void
+  /** Placeholder */
+  placeholder?: string
+  /** Message quand aucun résultat */
+  emptyMessage?: string
+  /** Chargement en cours */
+  loading?: boolean
+  /** Désactivé */
+  disabled?: boolean
+  /** Erreur */
+  error?: string
+  /** Classes CSS additionnelles */
+  className?: string
+  /** Label */
+  label?: string
+  /** Description */
+  description?: string
+  /** Nombre max de sélections (mode multiple) */
+  maxSelections?: number
+  /** Tri des options */
+  sortOptions?: boolean
+  /** Debounce pour la recherche (ms) */
+  searchDebounce?: number
+}
+
+/**
+ * Composant WakaAutocomplete
+ */
+export const WakaAutocomplete = React.forwardRef<HTMLButtonElement, WakaAutocompleteProps>(
+  (
+    {
+      options: initialOptions,
+      value,
+      onChange,
+      onSearch,
+      multiple = false,
+      creatable = false,
+      onCreate,
+      placeholder = "Sélectionner...",
+      emptyMessage = "Aucun résultat.",
+      loading: externalLoading = false,
+      disabled = false,
+      error,
+      className,
+      label,
+      description,
+      maxSelections,
+      sortOptions = false,
+      searchDebounce = 300,
+    },
+    ref
+  ) => {
+    const [open, setOpen] = React.useState(false)
+    const [search, setSearch] = React.useState("")
+    const [options, setOptions] = React.useState<AutocompleteOption[]>(initialOptions)
+    const [loading, setLoading] = React.useState(false)
+    const searchTimeoutRef = React.useRef<NodeJS.Timeout>()
+
+    // Synchroniser les options quand elles changent
+    React.useEffect(() => {
+      if (!onSearch) {
+        setOptions(initialOptions)
+      }
+    }, [initialOptions, onSearch])
+
+    // Valeurs sélectionnées normalisées
+    const selectedValues = React.useMemo(() => {
+      if (!value) return []
+      return Array.isArray(value) ? value : [value]
+    }, [value])
+
+    // Recherche avec debounce
+    React.useEffect(() => {
+      if (!onSearch) return
+
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current)
+      }
+
+      if (!search.trim()) {
+        setOptions(initialOptions)
+        return
+      }
+
+      searchTimeoutRef.current = setTimeout(async () => {
+        setLoading(true)
+        try {
+          const results = await onSearch(search)
+          setOptions(results)
+        } catch {
+          setOptions([])
+        } finally {
+          setLoading(false)
+        }
+      }, searchDebounce)
+
+      return () => {
+        if (searchTimeoutRef.current) {
+          clearTimeout(searchTimeoutRef.current)
+        }
+      }
+    }, [search, onSearch, searchDebounce, initialOptions])
+
+    // Options filtrées et triées
+    const filteredOptions = React.useMemo(() => {
+      let filtered = options
+
+      // Filtrer par recherche si pas de recherche async
+      if (!onSearch && search.trim()) {
+        const searchLower = search.toLowerCase()
+        filtered = options.filter(
+          (opt) =>
+            opt.label.toLowerCase().includes(searchLower) ||
+            opt.value.toLowerCase().includes(searchLower)
+        )
+      }
+
+      // Trier
+      if (sortOptions) {
+        filtered = [...filtered].sort((a, b) => a.label.localeCompare(b.label))
+      }
+
+      return filtered
+    }, [options, search, onSearch, sortOptions])
+
+    // Grouper les options
+    const groupedOptions = React.useMemo(() => {
+      const groups: Record<string, AutocompleteOption[]> = { _ungrouped: [] }
+
+      for (const option of filteredOptions) {
+        const group = option.group || "_ungrouped"
+        if (!groups[group]) groups[group] = []
+        groups[group].push(option)
+      }
+
+      return groups
+    }, [filteredOptions])
+
+    // Peut créer une nouvelle option?
+    const canCreate =
+      creatable &&
+      search.trim() &&
+      !options.some((opt) => opt.value.toLowerCase() === search.toLowerCase())
+
+    // Sélectionner une option
+    const handleSelect = (optionValue: string) => {
+      if (multiple) {
+        const newValues = selectedValues.includes(optionValue)
+          ? selectedValues.filter((v) => v !== optionValue)
+          : maxSelections && selectedValues.length >= maxSelections
+            ? selectedValues
+            : [...selectedValues, optionValue]
+        onChange?.(newValues.length > 0 ? newValues : null)
+      } else {
+        onChange?.(optionValue === (value as string) ? null : optionValue)
+        setOpen(false)
+      }
+      setSearch("")
+    }
+
+    // Créer une nouvelle option
+    const handleCreate = () => {
+      if (!search.trim()) return
+
+      const newOption: AutocompleteOption = {
+        value: search.trim(),
+        label: search.trim(),
+      }
+
+      setOptions((prev) => [...prev, newOption])
+      handleSelect(newOption.value)
+      onCreate?.(newOption.value)
+    }
+
+    // Supprimer une valeur (mode multiple)
+    const handleRemove = (valueToRemove: string, e: React.MouseEvent) => {
+      e.stopPropagation()
+      const newValues = selectedValues.filter((v) => v !== valueToRemove)
+      onChange?.(newValues.length > 0 ? newValues : null)
+    }
+
+    // Label pour une valeur
+    const getLabel = (val: string) => {
+      const option = options.find((opt) => opt.value === val)
+      return option?.label || val
+    }
+
+    const isLoading = loading || externalLoading
+
+    return (
+      <div className={cn("space-y-1.5", className)}>
+        {label && <Label>{label}</Label>}
+        {description && <p className="text-sm text-muted-foreground">{description}</p>}
+
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              ref={ref}
+              variant="outline"
+              role="combobox"
+              aria-expanded={open}
+              disabled={disabled}
+              className={cn(
+                "w-full justify-between font-normal",
+                !value && "text-muted-foreground",
+                error && "border-destructive"
+              )}
+            >
+              {multiple ? (
+                <div className="flex flex-wrap gap-1 flex-1 min-w-0">
+                  {selectedValues.length > 0 ? (
+                    selectedValues.map((val) => (
+                      <Badge key={val} variant="secondary" className="text-xs">
+                        {getLabel(val)}
+                        <button
+                          className="ml-1 hover:text-destructive"
+                          onClick={(e) => handleRemove(val, e)}
+                        >
+                          <X className="h-3 w-3" />
+                        </button>
+                      </Badge>
+                    ))
+                  ) : (
+                    <span>{placeholder}</span>
+                  )}
+                </div>
+              ) : (
+                <span className="truncate">
+                  {value ? getLabel(value as string) : placeholder}
+                </span>
+              )}
+              {isLoading ? (
+                <Loader2 className="ml-2 h-4 w-4 shrink-0 animate-spin" />
+              ) : (
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              )}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
+            <Command shouldFilter={false}>
+              <CommandInput
+                placeholder="Rechercher..."
+                value={search}
+                onValueChange={setSearch}
+              />
+              <CommandList>
+                {isLoading && (
+                  <div className="py-6 text-center text-sm">
+                    <Loader2 className="h-4 w-4 animate-spin mx-auto mb-2" />
+                    Chargement...
+                  </div>
+                )}
+
+                {!isLoading && filteredOptions.length === 0 && !canCreate && (
+                  <CommandEmpty>{emptyMessage}</CommandEmpty>
+                )}
+
+                {/* Options créables */}
+                {canCreate && (
+                  <CommandGroup>
+                    <CommandItem onSelect={handleCreate} className="cursor-pointer">
+                      <Plus className="mr-2 h-4 w-4" />
+                      Créer &quot;{search}&quot;
+                    </CommandItem>
+                  </CommandGroup>
+                )}
+
+                {/* Options groupées */}
+                {Object.entries(groupedOptions).map(([group, groupOptions]) => {
+                  if (groupOptions.length === 0) return null
+
+                  return (
+                    <CommandGroup key={group} heading={group !== "_ungrouped" ? group : undefined}>
+                      {groupOptions.map((option) => (
+                        <CommandItem
+                          key={option.value}
+                          value={option.value}
+                          onSelect={() => handleSelect(option.value)}
+                          disabled={option.disabled}
+                          className="cursor-pointer"
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              selectedValues.includes(option.value)
+                                ? "opacity-100"
+                                : "opacity-0"
+                            )}
+                          />
+                          {option.label}
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  )
+                })}
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+
+        {error && <p className="text-sm text-destructive">{error}</p>}
+      </div>
+    )
+  }
+)
+
+WakaAutocomplete.displayName = "WakaAutocomplete"
+
+/**
+ * Version intégrée avec react-hook-form via Controller
+ */
+export interface WakaAutocompleteFormProps extends Omit<WakaAutocompleteProps, "value" | "onChange"> {
+  name: string
+  value?: string | string[]
+  onChange?: (value: string | string[] | null) => void
+}
+
+export const WakaAutocompleteForm = React.forwardRef<HTMLButtonElement, WakaAutocompleteFormProps>(
+  (props, ref) => {
+    return <WakaAutocomplete ref={ref} {...props} />
+  }
+)
+
+WakaAutocompleteForm.displayName = "WakaAutocompleteForm"
+
+export default WakaAutocomplete