@bearmenu/ui 0.8.32 → 0.8.34

package/src/components/shared-table-primitives.test.tsx

@@ -0,0 +1,482 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Users } from "lucide-react";
+import { cn } from "../lib/utils";
+import { ActionBar } from "./action-bar";
+import { ActivityList, ActivityRow } from "./activity-row";
+import { Avatar, AvatarFallback, avatarVariants } from "./avatar";
+import { badgeVariants } from "./badge";
+import { MenuPickRow } from "./menu-pick-row";
+import { QrPanel } from "./qr-panel";
+import { ReconcileBar } from "./reconcile-bar";
+import { SplitShareRow } from "./split-share-row";
+import { TableLedgerCard } from "./table-ledger-card";
+import { TableTriggerBand } from "./table-trigger-band";
+
+describe("avatar tone", () => {
+  it("paints the tone on the root and lets the fallback carry white ink", () => {
+    render(
+      <Avatar tone="teal" data-testid="a">
+        <AvatarFallback>B</AvatarFallback>
+      </Avatar>
+    );
+    const root = screen.getByTestId("a");
+    expect(root.className).toContain("bg-avatar-teal");
+    expect(root).toHaveAttribute("data-tone", "teal");
+
+    const fallback = screen.getByText("B");
+    expect(fallback.className).toContain("text-white");
+    // The fallback's own ground would cover the tone.
+    expect(fallback.className).not.toContain("bg-muted");
+  });
+
+  it("keeps the muted ink for the non-person disc", () => {
+    render(
+      <Avatar tone="muted">
+        <AvatarFallback>S</AvatarFallback>
+      </Avatar>
+    );
+    const fallback = screen.getByText("S");
+    expect(fallback.className).toContain("text-muted-foreground");
+    expect(fallback.className).not.toContain("text-white");
+  });
+
+  it("leaves an untoned avatar exactly as it was", () => {
+    render(
+      <Avatar data-testid="plain">
+        <AvatarFallback>P</AvatarFallback>
+      </Avatar>
+    );
+    expect(screen.getByTestId("plain")).not.toHaveAttribute("data-tone");
+    const fallback = screen.getByText("P");
+    expect(fallback.className).toContain("bg-muted");
+    expect(fallback.className).toContain("text-muted-foreground");
+  });
+
+  it("offers six person hues plus the non-person disc", () => {
+    for (const tone of ["brown", "teal", "green", "blue", "violet", "rose", "muted"] as const) {
+      expect(cn(avatarVariants({ tone }))).toContain(
+        tone === "muted" ? "bg-muted" : `bg-avatar-${tone}`
+      );
+    }
+  });
+});
+
+describe("badge assignee", () => {
+  it("is a soft pill with room for its avatar and chevron", () => {
+    const classes = cn(badgeVariants({ variant: "assignee" })).split(" ");
+    expect(classes).toContain("bg-surface-2");
+    expect(classes).toContain("rounded-full");
+    expect(classes).toContain("gap-1.5");
+    // Not a status pill: it must not inherit the 10.5px bold sizing.
+    expect(classes).not.toContain("text-[10.5px]");
+  });
+});
+
+describe("ActionBar", () => {
+  it("puts the note first and keeps the actions together on the trailing edge", () => {
+    render(
+      <ActionBar
+        note="Added items can be assigned afterwards."
+        primary={<button type="button">Add 1 item</button>}
+        data-testid="bar"
+      />
+    );
+    const bar = screen.getByTestId("bar");
+    expect(bar.firstElementChild).toHaveAttribute("data-slot", "action-bar-note");
+    const actions = bar.querySelector('[data-slot="action-bar-actions"]');
+    expect(actions?.className).toContain("shrink-0");
+  });
+
+  it("keeps the actions at their own width by default, note or no note", () => {
+    // T5 and T6 draw a lone Save on the trailing edge; only the table
+    // overview divides the bar, and that is `layout="split"`.
+    render(
+      <ActionBar
+        secondary={<button type="button">Cancel</button>}
+        primary={<button type="button">Review</button>}
+        data-testid="bar"
+      />
+    );
+    const actions = screen.getByTestId("bar").querySelector('[data-slot="action-bar-actions"]');
+    expect(actions?.className).toContain("ml-auto");
+    expect(actions?.className).toContain("shrink-0");
+    expect(actions?.className).not.toContain("flex-1");
+  });
+
+  it("divides the bar between two equal buttons on layout=split", () => {
+    render(
+      <ActionBar
+        layout="split"
+        secondary={<button type="button">Add item</button>}
+        primary={<button type="button">Organise</button>}
+        data-testid="bar"
+      />
+    );
+    const actions = screen.getByTestId("bar").querySelector('[data-slot="action-bar-actions"]');
+    expect(actions?.className).toContain("flex-1");
+    expect(actions?.className).not.toContain("ml-auto");
+  });
+
+  it("renders the primary last, whatever else is in the bar", () => {
+    render(
+      <ActionBar
+        secondary={<button type="button">Cancel</button>}
+        primary={<button type="button">Review</button>}
+      />
+    );
+    const buttons = screen.getAllByRole("button");
+    expect(buttons.map((b) => b.textContent)).toEqual(["Cancel", "Review"]);
+  });
+
+  it("owns the home-indicator inset so no caller has to remember it", () => {
+    render(<ActionBar primary={<button type="button">Save</button>} data-testid="bar" />);
+    expect(screen.getByTestId("bar").className).toContain(
+      "pb-[max(env(safe-area-inset-bottom),12px)]"
+    );
+  });
+});
+
+describe("ReconcileBar", () => {
+  it("states the running figure and the target, in tabular digits", () => {
+    render(<ReconcileBar tone="ok" message="The amounts add up" current="120" target="120" />);
+    const figures = screen.getByText("/").parentElement;
+    expect(figures?.className).toContain("tabular-nums");
+    expect(figures?.textContent).toBe("120/120");
+  });
+
+  it("takes the warning ground from the tokens, with no dark branch of its own", () => {
+    const { container } = render(
+      <ReconcileBar tone="short" message="10 lei short" current="110" target="120" />
+    );
+    const bar = container.querySelector('[data-slot="reconcile-bar"]');
+    expect(bar).toHaveAttribute("data-tone", "short");
+    // `--warning-deep` and `--warning-ink` both have dark twins already.
+    expect(bar?.className).toContain("bg-warning-deep/15");
+    expect(bar?.className).toContain("text-warning-ink");
+    expect(bar?.className).not.toContain("dark:");
+    expect(bar?.className).not.toContain("oklch(");
+  });
+});
+
+describe("SplitShareRow", () => {
+  it("includes and excludes a person through the checkbox", async () => {
+    const onCheckedChange = vi.fn();
+    render(
+      <SplitShareRow
+        person="Ana"
+        amount="40 lei"
+        checked
+        onCheckedChange={onCheckedChange}
+        includeLabel="Include Ana in the split"
+      />
+    );
+    await userEvent.click(screen.getByRole("checkbox", { name: "Include Ana in the split" }));
+    expect(onCheckedChange).toHaveBeenCalledWith(false);
+  });
+
+  it("mutes only the amount when someone is out of the split", () => {
+    const { container } = render(
+      <SplitShareRow
+        person="Bruno"
+        amount="0 lei"
+        checked={false}
+        onCheckedChange={() => {}}
+        includeLabel="Include Bruno"
+      />
+    );
+    // Dimming the whole row would take the name under 4.5:1 with it.
+    expect(container.querySelector('[data-slot="split-share-row"]')?.className).not.toContain(
+      "opacity-60"
+    );
+    expect(container.querySelector('[data-slot="split-share-amount"]')?.className).toContain(
+      "text-muted-foreground"
+    );
+  });
+
+  it("renders no checkbox for a row that cannot be excluded", () => {
+    render(<SplitShareRow person="Ana" amount="40 lei" />);
+    expect(screen.queryByRole("checkbox")).toBeNull();
+  });
+
+  it("names the editable amount, since CurrencyInput takes no aria-label", () => {
+    render(
+      <SplitShareRow
+        person="Ana"
+        amount="40 lei"
+        editable
+        amountValue={40}
+        onAmountChange={() => {}}
+        amountLabel="Ana's share"
+      />
+    );
+    expect(screen.getByLabelText("Ana's share")).toBeInTheDocument();
+  });
+
+  it("flips the check from trailing and round to leading and square at md", () => {
+    const { container } = render(
+      <SplitShareRow
+        person="Ana"
+        amount="40 lei"
+        checked
+        onCheckedChange={() => {}}
+        includeLabel="Include Ana"
+      />
+    );
+    const box = screen.getByRole("checkbox");
+    expect(box.className).toContain("rounded-full");
+    expect(box.className).toContain("md:order-1");
+    expect(box.className).toContain("md:rounded-md");
+    // Last in the DOM, where the sheet paints it, so tab order follows the eye.
+    const row = container.querySelector('[data-slot="split-share-row"]');
+    expect(row?.lastElementChild).toBe(box);
+  });
+
+  it("keeps a 44px target on the checkbox at both widths", () => {
+    render(
+      <SplitShareRow
+        person="Ana"
+        amount="40 lei"
+        checked
+        onCheckedChange={() => {}}
+        includeLabel="Include Ana"
+      />
+    );
+    // 24px box + 2×10px on mobile; 20px box + 2×12px from md.
+    const box = screen.getByRole("checkbox");
+    expect(box.className).toContain("before:-inset-2.5");
+    expect(box.className).toContain("md:before:-inset-3");
+  });
+
+  it("gives the editable amount a hairline and a focus ring so it reads as a field", () => {
+    render(
+      <SplitShareRow
+        person="Ana"
+        amount="40 lei"
+        editable
+        amountValue={40}
+        onAmountChange={() => {}}
+        amountLabel="Ana's share"
+      />
+    );
+    const input = screen.getByLabelText("Ana's share");
+    expect(input.className).toContain("border-border");
+    expect(input.className).toContain("focus-within:ring-2");
+  });
+});
+
+describe("money type", () => {
+  it("sets the numeral in the bold sans, never in mono", () => {
+    // The board draws the numeral in the bold sans and only the currency
+    // suffix in mono; `font-mono` on the slot would change the numeral's face.
+    render(
+      <TableLedgerCard
+        person="Adrian"
+        total="96"
+        rows={[{ id: "1", label: "Ciorbă de burtă", amount: "32" }]}
+      />
+    );
+    expect(screen.getByText("96").className).not.toContain("font-mono");
+    expect(screen.getByText("96").className).toContain("tabular-nums");
+    expect(screen.getByText("32").className).not.toContain("font-mono");
+  });
+
+  it("does the same in the pick row and the reconcile bar", () => {
+    render(<MenuPickRow label="Papanași" price="28" addLabel="Add it" />);
+    expect(screen.getByText("28").className).not.toContain("font-mono");
+
+    render(<ReconcileBar tone="ok" message="ok" current="120" target="120" />);
+    const figures = screen.getByText("/").parentElement;
+    expect(figures?.className).not.toContain("font-mono");
+    expect(figures?.className).toContain("tabular-nums");
+  });
+});
+
+describe("TableLedgerCard", () => {
+  it("draws the header, the total and the items", () => {
+    render(
+      <TableLedgerCard
+        person="Adrian"
+        meta="2 items + share"
+        total="96 lei"
+        rows={[
+          { id: "1", label: "Ciorbă de burtă", amount: "32 lei" },
+          { id: "2", label: "Zacuscă de casă", amount: "24 lei" },
+        ]}
+        labels={{ rows: "Adrian's items" }}
+      />
+    );
+    const list = screen.getByRole("list", { name: "Adrian's items" });
+    expect(within(list).getAllByRole("listitem")).toHaveLength(2);
+    expect(screen.getByText("96 lei").className).toContain("tabular-nums");
+  });
+
+  it("marks a remote change in place instead of re-sorting", () => {
+    const { container } = render(<TableLedgerCard state="updated" person="Bruno" total="150 lei" />);
+    const card = container.querySelector('[data-slot="table-ledger-card"]');
+    expect(card).toHaveAttribute("data-state", "updated");
+    expect(card?.className).toContain("border-primary");
+  });
+
+  it("takes the dashed accent ground while a drag is over it", () => {
+    const { container } = render(<TableLedgerCard state="drop-active" person="Ana" />);
+    const card = container.querySelector('[data-slot="table-ledger-card"]');
+    expect(card?.className).toContain("border-dashed");
+    expect(card?.className).toContain("bg-accent-subtle");
+  });
+
+  it("renders the header alone when there are no rows — the T4 drop target", () => {
+    const { container } = render(<TableLedgerCard state="drop-idle" person="Ana" total="28 lei" />);
+    expect(container.querySelector('[data-slot="table-ledger-rows"]')).toBeNull();
+  });
+
+  it("lets a row show a per-head line instead of a price", () => {
+    render(
+      <TableLedgerCard
+        person="Shared"
+        rows={[{ id: "w", label: "Fetească Neagră", amount: "120 lei", trailing: "40 lei each" }]}
+      />
+    );
+    expect(screen.getByText("40 lei each")).toBeInTheDocument();
+    expect(screen.queryByText("120 lei")).toBeNull();
+  });
+});
+
+describe("TableTriggerBand", () => {
+  it("is one link, and the wide screen's action is decorative inside it", () => {
+    render(
+      <TableTriggerBand
+        href="/t/8f3c1a"
+        title="You're at Table 18"
+        meta="3 people · 367 lei so far"
+        action={<span>Open the table</span>}
+      />
+    );
+    const link = screen.getByRole("link", { name: /You're at Table 18/ });
+    expect(link).toHaveAttribute("href", "/t/8f3c1a");
+    // One control, not a button nested in a link.
+    expect(screen.queryByRole("button")).toBeNull();
+    expect(link.querySelector('[data-slot="table-trigger-action"]')).toHaveAttribute("aria-hidden");
+  });
+
+  it("takes the app's link component when one is given", () => {
+    const Link = ({ href, ...rest }: { href: string }) => <a data-router="" href={href} {...rest} />;
+    render(<TableTriggerBand href="/t/1" title="Table 18" linkComponent={Link} />);
+    expect(screen.getByRole("link")).toHaveAttribute("data-router");
+  });
+});
+
+describe("MenuPickRow", () => {
+  it("adds a unit on tap and reports its state to assistive tech", async () => {
+    const onToggle = vi.fn();
+    render(
+      <MenuPickRow
+        label="Papanași"
+        price="28 lei"
+        onToggle={onToggle}
+        addLabel="Add Papanași"
+        removeLabel="Remove Papanași"
+      />
+    );
+    const control = screen.getByRole("button", { name: "Add Papanași" });
+    expect(control).toHaveAttribute("aria-pressed", "false");
+    await userEvent.click(control);
+    expect(onToggle).toHaveBeenCalledOnce();
+  });
+
+  it("names the control for removal once the dish is on the table", () => {
+    render(
+      <MenuPickRow
+        label="Papanași"
+        price="28 lei"
+        selected
+        addLabel="Add Papanași"
+        removeLabel="Remove Papanași"
+      />
+    );
+    expect(screen.getByRole("button", { name: "Remove Papanași" })).toHaveAttribute(
+      "aria-pressed",
+      "true"
+    );
+  });
+
+  it("keeps a 44px target around the drawn disc", () => {
+    render(<MenuPickRow label="Papanași" price="28 lei" addLabel="Add it" />);
+    expect(screen.getByRole("button").className).toContain("size-11");
+  });
+
+  it("does not make the whole row a target", () => {
+    const { container } = render(<MenuPickRow label="Papanași" price="28 lei" addLabel="Add it" />);
+    const row = container.querySelector('[data-slot="menu-pick-row"]');
+    expect(row?.tagName).toBe("DIV");
+    expect(row).not.toHaveAttribute("onclick");
+  });
+});
+
+describe("ActivityRow", () => {
+  it("leads with the actor's avatar when an event has one", () => {
+    render(
+      <ActivityList>
+        <ActivityRow
+          avatar={
+            <Avatar size="sm" tone="teal">
+              <AvatarFallback>B</AvatarFallback>
+            </Avatar>
+          }
+          body="Bruno added Tochitură ardelenească"
+          time="9 min ago"
+        />
+      </ActivityList>
+    );
+    expect(screen.getByText("B")).toBeInTheDocument();
+    expect(screen.getByText("9 min ago")).toBeInTheDocument();
+  });
+
+  it("falls back to a quiet glyph disc for an event with no actor", () => {
+    const { container } = render(
+      <ActivityList>
+        <ActivityRow icon={<Users aria-hidden />} body="Fetească Neagră split between 3" time="18 min ago" />
+      </ActivityList>
+    );
+    expect(container.querySelector("svg")).toBeInTheDocument();
+  });
+
+  it("is a real list, so a screen reader counts the events", () => {
+    render(
+      <ActivityList aria-label="Table activity">
+        <ActivityRow body="one" time="now" />
+        <ActivityRow body="two" time="now" />
+      </ActivityList>
+    );
+    const list = screen.getByRole("list", { name: "Table activity" });
+    expect(within(list).getAllByRole("listitem")).toHaveLength(2);
+  });
+});
+
+describe("QrPanel", () => {
+  it("keeps the light plate in dark mode, because a reader needs it to decode", () => {
+    const { container } = render(
+      <QrPanel>
+        <svg />
+      </QrPanel>
+    );
+    const plate = container.querySelector('[data-slot="qr-panel-plate"]');
+    expect(plate?.className).toContain("bg-white");
+    expect(plate?.className).not.toContain("dark:");
+    // A themed border would be a dark ring on an always-white plate.
+    expect(plate?.className).toContain("border-black/10");
+  });
+
+  it("puts the caption outside the plate, on the sheet's own ground", () => {
+    const { container } = render(
+      <QrPanel caption="Scan with a phone camera to join">
+        <svg />
+      </QrPanel>
+    );
+    const caption = screen.getByText("Scan with a phone camera to join");
+    expect(container.querySelector('[data-slot="qr-panel-plate"]')).not.toContainElement(caption);
+    // Outside the white plate it can use the theme's own muted ink.
+    expect(caption.className).toContain("text-muted-foreground");
+  });
+});

package/src/components/split-share-row.stories.tsx

@@ -0,0 +1,114 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Avatar, AvatarFallback } from "./avatar";
+import { ReconcileBar } from "./reconcile-bar";
+import { SplitShareRow } from "./split-share-row";
+
+const meta: Meta<typeof SplitShareRow> = {
+  title: "Shared table/SplitShareRow",
+  component: SplitShareRow,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "One person's share of a split item. A full-width row with the check on the trailing edge under md; a tile in a three-up grid with a square checkbox leading from md. Same DOM, CSS only.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SplitShareRow>;
+
+const people = [
+  { name: "Adrian", initial: "A", tone: "brown" as const },
+  { name: "Bruno", initial: "B", tone: "teal" as const },
+  { name: "Ana", initial: "A", tone: "green" as const },
+];
+
+function person(p: (typeof people)[number]) {
+  return (
+    <span className="flex items-center gap-2.5">
+      <Avatar size="sm" tone={p.tone}>
+        <AvatarFallback>{p.initial}</AvatarFallback>
+      </Avatar>
+      <span className="truncate text-[14px] font-bold">{p.name}</span>
+    </span>
+  );
+}
+
+/** T6 — Equally: everyone checked, the remainder handed out in join order. */
+export const Equally: Story = {
+  render: () => {
+    const [checked, setChecked] = React.useState([true, true, true]);
+    return (
+      <div className="grid gap-2 md:grid-cols-3">
+        {people.map((p, i) => (
+          <SplitShareRow
+            key={p.name}
+            person={person(p)}
+            amount="40 lei"
+            checked={checked[i]}
+            onCheckedChange={(next) =>
+              setChecked((prev) => prev.map((c, j) => (j === i ? next : c)))
+            }
+            includeLabel={`Include ${p.name} in the split`}
+          />
+        ))}
+      </div>
+    );
+  },
+};
+
+/** T6 — Custom: the amounts become editable and must still reconcile. */
+export const Custom: Story = {
+  render: () => {
+    const [amounts, setAmounts] = React.useState<(number | null)[]>([50, 40, 30]);
+    const sum = amounts.reduce<number>((total, value) => total + (value ?? 0), 0);
+    return (
+      <div className="grid gap-2">
+        <div className="grid gap-2 md:grid-cols-3">
+          {people.map((p, i) => (
+            <SplitShareRow
+              key={p.name}
+              person={person(p)}
+              amount={`${amounts[i] ?? 0} lei`}
+              editable
+              amountValue={amounts[i]}
+              onAmountChange={(next) =>
+                setAmounts((prev) => prev.map((a, j) => (j === i ? next : a)))
+              }
+              amountLabel={`${p.name}'s share`}
+            />
+          ))}
+        </div>
+        <ReconcileBar
+          tone={sum === 120 ? "ok" : "short"}
+          message={
+            sum === 120 ? (
+              "The amounts add up"
+            ) : (
+              <>
+                <b>{Math.abs(120 - sum)} lei {sum < 120 ? "short" : "over"}</b> of the item total
+              </>
+            )
+          }
+          current={String(sum)}
+          target="120"
+        />
+      </div>
+    );
+  },
+};
+
+/** Someone left out of the split: the row dims, and the amount goes with it. */
+export const Excluded: Story = {
+  args: {
+    person: person(people[1]),
+    amount: "0 lei",
+    checked: false,
+    onCheckedChange: () => {},
+    includeLabel: "Include Bruno in the split",
+  },
+};