@boxcustodia/library 2.0.0-alpha.17 → 2.0.0-alpha.19

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

@@ -0,0 +1,251 @@
+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");
+  });
+});

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

@@ -0,0 +1,61 @@
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useDateInputPopover } from "./use-date-input-popover";
+
+describe("useDateInputPopover", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it("starts with open=false", () => {
+    const { result } = renderHook(() => useDateInputPopover());
+    expect(result.current.open).toBe(false);
+  });
+
+  it("setOpen(true) opens the popover", () => {
+    const { result } = renderHook(() => useDateInputPopover());
+    act(() => result.current.setOpen(true));
+    expect(result.current.open).toBe(true);
+  });
+
+  it("Space key prevents default and opens popover", () => {
+    const { result } = renderHook(() => useDateInputPopover());
+    const event = { key: " ", preventDefault: vi.fn() } as any;
+    act(() => result.current.handleInputKeyDown(event));
+    expect(event.preventDefault).toHaveBeenCalledOnce();
+    expect(result.current.open).toBe(true);
+  });
+
+  it("Spacebar key (legacy) also opens popover", () => {
+    const { result } = renderHook(() => useDateInputPopover());
+    const event = { key: "Spacebar", preventDefault: vi.fn() } as any;
+    act(() => result.current.handleInputKeyDown(event));
+    expect(result.current.open).toBe(true);
+  });
+
+  it("Escape key closes popover", () => {
+    const { result } = renderHook(() => useDateInputPopover());
+    act(() => result.current.setOpen(true));
+    act(() => result.current.handleInputKeyDown({ key: "Escape" } as any));
+    expect(result.current.open).toBe(false);
+    vi.runAllTimers();
+  });
+
+  it("disabled=true prevents keydown from opening popover", () => {
+    const { result } = renderHook(() => useDateInputPopover({ disabled: true }));
+    const event = { key: " ", preventDefault: vi.fn() } as any;
+    act(() => result.current.handleInputKeyDown(event));
+    expect(result.current.open).toBe(false);
+  });
+
+  it("returns an inputRef object", () => {
+    const { result } = renderHook(() => useDateInputPopover());
+    expect(result.current.inputRef).toBeDefined();
+    expect("current" in result.current.inputRef).toBe(true);
+  });
+
+  it("other keys do not open or close popover", () => {
+    const { result } = renderHook(() => useDateInputPopover());
+    act(() => result.current.handleInputKeyDown({ key: "a" } as any));
+    expect(result.current.open).toBe(false);
+  });
+});

package/src/components/dialog/dialog.test.tsx

@@ -1,18 +1,22 @@
-import { render, waitFor } from "@testing-library/react";
-import { ComponentProps } from "react";
-import { describe, expect, it } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import { type ComponentProps } from "react";
+import { describe, expect, it, vi } from "vitest";
 import {
+  Dialog,
   DialogClose,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogPopup,
+  DialogPrimitive,
   DialogRoot,
   DialogTitle,
   DialogTrigger,
 } from "../../components";
 import { click } from "../../utils/tests";
 
+// ─── Primitives ───────────────────────────────────────────────────────────────
+
 describe("Dialog component", () => {
   const setup = (
     dialogProps?: Omit<ComponentProps<typeof DialogRoot>, "ref">,
@@ -65,4 +69,299 @@ describe("Dialog component", () => {
     expect(getByText("Title")).toBeInTheDocument();
     expect(getByText("Description")).toBeInTheDocument();
   });
+
+  // ─── data-slot ──────────────────────────────────────────────────────────────
+
+  describe("data-slot", () => {
+    const renderOpen = () =>
+      render(
+        <DialogRoot open>
+          <DialogTrigger render={<button>Open</button>} />
+          <DialogPopup>
+            <DialogHeader>
+              <DialogTitle>Title</DialogTitle>
+              <DialogDescription>Desc</DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+              <DialogClose render={<button>Close</button>} />
+            </DialogFooter>
+          </DialogPopup>
+        </DialogRoot>,
+      );
+
+    it("trigger has data-slot dialog-trigger", () => {
+      renderOpen();
+      expect(
+        document.querySelector('[data-slot="dialog-trigger"]'),
+      ).toBeInTheDocument();
+    });
+
+    it("popup has data-slot dialog-popup", () => {
+      renderOpen();
+      expect(
+        document.querySelector('[data-slot="dialog-popup"]'),
+      ).toBeInTheDocument();
+    });
+
+    it("backdrop has data-slot dialog-backdrop", () => {
+      renderOpen();
+      expect(
+        document.querySelector('[data-slot="dialog-backdrop"]'),
+      ).toBeInTheDocument();
+    });
+
+    it("viewport has data-slot dialog-viewport", () => {
+      renderOpen();
+      expect(
+        document.querySelector('[data-slot="dialog-viewport"]'),
+      ).toBeInTheDocument();
+    });
+
+    it("header has data-slot dialog-header", () => {
+      renderOpen();
+      expect(
+        document.querySelector('[data-slot="dialog-header"]'),
+      ).toBeInTheDocument();
+    });
+
+    it("title has data-slot dialog-title", () => {
+      renderOpen();
+      expect(
+        document.querySelector('[data-slot="dialog-title"]'),
+      ).toBeInTheDocument();
+    });
+
+    it("description has data-slot dialog-description", () => {
+      renderOpen();
+      expect(
+        document.querySelector('[data-slot="dialog-description"]'),
+      ).toBeInTheDocument();
+    });
+
+    it("footer has data-slot dialog-footer", () => {
+      renderOpen();
+      expect(
+        document.querySelector('[data-slot="dialog-footer"]'),
+      ).toBeInTheDocument();
+    });
+
+    it("close primitive has data-slot dialog-close", () => {
+      renderOpen();
+      expect(
+        document.querySelector('[data-slot="dialog-close"]'),
+      ).toBeInTheDocument();
+    });
+  });
+
+  // ─── Props ──────────────────────────────────────────────────────────────────
+
+  describe("className", () => {
+    it("applies className to popup panel", () => {
+      render(
+        <DialogRoot open>
+          <DialogPopup className="custom-popup-class">Content</DialogPopup>
+        </DialogRoot>,
+      );
+      expect(
+        document.querySelector('[data-slot="dialog-popup"]'),
+      ).toHaveClass("custom-popup-class");
+    });
+  });
+
+  describe("hideClose", () => {
+    it("shows built-in close button by default", () => {
+      render(
+        <DialogRoot open>
+          <DialogPopup>
+            <DialogTitle>Title</DialogTitle>
+          </DialogPopup>
+        </DialogRoot>,
+      );
+      expect(screen.getByRole("button", { name: "Cerrar" })).toBeInTheDocument();
+    });
+
+    it("hides close button when hideClose is true", () => {
+      render(
+        <DialogRoot open>
+          <DialogPopup hideClose>
+            <DialogTitle>Title</DialogTitle>
+          </DialogPopup>
+        </DialogRoot>,
+      );
+      expect(
+        screen.queryByRole("button", { name: "Cerrar" }),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe("classNames slots", () => {
+    it("applies classNames.backdrop to backdrop", () => {
+      render(
+        <DialogRoot open>
+          <DialogPopup classNames={{ backdrop: "custom-backdrop" }}>
+            Content
+          </DialogPopup>
+        </DialogRoot>,
+      );
+      expect(
+        document.querySelector('[data-slot="dialog-backdrop"]'),
+      ).toHaveClass("custom-backdrop");
+    });
+
+    it("applies classNames.viewport to viewport", () => {
+      render(
+        <DialogRoot open>
+          <DialogPopup classNames={{ viewport: "custom-viewport" }}>
+            Content
+          </DialogPopup>
+        </DialogRoot>,
+      );
+      expect(
+        document.querySelector('[data-slot="dialog-viewport"]'),
+      ).toHaveClass("custom-viewport");
+    });
+
+    it("applies classNames.closeButton to close button", () => {
+      render(
+        <DialogRoot open>
+          <DialogPopup classNames={{ closeButton: "custom-close-btn" }}>
+            Content
+          </DialogPopup>
+        </DialogRoot>,
+      );
+      // Close button is wrapped in a Button with the closeButton class
+      expect(
+        document.querySelector(".custom-close-btn"),
+      ).toBeInTheDocument();
+    });
+  });
+
+  // ─── Primitive export ────────────────────────────────────────────────────────
+
+  it("exports DialogPrimitive", () => {
+    expect(DialogPrimitive).toBeDefined();
+  });
+});
+
+// ─── Composite ────────────────────────────────────────────────────────────────
+
+describe("Dialog composite", () => {
+  const setup = (props: Partial<ComponentProps<typeof Dialog>> = {}) =>
+    render(
+      <Dialog
+        trigger={<button>Open</button>}
+        title="Dialog Title"
+        description="Dialog Description"
+        footer={<button>Save</button>}
+        {...props}
+      >
+        <p>Dialog Body</p>
+      </Dialog>,
+    );
+
+  it("renders without crash", () => setup());
+
+  it("trigger opens the dialog", async () => {
+    setup();
+    click(screen.getByRole("button", { name: "Open" }));
+    await waitFor(() =>
+      expect(screen.getByText("Dialog Title")).toBeInTheDocument(),
+    );
+  });
+
+  it("shows title prop", async () => {
+    setup();
+    click(screen.getByRole("button", { name: "Open" }));
+    await waitFor(() =>
+      expect(screen.getByText("Dialog Title")).toBeInTheDocument(),
+    );
+  });
+
+  it("shows description prop", async () => {
+    setup();
+    click(screen.getByRole("button", { name: "Open" }));
+    await waitFor(() =>
+      expect(screen.getByText("Dialog Description")).toBeInTheDocument(),
+    );
+  });
+
+  it("renders children", async () => {
+    setup();
+    click(screen.getByRole("button", { name: "Open" }));
+    await waitFor(() =>
+      expect(screen.getByText("Dialog Body")).toBeInTheDocument(),
+    );
+  });
+
+  it("renders footer prop", async () => {
+    setup();
+    click(screen.getByRole("button", { name: "Open" }));
+    await waitFor(() =>
+      expect(screen.getByRole("button", { name: "Save" })).toBeInTheDocument(),
+    );
+  });
+
+  it("calls onClose when dialog closes via built-in close button", async () => {
+    const onClose = vi.fn();
+    setup({ onClose });
+    click(screen.getByRole("button", { name: "Open" }));
+    await waitFor(() =>
+      expect(screen.getByRole("button", { name: "Cerrar" })).toBeInTheDocument(),
+    );
+    click(screen.getByRole("button", { name: "Cerrar" }));
+    await waitFor(() => expect(onClose).toHaveBeenCalledTimes(1));
+  });
+
+  it("hides built-in close button when hideClose", async () => {
+    setup({ hideClose: true });
+    click(screen.getByRole("button", { name: "Open" }));
+    await waitFor(() =>
+      expect(screen.getByText("Dialog Title")).toBeInTheDocument(),
+    );
+    expect(
+      screen.queryByRole("button", { name: "Cerrar" }),
+    ).not.toBeInTheDocument();
+  });
+
+  describe("classNames slots", () => {
+    it("applies classNames.header to header wrapper", async () => {
+      setup({ classNames: { header: "custom-header" } });
+      click(screen.getByRole("button", { name: "Open" }));
+      await waitFor(() =>
+        expect(
+          document.querySelector('[data-slot="dialog-header"]'),
+        ).toHaveClass("custom-header"),
+      );
+    });
+
+    it("applies classNames.title to title element", async () => {
+      setup({ classNames: { title: "custom-title" } });
+      click(screen.getByRole("button", { name: "Open" }));
+      await waitFor(() =>
+        expect(
+          document.querySelector('[data-slot="dialog-title"]'),
+        ).toHaveClass("custom-title"),
+      );
+    });
+
+    it("applies classNames.description to description element", async () => {
+      setup({ classNames: { description: "custom-desc" } });
+      click(screen.getByRole("button", { name: "Open" }));
+      await waitFor(() =>
+        expect(
+          document.querySelector('[data-slot="dialog-description"]'),
+        ).toHaveClass("custom-desc"),
+      );
+    });
+
+    it("applies classNames.footer to footer wrapper", async () => {
+      setup({ classNames: { footer: "custom-footer" } });
+      click(screen.getByRole("button", { name: "Open" }));
+      await waitFor(() =>
+        expect(
+          document.querySelector('[data-slot="dialog-footer"]'),
+        ).toHaveClass("custom-footer"),
+      );
+    });
+  });
 });

package/src/components/dialog/dialog.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Dialog as DialogBase } from "@base-ui/react/dialog";
 import { X } from "lucide-react";
 import type { HTMLAttributes, ReactElement, ReactNode } from "react";
@@ -107,7 +109,7 @@ export function DialogPopup({
           {children}
           {!hideClose && (
             <DialogBase.Close
-              aria-label="Close"
+              aria-label="Cerrar"
               className={cn("absolute right-2 top-2", classNames?.closeButton)}
               render={<Button size="icon" variant="ghost" />}
             >