@godxjp/ui 6.0.0 → 6.0.2

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

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

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

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

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

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

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

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