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

package/src/components/calendar/calendar.test.tsx

@@ -1,12 +1,181 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
 import { Calendar } from "../../components";
 
 describe("Calendar component", () => {
-  it.skip("should render correctly", () => {
+  it("renders the day-picker root with the calendar slot", () => {
     render(<Calendar mode="single" />);
-    const component = screen.getByTestId("Calendar");
 
-    expect(component).toBeInTheDocument();
+    expect(document.querySelector('[data-slot="calendar"]')).toBeInTheDocument();
+  });
+
+  it("applies the cell-size variables and merges a custom className on root", () => {
+    render(<Calendar mode="single" className="my-calendar" />);
+
+    const root = document.querySelector('[data-slot="calendar"]');
+    expect(root).toHaveClass("my-calendar");
+    expect(root).toHaveClass("w-fit");
+  });
+
+  it("renders month and year dropdowns with captionLayout='dropdown'", () => {
+    render(<Calendar mode="single" captionLayout="dropdown" />);
+
+    // CalendarDropdown wraps each react-day-picker dropdown in a Base UI Select.
+    const triggers = document.querySelectorAll('[data-slot="select-trigger"]');
+    expect(triggers.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it("renders a label caption (no dropdowns) with captionLayout='label'", () => {
+    render(<Calendar mode="single" captionLayout="label" />);
+
+    expect(
+      document.querySelector('[data-slot="select-trigger"]'),
+    ).toBeNull();
+    expect(document.querySelector('[data-slot="calendar"]')).toBeInTheDocument();
+  });
+
+  it("renders previous and next navigation buttons (Chevron left/right)", () => {
+    render(<Calendar mode="single" />);
+
+    expect(
+      screen.getByRole("button", { name: /previous|anterior/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /next|siguiente/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("merges a custom classNames entry onto the matching slot", () => {
+    render(
+      <Calendar
+        mode="single"
+        classNames={{ month: "custom-month-class" }}
+      />,
+    );
+
+    const month = document.querySelector(".custom-month-class");
+    expect(month).not.toBeNull();
+    // Base class is preserved alongside the custom one.
+    expect(month).toHaveClass("w-full");
+  });
+
+  it("renders selected day for a single date", () => {
+    const selected = new Date(2024, 0, 15);
+    render(
+      <Calendar
+        mode="single"
+        selected={selected}
+        defaultMonth={selected}
+        captionLayout="label"
+      />,
+    );
+
+    const day = screen.getByRole("button", { name: /15/ });
+    expect(day).toBeInTheDocument();
+  });
+
+  it("supports range mode rendering", () => {
+    const from = new Date(2024, 0, 10);
+    const to = new Date(2024, 0, 20);
+    render(
+      <Calendar
+        mode="range"
+        selected={{ from, to }}
+        defaultMonth={from}
+        captionLayout="label"
+      />,
+    );
+
+    expect(document.querySelector(".range-start")).not.toBeNull();
+    expect(document.querySelector(".range-end")).not.toBeNull();
+  });
+
+  it("supports multiple mode rendering", () => {
+    const selected = [new Date(2024, 0, 10), new Date(2024, 0, 12)];
+    render(
+      <Calendar
+        mode="multiple"
+        selected={selected}
+        defaultMonth={selected[0]}
+        captionLayout="label"
+      />,
+    );
+
+    expect(
+      document.querySelectorAll('[data-selected="true"]').length,
+    ).toBeGreaterThanOrEqual(1);
+  });
+
+  it("hides outside days when showOutsideDays is false", () => {
+    render(
+      <Calendar
+        mode="single"
+        showOutsideDays={false}
+        defaultMonth={new Date(2024, 0, 1)}
+        captionLayout="label"
+      />,
+    );
+
+    expect(document.querySelector('[data-slot="calendar"]')).toBeInTheDocument();
+  });
+
+  it("merges user-provided components over the defaults", () => {
+    const CustomChevron = () => <span data-testid="custom-chevron" />;
+    render(
+      <Calendar
+        mode="single"
+        components={{ Chevron: CustomChevron }}
+      />,
+    );
+
+    expect(screen.getAllByTestId("custom-chevron").length).toBeGreaterThan(0);
+  });
+
+
+  it("formats the month dropdown labels in Spanish (short form)", () => {
+    render(
+      <Calendar
+        mode="single"
+        captionLayout="dropdown"
+        defaultMonth={new Date(2024, 0, 1)}
+      />,
+    );
+
+    // January in es short form is "ene".
+    const monthTrigger = document.querySelector(
+      '[data-slot="select-trigger"]',
+    );
+    expect(monthTrigger).not.toBeNull();
+    expect(monthTrigger?.textContent?.toLowerCase()).toContain("ene");
+  });
+
+  it("navigates the month via the dropdown onChange handler", async () => {
+    const user = userEvent.setup();
+    render(
+      <Calendar
+        mode="single"
+        captionLayout="dropdown"
+        defaultMonth={new Date(2024, 0, 1)}
+      />,
+    );
+
+    const monthTrigger = document.querySelector(
+      '[data-slot="select-trigger"]',
+    ) as HTMLElement;
+    await user.click(monthTrigger);
+
+    // Base UI Select renders its options in a portal once open.
+    const marchOption = await screen.findByRole("option", { name: /mar/i });
+    await user.click(marchOption);
+
+    // After selecting March, the trigger reflects the new month.
+    await vi.waitFor(() => {
+      const triggers = document.querySelectorAll(
+        '[data-slot="select-trigger"]',
+      );
+      const monthText = within(triggers[0] as HTMLElement).queryByText(/mar/i);
+      expect(monthText).not.toBeNull();
+    });
   });
 });

package/src/components/card/card.test.tsx

@@ -0,0 +1,207 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardRoot,
+  CardTitle,
+} from "../../components";
+
+describe("Card composite", () => {
+  it("renders the root with default size", () => {
+    render(<Card data-testid="card">Body</Card>);
+
+    const root = screen.getByTestId("card");
+    expect(root).toHaveAttribute("data-slot", "card");
+    expect(root).toHaveAttribute("data-size", "default");
+  });
+
+  it("applies the sm size variant", () => {
+    render(
+      <Card data-testid="card" size="sm">
+        Body
+      </Card>,
+    );
+
+    expect(screen.getByTestId("card")).toHaveAttribute("data-size", "sm");
+  });
+
+  it("renders the content slot when children are provided", () => {
+    render(<Card>Hello body</Card>);
+
+    const content = document.querySelector('[data-slot="card-content"]');
+    expect(content).not.toBeNull();
+    expect(content).toHaveTextContent("Hello body");
+  });
+
+  it("omits the header when title, description, and action are all absent", () => {
+    render(<Card>Only body</Card>);
+
+    expect(document.querySelector('[data-slot="card-header"]')).toBeNull();
+  });
+
+  it("renders the header with title", () => {
+    render(<Card title="My title">Body</Card>);
+
+    expect(document.querySelector('[data-slot="card-header"]')).not.toBeNull();
+    const titleEl = document.querySelector('[data-slot="card-title"]');
+    expect(titleEl).toHaveTextContent("My title");
+  });
+
+  it("renders the header from description alone (no title)", () => {
+    render(<Card description="Just a description">Body</Card>);
+
+    expect(document.querySelector('[data-slot="card-header"]')).not.toBeNull();
+    expect(document.querySelector('[data-slot="card-title"]')).toBeNull();
+    expect(
+      document.querySelector('[data-slot="card-description"]'),
+    ).toHaveTextContent("Just a description");
+  });
+
+  it("renders the header from action alone (no title/description)", () => {
+    render(<Card action={<button type="button">Go</button>}>Body</Card>);
+
+    expect(document.querySelector('[data-slot="card-header"]')).not.toBeNull();
+    expect(document.querySelector('[data-slot="card-title"]')).toBeNull();
+    expect(
+      document.querySelector('[data-slot="card-description"]'),
+    ).toBeNull();
+    const action = document.querySelector('[data-slot="card-action"]');
+    expect(action).toHaveTextContent("Go");
+  });
+
+  it("renders the footer when provided", () => {
+    render(<Card footer={<span>Footer text</span>}>Body</Card>);
+
+    const footer = document.querySelector('[data-slot="card-footer"]');
+    expect(footer).not.toBeNull();
+    expect(footer).toHaveTextContent("Footer text");
+  });
+
+  it("omits content and footer slots when not provided", () => {
+    render(<Card title="Title only" />);
+
+    expect(document.querySelector('[data-slot="card-content"]')).toBeNull();
+    expect(document.querySelector('[data-slot="card-footer"]')).toBeNull();
+  });
+
+  it("renders a full card with every region populated", () => {
+    render(
+      <Card
+        title="Title"
+        description="Description"
+        action={<span>Action</span>}
+        footer={<span>Footer</span>}
+      >
+        Content
+      </Card>,
+    );
+
+    expect(document.querySelector('[data-slot="card-title"]')).toHaveTextContent(
+      "Title",
+    );
+    expect(
+      document.querySelector('[data-slot="card-description"]'),
+    ).toHaveTextContent("Description");
+    expect(
+      document.querySelector('[data-slot="card-action"]'),
+    ).toHaveTextContent("Action");
+    expect(
+      document.querySelector('[data-slot="card-content"]'),
+    ).toHaveTextContent("Content");
+    expect(
+      document.querySelector('[data-slot="card-footer"]'),
+    ).toHaveTextContent("Footer");
+  });
+
+  it("applies className to the root and classNames to each slot", () => {
+    render(
+      <Card
+        data-testid="card"
+        className="root-class"
+        title="T"
+        description="D"
+        action={<span>A</span>}
+        footer={<span>F</span>}
+        classNames={{
+          header: "header-class",
+          title: "title-class",
+          description: "description-class",
+          action: "action-class",
+          content: "content-class",
+          footer: "footer-class",
+        }}
+      >
+        Body
+      </Card>,
+    );
+
+    expect(screen.getByTestId("card")).toHaveClass("root-class");
+    expect(document.querySelector('[data-slot="card-header"]')).toHaveClass(
+      "header-class",
+    );
+    expect(document.querySelector('[data-slot="card-title"]')).toHaveClass(
+      "title-class",
+    );
+    expect(
+      document.querySelector('[data-slot="card-description"]'),
+    ).toHaveClass("description-class");
+    expect(document.querySelector('[data-slot="card-action"]')).toHaveClass(
+      "action-class",
+    );
+    expect(document.querySelector('[data-slot="card-content"]')).toHaveClass(
+      "content-class",
+    );
+    expect(document.querySelector('[data-slot="card-footer"]')).toHaveClass(
+      "footer-class",
+    );
+  });
+});
+
+describe("Card primitives", () => {
+  it("CardRoot defaults size to 'default' and merges className", () => {
+    render(
+      <CardRoot className="extra" data-testid="root">
+        x
+      </CardRoot>,
+    );
+
+    const root = screen.getByTestId("root");
+    expect(root).toHaveAttribute("data-size", "default");
+    expect(root).toHaveClass("extra", "rounded-xl");
+  });
+
+  it("CardRoot honors an explicit sm size", () => {
+    render(
+      <CardRoot size="sm" data-testid="root">
+        x
+      </CardRoot>,
+    );
+
+    expect(screen.getByTestId("root")).toHaveAttribute("data-size", "sm");
+  });
+
+  it.each([
+    [CardHeader, "card-header"],
+    [CardTitle, "card-title"],
+    [CardDescription, "card-description"],
+    [CardAction, "card-action"],
+    [CardContent, "card-content"],
+    [CardFooter, "card-footer"],
+  ])("%o renders its data-slot and merges className", (Cmp, slot) => {
+    render(
+      <Cmp className="merged" data-testid="el">
+        content
+      </Cmp>,
+    );
+
+    const el = screen.getByTestId("el");
+    expect(el).toHaveAttribute("data-slot", slot);
+    expect(el).toHaveClass("merged");
+    expect(el).toHaveTextContent("content");
+  });
+});

package/src/components/card/card.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { cn } from "../../lib";
 

package/src/components/center/center.test.tsx

@@ -0,0 +1,63 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Center } from "../../components";
+
+describe("Center component", () => {
+  it("renders a div with flex centering by default", () => {
+    render(<Center data-testid="center">content</Center>);
+
+    const el = screen.getByTestId("center");
+    expect(el.tagName.toLowerCase()).toBe("div");
+    expect(el).toHaveAttribute("data-slot", "center");
+    expect(el).toHaveClass("flex", "items-center", "justify-center");
+    expect(el).not.toHaveClass("inline-flex");
+  });
+
+  it("uses inline-flex when inline is true", () => {
+    render(
+      <Center data-testid="center" inline>
+        content
+      </Center>,
+    );
+
+    const el = screen.getByTestId("center");
+    expect(el).toHaveClass("inline-flex");
+    expect(el).not.toHaveClass("flex items-center");
+  });
+
+  it("renders as a custom element via the 'as' prop", () => {
+    render(
+      <Center data-testid="center" as="section">
+        content
+      </Center>,
+    );
+
+    const el = screen.getByTestId("center");
+    expect(el.tagName.toLowerCase()).toBe("section");
+    expect(el).toHaveAttribute("data-slot", "center");
+  });
+
+  it("merges a custom className with the base classes", () => {
+    render(
+      <Center data-testid="center" className="gap-2">
+        content
+      </Center>,
+    );
+
+    const el = screen.getByTestId("center");
+    expect(el).toHaveClass("gap-2", "flex", "items-center");
+  });
+
+  it("renders children and forwards arbitrary props", () => {
+    render(
+      <Center data-testid="center" aria-label="centered" role="group">
+        <span>inner</span>
+      </Center>,
+    );
+
+    const el = screen.getByTestId("center");
+    expect(el).toHaveAttribute("aria-label", "centered");
+    expect(el).toHaveAttribute("role", "group");
+    expect(el).toHaveTextContent("inner");
+  });
+});

package/src/components/center/center.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { ComponentProps, ElementType } from "react";
 import { cn } from "../../lib";