@multiplatform.one/forms 6.0.0

package/src/fields/ColorPicker/index.tsx

@@ -0,0 +1,742 @@
+import type { DeepKeys, DeepValue } from "@tanstack/form-core";
+import { Pipette } from "@tamagui/lucide-icons-2";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { type ComponentProps, useCallback, useEffect, useRef, useState } from "react";
+import { type Popover, Text, View, XStack, YStack, useProps } from "tamagui";
+import { Button } from "../../Button";
+
+import { Field, FieldLayout } from "../../fieldLayout";
+import {
+  getFieldError,
+  mergeFieldHandler,
+  useFormField,
+  useResolvedValidators,
+} from "../../shared/utils";
+import type { FormFieldProps } from "../../fieldLayout";
+import { Input as InputParts } from "../../InputParts";
+import { Skeleton } from "../../Skeleton";
+import type { FieldComponentProps, Validator } from "../../types";
+
+import {
+  AlphaStrip,
+  ColorPickerInputTrigger,
+  ColorPickerPopoverShell,
+  HueStrip,
+  PresetSwatches,
+  SaturationPanel,
+  hexToHsv,
+  hexToRgb,
+  hsvToHex,
+  isValidHex,
+  normalizeHex,
+  rgbToHex,
+} from "./parts";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+type InputProps = ComponentProps<typeof InputParts.Area>;
+
+export type ColorPickerProps<
+  TParentData = unknown,
+  TName extends DeepKeys<TParentData> = DeepKeys<TParentData>,
+  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
+  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+> = Omit<
+  FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+  "children" | "field"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+      "children"
+    >
+  > & {
+    readOnly?: boolean;
+    format?: "hex" | "rgb" | "hsl";
+    showAlpha?: boolean;
+    presetColors?: string[];
+    placeholder?: string;
+    inputProps?: Omit<InputProps, "value" | "onChangeText" | "ref">;
+    /** Controlled value (for standalone usage without form) */
+    value?: string;
+    /** Called when value changes (for standalone usage without form) */
+    onValueChange?: (value: string) => void;
+    /** When true, renders a skeleton placeholder instead of the color picker */
+    skeleton?: boolean;
+    /** When true, uses compact sizing */
+    compact?: boolean;
+  };
+
+// ---------------------------------------------------------------------------
+// Default preset colors
+// ---------------------------------------------------------------------------
+
+const defaultPresets = [
+  "#EF4444",
+  "#F97316",
+  "#EAB308",
+  "#22C55E",
+  "#14B8A6",
+  "#3B82F6",
+  "#8B5CF6",
+  "#EC4899",
+  "#000000",
+  "#6B7280",
+  "#D1D5DB",
+  "#FFFFFF",
+];
+
+const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));
+
+function rgbToHsl(
+  r: number,
+  g: number,
+  b: number,
+): {
+  h: number;
+  s: number;
+  l: number;
+} {
+  const r1 = r / 255;
+  const g1 = g / 255;
+  const b1 = b / 255;
+  const max = Math.max(r1, g1, b1);
+  const min = Math.min(r1, g1, b1);
+  const d = max - min;
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+
+  if (d !== 0) {
+    s = d / (1 - Math.abs(2 * l - 1));
+    switch (max) {
+      case r1:
+        h = ((g1 - b1) / d + (g1 < b1 ? 6 : 0)) * 60;
+        break;
+      case g1:
+        h = ((b1 - r1) / d + 2) * 60;
+        break;
+      default:
+        h = ((r1 - g1) / d + 4) * 60;
+        break;
+    }
+  }
+
+  return {
+    h: Math.round(h),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100),
+  };
+}
+
+function hslToRgb(h: number, s: number, l: number): { r: number; g: number; b: number } {
+  const h1 = ((h % 360) + 360) % 360;
+  const s1 = clamp(s, 0, 100) / 100;
+  const l1 = clamp(l, 0, 100) / 100;
+
+  if (s1 === 0) {
+    const gray = Math.round(l1 * 255);
+    return { r: gray, g: gray, b: gray };
+  }
+
+  const c = (1 - Math.abs(2 * l1 - 1)) * s1;
+  const x = c * (1 - Math.abs(((h1 / 60) % 2) - 1));
+  const m = l1 - c / 2;
+
+  let rp = 0;
+  let gp = 0;
+  let bp = 0;
+
+  if (h1 < 60) {
+    rp = c;
+    gp = x;
+  } else if (h1 < 120) {
+    rp = x;
+    gp = c;
+  } else if (h1 < 180) {
+    gp = c;
+    bp = x;
+  } else if (h1 < 240) {
+    gp = x;
+    bp = c;
+  } else if (h1 < 300) {
+    rp = x;
+    bp = c;
+  } else {
+    rp = c;
+    bp = x;
+  }
+
+  return {
+    r: Math.round((rp + m) * 255),
+    g: Math.round((gp + m) * 255),
+    b: Math.round((bp + m) * 255),
+  };
+}
+
+type ParsedColor = { hex: string; alpha: number; isValid: boolean };
+
+function parseColorValue(value: string | undefined, format: "hex" | "rgb" | "hsl"): ParsedColor {
+  if (!value) return { hex: "", alpha: 100, isValid: true };
+  const raw = value.trim();
+  if (!raw) return { hex: "", alpha: 100, isValid: true };
+
+  if (format === "hex") {
+    if (!isValidHex(raw)) return { hex: "", alpha: 100, isValid: false };
+    return { hex: normalizeHex(raw), alpha: 100, isValid: true };
+  }
+
+  if (format === "rgb") {
+    const rgba =
+      /^rgba?\(\s*([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)(?:\s*,\s*([0-9]*\.?[0-9]+))?\s*\)$/i.exec(
+        raw,
+      );
+    if (!rgba) return { hex: "", alpha: 100, isValid: false };
+    const r = clamp(Number.parseInt(rgba[1], 10), 0, 255);
+    const g = clamp(Number.parseInt(rgba[2], 10), 0, 255);
+    const b = clamp(Number.parseInt(rgba[3], 10), 0, 255);
+    const alpha =
+      rgba[4] == null ? 100 : clamp(Math.round(Number.parseFloat(rgba[4]) * 100), 0, 100);
+    return { hex: rgbToHex(r, g, b), alpha, isValid: true };
+  }
+
+  const hsla =
+    /^hsla?\(\s*(-?[0-9]*\.?[0-9]+)\s*,\s*([0-9]*\.?[0-9]+)%\s*,\s*([0-9]*\.?[0-9]+)%(?:\s*,\s*([0-9]*\.?[0-9]+))?\s*\)$/i.exec(
+      raw,
+    );
+  if (!hsla) return { hex: "", alpha: 100, isValid: false };
+  const h = Number.parseFloat(hsla[1]);
+  const s = clamp(Number.parseFloat(hsla[2]), 0, 100);
+  const l = clamp(Number.parseFloat(hsla[3]), 0, 100);
+  const alpha = hsla[4] == null ? 100 : clamp(Math.round(Number.parseFloat(hsla[4]) * 100), 0, 100);
+  const { r, g, b } = hslToRgb(h, s, l);
+  return { hex: rgbToHex(r, g, b), alpha, isValid: true };
+}
+
+function formatAlpha(alpha: number): string {
+  return `${(alpha / 100).toFixed(2).replace(/\.?0+$/, "")}`;
+}
+
+function serializeColorValue(
+  hex: string,
+  format: "hex" | "rgb" | "hsl",
+  alpha: number,
+  includeAlpha: boolean,
+): string {
+  if (!hex) return "";
+  if (format === "hex") return normalizeHex(hex);
+
+  const rgb = hexToRgb(hex);
+  if (!rgb) return "";
+
+  if (format === "rgb") {
+    if (includeAlpha) {
+      return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${formatAlpha(alpha)})`;
+    }
+    return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+  }
+
+  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+  if (includeAlpha) {
+    return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${formatAlpha(alpha)})`;
+  }
+  return `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
+}
+
+// ---------------------------------------------------------------------------
+// ColorBody — orchestrates the picker panel inside the popover
+// ---------------------------------------------------------------------------
+
+interface ColorBodyProps {
+  hue: number;
+  saturation: number;
+  value: number;
+  alpha: number;
+  selectedColor: string;
+  showAlpha: boolean;
+  presetColors: string[];
+  onChangeHue: (h: number) => void;
+  onChangeSV: (s: number, v: number) => void;
+  onChangeAlpha: (a: number) => void;
+  onHexInput: (hex: string) => void;
+  onSelectPreset: (color: string) => void;
+}
+
+const panelSizeMap: Record<string, number> = {
+  small: 160,
+  medium: 220,
+  large: 260,
+};
+
+function ColorBody({
+  hue,
+  saturation,
+  value,
+  alpha,
+  selectedColor,
+  showAlpha,
+  presetColors,
+  onChangeHue,
+  onChangeSV,
+  onChangeAlpha,
+  onHexInput,
+  onSelectPreset,
+}: ColorBodyProps) {
+  const { knobProps } = useResolvedKnobs();
+  const panelSize = panelSizeMap[knobProps.size] ?? 220;
+  const [hexInputValue, setHexInputValue] = useState(selectedColor);
+  useEffect(() => {
+    setHexInputValue(selectedColor);
+  }, [selectedColor]);
+
+  const handleHexChange = useCallback(
+    (text: string) => {
+      setHexInputValue(text);
+      const normalized = text.startsWith("#") ? text : `#${text}`;
+      if (isValidHex(normalized)) {
+        onHexInput(normalizeHex(normalized));
+      }
+    },
+    [onHexInput],
+  );
+
+  const handleEyeDropper = useCallback(async () => {
+    if (typeof window !== "undefined" && "EyeDropper" in window) {
+      try {
+        const eyeDropper = new (
+          window as Window & {
+            EyeDropper: new () => { open: () => Promise<{ sRGBHex: string }> };
+          }
+        ).EyeDropper();
+        const result = await eyeDropper.open();
+        onHexInput(result.sRGBHex.toUpperCase());
+      } catch {
+        // user cancelled
+      }
+    }
+  }, [onHexInput]);
+
+  const hasEyeDropper = typeof window !== "undefined" && "EyeDropper" in window;
+
+  return (
+    <YStack {...knobProps.gap} alignItems="center">
+      <SaturationPanel
+        hue={hue}
+        saturation={saturation}
+        value={value}
+        onChangeSV={onChangeSV}
+        size={panelSize}
+      />
+
+      <YStack gap="$1.5" width={panelSize}>
+        <HueStrip hue={hue} onChangeHue={onChangeHue} width={panelSize} />
+        {showAlpha && (
+          <AlphaStrip
+            hue={hue}
+            saturation={saturation}
+            value={value}
+            alpha={alpha}
+            onChangeAlpha={onChangeAlpha}
+            width={panelSize}
+          />
+        )}
+      </YStack>
+
+      <PresetSwatches
+        presetColors={presetColors}
+        selectedColor={selectedColor}
+        onSelect={onSelectPreset}
+        width={panelSize}
+      />
+
+      <XStack gap="$2" width={panelSize} alignItems="center">
+        <View
+          width={24}
+          height={24}
+          borderRadius={knobProps.borderRadius.borderRadius}
+          backgroundColor={selectedColor}
+          flexShrink={0}
+        />
+        <InputParts size="$3" flex={1}>
+          <InputParts.Box>
+            <InputParts.Area
+              value={hexInputValue}
+              onChangeText={handleHexChange}
+              placeholder="#000000"
+              maxLength={7}
+            />
+          </InputParts.Box>
+        </InputParts>
+        {hasEyeDropper && (
+          <Button
+            size="$3"
+            chromeless
+            icon={<Pipette size={14} />}
+            onPress={handleEyeDropper}
+            cursor="pointer"
+            hoverStyle={{ opacity: 0.7 }}
+          />
+        )}
+      </XStack>
+
+      {showAlpha && (
+        <Text
+          fontSize="$3"
+          {...knobProps.body}
+          color={knobProps.textAccentColor}
+          alignSelf="flex-start"
+        >
+          Opacity: {alpha}%
+        </Text>
+      )}
+    </YStack>
+  );
+}
+
+interface ColorPickerControlProps {
+  value: string;
+  format: "hex" | "rgb" | "hsl";
+  showAlpha: boolean;
+  presetColors: string[];
+  placeholder: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  inputProps?: Omit<InputProps, "value" | "onChangeText" | "ref">;
+  hasError: boolean;
+  required?: boolean;
+  onValueChange: (value: string) => void;
+  onBlurControl?: () => void;
+}
+
+function ColorPickerControl({
+  value,
+  format,
+  showAlpha,
+  presetColors,
+  placeholder,
+  disabled,
+  readOnly,
+  inputProps,
+  hasError,
+  required,
+  onValueChange,
+  onBlurControl,
+}: ColorPickerControlProps) {
+  const { knobProps } = useResolvedKnobs();
+  const [open, setOpen] = useState(false);
+  const parsedInitial = parseColorValue(value, format);
+  const initialColor = parsedInitial.hex;
+  const [selectedColor, setSelectedColor] = useState<string>(initialColor);
+  const [hsv, setHsv] = useState(() => hexToHsv(initialColor || "#000000"));
+  const [alpha, setAlpha] = useState(parsedInitial.alpha);
+  const popoverRef = useRef<Popover>(null);
+
+  useEffect(() => {
+    const parsed = parseColorValue(value, format);
+    if (parsed.hex !== selectedColor) {
+      setSelectedColor(parsed.hex);
+      if (parsed.hex) {
+        setHsv(hexToHsv(parsed.hex));
+      }
+    }
+    if (parsed.alpha !== alpha) {
+      setAlpha(parsed.alpha);
+    }
+  }, [value, format]);
+
+  const closePopover = useCallback(() => {
+    setOpen(false);
+    popoverRef.current?.close();
+    onBlurControl?.();
+  }, [onBlurControl]);
+
+  const updateFromHsv = useCallback(
+    (h: number, s: number, v: number) => {
+      const hex = hsvToHex(h, s, v).toUpperCase();
+      setHsv({ h, s, v });
+      setSelectedColor(hex);
+      onValueChange(serializeColorValue(hex, format, alpha, showAlpha));
+    },
+    [alpha, format, onValueChange, showAlpha],
+  );
+
+  const handleChangeHue = useCallback(
+    (h: number) => updateFromHsv(h, hsv.s, hsv.v),
+    [hsv.s, hsv.v, updateFromHsv],
+  );
+
+  const handleChangeSV = useCallback(
+    (s: number, v: number) => updateFromHsv(hsv.h, s, v),
+    [hsv.h, updateFromHsv],
+  );
+
+  const handleHexInput = useCallback(
+    (hex: string) => {
+      const normalized = normalizeHex(hex);
+      const newHsv = hexToHsv(normalized);
+      setHsv(newHsv);
+      setSelectedColor(normalized);
+      onValueChange(serializeColorValue(normalized, format, alpha, showAlpha));
+    },
+    [alpha, format, onValueChange, showAlpha],
+  );
+
+  const handleSelectPreset = useCallback(
+    (color: string) => {
+      handleHexInput(normalizeHex(color));
+      closePopover();
+    },
+    [closePopover, handleHexInput],
+  );
+
+  const handleClear = useCallback(() => {
+    setSelectedColor("");
+    setHsv({ h: 0, s: 100, v: 100 });
+    setAlpha(100);
+    onValueChange("");
+  }, [onValueChange]);
+
+  const handleAlphaChange = useCallback(
+    (nextAlpha: number) => {
+      setAlpha(nextAlpha);
+      if (selectedColor) {
+        onValueChange(serializeColorValue(selectedColor, format, nextAlpha, showAlpha));
+      }
+    },
+    [format, onValueChange, selectedColor, showAlpha],
+  );
+
+  const colorContent = (
+    <ColorBody
+      hue={hsv.h}
+      saturation={hsv.s}
+      value={hsv.v}
+      alpha={alpha}
+      selectedColor={selectedColor}
+      showAlpha={showAlpha}
+      presetColors={presetColors}
+      onChangeHue={handleChangeHue}
+      onChangeSV={handleChangeSV}
+      onChangeAlpha={handleAlphaChange}
+      onHexInput={handleHexInput}
+      onSelectPreset={handleSelectPreset}
+    />
+  );
+
+  if (readOnly) {
+    const displayValue = value || selectedColor || placeholder;
+    return (
+      <InputParts.Box theme={hasError ? "red" : undefined}>
+        <View
+          width={20}
+          height={20}
+          borderRadius={knobProps.borderRadius.borderRadius}
+          marginLeft="$2"
+          alignSelf="center"
+          backgroundColor={displayValue || "transparent"}
+        />
+        <InputParts.Area
+          value={displayValue}
+          readOnly
+          placeholder={placeholder}
+          aria-readonly="true"
+          aria-required={required || undefined}
+          aria-invalid={hasError || undefined}
+        />
+      </InputParts.Box>
+    );
+  }
+
+  return (
+    <ColorPickerPopoverShell
+      open={open}
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen);
+        if (!nextOpen) onBlurControl?.();
+      }}
+      popoverRef={popoverRef}
+      trigger={
+        <ColorPickerInputTrigger
+          value={value || selectedColor}
+          placeholder={placeholder}
+          disabled={disabled}
+          onReset={handleClear}
+          onButtonPress={() => setOpen(true)}
+          error={hasError}
+          aria-required={required || undefined}
+          aria-invalid={hasError || undefined}
+          inputProps={inputProps}
+        />
+      }
+    >
+      {colorContent}
+    </ColorPickerPopoverShell>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ColorPicker — main exported component
+// ---------------------------------------------------------------------------
+
+export function ColorPicker<
+  TParentData,
+  TName extends DeepKeys<TParentData>,
+  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
+  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+>(props: ColorPickerProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+  const {
+    defaultValue,
+    form,
+    format: _format = "hex",
+    showAlpha = false,
+    presetColors = defaultPresets,
+    placeholder = "Select color",
+    inputProps,
+    mode,
+    name,
+    preserveValue,
+    validators,
+    disabled,
+    readOnly,
+    label,
+    labelProps,
+    error: errorProp,
+    helperText,
+    required,
+    size,
+    onBlur,
+    value: controlledValue,
+    onValueChange,
+    skeleton,
+    compact,
+    id: idProp,
+  } = useProps(props);
+
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  const [standaloneValue, setStandaloneValue] = useState<string>(
+    () => (controlledValue ?? (defaultValue as string)) || "",
+  );
+
+  // Sync internal state when controlled value changes
+  useEffect(() => {
+    if (controlledValue !== undefined) {
+      setStandaloneValue(controlledValue);
+    }
+  }, [controlledValue]);
+
+  // Combined handler for standalone mode
+  const handleStandaloneChange = useCallback(
+    (newValue: string) => {
+      setStandaloneValue(newValue);
+      onValueChange?.(newValue);
+    },
+    [onValueChange],
+  );
+
+  // Render skeleton placeholder
+  if (skeleton) {
+    return (
+      <InputParts size={size || knobProps.sizeToken}>
+        {label && <Skeleton variant="text" width="30%" height={14} />}
+        <Skeleton variant="rounded" width={knobProps.sizeToken} height={knobProps.sizeToken} />
+      </InputParts>
+    );
+  }
+
+  if (!resolvedForm || !name) {
+    const effectiveValue = controlledValue ?? standaloneValue;
+    const parsedStandalone = parseColorValue(effectiveValue, _format);
+    const standaloneFormatError =
+      effectiveValue.trim() && !parsedStandalone.isValid
+        ? `Invalid ${_format.toUpperCase()} color value`
+        : undefined;
+
+    return (
+      <FieldLayout
+        id={id}
+        label={label}
+        labelProps={labelProps}
+        error={errorProp || standaloneFormatError}
+        helperText={helperText}
+        required={required}
+        size={size}
+        knobProps={knobProps}
+        onBlur={onBlur}
+      >
+        <InputParts size={size || knobProps.sizeToken}>
+          <ColorPickerControl
+            value={effectiveValue}
+            format={_format}
+            showAlpha={showAlpha}
+            presetColors={presetColors}
+            placeholder={placeholder}
+            disabled={disabled}
+            readOnly={readOnly}
+            inputProps={inputProps}
+            hasError={!!errorProp || !!standaloneFormatError}
+            onValueChange={handleStandaloneChange}
+            required={required}
+            onBlurControl={() => onBlur?.(undefined as never)}
+          />
+        </InputParts>
+      </FieldLayout>
+    );
+  }
+
+  return (
+    <Field
+      defaultValue={defaultValue}
+      form={resolvedForm}
+      mode={mode}
+      name={name}
+      preserveValue={preserveValue}
+      validators={resolvedValidators}
+    >
+      {(field) => {
+        const resolvedError = getFieldError(field, errorProp);
+        const fieldValue = (field.state.value as string) || "";
+        const parsedField = parseColorValue(fieldValue, _format);
+        const fieldFormatError =
+          fieldValue.trim() && !parsedField.isValid
+            ? `Invalid ${_format.toUpperCase()} color value`
+            : undefined;
+
+        return (
+          <FieldLayout
+            id={id}
+            label={label}
+            labelProps={labelProps}
+            error={resolvedError || fieldFormatError}
+            helperText={helperText}
+            required={required}
+            size={size}
+            knobProps={knobProps}
+            onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
+          >
+            <InputParts size={size || knobProps.sizeToken}>
+              <ColorPickerControl
+                value={fieldValue}
+                format={_format}
+                showAlpha={showAlpha}
+                presetColors={presetColors}
+                placeholder={placeholder}
+                disabled={disabled}
+                readOnly={readOnly}
+                inputProps={inputProps}
+                hasError={!!resolvedError || !!fieldFormatError}
+                onValueChange={(newValue) => field.handleChange(newValue as TData)}
+                required={required}
+                onBlurControl={mergeFieldHandler(field, "handleBlur", onBlur)}
+              />
+            </InputParts>
+          </FieldLayout>
+        );
+      }}
+    </Field>
+  );
+}