@proyecto-viviana/solid-stately 0.2.7 → 0.3.0

package/src/color/createColorFieldState.ts

@@ -1,144 +1,254 @@
 /**
  * ColorField state management.
- * Based on @react-stately/color useColorFieldState.
+ * Based on @react-stately/color useColorFieldState and useColorChannelFieldState.
  */
 
-import { createSignal, createMemo, type Accessor } from 'solid-js';
-import type { Color, ColorChannel, ColorFormat } from './types';
-import { normalizeColor, parseColor } from './Color';
+import { createEffect, createMemo, createSignal, type Accessor } from "solid-js";
+import type { Color, ColorChannel, ColorChannelRange, ColorFormat, ColorSpace } from "./types";
+import { createRGBColor, normalizeColor, parseColor } from "./Color";
+
+const HEX_COLOR_MAX = 0xffffff;
+const PARTIAL_HEX_PATTERN = /^#?[0-9a-f]{0,6}$/i;
 
 export interface ColorFieldStateOptions {
   /** The current color value (controlled). */
   value?: Color | string | null;
   /** The default color value (uncontrolled). */
-  defaultValue?: Color | string;
+  defaultValue?: Color | string | null;
   /** Handler called when the color changes. */
   onChange?: (color: Color | null) => void;
   /** The color channel to edit (for single channel mode). */
   channel?: ColorChannel;
-  /** The color format for parsing/displaying. */
+  /** The color space to use for channel mode. */
+  colorSpace?: ColorSpace;
+  /** The color format for parsing/displaying in hex mode. */
   colorFormat?: ColorFormat;
+  /** Locale used to format channel values. */
+  locale?: string;
   /** Whether the field is disabled. */
   isDisabled?: boolean;
   /** Whether the field is read-only. */
   isReadOnly?: boolean;
+  /** Whether the field is invalid. */
+  isInvalid?: boolean;
+  /** Whether the field is required. */
+  isRequired?: boolean;
 }
 
 export interface ColorFieldState {
-  /** The current color value (null if invalid). */
+  /** The current color value (null if empty). */
   readonly value: Color | null;
+  /** The color used for channel calculations. */
+  readonly colorValue: Color;
   /** The current input text. */
   readonly inputValue: string;
+  /** The numeric value exposed by channel fields. */
+  readonly numberValue: number;
+  /** The channel minimum value after formatting normalization. */
+  readonly minValue: number;
+  /** The channel maximum value after formatting normalization. */
+  readonly maxValue: number;
+  /** The channel keyboard step after formatting normalization. */
+  readonly step: number;
+  /** The channel page step after formatting normalization. */
+  readonly pageSize: number;
+  /** Number formatter options for channel fields. */
+  readonly formatOptions: Intl.NumberFormatOptions;
   /** Whether the input is invalid. */
   readonly isInvalid: boolean;
   /** Whether the field is disabled. */
   readonly isDisabled: boolean;
   /** Whether the field is read-only. */
   readonly isReadOnly: boolean;
+  /** Whether the field is required. */
+  readonly isRequired: boolean;
   /** The color channel being edited (if single channel mode). */
   readonly channel: ColorChannel | undefined;
 
   /** Set the input text value. */
   setInputValue(value: string): void;
+  /** Set the color value. */
+  setColorValue(value: Color | null): void;
   /** Commit the current input value. */
   commit(): void;
-  /** Increment the color channel value. */
+  /** Increment the color value. */
   increment(): void;
-  /** Decrement the color channel value. */
+  /** Decrement the color value. */
   decrement(): void;
-  /** Increment by page size. */
+  /** Increment by page size or to the maximum. */
   incrementToMax(): void;
-  /** Decrement to minimum. */
+  /** Decrement by page size or to the minimum. */
   decrementToMin(): void;
-  /** Validate the current input. */
-  validate(): boolean;
+  /** Validate the current input or a candidate input. */
+  validate(value?: string): boolean;
 }
 
-/**
- * Creates state for a color field (text input for color values).
- */
-export function createColorFieldState(
-  options: Accessor<ColorFieldStateOptions>
-): ColorFieldState {
-  const getOptions = () => options();
+function normalizeNullableColor(value: Color | string | null | undefined): Color | null {
+  if (value == null) {
+    return null;
+  }
+  return normalizeColor(value);
+}
 
-  // Internal value state
-  const [internalValue, setInternalValue] = createSignal<Color | null>(null);
-  const [inputValue, setInputValueInternal] = createSignal('');
-  const [isInvalid, setIsInvalid] = createSignal(false);
+function getDefaultValue(options: ColorFieldStateOptions): Color | null {
+  if (options.defaultValue !== undefined) {
+    return normalizeNullableColor(options.defaultValue);
+  }
 
-  // Initialize internal value
-  const initValue = () => {
-    const opts = getOptions();
-    if (opts.defaultValue) {
-      const color = normalizeColor(opts.defaultValue);
-      return color;
-    }
-    return null;
+  if (options.value !== undefined) {
+    return normalizeNullableColor(options.value);
+  }
+
+  return null;
+}
+
+function convertColor(color: Color, colorSpace: ColorSpace | undefined): Color {
+  return colorSpace ? color.toFormat(colorSpace) : color;
+}
+
+function getDisplayColor(color: Color | null, colorSpace: ColorSpace | undefined): Color {
+  return convertColor(color ?? createRGBColor(0, 0, 0), colorSpace);
+}
+
+function getChannelMultiplier(color: Color, channel: ColorChannel): number {
+  const range = color.getChannelRange(channel);
+  const formatOptions = color.getChannelFormatOptions(channel);
+  return formatOptions.style === "percent" && range.maxValue === 100 ? 100 : 1;
+}
+
+function getNormalizedRange(color: Color, channel: ColorChannel): ColorChannelRange {
+  const multiplier = getChannelMultiplier(color, channel);
+  const range = color.getChannelRange(channel);
+
+  return {
+    minValue: range.minValue / multiplier,
+    maxValue: range.maxValue / multiplier,
+    step: range.step / multiplier,
+    pageSize: range.pageSize / multiplier,
   };
+}
 
-  // Set initial value
-  if (internalValue() === null) {
-    const init = initValue();
-    if (init) {
-      setInternalValue(init);
-      setInputValueInternal(formatColorValue(init, getOptions().channel, getOptions().colorFormat));
-    }
+function formatColorValue(
+  color: Color | null,
+  channel: ColorChannel | undefined,
+  colorSpace: ColorSpace | undefined,
+  format: ColorFormat | undefined,
+  locale: string,
+): string {
+  if (!color) {
+    return "";
   }
 
-  // Controlled vs uncontrolled value
+  const displayColor = getDisplayColor(color, colorSpace);
+
+  if (channel) {
+    return displayColor.formatChannelValue(channel, locale);
+  }
+
+  return displayColor.toString(format ?? "hex");
+}
+
+function normalizeHexInput(value: string): string {
+  return value.startsWith("#") ? value : `#${value}`;
+}
+
+function parseHexValue(value: string, format: ColorFormat | undefined): Color {
+  const color = parseColor(normalizeHexInput(value));
+  return format ? color.toFormat(format) : color;
+}
+
+function parseChannelValue(text: string, color: Color, channel: ColorChannel): number | null {
+  const trimmed = text.trim();
+  const hasPercent = trimmed.endsWith("%");
+  const parsed = Number.parseFloat(hasPercent ? trimmed.slice(0, -1) : trimmed);
+
+  if (Number.isNaN(parsed)) {
+    return null;
+  }
+
+  const range = color.getChannelRange(channel);
+  const formatOptions = color.getChannelFormatOptions(channel);
+  const multiplier = getChannelMultiplier(color, channel);
+  const rawValue = hasPercent && formatOptions.style === "percent" ? parsed : parsed * multiplier;
+
+  return Math.min(range.maxValue, Math.max(range.minValue, rawValue));
+}
+
+function hexIntToColor(value: number): Color {
+  const clamped = Math.min(HEX_COLOR_MAX, Math.max(0, Math.round(value)));
+  const red = (clamped >> 16) & 0xff;
+  const green = (clamped >> 8) & 0xff;
+  const blue = clamped & 0xff;
+  return createRGBColor(red, green, blue);
+}
+
+/**
+ * Creates state for a color field (text input for color values).
+ */
+export function createColorFieldState(options: Accessor<ColorFieldStateOptions>): ColorFieldState {
+  const getOptions = () => options();
+  const initialOptions = getOptions();
+  const initialValue = getDefaultValue(initialOptions);
+
+  const [internalValue, setInternalValue] = createSignal<Color | null>(initialValue);
+  const [inputValue, setInputValueInternal] = createSignal(
+    formatColorValue(
+      initialValue,
+      initialOptions.channel,
+      initialOptions.colorSpace,
+      initialOptions.colorFormat,
+      initialOptions.locale ?? "en-US",
+    ),
+  );
+  const [invalidInput, setInvalidInput] = createSignal(false);
+
+  const channel = createMemo(() => getOptions().channel);
+  const colorSpace = createMemo(() => getOptions().colorSpace);
+  const locale = createMemo(() => getOptions().locale ?? "en-US");
+
   const value = createMemo(() => {
     const opts = getOptions();
     if (opts.value !== undefined) {
-      if (opts.value === null) return null;
-      return normalizeColor(opts.value);
+      return normalizeNullableColor(opts.value);
     }
     return internalValue();
   });
 
-  const channel = createMemo(() => getOptions().channel);
+  const colorValue = createMemo(() => getDisplayColor(value(), colorSpace()));
   const isDisabled = createMemo(() => getOptions().isDisabled ?? false);
   const isReadOnly = createMemo(() => getOptions().isReadOnly ?? false);
+  const isRequired = createMemo(() => getOptions().isRequired ?? false);
+  const isInvalid = createMemo(() => (getOptions().isInvalid ?? false) || invalidInput());
 
-  // Format color value for display
-  function formatColorValue(
-    color: Color | null,
-    chan?: ColorChannel,
-    format?: ColorFormat
-  ): string {
-    if (!color) return '';
+  const formatCurrentValue = (color: Color | null = value()) =>
+    formatColorValue(color, channel(), colorSpace(), getOptions().colorFormat, locale());
 
-    // Single channel mode
-    if (chan) {
-      return String(color.getChannelValue(chan));
-    }
-
-    // Full color mode
-    return color.toString(format ?? 'hex');
-  }
+  createEffect(() => {
+    setInputValueInternal(formatCurrentValue());
+    setInvalidInput(false);
+  });
 
-  // Update value
   const updateValue = (newColor: Color | null) => {
     const opts = getOptions();
 
-    // Controlled mode
-    if (opts.value !== undefined) {
-      opts.onChange?.(newColor);
-      return;
+    if (opts.value === undefined) {
+      setInternalValue(newColor);
     }
 
-    // Uncontrolled mode
-    setInternalValue(newColor);
     opts.onChange?.(newColor);
+    setInputValueInternal(formatCurrentValue(newColor));
+    setInvalidInput(false);
   };
 
-  // Set input value
   const setInputValue = (text: string) => {
     setInputValueInternal(text);
-    setIsInvalid(false);
+    setInvalidInput(false);
+  };
+
+  const setColorValue = (newColor: Color | null) => {
+    updateValue(newColor);
   };
 
-  // Commit the input value
   const commit = () => {
     const text = inputValue().trim();
     const opts = getOptions();
@@ -146,129 +256,151 @@ export function createColorFieldState(
 
     if (!text) {
       updateValue(null);
-      setIsInvalid(false);
       return;
     }
 
-    try {
-      let newColor: Color;
-
-      if (chan) {
-        // Single channel mode - parse as number and update channel
-        const numValue = parseFloat(text);
-        if (isNaN(numValue)) {
-          setIsInvalid(true);
-          return;
-        }
-
-        const currentColor = value();
-        if (!currentColor) {
-          setIsInvalid(true);
-          return;
-        }
-
-        const range = currentColor.getChannelRange(chan);
-        const clamped = Math.max(range.minValue, Math.min(range.maxValue, numValue));
-        newColor = currentColor.withChannelValue(chan, clamped);
-      } else {
-        // Full color mode - parse the color string
-        newColor = parseColor(text);
-        if (opts.colorFormat) {
-          newColor = newColor.toFormat(opts.colorFormat);
-        }
+    if (chan) {
+      const displayColor = colorValue();
+      const rawValue = parseChannelValue(text, displayColor, chan);
+      if (rawValue == null) {
+        setInputValueInternal(formatCurrentValue());
+        setInvalidInput(false);
+        return;
       }
 
-      updateValue(newColor);
-      setInputValueInternal(formatColorValue(newColor, chan, opts.colorFormat));
-      setIsInvalid(false);
+      updateValue(displayColor.withChannelValue(chan, rawValue));
+      return;
+    }
+
+    try {
+      updateValue(parseHexValue(text, opts.colorFormat));
     } catch {
-      setIsInvalid(true);
+      setInputValueInternal(formatCurrentValue());
+      setInvalidInput(false);
     }
   };
 
-  // Increment channel value
-  const increment = () => {
-    const chan = channel();
+  const incrementHex = (amount: number) => {
     const currentColor = value();
-    if (!currentColor || !chan) return;
+    if (!currentColor) {
+      return;
+    }
 
-    const currentVal = currentColor.getChannelValue(chan);
-    const range = currentColor.getChannelRange(chan);
-    const newVal = Math.min(range.maxValue, currentVal + range.step);
-    const newColor = currentColor.withChannelValue(chan, newVal);
+    const newColor = hexIntToColor(currentColor.toFormat("rgb").toHexInt() + amount);
+    updateValue(getOptions().colorFormat ? newColor.toFormat(getOptions().colorFormat!) : newColor);
+  };
 
-    updateValue(newColor);
-    setInputValueInternal(formatColorValue(newColor, chan, getOptions().colorFormat));
+  const updateChannel = (amount: number | "min" | "max") => {
+    const chan = channel();
+    if (!chan) {
+      return;
+    }
+
+    const displayColor = colorValue();
+    const range = displayColor.getChannelRange(chan);
+    const currentValue = displayColor.getChannelValue(chan);
+    const nextValue =
+      amount === "min"
+        ? range.minValue
+        : amount === "max"
+          ? range.maxValue
+          : Math.min(range.maxValue, Math.max(range.minValue, currentValue + amount));
+
+    updateValue(displayColor.withChannelValue(chan, nextValue));
   };
 
-  // Decrement channel value
-  const decrement = () => {
+  const increment = () => {
     const chan = channel();
-    const currentColor = value();
-    if (!currentColor || !chan) return;
+    if (!chan) {
+      incrementHex(1);
+      return;
+    }
 
-    const currentVal = currentColor.getChannelValue(chan);
-    const range = currentColor.getChannelRange(chan);
-    const newVal = Math.max(range.minValue, currentVal - range.step);
-    const newColor = currentColor.withChannelValue(chan, newVal);
+    updateChannel(colorValue().getChannelRange(chan).step);
+  };
 
-    updateValue(newColor);
-    setInputValueInternal(formatColorValue(newColor, chan, getOptions().colorFormat));
+  const decrement = () => {
+    const chan = channel();
+    if (!chan) {
+      incrementHex(-1);
+      return;
+    }
+
+    updateChannel(-colorValue().getChannelRange(chan).step);
   };
 
-  // Increment to max
   const incrementToMax = () => {
     const chan = channel();
-    const currentColor = value();
-    if (!currentColor || !chan) return;
-
-    const range = currentColor.getChannelRange(chan);
-    const newColor = currentColor.withChannelValue(chan, range.maxValue);
+    if (!chan) {
+      incrementHex(HEX_COLOR_MAX);
+      return;
+    }
 
-    updateValue(newColor);
-    setInputValueInternal(formatColorValue(newColor, chan, getOptions().colorFormat));
+    updateChannel("max");
   };
 
-  // Decrement to min
   const decrementToMin = () => {
     const chan = channel();
-    const currentColor = value();
-    if (!currentColor || !chan) return;
-
-    const range = currentColor.getChannelRange(chan);
-    const newColor = currentColor.withChannelValue(chan, range.minValue);
+    if (!chan) {
+      incrementHex(-HEX_COLOR_MAX);
+      return;
+    }
 
-    updateValue(newColor);
-    setInputValueInternal(formatColorValue(newColor, chan, getOptions().colorFormat));
+    updateChannel("min");
   };
 
-  // Validate input
-  const validate = () => {
-    const text = inputValue().trim();
+  const validate = (candidate?: string) => {
+    const text = (candidate ?? inputValue()).trim();
     const chan = channel();
 
-    if (!text) return true;
+    if (!text) {
+      return true;
+    }
 
-    try {
-      if (chan) {
-        const numValue = parseFloat(text);
-        return !isNaN(numValue);
-      } else {
-        parseColor(text);
-        return true;
-      }
-    } catch {
-      return false;
+    if (chan) {
+      return parseChannelValue(text, colorValue(), chan) != null;
     }
+
+    return PARTIAL_HEX_PATTERN.test(text);
   };
 
   return {
     get value() {
       return value();
     },
+    get colorValue() {
+      return colorValue();
+    },
     get inputValue() {
       return inputValue();
     },
+    get numberValue() {
+      const chan = channel();
+      if (!chan || value() === null) {
+        return Number.NaN;
+      }
+      return colorValue().getChannelValue(chan) / getChannelMultiplier(colorValue(), chan);
+    },
+    get minValue() {
+      const chan = channel();
+      return chan ? getNormalizedRange(colorValue(), chan).minValue : 0;
+    },
+    get maxValue() {
+      const chan = channel();
+      return chan ? getNormalizedRange(colorValue(), chan).maxValue : HEX_COLOR_MAX;
+    },
+    get step() {
+      const chan = channel();
+      return chan ? getNormalizedRange(colorValue(), chan).step : 1;
+    },
+    get pageSize() {
+      const chan = channel();
+      return chan ? getNormalizedRange(colorValue(), chan).pageSize : 0x100000;
+    },
+    get formatOptions() {
+      const chan = channel();
+      return chan ? colorValue().getChannelFormatOptions(chan) : {};
+    },
     get isInvalid() {
       return isInvalid();
     },
@@ -278,10 +410,14 @@ export function createColorFieldState(
     get isReadOnly() {
       return isReadOnly();
     },
+    get isRequired() {
+      return isRequired();
+    },
     get channel() {
       return channel();
     },
     setInputValue,
+    setColorValue,
     commit,
     increment,
     decrement,