@proyecto-viviana/solid-stately 0.2.7 → 0.3.0

package/src/calendar/createDateFieldState.ts

@@ -5,36 +5,41 @@
  * Based on @react-stately/datepicker useDateFieldState
  */
 
-import { createSignal, createMemo, type Accessor } from 'solid-js';
+import { createSignal, createMemo, type Accessor } from "solid-js";
 import {
-  type CalendarDate,
+  CalendarDate,
   type CalendarDateTime,
-  type ZonedDateTime,
   type DateValue,
   today,
   getLocalTimeZone,
   DateFormatter,
   toCalendarDate as intlToCalendarDate,
   toCalendarDateTime,
-} from '@internationalized/date';
-import { access, type MaybeAccessor } from '../utils';
-import type { ValidationState } from './createCalendarState';
-
-// ============================================
-// TYPES
-// ============================================
+  endOfMonth,
+} from "@internationalized/date";
+import { access, type MaybeAccessor } from "../utils";
+import type { ValidationState } from "./createCalendarState";
+import {
+  createFormValidationState,
+  DEFAULT_VALIDATION_RESULT,
+  VALID_VALIDITY_STATE,
+  type ValidationBehavior,
+  type ValidationFunction,
+  type ValidationResult,
+  type ValidityState,
+} from "../form";
 
 export type DateSegmentType =
-  | 'year'
-  | 'month'
-  | 'day'
-  | 'hour'
-  | 'minute'
-  | 'second'
-  | 'dayPeriod'
-  | 'era'
-  | 'timeZoneName'
-  | 'literal';
+  | "year"
+  | "month"
+  | "day"
+  | "hour"
+  | "minute"
+  | "second"
+  | "dayPeriod"
+  | "era"
+  | "timeZoneName"
+  | "literal";
 
 export interface DateSegment {
   /** The type of segment. */
@@ -72,18 +77,26 @@ export interface DateFieldStateProps<T extends DateValue = DateValue> {
   isReadOnly?: MaybeAccessor<boolean>;
   /** Whether the field is required. */
   isRequired?: MaybeAccessor<boolean>;
+  /** Whether the value is invalid (controlled). */
+  isInvalid?: boolean;
   /** The locale to use for formatting. */
   locale?: string;
   /** The granularity of the date/time (day, hour, minute, second). */
-  granularity?: 'day' | 'hour' | 'minute' | 'second';
+  granularity?: "day" | "hour" | "minute" | "second";
   /** Whether to show the hour in 12 or 24 hour format. */
   hourCycle?: 12 | 24;
   /** Whether to hide the time zone. */
   hideTimeZone?: boolean;
   /** The placeholder date (determines segment structure). */
   placeholderValue?: DateValue;
+  /** Whether to force leading zeroes in month/day segments. */
+  shouldForceLeadingZeros?: boolean;
   /** Validation state. */
   validationState?: MaybeAccessor<ValidationState | undefined>;
+  /** Validation behavior mode. */
+  validationBehavior?: ValidationBehavior;
+  /** Custom validation function. */
+  validate?: ValidationFunction<T>;
   /** Description text. */
   description?: string;
   /** Error message. */
@@ -92,6 +105,8 @@ export interface DateFieldStateProps<T extends DateValue = DateValue> {
   allowsNonContiguousRanges?: boolean;
   /** Whether to create a date or datetime. */
   createCalendar?: (name: string) => unknown;
+  /** Whether a date is unavailable. */
+  isDateUnavailable?: (date: DateValue) => boolean;
 }
 
 export interface DateFieldState<T extends DateValue = DateValue> {
@@ -124,33 +139,40 @@ export interface DateFieldState<T extends DateValue = DateValue> {
   /** The validation state. */
   validationState: Accessor<ValidationState | undefined>;
   /** The granularity. */
-  granularity: 'day' | 'hour' | 'minute' | 'second';
+  granularity: "day" | "hour" | "minute" | "second";
   /** Whether the value is invalid. */
   isInvalid: Accessor<boolean>;
+  /** Realtime validation results, including native and custom constraints. */
+  realtimeValidation: Accessor<ValidationResult>;
+  /** Currently displayed validation results. */
+  displayValidation: Accessor<ValidationResult>;
+  /** Updates the current validation result. */
+  updateValidation: (result: ValidationResult) => void;
+  /** Resets displayed validation to valid. */
+  resetValidation: () => void;
+  /** Commits realtime validation to displayed validation. */
+  commitValidation: () => void;
   /** The locale. */
   locale: string;
   /** The time zone. */
   timeZone: string;
+  /** The default value. */
+  defaultValue: T | null;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides state management for a date field component.
  */
 export function createDateFieldState<T extends DateValue = CalendarDate>(
-  props: DateFieldStateProps<T> = {}
+  props: DateFieldStateProps<T> = {},
 ): DateFieldState<T> {
   const timeZone = getLocalTimeZone();
-  const locale = props.locale ?? 'en-US';
-  const granularity = props.granularity ?? 'day';
+  const locale = props.locale ?? "en-US";
+  const granularity = props.granularity ?? "day";
 
   // State signals
-  const [internalValue, setInternalValue] = createSignal<T | null>(
-    props.defaultValue ?? null
-  );
+  const initialValue = props.defaultValue ?? null;
+  const [internalValue, setInternalValue] = createSignal<T | null>(initialValue);
 
   // Track partial values during editing
   const [placeholderDate, setPlaceholderDate] = createSignal<Partial<DateParts>>({});
@@ -177,7 +199,7 @@ export function createDateFieldState<T extends DateValue = CalendarDate>(
     const month = parts.month ?? placeholder.month;
     const day = parts.day ?? placeholder.day;
 
-    if (granularity === 'day') {
+    if (granularity === "day") {
       return intlToCalendarDate(placeholder).set({ year, month, day });
     }
 
@@ -200,21 +222,67 @@ export function createDateFieldState<T extends DateValue = CalendarDate>(
   const isDisabled = createMemo(() => access(props.isDisabled) ?? false);
   const isReadOnly = createMemo(() => access(props.isReadOnly) ?? false);
   const isRequired = createMemo(() => access(props.isRequired) ?? false);
-  const validationState = createMemo(() => access(props.validationState));
-
-  // Check if value is invalid
-  const isInvalid = createMemo(() => {
+  const explicitValidationState = createMemo(() => access(props.validationState));
+  const validationBehavior = () => props.validationBehavior ?? "native";
+  const builtinValidation = createMemo<ValidationResult>(() => {
     const v = value();
-    if (!v) return false;
+    if (!v) return DEFAULT_VALIDATION_RESULT;
 
     const minValue = access(props.minValue);
     const maxValue = access(props.maxValue);
+    const validationDetails: ValidityState = { ...VALID_VALIDITY_STATE };
+    const validationErrors: string[] = [];
+
+    if (minValue && v.compare(minValue) < 0) {
+      validationDetails.rangeUnderflow = true;
+      validationErrors.push("Value is below the minimum date.");
+    }
 
-    if (minValue && v.compare(minValue) < 0) return true;
-    if (maxValue && v.compare(maxValue) > 0) return true;
+    if (maxValue && v.compare(maxValue) > 0) {
+      validationDetails.rangeOverflow = true;
+      validationErrors.push("Value is above the maximum date.");
+    }
+
+    if (props.isDateUnavailable?.(v)) {
+      validationDetails.customError = true;
+      validationErrors.push("Date is unavailable.");
+    }
 
-    return validationState() === 'invalid';
+    if (validationErrors.length === 0) {
+      return DEFAULT_VALIDATION_RESULT;
+    }
+
+    validationDetails.valid = false;
+    return {
+      isInvalid: true,
+      validationDetails,
+      validationErrors,
+    };
+  });
+  const validation = createFormValidationState<T>({
+    get value() {
+      return value();
+    },
+    get isInvalid() {
+      return props.isInvalid;
+    },
+    get validationState() {
+      return explicitValidationState();
+    },
+    get validationBehavior() {
+      return validationBehavior();
+    },
+    get validate() {
+      return props.validate;
+    },
+    get builtinValidation() {
+      return builtinValidation();
+    },
   });
+  const isInvalid = createMemo(() => validation.displayValidation().isInvalid);
+  const validationState = createMemo<ValidationState | undefined>(
+    () => explicitValidationState() ?? (isInvalid() ? "invalid" : undefined),
+  );
 
   // Generate segments based on granularity and locale
   const segments = createMemo<DateSegment[]>(() => {
@@ -225,20 +293,21 @@ export function createDateFieldState<T extends DateValue = CalendarDate>(
     const segs: DateSegment[] = [];
 
     // Determine format options based on granularity
+    const shouldForceLeadingZeros = props.shouldForceLeadingZeros === true;
     const formatOptions: Intl.DateTimeFormatOptions = {
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
+      year: "numeric",
+      month: shouldForceLeadingZeros ? "2-digit" : "numeric",
+      day: shouldForceLeadingZeros ? "2-digit" : "numeric",
     };
 
-    if (granularity !== 'day') {
-      formatOptions.hour = '2-digit';
-      formatOptions.minute = '2-digit';
-      if (granularity === 'second') {
-        formatOptions.second = '2-digit';
+    if (granularity !== "day") {
+      formatOptions.hour = "2-digit";
+      formatOptions.minute = "2-digit";
+      if (granularity === "second") {
+        formatOptions.second = "2-digit";
       }
       if (props.hourCycle) {
-        formatOptions.hourCycle = props.hourCycle === 12 ? 'h12' : 'h23';
+        formatOptions.hourCycle = props.hourCycle === 12 ? "h12" : "h23";
       }
     }
 
@@ -249,9 +318,9 @@ export function createDateFieldState<T extends DateValue = CalendarDate>(
     for (const part of formattedParts) {
       const type = mapPartType(part.type);
 
-      if (type === 'literal') {
+      if (type === "literal") {
         segs.push({
-          type: 'literal',
+          type: "literal",
           text: part.value,
           isEditable: false,
           isPlaceholder: false,
@@ -259,19 +328,20 @@ export function createDateFieldState<T extends DateValue = CalendarDate>(
         });
       } else if (type) {
         const segValue = getSegmentValue(v, type);
-        const placeholderValue = getSegmentValue(placeholder, type);
         const partValue = parts[type as keyof DateParts];
         const hasValue = v !== null || partValue !== undefined;
 
         segs.push({
           type,
-          text: hasValue ? part.value : getPlaceholderText(type),
+          text: hasValue
+            ? part.value
+            : getPlaceholderText(type, locale, granularity, shouldForceLeadingZeros),
           value: segValue ?? partValue,
           minValue: getMinValue(type),
           maxValue: getMaxValue(type, v ?? placeholder),
           isEditable: !isDisabled() && !isReadOnly(),
           isPlaceholder: !hasValue,
-          placeholder: getPlaceholderText(type),
+          placeholder: getPlaceholderText(type, locale, granularity, shouldForceLeadingZeros),
         });
       }
     }
@@ -320,9 +390,7 @@ export function createDateFieldState<T extends DateValue = CalendarDate>(
     if (isDisabled() || isReadOnly()) return;
 
     const v = value();
-    const current = v
-      ? getSegmentValue(v, type)
-      : placeholderDate()[type as keyof DateParts];
+    const current = v ? getSegmentValue(v, type) : placeholderDate()[type as keyof DateParts];
     const max = getMaxValue(type, v ?? props.placeholderValue ?? today(timeZone));
     const min = getMinValue(type);
 
@@ -335,9 +403,7 @@ export function createDateFieldState<T extends DateValue = CalendarDate>(
     if (isDisabled() || isReadOnly()) return;
 
     const v = value();
-    const current = v
-      ? getSegmentValue(v, type)
-      : placeholderDate()[type as keyof DateParts];
+    const current = v ? getSegmentValue(v, type) : placeholderDate()[type as keyof DateParts];
     const max = getMaxValue(type, v ?? props.placeholderValue ?? today(timeZone));
     const min = getMinValue(type);
 
@@ -348,11 +414,14 @@ export function createDateFieldState<T extends DateValue = CalendarDate>(
   // Clear a segment
   const clearSegment = (type: DateSegmentType) => {
     if (isDisabled() || isReadOnly()) return;
+    if (type === "literal") return;
 
     const v = value();
     if (v) {
-      // Clear entire value if any segment is cleared
-      setValue(null);
+      // Reset only the target segment to its minimum value instead of clearing the entire value
+      const min = getMinValue(type);
+      const updated = updateDatePart(v, type, min);
+      setValue(updated as T);
     } else {
       setPlaceholderDate((prev) => {
         const next = { ...prev };
@@ -382,7 +451,9 @@ export function createDateFieldState<T extends DateValue = CalendarDate>(
     if (Object.keys(parts).length > 0) {
       const dv = dateValue();
       if (dv) {
-        setValue(constrain(dv) as T);
+        const candidate = constrain(dv);
+        // Commit even if unavailable so isInvalid can flag it; don't leave field stuck
+        setValue(candidate as T);
       }
       return;
     }
@@ -390,6 +461,7 @@ export function createDateFieldState<T extends DateValue = CalendarDate>(
     const current = value();
     if (current) {
       const constrained = constrain(current);
+      // Apply min/max constraints even if unavailable; isInvalid will flag unavailable dates
       if (constrained.compare(current) !== 0) {
         setValue(constrained as T);
       }
@@ -399,19 +471,19 @@ export function createDateFieldState<T extends DateValue = CalendarDate>(
   // Format the current value
   const formatValue = (fieldOptions?: Intl.DateTimeFormatOptions): string => {
     const v = value();
-    if (!v) return '';
+    if (!v) return "";
 
     const options: Intl.DateTimeFormatOptions = fieldOptions ?? {
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
+      year: "numeric",
+      month: props.shouldForceLeadingZeros === true ? "2-digit" : "numeric",
+      day: props.shouldForceLeadingZeros === true ? "2-digit" : "numeric",
     };
 
-    if (granularity !== 'day') {
-      options.hour = '2-digit';
-      options.minute = '2-digit';
-      if (granularity === 'second') {
-        options.second = '2-digit';
+    if (granularity !== "day") {
+      options.hour = "2-digit";
+      options.minute = "2-digit";
+      if (granularity === "second") {
+        options.second = "2-digit";
       }
     }
 
@@ -421,6 +493,7 @@ export function createDateFieldState<T extends DateValue = CalendarDate>(
 
   return {
     value,
+    defaultValue: initialValue,
     dateValue,
     setValue,
     segments,
@@ -436,15 +509,16 @@ export function createDateFieldState<T extends DateValue = CalendarDate>(
     validationState,
     granularity,
     isInvalid,
+    realtimeValidation: validation.realtimeValidation,
+    displayValidation: validation.displayValidation,
+    updateValidation: validation.updateValidation,
+    resetValidation: validation.resetValidation,
+    commitValidation: validation.commitValidation,
     locale,
     timeZone,
   };
 }
 
-// ============================================
-// HELPER TYPES & FUNCTIONS
-// ============================================
-
 interface DateParts {
   year?: number;
   month?: number;
@@ -456,50 +530,47 @@ interface DateParts {
 
 function mapPartType(type: Intl.DateTimeFormatPartTypes): DateSegmentType | null {
   switch (type) {
-    case 'year':
-      return 'year';
-    case 'month':
-      return 'month';
-    case 'day':
-      return 'day';
-    case 'hour':
-      return 'hour';
-    case 'minute':
-      return 'minute';
-    case 'second':
-      return 'second';
-    case 'dayPeriod':
-      return 'dayPeriod';
-    case 'era':
-      return 'era';
-    case 'timeZoneName':
-      return 'timeZoneName';
-    case 'literal':
-      return 'literal';
+    case "year":
+      return "year";
+    case "month":
+      return "month";
+    case "day":
+      return "day";
+    case "hour":
+      return "hour";
+    case "minute":
+      return "minute";
+    case "second":
+      return "second";
+    case "dayPeriod":
+      return "dayPeriod";
+    case "era":
+      return "era";
+    case "timeZoneName":
+      return "timeZoneName";
+    case "literal":
+      return "literal";
     default:
       return null;
   }
 }
 
-function getSegmentValue(
-  date: DateValue | null,
-  type: DateSegmentType
-): number | undefined {
+function getSegmentValue(date: DateValue | null, type: DateSegmentType): number | undefined {
   if (!date) return undefined;
 
   switch (type) {
-    case 'year':
+    case "year":
       return date.year;
-    case 'month':
+    case "month":
       return date.month;
-    case 'day':
+    case "day":
       return date.day;
-    case 'hour':
-      return 'hour' in date ? (date as CalendarDateTime).hour : undefined;
-    case 'minute':
-      return 'minute' in date ? (date as CalendarDateTime).minute : undefined;
-    case 'second':
-      return 'second' in date ? (date as CalendarDateTime).second : undefined;
+    case "hour":
+      return "hour" in date ? (date as CalendarDateTime).hour : undefined;
+    case "minute":
+      return "minute" in date ? (date as CalendarDateTime).minute : undefined;
+    case "second":
+      return "second" in date ? (date as CalendarDateTime).second : undefined;
     default:
       return undefined;
   }
@@ -507,17 +578,17 @@ function getSegmentValue(
 
 function getMinValue(type: DateSegmentType): number {
   switch (type) {
-    case 'year':
+    case "year":
       return 1;
-    case 'month':
+    case "month":
       return 1;
-    case 'day':
+    case "day":
       return 1;
-    case 'hour':
+    case "hour":
       return 0;
-    case 'minute':
+    case "minute":
       return 0;
-    case 'second':
+    case "second":
       return 0;
     default:
       return 0;
@@ -526,59 +597,100 @@ function getMinValue(type: DateSegmentType): number {
 
 function getMaxValue(type: DateSegmentType, date: DateValue): number {
   switch (type) {
-    case 'year':
+    case "year":
       return 9999;
-    case 'month':
+    case "month":
       return 12;
-    case 'day':
+    case "day":
       // Get days in month
-      return date.calendar.getDaysInMonth?.(date) ?? 31;
-    case 'hour':
+      return endOfMonth(date).day;
+    case "hour":
       return 23;
-    case 'minute':
+    case "minute":
       return 59;
-    case 'second':
+    case "second":
       return 59;
     default:
       return 0;
   }
 }
 
-function getPlaceholderText(type: DateSegmentType): string {
+function getPlaceholderText(
+  type: DateSegmentType,
+  locale: string,
+  granularity: "day" | "hour" | "minute" | "second",
+  shouldForceLeadingZeros = false,
+): string {
+  if (type === "literal") return "";
+  if (type === "dayPeriod") return "AM";
+
+  const formatOptions: Intl.DateTimeFormatOptions = {
+    year: "numeric",
+    month: shouldForceLeadingZeros ? "2-digit" : "numeric",
+    day: shouldForceLeadingZeros ? "2-digit" : "numeric",
+  };
+
+  if (granularity !== "day") {
+    formatOptions.hour = "2-digit";
+    formatOptions.minute = "2-digit";
+    if (granularity === "second") {
+      formatOptions.second = "2-digit";
+    }
+  }
+
+  const formatter = new DateFormatter(locale, formatOptions);
+  // Use a reference date with recognizable digits
+  const refDate = new Date(2222, 10, 22, 22, 22, 22);
+  const parts = formatter.formatToParts(refDate);
+
+  for (const part of parts) {
+    const mappedType = mapPartType(part.type);
+    if (mappedType === type) {
+      return part.value.replace(/\d/g, (d) => {
+        if (type === "year") return "y";
+        if (type === "month") return "m";
+        if (type === "day") return "d";
+        return "–";
+      });
+    }
+  }
+
   switch (type) {
-    case 'year':
-      return 'yyyy';
-    case 'month':
-      return 'mm';
-    case 'day':
-      return 'dd';
-    case 'hour':
-      return '––';
-    case 'minute':
-      return '––';
-    case 'second':
-      return '––';
-    case 'dayPeriod':
-      return 'AM';
+    case "year":
+      return "yyyy";
+    case "month":
+      return "mm";
+    case "day":
+      return "dd";
+    case "hour":
+      return "––";
+    case "minute":
+      return "––";
+    case "second":
+      return "––";
     default:
-      return '';
+      return "";
   }
 }
 
 function updateDatePart(date: DateValue, type: DateSegmentType, value: number): DateValue {
+  if (typeof (date as { set?: unknown }).set !== "function") {
+    return date;
+  }
+
   switch (type) {
-    case 'year':
-      return (date as CalendarDate).set({ year: value });
-    case 'month':
-      return (date as CalendarDate).set({ month: value });
-    case 'day':
-      return (date as CalendarDate).set({ day: value });
-    case 'hour':
-      return (date as CalendarDateTime).set({ hour: value });
-    case 'minute':
-      return (date as CalendarDateTime).set({ minute: value });
-    case 'second':
-      return (date as CalendarDateTime).set({ second: value });
+    case "year":
+      return date.set({ year: value });
+    case "month":
+      return date.set({ month: value });
+    case "day":
+      return date.set({ day: value });
+    case "hour":
+      return date.set({ hour: value });
+    case "minute":
+      return date.set({ minute: value });
+    case "second":
+      return date.set({ second: value });
     default:
       return date;
   }