@boxcustodia/library 2.0.0-alpha.2 → 2.0.0-alpha.21

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

@@ -0,0 +1,330 @@
+"use client";
+
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { CalendarIcon } from "lucide-react";
+import { type ReactElement, ReactNode, useRef, useState } from "react";
+import {
+  Calendar,
+  FieldControl,
+  FieldRoot,
+  inputBaseClasses,
+  PopoverPopup,
+  PopoverRoot,
+  PopoverTrigger,
+} from "../../components";
+import { cn } from "../../lib";
+import type {
+  DatePickerFooterProps,
+  DatePickerProps,
+  DateRange,
+  MultipleDatePickerProps,
+  RangeDatePickerProps,
+  SingleDatePickerProps,
+} from "./date-picker.model";
+import {
+  formatISODate,
+  formatMultipleDates,
+  formatRangeDate,
+  formatSingleDate,
+} from "./date-picker.utils";
+import { useHiddenFieldValue } from "./use-hidden-field-value";
+
+export function DatePicker(props: SingleDatePickerProps): ReactElement;
+export function DatePicker(props: RangeDatePickerProps): ReactElement;
+export function DatePicker(props: MultipleDatePickerProps): ReactElement;
+export function DatePicker(props: DatePickerProps): ReactElement {
+  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;
+  classNames?: DatePickerProps["classNames"];
+  children: ReactNode;
+  footer?: ReactNode;
+  slot: string;
+  formValue: string;
+  required?: boolean;
+};
+
+const PickerShell = ({
+  open,
+  onOpenChange,
+  displayText,
+  hasValue,
+  disabled,
+  className,
+  classNames,
+  children,
+  footer,
+  slot,
+  formValue,
+  required,
+}: PickerShellProps) => {
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const hiddenInputRef = useHiddenFieldValue(formValue);
+
+  return (
+    <PopoverRoot data-slot={slot} open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger
+        render={
+          <button
+            ref={triggerRef}
+            disabled={disabled}
+            data-slot="date-picker-trigger"
+            className={cn(
+              inputBaseClasses,
+              "inline-flex items-center gap-2 h-8 cursor-pointer text-left",
+              "focus-visible:border-ring",
+              "aria-invalid:border-error focus-visible:aria-invalid:ring-error/20",
+              "in-[[data-slot=field][data-invalid]]:border-error focus-visible:in-[[data-slot=field][data-invalid]]:border-error focus-visible:in-[[data-slot=field][data-invalid]]:ring-error/20",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              !hasValue && "text-muted-foreground",
+              className,
+            )}
+          />
+        }
+      >
+        <span className="flex-1 truncate">{displayText}</span>
+        <CalendarIcon
+          data-slot="date-picker-icon"
+          className="shrink-0 text-muted-foreground"
+        />
+      </PopoverTrigger>
+      {/* Hidden input registered with Field for validity tracking and FormData.
+          Left uncontrolled and driven imperatively via `emitNativeInputChange`:
+          a controlled `value` keeps React's value tracker in sync, which would
+          suppress the synthetic `input` event Base UI needs to re-validate. */}
+      <FieldControl
+        render={
+          <input
+            ref={hiddenInputRef}
+            type="text"
+            tabIndex={-1}
+            aria-hidden="true"
+            className="sr-only"
+            required={required}
+            onFocus={() => triggerRef.current?.focus()}
+          />
+        }
+      />
+      <PopoverPopup
+        className={cn("w-auto p-0", classNames?.popup)}
+        align="start"
+        data-slot={`${slot}-content`}
+      >
+        {/* Isolate popover content in its own FieldRoot. The Calendar's
+            month/year `Select`s are Base UI form controls; without this they
+            register on the OUTER Field, evict the hidden control's registration
+            on close, and the field submits empty. */}
+        <FieldRoot className="contents">
+          {children}
+          {footer && (
+            <div
+              className={cn("p-2", classNames?.footer)}
+              data-slot={`${slot}-footer`}
+            >
+              {footer}
+            </div>
+          )}
+        </FieldRoot>
+      </PopoverPopup>
+    </PopoverRoot>
+  );
+};
+
+// ─── Single mode ─────────────────────────────────────────────────────────────
+
+const SinglePicker = ({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  placeholder = "Seleccionar fecha",
+  disabled,
+  disabledDate,
+  renderFooter,
+  className,
+  classNames,
+  required,
+}: SingleDatePickerProps) => {
+  const [open, setOpen] = useState(false);
+
+  const [value, setValue] = useControllableState<Date | null>({
+    prop: valueProp,
+    onChange: (next) => onValueChange?.(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}
+      classNames={classNames}
+      footer={renderFooter?.(footerProps)}
+      formValue={formatISODate(value)}
+      required={required}
+    >
+      <Calendar
+        className={cn("border-none", classNames?.calendar)}
+        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,
+  onValueChange,
+  placeholder = "Seleccionar rango",
+  disabled,
+  disabledDate,
+  renderFooter,
+  className,
+  classNames,
+  required,
+}: RangeDatePickerProps) => {
+  const [open, setOpen] = useState(false);
+
+  const [value, setValue] = useControllableState<DateRange>({
+    prop: valueProp,
+    onChange: (next) => onValueChange?.(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}
+      classNames={classNames}
+      footer={renderFooter?.(footerProps)}
+      formValue={formatRangeDate(
+        range.start || range.end ? range : undefined,
+        "",
+      )}
+      required={required}
+    >
+      <Calendar
+        className={cn("border-none", classNames?.calendar)}
+        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,
+  onValueChange,
+  placeholder = "Seleccionar fechas",
+  disabled,
+  disabledDate,
+  renderFooter,
+  className,
+  classNames,
+  required,
+}: MultipleDatePickerProps) => {
+  const [open, setOpen] = useState(false);
+
+  const [value, setValue] = useControllableState<Date[]>({
+    prop: valueProp,
+    onChange: (next) => onValueChange?.(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}
+      classNames={classNames}
+      footer={renderFooter?.(footerProps)}
+      formValue={formatMultipleDates(value, "")}
+      required={required}
+    >
+      <Calendar
+        className={cn("border-none", classNames?.calendar)}
+        mode="multiple"
+        selected={value ?? []}
+        onSelect={(next) => {
+          setValue(next ?? []);
+        }}
+        disabled={disabledDate}
+      />
+    </PickerShell>
+  );
+};

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

@@ -0,0 +1,269 @@
+import { describe, expect, it } from "vitest";
+import {
+  formatDate,
+  formatMultipleDates,
+  formatRangeDate,
+  formatSingleDate,
+  maskDateInput,
+  parseInputToDate,
+} from "./date-picker.utils";
+
+// ─── formatSingleDate ─────────────────────────────────────────────────────────
+
+describe("formatSingleDate", () => {
+  it("returns placeholder when date is null", () => {
+    expect(formatSingleDate(null, "Select date")).toBe("Select date");
+  });
+
+  it("returns placeholder when date is undefined", () => {
+    expect(formatSingleDate(undefined, "Select date")).toBe("Select date");
+  });
+
+  it("returns placeholder when value is not a Date instance", () => {
+    expect(formatSingleDate("not a date" as any, "Pick")).toBe("Pick");
+  });
+
+  it("formats a valid date as dd/MM/yyyy", () => {
+    expect(formatSingleDate(new Date(2025, 0, 15), "Select")).toBe(
+      "15/01/2025",
+    );
+  });
+});
+
+// ─── formatRangeDate ──────────────────────────────────────────────────────────
+
+describe("formatRangeDate", () => {
+  it("returns placeholder when range is undefined", () => {
+    expect(formatRangeDate(undefined, "Pick range")).toBe("Pick range");
+  });
+
+  it("returns placeholder when both start and end are null", () => {
+    expect(formatRangeDate({ start: null, end: null }, "Pick range")).toBe(
+      "Pick range",
+    );
+  });
+
+  it("formats range with only start as '... → start'", () => {
+    expect(
+      formatRangeDate({ start: null, end: new Date(2025, 11, 31) }, "Pick"),
+    ).toBe("... → 31/12/2025");
+  });
+
+  it("formats range with only end as 'start → ...'", () => {
+    expect(
+      formatRangeDate({ start: new Date(2025, 0, 1), end: null }, "Pick"),
+    ).toBe("01/01/2025 → ...");
+  });
+
+  it("formats range with both dates", () => {
+    expect(
+      formatRangeDate(
+        { start: new Date(2025, 0, 1), end: new Date(2025, 11, 31) },
+        "Pick",
+      ),
+    ).toBe("01/01/2025 → 31/12/2025");
+  });
+});
+
+// ─── formatMultipleDates ──────────────────────────────────────────────────────
+
+describe("formatMultipleDates", () => {
+  it("returns placeholder when dates is undefined", () => {
+    expect(formatMultipleDates(undefined, "Select")).toBe("Select");
+  });
+
+  it("returns placeholder when dates is empty array", () => {
+    expect(formatMultipleDates([], "Select")).toBe("Select");
+  });
+
+  it("formats single date as dd/MM/yyyy", () => {
+    expect(formatMultipleDates([new Date(2025, 0, 15)], "Select")).toBe(
+      "15/01/2025",
+    );
+  });
+
+  it("shows count for multiple dates", () => {
+    expect(
+      formatMultipleDates(
+        [new Date(2025, 0, 1), new Date(2025, 0, 2)],
+        "Select",
+      ),
+    ).toBe("2 fechas seleccionadas");
+  });
+});
+
+// ─── formatDate ───────────────────────────────────────────────────────────────
+
+describe("formatDate", () => {
+  it("returns empty string for null", () => {
+    expect(formatDate(null)).toBe("");
+  });
+
+  it("formats valid date", () => {
+    expect(formatDate(new Date(2025, 5, 15))).toBe("15/06/2025");
+  });
+});
+
+// ─── parseInputToDate ─────────────────────────────────────────────────────────
+
+describe("parseInputToDate", () => {
+  it("returns null for empty string", () => {
+    expect(parseInputToDate("")).toBeNull();
+  });
+
+  it("returns null for whitespace only", () => {
+    expect(parseInputToDate("   ")).toBeNull();
+  });
+
+  it("returns null for non-matching format", () => {
+    expect(parseInputToDate("not a date")).toBeNull();
+  });
+
+  it("returns null when day is out of range (0 or 32)", () => {
+    expect(parseInputToDate("0/01/2025")).toBeNull();
+    expect(parseInputToDate("32/01/2025")).toBeNull();
+  });
+
+  it("returns null when month is out of range (0 or 13)", () => {
+    expect(parseInputToDate("15/0/2025")).toBeNull();
+    expect(parseInputToDate("15/13/2025")).toBeNull();
+  });
+
+  it("returns null for invalid calendar date (Feb 30)", () => {
+    expect(parseInputToDate("30/2/2025")).toBeNull();
+  });
+
+  it("parses valid dd/mm/yyyy date", () => {
+    const result = parseInputToDate("15/06/2025");
+    expect(result).toBeInstanceOf(Date);
+    expect(result?.getFullYear()).toBe(2025);
+    expect(result?.getMonth()).toBe(5);
+    expect(result?.getDate()).toBe(15);
+  });
+
+  it("expands 2-digit year to 2000+yy", () => {
+    const result = parseInputToDate("15/06/25");
+    expect(result?.getFullYear()).toBe(2025);
+  });
+
+  it("accepts single-digit day and month", () => {
+    const result = parseInputToDate("1/1/2025");
+    expect(result?.getFullYear()).toBe(2025);
+    expect(result?.getMonth()).toBe(0);
+    expect(result?.getDate()).toBe(1);
+  });
+});
+
+// ─── maskDateInput ────────────────────────────────────────────────────────────
+
+const ctx = (lastKey: string | null, previousValue: string) => ({
+  lastKey,
+  previousValue,
+});
+
+describe("maskDateInput — empty / no digits", () => {
+  it("returns empty string when raw is empty", () => {
+    expect(maskDateInput("", ctx(null, ""))).toBe("");
+  });
+
+  it("returns empty string when raw contains only non-digits", () => {
+    expect(maskDateInput("abc", ctx(null, ""))).toBe("");
+  });
+});
+
+describe("maskDateInput — day only (1-2 digits)", () => {
+  it("passes through single digit without slash", () => {
+    expect(maskDateInput("1", ctx("1", ""))).toBe("1");
+  });
+
+  it("pads single digit and adds slash when user types '/'", () => {
+    expect(maskDateInput("1/", ctx("/", "1"))).toBe("01/");
+  });
+
+  it("pads edge-case day 0 to 01 when slash typed", () => {
+    expect(maskDateInput("0/", ctx("/", "0"))).toBe("01/");
+  });
+
+  it("pads day > 31 to 31 when slash typed", () => {
+    expect(maskDateInput("9/", ctx("/", "9"))).toBe("09/");
+  });
+
+  it("auto-adds slash after two valid digits (not deleting)", () => {
+    expect(maskDateInput("12", ctx("2", "1"))).toBe("12/");
+  });
+
+  it("clamps day 32 to 31 and auto-adds slash", () => {
+    expect(maskDateInput("32", ctx("2", "3"))).toBe("31/");
+  });
+
+  it("does not add slash when deleting two-digit day", () => {
+    expect(maskDateInput("1", ctx("Backspace", "12"))).toBe("1");
+  });
+});
+
+describe("maskDateInput — day+month (3-4 digits)", () => {
+  it("returns day/month after 3 digits with normalization", () => {
+    const result = maskDateInput("123", ctx("3", "12/"));
+    expect(result).toBe("12/03/");
+  });
+
+  it("normalizes month > 12 to 12", () => {
+    const result = maskDateInput("1215", ctx("5", "12/1"));
+    expect(result).toBe("12/12/");
+  });
+
+  it("clamps 2-digit month '00' to 01", () => {
+    expect(maskDateInput("1200", ctx("0", "12/0"))).toBe("12/01/");
+  });
+
+  it("handles single-digit month '0' without padding when no slash at end", () => {
+    const result = maskDateInput("120", ctx("0", "12/"));
+    expect(result).toBe("12/0");
+  });
+
+  it("handles single-digit month '1' without padding when no slash at end", () => {
+    const result = maskDateInput("121", ctx("1", "12/"));
+    expect(result).toBe("12/1");
+  });
+
+  it("pads month '0' when user types slash after it", () => {
+    const result = maskDateInput("120/", ctx("/", "12/0"));
+    expect(result).toBe("12/01/");
+  });
+});
+
+describe("maskDateInput — full date (5-8 digits)", () => {
+  it("builds dd/mm/yyyy when 8 digits typed", () => {
+    expect(maskDateInput("12062025", ctx("5", "12/06/202"))).toBe("12/06/2025");
+  });
+
+  it("truncates year to 4 digits max", () => {
+    expect(maskDateInput("120620259", ctx("9", "12/06/2025"))).toBe(
+      "12/06/2025",
+    );
+  });
+});
+
+describe("maskDateInput — segment-based (2+ slashes present)", () => {
+  it("uses segment parsing when raw already has two slashes", () => {
+    expect(maskDateInput("12/06/2025", ctx(null, "12/06/2025"))).toBe(
+      "12/06/2025",
+    );
+  });
+
+  it("handles delete within a segment (two slashes)", () => {
+    expect(maskDateInput("12/0/2025", ctx("Backspace", "12/06/2025"))).toBe(
+      "12/0/2025",
+    );
+  });
+
+  it("returns empty string when all segment parts are empty", () => {
+    expect(maskDateInput("//", ctx("Backspace", "/"))).toBe("");
+  });
+});
+
+describe("maskDateInput — deleting", () => {
+  it("does not auto-insert slash when deleting from 'dd/' back to 'dd'", () => {
+    expect(maskDateInput("12", ctx("Backspace", "12/"))).toBe("12");
+  });
+});