@bearmenu/ui 0.8.4 → 0.8.7

package/src/components/events-empty-state.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { CalendarOff } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * EventsEmptyState — "nothing on in this city".
+ *
+ * BUILT FRESH, NOT COMPOSED FROM `empty-state.tsx`: that component's actions
+ * only take `onClick` (no `href`, no per-action icon, no link-component
+ * injection), and its buttons render through the shared `<Button>` variants,
+ * none of which produce this design's `bg-foreground`/`text-background`
+ * primary chip. Both actions here need to render either an `<a>` (via the
+ * same injected `linkComponent` contract as the rest of `Events/*`) or a
+ * `<button>`, which `empty-state.tsx` has no path for. Reusing it would mean
+ * bolting a second, incompatible action API onto it — the "compose it if it
+ * fits" bar isn't met here.
+ *
+ * Illustration follows the DS image-fallback rule: a real photo when
+ * `illustrationUrl` is given, otherwise a tinted gradient circle with a
+ * drop-shadowed icon — never a bare icon on a flat background.
+ */
+
+export type EventsEmptyStateLinkProps = {
+  href: string;
+  className?: string;
+  children: ReactNode;
+  onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+
+function DefaultLink({ href, ...props }: EventsEmptyStateLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type EventsEmptyStateAction = {
+  label: string;
+  icon?: ReactNode;
+  href?: string;
+  onClick?: () => void;
+};
+
+export type EventsEmptyStateProps = {
+  title: string;
+  body: string;
+  illustrationUrl?: string;
+  primaryAction?: EventsEmptyStateAction;
+  secondaryAction?: EventsEmptyStateAction;
+  linkComponent?: React.ComponentType<EventsEmptyStateLinkProps>;
+  className?: string;
+};
+
+const ACTION_BASE =
+  "inline-flex h-11 w-full items-center justify-center gap-2 rounded-xl border px-5 text-sm font-semibold transition-colors duration-150 motion-reduce:transition-none cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:w-auto";
+
+const PRIMARY_ACTION_CLASSES = cn(
+  ACTION_BASE,
+  "border-foreground bg-foreground text-background hover:bg-foreground/90"
+);
+
+const SECONDARY_ACTION_CLASSES = cn(
+  ACTION_BASE,
+  "border-border bg-background text-foreground hover:bg-muted"
+);
+
+function renderAction(
+  action: EventsEmptyStateAction | undefined,
+  classes: string,
+  LinkComponent: React.ComponentType<EventsEmptyStateLinkProps>
+) {
+  if (!action) return null;
+
+  if (action.href) {
+    return (
+      <LinkComponent
+        href={action.href}
+        className={classes}
+        onClick={action.onClick ? () => action.onClick?.() : undefined}
+      >
+        {action.icon}
+        {action.label}
+      </LinkComponent>
+    );
+  }
+
+  return (
+    <button type="button" className={classes} onClick={action.onClick}>
+      {action.icon}
+      {action.label}
+    </button>
+  );
+}
+
+export function EventsEmptyState({
+  title,
+  body,
+  illustrationUrl,
+  primaryAction,
+  secondaryAction,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: EventsEmptyStateProps) {
+  return (
+    <div
+      role="status"
+      className={cn("flex flex-col items-center gap-[14px] pt-[44px] pb-[30px] text-center", className)}
+    >
+      <div className="h-24 w-24 shrink-0 overflow-hidden rounded-full sm:h-[120px] sm:w-[120px]">
+        {illustrationUrl ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img src={illustrationUrl} alt="" className="h-full w-full object-cover" />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-primary/15 to-primary/5">
+            <CalendarOff className="h-8 w-8 text-primary drop-shadow-sm sm:h-10 sm:w-10" aria-hidden />
+          </div>
+        )}
+      </div>
+
+      <h3 className="text-[18px] font-extrabold tracking-[-0.02em] sm:text-[20px]">{title}</h3>
+
+      <p className="max-w-[460px] text-[13px] leading-[1.6] text-muted-foreground sm:text-[13.5px]">{body}</p>
+
+      {(primaryAction || secondaryAction) && (
+        <div className="flex w-full flex-col gap-[9px] pt-1 sm:w-auto sm:flex-row sm:gap-[10px]">
+          {renderAction(primaryAction, PRIMARY_ACTION_CLASSES, LinkComponent)}
+          {renderAction(secondaryAction, SECONDARY_ACTION_CLASSES, LinkComponent)}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/facet-group.stories.tsx

@@ -0,0 +1,247 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Banknote, CalendarDays, MapPin, Tag } from "lucide-react";
+import { FacetGroup, FacetGroupSkeleton } from "./facet-group";
+import type { FacetOption } from "./facet-group";
+
+const meta: Meta<typeof FacetGroup> = {
+  title: "Events/FacetGroup",
+  component: FacetGroup,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[260px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "One filter group in the events sidebar or the mobile filter sheet. Each row is a real, keyboard-operable input (a visually-hidden native `<input>` plus a styled decorative box) grouped under a `<fieldset>`/`<legend>`. `selection=\"single\"` swaps checkboxes for radios sharing one `name`; `size` swaps row density without moving the box or the count column.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FacetGroup>;
+
+const priceOptions: FacetOption[] = [
+  { id: "free", label: "Free", count: 12 },
+  { id: "under-50", label: "Under 50 RON", count: 28, checked: true },
+  { id: "50-100", label: "50–100 RON", count: 19 },
+  { id: "over-100", label: "Over 100 RON", count: 4 },
+];
+
+const venueOptions: FacetOption[] = [
+  {
+    id: "control",
+    label: "Club Control Bucharest — Str. Constantin Mille 4",
+    count: 1287,
+    checked: true,
+  },
+  { id: "expirat", label: "Expirat Halele Carol", count: 96 },
+  { id: "quantic", label: "Quantic Pub & Concert Venue, Bulevardul Iuliu Maniu 128", count: 42 },
+  { id: "linea", label: "Linea", count: 7 },
+];
+
+const whenOptions: FacetOption[] = [
+  { id: "today", label: "Today", count: 14 },
+  { id: "tomorrow", label: "Tomorrow", count: 9 },
+  { id: "weekend", label: "This weekend", count: 31, checked: true },
+  { id: "all", label: "Next 14 days", count: 128 },
+];
+
+export const Default: Story = {
+  args: { title: "Price", options: priceOptions },
+};
+
+export const WithShowAll: Story = {
+  args: {
+    title: "Category",
+    options: [
+      { id: "music", label: "Live music", count: 34, checked: true },
+      { id: "nightlife", label: "Nightlife", count: 22 },
+      { id: "comedy", label: "Comedy", count: 9 },
+      { id: "food", label: "Food & drink", count: 15 },
+    ],
+    moreLabel: "Show all",
+  },
+};
+
+/**
+ * Single-select — the events list's WHEN scope holds exactly one value, so the
+ * rows are radios sharing one `name` with a dot instead of a check glyph.
+ * The 16px box, the focus ring and the count column are unchanged, so a group
+ * can switch mode without anything moving.
+ */
+export const SingleSelect: Story = {
+  args: {
+    title: "When",
+    icon: CalendarDays,
+    options: whenOptions,
+    selection: "single",
+    name: "when-scope",
+  },
+};
+
+/** Interactive single-select — picking one option releases the previous one, natively. */
+export const SingleSelectInteractive: Story = {
+  render: () => {
+    const [scope, setScope] = useState("weekend");
+    return (
+      <FacetGroup
+        title="When"
+        icon={CalendarDays}
+        selection="single"
+        name="when-scope-interactive"
+        options={whenOptions.map((o) => ({ ...o, checked: o.id === scope }))}
+        onToggle={(id) => setScope(id)}
+      />
+    );
+  },
+};
+
+/** Multi- and single-select side by side — the two row shapes must line up exactly. */
+export const SelectionModesCompared: Story = {
+  render: () => (
+    <div>
+      <FacetGroup
+        title="When"
+        selection="single"
+        name="when-compare"
+        options={whenOptions}
+        className="pt-0 [&>[data-slot=separator]]:hidden"
+      />
+      <FacetGroup title="Price" options={priceOptions} />
+    </div>
+  ),
+};
+
+/**
+ * `compact` — ~32px rows with a hover-lit hit area, for a dense pointer-driven
+ * desktop sidebar. Never use it in the mobile sheet: it is below the 44px
+ * WCAG 2.5.5 target floor that the default `comfortable` clears.
+ */
+export const Compact: Story = {
+  args: { title: "Price", options: priceOptions, size: "compact" },
+};
+
+/** Both densities stacked, so the density difference is visible at a glance. */
+export const CompactVsComfortable: Story = {
+  render: () => (
+    <div>
+      <FacetGroup
+        title="Compact"
+        options={priceOptions}
+        size="compact"
+        className="pt-0 [&>[data-slot=separator]]:hidden"
+      />
+      <FacetGroup title="Comfortable (default)" options={priceOptions} />
+    </div>
+  ),
+};
+
+/** Legend icons — decorative only (`aria-hidden`); the title stays the accessible name. */
+export const WithLegendIcons: Story = {
+  render: () => (
+    <div>
+      <FacetGroup
+        title="When"
+        icon={CalendarDays}
+        selection="single"
+        name="when-icons"
+        options={whenOptions}
+        className="pt-0 [&>[data-slot=separator]]:hidden"
+      />
+      <FacetGroup title="Price" icon={Banknote} options={priceOptions} />
+      <FacetGroup
+        title="Category"
+        icon={Tag}
+        options={[
+          { id: "music", label: "Live music", count: 34, checked: true },
+          { id: "nightlife", label: "Nightlife", count: 22 },
+          { id: "comedy", label: "Comedy", count: 9 },
+        ]}
+        moreLabel="Show all"
+      />
+    </div>
+  ),
+};
+
+/**
+ * Long labels truncate with an ellipsis and keep their full text in a `title`
+ * tooltip — the count column never gets squeezed off the right edge and the
+ * row never wraps to two lines.
+ */
+export const LongLabels: Story = {
+  args: { title: "Venue", icon: MapPin, options: venueOptions },
+};
+
+/** The same long labels in `compact`, where the row box is tighter still. */
+export const LongLabelsCompact: Story = {
+  args: { title: "Venue", icon: MapPin, options: venueOptions, size: "compact" },
+};
+
+/** Loading state — identical geometry to `Default`'s four rows. */
+export const Loading: Story = {
+  render: () => <FacetGroupSkeleton optionCount={4} className="pt-0 [&>[data-slot=separator]]:hidden" />,
+};
+
+/** Reserves space for the trailing "Show all" placeholder too. */
+export const LoadingWithShowAll: Story = {
+  render: () => (
+    <FacetGroupSkeleton optionCount={4} showMore className="pt-0 [&>[data-slot=separator]]:hidden" />
+  ),
+};
+
+/** Loading above loaded, so any geometry drift is visible at a glance. */
+export const LoadingVsLoaded: Story = {
+  render: () => (
+    <div>
+      <FacetGroupSkeleton
+        optionCount={priceOptions.length}
+        className="pt-0 [&>[data-slot=separator]]:hidden"
+      />
+      <FacetGroup title="Price" options={priceOptions} />
+    </div>
+  ),
+};
+
+/** The skeleton takes `size` too, or rows jump when data lands in a compact sidebar. */
+export const LoadingVsLoadedCompact: Story = {
+  render: () => (
+    <div>
+      <FacetGroupSkeleton
+        optionCount={priceOptions.length}
+        size="compact"
+        className="pt-0 [&>[data-slot=separator]]:hidden"
+      />
+      <FacetGroup title="Price" options={priceOptions} size="compact" />
+    </div>
+  ),
+};
+
+/** Two groups stacked, as the sidebar actually renders them. */
+export const SidebarStack: Story = {
+  render: () => (
+    <div>
+      <FacetGroup
+        title="Price"
+        options={priceOptions}
+        className="pt-0 [&>[data-slot=separator]]:hidden"
+      />
+      <FacetGroup
+        title="Category"
+        options={[
+          { id: "music", label: "Live music", count: 34, checked: true },
+          { id: "nightlife", label: "Nightlife", count: 22 },
+          { id: "comedy", label: "Comedy", count: 9 },
+        ]}
+        moreLabel="Show all"
+      />
+    </div>
+  ),
+};

package/src/components/facet-group.test.tsx

@@ -0,0 +1,225 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { CalendarDays } from "lucide-react";
+import { FacetGroup } from "./facet-group";
+import type { FacetOption } from "./facet-group";
+
+const whenOptions: FacetOption[] = [
+  { id: "today", label: "Today", count: 14 },
+  { id: "tomorrow", label: "Tomorrow", count: 9 },
+  { id: "weekend", label: "This weekend", count: 31, checked: true },
+  { id: "all", label: "Next 14 days", count: 128 },
+];
+
+const priceOptions: FacetOption[] = [
+  { id: "free", label: "Free", count: 12 },
+  { id: "under-50", label: "Under 50 RON", count: 28, checked: true },
+];
+
+describe("FacetGroup", () => {
+  describe("selection mode", () => {
+    it("renders checkboxes by default", () => {
+      render(<FacetGroup title="Price" options={priceOptions} />);
+
+      expect(screen.getAllByRole("checkbox")).toHaveLength(2);
+      expect(screen.queryAllByRole("radio")).toHaveLength(0);
+    });
+
+    // A single-valued facet rendered as checkboxes lies twice over: ticking one
+    // silently unticks another, and the a11y tree reports N independent boxes.
+    it("renders radios sharing one name under selection=\"single\"", () => {
+      render(
+        <FacetGroup title="When" options={whenOptions} selection="single" name="when-scope" />
+      );
+
+      const radios = screen.getAllByRole("radio");
+      expect(radios).toHaveLength(4);
+      expect(screen.queryAllByRole("checkbox")).toHaveLength(0);
+      for (const radio of radios) {
+        expect(radio).toHaveAttribute("name", "when-scope");
+      }
+    });
+
+    it("marks exactly the checked option as selected", () => {
+      render(
+        <FacetGroup title="When" options={whenOptions} selection="single" name="when-scope" />
+      );
+
+      expect(screen.getByRole("radio", { name: /This weekend/ })).toBeChecked();
+      expect(screen.getByRole("radio", { name: /Today/ })).not.toBeChecked();
+    });
+
+    // Without a fallback every unnamed radio on the page joins one anonymous
+    // group, so picking in one facet would clear an unrelated one.
+    it("derives a per-instance name when none is passed", () => {
+      render(
+        <div>
+          <FacetGroup title="When" options={whenOptions} selection="single" />
+          <FacetGroup title="Also when" options={whenOptions} selection="single" />
+        </div>
+      );
+
+      const names = screen.getAllByRole("radio").map((radio) => radio.getAttribute("name"));
+      expect(names.every((name) => !!name)).toBe(true);
+      expect(new Set(names).size).toBe(2);
+    });
+
+    it("reports the newly picked radio to onToggle", async () => {
+      const onToggle = vi.fn();
+      render(
+        <FacetGroup
+          title="When"
+          options={whenOptions}
+          selection="single"
+          name="when-scope"
+          onToggle={onToggle}
+        />
+      );
+
+      await userEvent.click(screen.getByRole("radio", { name: /Today/ }));
+
+      expect(onToggle).toHaveBeenCalledWith("today", true);
+    });
+
+    it("reports both directions to onToggle for checkboxes", async () => {
+      const onToggle = vi.fn();
+      render(<FacetGroup title="Price" options={priceOptions} onToggle={onToggle} />);
+
+      await userEvent.click(screen.getByRole("checkbox", { name: /Free/ }));
+      expect(onToggle).toHaveBeenCalledWith("free", true);
+
+      await userEvent.click(screen.getByRole("checkbox", { name: /Under 50 RON/ }));
+      expect(onToggle).toHaveBeenCalledWith("under-50", false);
+    });
+  });
+
+  describe("row density", () => {
+    // jsdom does no layout, so this asserts the class that carries the height
+    // rather than a measured pixel box. min-h-11 = 2.75rem = 44px, the WCAG
+    // 2.5.5 target floor the mobile filter sheet has to clear.
+    it("defaults to comfortable rows that clear the 44px target floor", () => {
+      render(<FacetGroup title="Price" options={priceOptions} />);
+
+      for (const input of screen.getAllByRole("checkbox")) {
+        expect(input.closest("label")).toHaveClass("min-h-11");
+      }
+    });
+
+    it("keeps the 44px floor under selection=\"single\" too", () => {
+      render(
+        <FacetGroup title="When" options={whenOptions} selection="single" name="when-scope" />
+      );
+
+      for (const input of screen.getAllByRole("radio")) {
+        expect(input.closest("label")).toHaveClass("min-h-11");
+      }
+    });
+
+    it("drops the min-height and pads instead under size=\"compact\"", () => {
+      render(<FacetGroup title="Price" options={priceOptions} size="compact" />);
+
+      for (const input of screen.getAllByRole("checkbox")) {
+        const row = input.closest("label");
+        expect(row).not.toHaveClass("min-h-11");
+        expect(row).toHaveClass("py-1");
+      }
+    });
+  });
+
+  describe("dividers", () => {
+    it("draws no rule of its own", () => {
+      // A `<legend>` sits in the fieldset's BORDER box, so an absolutely
+      // positioned `top-0` rule landed between a group's label and its own
+      // options — cutting the group in half rather than dividing it from the
+      // next, and giving the first group a rule above nothing. Dividers between
+      // siblings belong to whatever owns the order, which is the caller.
+      const { container } = render(<FacetGroup title="Price" options={priceOptions} />);
+      expect(container.querySelector('[data-slot="separator"]')).toBeNull();
+    });
+  });
+
+  describe("collapsible", () => {
+    it("is not collapsible by default — no toggle, options exposed", () => {
+      render(<FacetGroup title="Price" options={priceOptions} />);
+      expect(screen.queryByRole("button", { name: /price/i })).toBeNull();
+      expect(screen.getAllByRole("checkbox")).toHaveLength(priceOptions.length);
+    });
+
+    it("toggles its options and reports state on the legend button", async () => {
+      const user = userEvent.setup();
+      render(<FacetGroup title="Price" options={priceOptions} collapsible />);
+
+      const toggle = screen.getByRole("button", { name: /price/i });
+      expect(toggle).toHaveAttribute("aria-expanded", "true");
+
+      await user.click(toggle);
+      expect(toggle).toHaveAttribute("aria-expanded", "false");
+      // `hidden` takes them out of the accessibility tree, which is the point —
+      // a collapsed group must not leave its controls reachable by keyboard.
+      expect(screen.queryAllByRole("checkbox")).toHaveLength(0);
+
+      await user.click(toggle);
+      expect(toggle).toHaveAttribute("aria-expanded", "true");
+      expect(screen.getAllByRole("checkbox")).toHaveLength(priceOptions.length);
+    });
+
+    it("honours defaultOpen={false}", () => {
+      render(<FacetGroup title="Price" options={priceOptions} collapsible defaultOpen={false} />);
+      expect(screen.getByRole("button", { name: /price/i })).toHaveAttribute(
+        "aria-expanded",
+        "false"
+      );
+      expect(screen.queryAllByRole("checkbox")).toHaveLength(0);
+    });
+
+    it("keeps the title as the group's accessible name when collapsible", () => {
+      render(<FacetGroup title="Price" options={priceOptions} collapsible />);
+      expect(screen.getByRole("group", { name: /price/i })).toBeInTheDocument();
+    });
+  });
+
+  describe("legend", () => {
+    it("keeps the title as the accessible group name", () => {
+      render(<FacetGroup title="When" icon={CalendarDays} options={whenOptions} />);
+
+      expect(screen.getByRole("group", { name: "When" })).toBeInTheDocument();
+    });
+
+    it("renders the icon as decorative only", () => {
+      const { container } = render(
+        <FacetGroup title="When" icon={CalendarDays} options={whenOptions} />
+      );
+
+      const icon = container.querySelector("legend svg");
+      expect(icon).not.toBeNull();
+      expect(icon).toHaveAttribute("aria-hidden", "true");
+    });
+  });
+
+  describe("labels and counts", () => {
+    it("truncates the label and exposes the full text in a title tooltip", () => {
+      const label = "Quantic Pub & Concert Venue, Bulevardul Iuliu Maniu 128";
+      render(<FacetGroup title="Venue" options={[{ id: "q", label, count: 42 }]} />);
+
+      const labelSpan = screen.getByText(label);
+      expect(labelSpan).toHaveClass("truncate", "min-w-0");
+      expect(labelSpan).toHaveAttribute("title", label);
+    });
+
+    it("keeps the count from shrinking", () => {
+      render(<FacetGroup title="Price" options={priceOptions} />);
+
+      expect(screen.getByText("12")).toHaveClass("shrink-0");
+    });
+  });
+
+  it("spreads rest props onto the fieldset", () => {
+    render(<FacetGroup title="When" options={whenOptions} data-facet-group="when" />);
+
+    expect(screen.getByRole("group", { name: "When" })).toHaveAttribute(
+      "data-facet-group",
+      "when"
+    );
+  });
+});