@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/ui/legacy-color-picker/legacy-color-picker.picker.tsx

@@ -0,0 +1,266 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../../infrastructure/utilities/utils"
+import { useLegacyColorPickerContext } from "./legacy-color-picker.context"
+import {
+  hexToRgba,
+  hsvToRgb,
+  rgbToHsv,
+  rgbaToCss,
+  rgbaToHex,
+  type HsvColor,
+  type RgbaColor,
+} from "./legacy-color-picker.utils"
+
+function clamp01(value: number): number {
+  return Math.min(1, Math.max(0, value))
+}
+
+function getRelativePosition(event: React.PointerEvent<HTMLElement>): { x: number; y: number } {
+  const rect = event.currentTarget.getBoundingClientRect()
+  return {
+    x: clamp01((event.clientX - rect.left) / rect.width),
+    y: clamp01((event.clientY - rect.top) / rect.height),
+  }
+}
+
+function useDragState() {
+  const dragging = React.useRef(false)
+
+  const onPointerDown = React.useCallback((event: React.PointerEvent<HTMLElement>) => {
+    if (event.button !== 0 && event.pointerType === "mouse") return
+    dragging.current = true
+    event.currentTarget.setPointerCapture?.(event.pointerId)
+  }, [])
+
+  const onPointerUp = React.useCallback((event: React.PointerEvent<HTMLElement>) => {
+    dragging.current = false
+    try {
+      event.currentTarget.releasePointerCapture?.(event.pointerId)
+    } catch {
+      // Capture déjà libérée
+    }
+  }, [])
+
+  return { dragging, onPointerDown, onPointerUp }
+}
+
+interface ColorRangeInputProps {
+  value: number
+  gradient: React.CSSProperties["backgroundImage"]
+  label: string
+  valueText?: string
+  disabled?: boolean
+  onChange: (value: number) => void
+  onCommit?: (value: number) => void
+  className?: string
+  style?: React.CSSProperties
+}
+
+function ColorRangeInput({
+  value,
+  gradient,
+  label,
+  valueText,
+  disabled = false,
+  onChange,
+  onCommit,
+  className,
+  style,
+}: ColorRangeInputProps) {
+  const { dragging, onPointerDown, onPointerUp } = useDragState()
+
+  const commit = React.useCallback(() => {
+    onCommit?.(value)
+  }, [onCommit, value])
+
+  const updateFromEvent = (event: React.PointerEvent<HTMLElement>) => {
+    onChange(getRelativePosition(event).x)
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+    const step = event.shiftKey ? 0.05 : 0.01
+    if (event.key === "ArrowRight" || event.key === "ArrowUp") {
+      event.preventDefault()
+      onChange(clamp01(value + step))
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
+      event.preventDefault()
+      onChange(clamp01(value - step))
+    }
+  }
+
+  return (
+    <div
+      role="slider"
+      aria-label={label}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={Math.round(value * 100)}
+      aria-valuetext={valueText}
+      aria-disabled={disabled || undefined}
+      tabIndex={disabled ? -1 : 0}
+      data-slot="color-picker-range"
+      className={cn(
+        "relative h-4 w-full cursor-pointer rounded-full outline-none select-none touch-none",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className
+      )}
+      style={{ backgroundImage: gradient, ...style }}
+      onPointerDown={disabled ? undefined : onPointerDown}
+      onPointerMove={disabled ? undefined : (event) => dragging.current && updateFromEvent(event)}
+      onPointerUp={disabled ? undefined : (event) => {
+        onPointerUp(event)
+        commit()
+      }}
+      onPointerCancel={disabled ? undefined : onPointerUp}
+      onBlur={disabled || !onCommit ? undefined : commit}
+      onKeyDown={disabled ? undefined : handleKeyDown}
+    >
+      <span
+        aria-hidden
+        className="pointer-events-none absolute top-1/2 size-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-background bg-white shadow-md"
+        style={{ left: `${clamp01(value) * 100}%` }}
+      />
+    </div>
+  )
+}
+
+interface SaturationValuePickerProps {
+  hsv: HsvColor
+  disabled?: boolean
+  onChange: (saturation: number, value01: number) => void
+  onCommit?: (saturation: number, value01: number) => void
+}
+
+function SaturationValuePicker({
+  hsv,
+  disabled = false,
+  onChange,
+  onCommit,
+}: SaturationValuePickerProps) {
+  const { dragging, onPointerDown, onPointerUp } = useDragState()
+  const hueEnd = hsvToRgb(hsv.h, 1, 1)
+
+  const commit = React.useCallback(() => {
+    onCommit?.(hsv.s, hsv.v)
+  }, [onCommit, hsv.s, hsv.v])
+
+  const updateFromEvent = (event: React.PointerEvent<HTMLElement>) => {
+    const { x, y } = getRelativePosition(event)
+    onChange(x, 1 - y)
+  }
+
+  return (
+    <div
+      role="slider"
+      aria-label="Teinte et saturation"
+      aria-valuetext={`Saturation ${Math.round(hsv.s * 100)} %, Luminosité ${Math.round(hsv.v * 100)} %`}
+      aria-disabled={disabled || undefined}
+      tabIndex={disabled ? -1 : 0}
+      data-slot="color-picker-saturation-value"
+      className={cn(
+        "relative aspect-[4/3] w-full cursor-crosshair rounded-lg outline-none select-none touch-none",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "disabled:pointer-events-none disabled:opacity-50"
+      )}
+      style={{
+        backgroundImage: `linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, rgb(255, 255, 255), rgb(${Math.round(hueEnd.r)}, ${Math.round(hueEnd.g)}, ${Math.round(hueEnd.b)}))`,
+      }}
+      onPointerDown={disabled ? undefined : onPointerDown}
+      onPointerMove={disabled ? undefined : (event) => dragging.current && updateFromEvent(event)}
+      onPointerUp={disabled ? undefined : (event) => {
+        onPointerUp(event)
+        commit()
+      }}
+      onPointerCancel={disabled ? undefined : onPointerUp}
+      onBlur={disabled || !onCommit ? undefined : commit}
+    >
+      <span
+        aria-hidden
+        className="pointer-events-none absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border border-background shadow-md"
+        style={{
+          left: `${hsv.s * 100}%`,
+          top: `${(1 - hsv.v) * 100}%`,
+          backgroundColor: rgbaToCss({ ...hsvToRgb(hsv.h, hsv.s, hsv.v), a: 1 }),
+        }}
+      />
+    </div>
+  )
+}
+
+export function LegacyColorPickerPicker({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  const { value, disabled, onValueChange, onCommit } = useLegacyColorPickerContext()
+  const rgba = hexToRgba(value) ?? { r: 59, g: 130, b: 246, a: 1 }
+  const hsv = rgbToHsv(rgba.r, rgba.g, rgba.b)
+
+  const liveUpdate = React.useCallback(
+    (next: RgbaColor) => {
+      onValueChange(rgbaToHex(next))
+    },
+    [onValueChange]
+  )
+
+  const finalize = React.useCallback(
+    (next: RgbaColor) => {
+      onCommit(rgbaToHex(next))
+    },
+    [onCommit]
+  )
+
+  return (
+    <div
+      data-slot="color-picker-picker"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    >
+      <SaturationValuePicker
+        disabled={disabled}
+        hsv={hsv}
+        onChange={(s, v) => {
+          const rgb = hsvToRgb(hsv.h, s, v)
+          liveUpdate({ r: rgb.r, g: rgb.g, b: rgb.b, a: rgba.a })
+        }}
+        onCommit={(s, v) => {
+          const rgb = hsvToRgb(hsv.h, s, v)
+          finalize({ r: rgb.r, g: rgb.g, b: rgb.b, a: rgba.a })
+        }}
+      />
+      <div className="flex items-center gap-2">
+        <div className="min-w-0 flex-1">
+          <ColorRangeInput
+            value={hsv.h / 360}
+            label="Teinte"
+            valueText={`${Math.round(hsv.h)} degrés`}
+            disabled={disabled}
+            onChange={(x) => {
+              const rgb = hsvToRgb(x * 360, hsv.s, hsv.v)
+              liveUpdate({ r: rgb.r, g: rgb.g, b: rgb.b, a: rgba.a })
+            }}
+            onCommit={(x) => {
+              const rgb = hsvToRgb(x * 360, hsv.s, hsv.v)
+              finalize({ r: rgb.r, g: rgb.g, b: rgb.b, a: rgba.a })
+            }}
+            gradient="linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%))"
+          />
+        </div>
+        <div className="min-w-0 flex-1">
+          <ColorRangeInput
+            value={rgba.a}
+            label="Opacité"
+            valueText={`${Math.round(rgba.a * 100)} %`}
+            disabled={disabled}
+            onChange={(a) => liveUpdate({ ...rgba, a })}
+            onCommit={(a) => finalize({ ...rgba, a })}
+            gradient={`linear-gradient(to right, rgba(${Math.round(rgba.r)}, ${Math.round(rgba.g)}, ${Math.round(rgba.b)}, 0), rgb(${Math.round(rgba.r)}, ${Math.round(rgba.g)}, ${Math.round(rgba.b)}))`}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/presentation/ui/legacy-color-picker/legacy-color-picker.presets.ts

@@ -0,0 +1,22 @@
+export const DEFAULT_COLOR_PICKER_PRESETS = [
+  "#EF4444", // red-500
+  "#F97316", // orange-500
+  "#F59E0B", // amber-500
+  "#EAB308", // yellow-500
+  "#84CC16", // lime-500
+  "#22C55E", // green-500
+  "#10B981", // emerald-500
+  "#14B8A6", // teal-500
+  "#06B6D4", // cyan-500
+  "#0EA5E9", // sky-500
+  "#3B82F6", // blue-500
+  "#6366F1", // indigo-500
+  "#8B5CF6", // violet-500
+  "#A855F7", // purple-500
+  "#D946EF", // fuchsia-500
+  "#EC4899", // pink-500
+  "#F43F5E", // rose-500
+  "#334155", // slate-700
+  "#6B7280", // gray-500
+  "#E5E7EB", // gray-200
+]

package/src/presentation/ui/legacy-color-picker/legacy-color-picker.quick-list.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../../infrastructure/utilities/utils"
+import { useLegacyColorPickerContext } from "./legacy-color-picker.context"
+import { LegacyColorPickerSwatch } from "./legacy-color-picker.swatches"
+
+export function LegacyColorPickerQuickList({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  const { recentColors, presets, quickListCount } = useLegacyColorPickerContext()
+
+  const colors = React.useMemo(() => {
+    const seen = new Set<string>()
+    const result: string[] = []
+    for (const color of [...recentColors, ...presets]) {
+      const key = color.toLowerCase()
+      if (seen.has(key)) continue
+      seen.add(key)
+      result.push(color)
+      if (result.length >= quickListCount) break
+    }
+    return result
+  }, [recentColors, presets, quickListCount])
+
+  return (
+    <div
+      data-slot="color-picker-quick-list"
+      aria-label="Couleurs rapides"
+      className={cn(
+        "no-scrollbar flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto p-4",
+        className
+      )}
+      {...props}
+    >
+      <div
+        role="group"
+        aria-label="Couleurs prédéfinies et récentes"
+        className="flex shrink-0 items-center gap-1.5"
+      >
+        {colors.map((color) => (
+          <LegacyColorPickerSwatch key={color} value={color} size="sm" />
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/presentation/ui/legacy-color-picker/legacy-color-picker.recent.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../../infrastructure/utilities/utils"
+import { useLegacyColorPickerContext } from "./legacy-color-picker.context"
+import { LegacyColorPickerSwatch } from "./legacy-color-picker.swatches"
+
+export function LegacyColorPickerRecent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  const { recentColors } = useLegacyColorPickerContext()
+
+  if (recentColors.length === 0) {
+    return null
+  }
+
+  return (
+    <div
+      data-slot="color-picker-recent"
+      className={cn("flex flex-col gap-1.5", className)}
+      {...props}
+    >
+      <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        Récentes
+      </span>
+      <div
+        role="group"
+        aria-label="Dernières couleurs sélectionnées"
+        className="grid grid-cols-5 gap-1.5"
+      >
+        {recentColors.map((color) => (
+          <LegacyColorPickerSwatch
+            key={color}
+            value={color}
+            title={`Récemment utilisée : ${color}`}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/presentation/ui/legacy-color-picker/legacy-color-picker.swatches.tsx

@@ -0,0 +1,111 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../../infrastructure/utilities/utils"
+import {
+  chainHandlers,
+  useElasticInteraction,
+} from "../../../infrastructure/hooks/use-elastic-interaction"
+import { useLegacyColorPickerContext } from "./legacy-color-picker.context"
+
+export function LegacyColorPickerSwatchGroup({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  const { presets } = useLegacyColorPickerContext()
+
+  return (
+    <div
+      data-slot="color-picker-swatch-group"
+      role="group"
+      aria-label="Couleurs prédéfinies"
+      className={cn("grid grid-cols-5 gap-1.5", className)}
+      {...props}
+    >
+      {presets.map((color) => (
+        <LegacyColorPickerSwatch key={color} value={color} />
+      ))}
+    </div>
+  )
+}
+
+export interface LegacyColorPickerSwatchProps extends React.ComponentProps<"button"> {
+  value: string
+  size?: "sm" | "md"
+}
+
+const swatchSizeClasses: Record<NonNullable<LegacyColorPickerSwatchProps["size"]>, string> = {
+  sm: "size-5",
+  md: "size-6",
+}
+
+export function LegacyColorPickerSwatch({
+  value,
+  size = "md",
+  className,
+  disabled = false,
+  title,
+  onClick,
+  onPointerDown,
+  onPointerUp,
+  onPointerCancel,
+  onPointerLeave,
+  onMouseEnter,
+  onMouseLeave,
+  onFocus,
+  onBlur,
+  ...props
+}: LegacyColorPickerSwatchProps) {
+  const {
+    value: selectedValue,
+    onValueChange,
+    onCommit,
+    disabled: contextDisabled,
+  } = useLegacyColorPickerContext()
+  const isSelected = selectedValue.toLowerCase() === value.toLowerCase()
+  const resolvedDisabled = disabled || contextDisabled
+  const elastic = useElasticInteraction({ pressScale: 0.92, focusScale: 1.05, hoverScale: 1.12 })
+
+  return (
+    <button
+      type="button"
+      data-slot="color-picker-swatch"
+      data-state={isSelected ? "selected" : "idle"}
+      aria-pressed={isSelected}
+      aria-label={title ?? `Couleur ${value}`}
+      title={title ?? value}
+      disabled={resolvedDisabled}
+      className={cn(
+        "relative flex items-center justify-center rounded-full outline-none transition-transform",
+        swatchSizeClasses[size],
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className
+      )}
+      style={{
+        backgroundColor: value,
+        // border: isSelected ? `5px solid ${value}` : "0 solid transparent",
+        boxShadow: isSelected
+          ? `0 0 0 2px var(--background), 0 0 0 3.5px ${value}`
+          : "inset 0 0 0 1px rgba(0, 0, 0, 0.06)",
+      }}
+      onClick={(event) => {
+        onValueChange(value)
+        onCommit(value)
+        onClick?.(event)
+      }}
+      onPointerDown={chainHandlers(elastic.onPointerDown, onPointerDown)}
+      onPointerUp={chainHandlers(elastic.onPointerUp, onPointerUp)}
+      onPointerCancel={chainHandlers(elastic.onPointerCancel, onPointerCancel)}
+      onPointerLeave={chainHandlers(elastic.onPointerLeave, onPointerLeave)}
+      onMouseEnter={chainHandlers(elastic.onMouseEnter, onMouseEnter)}
+      onMouseLeave={chainHandlers(elastic.onMouseLeave, onMouseLeave)}
+      onFocus={chainHandlers(elastic.onFocus, onFocus)}
+      onBlur={chainHandlers(elastic.onBlur, onBlur)}
+      {...props}
+    >
+      {isSelected && <span className="size-2 rounded-full bg-background" />}
+    </button>
+  )
+}

package/src/presentation/ui/legacy-color-picker/legacy-color-picker.trigger.tsx

@@ -0,0 +1,128 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { PaletteIcon } from "lucide-react"
+
+import { cn } from "../../../infrastructure/utilities/utils"
+import {
+  chainHandlers,
+  useElasticInteraction,
+} from "../../../infrastructure/hooks/use-elastic-interaction"
+import { PopoverTrigger } from "../popover"
+import { useLegacyColorPickerContext } from "./legacy-color-picker.context"
+
+export const colorPickerTriggerVariants = cva(
+  "relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full outline-none transition-transform select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        xs: "size-4",
+        sm: "size-5",
+        md: "size-6",
+        lg: "size-7",
+        xl: "size-8",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+export interface LegacyColorPickerTriggerProps
+  extends VariantProps<typeof colorPickerTriggerVariants>,
+    React.ComponentProps<typeof PopoverTrigger> {
+  asChild?: boolean
+}
+
+export function LegacyColorPickerTrigger({
+  className,
+  size,
+  asChild = false,
+  title,
+  onPointerDown,
+  onPointerUp,
+  onPointerCancel,
+  onPointerLeave,
+  onMouseEnter,
+  onMouseLeave,
+  onFocus,
+  onBlur,
+  ...props
+}: LegacyColorPickerTriggerProps) {
+  const { value, size: contextSize, disabled } = useLegacyColorPickerContext()
+  const resolvedSize = size ?? contextSize
+  const elastic = useElasticInteraction({ pressScale: 0.96, focusScale: 1.04, hoverScale: 1.05 })
+
+  return (
+    <PopoverTrigger
+      asChild={asChild}
+      data-slot="color-picker-trigger"
+      aria-label={title ?? `Couleur ${value}`}
+      title={title ?? value}
+      disabled={disabled}
+      className={cn(colorPickerTriggerVariants({ size: resolvedSize }), className)}
+      style={{ backgroundColor: value, boxShadow: "inset 0 0 0 1px rgba(0, 0, 0, 0.06)" }}
+      onPointerDown={chainHandlers(elastic.onPointerDown, onPointerDown)}
+      onPointerUp={chainHandlers(elastic.onPointerUp, onPointerUp)}
+      onPointerCancel={chainHandlers(elastic.onPointerCancel, onPointerCancel)}
+      onPointerLeave={chainHandlers(elastic.onPointerLeave, onPointerLeave)}
+      onMouseEnter={chainHandlers(elastic.onMouseEnter, onMouseEnter)}
+      onMouseLeave={chainHandlers(elastic.onMouseLeave, onMouseLeave)}
+      onFocus={chainHandlers(elastic.onFocus, onFocus)}
+      onBlur={chainHandlers(elastic.onBlur, onBlur)}
+      {...props}
+    />
+  )
+}
+
+export interface LegacyColorPickerOpenButtonProps
+  extends React.ComponentProps<typeof PopoverTrigger> {}
+
+export function LegacyColorPickerOpenButton({
+  className,
+  asChild = false,
+  title,
+  onPointerDown,
+  onPointerUp,
+  onPointerCancel,
+  onPointerLeave,
+  onMouseEnter,
+  onMouseLeave,
+  onFocus,
+  onBlur,
+  ...props
+}: LegacyColorPickerOpenButtonProps) {
+  const { disabled } = useLegacyColorPickerContext()
+  const elastic = useElasticInteraction({ pressScale: 0.92, focusScale: 1.08, hoverScale: 1.1 })
+
+  return (
+    <PopoverTrigger
+      asChild={asChild}
+      data-slot="color-picker-open-button"
+      aria-label={title ?? "Ouvrir le sélecteur de couleurs"}
+      title={title ?? "Ouvrir le sélecteur de couleurs"}
+      disabled={disabled}
+      className={cn(
+        "inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full",
+        "bg-foreground text-background outline-none transition-transform select-none",
+        "hover:bg-primary hover:text-primary-foreground",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className
+      )}
+      onPointerDown={chainHandlers(elastic.onPointerDown, onPointerDown)}
+      onPointerUp={chainHandlers(elastic.onPointerUp, onPointerUp)}
+      onPointerCancel={chainHandlers(elastic.onPointerCancel, onPointerCancel)}
+      onPointerLeave={chainHandlers(elastic.onPointerLeave, onPointerLeave)}
+      onMouseEnter={chainHandlers(elastic.onMouseEnter, onMouseEnter)}
+      onMouseLeave={chainHandlers(elastic.onMouseLeave, onMouseLeave)}
+      onFocus={chainHandlers(elastic.onFocus, onFocus)}
+      onBlur={chainHandlers(elastic.onBlur, onBlur)}
+      {...props}
+    >
+      <PaletteIcon aria-hidden className="size-3.5" />
+    </PopoverTrigger>
+  )
+}