@bearmenu/ui 0.8.7 → 0.8.9

package/src/components/ranked-venue-list.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { mockVenues } from "./menu-mocks";
+import { RankedVenueList } from "./ranked-venue-list";
+
+const priceBandLabels = {
+  "the-copper-yard": "19—62",
+  "salt-and-stone": "38—84",
+  "the-quiet-hours": "8—26",
+  "green-room-canteen": "22—51",
+};
+
+const meta: Meta<typeof RankedVenueList> = {
+  title: "Menu/RankedVenueList",
+  component: RankedVenueList,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[620px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Venues ordered by how often reviews name their dishes — the answer to \"best Italian in Cluj\". What makes the order defensible is the mention count on every row: it is evidence, not opinion. A caller that cannot supply mentions should use a different surface rather than this one with the column blank, because an unexplained ranking is worse than none. The tab strip re-ranks in place and never navigates.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof RankedVenueList>;
+
+export const Default: Story = {
+  args: {
+    venues: mockVenues.slice(0, 3),
+    heading: "The kitchens Cluj rates for Italian",
+    caption: "by how often reviews name their dishes",
+    priceBandLabels,
+  },
+};
+
+/** With tabs. `activeTab` and `onTabChange` are the caller's state. */
+export const WithTabs: Story = {
+  args: {
+    venues: mockVenues.slice(0, 3),
+    heading: "The kitchens Cluj rates",
+    caption: "from review mentions, not opinion",
+    tabs: [
+      { slug: "italian", label: "Italian" },
+      { slug: "romanesc", label: "Romanian" },
+      { slug: "japonez", label: "Japanese" },
+      { slug: "burgeri", label: "Burgers" },
+    ],
+    activeTab: "italian",
+    onTabChange: () => {},
+    priceBandLabels,
+  },
+};
+
+/** No header at all — the list inside a section that already has one. */
+export const Bare: Story = { args: { venues: mockVenues.slice(0, 3), priceBandLabels } };
+
+/** A venue with no signature still ranks; its quoted dish line is simply absent. */
+export const MixedEvidence: Story = {
+  args: { venues: mockVenues, heading: "The kitchens Cluj rates", priceBandLabels },
+};
+
+export const Mobile: Story = {
+  args: { venues: mockVenues.slice(0, 3), heading: "The kitchens Cluj rates" },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/ranked-venue-list.tsx

@@ -0,0 +1,177 @@
+import { ChevronRight, MessageSquare, Star } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Separator } from "./separator";
+import type { MenuVenuePreview, MenuLinkProps, MenuLinkComponent } from "./menu-types";
+
+/**
+ * RankedVenueList — venues ordered by how often reviews name their dishes.
+ *
+ * The answer to "best Italian in Cluj", and the reason it is defensible is the
+ * mention count sitting on every row: the order is evidence, not opinion. A
+ * caller that cannot supply mentions should use a different surface rather than
+ * this one with the column blank — an unexplained ranking is worse than none.
+ *
+ * The tab strip re-ranks in place and never navigates, so `activeTab` and
+ * `onTabChange` are controlled by the caller. Omit `tabs` entirely and the
+ * header is just a heading.
+ *
+ * No directive: without `tabs` the list renders on the server, which is the
+ * common case on a hub.
+ */
+
+/** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
+export type RankedVenueListLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: RankedVenueListLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type RankedVenueListTab = {
+  slug: string;
+  label: string;
+};
+
+export type RankedVenueListProps = {
+  venues: MenuVenuePreview[];
+  /** Section heading, e.g. "The kitchens Cluj rates for Italian". */
+  heading?: string;
+  /** The basis of the order, e.g. "by how often reviews name their dishes". */
+  caption?: string;
+  tabs?: RankedVenueListTab[];
+  activeTab?: string;
+  onTabChange?: (slug: string) => void;
+  /** Composed price band per venue, keyed by place slug, e.g. "38—84". */
+  priceBandLabels?: Record<string, string>;
+  /**
+   * The app's own grade per venue slug, already formatted ("8.7"). Shown in
+   * place of the star rating when present — the star is the third-party
+   * fallback for a venue the reviews have not graded yet.
+   */
+  gradeLabels?: Record<string, string>;
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+export function RankedVenueList({
+  venues,
+  heading,
+  caption,
+  tabs,
+  activeTab,
+  onTabChange,
+  priceBandLabels,
+  gradeLabels,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: RankedVenueListProps) {
+  return (
+    <div className={cn("overflow-hidden rounded-[14px] border border-border bg-card", className)}>
+      {(heading || tabs) && (
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-2 border-b border-border p-3.5">
+          {heading && (
+            <h3 className="text-[15px] font-bold leading-tight tracking-[-0.01em]">{heading}</h3>
+          )}
+          {caption && (
+            <span className="text-[12.5px] text-muted-foreground">{caption}</span>
+          )}
+          {tabs && tabs.length > 0 && (
+            <div className="ml-auto flex flex-wrap gap-1.5">
+              {tabs.map((tab) => (
+                <button
+                  key={tab.slug}
+                  type="button"
+                  aria-pressed={tab.slug === activeTab}
+                  onClick={() => onTabChange?.(tab.slug)}
+                  className={cn(
+                    "inline-flex h-7 items-center rounded-full border px-2.5 text-xs font-semibold transition-colors",
+                    tab.slug === activeTab
+                      ? "border-accent bg-accent-subtle text-accent"
+                      : "border-border text-muted-foreground hover:bg-muted/50"
+                  )}
+                >
+                  {tab.label}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      <ol>
+        {venues.map((venue, index) => {
+          const { place, signature } = venue;
+          const mentions = signature?.item.mentions ?? 0;
+
+          return (
+            <li key={place.slug}>
+            {index > 0 && <Separator />}
+              <LinkComponent
+                href={venue.href}
+                className="flex items-center gap-3 p-3 transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+              >
+                <span className="w-4 shrink-0 text-center text-[13px] font-extrabold tabular-nums text-accent">
+                  {index + 1}
+                </span>
+
+                {/* 48px. Same reason as `OpenNowList`: below ~48 the venue
+                    photograph stops being a photograph. */}
+                <span className="h-12 w-12 shrink-0 overflow-hidden rounded-xl bg-[repeating-linear-gradient(135deg,oklch(0.78_0.018_55)_0_8px,oklch(0.84_0.012_58)_8px_16px)]">
+                  {place.thumbnail_url && (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={place.thumbnail_url}
+                      alt=""
+                      className="h-full w-full object-cover"
+                      loading="lazy"
+                    />
+                  )}
+                </span>
+
+                <span className="min-w-0 flex-1">
+                  {/* The whole name: a ranked list is a list of names, and a
+                      name cut to "PASQUALE | brunch & din…" is not one. */}
+                  <span className="block text-sm font-bold leading-snug tracking-[-0.01em]">
+                    {place.name}
+                  </span>
+                  {signature?.item.name && (
+                    <span className="mt-px block truncate font-serif text-xs italic text-muted-foreground">
+                      {`“${signature.item.name}”`}
+                    </span>
+                  )}
+                </span>
+
+                {mentions > 0 && (
+                  <span className="hidden shrink-0 items-center gap-1 text-[11.5px] tabular-nums text-muted-foreground sm:inline-flex">
+                    <MessageSquare className="h-[11px] w-[11px]" aria-hidden />
+                    {mentions}
+                  </span>
+                )}
+
+                {gradeLabels?.[place.slug] ? (
+                  <span className="inline-flex h-6 shrink-0 items-center rounded-md bg-foreground px-1.5 text-[12px] font-extrabold tabular-nums text-background">
+                    {gradeLabels[place.slug]}
+                  </span>
+                ) : (
+                  place.rating && (
+                    <span className="inline-flex shrink-0 items-center gap-1 text-[12.5px] font-semibold tabular-nums">
+                      <Star className="h-3 w-3" aria-hidden />
+                      {place.rating.rating}
+                    </span>
+                  )
+                )}
+
+                {priceBandLabels?.[place.slug] && (
+                  <span className="hidden shrink-0 text-[12.5px] tabular-nums text-muted-foreground sm:block">
+                    {priceBandLabels[place.slug]}
+                  </span>
+                )}
+
+                <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+              </LinkComponent>
+            </li>
+          );
+        })}
+      </ol>
+    </div>
+  );
+}

package/src/components/section-header.stories.tsx

@@ -68,3 +68,27 @@ export const LoadingVsLoaded: Story = {
     </div>
   ),
 };
+
+/**
+ * The app-card header: title, count, and an accent "All ›" in the count's
+ * size tier. Both the tone and the subtitle are phone-scoped — resize past
+ * `lg` to see the muted action and the subtitle return.
+ */
+export const AppCard: Story = {
+  args: {
+    title: "Tonight",
+    count: 7,
+    subtitle: "Everything still to start before midnight",
+    subtitleFrom: "lg",
+    action: "All 15",
+    actionHref: "#",
+    actionTone: "app",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[366px] rounded-[18px] bg-card px-3.5 pt-4">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/section-header.test.tsx

@@ -0,0 +1,28 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { SectionHeader } from "./section-header";
+
+describe("SectionHeader", () => {
+  it("renders title, count and a linked action", () => {
+    render(<SectionHeader title="Tonight" count={7} action="See all" actionHref="/events" />);
+    expect(screen.getByRole("heading", { name: "Tonight" })).toBeInTheDocument();
+    expect(screen.getByText("7")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "See all" })).toHaveAttribute("href", "/events");
+  });
+
+  it("gives the app tone its accent classes and the muted tone none of them", () => {
+    const { rerender } = render(
+      <SectionHeader title="Tonight" action="See all" actionHref="/events" actionTone="app" />
+    );
+    expect(screen.getByRole("link", { name: "See all" }).className).toContain("text-accent");
+
+    rerender(<SectionHeader title="Tonight" action="See all" actionHref="/events" />);
+    expect(screen.getByRole("link", { name: "See all" }).className).not.toContain("text-accent");
+  });
+
+  it("keeps the subtitle in the DOM but hides it below lg with subtitleFrom", () => {
+    render(<SectionHeader title="Tonight" subtitle="Still to start" subtitleFrom="lg" />);
+    expect(screen.getByText("Still to start").className).toContain("hidden");
+    expect(screen.getByText("Still to start").className).toContain("lg:block");
+  });
+});

package/src/components/section-header.tsx

@@ -35,6 +35,21 @@ export type SectionHeaderProps = {
   /** Trailing action label, e.g. "See all". */
   action?: string;
   actionHref?: string;
+  /**
+   * `muted` (default): 14px in `--muted-foreground`, at every width. `app`:
+   * BELOW `lg`, 12.5px semibold in `--accent` — the way an app's "All ›" reads
+   * at the end of a card's title row, quieter in size and louder in colour so
+   * it sits in the count's tier rather than competing with the title. From
+   * `lg` it falls back to `muted`: the app treatment is a phone treatment, and
+   * the desktop page it shares a header with is unchanged by it.
+   */
+  actionTone?: "muted" | "app";
+  /**
+   * `always` (default) shows the subtitle at every width. `lg` hides it below
+   * the `lg` breakpoint for surfaces that narrate on desktop and not on a
+   * phone, where a card title with a count is the whole header.
+   */
+  subtitleFrom?: "always" | "lg";
   /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
   linkComponent?: React.ComponentType<SectionHeaderLinkProps>;
   onAction?: (mouseEvent: React.MouseEvent) => void;
@@ -48,24 +63,38 @@ export type SectionHeaderProps = {
   className?: string;
 };
 
-const ACTION_CLASSES = cn(
-  "inline-flex shrink-0 items-center gap-0.5 rounded-sm text-[14px] text-muted-foreground",
-  "transition-colors duration-150 hover:text-foreground motion-reduce:transition-none",
+// `-my-2 py-2 -mr-1 pr-1`: the label keeps its visual size while its hit area
+// grows to the 44px minimum. Negative margins cancel the padding so the row
+// height and the right edge do not move.
+const ACTION_BASE_CLASSES = cn(
+  "inline-flex min-h-11 shrink-0 items-center gap-0.5 rounded-sm -my-2 py-2 -mr-1 pr-1",
+  "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"
 );
 
+const ACTION_TONE_CLASSES = {
+  muted: "text-[14px] text-muted-foreground hover:text-foreground",
+  app: cn(
+    "text-[12.5px] font-semibold text-accent hover:text-accent/80",
+    "lg:text-[14px] lg:font-normal lg:text-muted-foreground lg:hover:text-foreground"
+  ),
+} as const;
+
 export function SectionHeader({
   title,
   count,
   subtitle,
   action,
   actionHref,
+  actionTone = "muted",
+  subtitleFrom = "always",
   linkComponent: LinkComponent = DefaultLink,
   onAction,
   as: Heading = "h2",
   className,
 }: SectionHeaderProps) {
   const actionIcon = <ChevronRight className="h-3.5 w-3.5" aria-hidden />;
+  const actionClasses = cn(ACTION_BASE_CLASSES, ACTION_TONE_CLASSES[actionTone]);
 
   return (
     <div className={cn("flex flex-col mb-3.5", className)}>
@@ -75,18 +104,20 @@ export function SectionHeader({
             {title}
           </Heading>
           {count !== undefined && (
-            <span className="ml-0.5 shrink-0 text-[12px] text-muted-foreground">{count}</span>
+            <span className="ml-1.5 shrink-0 text-[12px] tabular-nums text-muted-foreground lg:ml-0.5">
+              {count}
+            </span>
           )}
         </div>
 
         {action &&
           (actionHref ? (
-            <LinkComponent href={actionHref} className={ACTION_CLASSES} onClick={onAction}>
+            <LinkComponent href={actionHref} className={actionClasses} onClick={onAction}>
               {action}
               {actionIcon}
             </LinkComponent>
           ) : onAction ? (
-            <button type="button" className={ACTION_CLASSES} onClick={onAction}>
+            <button type="button" className={actionClasses} onClick={onAction}>
               {action}
               {actionIcon}
             </button>
@@ -94,7 +125,14 @@ export function SectionHeader({
       </div>
 
       {subtitle && (
-        <p className="mt-0.5 text-[13px] text-muted-foreground md:text-[14px]">{subtitle}</p>
+        <p
+          className={cn(
+            "mt-0.5 text-[13px] text-muted-foreground md:text-[14px]",
+            subtitleFrom === "lg" && "hidden lg:block"
+          )}
+        >
+          {subtitle}
+        </p>
       )}
     </div>
   );

package/src/components/signature-chip.tsx

@@ -0,0 +1,77 @@
+import { Badge } from "./badge";
+import { cn } from "../lib/utils";
+
+/**
+ * "Signature" / "Mentioned" — the marker for a menu item the review digest
+ * backs, shared by `<MenuItem>` and the dish/drink cards so the same claim
+ * never renders two different ways.
+ *
+ * When `onEvidence` is supplied the chip becomes a button that opens the
+ * reviews behind it, and takes a dashed outline to read as interactive. That is
+ * the whole differentiator: every competitor badges items ("Nou", "NEW"), none
+ * can show you why. Without evidence it degrades to a plain label rather than
+ * offering a tap that would reveal nothing.
+ *
+ * `stopPropagation` matters on every host: the row is a `role="button"` and the
+ * cards carry a stretched crawlable `<a>` overlay, so an un-stopped click would
+ * also open the item drawer. On the cards it must additionally out-rank that
+ * overlay's `z-[1]`, hence `relative z-[2]` from the caller.
+ *
+ * `surface="image"` is for card covers, where the chip sits over the photo
+ * rather than in the caption block. The accent-on-canvas palette has no
+ * contrast guarantee over an arbitrary photo, so it swaps to the same frosted
+ * fill the place badge uses there and keeps the dashed edge — which is what
+ * says "there is evidence behind this" — in the inverted colour.
+ *
+ * The label is passed in: the DS owns no translation keys.
+ */
+
+export type SignatureChipProps = {
+  /** Already translated. `strong` → "Signature", `weak` → "Mentioned". */
+  label: string;
+  onEvidence?: () => void;
+  /** `image` = over a card cover; `canvas` = in a caption or row. */
+  surface?: "canvas" | "image";
+  className?: string;
+};
+
+export function SignatureChip({
+  label,
+  onEvidence,
+  surface = "canvas",
+  className,
+}: SignatureChipProps) {
+  const shared = "h-4 shrink-0 px-1.5 text-[10px] font-medium uppercase tracking-wider";
+  const onImage = surface === "image";
+
+  if (!onEvidence) {
+    return (
+      <Badge variant={onImage ? "overlay" : "secondary"} className={cn(shared, className)}>
+        {label}
+      </Badge>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={(event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        onEvidence();
+      }}
+      className={cn(
+        shared,
+        "inline-flex items-center rounded-full border border-dashed",
+        onImage
+          ? "border-background/70 bg-foreground/70 text-background backdrop-blur-sm hover:bg-foreground/85"
+          : "border-accent/40 text-accent hover:bg-accent/10",
+        "focus-visible:outline-none focus-visible:ring-2",
+        onImage ? "focus-visible:ring-background/70" : "focus-visible:ring-accent/40",
+        className
+      )}
+    >
+      {label}
+    </button>
+  );
+}

package/src/components/signature-line-list.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { mockHubLabels, mockVenues } from "./menu-mocks";
+import { SignatureLineList } from "./signature-line-list";
+
+
+const itemLabels = {
+  currency: "lei",
+  mentions: (count: number) => `${count} mentions`,
+  signature: "SIGNATURE",
+  mentioned: "MENTIONED",
+};
+const formatPrice = (amount: number) => String(amount);
+
+const labels = itemLabels;
+
+const metaLabels = {
+  "the-copper-yard": "pub · Centru",
+  "salt-and-stone": "italian · Centru",
+  "the-quiet-hours": "coffee · Centru",
+  "green-room-canteen": "vegetarian · Mărăști",
+};
+
+const hues = {
+  "the-copper-yard": "oklch(0.52 0.15 25)",
+  "salt-and-stone": "oklch(0.62 0.14 55)",
+  "the-quiet-hours": "oklch(0.58 0.09 70)",
+};
+
+
+const meta: Meta<typeof SignatureLineList> = {
+  title: "Menu/SignatureLineList",
+  component: SignatureLineList,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[980px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Family, venue, dish, price and reputation on one line — the densest surface on the hub, and the one that most nearly justifies the whole catalogue. Two targets per row on purpose: the venue line goes to the venue, the item row goes to that item across every kitchen that makes it. Collapsing them into one tap loses the comparison that makes the item worth showing. They are separate anchors rather than a button nested in a link, which would be invalid.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SignatureLineList>;
+
+export const Default: Story = {
+  args: {
+    venues: mockVenues.slice(0, 3),
+    labels,
+    formatPrice,
+    metaLabels,
+    hues,
+  },
+};
+
+/** The last venue has no signature — the row is a venue line and nothing else. */
+export const MixedEvidence: Story = {
+  args: { venues: mockVenues, labels, formatPrice, metaLabels, hues },
+};
+
+/** Below `lg` the row stacks: venue line, then the full item row underneath. */
+export const Mobile: Story = {
+  args: {
+    venues: mockVenues.slice(0, 3),
+    labels,
+    formatPrice,
+    metaLabels,
+    hues,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};