@boxcustodia/library 2.0.0-alpha.10 → 2.0.0-alpha.12

package/src/components/date-picker/date-picker.tsx

@@ -0,0 +1,298 @@
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { CalendarIcon } from "lucide-react";
+import { ReactNode, useRef, useState } from "react";
+import {
+  Calendar,
+  FieldControl,
+  inputBaseClasses,
+  PopoverPopup,
+  PopoverRoot,
+  PopoverTrigger,
+} from "../../components";
+import { cn } from "../../lib";
+import type {
+  DatePickerFooterProps,
+  DatePickerProps,
+  DateRange,
+  MultipleDatePickerProps,
+  RangeDatePickerProps,
+  SingleDatePickerProps,
+} from "./date-picker.model";
+import {
+  formatMultipleDates,
+  formatRangeDate,
+  formatSingleDate,
+} from "./date-picker.utils";
+
+export const DatePicker = (props: DatePickerProps) => {
+  if (props.mode === "range") return <RangePicker {...props} />;
+  if (props.mode === "multiple") return <MultiplePicker {...props} />;
+  return <SinglePicker {...props} />;
+};
+
+// ─── Shared popover shell ────────────────────────────────────────────────────
+
+type PickerShellProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  displayText: string;
+  hasValue: boolean;
+  disabled?: boolean;
+  className?: string;
+  children: ReactNode;
+  footer?: ReactNode;
+  slot: string;
+  formValue: string;
+  required?: boolean;
+};
+
+const PickerShell = ({
+  open,
+  onOpenChange,
+  displayText,
+  hasValue,
+  disabled,
+  className,
+  children,
+  footer,
+  slot,
+  formValue,
+  required,
+}: PickerShellProps) => {
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <PopoverRoot data-slot={slot} open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger
+        render={
+          <button
+            ref={triggerRef}
+            disabled={disabled}
+            className={cn(
+              inputBaseClasses,
+              "inline-flex items-center gap-2 h-10 cursor-pointer text-left",
+              "focus-visible:border-ring",
+              "aria-invalid:border-error focus-visible:aria-invalid:ring-error/20",
+              "group-data-[invalid]:border-error focus-visible:group-data-[invalid]:ring-error/20",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              !hasValue && "text-muted-foreground",
+              className,
+            )}
+          />
+        }
+      >
+        <CalendarIcon className="shrink-0" />
+        <span className="truncate">{displayText}</span>
+      </PopoverTrigger>
+      {/* Hidden input registered with Field for validity tracking and FormData. */}
+      <FieldControl
+        render={
+          <input
+            type="text"
+            tabIndex={-1}
+            aria-hidden="true"
+            className="sr-only"
+            value={formValue}
+            onChange={() => {}}
+            required={required}
+            onFocus={() => triggerRef.current?.focus()}
+          />
+        }
+      />
+      <PopoverPopup
+        className="w-auto p-0"
+        align="start"
+        data-slot={`${slot}-content`}
+      >
+        {children}
+        {footer && (
+          <div className="p-2" data-slot={`${slot}-footer`}>
+            {footer}
+          </div>
+        )}
+      </PopoverPopup>
+    </PopoverRoot>
+  );
+};
+
+// ─── Single mode ─────────────────────────────────────────────────────────────
+
+const SinglePicker = ({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  placeholder = "Seleccionar fecha",
+  disabled,
+  disabledDate,
+  renderFooter,
+  className,
+  required,
+}: SingleDatePickerProps) => {
+  const [open, setOpen] = useState(false);
+
+  const [value, setValue] = useControllableState<Date | null>({
+    prop: valueProp,
+    onChange: (next) => onChange?.(next ?? null),
+    defaultProp: defaultValue ?? null,
+  });
+
+  const footerProps: DatePickerFooterProps = {
+    mode: "single",
+    value: value ?? null,
+    clear: () => setValue(null),
+    selectToday: () => {
+      const today = new Date();
+      if (disabledDate?.(today)) return;
+      setValue(today);
+    },
+    setValue: (next) => setValue(next),
+  };
+
+  return (
+    <PickerShell
+      slot="date-picker"
+      open={open}
+      onOpenChange={setOpen}
+      displayText={formatSingleDate(value, placeholder)}
+      hasValue={!!value}
+      disabled={disabled}
+      className={className}
+      footer={renderFooter?.(footerProps)}
+      formValue={formatSingleDate(value, "")}
+      required={required}
+    >
+      <Calendar
+        className="border-none"
+        mode="single"
+        selected={value ?? undefined}
+        onSelect={(next) => {
+          if (disabledDate && next && disabledDate(next)) return;
+          setValue(next ?? null);
+          setOpen(false);
+        }}
+        disabled={disabledDate}
+      />
+    </PickerShell>
+  );
+};
+
+// ─── Range mode ──────────────────────────────────────────────────────────────
+
+const EMPTY_RANGE: DateRange = { start: null, end: null };
+
+const RangePicker = ({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  placeholder = "Seleccionar rango",
+  disabled,
+  disabledDate,
+  renderFooter,
+  className,
+  required,
+}: RangeDatePickerProps) => {
+  const [open, setOpen] = useState(false);
+
+  const [value, setValue] = useControllableState<DateRange>({
+    prop: valueProp,
+    onChange: (next) => onChange?.(next ?? EMPTY_RANGE),
+    defaultProp: defaultValue ?? EMPTY_RANGE,
+  });
+
+  const range = value ?? EMPTY_RANGE;
+
+  const footerProps: DatePickerFooterProps = {
+    mode: "range",
+    value: range,
+    clear: () => setValue(EMPTY_RANGE),
+    setValue: (next) => setValue(next),
+  };
+
+  return (
+    <PickerShell
+      slot="date-picker"
+      open={open}
+      onOpenChange={setOpen}
+      displayText={formatRangeDate(
+        range.start || range.end ? range : undefined,
+        placeholder,
+      )}
+      hasValue={!!(range.start || range.end)}
+      disabled={disabled}
+      className={className}
+      footer={renderFooter?.(footerProps)}
+      formValue={formatRangeDate(
+        range.start || range.end ? range : undefined,
+        "",
+      )}
+      required={required}
+    >
+      <Calendar
+        className="border-none"
+        mode="range"
+        selected={{
+          from: range.start ?? undefined,
+          to: range.end ?? undefined,
+        }}
+        onSelect={(next) => {
+          setValue({ start: next?.from ?? null, end: next?.to ?? null });
+        }}
+        disabled={disabledDate}
+      />
+    </PickerShell>
+  );
+};
+
+// ─── Multiple mode ───────────────────────────────────────────────────────────
+
+const MultiplePicker = ({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  placeholder = "Seleccionar fechas",
+  disabled,
+  disabledDate,
+  renderFooter,
+  className,
+  required,
+}: MultipleDatePickerProps) => {
+  const [open, setOpen] = useState(false);
+
+  const [value, setValue] = useControllableState<Date[]>({
+    prop: valueProp,
+    onChange: (next) => onChange?.(next ?? []),
+    defaultProp: defaultValue ?? [],
+  });
+
+  const footerProps: DatePickerFooterProps = {
+    mode: "multiple",
+    value: value ?? [],
+    clear: () => setValue([]),
+    setValue: (next) => setValue(next),
+  };
+
+  return (
+    <PickerShell
+      slot="date-picker"
+      open={open}
+      onOpenChange={setOpen}
+      displayText={formatMultipleDates(value, placeholder)}
+      hasValue={(value?.length ?? 0) > 0}
+      disabled={disabled}
+      className={className}
+      footer={renderFooter?.(footerProps)}
+      formValue={formatMultipleDates(value, "")}
+      required={required}
+    >
+      <Calendar
+        className="border-none"
+        mode="multiple"
+        selected={value ?? []}
+        onSelect={(next) => {
+          setValue(next ?? []);
+        }}
+        disabled={disabledDate}
+      />
+    </PickerShell>
+  );
+};

package/src/components/date-picker/date-picker.utils.ts

@@ -0,0 +1,260 @@
+import { format, isDate } from "date-fns";
+import type { DateRange } from "./date-picker.model";
+
+export const DISPLAY_DATE_FORMAT = "dd/MM/yyyy";
+
+export const formatSingleDate = (
+  date: Date | null | undefined,
+  placeholder: string,
+): string => {
+  if (!date || !isDate(date)) return placeholder;
+  return format(date, DISPLAY_DATE_FORMAT);
+};
+
+export const formatRangeDate = (
+  range: DateRange | undefined,
+  placeholder: string,
+): string => {
+  if (!range) return placeholder;
+  const { start, end } = range;
+  if (!start && !end) return placeholder;
+  const startStr =
+    start && isDate(start) ? format(start, DISPLAY_DATE_FORMAT) : "...";
+  const endStr = end && isDate(end) ? format(end, DISPLAY_DATE_FORMAT) : "...";
+  return `${startStr} → ${endStr}`;
+};
+
+export const formatMultipleDates = (
+  dates: Date[] | undefined,
+  placeholder: string,
+): string => {
+  if (!dates || dates.length === 0) return placeholder;
+  if (dates.length === 1) return format(dates[0], DISPLAY_DATE_FORMAT);
+  return `${dates.length} fechas seleccionadas`;
+};
+
+export const formatDate = (date: Date | null): string => {
+  if (!isDate(date)) return "";
+  return format(date, DISPLAY_DATE_FORMAT);
+};
+
+export const parseInputToDate = (raw: string): Date | null => {
+  const trimmed = raw.trim();
+  if (!trimmed) return null;
+
+  const match = /^(\d{1,2})\/(\d{1,2})\/(\d{1,4})$/.exec(trimmed);
+  if (!match) return null;
+
+  const [, dd, mm, yyyy] = match;
+  const day = Number(dd);
+  const month = Number(mm);
+  const rawYear = yyyy;
+  let year = Number(rawYear);
+
+  if (Number.isNaN(day) || Number.isNaN(month) || Number.isNaN(year)) {
+    return null;
+  }
+
+  // Año corto → asumimos 2000 + yy (ej: 25 → 2025)
+  if (rawYear.length <= 2) {
+    year = 2000 + year;
+  }
+
+  if (day < 1 || day > 31 || month < 1 || month > 12) {
+    return null;
+  }
+
+  const parsed = new Date(year, month - 1, day);
+
+  if (
+    parsed.getFullYear() !== year ||
+    parsed.getMonth() !== month - 1 ||
+    parsed.getDate() !== day
+  ) {
+    return null;
+  }
+
+  return parsed;
+};
+
+export type DateMaskContext = {
+  lastKey: string | null;
+  previousValue: string;
+};
+
+export const maskDateInput = (
+  raw: string,
+  context: DateMaskContext,
+): string => {
+  const isDeleting =
+    (context.lastKey === "Backspace" || context.lastKey === "Delete") &&
+    raw.length < context.previousValue.length;
+  const rawHasSlash = raw.includes("/");
+  const endsWithSlash = raw.trim().endsWith("/");
+
+  // When both separators are present, use segment-based parsing regardless of
+  // whether we're inserting or deleting. Strip-and-rebuild merges digits across
+  // segment boundaries incorrectly in both directions:
+  //   delete: "01/0/2025" → digits "0102025" → "01/02/025" ✗
+  //   insert: "01/1/2025" → digits "0112025" → month "12", year "025" ✗
+  const slashCount = (raw.match(/\//g) ?? []).length;
+  if (slashCount >= 2) {
+    const parts = raw.split("/");
+    const dayPart = (parts[0] ?? "").replace(/\D/g, "").slice(0, 2);
+    const monthPart = (parts[1] ?? "").replace(/\D/g, "").slice(0, 2);
+    const yearPart = (parts[2] ?? "").replace(/\D/g, "").slice(0, 4);
+
+    if (!dayPart && !monthPart && !yearPart) return "";
+    return `${dayPart}/${monthPart}/${yearPart}`;
+  }
+
+  const digits = raw.replace(/\D/g, "").slice(0, 8);
+
+  if (!digits) {
+    return "";
+  }
+
+  // Día
+  if (digits.length <= 2) {
+    let maskedDay = digits;
+
+    if (digits.length === 1 && (rawHasSlash || endsWithSlash) && !isDeleting) {
+      let dayNumber = Number(maskedDay);
+
+      if (Number.isNaN(dayNumber)) {
+        dayNumber = 1;
+      }
+
+      if (dayNumber < 1) {
+        dayNumber = 1;
+      }
+
+      if (dayNumber > 31) {
+        dayNumber = 31;
+      }
+
+      maskedDay = dayNumber.toString().padStart(2, "0");
+      maskedDay += "/";
+    } else if (digits.length === 2) {
+      if (!isDeleting) {
+        let dayNumber = Number(maskedDay);
+
+        if (Number.isNaN(dayNumber)) {
+          dayNumber = 1;
+        }
+
+        if (dayNumber < 1) {
+          dayNumber = 1;
+        }
+
+        if (dayNumber > 31) {
+          dayNumber = 31;
+        }
+
+        maskedDay = dayNumber.toString().padStart(2, "0");
+        maskedDay += "/";
+      }
+    }
+
+    return maskedDay;
+  }
+
+  // Día completo (ya hay más de 2 dígitos): normalizamos siempre
+  const dayDigitsRaw = digits.slice(0, 2);
+  let dayNumber = Number(dayDigitsRaw);
+
+  if (Number.isNaN(dayNumber)) {
+    dayNumber = 1;
+  }
+
+  if (dayNumber < 1) {
+    dayNumber = 1;
+  }
+
+  if (dayNumber > 31) {
+    dayNumber = 31;
+  }
+
+  const day = dayNumber.toString().padStart(2, "0");
+  const monthDigitsRaw = digits.slice(2, 4);
+  const yearDigits = digits.slice(4);
+
+  let monthText = "";
+
+  if (monthDigitsRaw.length === 0) {
+    monthText = "";
+  } else if (monthDigitsRaw.length === 1 && yearDigits.length === 0) {
+    // Un solo dígito de mes sin año todavía:
+    // - si es "0" o "1", permitimos que el usuario complete (ej: "08")
+    // - si es 1-9, lo consideramos un mes completo y lo normalizamos con padding
+    const shouldPadMonth =
+      endsWithSlash && !isDeleting && monthDigitsRaw.length === 1;
+
+    if (monthDigitsRaw === "0" || monthDigitsRaw === "1") {
+      if (shouldPadMonth) {
+        let monthNumber = Number(monthDigitsRaw);
+
+        if (Number.isNaN(monthNumber)) {
+          monthNumber = 1;
+        }
+
+        if (monthNumber < 1) {
+          monthNumber = 1;
+        }
+
+        if (monthNumber > 12) {
+          monthNumber = 12;
+        }
+
+        monthText = monthNumber.toString().padStart(2, "0");
+      } else {
+        monthText = monthDigitsRaw;
+      }
+    } else {
+      let monthNumber = Number(monthDigitsRaw);
+
+      if (Number.isNaN(monthNumber)) {
+        monthNumber = 1;
+      }
+
+      if (monthNumber < 1) {
+        monthNumber = 1;
+      }
+
+      if (monthNumber > 12) {
+        monthNumber = 12;
+      }
+
+      monthText = monthNumber.toString().padStart(2, "0");
+    }
+  } else {
+    // Mes completo (2 dígitos o ya empezamos a escribir el año): normalizamos
+    let monthNumber = Number(monthDigitsRaw);
+
+    if (Number.isNaN(monthNumber)) {
+      monthNumber = 1;
+    }
+
+    if (monthNumber < 1) {
+      monthNumber = 1;
+    }
+
+    if (monthNumber > 12) {
+      monthNumber = 12;
+    }
+
+    monthText = monthNumber.toString().padStart(2, "0");
+  }
+
+  const base = `${day}/${monthText}`;
+  const shouldAddYearSlash =
+    !yearDigits && monthText.length === 2 && !isDeleting;
+
+  const masked = yearDigits
+    ? `${base}/${yearDigits}`
+    : shouldAddYearSlash
+      ? `${base}/`
+      : base;
+
+  return masked;
+};

package/src/components/date-picker/index.ts

@@ -0,0 +1,3 @@
+export * from "./date-input";
+export * from "./date-picker";
+export * from "./date-picker.model";

package/src/components/date-picker/use-date-input-popover.ts

@@ -0,0 +1,48 @@
+import { KeyboardEvent, useCallback, useRef, useState } from "react";
+
+type UseDateInputPopoverOptions = {
+  disabled?: boolean;
+};
+
+type UseDateInputPopoverResult = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  handleInputKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+};
+
+export const useDateInputPopover = (
+  options: UseDateInputPopoverOptions = {},
+): UseDateInputPopoverResult => {
+  const { disabled } = options;
+
+  const [open, setOpen] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const handleInputKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      if (disabled) return;
+
+      if (event.key === " " || event.key === "Spacebar") {
+        event.preventDefault();
+        setOpen(true);
+        return;
+      }
+
+      if (event.key === "Escape") {
+        setOpen(false);
+        requestAnimationFrame(() => {
+          inputRef.current?.focus();
+        });
+      }
+    },
+    [disabled],
+  );
+
+  return {
+    open,
+    setOpen,
+    handleInputKeyDown,
+    inputRef,
+  };
+};