@bearmenu/ui 0.8.9 → 0.8.11

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

@@ -0,0 +1,125 @@
+import { cn } from "../lib/utils";
+import { ScrollFade } from "./scroll-fade";
+import type { MenuIndexEntry, MenuLinkComponent, MenuLinkProps } from "./menu-types";
+
+/**
+ * MenuIndexHeader — the head of a browse index.
+ *
+ * The hub's own section title, opened up: the page reads as that section rather
+ * than as a new place, which is the whole promise of the "All 38 cuisines" link
+ * that got the reader here.
+ *
+ * The scope switch is a slot rather than a prop set, because the two scopes are
+ * two ROUTES — the caller passes a `<SegmentedNav>` with real hrefs and the DS
+ * stays out of routing.
+ */
+
+function DefaultLink({ href, ...props }: MenuLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type MenuIndexHeaderProps = {
+  /** Small caps over the title, e.g. "MENU · CLUJ-NAPOCA". */
+  eyebrow?: string;
+  title: string;
+  /** Sits beside the title, e.g. "38 cuisines". Pluralised by the caller. */
+  count?: string;
+  subtitle?: string;
+  /** The Food / Drinks control. A `<SegmentedNav>`, composed by the caller. */
+  scopeSwitch?: React.ReactNode;
+  className?: string;
+};
+
+export function MenuIndexHeader({
+  eyebrow,
+  title,
+  count,
+  subtitle,
+  scopeSwitch,
+  className,
+}: MenuIndexHeaderProps) {
+  return (
+    <div className={cn("flex flex-col gap-4 lg:flex-row lg:items-start lg:gap-8", className)}>
+      <div className="min-w-0 flex-1">
+        {eyebrow && (
+          <p className="text-[11px] font-bold uppercase tracking-[0.1em] text-muted-foreground">
+            {eyebrow}
+          </p>
+        )}
+        <h1 className="mt-1.5 text-[30px] font-black leading-[1.05] tracking-[-0.035em] lg:text-[40px]">
+          {title}
+          {count && (
+            <span className="ml-2.5 align-middle text-base font-semibold text-muted-foreground lg:text-lg">
+              {count}
+            </span>
+          )}
+        </h1>
+        {subtitle && (
+          <p className="mt-2 max-w-[60ch] text-sm text-muted-foreground">{subtitle}</p>
+        )}
+      </div>
+
+      {/* Sticky under the header on the phone: the list below is several screens
+          and a reader who wants the other scope should not have to scroll back
+          up to a control they can see from anywhere else on the page. */}
+      {scopeSwitch && (
+        <div className="sticky top-0 z-10 -mx-[var(--page-gutter)] bg-background px-[var(--page-gutter)] py-2 lg:static lg:mx-0 lg:bg-transparent lg:px-0 lg:py-0">
+          {scopeSwitch}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * MenuJumpStrip — the page's contents, as chips.
+ *
+ * It answers "move between families without going back to the hub", and it
+ * doubles as a table of contents: each chip carries the family's mark and its
+ * count, so the strip says how long the page is before the reader scrolls it.
+ *
+ * Only the families drawn in full belong here. A strip listing every value in
+ * the index below would be the index, twice.
+ */
+export type MenuJumpStripProps = {
+  entries: MenuIndexEntry[];
+  formatCount?: (value: number) => string;
+  ariaLabel?: string;
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+export function MenuJumpStrip({
+  entries,
+  formatCount = String,
+  ariaLabel,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: MenuJumpStripProps) {
+  return (
+    <ScrollFade
+      orientation="horizontal"
+      size="sm"
+      className={className}
+      scrollClassName="scrollbar-hide"
+    >
+      <nav aria-label={ariaLabel} className="flex items-center gap-2">
+        {entries.map((entry) => (
+          <LinkComponent
+            key={entry.slug}
+            href={entry.href}
+            className="inline-flex h-9 shrink-0 items-center gap-2 whitespace-nowrap rounded-full border border-border bg-card px-4 text-sm transition-colors hover:border-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none"
+          >
+            <span
+              aria-hidden
+              className={cn("h-2.5 w-2.5 shrink-0 rounded-[3px]", !entry.gradient && "bg-border")}
+              style={entry.gradient ? { backgroundImage: entry.gradient } : undefined}
+            />
+            {entry.name}
+            <span className="tabular-nums text-muted-foreground">{formatCount(entry.count)}</span>
+          </LinkComponent>
+        ))}
+      </nav>
+    </ScrollFade>
+  );
+}

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

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MenuIndexList } from "./menu-index-list";
+import { mockIndexEntries } from "./menu-mocks";
+
+const meta: Meta<typeof MenuIndexList> = {
+  title: "Menu/MenuIndexList",
+  component: MenuIndexList,
+  tags: ["autodocs"],
+  args: {
+    entries: mockIndexEntries,
+    title: `All ${mockIndexEntries.length} cuisines`,
+    subtitle: "Ordered by kitchens — every one has its own page",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The complete set, four across — and the reason the page below it can be progressive. This block carries a crawlable link to **every** destination the city has, so the richer blocks underneath are free to load ten at a time behind a *show more* without hiding anything a crawler needs. Get that backwards and the page silently stops linking to the twenty-eight it is supposed to index. Note the counts overlap: cuisines are non-exclusive tags (Cluj's thirty-eight sum to 3,182 against 767 places), so this is a ranked list of ways in, never a breakdown.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuIndexList>;
+
+export const Default: Story = {};
+
+/** The long tail, which is where a layout tuned on the head of the list breaks. */
+export const Tail: Story = {
+  args: { entries: mockIndexEntries.slice(-8), title: "The tail" },
+};
+
+/** Two columns, not one: thirty-eight rows in one column is four screens. */
+export const Mobile: Story = {
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/menu-index-list.tsx

@@ -0,0 +1,149 @@
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Separator } from "./separator";
+import { Skeleton } from "./skeleton";
+import type { MenuIndexEntry, MenuLinkComponent, MenuLinkProps } from "./menu-types";
+
+/**
+ * MenuIndexList — the complete set, four across.
+ *
+ * ## This block is why the page can afford to be progressive
+ *
+ * It carries a crawlable link to EVERY destination the city has — all
+ * thirty-eight cuisines, not the ten the page draws in full below. That makes
+ * it the page's entire link-equity job, which in turn means the rich blocks
+ * underneath are free to load ten at a time behind a "show more": nothing a
+ * crawler needs is hidden behind that control, because it is all up here.
+ *
+ * Get this backwards — put the whole set behind the disclosure and only ten
+ * links in the markup — and the page silently stops linking to twenty-eight
+ * pages it is supposed to be the index for.
+ *
+ * ## Ordered by count, and the counts overlap
+ *
+ * Cuisines are non-exclusive tags: Cluj's thirty-eight sum to 3,182 against 767
+ * places, because a trattoria is Italian AND pizza AND international. So this
+ * is a ranked list of ways in, never a partition, and no copy near it may total
+ * the numbers or call them a breakdown.
+ */
+
+/** @deprecated Alias of `MenuLinkProps`; kept for symmetry with the other menu surfaces. */
+export type MenuIndexListLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: MenuIndexListLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type MenuIndexListProps = {
+  entries: MenuIndexEntry[];
+  /** e.g. "All 38 cuisines". Composed and pluralised by the caller. */
+  title: string;
+  /** One line under it, e.g. "Ordered by kitchens — every one has its own page". */
+  subtitle?: string;
+  /** Locale-aware integer formatter. Defaults to `String`. */
+  formatCount?: (value: number) => string;
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+export function MenuIndexList({
+  entries,
+  title,
+  subtitle,
+  formatCount = String,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: MenuIndexListProps) {
+  return (
+    <section
+      className={cn(
+        "rounded-[18px] border border-border bg-card px-3.5 py-4 lg:px-5 lg:py-5",
+        className
+      )}
+    >
+      <div className="pb-2">
+        <h2 className="text-[15px] font-bold tracking-[-0.01em]">{title}</h2>
+        {subtitle && (
+          <p className="mt-0.5 text-[12.5px] text-muted-foreground">{subtitle}</p>
+        )}
+      </div>
+
+      {/*
+        Two columns on a phone, four from `lg`. One column at 390px turns
+        thirty-eight rows into four screens of scrolling for a list whose whole
+        job is to be scanned; two halves that, and the row still holds a name of
+        realistic length beside its count.
+      */}
+      <ul className="grid grid-cols-2 gap-x-5 lg:grid-cols-4 lg:gap-x-8">
+        {entries.map((entry) => (
+          <li key={entry.slug}>
+            {/* The DS `Separator`, above every row including the first.
+                It was `border-t … first:border-t-0 lg:first:border-t`, which
+                only exempted the very FIRST entry — so in the two-column phone
+                layout the top-left row had no rule and the top-right one, its
+                own neighbour, did. Ruling every row is both uniform and simpler
+                than restoring the exception per breakpoint. */}
+            <Separator />
+            <LinkComponent
+              href={entry.href}
+              className="group flex items-center gap-2.5 py-2.5 transition-colors hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring motion-reduce:transition-none"
+            >
+              <span
+                aria-hidden
+                className={cn(
+                  "h-2.5 w-2.5 shrink-0 rounded-[3px]",
+                  !entry.gradient && "bg-border"
+                )}
+                style={entry.gradient ? { backgroundImage: entry.gradient } : undefined}
+              />
+              <span className="min-w-0 flex-1 truncate text-[13.5px]">{entry.name}</span>
+              <span className="shrink-0 text-[13px] tabular-nums text-muted-foreground">
+                {formatCount(entry.count)}
+              </span>
+              <ChevronRight
+                className="h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors group-hover:text-accent motion-reduce:transition-none"
+                aria-hidden
+              />
+            </LinkComponent>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+// ─── Skeleton ───────────────────────────────────────────────────────────────
+
+/** Two columns on a phone, four from `lg` — the grid the list itself renders. */
+export function MenuIndexListSkeleton({
+  rows = 24,
+  className,
+}: {
+  rows?: number;
+  className?: string;
+}) {
+  return (
+    <section
+      className={cn(
+        "rounded-[18px] border border-border bg-card px-3.5 py-4 lg:px-5 lg:py-5",
+        className
+      )}
+      aria-hidden
+    >
+      <Skeleton className="h-[15px] w-[140px]" />
+      <Skeleton className="mt-1.5 h-3 w-[240px]" />
+      <ul className="mt-2 grid grid-cols-2 gap-x-5 lg:grid-cols-4 lg:gap-x-8">
+        {Array.from({ length: rows }, (_, index) => (
+          <li key={index}>
+            <Separator />
+            <div className="flex items-center gap-2.5 py-2.5">
+              <Skeleton className="h-2.5 w-2.5 rounded-[3px]" />
+              <Skeleton className="h-3.5 flex-1" />
+              <Skeleton className="h-3 w-6" />
+            </div>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}

package/src/components/menu-intent-hero.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Clock, Pizza } from "lucide-react";
+import { MenuIntentHero } from "./menu-intent-hero";
+import { mockGradients, mockIntentFigures } from "./menu-mocks";
+
+const meta: Meta<typeof MenuIntentHero> = {
+  title: "Menu/MenuIntentHero",
+  component: MenuIntentHero,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The head of an intent page. Every number in it is real and every one of them is a control — tapping a figure applies it as a filter rather than scrolling somewhere, so the hero is also the first filter. A figure with no `onSelect` renders as a plain fact, which is normally the total, since filtering to *all of them* is not a state. Distinct from `MenuHubHero`: that one introduces a city's whole menu and carries a search field; this one introduces a single intent.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuIntentHero>;
+
+const base = {
+  title: "Italian tonight",
+  kicker: "TONIGHT · OPEN NOW OR LATER",
+  kickerIcon: <Clock className="h-3 w-3" />,
+  description:
+    "Two hundred and forty-seven kitchens in Cluj-Napoca cook Italian. Fifty-eight are still serving, four past midnight. Ranked by how often the reviews name their dishes.",
+  figures: mockIntentFigures,
+  gradient: mockGradients.pasta,
+  icon: <Pizza />,
+};
+
+export const Default: Story = { args: base };
+
+/** No constraint: the kicker states the kind instead, and the figures still filter. */
+export const Bare: Story = {
+  args: { ...base, title: "Italian", kicker: "CUISINE", kickerIcon: undefined },
+};
+
+/**
+ * Four across at 390px, and the paragraph stays.
+ *
+ * The board hid it under 640px. It is clamped here instead — it is the page's
+ * only prose and what the description meta is built from, so `display: none` on
+ * the one indexed sentence costs more than the three lines it saves.
+ */
+export const Mobile: Story = {
+  args: base,
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** No gradient — visibly unstyled rather than white text on white. */
+export const NoGradient: Story = { args: { ...base, gradient: undefined, icon: undefined } };

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

@@ -0,0 +1,189 @@
+import { cn } from "../lib/utils";
+import type { MenuIntentFigure, MenuLinkComponent, MenuLinkProps } from "./menu-types";
+
+function DefaultLink({ href, ...props }: MenuLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+/**
+ * MenuIntentHero — the head of an intent page (`/menu/cuisines/italian`).
+ *
+ * The intent page answers "which kitchens, for this, right now", and the hero's
+ * job is to make the size of the answer legible before the reader touches a
+ * filter: how many kitchens cook this, what they are known for, how many are
+ * serving. Every number in it is real and every one of them is a control.
+ *
+ * ## Distinct from `<MenuHubHero>`
+ *
+ * The hub's hero introduces a city's whole menu and carries a search field.
+ * This one introduces ONE intent and carries figures that filter the list
+ * below it. They share a look — a tinted panel with a watermark — and nothing
+ * else, so they are two components rather than one with a mode.
+ *
+ * ## The figures are the first filter
+ *
+ * "58 open now" is both a fact and the fastest way to act on it, so tapping a
+ * figure applies it as a filter rather than scrolling somewhere. A figure with
+ * no `onSelect` renders as a plain fact: the total is normally one, because
+ * filtering to "all of them" is not a state.
+ *
+ * They stay four across on the phone. The board proved the row legible at
+ * 390px, and a 2×2 costs ~40px of height in the tallest element on the
+ * smallest screen; the labels wrap instead.
+ *
+ * ## The paragraph survives the phone
+ *
+ * The board hides it under 640px. It is kept here and clamped instead: it is
+ * the page's only prose, it is what the description meta is built from, and
+ * `display: none` on the one indexed sentence is a cost the extra three lines
+ * do not justify.
+ */
+
+export type MenuIntentHeroProps = {
+  title: string;
+  /**
+   * Over the title — the active constraint ("TONIGHT · OPEN NOW OR LATER"), or
+   * the intent's kind ("CUISINE") when there is none.
+   */
+  kicker?: string;
+  /** Icon node for the kicker, resolved by the caller. */
+  kickerIcon?: React.ReactNode;
+  /** One paragraph of real numbers. Generated by the caller from the facets. */
+  description?: string;
+  figures?: MenuIntentFigure[];
+  /**
+   * Finished CSS gradient for the ground, e.g. `linear-gradient(140deg, …)`.
+   *
+   * A gradient rather than a token name, for the same reason `<MenuField>` and
+   * `<MenuIntentTiles>` take one: the hue tables are app-owned, and a component
+   * referencing `var(--h-pizza)` renders an unstyled panel in any consumer that
+   * does not define it. Missing, the panel falls back to the foreground colour
+   * — visibly unstyled rather than white text on white.
+   */
+  gradient?: string;
+  /** Watermark behind the text, resolved by the caller. */
+  icon?: React.ReactNode;
+  /** Used for any figure carrying an `href`. Defaults to a plain `<a>`. */
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+export function MenuIntentHero({
+  title,
+  kicker,
+  kickerIcon,
+  description,
+  figures,
+  gradient,
+  icon,
+  linkComponent = DefaultLink,
+  className,
+}: MenuIntentHeroProps) {
+  return (
+    <div
+      className={cn(
+        "relative flex overflow-hidden rounded-[18px] text-white lg:min-h-[210px]",
+        !gradient && "bg-foreground",
+        className
+      )}
+    >
+      {gradient && (
+        <span aria-hidden className="absolute inset-0" style={{ backgroundImage: gradient }} />
+      )}
+
+      {icon && (
+        <span
+          aria-hidden
+          className="pointer-events-none absolute -bottom-7 -right-4 opacity-20 [&>svg]:h-[120px] [&>svg]:w-[120px] lg:[&>svg]:h-[170px] lg:[&>svg]:w-[170px]"
+        >
+          {icon}
+        </span>
+      )}
+
+      <div className="relative z-[1] flex w-full flex-col gap-2.5 p-5 lg:gap-[11px] lg:px-[26px] lg:py-6">
+        {kicker && (
+          <span className="flex items-center gap-1.5 text-[10.5px] font-extrabold uppercase tracking-[0.13em] opacity-[0.82]">
+            {kickerIcon}
+            {kicker}
+          </span>
+        )}
+
+        <h1 className="font-serif text-[29px] font-semibold leading-[1.04] tracking-[-0.025em] lg:text-[40px]">
+          {title}
+        </h1>
+
+        {description && (
+          <p className="line-clamp-3 max-w-[520px] text-[13.5px] leading-[1.55] opacity-85 lg:line-clamp-none lg:text-sm">
+            {description}
+          </p>
+        )}
+
+        {figures && figures.length > 0 && (
+          <div className="mt-auto grid grid-cols-4 gap-x-4 gap-y-3 pt-3.5 lg:flex lg:gap-[26px] lg:pt-4">
+            {figures.map((figure) => (
+              <Figure key={figure.key} figure={figure} linkComponent={linkComponent} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * A figure is a control only when it does something.
+ *
+ * The alternative — every figure a button, the inert ones disabled — offers
+ * four controls and refuses one of them for a reason the reader cannot see.
+ *
+ * A LINK when it carries an `href`, a button only when the caller is holding
+ * the state in memory. The link is the better shape wherever the state is in
+ * the URL: it renders on the server, it is middle-clickable, and `?open=now` is
+ * a state we want a crawler to follow.
+ */
+function Figure({
+  figure,
+  linkComponent: LinkComponent,
+}: {
+  figure: MenuIntentFigure;
+  linkComponent: MenuLinkComponent;
+}) {
+  const body = (
+    <>
+      <span className="block text-xl font-black leading-none tracking-[-0.03em] tabular-nums lg:text-2xl">
+        {figure.value}
+      </span>
+      <span className="mt-1 block text-[11px] leading-tight opacity-[0.72]">{figure.label}</span>
+    </>
+  );
+
+  const interactive = cn(
+    "block min-w-0 rounded-lg text-left transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70 motion-reduce:transition-none",
+    figure.active ? "opacity-100" : "opacity-90"
+  );
+
+  if (figure.href) {
+    return (
+      <LinkComponent
+        href={figure.href}
+        aria-current={figure.active ? "page" : undefined}
+        className={interactive}
+      >
+        {body}
+      </LinkComponent>
+    );
+  }
+
+  if (!figure.onSelect) return <span className="block min-w-0">{body}</span>;
+
+  return (
+    <button
+      type="button"
+      onClick={figure.onSelect}
+      aria-pressed={figure.active}
+      className={interactive}
+    >
+      {body}
+    </button>
+  );
+}

package/src/components/menu-kitchen-list.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MenuKitchenList } from "./menu-kitchen-list";
+import { mockKitchens, mockMatchedKitchens } from "./menu-mocks";
+
+const labels = {
+  openVenue: (name: string) => `Open ${name}`,
+  openDish: (name: string) => `See ${name}`,
+  openNow: "Open now",
+  showMore: "Show 10 more",
+};
+
+const meta: Meta<typeof MenuKitchenList> = {
+  title: "Menu/MenuKitchenList",
+  component: MenuKitchenList,
+  tags: ["autodocs"],
+  args: { labels },
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The intent page's spine — a shortlist of rooms you could walk into, not a grid of dishes. **Two targets per row**: the row goes to the venue, the dish name opens the item drawer. That is why this is not `RankedVenueList`, which wraps its whole row in one link and so cannot express a second destination. The mechanism is a stretched overlay, as in `MenuItem`; nesting one anchor inside another is invalid and breaks middle-click on both. The dish is underlined so it reads as a target before it is pressed, and the chevron stays on the right where it belongs to the venue.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuKitchenList>;
+
+export const Default: Story = { args: { kitchens: mockKitchens } };
+
+/**
+ * Filtered: every row swaps its most-named dish for the one that matched, and
+ * the kicker changes with it. A filtered list whose rows still advertise their
+ * most-named dish is claiming the filter matched something it did not.
+ */
+export const Matched: Story = { args: { kitchens: mockMatchedKitchens } };
+
+/**
+ * The degradations, all from real API gaps: row 3's must-try has no `slug`, so
+ * the dish line is inert rather than a link to nowhere; row 4 has no dish at
+ * all and must still read as a venue; neither carries a mention count, because
+ * a list endpoint does not serve one.
+ */
+export const Degraded: Story = { args: { kitchens: mockKitchens.slice(2) } };
+
+export const WithShowMore: Story = {
+  args: { kitchens: mockKitchens, onShowMore: () => {} },
+};
+
+export const Mobile: Story = {
+  args: { kitchens: mockKitchens },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};