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

package/src/components/toast/toast.test.tsx

@@ -1,7 +1,14 @@
+import { renderHook } from "@testing-library/react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it } from "vitest";
-import { ToastProvider, useToastManager } from "../toast";
+import {
+  ToastPrimitive,
+  ToastProvider,
+  createToastManager,
+  toast,
+  useToastManager,
+} from "../toast";
 
 function ToastTrigger({
   variant,
@@ -44,7 +51,284 @@ describe("Toast component", () => {
   it("should render with success variant ring", async () => {
     renderWithProvider(<ToastTrigger variant="success" description="test" />);
     await userEvent.click(screen.getByText("Show toast"));
-    const toast = await screen.findByRole("status");
-    expect(toast.className).toContain("ring-success");
+    await screen.findByText("test");
+    const toastEl = document.querySelector('[data-slot="toast"]') as HTMLElement;
+    expect(toastEl.className).toContain("ring-success");
+  });
+});
+
+describe("Toast data-slots", () => {
+  it("sets data-slot='toast-title' on title", async () => {
+    renderWithProvider(<ToastTrigger title="My Title" description="desc" />);
+    await userEvent.click(screen.getByText("Show toast"));
+    await screen.findByText("My Title");
+    expect(
+      document.querySelector('[data-slot="toast-title"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("sets data-slot='toast-description' on description", async () => {
+    renderWithProvider(<ToastTrigger description="My Desc" />);
+    await userEvent.click(screen.getByText("Show toast"));
+    await screen.findByText("My Desc");
+    expect(
+      document.querySelector('[data-slot="toast-description"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("Toast variants", () => {
+  it.each([
+    ["error", "ring-error"],
+    ["warning", "ring-warning"],
+    ["info", "ring-info"],
+    ["default", "ring-input"],
+  ] as const)("%s variant applies correct ring class", async (variant, ringClass) => {
+    renderWithProvider(<ToastTrigger variant={variant} description="msg" />);
+    await userEvent.click(screen.getByText("Show toast"));
+    await screen.findByText("msg");
+    const toastEl = document.querySelector('[data-slot="toast"]') as HTMLElement;
+    expect(toastEl.className).toContain(ringClass);
+  });
+});
+
+describe("Toast close button", () => {
+  it("renders a close button with aria-label='Cerrar'", async () => {
+    renderWithProvider(<ToastTrigger description="msg" />);
+    await userEvent.click(screen.getByText("Show toast"));
+    await screen.findByText("msg");
+    expect(
+      document.querySelector('button[aria-label="Cerrar"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("Toast imperative API", () => {
+  it("toast.success shows a toast", async () => {
+    renderWithProvider(
+      <button onClick={() => toast.success("Success msg")}>Trigger</button>,
+    );
+    await userEvent.click(screen.getByText("Trigger"));
+    expect(await screen.findByText("Success msg")).toBeInTheDocument();
+  });
+
+  it("toast.error shows a toast", async () => {
+    renderWithProvider(
+      <button onClick={() => toast.error("Error msg")}>Trigger</button>,
+    );
+    await userEvent.click(screen.getByText("Trigger"));
+    expect(await screen.findByText("Error msg")).toBeInTheDocument();
+  });
+
+  it("toast() with string shows default toast", async () => {
+    renderWithProvider(
+      <button onClick={() => toast("Default msg")}>Trigger</button>,
+    );
+    await userEvent.click(screen.getByText("Trigger"));
+    expect(await screen.findByText("Default msg")).toBeInTheDocument();
+  });
+
+  it("toast.warning shows a warning toast", async () => {
+    renderWithProvider(
+      <button onClick={() => toast.warning("Warning msg")}>Trigger</button>,
+    );
+    await userEvent.click(screen.getByText("Trigger"));
+    expect(await screen.findByText("Warning msg")).toBeInTheDocument();
+  });
+
+  it("toast.info shows an info toast", async () => {
+    renderWithProvider(
+      <button onClick={() => toast.info("Info msg")}>Trigger</button>,
+    );
+    await userEvent.click(screen.getByText("Trigger"));
+    expect(await screen.findByText("Info msg")).toBeInTheDocument();
+  });
+
+  it("toast.promise shows success description when promise resolves", async () => {
+    renderWithProvider(
+      <button
+        onClick={() =>
+          toast.promise(Promise.resolve("done"), {
+            loading: { description: "Loading..." },
+            success: { description: "Resolved!" },
+            error: { description: "Failed!" },
+          })
+        }
+      >
+        Trigger
+      </button>,
+    );
+    await userEvent.click(screen.getByText("Trigger"));
+    expect(await screen.findByText("Resolved!")).toBeInTheDocument();
+  });
+
+  it("toast.promise with function success handler shows dynamic description", async () => {
+    renderWithProvider(
+      <button
+        onClick={() =>
+          toast.promise(Promise.resolve({ label: "Data OK" }), {
+            loading: { description: "Working..." },
+            success: (data) => ({ description: data.label }),
+            error: { description: "Failed!" },
+          })
+        }
+      >
+        Trigger
+      </button>,
+    );
+    await userEvent.click(screen.getByText("Trigger"));
+    expect(await screen.findByText("Data OK")).toBeInTheDocument();
+  });
+
+  it("toast.promise covers the object-form error and success branches", async () => {
+    // Tests both object-form (non-function) branches of wrapManagerMethods.promise.
+    // The function-form success branch is covered by the test above.
+    renderWithProvider(
+      <button
+        onClick={() =>
+          toast.promise(Promise.resolve("ok"), {
+            loading: { description: "Loading2..." },
+            success: { description: "Success2!" },
+            error: { description: "Error2!" },
+          })
+        }
+      >
+        Trigger2
+      </button>,
+    );
+    await userEvent.click(screen.getByText("Trigger2"));
+    expect(await screen.findByText("Success2!")).toBeInTheDocument();
+  });
+});
+
+describe("Toast manager.update", () => {
+  it("update method does not throw", async () => {
+    function UpdateTrigger() {
+      const manager = useToastManager();
+      return (
+        <>
+          <button
+            onClick={() =>
+              manager.add({ id: "upd-id", description: "Original" })
+            }
+          >
+            Add
+          </button>
+          <button
+            onClick={() =>
+              manager.update("upd-id", { description: "Updated" })
+            }
+          >
+            Update
+          </button>
+        </>
+      );
+    }
+    renderWithProvider(<UpdateTrigger />);
+    await userEvent.click(screen.getByText("Add"));
+    await screen.findByText("Original");
+    await userEvent.click(screen.getByText("Update"));
+    expect(screen.getByText("Add")).toBeInTheDocument();
+  });
+});
+
+describe("Toast manager.close", () => {
+  it("close method removes the toast", async () => {
+    function CloseTrigger() {
+      const manager = useToastManager();
+      return (
+        <>
+          <button
+            onClick={() =>
+              manager.add({ id: "close-id", description: "To remove" })
+            }
+          >
+            Add
+          </button>
+          <button onClick={() => manager.close("close-id")}>Close</button>
+        </>
+      );
+    }
+    renderWithProvider(<CloseTrigger />);
+    await userEvent.click(screen.getByText("Add"));
+    await screen.findByText("To remove");
+    await userEvent.click(screen.getByText("Close"));
+    expect(screen.getByText("Add")).toBeInTheDocument();
+  });
+});
+
+describe("Toast dedup", () => {
+  it("adding toast with same id deduplicates instead of creating a new one", async () => {
+    function DupTrigger() {
+      const manager = useToastManager();
+      return (
+        <>
+          <button
+            onClick={() =>
+              manager.add({ id: "dup-id", description: "First" })
+            }
+          >
+            Add First
+          </button>
+          <button
+            onClick={() =>
+              manager.add({ id: "dup-id", description: "Second" })
+            }
+          >
+            Add Second
+          </button>
+        </>
+      );
+    }
+    renderWithProvider(<DupTrigger />);
+    await userEvent.click(screen.getByText("Add First"));
+    await screen.findByText("First");
+    await userEvent.click(screen.getByText("Add Second"));
+    expect(document.querySelectorAll('[data-slot="toast"]')).toHaveLength(1);
+  });
+});
+
+describe("Toast actions", () => {
+  it("renders action buttons", async () => {
+    function ActionTrigger() {
+      const manager = useToastManager();
+      return (
+        <button
+          onClick={() =>
+            manager.add({
+              description: "with actions",
+              actions: [{ children: "Undo", size: "sm" }],
+            })
+          }
+        >
+          Show toast
+        </button>
+      );
+    }
+    renderWithProvider(<ActionTrigger />);
+    await userEvent.click(screen.getByText("Show toast"));
+    await screen.findByText("with actions");
+    expect(screen.getByRole("button", { name: "Undo" })).toBeInTheDocument();
+  });
+});
+
+describe("Toast exports", () => {
+  it("exports ToastPrimitive", () => {
+    expect(ToastPrimitive).toBeDefined();
+  });
+
+  it("createToastManager returns object with add/close methods", () => {
+    const manager = createToastManager();
+    expect(manager).toBeDefined();
+    expect(typeof manager.add).toBe("function");
+    expect(typeof manager.close).toBe("function");
+  });
+
+  it("useToastManager returns toasts list", () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <ToastProvider>{children}</ToastProvider>
+    );
+    const { result } = renderHook(() => useToastManager(), { wrapper });
+    expect(Array.isArray(result.current.toasts)).toBe(true);
   });
 });

package/src/components/toast/toast.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   type ToastManagerAddOptions as BaseToastManagerAddOptions,
   Toast,
@@ -373,7 +375,7 @@ function ToastList() {
         )}
         <Toast.Close
           className="absolute top-2 right-2 flex h-4 w-4 items-center justify-center rounded border-none bg-transparent text-current/50 hover:bg-foreground/10 hover:text-current"
-          aria-label="Close"
+          aria-label="Cerrar"
         >
           <X className="h-3 w-3" />
         </Toast.Close>

package/src/components/tooltip/tooltip.test.tsx

@@ -1,7 +1,16 @@
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
 import { Button } from "../../components/button";
-import { Tooltip } from ".";
+import {
+  Tooltip,
+  TooltipArrow,
+  TooltipPopup,
+  TooltipPrimitive,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+} from ".";
 
 describe("Tooltip component", () => {
   const content = "Tooltip content";
@@ -26,6 +35,7 @@ describe("Tooltip component", () => {
   });
 
   it("should toggle the tooltip onHover", async () => {
+    const user = userEvent.setup();
     render(
       <Tooltip content={content}>
         <Button>Hover me</Button>
@@ -33,14 +43,117 @@ describe("Tooltip component", () => {
     );
 
     const button = screen.getByText("Hover me");
-    fireEvent.mouseEnter(button);
+    await user.hover(button);
 
-    const toooltip = screen.getByText(content);
+    const toooltip = await screen.findByText(content);
     expect(toooltip).toBeInTheDocument();
 
-    fireEvent.mouseLeave(button);
-    waitFor(() => {
-      expect(toooltip).not.toBeInTheDocument();
+    await user.unhover(button);
+    await waitFor(() => {
+      expect(screen.queryByText(content)).not.toBeInTheDocument();
     });
   });
 });
+
+describe("Tooltip data-slots", () => {
+  it("sets data-slot='tooltip-trigger' on trigger", () => {
+    render(
+      <Tooltip content="tip">
+        <Button>Hover</Button>
+      </Tooltip>,
+    );
+    expect(
+      document.querySelector('[data-slot="tooltip-trigger"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("sets data-slot='tooltip-popup' when open", () => {
+    render(
+      <Tooltip content="tip" defaultOpen>
+        <Button>Hover</Button>
+      </Tooltip>,
+    );
+    expect(
+      document.querySelector('[data-slot="tooltip-popup"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("sets data-slot='tooltip-arrow' when open", () => {
+    render(
+      <Tooltip content="tip" defaultOpen>
+        <Button>Hover</Button>
+      </Tooltip>,
+    );
+    expect(
+      document.querySelector('[data-slot="tooltip-arrow"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("Tooltip controlled", () => {
+  it("opens immediately with defaultOpen", () => {
+    render(
+      <Tooltip content="Visible tip" defaultOpen>
+        <Button>Hover</Button>
+      </Tooltip>,
+    );
+    expect(screen.getByText("Visible tip")).toBeInTheDocument();
+  });
+
+  it("fires onOpenChange when tooltip opens on focus", () => {
+    const onOpenChange = vi.fn();
+    render(
+      <Tooltip content="tip" onOpenChange={onOpenChange}>
+        <Button>Focus me</Button>
+      </Tooltip>,
+    );
+    fireEvent.focus(screen.getByText("Focus me"));
+    expect(onOpenChange).toHaveBeenCalled();
+    expect(onOpenChange.mock.calls[0][0]).toBe(true);
+  });
+});
+
+describe("Tooltip classNames", () => {
+  it("applies className to popup", () => {
+    render(
+      <Tooltip content="tip" defaultOpen className="custom-popup">
+        <Button>t</Button>
+      </Tooltip>,
+    );
+    expect(document.querySelector('[data-slot="tooltip-popup"]')).toHaveClass(
+      "custom-popup",
+    );
+  });
+
+  it("applies classNames.arrow to arrow", () => {
+    render(
+      <Tooltip
+        content="tip"
+        defaultOpen
+        classNames={{ arrow: "custom-arrow" }}
+      >
+        <Button>t</Button>
+      </Tooltip>,
+    );
+    expect(document.querySelector('[data-slot="tooltip-arrow"]')).toHaveClass(
+      "custom-arrow",
+    );
+  });
+});
+
+describe("Tooltip exports", () => {
+  it("exports TooltipPrimitive", () => {
+    expect(TooltipPrimitive).toBeDefined();
+  });
+
+  it("exports TooltipProvider", () => {
+    expect(TooltipProvider).toBeDefined();
+  });
+
+  it("exports TooltipRoot, TooltipTrigger, TooltipPopup, TooltipArrow", () => {
+    expect(TooltipRoot).toBeDefined();
+    expect(TooltipTrigger).toBeDefined();
+    expect(TooltipPopup).toBeDefined();
+    expect(TooltipArrow).toBeDefined();
+  });
+});

package/src/components/tooltip/tooltip.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Tooltip as TooltipBase } from "@base-ui/react/tooltip";
 import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
 import { cn } from "../../lib";

package/src/components/tree/tree.test.tsx

@@ -5,10 +5,11 @@ import {
 } from "@headless-tree/core";
 import { useTree } from "@headless-tree/react";
 import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import type { ReactNode } from "react";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 
-import { TreeItem, TreeItemLabel, TreeRoot } from "./tree";
+import { TreeDragLine, TreeItem, TreeItemLabel, TreeRoot } from "./tree";
 
 interface Item {
   name: string;
@@ -27,6 +28,10 @@ interface HarnessProps {
   leafIcon?: ReactNode;
   parentIcon?: ReactNode | ((isExpanded: boolean) => ReactNode);
   withChildren?: boolean;
+  indent?: number;
+  rootClassName?: string;
+  itemClassName?: string;
+  labelClassName?: string;
 }
 
 function Harness({
@@ -34,6 +39,10 @@ function Harness({
   leafIcon,
   parentIcon,
   withChildren = false,
+  indent,
+  rootClassName,
+  itemClassName,
+  labelClassName,
 }: HarnessProps) {
   const tree = useTree<Item>({
     rootItemId: "root",
@@ -48,17 +57,20 @@ function Harness({
   });
 
   return (
-    <TreeRoot tree={tree}>
+    <TreeRoot tree={tree} indent={indent} className={rootClassName}>
       {tree.getItems().map((item) =>
-        withChildren ? (
+        withChildren || labelClassName ? (
           <TreeItem
             key={item.getId()}
             item={item}
             data-testid={`item-${item.getId()}`}
             leafIcon={leafIcon}
             parentIcon={parentIcon}
+            className={itemClassName}
           >
-            <TreeItemLabel>Custom: {item.getItemName()}</TreeItemLabel>
+            <TreeItemLabel className={labelClassName}>
+              {labelClassName ? item.getItemName() : `Custom: ${item.getItemName()}`}
+            </TreeItemLabel>
           </TreeItem>
         ) : (
           <TreeItem
@@ -67,6 +79,7 @@ function Harness({
             data-testid={`item-${item.getId()}`}
             leafIcon={leafIcon}
             parentIcon={parentIcon}
+            className={itemClassName}
           />
         ),
       )}
@@ -161,3 +174,131 @@ describe("Tree component", () => {
     expect(root).toHaveStyle({ "--tree-indent": "20px" });
   });
 });
+
+describe("Tree data-slots", () => {
+  it("sets data-slot='tree-item' on each item", () => {
+    render(<Harness />);
+    const treeItems = document.querySelectorAll('[data-slot="tree-item"]');
+    expect(treeItems.length).toBeGreaterThan(0);
+  });
+
+  it("sets data-slot='tree-item-label' on item labels", () => {
+    render(<Harness />);
+    const labels = document.querySelectorAll('[data-slot="tree-item-label"]');
+    expect(labels.length).toBeGreaterThan(0);
+  });
+});
+
+describe("Tree classNames", () => {
+  it("applies className to TreeRoot", () => {
+    render(<Harness rootClassName="custom-root" />);
+    expect(document.querySelector('[data-slot="tree"]')).toHaveClass(
+      "custom-root",
+    );
+  });
+
+  it("applies className to TreeItem", () => {
+    render(<Harness itemClassName="custom-item" />);
+    const treeItems = document.querySelectorAll('[data-slot="tree-item"]');
+    for (const item of treeItems) {
+      expect(item).toHaveClass("custom-item");
+    }
+  });
+
+  it("applies className to TreeItemLabel", () => {
+    render(<Harness labelClassName="custom-label" />);
+    const labels = document.querySelectorAll('[data-slot="tree-item-label"]');
+    for (const label of labels) {
+      expect(label).toHaveClass("custom-label");
+    }
+  });
+});
+
+describe("Tree custom indent", () => {
+  it("uses custom indent value in CSS variable", () => {
+    render(<Harness indent={32} />);
+    expect(document.querySelector('[data-slot="tree"]')).toHaveStyle({
+      "--tree-indent": "32px",
+    });
+  });
+});
+
+describe("Tree selected state", () => {
+  it("sets data-selected on clicked item", async () => {
+    render(<Harness />);
+    const leaf = screen.getByTestId("item-leaf");
+    await userEvent.click(leaf);
+    expect(leaf).toHaveAttribute("data-selected", "true");
+  });
+});
+
+// ─── Context error paths ──────────────────────────────────────────────────────
+
+describe("Tree context errors", () => {
+  it("TreeDragLine throws when used outside a TreeRoot", () => {
+    const spy = vi.spyOn(console, "error").mockImplementation(() => {});
+    expect(() => render(<TreeDragLine />)).toThrow(
+      "Tree components must be used within a TreeRoot",
+    );
+    spy.mockRestore();
+  });
+
+  it("TreeItemLabel throws when used outside a TreeItem", () => {
+    const spy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    function BadUsage() {
+      const tree = useTree<Item>({
+        rootItemId: "root",
+        getItemName: (item) => item.getItemData().name,
+        isItemFolder: () => false,
+        dataLoader: {
+          getItem: (id) => items[id],
+          getChildren: () => [],
+        },
+        features: [syncDataLoaderFeature],
+      });
+      return (
+        <TreeRoot tree={tree}>
+          <TreeItemLabel>Orphan</TreeItemLabel>
+        </TreeRoot>
+      );
+    }
+
+    expect(() => render(<BadUsage />)).toThrow(
+      "TreeItemLabel must be used within a TreeItem",
+    );
+    spy.mockRestore();
+  });
+});
+
+// ─── TreeDragLine ─────────────────────────────────────────────────────────────
+
+describe("TreeDragLine", () => {
+  it("renders null when the tree has no active drag line style", () => {
+    function HarnessWithDragLine() {
+      const tree = useTree<Item>({
+        rootItemId: "root",
+        getItemName: (item) => item.getItemData().name,
+        isItemFolder: (item) => (item.getItemData().children?.length ?? 0) > 0,
+        dataLoader: {
+          getItem: (id) => items[id],
+          getChildren: (id) => items[id]?.children ?? [],
+        },
+        features: [syncDataLoaderFeature, selectionFeature, hotkeysCoreFeature],
+      });
+
+      return (
+        <TreeRoot tree={tree}>
+          <TreeDragLine />
+          {tree.getItems().map((item) => (
+            <TreeItem key={item.getId()} item={item} />
+          ))}
+        </TreeRoot>
+      );
+    }
+
+    render(<HarnessWithDragLine />);
+    // Without an active drag, getDragLineStyle returns undefined → renders null
+    expect(document.querySelector('[data-slot="tree-drag-line"]')).toBeNull();
+  });
+});