@godxjp/ui 6.0.0 → 6.0.2

package/src/components/data-display/__tests__/data-display.test.tsx

@@ -1,73 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { Inbox } from "lucide-react";
-import { renderWithUi, screen } from "@/test/render";
-import { EmptyState } from "../empty-state";
-import { Button } from "../../general/button";
-import { Badge } from "../badge";
-import { KeyValueGrid } from "../key-value-grid";
-import { StatusBadge } from "../status-badge";
-
-describe("EmptyState", () => {
-  it("renders title and description", () => {
-    renderWithUi(<EmptyState title="No data" description="Try changing filters" />);
-    expect(screen.getByRole("heading", { level: 3, name: "No data" })).toBeInTheDocument();
-    expect(screen.getByText("Try changing filters")).toBeInTheDocument();
-  });
-
-  it("renders icon and action", () => {
-    renderWithUi(<EmptyState icon={Inbox} title="Empty" action={<Button>Add</Button>} />);
-    expect(screen.getByRole("button", { name: "Add" })).toBeInTheDocument();
-  });
-});
-
-describe("Badge", () => {
-  it("renders children", () => {
-    renderWithUi(<Badge>New</Badge>);
-    expect(screen.getByText("New")).toBeInTheDocument();
-  });
-
-  it("success variant uses semantic success token (not green-*)", () => {
-    renderWithUi(<Badge variant="success">OK</Badge>);
-    const el = screen.getByText("OK");
-    expect(el.className).toContain("success");
-    expect(el.className).not.toMatch(/green-/);
-  });
-});
-
-describe("KeyValueGrid", () => {
-  it("renders label/value pairs via Item children", () => {
-    renderWithUi(
-      <KeyValueGrid>
-        <KeyValueGrid.Item label="ID">01HF</KeyValueGrid.Item>
-        <KeyValueGrid.Item label="Status">active</KeyValueGrid.Item>
-      </KeyValueGrid>,
-    );
-    expect(screen.getByText("ID")).toBeInTheDocument();
-    expect(screen.getByText("01HF")).toBeInTheDocument();
-    expect(screen.getByText("Status")).toBeInTheDocument();
-  });
-});
-
-describe("StatusBadge", () => {
-  it("maps known status to label", () => {
-    renderWithUi(<StatusBadge status="pending" />);
-    expect(screen.getByText("Chờ xử lý")).toBeInTheDocument();
-  });
-
-  it("pending tone uses warning token on root badge element", () => {
-    renderWithUi(<StatusBadge status="pending" />);
-    const text = screen.getByText("Chờ xử lý");
-    expect(text.parentElement?.className).toContain("warning");
-  });
-
-  it("scheduled tone uses info token on root badge element", () => {
-    renderWithUi(<StatusBadge status="scheduled" />);
-    const text = screen.getByText("Đã lên lịch");
-    expect(text.parentElement?.className).toContain("info");
-  });
-
-  it("falls back for unknown status", () => {
-    renderWithUi(<StatusBadge status="custom_unknown_xyz" />);
-    expect(screen.getByText("custom_unknown_xyz")).toBeInTheDocument();
-  });
-});

package/src/components/data-display/__tests__/data-table.test.tsx

@@ -1,84 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-import { renderWithUi, screen, userEvent } from "@/test/render";
-import { DataTable } from "../data-table";
-
-type Row = { id: string; name: string; status: string };
-
-const rows: Row[] = [
-  { id: "1", name: "Mai Nguyen", status: "active" },
-  { id: "2", name: "Ken Tanaka", status: "pending" },
-];
-
-const columns = [
-  { key: "name", header: "Khách hàng" },
-  { key: "status", header: "Trạng thái" },
-] as const;
-
-describe("DataTable", () => {
-  it("renders column headers and row data", () => {
-    renderWithUi(<DataTable data={rows} columns={[...columns]} getRowId={(row) => row.id} />);
-    expect(screen.getByRole("columnheader", { name: "Khách hàng" })).toBeInTheDocument();
-    expect(screen.getByText("Mai Nguyen")).toBeInTheDocument();
-    expect(screen.getByText("Ken Tanaka")).toBeInTheDocument();
-  });
-
-  it("applies ui-density class wrapper for token-based row height", () => {
-    const { container } = renderWithUi(
-      <DataTable data={rows} columns={[...columns]} getRowId={(row) => row.id} density="compact" />,
-    );
-    expect(container.querySelector(".ui-density-compact")).toBeInTheDocument();
-  });
-
-  it("supports row selection when selectable", async () => {
-    const user = userEvent.setup();
-    const onSelectChange = vi.fn();
-    renderWithUi(
-      <DataTable
-        data={rows}
-        columns={[...columns]}
-        getRowId={(row) => row.id}
-        selectable
-        selected={new Set()}
-        onSelectChange={onSelectChange}
-      />,
-    );
-    const rowCheckbox = screen.getAllByRole("checkbox", { name: /chọn dòng/i })[0];
-    await user.click(rowCheckbox);
-    expect(onSelectChange).toHaveBeenCalledWith(new Set(["1"]));
-  });
-
-  it("calls onRowClick when row is clicked", async () => {
-    const user = userEvent.setup();
-    const onRowClick = vi.fn();
-    renderWithUi(
-      <DataTable
-        data={rows}
-        columns={[...columns]}
-        getRowId={(row) => row.id}
-        onRowClick={onRowClick}
-      />,
-    );
-    await user.click(screen.getByText("Mai Nguyen"));
-    expect(onRowClick).toHaveBeenCalledWith(rows[0]);
-  });
-
-  it("shows bulk actions when rows selected", () => {
-    renderWithUi(
-      <DataTable
-        data={rows}
-        columns={[...columns]}
-        getRowId={(row) => row.id}
-        selectable
-        selected={new Set(["1"])}
-      >
-        <DataTable.Toolbar>
-          <DataTable.BulkActions>
-            <button type="button">Xóa</button>
-          </DataTable.BulkActions>
-        </DataTable.Toolbar>
-      </DataTable>,
-    );
-    expect(screen.getByRole("region", { name: /thao tác hàng loạt/i })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Xóa" })).toBeInTheDocument();
-  });
-});

package/src/components/data-display/__tests__/popover.test.tsx

@@ -1,92 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-import * as React from "react";
-import { renderWithUi, screen, userEvent } from "@/test/render";
-import { Button } from "../../general/button";
-import {
-  Popover,
-  PopoverContent,
-  PopoverDescription,
-  PopoverHeader,
-  PopoverTitle,
-  PopoverTrigger,
-} from "../popover";
-
-describe("Popover", () => {
-  it("shows content when trigger is clicked", async () => {
-    const user = userEvent.setup();
-    renderWithUi(
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button type="button">Mở popover</Button>
-        </PopoverTrigger>
-        <PopoverContent>Lọc HAWB nâng cao</PopoverContent>
-      </Popover>,
-    );
-    await user.click(screen.getByRole("button", { name: "Mở popover" }));
-    expect(screen.getByText("Lọc HAWB nâng cao")).toHaveAttribute("data-slot", "popover-content");
-  });
-
-  it("closes when pressing Escape", async () => {
-    const user = userEvent.setup();
-    renderWithUi(
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button type="button">Mở popover</Button>
-        </PopoverTrigger>
-        <PopoverContent>Lọc HAWB nâng cao</PopoverContent>
-      </Popover>,
-    );
-    await user.click(screen.getByRole("button", { name: "Mở popover" }));
-    expect(screen.getByText("Lọc HAWB nâng cao")).toBeInTheDocument();
-    await user.keyboard("{Escape}");
-    expect(screen.queryByText("Lọc HAWB nâng cao")).not.toBeInTheDocument();
-  });
-
-  it("calls onOpenChange in controlled mode", async () => {
-    const user = userEvent.setup();
-    const onOpenChange = vi.fn();
-
-    function Demo() {
-      const [open, setOpen] = React.useState(false);
-      return (
-        <Popover
-          open={open}
-          onOpenChange={(next) => {
-            setOpen(next);
-            onOpenChange(next);
-          }}
-        >
-          <PopoverTrigger asChild>
-            <Button type="button">Controlled</Button>
-          </PopoverTrigger>
-          <PopoverContent>Panel</PopoverContent>
-        </Popover>
-      );
-    }
-
-    renderWithUi(<Demo />);
-    await user.click(screen.getByRole("button", { name: "Controlled" }));
-    expect(onOpenChange).toHaveBeenCalledWith(true);
-    expect(screen.getByText("Panel")).toBeInTheDocument();
-  });
-
-  it("renders shadcn header slots", async () => {
-    const user = userEvent.setup();
-    renderWithUi(
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button type="button">Details</Button>
-        </PopoverTrigger>
-        <PopoverContent>
-          <PopoverHeader>
-            <PopoverTitle>Title</PopoverTitle>
-            <PopoverDescription>Description</PopoverDescription>
-          </PopoverHeader>
-        </PopoverContent>
-      </Popover>,
-    );
-    await user.click(screen.getByRole("button", { name: "Details" }));
-    expect(screen.getByText("Title")).toHaveAttribute("data-slot", "popover-title");
-    expect(screen.getByText("Description")).toHaveAttribute("data-slot", "popover-description");
-  });
-});

package/src/components/data-display/__tests__/scroll-area-collapsible.test.tsx

@@ -1,66 +0,0 @@
-import { describe, expect, it } from "vitest";
-import * as React from "react";
-import { renderWithUi, screen, userEvent } from "@/test/render";
-import { Button } from "../../general/button";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../collapsible";
-import { ScrollArea } from "../scroll-area";
-
-describe("ScrollArea", () => {
-  it("renders scrollable content", () => {
-    renderWithUi(
-      <ScrollArea className="h-24 w-48">
-        <div>
-          {Array.from({ length: 20 }, (_, i) => (
-            <p key={i}>Dòng {i + 1}</p>
-          ))}
-        </div>
-      </ScrollArea>,
-    );
-    expect(screen.getByText("Dòng 1")).toBeInTheDocument();
-    expect(screen.getByText("Dòng 20")).toBeInTheDocument();
-  });
-});
-
-describe("Collapsible", () => {
-  it("toggles content visibility", async () => {
-    const user = userEvent.setup();
-    renderWithUi(
-      <Collapsible>
-        <CollapsibleTrigger asChild>
-          <Button type="button">Mở rộng</Button>
-        </CollapsibleTrigger>
-        <CollapsibleContent>Chi tiết lô hàng GX-001</CollapsibleContent>
-      </Collapsible>,
-    );
-
-    expect(screen.queryByText("Chi tiết lô hàng GX-001")).not.toBeInTheDocument();
-    await user.click(screen.getByRole("button", { name: "Mở rộng" }));
-    expect(screen.getByText("Chi tiết lô hàng GX-001")).toBeInTheDocument();
-    await user.click(screen.getByRole("button", { name: "Mở rộng" }));
-    expect(screen.queryByText("Chi tiết lô hàng GX-001")).not.toBeInTheDocument();
-  });
-
-  it("supports controlled open state", async () => {
-    const user = userEvent.setup();
-    function Demo() {
-      const [open, setOpen] = React.useState(false);
-      return (
-        <>
-          <Button type="button" onClick={() => setOpen(true)}>
-            Mở ngoài
-          </Button>
-          <Collapsible open={open} onOpenChange={setOpen}>
-            <CollapsibleTrigger asChild>
-              <Button type="button">Trigger</Button>
-            </CollapsibleTrigger>
-            <CollapsibleContent>Nội dung controlled</CollapsibleContent>
-          </Collapsible>
-        </>
-      );
-    }
-
-    renderWithUi(<Demo />);
-    await user.click(screen.getByRole("button", { name: "Mở ngoài" }));
-    expect(screen.getByText("Nội dung controlled")).toBeInTheDocument();
-  });
-});

package/src/components/data-display/badge.tsx

@@ -1,27 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../../lib/utils";
-import { toneSuccessClass, toneWarningClass } from "../../lib/control-styles";
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground",
-        secondary: "border-transparent bg-secondary text-secondary-foreground",
-        destructive: "border-transparent bg-destructive text-destructive-foreground",
-        outline: "text-foreground",
-        success: cn("border-transparent", toneSuccessClass),
-        warning: cn("border-transparent", toneWarningClass),
-      },
-    },
-    defaultVariants: { variant: "default" },
-  },
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
-
-export function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
-}

package/src/components/data-display/card.tsx

@@ -1,194 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "../../lib/utils";
-
-type CardSize = "default" | "compact";
-/** Semantic 3px left-edge accent stripe. */
-type CardAccent = "primary" | "success" | "warning" | "info" | "attention" | "destructive";
-/** Surface fill — plain card, muted band, borderless outline, or emphasized featured ring. */
-type CardVariant = "default" | "muted" | "outline" | "featured";
-/** Padding density — base 16px · tight 12px · cozy 20px. */
-type CardDensity = "tight" | "cozy";
-
-const cardVariants = cva("group/card border", {
-  variants: {
-    size: {
-      default: "",
-      compact: "",
-    },
-  },
-  defaultVariants: { size: "default" },
-});
-
-export type CardProps = React.HTMLAttributes<HTMLDivElement> &
-  VariantProps<typeof cardVariants> & {
-    size?: CardSize;
-    accent?: CardAccent;
-    variant?: CardVariant;
-    density?: CardDensity;
-  };
-
-export const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  ({ className, size = "default", accent, variant, density, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(cardVariants({ size }), className)}
-      data-slot="card"
-      data-size={size === "compact" ? "compact" : undefined}
-      data-accent={accent}
-      data-variant={variant && variant !== "default" ? variant : undefined}
-      data-density={density}
-      {...props}
-    />
-  ),
-);
-Card.displayName = "Card";
-
-/** Full-bleed cover media — first child; header below uses section top (φ⁰), not shell. */
-export type CardCoverProps = React.HTMLAttributes<HTMLDivElement>;
-
-export const CardCover = React.forwardRef<HTMLDivElement, CardCoverProps>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} data-slot="card-cover" className={cn("ui-card-cover", className)} {...props} />
-  ),
-);
-CardCover.displayName = "CardCover";
-
-export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
-  /** Muted background + border-bottom — section band (mirror footer `separated`). */
-  banded?: boolean;
-};
-
-export const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(
-  ({ className, banded, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-slot="card-header"
-      data-banded={banded ? "" : undefined}
-      className={cn(banded && "ui-card-header--banded", className)}
-      {...props}
-    />
-  ),
-);
-CardHeader.displayName = "CardHeader";
-
-export const CardTitle = React.forwardRef<
-  HTMLHeadingElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, children, ...props }, ref) => (
-  <h3 ref={ref} data-slot="card-title" className={className} {...props}>
-    {children}
-  </h3>
-));
-CardTitle.displayName = "CardTitle";
-
-export const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p ref={ref} data-slot="card-description" className={className} {...props} />
-));
-CardDescription.displayName = "CardDescription";
-
-export type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {
-  /** Edge-to-edge body (tables, tabs list). Horizontal padding removed. */
-  flush?: boolean;
-  /** No gap after header — pair with tabs / flush toolbar. */
-  tight?: boolean;
-  /** No header above — top padding matches card shell. */
-  solo?: boolean;
-};
-
-export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
-  ({ className, flush, tight, solo, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-slot="card-content"
-      data-flush={flush ? "" : undefined}
-      data-tight={tight ? "" : undefined}
-      data-solo={solo ? "" : undefined}
-      className={className}
-      {...props}
-    />
-  ),
-);
-CardContent.displayName = "CardContent";
-
-export type CardFooterProps = React.HTMLAttributes<HTMLDivElement> & {
-  /** Top border + symmetric action band — form Save/Cancel, table summary. */
-  separated?: boolean;
-  /** Full-bleed footer (Ant Design `actions` bar). */
-  flush?: boolean;
-};
-
-export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(
-  ({ className, separated, flush, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-slot="card-footer"
-      data-separated={separated ? "" : undefined}
-      data-flush={flush ? "" : undefined}
-      className={className}
-      {...props}
-    />
-  ),
-);
-CardFooter.displayName = "CardFooter";
-
-export type CardStatProps = React.HTMLAttributes<HTMLDivElement> &
-  VariantProps<typeof cardVariants> & {
-    label: React.ReactNode;
-    value: React.ReactNode;
-    hint?: React.ReactNode;
-    /** Optional compact trend text beside the value. Avoid badge-like deltas. */
-    delta?: React.ReactNode;
-    /** KPI layout: stacked = design default, inline = label left / value right. */
-    layout?: "stacked" | "inline";
-    /** Align the metric group. */
-    align?: "start" | "end";
-  };
-
-/** KPI / stat tile — token-driven layout aligned to dashboard KPI cards. */
-export function CardStat({
-  label,
-  value,
-  hint,
-  delta,
-  layout = "stacked",
-  align = "start",
-  className,
-  size = "compact",
-  ...props
-}: CardStatProps) {
-  return (
-    <Card
-      size={size ?? "compact"}
-      className={className}
-      data-stat-card=""
-      data-stat-layout={layout}
-      data-stat-align={align}
-      {...props}
-    >
-      <div data-slot="card-stat-body">
-        <div data-slot="card-stat-label">{label}</div>
-        {hint && layout === "inline" ? <div data-slot="card-stat-hint">{hint}</div> : null}
-      </div>
-      <div>
-        <div data-slot="card-stat-value-row">
-          <span data-slot="card-stat-value">{value}</span>
-          {delta ? <span data-slot="card-stat-delta">{delta}</span> : null}
-        </div>
-        {hint && layout !== "inline" ? <div data-slot="card-stat-hint">{hint}</div> : null}
-      </div>
-    </Card>
-  );
-}
-
-/** Header actions slot — pair with `CardHeader className="flex flex-row …"`. */
-export const CardAction = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} data-slot="card-action" className={className} {...props} />
-  ),
-);
-CardAction.displayName = "CardAction";

package/src/components/data-display/code-badge.tsx

@@ -1,28 +0,0 @@
-import type { ComponentType, SVGProps } from "react";
-import { Hash, ShoppingBag, Truck } from "lucide-react";
-
-export type CodeBadgeKind = "internal" | "seller" | "yamato";
-
-export type CodeBadgeProps = {
-  kind: CodeBadgeKind;
-  value: string;
-};
-
-const codeBadgeConfig = {
-  internal: { label: "INT", icon: Hash },
-  seller: { label: "SLR", icon: ShoppingBag },
-  yamato: { label: "YMT", icon: Truck },
-} satisfies Record<CodeBadgeKind, { label: string; icon: ComponentType<SVGProps<SVGSVGElement>> }>;
-
-export function CodeBadge({ kind, value }: CodeBadgeProps) {
-  const config = codeBadgeConfig[kind] ?? codeBadgeConfig.internal;
-  const Icon = config.icon;
-
-  return (
-    <span className="ui-code-badge" data-kind={kind}>
-      <span className="ui-code-badge-label">{config.label}</span>
-      <Icon aria-hidden="true" />
-      <span className="ui-code-badge-value">{value}</span>
-    </span>
-  );
-}

package/src/components/data-display/collapsible.tsx

@@ -1,5 +0,0 @@
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-
-export const Collapsible = CollapsiblePrimitive.Root;
-export const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
-export const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;