@hilum/ui 0.1.1 → 0.1.3

package/src/components/__tests__/form.test.tsx

@@ -1,297 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { userEvent } from "@testing-library/user-event";
-import { Checkbox } from "../checkbox";
-import { RadioGroup, RadioGroupItem } from "../radio-group";
-import { Switch } from "../switch";
-import { Slider } from "../slider";
-import { InputNumber } from "../input-number";
-import { InputGroup } from "../input-group";
-import { Field } from "../field";
-import { NativeSelect, NativeSelectOption } from "../native-select";
-import { RadioCards } from "../radio-card";
-
-/* ------------------------------------------------------------------ */
-/* Checkbox                                                             */
-/* ------------------------------------------------------------------ */
-
-describe("Checkbox", () => {
-  it("renders a checkbox button", () => {
-    render(<Checkbox />);
-    expect(screen.getByRole("checkbox")).toBeInTheDocument();
-  });
-
-  it("is unchecked by default", () => {
-    render(<Checkbox />);
-    expect(screen.getByRole("checkbox")).not.toBeChecked();
-  });
-
-  it("is disabled when disabled prop is set", () => {
-    render(<Checkbox disabled />);
-    expect(screen.getByRole("checkbox")).toBeDisabled();
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* RadioGroup                                                           */
-/* ------------------------------------------------------------------ */
-
-describe("RadioGroup", () => {
-  it("renders radio buttons", () => {
-    render(
-      <RadioGroup defaultValue="a">
-        <RadioGroupItem value="a" id="a" />
-        <RadioGroupItem value="b" id="b" />
-      </RadioGroup>,
-    );
-    expect(screen.getAllByRole("radio")).toHaveLength(2);
-  });
-
-  it("marks default value as checked", () => {
-    render(
-      <RadioGroup defaultValue="first">
-        <RadioGroupItem value="first" id="first" />
-        <RadioGroupItem value="second" id="second" />
-      </RadioGroup>,
-    );
-    const radios = screen.getAllByRole("radio");
-    expect(radios[0]).toBeChecked();
-    expect(radios[1]).not.toBeChecked();
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* Switch                                                               */
-/* ------------------------------------------------------------------ */
-
-describe("Switch", () => {
-  it("renders a switch button", () => {
-    render(<Switch />);
-    expect(screen.getByRole("switch")).toBeInTheDocument();
-  });
-
-  it("is off by default", () => {
-    render(<Switch />);
-    expect(screen.getByRole("switch")).toHaveAttribute("data-state", "unchecked");
-  });
-
-  it("toggles on click", async () => {
-    const user = userEvent.setup();
-    render(<Switch />);
-    const sw = screen.getByRole("switch");
-    await user.click(sw);
-    expect(sw).toHaveAttribute("data-state", "checked");
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* Slider                                                               */
-/* ------------------------------------------------------------------ */
-
-describe("Slider", () => {
-  it("renders a slider", () => {
-    render(<Slider defaultValue={[50]} />);
-    expect(screen.getByRole("slider")).toBeInTheDocument();
-  });
-
-  it("shows the provided value", () => {
-    render(<Slider defaultValue={[25]} min={0} max={100} />);
-    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "25");
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* InputNumber                                                          */
-/* ------------------------------------------------------------------ */
-
-describe("InputNumber", () => {
-  it("renders an input with the given value", () => {
-    render(<InputNumber value={42} onChange={() => {}} />);
-    expect(screen.getByRole("textbox")).toHaveValue("42");
-  });
-
-  it("displays unit suffix", () => {
-    render(<InputNumber value={100} onChange={() => {}} unit="px" />);
-    expect(screen.getByText("px")).toBeInTheDocument();
-  });
-
-  it("calls onChange with incremented value when increment button clicked", async () => {
-    const user = userEvent.setup();
-    const onChange = vi.fn();
-    render(<InputNumber value={10} onChange={onChange} step={1} />);
-    await user.click(screen.getByRole("button", { name: /increment/i }));
-    expect(onChange).toHaveBeenCalledWith(11);
-  });
-
-  it("calls onChange with decremented value when decrement button clicked", async () => {
-    const user = userEvent.setup();
-    const onChange = vi.fn();
-    render(<InputNumber value={10} onChange={onChange} step={1} />);
-    await user.click(screen.getByRole("button", { name: /decrement/i }));
-    expect(onChange).toHaveBeenCalledWith(9);
-  });
-
-  it("clamps to max on increment", async () => {
-    const user = userEvent.setup();
-    const onChange = vi.fn();
-    render(<InputNumber value={10} onChange={onChange} max={10} />);
-    await user.click(screen.getByRole("button", { name: /increment/i }));
-    expect(onChange).toHaveBeenCalledWith(10);
-  });
-
-  it("hides steppers when hideSteppers is true", () => {
-    render(<InputNumber value={5} onChange={() => {}} hideSteppers />);
-    expect(screen.queryByRole("button", { name: /increment/i })).not.toBeInTheDocument();
-  });
-
-  it("renders with precision", () => {
-    render(<InputNumber value={3.14} onChange={() => {}} precision={2} />);
-    expect(screen.getByRole("textbox")).toHaveValue("3.14");
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* InputGroup                                                           */
-/* ------------------------------------------------------------------ */
-
-describe("InputGroup", () => {
-  it("renders a plain input when no addons", () => {
-    render(<InputGroup placeholder="Enter text" />);
-    expect(screen.getByRole("textbox")).toBeInTheDocument();
-  });
-
-  it("renders leading addon text", () => {
-    render(<InputGroup leadingAddon="https://" placeholder="domain.com" />);
-    expect(screen.getByText("https://")).toBeInTheDocument();
-  });
-
-  it("renders trailing addon text", () => {
-    render(<InputGroup trailingAddon=".com" placeholder="domain" />);
-    expect(screen.getByText(".com")).toBeInTheDocument();
-  });
-
-  it("renders error state", () => {
-    const { container } = render(<InputGroup error />);
-    // Error icon is rendered inside
-    expect(container.querySelector("input")).toBeInTheDocument();
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* Field                                                                */
-/* ------------------------------------------------------------------ */
-
-describe("Field", () => {
-  it("renders label and children", () => {
-    render(
-      <Field label="Email" htmlFor="email">
-        <input id="email" type="email" />
-      </Field>,
-    );
-    expect(screen.getByLabelText("Email")).toBeInTheDocument();
-  });
-
-  it("renders hint text", () => {
-    render(
-      <Field label="Username" hint="Must be unique">
-        <input />
-      </Field>,
-    );
-    expect(screen.getByText("Must be unique")).toBeInTheDocument();
-  });
-
-  it("renders error over hint when both provided", () => {
-    render(
-      <Field label="Field" hint="Hint" error="This is required">
-        <input />
-      </Field>,
-    );
-    expect(screen.getByText("This is required")).toBeInTheDocument();
-    expect(screen.queryByText("Hint")).not.toBeInTheDocument();
-  });
-
-  it("renders required asterisk", () => {
-    const { container } = render(
-      <Field label="Name" required>
-        <input />
-      </Field>,
-    );
-    expect(container.querySelector("span")).toHaveTextContent("*");
-  });
-
-  it("renders cornerHint", () => {
-    render(
-      <Field label="Password" cornerHint="Optional">
-        <input />
-      </Field>,
-    );
-    expect(screen.getByText("Optional")).toBeInTheDocument();
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* NativeSelect                                                         */
-/* ------------------------------------------------------------------ */
-
-describe("NativeSelect", () => {
-  it("renders a combobox", () => {
-    render(
-      <NativeSelect>
-        <NativeSelectOption value="a">Option A</NativeSelectOption>
-        <NativeSelectOption value="b">Option B</NativeSelectOption>
-      </NativeSelect>,
-    );
-    expect(screen.getByRole("combobox")).toBeInTheDocument();
-    expect(screen.getByText("Option A")).toBeInTheDocument();
-    expect(screen.getByText("Option B")).toBeInTheDocument();
-  });
-
-  it("is disabled when disabled prop is set", () => {
-    render(
-      <NativeSelect disabled>
-        <NativeSelectOption value="x">X</NativeSelectOption>
-      </NativeSelect>,
-    );
-    expect(screen.getByRole("combobox")).toBeDisabled();
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* RadioCards                                                           */
-/* ------------------------------------------------------------------ */
-
-describe("RadioCards", () => {
-  const options = [
-    { value: "plan-a", label: "Basic" },
-    { value: "plan-b", label: "Pro" },
-    { value: "plan-c", label: "Enterprise" },
-  ];
-
-  it("renders all option labels", () => {
-    render(<RadioCards options={options} />);
-    expect(screen.getByText("Basic")).toBeInTheDocument();
-    expect(screen.getByText("Pro")).toBeInTheDocument();
-    expect(screen.getByText("Enterprise")).toBeInTheDocument();
-  });
-
-  it("marks the selected option as checked", () => {
-    render(<RadioCards options={options} value="plan-b" />);
-    const proBtn = screen.getByRole("radio", { name: "Pro" });
-    expect(proBtn).toHaveAttribute("aria-checked", "true");
-  });
-
-  it("calls onValueChange when an option is clicked", () => {
-    const onValueChange = vi.fn();
-    render(<RadioCards options={options} onValueChange={onValueChange} />);
-    fireEvent.click(screen.getByRole("radio", { name: "Enterprise" }));
-    expect(onValueChange).toHaveBeenCalledWith("plan-c");
-  });
-
-  it("does not call onValueChange for disabled options", () => {
-    const onValueChange = vi.fn();
-    const opts = [{ value: "x", label: "Disabled", disabled: true }];
-    render(<RadioCards options={opts} onValueChange={onValueChange} />);
-    fireEvent.click(screen.getByRole("radio", { name: "Disabled" }));
-    expect(onValueChange).not.toHaveBeenCalled();
-  });
-});

package/src/components/__tests__/layout.test.tsx

@@ -1,388 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { render, screen, fireEvent } from "@testing-library/react";
-import {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-} from "../breadcrumb";
-import { SectionHeading } from "../section-heading";
-import { PageHeading } from "../page-heading";
-import { DescriptionList } from "../description-list";
-import { PropertyRow } from "../property-row";
-import { StackedList, StackedListItem } from "../stacked-list";
-import { GridList, GridListCard, GridListAccentCard } from "../grid-list";
-import { ActivityFeed } from "../activity-feed";
-import { CardHeading } from "../card-heading";
-import { ActionPanel } from "../action-panel";
-import { ButtonGroup, ButtonGroupItem } from "../button-group";
-
-/* ------------------------------------------------------------------ */
-/* Breadcrumb                                                           */
-/* ------------------------------------------------------------------ */
-
-describe("Breadcrumb", () => {
-  it('renders nav with aria-label="breadcrumb"', () => {
-    render(<Breadcrumb />);
-    expect(screen.getByRole("navigation", { name: "breadcrumb" })).toBeInTheDocument();
-  });
-
-  it("renders full breadcrumb trail", () => {
-    render(
-      <Breadcrumb>
-        <BreadcrumbList>
-          <BreadcrumbItem>
-            <BreadcrumbLink href="/">Home</BreadcrumbLink>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator />
-          <BreadcrumbItem>
-            <BreadcrumbPage>Settings</BreadcrumbPage>
-          </BreadcrumbItem>
-        </BreadcrumbList>
-      </Breadcrumb>,
-    );
-    expect(screen.getByRole("link", { name: "Home" })).toBeInTheDocument();
-    expect(screen.getByText("Settings")).toBeInTheDocument();
-  });
-
-  it("renders BreadcrumbEllipsis", () => {
-    const { container } = render(<BreadcrumbEllipsis />);
-    expect(container.querySelector('[role="presentation"]')).toBeInTheDocument();
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* SectionHeading                                                       */
-/* ------------------------------------------------------------------ */
-
-describe("SectionHeading", () => {
-  it("renders title", () => {
-    render(<SectionHeading title="Team Members" />);
-    expect(screen.getByText("Team Members")).toBeInTheDocument();
-  });
-
-  it("renders description", () => {
-    render(<SectionHeading title="Title" description="Manage your team." />);
-    expect(screen.getByText("Manage your team.")).toBeInTheDocument();
-  });
-
-  it("renders actions", () => {
-    render(<SectionHeading title="Title" actions={[{ label: "Add", onClick: () => {} }]} />);
-    expect(screen.getByRole("button", { name: "Add" })).toBeInTheDocument();
-  });
-
-  it("renders action with href as link", () => {
-    render(<SectionHeading title="Title" actions={[{ label: "View", href: "/all" }]} />);
-    expect(screen.getByRole("link", { name: "View" })).toHaveAttribute("href", "/all");
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* PageHeading                                                          */
-/* ------------------------------------------------------------------ */
-
-describe("PageHeading", () => {
-  it("renders title as h1", () => {
-    render(<PageHeading title="Dashboard" />);
-    expect(screen.getByRole("heading", { name: "Dashboard", level: 1 })).toBeInTheDocument();
-  });
-
-  it("renders description", () => {
-    render(<PageHeading title="Users" description="Manage all users." />);
-    expect(screen.getByText("Manage all users.")).toBeInTheDocument();
-  });
-
-  it("renders breadcrumbs", () => {
-    render(
-      <PageHeading
-        title="Configuration"
-        breadcrumbs={[{ label: "Home", href: "/" }, { label: "Config" }]}
-      />,
-    );
-    expect(screen.getByRole("link", { name: "Home" })).toBeInTheDocument();
-    expect(screen.getByText("Config")).toBeInTheDocument();
-  });
-
-  it("renders badge as string", () => {
-    render(<PageHeading title="Title" badge="Beta" />);
-    expect(screen.getByText("Beta")).toBeInTheDocument();
-  });
-
-  it("renders badge as object", () => {
-    render(<PageHeading title="Title" badge={{ label: "New", variant: "secondary" }} />);
-    expect(screen.getByText("New")).toBeInTheDocument();
-  });
-
-  it("renders actions", () => {
-    render(<PageHeading title="Title" actions={[{ label: "Export", primary: true }]} />);
-    expect(screen.getByRole("button", { name: "Export" })).toBeInTheDocument();
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* DescriptionList                                                      */
-/* ------------------------------------------------------------------ */
-
-describe("DescriptionList", () => {
-  const items = [
-    { term: "Name", details: "Alice" },
-    { term: "Role", details: "Admin" },
-  ];
-
-  it("renders all terms and details", () => {
-    render(<DescriptionList items={items} />);
-    expect(screen.getByText("Name")).toBeInTheDocument();
-    expect(screen.getByText("Alice")).toBeInTheDocument();
-    expect(screen.getByText("Role")).toBeInTheDocument();
-    expect(screen.getByText("Admin")).toBeInTheDocument();
-  });
-
-  it("renders title and description when provided", () => {
-    render(<DescriptionList items={items} title="Details" description="User info" />);
-    expect(screen.getByText("Details")).toBeInTheDocument();
-    expect(screen.getByText("User info")).toBeInTheDocument();
-  });
-
-  it("renders 2-column layout", () => {
-    render(<DescriptionList items={items} columns={2} />);
-    expect(screen.getByText("Alice")).toBeInTheDocument();
-  });
-
-  it("renders action alongside detail", () => {
-    render(
-      <DescriptionList
-        items={[{ term: "Email", details: "alice@test.com", action: <button>Edit</button> }]}
-      />,
-    );
-    expect(screen.getByRole("button", { name: "Edit" })).toBeInTheDocument();
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* PropertyRow                                                          */
-/* ------------------------------------------------------------------ */
-
-describe("PropertyRow", () => {
-  it("renders label and children", () => {
-    render(
-      <PropertyRow label="Width">
-        <input type="number" aria-label="width-input" />
-      </PropertyRow>,
-    );
-    expect(screen.getByText("Width")).toBeInTheDocument();
-    expect(screen.getByLabelText("width-input")).toBeInTheDocument();
-  });
-
-  it("renders without label", () => {
-    render(
-      <PropertyRow>
-        <span>Controls</span>
-      </PropertyRow>,
-    );
-    expect(screen.getByText("Controls")).toBeInTheDocument();
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* StackedList                                                          */
-/* ------------------------------------------------------------------ */
-
-describe("StackedList", () => {
-  it("renders as a list", () => {
-    render(
-      <StackedList>
-        <StackedListItem>Item 1</StackedListItem>
-        <StackedListItem>Item 2</StackedListItem>
-      </StackedList>,
-    );
-    expect(screen.getByRole("list")).toBeInTheDocument();
-    expect(screen.getByText("Item 1")).toBeInTheDocument();
-    expect(screen.getByText("Item 2")).toBeInTheDocument();
-  });
-
-  it("renders item with href as link", () => {
-    render(
-      <StackedList>
-        <StackedListItem href="/page">Go to page</StackedListItem>
-      </StackedList>,
-    );
-    expect(screen.getByRole("link", { name: "Go to page" })).toBeInTheDocument();
-  });
-
-  it("renders item with onClick as button", () => {
-    render(
-      <StackedList>
-        <StackedListItem onClick={() => {}}>Clickable</StackedListItem>
-      </StackedList>,
-    );
-    expect(screen.getByRole("button", { name: "Clickable" })).toBeInTheDocument();
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* GridList                                                             */
-/* ------------------------------------------------------------------ */
-
-describe("GridList", () => {
-  it("renders as a list", () => {
-    render(
-      <GridList>
-        <GridListCard title="Card A" />
-        <GridListCard title="Card B" />
-      </GridList>,
-    );
-    expect(screen.getByRole("list")).toBeInTheDocument();
-    expect(screen.getByText("Card A")).toBeInTheDocument();
-    expect(screen.getByText("Card B")).toBeInTheDocument();
-  });
-
-  it("GridListCard renders description", () => {
-    render(
-      <GridList>
-        <GridListCard title="Item" description="Desc text" />
-      </GridList>,
-    );
-    expect(screen.getByText("Desc text")).toBeInTheDocument();
-  });
-
-  it("GridListCard renders as link when href provided", () => {
-    render(
-      <GridList>
-        <GridListCard title="Click" href="/target" />
-      </GridList>,
-    );
-    expect(screen.getByRole("link")).toHaveAttribute("href", "/target");
-  });
-
-  it("GridListAccentCard renders title", () => {
-    render(
-      <GridList>
-        <GridListAccentCard title="Project Alpha" initials="PA" />
-      </GridList>,
-    );
-    expect(screen.getByText("Project Alpha")).toBeInTheDocument();
-  });
-
-  it("GridListAccentCard renders as link when href provided", () => {
-    render(
-      <GridList>
-        <GridListAccentCard title="Project" href="/project" />
-      </GridList>,
-    );
-    expect(screen.getByRole("link")).toHaveAttribute("href", "/project");
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* ActivityFeed                                                         */
-/* ------------------------------------------------------------------ */
-
-describe("ActivityFeed", () => {
-  it("renders all events", () => {
-    render(
-      <ActivityFeed
-        events={[
-          { id: 1, content: "User joined", date: "Today" },
-          { id: 2, content: "File uploaded", date: "Yesterday" },
-        ]}
-      />,
-    );
-    expect(screen.getByText("User joined")).toBeInTheDocument();
-    expect(screen.getByText("File uploaded")).toBeInTheDocument();
-  });
-
-  it("renders event dates", () => {
-    render(<ActivityFeed events={[{ content: "Action", date: "Jan 1, 2026" }]} />);
-    expect(screen.getByText("Jan 1, 2026")).toBeInTheDocument();
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* CardHeading                                                          */
-/* ------------------------------------------------------------------ */
-
-describe("CardHeading", () => {
-  it("renders title", () => {
-    render(<CardHeading title="Team Settings" />);
-    expect(screen.getByText("Team Settings")).toBeInTheDocument();
-  });
-
-  it("renders description", () => {
-    render(<CardHeading title="Title" description="Subtitle here" />);
-    expect(screen.getByText("Subtitle here")).toBeInTheDocument();
-  });
-
-  it("renders actions", () => {
-    render(<CardHeading title="Title" actions={[{ label: "Save" }]} />);
-    expect(screen.getByRole("button", { name: "Save" })).toBeInTheDocument();
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* ActionPanel                                                          */
-/* ------------------------------------------------------------------ */
-
-describe("ActionPanel", () => {
-  it("renders title", () => {
-    render(<ActionPanel title="Danger Zone" />);
-    expect(screen.getByText("Danger Zone")).toBeInTheDocument();
-  });
-
-  it("renders description", () => {
-    render(<ActionPanel title="T" description="Delete this account." />);
-    expect(screen.getByText("Delete this account.")).toBeInTheDocument();
-  });
-
-  it("renders action button", () => {
-    render(<ActionPanel title="T" action={{ label: "Delete", variant: "destructive" }} />);
-    expect(screen.getByRole("button", { name: "Delete" })).toBeInTheDocument();
-  });
-
-  it("renders inline layout without error", () => {
-    render(<ActionPanel title="Info" layout="inline" action={{ label: "Go" }} />);
-    expect(screen.getByText("Info")).toBeInTheDocument();
-  });
-
-  it("renders muted variant without error", () => {
-    render(<ActionPanel title="Note" variant="muted" />);
-    expect(screen.getByText("Note")).toBeInTheDocument();
-  });
-
-  it("renders link", () => {
-    render(<ActionPanel title="T" link={{ label: "Learn more", href: "/docs" }} />);
-    expect(screen.getByText("Learn more")).toBeInTheDocument();
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* ButtonGroup                                                          */
-/* ------------------------------------------------------------------ */
-
-describe("ButtonGroup", () => {
-  it("renders items", () => {
-    render(
-      <ButtonGroup>
-        <ButtonGroupItem>Day</ButtonGroupItem>
-        <ButtonGroupItem>Week</ButtonGroupItem>
-        <ButtonGroupItem active>Month</ButtonGroupItem>
-      </ButtonGroup>,
-    );
-    expect(screen.getByRole("button", { name: "Day" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Week" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Month" })).toBeInTheDocument();
-  });
-
-  it("calls onClick on item click", () => {
-    const onClick = vi.fn();
-    render(
-      <ButtonGroup>
-        <ButtonGroupItem onClick={onClick}>Click me</ButtonGroupItem>
-      </ButtonGroup>,
-    );
-    fireEvent.click(screen.getByRole("button", { name: "Click me" }));
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-});