@bearmenu/ui 0.8.7 → 0.8.9

package/src/components/menu-item.tsx

@@ -0,0 +1,416 @@
+import { memo } from "react";
+import { MessageSquareQuote } from "lucide-react";
+import { cn } from "../lib/utils";
+import { SignatureChip } from "./signature-chip";
+import type { MenuItemPreview, MenuLinkProps, MenuLinkComponent } from "./menu-types";
+
+/**
+ * MenuItem — THE menu row.
+ *
+ * A venue's page (its menu list, its signature picks, the "pairs well with"
+ * list inside the entity drawer) and the cross-venue surfaces (the city menu,
+ * the hub's "known for" list, the daily editorial buckets) all render this one
+ * component, so an item is visibly the same object wherever it is met.
+ *
+ * Hoisted out of the app, where it had grown a second and a third lookalike
+ * beside it. It carries the app version's design decisions verbatim; only the
+ * couplings changed — the locale, the translation keys and the category-colour
+ * table are injected, because the DS owns none of those.
+ *
+ * ## The left mark
+ *
+ * An 8px rounded tab in the section's CATEGORY colour, flat against the row's
+ * left edge and bulging right. It replaced an earlier monogram chip, and the
+ * trade was deliberate:
+ *
+ *   + The text column widens. At 390px the monogram costs 50px (38 + gap) and
+ *     the tab costs 16px, so the text column goes 308px → 342px: ~11% more room
+ *     for names and descriptions, which means fewer wrapped names and more
+ *     items per screen.
+ *   + The hue answers "which section am I in" rather than "what is this made
+ *     of". Every row in a category draws the same mark, so it survives the
+ *     category header scrolling out of view — which a per-item ingredient hue
+ *     cannot do, since it changes for reasons the reader cannot see.
+ *   − COLOUR-BLINDNESS. The monogram gave a reader who cannot separate the hues
+ *     a LETTER; a rule collapses to the same grey bar for everyone. Both marks
+ *     are `aria-hidden` and neither carries meaning the text lacks, so this is
+ *     not a WCAG 1.4.1 failure — but it is a real loss of scannability for ~8%
+ *     of men, and it has not been bought back yet.
+ *
+ * `markGradient` is passed IN, never derived: inside a menu the colour depends
+ * on the neighbouring sections, which a single row cannot see.
+ *
+ * ## No chevron
+ *
+ * The row is already `role="button"`, so an arrow would only restate that, and
+ * the right edge belongs to the mention count, which the arrow would collide
+ * with.
+ */
+
+/** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
+export type MenuItemLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: MenuItemLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type MenuItemLabels = {
+  /** Currency unit beside the price, e.g. "RON". */
+  currency: string;
+  /** Fully-worded mention count — the accessible name for the glyph-and-numeral pair. */
+  mentions: (count: number) => string;
+  /** Chip text for a `signature`-strength item. */
+  signature: string;
+  /** Chip text for a `weak` (merely mentioned) item. */
+  mentioned: string;
+};
+
+export type MenuItemProps = {
+  item: MenuItemPreview;
+  labels: MenuItemLabels;
+  /** Locale-aware money formatter. The DS owns no `Intl` locale. */
+  formatPrice: (amount: number) => string;
+  /** Locale-aware integer formatter for the mention count. Defaults to `String`. */
+  formatCount?: (value: number) => string;
+  /**
+   * Opens the item's own sheet. Ignored when `href` is set.
+   *
+   * Neither this nor `href` → an INERT row: same geometry, mark, type and meta
+   * line, but no `role="button"`, no tab stop and no hover or press states.
+   * That is the must-try mention with no menu row behind it — it has nothing to
+   * open, so it renders as content rather than as a control that goes nowhere.
+   */
+  onOpen?: () => void;
+  showSignatureBadge?: boolean;
+  signatureTier?: "strong" | "weak";
+  onSignatureEvidence?: () => void;
+  /** Opens the reviews behind the mention count. */
+  onMentions?: () => void;
+  /** The mark's colour, as a CSS `background-image` value. */
+  markGradient?: string;
+  /**
+   * The venue this item belongs to — an attribution line under the name.
+   *
+   * Set it ONLY on cross-venue surfaces, where ten near-identical burgers come
+   * from ten kitchens and the venue IS the tap decision. A venue's own menu
+   * page must never pass it: the page already said whose menu this is. Passed
+   * in rather than read off `item.place` so the redundant case cannot be the
+   * default.
+   */
+  venueName?: string;
+  /**
+   * Explicit subtitle, in italic, in place of the description. Used where the
+   * reviewer's reason IS the row's content rather than the payoff for tapping.
+   */
+  subtitle?: string;
+  /**
+   * Render the row as a LINK instead of a `role="button"` div — for surfaces
+   * where it navigates rather than opening a sheet, so it stays
+   * middle-clickable and shareable. Implemented as a stretched overlay rather
+   * than by wrapping the row: the mention count is a control in its own right
+   * and a button inside an anchor is invalid.
+   */
+  href?: string;
+  /** Accessible name for the link overlay. Defaults to the item's name. */
+  linkLabel?: string;
+  linkComponent?: MenuLinkComponent;
+  disabled?: boolean;
+  className?: string;
+};
+
+/**
+ * The mention count: a filled quote glyph and the numeral, pinned right.
+ *
+ * Deliberately NOT a badge — a chip would add a filled shape to a row that has
+ * none, and would read as a status label the venue was given rather than a
+ * count drawn from the same reviews.
+ */
+export function MentionSignal({
+  label,
+  count,
+  onMentions,
+  formatCount = String,
+}: {
+  label: string;
+  count: number;
+  onMentions?: () => void;
+  formatCount?: (value: number) => string;
+}) {
+  /* The glyph and the numeral have to read as ONE object: `gap-0.5` instead of
+     4, and the glyph lighter and a step smaller than the numeral so it reads as
+     a prefix mark qualifying the value rather than a peer competing with it. */
+  const content = (
+    <span className="inline-flex items-center gap-0.5">
+      <MessageSquareQuote className="h-3.5 w-3.5 opacity-60" aria-hidden />
+      <span className="tabular-nums">{formatCount(count)}</span>
+    </span>
+  );
+
+  const shared = cn(
+    // `relative z-[2]` keeps this above the row's stretched link overlay.
+    "relative z-[2] inline-flex shrink-0 items-center text-accent",
+    // Same size and weight as the price at the other end of the meta row — keep
+    // these two in step if the price's type changes.
+    "text-[15px] font-bold",
+    // `min-h-6` holds the tap target at the 24px WCAG 2.5.8 floor; `px-1.5
+    // -mx-1.5` buys the horizontal half without moving the pair on screen.
+    "min-h-6 px-1.5 -mx-1.5"
+  );
+
+  if (!onMentions) {
+    return (
+      <span className={shared} aria-label={label}>
+        {content}
+      </span>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      // Read by the row's `:has()` rule, which drops the row's own hover while
+      // the pointer is on this button — two nested targets, one of them lit.
+      data-slot="mentions"
+      aria-label={label}
+      onClick={(event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        onMentions();
+      }}
+      className={cn(
+        shared,
+        "rounded-sm hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      )}
+    >
+      {content}
+    </button>
+  );
+}
+
+export const MenuItem = memo(function MenuItem({
+  item,
+  labels,
+  formatPrice,
+  formatCount = String,
+  onOpen,
+  showSignatureBadge = false,
+  signatureTier = "strong",
+  onSignatureEvidence,
+  onMentions,
+  markGradient,
+  venueName,
+  subtitle,
+  href,
+  linkLabel,
+  linkComponent: LinkComponent = DefaultLink,
+  disabled = false,
+  className,
+}: MenuItemProps) {
+  const firstEntry = item.sizes_and_prices?.[0];
+  const quantity = firstEntry?.size;
+  const hasQuantity = quantity != null && quantity > 0;
+
+  const allPrices =
+    item.sizes_and_prices
+      ?.map((entry) => entry.price)
+      .filter((price): price is number => typeof price === "number" && price > 0) ?? [];
+  const minPrice = allPrices.length > 0 ? Math.min(...allPrices) : null;
+  const maxPrice = allPrices.length > 0 ? Math.max(...allPrices) : null;
+  const isPriceRange = minPrice != null && maxPrice != null && minPrice !== maxPrice;
+
+  // `mentions` is the census count and is populated catalogue-wide;
+  // `review_count` counts full review objects and is sparse. Prefer the former,
+  // fall back rather than render nothing.
+  const mentionCount = item.mentions ?? item.review_count ?? 0;
+
+  // A row with neither destination is content, not a control.
+  const isInert = !href && !onOpen;
+  const isActionable = !disabled && !isInert;
+
+  const handleRowClick = () => {
+    if (disabled) return;
+    onOpen?.();
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (disabled) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onOpen?.();
+    }
+  };
+
+  // No `aria-label` on the row: an `aria-label` REPLACES the element's contents
+  // in the accessible-name computation, so a "Preview: <name>" string would be
+  // the whole announcement and the price, size and mention count would never
+  // reach a screen-reader user. Without it, `role="button"` names itself from
+  // its own content.
+  return (
+    <div
+      // A link row hands all of this to the browser via the stretched anchor
+      // below: native focus, Enter, middle-click, context menu. Keeping
+      // `role="button"` alongside would announce the row twice.
+      role={href || isInert ? undefined : "button"}
+      tabIndex={href || isInert ? undefined : disabled ? -1 : 0}
+      aria-disabled={disabled || undefined}
+      onClick={href || isInert ? undefined : handleRowClick}
+      onKeyDown={href || isInert ? undefined : handleKeyDown}
+      className={cn(
+        "group relative flex min-h-[72px] items-start gap-3 px-4 py-3",
+        // Radius only where the row is a grid cell. Full-bleed rows run edge to
+        // edge, where a corner radius would round against the viewport.
+        "md:rounded-xl",
+        // 180ms is the EXIT; `hover:duration-*` overrides it to 120ms on the
+        // way in. A hover that leaves as fast as it arrives reads as a flicker
+        // when the pointer crosses a list.
+        !isInert && [
+          "transition-[background-color,box-shadow,transform] duration-[180ms] ease-out motion-reduce:transition-none",
+          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        ],
+        isActionable && [
+          "cursor-pointer hover:duration-[120ms]",
+          // Opaque, never alpha: `hover:bg-muted/40` composited to a lightness
+          // delta of 0.004 on the light canvas — a hover state that measured as
+          // nothing.
+          "hover:bg-card dark:hover:bg-surface-2",
+          // Grid cells only. On a full-bleed row the shadow runs off both
+          // viewport edges and reads as a smear; that row widens its tab instead.
+          "md:hover:shadow-[var(--shadow-row-hover)]",
+          // Hover lifts, press sinks — the two must not read as one gesture.
+          "active:scale-[0.985] active:duration-[90ms] active:ease-in active:shadow-none",
+          "active:bg-muted",
+          "motion-reduce:active:scale-100",
+          // The mention count is a button inside a button. While the pointer is
+          // on it the row stops claiming the hover, so only one target is lit.
+          "has-[[data-slot=mentions]:hover]:bg-transparent has-[[data-slot=mentions]:hover]:shadow-none",
+        ],
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      )}
+    >
+      {/* Stretched link. Covers the row so the whole thing is clickable, but
+          sits BELOW the mention pair (`z-[2]`) so that control keeps its own
+          clicks. `aria-label` rather than wrapping the heading: the anchor has
+          no text of its own, and letting it swallow the row's contents would be
+          the same "one button announcing everything" problem. */}
+      {href && (
+        <LinkComponent
+          href={href}
+          aria-label={linkLabel ?? item.name}
+          className="absolute inset-0 z-[1] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent md:rounded-xl"
+        />
+      )}
+
+      {/* `self-stretch` spans the row's content box, so the mark grows with a
+          wrapped name instead of being a fixed stub. `-ml-4` cancels the row's
+          `px-4` so the mark's flat edge sits against the row edge and only the
+          curve reads. Decorative, hence `aria-hidden`. */}
+      <div
+        aria-hidden
+        className={cn(
+          "-ml-4 w-2 shrink-0 self-stretch rounded-r-full bg-muted",
+          // The full-bleed row's hover signal, since it cannot take a shadow.
+          // `-mr-1` absorbs the extra 4px so the text column does not shift as
+          // the mark grows. Grid cells get the shadow instead and hold the mark
+          // still — the tab encodes which section you are in, so the less it
+          // moves, the better it does that job.
+          !isInert && [
+            "transition-[width] duration-[120ms] ease-out motion-reduce:transition-none",
+            "group-hover:-mr-1 group-hover:w-3 md:group-hover:mr-0 md:group-hover:w-2",
+          ]
+        )}
+        style={markGradient ? { backgroundImage: markGradient } : undefined}
+      />
+
+      <div className="min-w-0 flex-1">
+        <div className="flex items-start gap-1.5">
+          <h3 className="text-[15px] font-semibold leading-snug text-foreground">{item.name}</h3>
+          {showSignatureBadge && (
+            <SignatureChip
+              label={signatureTier === "weak" ? labels.mentioned : labels.signature}
+              onEvidence={onSignatureEvidence}
+              className="mt-0.5"
+            />
+          )}
+        </div>
+
+        {/* Venue attribution — cross-venue surfaces only. Medium weight at 12px
+            against the 12px regular muted description below is what makes it
+            read as a different KIND of fact at a glance. No pin glyph:
+            repeated down a list it is visual lint, and a pin reads "address"
+            when the fact is "kitchen". */}
+        {venueName && (
+          <p className="mt-0.5 truncate text-[12px] font-medium text-foreground/70">{venueName}</p>
+        )}
+
+        {/* The description gives up a line to the venue rather than the row
+            growing one: name / venue / description(1) / meta is the same four
+            text lines and the same `min-h-[72px]` as name / description(2) /
+            meta on a venue's own page, so an item does not change height
+            between the city menu and the menu it lives on. */}
+        {subtitle ? (
+          <p className="mt-0.5 line-clamp-2 text-xs italic leading-snug text-muted-foreground">
+            {subtitle}
+          </p>
+        ) : (
+          item.description && (
+            <p
+              className={cn(
+                "mt-0.5 text-xs text-muted-foreground",
+                venueName ? "line-clamp-1" : "line-clamp-2"
+              )}
+            >
+              {item.description}
+            </p>
+          )
+        )}
+
+        {/* Meta row. Price and quantity cluster left; `justify-between` pins the
+            mention pair right so it forms a column down the list.
+
+            The reverse — price right, mentions left — was built and rejected on
+            sight. Right-aligned tabular numerals align by MAGNITUDE, which is a
+            real argument, but leading the meta line with a bare evidence count
+            makes it a stray number with nothing to attach to, and pushing price
+            to the far edge severs it from the name it belongs to. Do not
+            re-litigate without looking at it.
+
+            Suppressed entirely when the row has none of the three: a mention
+            with no menu row behind it has no price and no size, and an empty
+            meta line still spent its top margin. */}
+        {(minPrice != null || hasQuantity || mentionCount > 0) && (
+          <div className="mt-1.5 flex items-baseline justify-between gap-x-2 gap-y-1">
+            <div className="flex min-w-0 items-baseline gap-x-2">
+              {minPrice != null && (
+                <span className="flex items-baseline gap-1">
+                  <span className="text-[15px] font-bold tabular-nums text-foreground">
+                    {isPriceRange
+                      ? `${formatPrice(minPrice)}–${formatPrice(maxPrice!)}`
+                      : formatPrice(minPrice)}
+                  </span>
+                  <span className="text-[11px] text-muted-foreground">{labels.currency}</span>
+                </span>
+              )}
+
+              {hasQuantity && (
+                <span className="text-[12px] tabular-nums text-muted-foreground">
+                  {quantity}
+                  {item.kind === "dish" ? "g" : "ml"}
+                </span>
+              )}
+            </div>
+
+            {mentionCount > 0 && (
+              <MentionSignal
+                label={labels.mentions(mentionCount)}
+                count={mentionCount}
+                onMentions={onMentions}
+                formatCount={formatCount}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});