@godxjp/ui 6.0.0 → 6.0.1

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

@@ -1,127 +0,0 @@
-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

@@ -1,290 +0,0 @@
-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

@@ -1,94 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

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