@wakastellar/ui 2.0.0 → 2.1.0

package/src/components/waka-color-picker/index.tsx

@@ -0,0 +1,447 @@
+"use client"
+
+import * as React from "react"
+import { Pipette } from "lucide-react"
+import { Popover, PopoverContent, PopoverTrigger } from "../popover"
+import { Button } from "../button"
+import { Input } from "../input"
+import { Label } from "../label"
+import { cn } from "../../utils/cn"
+
+export type ColorFormat = "hex" | "rgb" | "hsl"
+
+export interface WakaColorPickerProps {
+  /** Valeur de la couleur */
+  value?: string
+  /** Callback de changement */
+  onChange?: (color: string) => void
+  /** Format de couleur */
+  format?: ColorFormat
+  /** Afficher le canal alpha */
+  showAlpha?: boolean
+  /** Afficher les couleurs prédéfinies */
+  showPresets?: boolean
+  /** Couleurs prédéfinies personnalisées */
+  presets?: string[]
+  /** Afficher l'outil EyeDropper (si supporté) */
+  showEyeDropper?: boolean
+  /** Désactivé */
+  disabled?: boolean
+  /** Placeholder */
+  placeholder?: string
+  /** Classes CSS additionnelles */
+  className?: string
+  /** Taille */
+  size?: "sm" | "md" | "lg"
+}
+
+// Couleurs prédéfinies par défaut
+const DEFAULT_PRESETS = [
+  "#ef4444", "#f97316", "#f59e0b", "#eab308", "#84cc16",
+  "#22c55e", "#10b981", "#14b8a6", "#06b6d4", "#0ea5e9",
+  "#3b82f6", "#6366f1", "#8b5cf6", "#a855f7", "#d946ef",
+  "#ec4899", "#f43f5e", "#000000", "#6b7280", "#ffffff",
+]
+
+/**
+ * Convertit une couleur HSL en RGB
+ */
+function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+  s /= 100
+  l /= 100
+  const a = s * Math.min(l, 1 - l)
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12
+    return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
+  }
+  return [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)]
+}
+
+/**
+ * Convertit une couleur RGB en HSL
+ */
+function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
+  r /= 255
+  g /= 255
+  b /= 255
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  let h = 0
+  let s = 0
+  const l = (max + min) / 2
+
+  if (max !== min) {
+    const d = max - min
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) * 60
+        break
+      case g:
+        h = ((b - r) / d + 2) * 60
+        break
+      case b:
+        h = ((r - g) / d + 4) * 60
+        break
+    }
+  }
+
+  return [Math.round(h), Math.round(s * 100), Math.round(l * 100)]
+}
+
+/**
+ * Convertit une couleur hex en RGB
+ */
+function hexToRgb(hex: string): [number, number, number] | null {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  if (!result) return null
+  return [
+    parseInt(result[1], 16),
+    parseInt(result[2], 16),
+    parseInt(result[3], 16),
+  ]
+}
+
+/**
+ * Convertit une couleur RGB en hex
+ */
+function rgbToHex(r: number, g: number, b: number): string {
+  return "#" + [r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("")
+}
+
+/**
+ * Parse une couleur en RGB
+ */
+function parseColor(color: string): [number, number, number] | null {
+  // Hex
+  if (color.startsWith("#")) {
+    return hexToRgb(color)
+  }
+
+  // RGB
+  const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/)
+  if (rgbMatch) {
+    return [parseInt(rgbMatch[1]), parseInt(rgbMatch[2]), parseInt(rgbMatch[3])]
+  }
+
+  // HSL
+  const hslMatch = color.match(/hsl\((\d+),\s*(\d+)%?,\s*(\d+)%?\)/)
+  if (hslMatch) {
+    return hslToRgb(parseInt(hslMatch[1]), parseInt(hslMatch[2]), parseInt(hslMatch[3]))
+  }
+
+  return null
+}
+
+/**
+ * Formate une couleur selon le format demandé
+ */
+function formatColor(r: number, g: number, b: number, format: ColorFormat): string {
+  switch (format) {
+    case "hex":
+      return rgbToHex(r, g, b)
+    case "rgb":
+      return `rgb(${r}, ${g}, ${b})`
+    case "hsl": {
+      const [h, s, l] = rgbToHsl(r, g, b)
+      return `hsl(${h}, ${s}%, ${l}%)`
+    }
+    default:
+      return rgbToHex(r, g, b)
+  }
+}
+
+/**
+ * Composant WakaColorPicker
+ */
+export const WakaColorPicker = React.forwardRef<HTMLButtonElement, WakaColorPickerProps>(
+  (
+    {
+      value = "#3b82f6",
+      onChange,
+      format = "hex",
+      showAlpha = false,
+      showPresets = true,
+      presets = DEFAULT_PRESETS,
+      showEyeDropper = true,
+      disabled = false,
+      placeholder = "Sélectionner une couleur",
+      className,
+      size = "md",
+    },
+    ref
+  ) => {
+    const [open, setOpen] = React.useState(false)
+    const [hue, setHue] = React.useState(0)
+    const [saturation, setSaturation] = React.useState(100)
+    const [lightness, setLightness] = React.useState(50)
+    const [inputValue, setInputValue] = React.useState(value)
+
+    const saturationRef = React.useRef<HTMLDivElement>(null)
+    const hueRef = React.useRef<HTMLDivElement>(null)
+
+    // Synchroniser l'état avec la valeur prop
+    React.useEffect(() => {
+      const rgb = parseColor(value)
+      if (rgb) {
+        const [h, s, l] = rgbToHsl(...rgb)
+        setHue(h)
+        setSaturation(s)
+        setLightness(l)
+        setInputValue(value)
+      }
+    }, [value])
+
+    // Mettre à jour la couleur
+    const updateColor = React.useCallback(
+      (h: number, s: number, l: number) => {
+        const [r, g, b] = hslToRgb(h, s, l)
+        const color = formatColor(r, g, b, format)
+        setInputValue(color)
+        onChange?.(color)
+      },
+      [format, onChange]
+    )
+
+    // Gestionnaire de glissement pour la saturation/lightness
+    const handleSaturationMouseDown = (e: React.MouseEvent) => {
+      e.preventDefault()
+      const rect = saturationRef.current?.getBoundingClientRect()
+      if (!rect) return
+
+      const handleMove = (clientX: number, clientY: number) => {
+        const s = Math.max(0, Math.min(100, ((clientX - rect.left) / rect.width) * 100))
+        const l = Math.max(0, Math.min(100, 100 - ((clientY - rect.top) / rect.height) * 100))
+        setSaturation(s)
+        setLightness(l)
+        updateColor(hue, s, l)
+      }
+
+      handleMove(e.clientX, e.clientY)
+
+      const onMouseMove = (e: MouseEvent) => handleMove(e.clientX, e.clientY)
+      const onMouseUp = () => {
+        document.removeEventListener("mousemove", onMouseMove)
+        document.removeEventListener("mouseup", onMouseUp)
+      }
+
+      document.addEventListener("mousemove", onMouseMove)
+      document.addEventListener("mouseup", onMouseUp)
+    }
+
+    // Gestionnaire de glissement pour la teinte
+    const handleHueMouseDown = (e: React.MouseEvent) => {
+      e.preventDefault()
+      const rect = hueRef.current?.getBoundingClientRect()
+      if (!rect) return
+
+      const handleMove = (clientX: number) => {
+        const h = Math.max(0, Math.min(360, ((clientX - rect.left) / rect.width) * 360))
+        setHue(h)
+        updateColor(h, saturation, lightness)
+      }
+
+      handleMove(e.clientX)
+
+      const onMouseMove = (e: MouseEvent) => handleMove(e.clientX)
+      const onMouseUp = () => {
+        document.removeEventListener("mousemove", onMouseMove)
+        document.removeEventListener("mouseup", onMouseUp)
+      }
+
+      document.addEventListener("mousemove", onMouseMove)
+      document.addEventListener("mouseup", onMouseUp)
+    }
+
+    // EyeDropper API
+    const handleEyeDropper = async () => {
+      if (!("EyeDropper" in window)) return
+
+      try {
+        // @ts-expect-error - EyeDropper API not in TypeScript types yet
+        const eyeDropper = new window.EyeDropper()
+        const result = await eyeDropper.open()
+        const rgb = parseColor(result.sRGBHex)
+        if (rgb) {
+          const [h, s, l] = rgbToHsl(...rgb)
+          setHue(h)
+          setSaturation(s)
+          setLightness(l)
+          updateColor(h, s, l)
+        }
+      } catch {
+        // Utilisateur a annulé
+      }
+    }
+
+    // Gestionnaire de changement d'input
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const val = e.target.value
+      setInputValue(val)
+      const rgb = parseColor(val)
+      if (rgb) {
+        const [h, s, l] = rgbToHsl(...rgb)
+        setHue(h)
+        setSaturation(s)
+        setLightness(l)
+        onChange?.(formatColor(...rgb, format))
+      }
+    }
+
+    const sizeClasses = {
+      sm: "h-7 w-7",
+      md: "h-9 w-9",
+      lg: "h-11 w-11",
+    }
+
+    const hasEyeDropper = showEyeDropper && typeof window !== "undefined" && "EyeDropper" in window
+
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            ref={ref}
+            variant="outline"
+            disabled={disabled}
+            className={cn(
+              "p-0.5 rounded-md border",
+              sizeClasses[size],
+              className
+            )}
+            title={placeholder}
+          >
+            <div
+              className="w-full h-full rounded"
+              style={{ backgroundColor: value }}
+            />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-64 p-3" align="start">
+          <div className="space-y-3">
+            {/* Zone de saturation/luminosité */}
+            <div
+              ref={saturationRef}
+              className="relative w-full h-36 rounded cursor-crosshair"
+              style={{
+                background: `
+                  linear-gradient(to top, #000, transparent),
+                  linear-gradient(to right, #fff, transparent),
+                  hsl(${hue}, 100%, 50%)
+                `,
+              }}
+              onMouseDown={handleSaturationMouseDown}
+            >
+              <div
+                className="absolute w-4 h-4 border-2 border-white rounded-full shadow -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+                style={{
+                  left: `${saturation}%`,
+                  top: `${100 - lightness}%`,
+                  backgroundColor: `hsl(${hue}, ${saturation}%, ${lightness}%)`,
+                }}
+              />
+            </div>
+
+            {/* Slider de teinte */}
+            <div
+              ref={hueRef}
+              className="relative w-full h-3 rounded cursor-pointer"
+              style={{
+                background: "linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)",
+              }}
+              onMouseDown={handleHueMouseDown}
+            >
+              <div
+                className="absolute w-3 h-5 border-2 border-white rounded -translate-x-1/2 -top-1 shadow pointer-events-none"
+                style={{
+                  left: `${(hue / 360) * 100}%`,
+                  backgroundColor: `hsl(${hue}, 100%, 50%)`,
+                }}
+              />
+            </div>
+
+            {/* Input de couleur */}
+            <div className="flex items-center gap-2">
+              <div
+                className="w-8 h-8 rounded border flex-shrink-0"
+                style={{ backgroundColor: value }}
+              />
+              <Input
+                value={inputValue}
+                onChange={handleInputChange}
+                className="h-8 text-sm font-mono"
+                placeholder={format === "hex" ? "#000000" : format === "rgb" ? "rgb(0,0,0)" : "hsl(0,0%,0%)"}
+              />
+              {hasEyeDropper && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8"
+                  onClick={handleEyeDropper}
+                  title="Pipette"
+                >
+                  <Pipette className="h-4 w-4" />
+                </Button>
+              )}
+            </div>
+
+            {/* Presets */}
+            {showPresets && presets.length > 0 && (
+              <div>
+                <Label className="text-xs text-muted-foreground">Couleurs prédéfinies</Label>
+                <div className="grid grid-cols-10 gap-1 mt-1">
+                  {presets.map((color) => (
+                    <button
+                      key={color}
+                      className={cn(
+                        "w-5 h-5 rounded border transition-transform hover:scale-110",
+                        value.toLowerCase() === color.toLowerCase() && "ring-2 ring-primary ring-offset-1"
+                      )}
+                      style={{ backgroundColor: color }}
+                      onClick={() => {
+                        const rgb = parseColor(color)
+                        if (rgb) {
+                          const [h, s, l] = rgbToHsl(...rgb)
+                          setHue(h)
+                          setSaturation(s)
+                          setLightness(l)
+                          updateColor(h, s, l)
+                        }
+                      }}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+    )
+  }
+)
+
+WakaColorPicker.displayName = "WakaColorPicker"
+
+/**
+ * Version intégrée avec react-hook-form
+ */
+export interface WakaColorPickerFormProps extends WakaColorPickerProps {
+  name: string
+  error?: string
+  label?: string
+}
+
+export const WakaColorPickerForm = React.forwardRef<HTMLButtonElement, WakaColorPickerFormProps>(
+  ({ error, label, className, ...props }, ref) => {
+    return (
+      <div className={cn("space-y-1.5", className)}>
+        {label && <Label htmlFor={props.name}>{label}</Label>}
+        <WakaColorPicker ref={ref} {...props} />
+        {error && <p className="text-sm text-destructive">{error}</p>}
+      </div>
+    )
+  }
+)
+
+WakaColorPickerForm.displayName = "WakaColorPickerForm"
+
+export default WakaColorPicker