@bearmenu/ui 0.8.9 → 0.8.11

package/src/components/menu-filter-chips.tsx

@@ -0,0 +1,238 @@
+import { X } from "lucide-react";
+import { cn } from "../lib/utils";
+import { ScrollFade } from "./scroll-fade";
+import { Skeleton } from "./skeleton";
+import type { MenuFilterChip } from "./menu-types";
+
+/**
+ * MenuFilterChips — the intent page's filter row.
+ *
+ * ## One unit, one list that moves
+ *
+ * Every chip counts KITCHENS, whatever facet is behind it. A dietary chip reads
+ * "has a vegetarian dish" and counts venues; a dish-group chip reads "has a
+ * pizza" and counts venues. The earlier version mixed venue counts and dish
+ * counts in one row and became unreadable — you could not tell what a number
+ * was counting without reading the label that produced it. The unit is stated
+ * once, at the head of the row (`unitLabel`, e.g. "KITCHENS · 247"), and never
+ * again.
+ *
+ * ## A zero-count chip is dimmed, not disabled
+ *
+ * `empty` chips stay tappable. Pressing one swaps it in and drops whichever
+ * active filter conflicts with it, and the caller says which in a line beneath.
+ * Disabling it would refuse the reader the thing they asked for and give no
+ * reason; this way the row answers the question by being pressed. Facets the
+ * API says are unavailable for this intent are not passed in at all — not
+ * drawn, rather than drawn dead.
+ *
+ * ## The row scrolls; the escape hatch does not
+ *
+ * One line in every state. Chips scroll horizontally under a `<ScrollFade>`,
+ * and "More filters" is pinned opposite the unit label rather than wrapping,
+ * so the way out of a full row is always in the same place.
+ *
+ * Interactive: the consumer marks its own module `"use client"`.
+ */
+
+export type MenuFilterChipsProps = {
+  chips: MenuFilterChip[];
+  onToggle: (key: string) => void;
+  /** The unit and the current total, composed by the caller, e.g. "KITCHENS · 247". */
+  unitLabel?: string;
+  /** Opens the full filter sheet. Omit for a row where every facet is a chip. */
+  onMore?: () => void;
+  moreLabel?: string;
+  /**
+   * A glyph for the phone's icon-only "more filters" button.
+   *
+   * The label is the widest fixed element in the row — "More filters" is ~80px
+   * of a 358px viewport, and it is the one thing that never scrolls, so it eats
+   * the chips' runway on every phone. Given an icon, the button collapses to a
+   * square below `lg` and keeps `moreLabel` as its accessible name.
+   *
+   * A node rather than a name because the app owns its iconography, and this
+   * one is animated on press — the DS neither knows the glyph nor drives it.
+   */
+  moreIcon?: React.ReactNode;
+  /** Press handler for the icon button, e.g. to replay the glyph's animation. */
+  onMorePointerDown?: () => void;
+  /** Locale-aware integer formatter for the counts. Defaults to `String`. */
+  formatCount?: (value: number) => string;
+  /** Accessible name for the row. */
+  ariaLabel?: string;
+  className?: string;
+};
+
+export function MenuFilterChips({
+  chips,
+  onToggle,
+  unitLabel,
+  onMore,
+  moreLabel,
+  moreIcon,
+  onMorePointerDown,
+  formatCount = String,
+  ariaLabel,
+  className,
+}: MenuFilterChipsProps) {
+  return (
+    <div className={cn("relative flex items-center gap-2", className)}>
+      {/* Desktop only. It states a unit and a total that the section heading
+          directly below already gives in full ("The kitchens Cluj-Napoca rates
+          for Italian · 247"), and on a phone it is a fixed 110px bitten out of
+          the one row that needs every pixel to scroll. */}
+      {unitLabel && (
+        <span className="hidden shrink-0 pr-0.5 text-[11px] font-extrabold uppercase tracking-[0.1em] text-muted-foreground lg:inline">
+          {unitLabel}
+        </span>
+      )}
+
+      <ScrollFade
+        orientation="horizontal"
+        size="sm"
+        className="min-w-0 flex-1"
+        scrollClassName="scrollbar-hide"
+      >
+        <div className="flex items-center gap-2" role="group" aria-label={ariaLabel}>
+          {chips.map((chip) => (
+            <Chip
+              key={chip.key}
+              chip={chip}
+              onToggle={() => onToggle(chip.key)}
+              formatCount={formatCount}
+            />
+          ))}
+        </div>
+      </ScrollFade>
+
+      {onMore && (
+        <>
+          {/* One control, two shapes. On a phone it is a 40px square carrying
+              the caller's glyph, with `moreLabel` as its accessible name; from
+              `lg` it is the text link it has always been. Two elements rather
+              than one so neither has to carry the other's padding, and both
+              stay `shrink-0` against the scrolling chips. */}
+          {moreIcon && (
+            <button
+              type="button"
+              onClick={onMore}
+              onPointerDown={onMorePointerDown}
+              aria-label={moreLabel}
+              aria-haspopup="dialog"
+              className="inline-flex size-10 shrink-0 items-center justify-center rounded-full border border-border text-accent transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none lg:hidden"
+            >
+              {moreIcon}
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={onMore}
+            className={cn(
+              "shrink-0 rounded-md pl-2 text-[12.5px] font-bold text-accent transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+              moreIcon && "hidden lg:inline"
+            )}
+          >
+            {moreLabel}
+          </button>
+        </>
+      )}
+    </div>
+  );
+}
+
+function Chip({
+  chip,
+  onToggle,
+  formatCount,
+}: {
+  chip: MenuFilterChip;
+  onToggle: () => void;
+  formatCount: (value: number) => string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      aria-pressed={chip.active}
+      className={cn(
+        "inline-flex h-9 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full border px-4 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+        chip.active
+          ? "border-accent font-semibold text-accent shadow-[0_1px_2px_oklch(0.51_0.095_45_/_0.08)]"
+          : "border-border bg-card text-foreground hover:border-accent/40",
+        // Dimmed, never disabled — pressing it is how the reader finds out
+        // which active filter is in the way.
+        chip.empty && "opacity-45"
+      )}
+    >
+      {chip.icon}
+      {chip.label}
+      {chip.count !== undefined && (
+        <span className={cn("tabular-nums", chip.active ? "text-accent" : "text-muted-foreground")}>
+          {formatCount(chip.count)}
+        </span>
+      )}
+      {chip.active && <X className="h-3 w-3 shrink-0" aria-hidden />}
+    </button>
+  );
+}
+
+/**
+ * MenuFilterSummary — what the active filters did, and the way out.
+ *
+ * Sits under the row whenever anything is on. The sentence is composed by the
+ * caller because it is a real sentence in two languages ("Three filters · 34 of
+ * 247 kitchens are mid-range, have a vegetarian Italian dish, and are open
+ * now") and assembling it from fragments here would produce translated
+ * word-salad in one of them.
+ */
+export type MenuFilterSummaryProps = {
+  /** The composed sentence. */
+  summary: React.ReactNode;
+  clearLabel: string;
+  onClear: () => void;
+  className?: string;
+};
+
+export function MenuFilterSummary({
+  summary,
+  clearLabel,
+  onClear,
+  className,
+}: MenuFilterSummaryProps) {
+  return (
+    <div className={cn("flex flex-wrap items-center gap-2.5 pt-3.5", className)}>
+      <span className="text-[13px] text-muted-foreground [&_b]:font-bold [&_b]:text-foreground">
+        {summary}
+      </span>
+      <button
+        type="button"
+        onClick={onClear}
+        className="ml-auto shrink-0 rounded-md text-[12.5px] font-bold text-accent transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none"
+      >
+        {clearLabel}
+      </button>
+    </div>
+  );
+}
+
+// ─── Skeleton ───────────────────────────────────────────────────────────────
+
+/**
+ * One line, as the row itself renders — never a wrapped block.
+ *
+ * The widths vary deliberately: six identical pills read as a progress bar, and
+ * the real row is a set of labels of different lengths.
+ */
+const CHIP_WIDTHS = [128, 104, 96, 148, 112, 88];
+
+export function MenuFilterChipsSkeleton({ className }: { className?: string }) {
+  return (
+    <div className={cn("flex items-center gap-2 overflow-hidden", className)} aria-hidden>
+      <Skeleton className="h-3 w-[92px] shrink-0" />
+      {CHIP_WIDTHS.map((width, index) => (
+        <Skeleton key={index} className="h-9 shrink-0 rounded-full" style={{ width }} />
+      ))}
+    </div>
+  );
+}

package/src/components/menu-group-rows.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MenuGroupRows } from "./menu-group-rows";
+import { mockGradients } from "./menu-mocks";
+
+const meta: Meta<typeof MenuGroupRows> = {
+  title: "Menu/MenuGroupRows",
+  component: MenuGroupRows,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[380px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "What an intent consists of — the `dish_groups` facet on a cuisine page, digest tags and graded strengths on a going-out page. One component for both, because both are the same object: a facet value, its venue count and a range. The counts are VENUES: no endpoint counts dishes per cuisine, so *120* is a hundred and twenty kitchens that make a pizza, and the `meta` line is composed by the caller so it can say which.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuGroupRows>;
+
+export const Cuisine: Story = {
+  args: {
+    rows: [
+      { slug: "pizza", name: "Pizza", meta: "120 kitchens", rangeLabel: "30—68", href: "#", gradient: mockGradients.pasta },
+      { slug: "pasta", name: "Pasta", meta: "96 kitchens", rangeLabel: "38—84", href: "#", gradient: mockGradients.pasta },
+      { slug: "salad", name: "Salad", meta: "88 kitchens", rangeLabel: "22—56", href: "#", gradient: mockGradients.greens },
+      { slug: "beef", name: "Beef", meta: "77 kitchens", rangeLabel: "34—72", href: "#", gradient: mockGradients.meat },
+    ],
+  },
+};
+
+/** The going-out side: tags and strengths, and no price range behind them. */
+export const GoingOut: Story = {
+  args: {
+    rows: [
+      { slug: "cocktails", name: "Cocktails", meta: "63 places", href: "#", gradient: mockGradients.cocktail },
+      { slug: "late_night", name: "Open late", meta: "59 places", href: "#", gradient: mockGradients.meat },
+      { slug: "drinks_quality", name: "Strong on drinks", meta: "131 places", href: "#", gradient: mockGradients.sweet },
+    ],
+  },
+};
+
+/** No gradient and no range — the row still reads. */
+export const Bare: Story = {
+  args: { rows: [{ slug: "soup", name: "Soup", meta: "169 kitchens" }] },
+};

package/src/components/menu-group-rows.tsx

@@ -0,0 +1,133 @@
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./skeleton";
+import type { MenuLinkComponent, MenuLinkProps } from "./menu-types";
+
+/**
+ * MenuGroupRows — what an intent consists of.
+ *
+ * On a cuisine page this is the `dish_groups` facet narrowed by the cuisine
+ * ("Pizza · 120 kitchens · 30–68"); on a going-out page it is the digest tags
+ * and graded strengths ("Cocktails · 63 places"). One component for both,
+ * because both are the same object: a facet value, its venue count, and a range.
+ *
+ * ## The counts are VENUES, and the label has to say so
+ *
+ * There is no endpoint that counts dishes per cuisine — `/dishes` accepts
+ * `cuisine_slugs` and ignores it — so "120" here is a hundred and twenty
+ * kitchens that make a pizza, not a hundred and twenty pizzas. The `meta` line
+ * is composed by the caller precisely so that it can say which, in a language
+ * where the two words differ.
+ *
+ * ## Not `<ConceptCard>`
+ *
+ * That one is a cover-led card for a thing with a date and a venue. This is a
+ * row in a sidebar: a hue bar, a name, a count and a range. Giving it a cover
+ * would mean finding a photograph of "pasta", which is the kind of picture that
+ * makes a page look generated.
+ */
+
+/** @deprecated Alias of `MenuLinkProps`; kept for symmetry with the other menu surfaces. */
+export type MenuGroupRowsLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: MenuGroupRowsLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type MenuGroupRow = {
+  slug: string;
+  name: string;
+  /** Venue count line, e.g. "120 kitchens". Pluralised by the caller. */
+  meta: string;
+  /** Price range, already formatted, e.g. "30—68". Omitted where none is known. */
+  rangeLabel?: string;
+  href?: string;
+  /** Finished CSS gradient for the bar. A missing one falls back to the border colour. */
+  gradient?: string;
+};
+
+export type MenuGroupRowsProps = {
+  rows: MenuGroupRow[];
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+export function MenuGroupRows({
+  rows,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: MenuGroupRowsProps) {
+  return (
+    <ul className={cn("flex flex-col", className)}>
+      {rows.map((row) => {
+        const body = (
+          <>
+            <span
+              aria-hidden
+              className={cn(
+                "h-[34px] w-2 shrink-0 rounded-full",
+                !row.gradient && "bg-border"
+              )}
+              style={row.gradient ? { backgroundImage: row.gradient } : undefined}
+            />
+            <span className="min-w-0 flex-1">
+              <span className="block truncate text-sm font-bold">{row.name}</span>
+              <span className="mt-px block truncate text-[11.5px] text-muted-foreground">
+                {row.meta}
+              </span>
+            </span>
+            {row.rangeLabel && (
+              <span className="shrink-0 font-mono text-xs tabular-nums text-muted-foreground">
+                {row.rangeLabel}
+              </span>
+            )}
+            <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden />
+          </>
+        );
+
+        return (
+          <li key={row.slug} className="border-t border-border first:border-t-0">
+            {row.href ? (
+              <LinkComponent
+                href={row.href}
+                className="flex items-center gap-3 py-3 transition-colors hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring motion-reduce:transition-none"
+              >
+                {body}
+              </LinkComponent>
+            ) : (
+              <span className="flex items-center gap-3 py-3">{body}</span>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+// ─── Skeleton ───────────────────────────────────────────────────────────────
+
+export function MenuGroupRowsSkeleton({
+  rows = 5,
+  className,
+}: {
+  rows?: number;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex flex-col", className)} aria-hidden>
+      {Array.from({ length: rows }, (_, index) => (
+        <div
+          key={index}
+          className="flex items-center gap-3 border-t border-border py-3 first:border-t-0"
+        >
+          <Skeleton className="h-[34px] w-2 rounded-full" />
+          <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+            <Skeleton className="h-3.5 w-[50%]" />
+            <Skeleton className="h-3 w-[35%]" />
+          </div>
+          <Skeleton className="h-3 w-[52px]" />
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/menu-hub-hero.test.tsx

@@ -0,0 +1,39 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { MenuHubHero } from "./menu-hub-hero";
+import { VenueWall } from "./venue-wall";
+
+const tiles = Array.from({ length: 12 }, (_, i) => `/tiles/${i}.webp`);
+const mosaicImages = () => Array.from(document.querySelectorAll("img[loading='lazy']"));
+
+// The phone shows six tiles; the rest are `hidden` below `lg` so a lazy
+// still past the sixth is never requested. This is the request-count win
+// measured on the consumer's menu page — pinned so a cell-count edit cannot
+// silently put all twelve stills back on the phone's critical path.
+describe("MenuHubHero mosaic", () => {
+  it("shows the first six tiles on the phone and hides the rest until lg", () => {
+    render(<MenuHubHero headline="Every kitchen" tileUrls={tiles} />);
+    const images = mosaicImages();
+    expect(images).toHaveLength(28);
+    images.slice(0, 6).forEach((img) => expect(img).not.toHaveClass("hidden"));
+    images.slice(6).forEach((img) => expect(img).toHaveClass("hidden", "lg:block"));
+  });
+
+  it("cycles the tile list so the phone's six are the first six given", () => {
+    render(<MenuHubHero headline="Every kitchen" tileUrls={tiles.slice(0, 4)} />);
+    const srcs = mosaicImages()
+      .slice(0, 6)
+      .map((img) => img.getAttribute("src"));
+    expect(srcs).toEqual(["/tiles/0.webp", "/tiles/1.webp", "/tiles/2.webp", "/tiles/3.webp", "/tiles/0.webp", "/tiles/1.webp"]);
+  });
+});
+
+describe("VenueWall mosaic", () => {
+  it("follows the hero's rule: six on the phone, eighteen from lg", () => {
+    render(<VenueWall places={[]} headline="Every menu" tileUrls={tiles} />);
+    const images = mosaicImages();
+    expect(images).toHaveLength(18);
+    images.slice(0, 6).forEach((img) => expect(img).not.toHaveClass("hidden"));
+    images.slice(6).forEach((img) => expect(img).toHaveClass("hidden", "lg:block"));
+  });
+});

package/src/components/menu-hub-hero.tsx

@@ -65,6 +65,13 @@ export type MenuHubHeroProps = {
 
 /** Enough cells to fill the widest hero without the grid reading as a pattern. */
 const TEXTURE_CELLS = 28;
+/**
+ * The phone shows the first six, three across. Twenty-eight cells four across
+ * on a 375px hero were 90px tiles under a 90% scrim — a texture nobody could
+ * read as a room — and every one of the twelve stills downloaded to draw it.
+ * Six at ~125px are rooms again and cost six requests.
+ */
+const PHONE_CELLS = 6;
 
 export function MenuHubHero({
   kicker,
@@ -97,10 +104,12 @@ export function MenuHubHero({
       ) : (
         <div
           aria-hidden
-          className="absolute inset-0 grid auto-rows-fr grid-cols-4 gap-0.5 lg:grid-cols-7"
+          className="absolute inset-0 grid auto-rows-fr grid-cols-3 gap-0.5 lg:grid-cols-7"
         >
           {Array.from({ length: TEXTURE_CELLS }, (_, cell) => {
             const url = tileUrls?.length ? tileUrls[cell % tileUrls.length] : undefined;
+            // `hidden` keeps a lazy image from ever being requested on the phone.
+            const phone = cell < PHONE_CELLS ? undefined : "hidden lg:block";
 
             return url ? (
               // eslint-disable-next-line @next/next/no-img-element
@@ -110,12 +119,15 @@ export function MenuHubHero({
                 alt=""
                 loading="lazy"
                 decoding="async"
-                className="h-full w-full object-cover"
+                className={cn("h-full w-full object-cover", phone)}
               />
             ) : (
               <div
                 key={cell}
-                className="bg-[repeating-linear-gradient(135deg,oklch(0.6_0.02_55)_0_9px,oklch(0.68_0.016_58)_9px_18px)] opacity-[0.42]"
+                className={cn(
+                  "bg-[repeating-linear-gradient(135deg,oklch(0.6_0.02_55)_0_9px,oklch(0.68_0.016_58)_9px_18px)] opacity-[0.42]",
+                  phone
+                )}
               />
             );
           })}
@@ -133,7 +145,7 @@ export function MenuHubHero({
         className={cn(
           "absolute inset-0",
           tileUrls?.length || backgroundUrl
-            ? "bg-[linear-gradient(100deg,oklch(0.16_0.012_55_/_0.96)_0%,oklch(0.16_0.012_55_/_0.88)_52%,oklch(0.16_0.012_55_/_0.72)_100%)]"
+            ? "bg-[linear-gradient(100deg,oklch(0.16_0.012_55_/_0.96)_0%,oklch(0.16_0.012_55_/_0.86)_52%,oklch(0.16_0.012_55_/_0.6)_100%)]"
             : "bg-[linear-gradient(100deg,oklch(0.18_0.012_55_/_0.95)_0%,oklch(0.18_0.012_55_/_0.72)_52%,oklch(0.18_0.012_55_/_0.3)_100%)]"
         )}
       />
@@ -173,7 +185,7 @@ export function MenuHubHero({
         {(proof || action) && (
           <div className="mt-auto flex flex-wrap items-center gap-3 pt-5">
             {proof && (
-              <span className="inline-flex min-h-11 items-center gap-2.5 rounded-full bg-white/10 px-4 py-2 text-[13px] backdrop-blur-[6px]">
+              <span className="inline-flex min-h-11 items-center gap-2.5 rounded-full bg-white/[0.14] px-4 py-2 text-[13px]">
                 {proofIcon}
                 {proof}
               </span>

package/src/components/menu-index-header.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { UtensilsCrossed, Wine } from "lucide-react";
+import { MenuIndexHeader, MenuJumpStrip } from "./menu-index-header";
+import { SegmentedNav } from "./segmented-nav";
+import { mockIndexEntries } from "./menu-mocks";
+
+const scopeSwitch = (
+  <SegmentedNav
+    label="Menu scope"
+    activeId="food"
+    items={[
+      { id: "food", href: "/menu/cuisines", label: "Food", icon: <UtensilsCrossed className="h-4 w-4" /> },
+      { id: "drinks", href: "/menu/drinks/families", label: "Drinks", icon: <Wine className="h-4 w-4" /> },
+    ]}
+  />
+);
+
+const meta: Meta<typeof MenuIndexHeader> = {
+  title: "Menu/MenuIndexHeader",
+  component: MenuIndexHeader,
+  tags: ["autodocs"],
+  args: {
+    eyebrow: "MENU · CLUJ-NAPOCA",
+    title: "Browse by cuisine",
+    count: "38 cuisines",
+    subtitle: "Kitchens, the plates that define them, and what they cost.",
+    scopeSwitch,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The hub's own section title, opened up — so the page reads as that section rather than as somewhere new, which is what the *All 38 cuisines* link promised. The scope switch is a slot, not a prop set: the two scopes are two ROUTES, so the caller passes a `SegmentedNav` with real hrefs and the DS stays out of routing.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuIndexHeader>;
+
+export const Default: Story = {};
+
+export const Drinks: Story = {
+  args: {
+    title: "Where to go out",
+    count: "5 kinds of night",
+    subtitle: "Bars, the glass that defines them, and what it costs.",
+  },
+};
+
+/** The strip lists only the families drawn in full — otherwise it is the index, twice. */
+export const JumpStrip: StoryObj<typeof MenuJumpStrip> = {
+  render: () => <MenuJumpStrip entries={mockIndexEntries.slice(0, 8)} ariaLabel="Jump to a cuisine" />,
+};
+
+export const Mobile: Story = {
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};