@godxjp/ui 5.0.2 → 6.0.0

package/src/components/data-entry/__tests__/label-select.test.tsx

@@ -0,0 +1,62 @@
+import { describe, expect, it, vi } from "vitest";
+import { renderWithUi, screen, userEvent, waitFor } from "@/test/render";
+import { Label } from "../label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select";
+
+describe("Label", () => {
+  it("associates with control via htmlFor", () => {
+    renderWithUi(
+      <>
+        <Label htmlFor="hawb">Mã HAWB</Label>
+        <input id="hawb" aria-label="Mã HAWB" />
+      </>,
+    );
+    expect(screen.getByText("Mã HAWB")).toHaveAttribute("for", "hawb");
+    expect(screen.getByText("Mã HAWB")).toHaveAttribute("data-slot", "label");
+  });
+});
+
+describe("Select", () => {
+  it("opens listbox and selects an option", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderWithUi(
+      <Select onValueChange={onChange}>
+        <SelectTrigger aria-label="Hub">
+          <SelectValue placeholder="Chọn hub" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="osaka">Osaka</SelectItem>
+          <SelectItem value="tokyo">Tokyo</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+
+    await user.click(screen.getByRole("combobox", { name: "Hub" }));
+    await waitFor(() => {
+      expect(screen.getByRole("option", { name: "Osaka" })).toHaveAttribute(
+        "data-slot",
+        "select-item",
+      );
+    });
+    await user.click(screen.getByRole("option", { name: "Osaka" }));
+    expect(onChange).toHaveBeenCalledWith("osaka");
+  });
+
+  it("SelectTrigger uses ui-control from control-styles", () => {
+    renderWithUi(
+      <Select>
+        <SelectTrigger aria-label="Hub">
+          <SelectValue placeholder="Chọn hub" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="osaka">Osaka</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+    const trigger = screen.getByRole("combobox", { name: "Hub" });
+    expect(trigger).toHaveClass("ui-control");
+    expect(trigger).toHaveAttribute("data-slot", "select-trigger");
+    expect(trigger).toHaveAttribute("data-size", "default");
+  });
+});

package/src/components/data-entry/__tests__/pickers.test.tsx

@@ -0,0 +1,74 @@
+import { describe, expect, it, vi } from "vitest";
+import { renderWithUi, screen, userEvent } from "@/test/render";
+import { Switch } from "../switch";
+import { Slider } from "../slider";
+import { ColorPicker } from "../color-picker";
+import { TimePicker } from "../time-picker";
+
+describe("Switch", () => {
+  it("toggles checked state", async () => {
+    const user = userEvent.setup();
+    renderWithUi(<Switch aria-label="Notify" />);
+    const control = screen.getByRole("switch", { name: "Notify" });
+    expect(control).toHaveAttribute("data-slot", "switch");
+    expect(control).toHaveAttribute("data-size", "default");
+    expect(control).toHaveAttribute("data-state", "unchecked");
+    await user.click(control);
+    expect(control).toHaveAttribute("data-state", "checked");
+  });
+});
+
+describe("Slider", () => {
+  it("renders thumb control", () => {
+    const { container } = renderWithUi(<Slider defaultValue={[40]} aria-label="Percent" />);
+    expect(container.querySelector('[data-slot="slider"]')).toBeInTheDocument();
+    expect(screen.getAllByRole("slider")[0]).toHaveAttribute("data-slot", "slider-thumb");
+  });
+});
+
+describe("ColorPicker", () => {
+  it("calls onChange with hex value on blur", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderWithUi(<ColorPicker value="#2563eb" onChange={onChange} />);
+    const hexInput = screen.getByRole("textbox");
+    await user.clear(hexInput);
+    await user.type(hexInput, "#ff0000");
+    await user.tab();
+    expect(onChange).toHaveBeenCalledWith("#ff0000");
+  });
+});
+
+describe("TimePicker", () => {
+  it("renders trigger button with clock and formatted time", () => {
+    renderWithUi(<TimePicker defaultValue="09:30" id="cutoff" />);
+    expect(screen.getByRole("button", { name: /09:30|9:30/i })).toBeInTheDocument();
+  });
+
+  it("opens panel and selects minute", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderWithUi(<TimePicker defaultValue="09:00" onChange={onChange} minuteStep={15} id="t" />);
+
+    await user.click(screen.getByRole("button"));
+    expect(screen.getByText("Giờ")).toBeInTheDocument();
+    expect(screen.getByText("Phút")).toBeInTheDocument();
+
+    const minute45 = screen
+      .getAllByRole("button", { name: "45" })
+      .find((el) => el.closest(".h-52"));
+    expect(minute45).toBeDefined();
+    await user.click(minute45!);
+    expect(onChange).toHaveBeenCalledWith("09:45");
+  });
+
+  it("opens scroll columns for hour and minute", async () => {
+    const user = userEvent.setup();
+    renderWithUi(<TimePicker defaultValue="09:00" minuteStep={15} id="t" />);
+
+    await user.click(screen.getByRole("button"));
+    expect(screen.getByText("Giờ")).toBeInTheDocument();
+    expect(screen.getByText("Phút")).toBeInTheDocument();
+    expect(screen.getByLabelText("Nhập giờ HH:mm")).toBeInTheDocument();
+  });
+});

package/src/components/data-entry/__tests__/radio.test.tsx

@@ -0,0 +1,46 @@
+import { describe, expect, it, vi } from "vitest";
+import { renderWithUi, screen, userEvent } from "@/test/render";
+import { Radio } from "../radio";
+
+const shipMethods = [
+  { label: "Air — 3–5 ngày", value: "air" },
+  { label: "Sea — 14–21 ngày", value: "sea" },
+  { label: "Express Osaka", value: "express", disabled: true },
+];
+
+describe("Radio.Group", () => {
+  it("renders radiogroup from options", () => {
+    renderWithUi(<Radio.Group options={shipMethods} defaultValue="air" aria-label="Ship method" />);
+    expect(screen.getByRole("radiogroup")).toHaveAttribute("data-slot", "radio-group");
+    expect(screen.getByRole("radio", { name: /Air/ })).toHaveAttribute(
+      "data-slot",
+      "radio-group-item",
+    );
+    expect(screen.getByRole("radio", { name: /Air/ })).toBeChecked();
+  });
+
+  it("calls onValueChange when selection changes", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    renderWithUi(
+      <Radio.Group options={shipMethods} defaultValue="air" onValueChange={onValueChange} />,
+    );
+
+    await user.click(screen.getByRole("radio", { name: /Sea/ }));
+    expect(onValueChange).toHaveBeenCalledWith("sea");
+  });
+
+  it("skips disabled options", async () => {
+    const user = userEvent.setup();
+    renderWithUi(<Radio.Group options={shipMethods} defaultValue="air" />);
+    expect(screen.getByRole("radio", { name: /Express Osaka/ })).toBeDisabled();
+    await user.click(screen.getByRole("radio", { name: /Express Osaka/ }));
+    expect(screen.getByRole("radio", { name: /Air/ })).toBeChecked();
+  });
+});
+
+describe("Radio namespace", () => {
+  it("exposes Group on Radio.Group", () => {
+    expect(Radio.Group).toBeDefined();
+  });
+});

package/src/components/data-entry/__tests__/search-input.test.tsx

@@ -0,0 +1,32 @@
+import { describe, expect, it, vi } from "vitest";
+import { renderWithUi, screen, userEvent, waitFor } from "@/test/render";
+import { SearchInput } from "../search-input";
+
+describe("SearchInput", () => {
+  it("debounces onSearch callback", async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    const onSearch = vi.fn();
+    renderWithUi(<SearchInput onSearch={onSearch} debounce={200} label="Search" />);
+
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    await user.type(screen.getByRole("searchbox"), "hello");
+
+    expect(onSearch).not.toHaveBeenCalledWith("hello");
+    await vi.advanceTimersByTimeAsync(200);
+    await waitFor(() => {
+      expect(onSearch).toHaveBeenCalledWith("hello");
+    });
+    vi.useRealTimers();
+  });
+
+  it("shows clear button when value present and clears on click", async () => {
+    const user = userEvent.setup();
+    renderWithUi(
+      <SearchInput onSearch={() => undefined} debounce={9999} label="Search" defaultValue="x" />,
+    );
+
+    expect(screen.getAllByRole("button", { name: "Xóa tìm kiếm" })).toHaveLength(1);
+    await user.click(screen.getByRole("button", { name: "Xóa tìm kiếm" }));
+    expect(screen.getByRole("searchbox")).toHaveValue("");
+  });
+});

package/src/components/data-entry/__tests__/switch-field.test.tsx

@@ -0,0 +1,52 @@
+import { describe, expect, it, vi } from "vitest";
+import { renderWithUi, screen } from "@/test/render";
+import userEvent from "@testing-library/user-event";
+
+import { SwitchField } from "../switch-field";
+
+describe("SwitchField", () => {
+  it("links label to switch and submits hidden 0/1", async () => {
+    const user = userEvent.setup();
+
+    renderWithUi(
+      <form aria-label="test">
+        <SwitchField id="active" name="is_active" label="Active" defaultChecked={false} />
+      </form>,
+    );
+
+    const toggle = screen.getByRole("switch", { name: "Active" });
+    expect(toggle).toHaveAttribute("aria-checked", "false");
+
+    const hidden = document.querySelector('input[type="hidden"][name="is_active"]');
+    expect(hidden).toHaveValue("0");
+
+    await user.click(toggle);
+    expect(toggle).toHaveAttribute("aria-checked", "true");
+    expect(hidden).toHaveValue("1");
+  });
+
+  it("shows error and wires aria-invalid on the switch", () => {
+    renderWithUi(<SwitchField id="flag" name="flag" label="Flag" error="Invalid" defaultChecked />);
+
+    expect(screen.getByRole("alert")).toHaveTextContent("Invalid");
+    expect(screen.getByRole("switch")).toHaveAttribute("aria-invalid", "true");
+  });
+
+  it("supports controlled checked state", async () => {
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+
+    renderWithUi(
+      <SwitchField
+        id="dg"
+        name="is_dg"
+        label="Dangerous goods"
+        checked={false}
+        onCheckedChange={onCheckedChange}
+      />,
+    );
+
+    await user.click(screen.getByRole("switch"));
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+  });
+});

package/src/components/data-entry/__tests__/upload.test.tsx

@@ -0,0 +1,125 @@
+import { describe, expect, it, vi } from "vitest";
+import * as React from "react";
+import { renderHook, act } from "@testing-library/react";
+import { renderWithUi, screen, userEvent } from "@/test/render";
+import { Upload } from "../upload";
+import { collectUploadCommitActions, type UploadFileItem } from "../upload-types";
+import { useUploadDraft } from "../use-upload-draft";
+
+describe("collectUploadCommitActions", () => {
+  it("collects delete + promote for avatar replace", () => {
+    const items: UploadFileItem[] = [
+      {
+        uid: "1",
+        name: "new.jpg",
+        size: 100,
+        mediaId: "temp-new",
+        status: "done",
+        pendingReplace: true,
+        replacesMediaId: "old-perm",
+      },
+    ];
+    expect(collectUploadCommitActions(items)).toEqual({
+      deleteMediaIds: ["old-perm"],
+      promoteMediaIds: ["temp-new"],
+    });
+  });
+
+  it("collects delete only for pending delete", () => {
+    const items: UploadFileItem[] = [
+      {
+        uid: "1",
+        name: "avatar.jpg",
+        size: 100,
+        mediaId: "perm-1",
+        status: "removed",
+        pendingDelete: true,
+      },
+    ];
+    expect(collectUploadCommitActions(items)).toEqual({
+      deleteMediaIds: ["perm-1"],
+      promoteMediaIds: [],
+    });
+  });
+});
+
+describe("useUploadDraft", () => {
+  const baseline: UploadFileItem = {
+    uid: "b",
+    name: "avatar.jpg",
+    size: 1,
+    mediaId: "media-old",
+    previewUrl: "https://cdn/avatar.jpg",
+    status: "done",
+  };
+
+  it("marks remove and undo restores baseline", () => {
+    const onChange = vi.fn();
+    const { result, rerender } = renderHook(({ value }) => useUploadDraft({ value, onChange }), {
+      initialProps: { value: baseline },
+    });
+
+    act(() => result.current.markRemove());
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ pendingDelete: true, mediaId: "media-old" }),
+    );
+
+    rerender({ value: { ...baseline, pendingDelete: true, status: "removed" } });
+    act(() => result.current.undoRemove());
+    expect(onChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({ pendingDelete: false, mediaId: "media-old" }),
+    );
+  });
+
+  it("getCommitActions returns promote + delete on replace", () => {
+    const replaced: UploadFileItem = {
+      uid: "n",
+      name: "new.jpg",
+      size: 2,
+      mediaId: "media-new",
+      status: "done",
+      pendingReplace: true,
+      replacesMediaId: "media-old",
+    };
+    const { result } = renderHook(() => useUploadDraft({ value: replaced }));
+    expect(result.current.getCommitActions()).toEqual({
+      deleteMediaIds: ["media-old"],
+      promoteMediaIds: ["media-new"],
+    });
+  });
+});
+
+describe("Upload", () => {
+  it("renders dropzone variant", () => {
+    renderWithUi(<Upload variant="dropzone" />);
+    expect(screen.getByRole("button", { name: /tải file lên/i })).toBeInTheDocument();
+  });
+
+  it("shows undo banner after avatar remove", async () => {
+    const user = userEvent.setup();
+
+    function AvatarDemo() {
+      const [items, setItems] = React.useState<UploadFileItem[]>([
+        {
+          uid: "1",
+          name: "avatar.jpg",
+          size: 100,
+          mediaId: "m1",
+          previewUrl: "https://example.com/a.jpg",
+          status: "done",
+        },
+      ]);
+      return <Upload variant="avatar" value={items} onChange={setItems} removable />;
+    }
+
+    renderWithUi(<AvatarDemo />);
+    await user.click(screen.getByRole("button", { name: /xóa ảnh/i }));
+    expect(screen.getByText(/ảnh sẽ bị xóa khi bạn lưu/i)).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /hoàn tác/i })).toBeInTheDocument();
+  });
+
+  it("renders avatar placeholder when empty", () => {
+    renderWithUi(<Upload variant="avatar" value={[]} onChange={() => undefined} />);
+    expect(screen.getByRole("button", { name: /ảnh đại diện/i })).toBeInTheDocument();
+  });
+});

package/src/components/data-entry/autocomplete.tsx

@@ -0,0 +1,91 @@
+import * as React from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation";
+import { cn } from "../../lib/utils";
+import { Button } from "../general/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "./command";
+import type { AutocompleteProp } from "../../props/components/data-entry.prop";
+
+export type {
+  AutocompleteProp,
+  AutocompleteProp as AutocompleteProps,
+} from "../../props/components/data-entry.prop";
+
+export function Autocomplete({
+  options,
+  value,
+  onValueChange,
+  placeholder,
+  emptyMessage,
+  disabled,
+  className,
+  id,
+  searchPlaceholder,
+}: AutocompleteProp) {
+  const { t } = useTranslation();
+  const [open, setOpen] = React.useState(false);
+  const selected = options.find((option) => option.value === value);
+  const resolvedPlaceholder = placeholder ?? t("dataEntry.autocomplete.placeholder");
+  const resolvedEmpty = emptyMessage ?? t("dataEntry.autocomplete.empty");
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn(
+            "w-full justify-between font-normal",
+            !selected && "text-muted-foreground",
+            className,
+          )}
+        >
+          <span className="truncate">{selected?.label ?? resolvedPlaceholder}</span>
+          <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" aria-hidden="true" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
+        <Command>
+          <CommandInput placeholder={searchPlaceholder ?? resolvedPlaceholder} />
+          <CommandList>
+            <CommandEmpty>{resolvedEmpty}</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.label}
+                  keywords={[option.value, option.label]}
+                  onSelect={() => {
+                    onValueChange?.(option.value);
+                    setOpen(false);
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 size-4",
+                      value === option.value ? "opacity-100" : "opacity-0",
+                    )}
+                    aria-hidden="true"
+                  />
+                  {option.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/data-entry/calendar.tsx

@@ -0,0 +1,90 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+import { cn } from "../../lib/utils";
+import { controlIconSmClass } from "../../lib/control-styles";
+import { buttonVariants } from "../general/button";
+import type { CalendarProp } from "../../props/components/data-entry.prop";
+
+export type {
+  CalendarProp,
+  CalendarProp as CalendarProps,
+} from "../../props/components/data-entry.prop";
+
+export function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProp) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: cn("flex flex-col gap-4 sm:flex-row", classNames?.months),
+        month: cn("relative flex flex-col gap-4", classNames?.month),
+        month_caption: cn(
+          "flex h-[length:var(--control-height)] w-full items-center justify-center px-8",
+          classNames?.month_caption,
+        ),
+        caption_label: cn("text-sm font-medium", classNames?.caption_label),
+        nav: cn("absolute inset-x-0 top-3 flex items-center justify-between px-1", classNames?.nav),
+        button_previous: cn(
+          buttonVariants({ variant: "outline" }),
+          controlIconSmClass,
+          "bg-transparent p-0 opacity-70 hover:opacity-100",
+          classNames?.button_previous,
+        ),
+        button_next: cn(
+          buttonVariants({ variant: "outline" }),
+          controlIconSmClass,
+          "bg-transparent p-0 opacity-70 hover:opacity-100",
+          classNames?.button_next,
+        ),
+        month_grid: cn("mt-4 w-full border-collapse", classNames?.month_grid),
+        weekdays: cn("flex", classNames?.weekdays),
+        weekday: cn(
+          "w-[length:var(--control-height)] rounded-md text-xs font-normal text-muted-foreground",
+          classNames?.weekday,
+        ),
+        week: cn("mt-2 flex w-full", classNames?.week),
+        day: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20",
+          "[&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50",
+          "[&:has([aria-selected].day-range-end)]:rounded-r-md",
+          classNames?.day,
+        ),
+        day_button: cn(
+          buttonVariants({ variant: "ghost" }),
+          "size-[length:var(--control-height)] p-0 font-normal aria-selected:opacity-100",
+          classNames?.day_button,
+        ),
+        range_start: cn("day-range-start rounded-l-md", classNames?.range_start),
+        range_end: cn("day-range-end rounded-r-md", classNames?.range_end),
+        range_middle: cn(
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+          classNames?.range_middle,
+        ),
+        selected: cn(
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+          classNames?.selected,
+        ),
+        today: cn("bg-accent text-accent-foreground", classNames?.today),
+        outside: cn(
+          "day-outside text-muted-foreground aria-selected:text-muted-foreground",
+          classNames?.outside,
+        ),
+        disabled: cn("text-muted-foreground opacity-50", classNames?.disabled),
+        hidden: cn("invisible", classNames?.hidden),
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ orientation, className: chevronClassName }) => {
+          const Icon = orientation === "left" ? ChevronLeft : ChevronRight;
+          return <Icon className={cn("size-4", chevronClassName)} aria-hidden="true" />;
+        },
+      }}
+      {...props}
+    />
+  );
+}