@bearmenu/ui 0.8.8 → 0.8.9

package/src/components/menu-mocks.ts

@@ -0,0 +1,417 @@
+/**
+ * Fixtures for the menu-hub surfaces — used by their stories, and shipped so
+ * that consumers rendering these components outside an app (post-generator's
+ * Remotion frames, admin previews) do not each rebuild a plausible view model.
+ *
+ * ## Every venue here is invented
+ *
+ * The names, ratings and quotes are fabricated. Real venues must never appear
+ * in marketing or promotional renders — a real kitchen's rating in a promo
+ * frame is a claim about that business, made without its involvement, and it
+ * goes stale the moment the data moves. Anything filmed from these fixtures is
+ * safe to publish; anything filmed from live data is not.
+ *
+ * The SHAPES are real, though: the gaps are the gaps the API actually has, so
+ * a layout that survives these fixtures survives production. `mentions` is
+ * populated everywhere because it is populated everywhere upstream; one venue
+ * has no `must_try`, one has no photograph, and one grade is missing the
+ * dimensions a coffee bar never gets.
+ */
+
+import type {
+  MenuConceptPreview,
+  MenuFamilyPreview,
+  MenuIntentTile,
+  MenuItemPreview,
+  MenuVenuePreview,
+} from "./menu-types";
+import type { PlacePreview } from "./place-types";
+
+export const mockGradients = {
+  // The forest dictionary (docs/colour-dictionary.md, Foundations/Colour dictionary):
+  // wheat, ember, pine, maple, lake water. Post-generator films these, so they
+  // must be the same values the app paints.
+  pasta: "linear-gradient(150deg, oklch(0.555 0.105 80), oklch(0.455 0.10 70))",
+  meat: "linear-gradient(150deg, oklch(0.49 0.13 28), oklch(0.41 0.12 22))",
+  greens: "linear-gradient(150deg, oklch(0.505 0.115 148), oklch(0.415 0.11 142))",
+  sweet: "linear-gradient(150deg, oklch(0.505 0.14 50), oklch(0.405 0.13 42))",
+  cocktail: "linear-gradient(150deg, oklch(0.485 0.095 205), oklch(0.405 0.09 212))",
+} as const;
+
+export const mockPlaces: PlacePreview[] = [
+  {
+    id: "p1",
+    slug: "the-copper-yard",
+    name: "The Copper Yard",
+    open_now: true,
+    rating: { rating: 4.6, count: 318 },
+    hours: [{ opens_at: 12, closes_at: 23 }],
+    price_dishes: { price_range_low: 19, price_range_high: 62, median_price: 28 },
+    cuisines: ["italian", "pizza"],
+    type: "pub",
+    busyness: [
+      { hour: 12, score: 22 },
+      { hour: 13, score: 26 },
+      { hour: 14, score: 30 },
+      { hour: 15, score: 38 },
+      { hour: 16, score: 52 },
+      { hour: 17, score: 74 },
+      { hour: 18, score: 92 },
+      { hour: 19, score: 100 },
+      { hour: 20, score: 86 },
+      { hour: 21, score: 64 },
+    ],
+    reviews_digest: {
+      review_count: 318,
+      grade: {
+        overall: 8.4,
+        show_number: true,
+        descriptor: "Foarte bun",
+        confidence: "high",
+        dimensions: {
+          food: 89,
+          service: 82,
+          value: 86,
+          ambiance: 78,
+          portion: 91,
+          consistency: 84,
+        },
+      },
+      value: { value: "fair" },
+      tags: [{ value: "casual" }, { value: "cozy" }, { value: "family_friendly" }],
+      highlights: [
+        {
+          text: "The wings are the reason to sit at the bar — hot honey, and they keep going until the kitchen shuts.",
+          review_ids: ["r1", "r2", "r3"],
+        },
+        {
+          text: "Last kitchen open on this street. We came at half eleven and still ate properly.",
+          review_ids: ["r4", "r5"],
+        },
+      ],
+      must_try: [
+        {
+          name: "Chicken wings, 6 pc",
+          why: "Buttermilk brine and hot honey, fried to order until the kitchen shuts.",
+          strength: "signature",
+          slug: "chicken-wings",
+          mentions: 23,
+          sizes_and_prices: [{ size: 320, price: 32 }],
+          review_ids: ["r1", "r2", "r3"],
+        },
+      ],
+    },
+  },
+  {
+    id: "p2",
+    slug: "salt-and-stone",
+    name: "Salt & Stone",
+    open_now: true,
+    rating: { rating: 4.8, count: 204 },
+    hours: [{ opens_at: 11, closes_at: 22 }],
+    price_dishes: { price_range_low: 38, price_range_high: 84, median_price: 49 },
+    cuisines: ["italian"],
+    type: "restaurant",
+    reviews_digest: {
+      review_count: 204,
+      grade: {
+        overall: 8.9,
+        show_number: true,
+        dimensions: { food: 93, service: 88, value: 74, ambiance: 85 },
+      },
+      must_try: [
+        {
+          name: "Truffle Tagliatelle",
+          why: "Made in-house each morning with black truffle and parmesan.",
+          strength: "signature",
+          slug: "truffle-tagliatelle",
+          mentions: 17,
+          sizes_and_prices: [{ size: 320, price: 62 }],
+          review_ids: ["r6", "r7"],
+        },
+      ],
+    },
+  },
+  {
+    id: "p3",
+    slug: "the-quiet-hours",
+    name: "The Quiet Hours",
+    open_now: true,
+    rating: { rating: 4.5, count: 96 },
+    hours: [{ opens_at: 8, closes_at: 20 }],
+    price_dishes: { price_range_low: 8, price_range_high: 26, median_price: 14 },
+    type: "coffee_shop",
+    reviews_digest: {
+      review_count: 96,
+      // A coffee bar is graded on coffee_quality and never on food — the
+      // dimension row must survive the absence rather than draw a zero.
+      grade: {
+        overall: 8.6,
+        show_number: true,
+        dimensions: { coffee_quality: 91, service: 86, value: 80, ambiance: 88 },
+      },
+      must_try: [
+        {
+          name: "Flat white",
+          strength: "frequent",
+          slug: "flat-white",
+          mentions: 28,
+          sizes_and_prices: [{ size: 220, price: 14 }],
+        },
+      ],
+    },
+  },
+  {
+    id: "p4",
+    slug: "green-room-canteen",
+    name: "Green Room Canteen",
+    open_now: false,
+    rating: { rating: 4.7, count: 141 },
+    price_dishes: { price_range_low: 22, price_range_high: 51, median_price: 31 },
+    type: "restaurant",
+    // No digest at all: a place the census has not reached. Every venue surface
+    // has to render this without collapsing.
+  },
+];
+
+const placeBySlug = (slug: string) => mockPlaces.find((place) => place.slug === slug)!;
+
+export const mockVenues: MenuVenuePreview[] = [
+  {
+    place: placeBySlug("the-copper-yard"),
+    href: "/places/the-copper-yard",
+    closes_at_label: "23:00",
+    signature: {
+      item: {
+        id: "s1",
+        slug: "chicken-wings",
+        name: "Chicken wings, 6 pc",
+        kind: "dish",
+        mentions: 23,
+        sizes_and_prices: [{ size: 320, price: 32 }],
+      },
+      why: "Buttermilk brine and hot honey, fried to order until the kitchen shuts.",
+      isSignature: true,
+      href: "/menu/dishes/chicken-wings",
+    },
+  },
+  {
+    place: placeBySlug("salt-and-stone"),
+    href: "/places/salt-and-stone",
+    closes_at_label: "22:00",
+    signature: {
+      item: {
+        id: "s2",
+        slug: "truffle-tagliatelle",
+        name: "Truffle Tagliatelle",
+        kind: "dish",
+        mentions: 17,
+        sizes_and_prices: [{ size: 320, price: 62 }],
+      },
+      why: "Made in-house each morning with black truffle and parmesan.",
+      isSignature: true,
+      href: "/menu/dishes/truffle-tagliatelle",
+    },
+  },
+  {
+    place: placeBySlug("the-quiet-hours"),
+    href: "/places/the-quiet-hours",
+    closes_at_label: "20:00",
+    signature: {
+      item: {
+        id: "s3",
+        slug: "flat-white",
+        name: "Flat white",
+        kind: "drink",
+        mentions: 28,
+        sizes_and_prices: [{ size: 220, price: 14 }],
+      },
+      href: "/menu/drinks/flat-white",
+    },
+  },
+  {
+    place: placeBySlug("green-room-canteen"),
+    href: "/places/green-room-canteen",
+    // No signature: the row must still read as a venue.
+  },
+];
+
+export const mockItems: MenuItemPreview[] = [
+  {
+    id: "i1",
+    slug: "truffle-tagliatelle",
+    name: "Truffle Tagliatelle",
+    kind: "dish",
+    category_slug: "pasta",
+    mentions: 17,
+    sizes_and_prices: [{ size: 320, price: 62 }],
+    place: { slug: "salt-and-stone", name: "Salt & Stone" },
+  },
+  {
+    id: "i2",
+    slug: "chicken-wings",
+    name: "Chicken wings, 6 pc",
+    kind: "dish",
+    category_slug: "chicken-dish",
+    mentions: 23,
+    sizes_and_prices: [{ size: 320, price: 32 }],
+    place: { slug: "the-copper-yard", name: "The Copper Yard" },
+  },
+  {
+    id: "i3",
+    slug: "burrata-heirloom-tomato",
+    name: "Burrata & heirloom tomato",
+    kind: "dish",
+    category_slug: "salad",
+    mentions: 14,
+    sizes_and_prices: [{ size: 300, price: 49 }],
+    place: { slug: "green-room-canteen", name: "Green Room Canteen" },
+  },
+  {
+    id: "i4",
+    slug: "flat-white",
+    name: "Flat white",
+    kind: "drink",
+    category_slug: "non-alcoholic",
+    mentions: 28,
+    sizes_and_prices: [{ size: 220, price: 14 }],
+    place: { slug: "the-quiet-hours", name: "The Quiet Hours" },
+  },
+  {
+    id: "i5",
+    slug: "house-negroni",
+    name: "House negroni",
+    kind: "drink",
+    category_slug: "cocktail",
+    // Deliberately unmentioned: the badge must not render "0".
+    mentions: 0,
+    sizes_and_prices: [{ size: 150, price: 32 }],
+    place: { slug: "the-copper-yard", name: "The Copper Yard" },
+  },
+];
+
+export const mockConcept: MenuConceptPreview = {
+  slug: "margherita",
+  title: "Margherita",
+  kind: "dish",
+  venue_count: 87,
+  price_low: 10,
+  price_high: 120,
+  alias_count: 12,
+  mentions: 214,
+  rows: [
+    {
+      place_slug: "the-copper-yard",
+      place_name: "The Copper Yard",
+      alias: "Pizza Margherita",
+      price: 34,
+      mentions: 23,
+      rating: 4.6,
+      place_type: "pub",
+      featured: true,
+    },
+    {
+      place_slug: "salt-and-stone",
+      place_name: "Salt & Stone",
+      alias: "Margherita D.O.P.",
+      price: 46,
+      mentions: 17,
+      rating: 4.8,
+      place_type: "restaurant",
+    },
+    {
+      place_slug: "green-room-canteen",
+      place_name: "Green Room Canteen",
+      alias: "Marinara Bianca",
+      price: 52,
+      mentions: 9,
+      rating: 4.7,
+      place_type: "canteen",
+    },
+  ],
+};
+
+export const mockFamily: MenuFamilyPreview = {
+  slug: "italian",
+  name: "Italian",
+  venue_count: 247,
+  chips: [
+    { slug: "pizza", label: "Pizza", count: 120 },
+    { slug: "pasta", label: "Pasta", count: 96 },
+    { slug: "salad", label: "Salad", count: 88 },
+    { slug: "chicken-dish", label: "Chicken", count: 77 },
+  ],
+  price_low: 32,
+  price_high: 84,
+  price_median: 49,
+  venue_photo_urls: [],
+  signature: {
+    item: {
+      id: "f1",
+      slug: "truffle-tagliatelle",
+      name: "Truffle Tagliatelle",
+      kind: "dish",
+      mentions: 17,
+      sizes_and_prices: [{ size: 320, price: 62 }],
+    },
+    why: "Salt & Stone",
+    href: "/menu/dishes/truffle-tagliatelle",
+  },
+};
+
+/** The drinks counterpart, and the reason `chip.count` is optional. */
+export const mockDrinkFamily: MenuFamilyPreview = {
+  slug: "cocktail",
+  name: "Cocktails",
+  venue_count: 21,
+  // No counts: there is no drink-group facet on places, so these ship as bare
+  // labels rather than with an invented number.
+  chips: [
+    { slug: "spritz", label: "Spritz" },
+    { slug: "negroni", label: "Negroni" },
+    { slug: "sour", label: "Sour" },
+  ],
+  price_low: 18,
+  price_high: 54,
+  price_median: 28,
+  venue_photo_urls: [],
+  signature: {
+    item: {
+      id: "f2",
+      slug: "house-negroni",
+      name: "House negroni",
+      kind: "drink",
+      mentions: 16,
+      sizes_and_prices: [{ size: 150, price: 32 }],
+    },
+    why: "The Copper Yard",
+  },
+};
+
+const intentGradient = (hue: number) =>
+  `linear-gradient(150deg, oklch(0.52 0.14 ${hue}), oklch(0.43 0.13 ${hue - 4}))`;
+
+export const mockIntentTiles: MenuIntentTile[] = [
+  { slug: "italian", label: "Italian tonight", caption: "247 kitchens", href: "/top/italian?open=now", gradient: intentGradient(40) },
+  { slug: "burgeri", label: "Burgers", caption: "229 kitchens", href: "/top/burgeri", gradient: intentGradient(25) },
+  { slug: "restaurante", label: "Open right now", caption: "by the hour", href: "/top/restaurante?open=now", gradient: intentGradient(60) },
+  { slug: "brunch", label: "Brunch", caption: "314 kitchens", href: "/top/brunch", gradient: intentGradient(75) },
+  { slug: "vegan", label: "Vegan", caption: "108 kitchens", href: "/top/vegan", gradient: intentGradient(148) },
+  { slug: "centru", label: "In Centru", caption: "by neighbourhood", href: "/top/centru", gradient: intentGradient(300) },
+];
+
+/** Formatters the stories pass. Real callers inject locale-aware ones. */
+export const mockFormatters = {
+  price: (value: number) => `${value} lei`,
+  number: (value: number) => value.toLocaleString("en-US"),
+  score: (value: number) => (value / 10).toFixed(1),
+};
+
+export const mockHubLabels = {
+  mentions: (count: number) => `${count} mentions`,
+  venues: (count: number) => `${count} kitchens`,
+  seeAll: "See all",
+  signature: "SIGNATURE",
+  openNow: "Open now",
+  until: "until",
+};

package/src/components/menu-types.ts

@@ -0,0 +1,259 @@
+/**
+ * Structural mirror of the openapi `Dish` / `Drink` schemas, decoupled from any
+ * one app's generated types. FE, admin and post-generator map their domain
+ * shapes into these before passing data to the menu-hub surfaces.
+ *
+ * Same contract as `place-types.ts` and `event-types.ts`: no app schemas, no
+ * app hooks, no i18n. Every user-facing string arrives through a `*Labels`
+ * object, every destination through an `href`, and every locale-sensitive
+ * format through an injected formatter — the DS never owns a translation key
+ * or an `Intl` locale.
+ *
+ * ## One set of components, two tabs
+ *
+ * Dishes and drinks are the same shape. `MenuItemPreview.kind` is the only
+ * discriminator, and nothing in this file branches on it — a drinks hub is a
+ * different view model and a different `*Labels` object, never a second set of
+ * components. Anything that would need a `if (kind === 'drink')` inside a
+ * component belongs in the caller's mapper instead.
+ */
+
+import type { ComponentType, CSSProperties, ReactNode } from 'react'
+
+import type { MenuSizeAndPrice, PlacePreview } from './place-types'
+
+export type { MenuSizeAndPrice } from './place-types'
+
+/**
+ * The shape every menu surface's `linkComponent` must accept.
+ *
+ * One type rather than a clone per component: these surfaces nest each other —
+ * a family card renders a `<MenuItem>`, a spotlight renders a signature block —
+ * and a caller passes ONE `next/link` down through all of them. Subtly
+ * different clones made those hand-offs fail to typecheck for no design reason.
+ */
+export type MenuLinkProps = {
+  href: string
+  className?: string
+  'aria-label'?: string
+  'aria-current'?: 'page'
+  /** Intent tiles paint their hue on the link element itself. */
+  style?: CSSProperties
+  children?: ReactNode
+}
+
+export type MenuLinkComponent = ComponentType<MenuLinkProps>
+
+/**
+ * A dish or a drink as every hub surface consumes it.
+ *
+ * `mentions` is the census count of review mentions and is populated on every
+ * item in the catalogue — it is the ranking signal the hub is built on. Do not
+ * confuse it with `review_count`, which counts full review objects and is zero
+ * for most items; a surface that ranks on `review_count` renders an empty page.
+ */
+export type MenuItemPreview = {
+  id: string
+  slug: string
+  name: string
+  kind: 'dish' | 'drink'
+  description?: string
+  /** API category code (pizza, pasta, cocktail, non-alcoholic, …). Localised by the caller. */
+  category_slug?: string
+  sizes_and_prices?: MenuSizeAndPrice[]
+  /** Censused review mentions. The hub's ranking signal. */
+  mentions?: number
+  /** Full review objects citing this item. Sparse — not a ranking signal. */
+  review_count?: number
+  /** 0–100 recommendation score. */
+  score?: number
+  /** The venue serving it. Menu items are always venue-scoped. */
+  place?: MenuItemPlaceRef
+  /**
+   * Pre-resolved photo URL. Menu-item photography is AI-generated and hidden in
+   * production, so hub surfaces draw a typographic `<MenuFieldTile>` instead
+   * and leave this unset. It exists for the surfaces that legitimately show one
+   * (concept detail) and for consumers outside the consumer app.
+   */
+  photo_url?: string
+}
+
+/** The venue attribution carried on a menu item. */
+export type MenuItemPlaceRef = {
+  slug: string
+  name: string
+  /** Pre-resolved venue thumbnail. Venue photography is real; item photography is not. */
+  thumbnail_url?: string
+}
+
+/**
+ * A dish or drink concept — one item across every kitchen that makes it, under
+ * whatever name each of them uses. The page's keystone, and the one thing the
+ * catalogue can say that a single menu cannot.
+ */
+export type MenuConceptPreview = {
+  slug: string
+  /** Canonical concept name, e.g. "Margherita". */
+  title: string
+  kind: 'dish' | 'drink'
+  /** Venues serving it. */
+  venue_count?: number
+  price_low?: number
+  price_high?: number
+  /** Distinct names it appears under across those menus. */
+  alias_count?: number
+  /** Summed censused mentions across every venue's version. */
+  mentions?: number
+  rows?: MenuConceptRow[]
+}
+
+/** One venue's version of a concept, as drawn by `<ConceptCompare>`. */
+export type MenuConceptRow = {
+  place_slug: string
+  place_name: string
+  /** What this kitchen calls it on its own menu. */
+  alias: string
+  price: number
+  mentions?: number
+  rating?: number
+  /** Venue type line, e.g. "pub". Localised by the caller. */
+  place_type?: string
+  /** Neighbourhood, e.g. "Centru". */
+  place_area?: string
+  /**
+   * Pre-resolved VENUE photograph.
+   *
+   * The row is place-led: five restaurants that disagree about a name, not five
+   * bars of similar length. A price bar was drawn here first and it measured
+   * the one thing already written beside it in words, while the venue — the
+   * thing you are actually choosing between — had no image at all.
+   */
+  place_thumbnail_url?: string
+  open_now?: boolean
+  /** Marks the row the surface should lead with (cheapest, or most named). */
+  featured?: boolean
+  /** Portion, already formatted with its unit, e.g. "260g". */
+  portion_label?: string
+}
+
+/**
+ * A browsable grouping of venues — a cuisine on the dishes tab, a drink family
+ * on the drinks tab. Both are sets of VENUES, never sets of items: cuisine
+ * exists only on places, so a card counting dishes cannot be built.
+ */
+export type MenuFamilyPreview = {
+  slug: string
+  /** Display name, already localised by the caller. */
+  name: string
+  /** Venues in this family. */
+  venue_count: number
+  /**
+   * Facet chips. Counts are VENUES, not items — they come from the places
+   * facet narrowed by this family. The drinks tab has no equivalent facet, so
+   * its chips ship without counts; `count` is optional for that reason.
+   */
+  chips?: MenuFamilyChip[]
+  /** Price band across the family's venues. */
+  price_low?: number
+  price_high?: number
+  price_median?: number
+  /** Pre-resolved venue photos for the fanned deck. Venue photography only. */
+  venue_photo_urls?: string[]
+  /** The item this family is most named for. */
+  signature?: MenuFamilySignature
+}
+
+export type MenuFamilyChip = {
+  slug: string
+  label: string
+  /** Venue count. Absent where no facet backs the chip. */
+  count?: number
+}
+
+/** A family card's featured item. Same shape as a venue's, for the same reason. */
+export type MenuFamilySignature = MenuVenueSignature
+
+/**
+ * A venue as the hub's venue-scoped surfaces consume it: the place itself plus
+ * the pre-resolved bits a hub row needs and `PlacePreview` does not carry —
+ * which signature to lead with, and where the row points.
+ */
+export type MenuVenuePreview = {
+  place: PlacePreview
+  href: string
+  /**
+   * The signature to draw. Callers pick it from `reviews_digest.must_try`
+   * rather than the surface re-deriving the rule on every row.
+   */
+  signature?: MenuVenueSignature
+  /** Closing time as an already-formatted wall clock, e.g. "23:00". */
+  closes_at_label?: string
+}
+
+/**
+ * The resolved signature on a venue row.
+ *
+ * It carries a whole `MenuItemPreview` rather than a flattened name and price,
+ * because every surface that draws one renders `<MenuItem>` — the same row a
+ * venue's own menu uses — and that component takes an item. Flattening it here
+ * was what let the hub's version drift into a different-looking row.
+ */
+export type MenuVenueSignature = {
+  item: MenuItemPreview
+  /** The reviewers' reason, from the digest. Rendered in place of the description. */
+  why?: string
+  href?: string
+  /** The digest called this the venue's signature rather than merely frequent. */
+  isSignature?: boolean
+}
+
+/**
+ * An intent tile — a family plus a constraint, resolving to a category page.
+ *
+ * Only about thirty-two of the thirty-eight cuisines have a page, so `href` is
+ * required: a tile that cannot resolve to a real destination is not rendered
+ * rather than linking nowhere.
+ */
+export type MenuIntentTile = {
+  slug: string
+  label: string
+  /** Supporting line, e.g. "247 kitchens". Already formatted by the caller. */
+  caption?: string
+  href: string
+  /**
+   * Finished CSS gradient for the tile's ground, e.g.
+   * `linear-gradient(150deg, …)`.
+   *
+   * A gradient rather than a token name, for the same reason `<MenuField>`
+   * takes one: the hue tables are app-owned, and a component referencing
+   * `var(--h-pizza)` renders an invisible tile in any consumer that does not
+   * happen to define that variable. A missing gradient falls back to `bg-muted`
+   * — visible and obviously unstyled, rather than white text on white.
+   */
+  gradient?: string
+  /** Icon node, resolved by the caller — the DS does not pick icons for it. */
+  icon?: ReactNode
+}
+
+/** Formatters injected into every menu surface. The DS owns no `Intl` locale. */
+export type MenuFormatters = {
+  /** 24 → "24 lei". */
+  price: (value: number) => string
+  /** 1717 → "1,717". */
+  number: (value: number) => string
+}
+
+/** Strings shared by every menu-hub surface. */
+export type MenuHubLabels = {
+  /** Mention-count badge. Pass a translator that handles ICU pluralization. */
+  mentions: (count: number) => string
+  /** Venue-count line. Pass a translator that handles ICU pluralization. */
+  venues: (count: number) => string
+  /** "See all" affordance on a section header. */
+  seeAll: string
+  /** Badge on a must-try row the digest called `signature`. */
+  signature: string
+  openNow: string
+  /** Prefixes a closing time, e.g. "until". */
+  until: string
+}