@godxjp/ui 5.0.2 → 6.0.0

package/src/components/feedback/__tests__/alert.test.tsx

@@ -0,0 +1,127 @@
+import { describe, expect, it, vi } from "vitest";
+import { renderWithUi, screen, userEvent } from "@/test/render";
+import { Button } from "../../general/button";
+import { Alert, AlertActions, AlertContent, AlertDescription, AlertTitle } from "../alert";
+
+describe("Alert", () => {
+  it("renders with role=alert and variant styling", () => {
+    renderWithUi(
+      <Alert variant="warning">
+        <AlertContent>
+          <AlertTitle>Pin lithium</AlertTitle>
+          <AlertDescription>MSDS bắt buộc trước khi xuất kho.</AlertDescription>
+        </AlertContent>
+      </Alert>,
+    );
+    const alert = screen.getByRole("alert");
+    expect(alert).toHaveAttribute("data-variant", "warning");
+    expect(screen.getByText("Pin lithium")).toBeInTheDocument();
+    expect(screen.getByText(/MSDS/)).toBeInTheDocument();
+  });
+
+  it("renders destructive variant for API errors", () => {
+    renderWithUi(
+      <Alert variant="destructive">
+        <AlertContent>
+          <AlertTitle>Không tải được</AlertTitle>
+          <AlertDescription>503 Service Unavailable</AlertDescription>
+        </AlertContent>
+      </Alert>,
+    );
+    expect(screen.getByRole("alert")).toHaveAttribute("data-variant", "destructive");
+    expect(screen.getByText("Không tải được")).toHaveAttribute("data-slot", "alert-title");
+  });
+
+  it("renders actions slot", async () => {
+    const user = userEvent.setup();
+    const onAction = vi.fn();
+    renderWithUi(
+      <Alert variant="default">
+        <AlertContent>
+          <AlertTitle>Bảo trì</AlertTitle>
+          <AlertDescription>Pub/Sub emulator restart lúc 02:00 JST.</AlertDescription>
+        </AlertContent>
+        <AlertActions>
+          <Button size="sm" onClick={onAction}>
+            Xem lịch
+          </Button>
+        </AlertActions>
+      </Alert>,
+    );
+    await user.click(screen.getByRole("button", { name: "Xem lịch" }));
+    expect(onAction).toHaveBeenCalledOnce();
+  });
+
+  it("calls onDismiss when dismiss control clicked", async () => {
+    const user = userEvent.setup();
+    const onDismiss = vi.fn();
+    renderWithUi(
+      <Alert variant="success" onDismiss={onDismiss}>
+        <AlertContent>
+          <AlertTitle>Đã lưu template Zalo</AlertTitle>
+          <AlertDescription>Thay đổi có hiệu lực ngay.</AlertDescription>
+        </AlertContent>
+      </Alert>,
+    );
+    await user.click(screen.getByRole("button", { name: "Dismiss" }));
+    expect(onDismiss).toHaveBeenCalledOnce();
+  });
+
+  it("hides icon when icon={false}", () => {
+    const { container } = renderWithUi(
+      <Alert variant="warning" icon={false}>
+        <AlertContent>
+          <AlertTitle>No icon</AlertTitle>
+        </AlertContent>
+      </Alert>,
+    );
+    expect(container.querySelector("svg")).toBeNull();
+  });
+
+  it("renders success variant styling", () => {
+    renderWithUi(
+      <Alert variant="success">
+        <AlertContent>
+          <AlertTitle>Template saved</AlertTitle>
+          <AlertDescription>Zalo OA preview ready.</AlertDescription>
+        </AlertContent>
+      </Alert>,
+    );
+    expect(screen.getByRole("alert")).toHaveAttribute("data-variant", "success");
+  });
+
+  it("renders default variant without destructive classes", () => {
+    renderWithUi(
+      <Alert variant="default">
+        <AlertContent>
+          <AlertTitle>Maintenance</AlertTitle>
+        </AlertContent>
+      </Alert>,
+    );
+    const alert = screen.getByRole("alert");
+    expect(alert).toHaveAttribute("data-variant", "default");
+  });
+});
+
+describe("Alert.QueryError", () => {
+  it("shows message and retry", async () => {
+    const user = userEvent.setup();
+    const onRetry = vi.fn();
+    renderWithUi(<Alert.QueryError error={new Error("boom")} onRetry={onRetry} />);
+    expect(screen.getByRole("alert")).toBeInTheDocument();
+    expect(screen.getByText(/boom/)).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: /thử lại/i }));
+    expect(onRetry).toHaveBeenCalledOnce();
+  });
+
+  it("omits retry button when onRetry is omitted", () => {
+    renderWithUi(<Alert.QueryError error="Validation failed: declared_value must be > 0" />);
+    expect(screen.getByRole("alert")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /thử lại/i })).not.toBeInTheDocument();
+  });
+
+  it("uses destructive Alert styling", () => {
+    renderWithUi(<Alert.QueryError error={new Error("503")} onRetry={() => undefined} />);
+    expect(screen.getByRole("alert")).toHaveAttribute("data-variant", "destructive");
+  });
+});

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

@@ -0,0 +1,290 @@
+import * as React from "react";
+import { describe, expect, it, vi } from "vitest";
+import { renderWithUi, screen, userEvent, waitFor } from "@/test/render";
+import {
+  Dialog,
+  DialogAction,
+  DialogCancel,
+  DialogConfirm,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../dialog";
+import { Button } from "../../general/button";
+
+function PhraseResetHarness() {
+  const [open, setOpen] = React.useState(true);
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Reopen
+      </button>
+      <DialogConfirm
+        open={open}
+        onOpenChange={setOpen}
+        title="Purge?"
+        confirmPhrase="DELETE"
+        confirmLabel="Purge"
+        onConfirm={() => undefined}
+      />
+    </>
+  );
+}
+
+describe("Dialog form mode", () => {
+  it("opens on trigger click and closes via escape", async () => {
+    const user = userEvent.setup();
+    renderWithUi(
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button type="button">Mở</Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Xác nhận manifest</DialogTitle>
+            <DialogDescription>Chốt 12 kiện Osaka?</DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button type="button" variant="ghost">
+              Hủy
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>,
+    );
+
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Mở" }));
+    expect(screen.getByRole("dialog")).toHaveAttribute("data-slot", "dialog-content");
+    expect(screen.getByText("Chốt 12 kiện Osaka?")).toBeInTheDocument();
+    await user.keyboard("{Escape}");
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("calls onOpenChange when controlled", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    renderWithUi(
+      <Dialog open onOpenChange={onOpenChange}>
+        <DialogContent>
+          <DialogTitle>Controlled</DialogTitle>
+        </DialogContent>
+      </Dialog>,
+    );
+    await user.keyboard("{Escape}");
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+});
+
+describe("Dialog confirm mode (compound)", () => {
+  it("uses alertdialog role and has no close icon", () => {
+    renderWithUi(
+      <Dialog mode="confirm" open onOpenChange={() => undefined}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Proceed?</DialogTitle>
+            <DialogDescription>This cannot be undone.</DialogDescription>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>,
+    );
+    expect(screen.getByRole("alertdialog")).toHaveAttribute("data-slot", "dialog-content");
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /close/i })).not.toBeInTheDocument();
+  });
+
+  it("calls onOpenChange(false) when cancel clicked", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    renderWithUi(
+      <Dialog mode="confirm" open onOpenChange={onOpenChange}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Proceed?</DialogTitle>
+          </DialogHeader>
+          <DialogFooter>
+            <DialogCancel asChild>
+              <Button variant="ghost">Cancel</Button>
+            </DialogCancel>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>,
+    );
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("renders DialogAction", () => {
+    renderWithUi(
+      <Dialog mode="confirm" open onOpenChange={() => undefined}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Seal manifest</DialogTitle>
+          </DialogHeader>
+          <DialogFooter>
+            <DialogAction asChild>
+              <Button>Seal</Button>
+            </DialogAction>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>,
+    );
+    expect(screen.getByRole("button", { name: "Seal" })).toBeInTheDocument();
+  });
+});
+
+describe("Dialog.Confirm preset", () => {
+  it("renders alertdialog with title and description", () => {
+    renderWithUi(
+      <DialogConfirm
+        open
+        onOpenChange={() => undefined}
+        title="Chốt manifest?"
+        description="47 kiện sẽ bị khóa."
+        onConfirm={() => undefined}
+      />,
+    );
+
+    expect(screen.getByRole("alertdialog")).toBeInTheDocument();
+    expect(screen.getByText("Chốt manifest?")).toBeInTheDocument();
+    expect(screen.getByText("47 kiện sẽ bị khóa.")).toBeInTheDocument();
+  });
+
+  it("calls onConfirm and closes when confirmed", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    const onConfirm = vi.fn();
+    renderWithUi(
+      <DialogConfirm
+        open
+        onOpenChange={onOpenChange}
+        title="Confirm?"
+        description="Sure?"
+        onConfirm={onConfirm}
+      />,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Tiếp tục" }));
+    await waitFor(() => {
+      expect(onConfirm).toHaveBeenCalledOnce();
+    });
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("closes on cancel without calling onConfirm", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    const onConfirm = vi.fn();
+    renderWithUi(
+      <DialogConfirm open onOpenChange={onOpenChange} title="Confirm?" onConfirm={onConfirm} />,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Hủy" }));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+    expect(onConfirm).not.toHaveBeenCalled();
+  });
+
+  it("disables both buttons when pending", () => {
+    renderWithUi(
+      <DialogConfirm
+        open
+        onOpenChange={() => undefined}
+        title="Wait"
+        pending
+        onConfirm={() => undefined}
+      />,
+    );
+    expect(screen.getByRole("button", { name: "Đang xử lý…" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Hủy" })).toBeDisabled();
+  });
+
+  it("keeps dialog open when keepOpenOnConfirm is true", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    renderWithUi(
+      <DialogConfirm
+        open
+        onOpenChange={onOpenChange}
+        title="Next step"
+        keepOpenOnConfirm
+        onConfirm={() => undefined}
+      />,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Tiếp tục" }));
+    expect(onOpenChange).not.toHaveBeenCalledWith(false);
+  });
+
+  describe("confirmPhrase", () => {
+    it("shows type-to-confirm field and defaults confirm label to delete", () => {
+      renderWithUi(
+        <DialogConfirm
+          open
+          onOpenChange={() => undefined}
+          title="Purge?"
+          confirmPhrase="DELETE"
+          onConfirm={() => undefined}
+        />,
+      );
+
+      expect(screen.getByPlaceholderText("DELETE")).toBeInTheDocument();
+      expect(screen.getByRole("button", { name: "Xóa" })).toBeDisabled();
+    });
+
+    it("enables confirm only when phrase matches exactly", async () => {
+      const user = userEvent.setup();
+      renderWithUi(
+        <DialogConfirm
+          open
+          onOpenChange={() => undefined}
+          title="Purge?"
+          confirmPhrase="DELETE"
+          confirmLabel="Purge"
+          onConfirm={() => undefined}
+        />,
+      );
+
+      const confirmBtn = screen.getByRole("button", { name: "Purge" });
+      const input = screen.getByPlaceholderText("DELETE");
+      expect(confirmBtn).toBeDisabled();
+
+      await user.type(input, "DELET");
+      expect(confirmBtn).toBeDisabled();
+
+      await user.type(input, "E");
+      expect(confirmBtn).toBeEnabled();
+    });
+
+    it("clears typed phrase when dialog closes and reopens", async () => {
+      const user = userEvent.setup();
+      renderWithUi(<PhraseResetHarness />);
+
+      await user.type(screen.getByPlaceholderText("DELETE"), "DELETE");
+      await user.click(screen.getByRole("button", { name: "Hủy" }));
+
+      await user.click(screen.getByRole("button", { name: "Reopen" }));
+      expect(screen.getByPlaceholderText("DELETE")).toHaveValue("");
+      expect(screen.getByRole("button", { name: "Purge" })).toBeDisabled();
+    });
+  });
+});
+
+describe("Dialog namespace", () => {
+  it("exposes Confirm preset on Dialog.Confirm", () => {
+    expect(Dialog.Confirm).toBe(DialogConfirm);
+  });
+
+  it("supports shadcn showCloseButton naming", () => {
+    renderWithUi(
+      <Dialog open onOpenChange={() => undefined}>
+        <DialogContent showCloseButton={false}>
+          <DialogTitle>No close</DialogTitle>
+        </DialogContent>
+      </Dialog>,
+    );
+    expect(screen.queryByRole("button", { name: /close/i })).not.toBeInTheDocument();
+  });
+});

package/src/components/feedback/__tests__/sheet.test.tsx

@@ -0,0 +1,94 @@
+import { describe, expect, it } from "vitest";
+import { renderWithUi, screen, userEvent } from "@/test/render";
+import { Button } from "../../general/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "../sheet";
+
+describe("Sheet", () => {
+  it("opens side panel from trigger", async () => {
+    const user = userEvent.setup();
+    renderWithUi(
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button type="button">Bộ lọc</Button>
+        </SheetTrigger>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Lọc khách CRM</SheetTitle>
+          </SheetHeader>
+        </SheetContent>
+      </Sheet>,
+    );
+    await user.click(screen.getByRole("button", { name: "Bộ lọc" }));
+    expect(screen.getByRole("dialog", { name: "Lọc khách CRM" })).toHaveAttribute(
+      "data-slot",
+      "sheet-content",
+    );
+  });
+
+  it("renders description inside panel", async () => {
+    const user = userEvent.setup();
+    renderWithUi(
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button type="button">Chi tiết</Button>
+        </SheetTrigger>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Đơn hàng #1024</SheetTitle>
+            <SheetDescription>Xem thông tin vận chuyển</SheetDescription>
+          </SheetHeader>
+        </SheetContent>
+      </Sheet>,
+    );
+    await user.click(screen.getByRole("button", { name: "Chi tiết" }));
+    expect(screen.getByText("Xem thông tin vận chuyển")).toBeInTheDocument();
+  });
+
+  it("closes when pressing Escape", async () => {
+    const user = userEvent.setup();
+    renderWithUi(
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button type="button">Bộ lọc</Button>
+        </SheetTrigger>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Lọc khách CRM</SheetTitle>
+          </SheetHeader>
+        </SheetContent>
+      </Sheet>,
+    );
+    await user.click(screen.getByRole("button", { name: "Bộ lọc" }));
+    expect(screen.getByRole("dialog", { name: "Lọc khách CRM" })).toBeInTheDocument();
+    await user.keyboard("{Escape}");
+    expect(screen.queryByRole("dialog", { name: "Lọc khách CRM" })).not.toBeInTheDocument();
+  });
+
+  it("exposes footer slot and optional close button", async () => {
+    const user = userEvent.setup();
+    renderWithUi(
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button type="button">Footer</Button>
+        </SheetTrigger>
+        <SheetContent showCloseButton={false}>
+          <SheetHeader>
+            <SheetTitle>Panel</SheetTitle>
+          </SheetHeader>
+          <SheetFooter>Actions</SheetFooter>
+        </SheetContent>
+      </Sheet>,
+    );
+    await user.click(screen.getByRole("button", { name: "Footer" }));
+    expect(screen.getByText("Actions")).toHaveAttribute("data-slot", "sheet-footer");
+    expect(screen.queryByRole("button", { name: /close/i })).not.toBeInTheDocument();
+  });
+});

package/src/components/feedback/__tests__/skeleton.test.tsx

@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import { renderWithUi } from "@/test/render";
+import { SkeletonCard, SkeletonDetail, SkeletonRows, SkeletonTable } from "../skeleton";
+
+describe("Skeleton", () => {
+  it("SkeletonRows marks busy state", () => {
+    const { container } = renderWithUi(<SkeletonRows rows={2} columns={3} />);
+    expect(container.querySelector("[aria-busy='true']")).toBeInTheDocument();
+  });
+
+  it("SkeletonTable renders header and body placeholders", () => {
+    const { container } = renderWithUi(<SkeletonTable rows={3} columns={4} />);
+    expect(container.querySelector(".ui-skeleton-table")).toBeInTheDocument();
+  });
+
+  it("SkeletonDetail renders title blocks", () => {
+    const { container } = renderWithUi(<SkeletonDetail />);
+    expect(container.querySelectorAll(".ui-skeleton-block").length).toBeGreaterThan(0);
+  });
+
+  it("SkeletonCard renders stat tile shape", () => {
+    const { container } = renderWithUi(<SkeletonCard />);
+    expect(container.querySelector(".ui-skeleton-card")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { renderWithUi, screen } from "@/test/render";
+import { Toaster } from "../sonner";
+import { toast, useToast } from "../use-toast";
+
+const sonnerMock = vi.hoisted(() => {
+  const fn = vi.fn();
+  return Object.assign(fn, {
+    success: vi.fn(),
+    error: vi.fn(),
+    dismiss: vi.fn(),
+  });
+});
+
+vi.mock("sonner", () => ({
+  toast: sonnerMock,
+  Toaster: ({ className, ...props }: { className?: string; children?: React.ReactNode }) => (
+    <div data-testid="sonner-mock" className={className} {...props} />
+  ),
+}));
+
+describe("Toaster", () => {
+  it("renders Sonner container", () => {
+    renderWithUi(<Toaster />);
+    expect(screen.getByTestId("sonner-mock")).toBeInTheDocument();
+  });
+});
+
+describe("toast adapter", () => {
+  beforeEach(() => {
+    sonnerMock.mockClear();
+    sonnerMock.success.mockClear();
+    sonnerMock.error.mockClear();
+  });
+
+  it("maps legacy success variant to sonner.success", () => {
+    toast({ title: "Đã lưu manifest", variant: "success" });
+    expect(sonnerMock.success).toHaveBeenCalledWith("Đã lưu manifest", expect.any(Object));
+  });
+
+  it("maps legacy destructive variant to sonner.error", () => {
+    toast({ title: "Lỗi xuất kho", variant: "destructive" });
+    expect(sonnerMock.error).toHaveBeenCalledWith("Lỗi xuất kho", expect.any(Object));
+  });
+
+  it("useToast exposes legacy toast helper", () => {
+    const { toast: legacy } = useToast();
+    legacy({ title: "Ping", variant: "default" });
+    expect(sonnerMock).toHaveBeenCalledWith("Ping", expect.any(Object));
+  });
+});