@bearmenu/ui 0.8.8 → 0.8.10

package/src/components/menu-mocks.ts

@@ -0,0 +1,592 @@
+/**
+ * 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,
+  MenuFamilyBlockPreview,
+  MenuFamilyPreview,
+  MenuFilterChip,
+  MenuIndexEntry,
+  MenuIntentFigure,
+  MenuIntentTile,
+  MenuItemPreview,
+  MenuKitchenPreview,
+  MenuLoosenOption,
+  MenuVenuePreview,
+  QaItem,
+} 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: [],
+};
+
+/** 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: [],
+};
+
+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",
+};
+
+/* ── intent page ────────────────────────────────────────────────────────── */
+
+/**
+ * The intent page's kitchen rows.
+ *
+ * The gaps are the gaps the API actually has, and they are the reason the row
+ * degrades the way it does: `must_try` entries arrive from a LIST endpoint, so
+ * a third of them carry no `slug` (nothing to open — the dish line goes inert)
+ * and none of them carry `mentions` (only `review_ids.length`, which is absent
+ * for census items — so the count line disappears rather than reading zero).
+ * A layout that survives these survives production.
+ */
+export const mockKitchens: MenuKitchenPreview[] = [
+  {
+    place: placeBySlug("salt-and-stone"),
+    href: "/places/salt-and-stone",
+    metaLabel: "courtyard · Centru",
+    hoursLabel: "kitchen until 23:00",
+    priceLabel: "62 lei",
+    dish: {
+      name: "Truffle Tagliatelle",
+      href: "/menu/dishes/truffle-tagliatelle",
+      kicker: "MOST NAMED HERE",
+      meta: "17 reviews name it",
+    },
+  },
+  {
+    place: placeBySlug("the-copper-yard"),
+    href: "/places/the-copper-yard",
+    metaLabel: "pizzeria · Centru",
+    hoursLabel: "kitchen until 23:30",
+    priceLabel: "54 lei",
+    dish: {
+      name: "Tagliatelle cu Hribi",
+      href: "/menu/dishes/tagliatelle-cu-hribi",
+      kicker: "MOST NAMED HERE",
+      meta: "14 reviews name it",
+    },
+  },
+  {
+    // Closed, and its must-try has no live menu row — the dish line is inert.
+    place: { ...placeBySlug("the-quiet-hours"), open_now: false },
+    href: "/places/the-quiet-hours",
+    metaLabel: "bistro · Gheorgheni",
+    hoursLabel: "closed · opens 12:00",
+    priceLabel: "58 lei",
+    dish: { name: "Risotto ai Funghi", kicker: "MOST NAMED HERE" },
+  },
+  {
+    // No dish at all: the row must still read as a venue.
+    place: placeBySlug("green-room-canteen"),
+    href: "/places/green-room-canteen",
+    metaLabel: "bistro · Centru",
+    priceLabel: "38 lei",
+  },
+];
+
+/** The same rows in a filtered state — each answering the filter, not volunteering. */
+export const mockMatchedKitchens: MenuKitchenPreview[] = mockKitchens.slice(0, 3).map((kitchen) => ({
+  ...kitchen,
+  dish: kitchen.dish && {
+    ...kitchen.dish,
+    kicker: "WHY IT MATCHES",
+    meta: "mid-range · 300g",
+    matched: true,
+    matchLabel: "vegetarian",
+  },
+}));
+
+export const mockIntentFigures: MenuIntentFigure[] = [
+  { key: "total", value: "247", label: "kitchens" },
+  { key: "pizza", value: "120", label: "make a pizza", onSelect: () => {} },
+  { key: "pasta", value: "96", label: "make pasta", onSelect: () => {} },
+  { key: "open", value: "58", label: "open now", onSelect: () => {} },
+];
+
+/**
+ * Note there is no zero-count chip here, and that is not an oversight: the
+ * facets endpoint omits values that would match nothing, so a chip can only
+ * become `empty` client-side, after it was offered and the reader's next filter
+ * emptied it. The `Dead` story constructs that case deliberately.
+ */
+export const mockFilterChips: MenuFilterChip[] = [
+  { key: "open", label: "Open now", count: 58, active: true },
+  { key: "price", label: "Mid-range", count: 96 },
+  { key: "terrace", label: "Terrace", count: 31 },
+  { key: "veg", label: "Has a vegetarian dish", count: 84 },
+  { key: "late", label: "Serving past midnight", count: 4 },
+  { key: "centru", label: "Centru", count: 90 },
+];
+
+export const mockLoosenOptions: MenuLoosenOption[] = [
+  { key: "open", label: "Drop “Open now”", gainLabel: "+8 kitchens" },
+  { key: "price", label: "Drop “Mid-range”", gainLabel: "+7 kitchens" },
+  { key: "veg", label: "Drop “Vegetarian”", gainLabel: "+2 kitchens" },
+];
+
+/* ── the browse index ───────────────────────────────────────────────────── */
+
+/**
+ * The long tail is the point of these fixtures.
+ *
+ * Cluj's cuisine facet runs from 457 down to 1, and twenty-two of the
+ * thirty-eight have fewer than twenty places. A layout tested only on the head
+ * of that list looks fine and then ships a page whose last two columns are
+ * single digits.
+ */
+export const mockIndexEntries: MenuIndexEntry[] = [
+  ["Breakfast & brunch", 314],
+  ["Romanian", 299],
+  ["Bakery", 250],
+  ["Italian", 247],
+  ["Pizza", 245],
+  ["Fast food", 229],
+  ["Vegetarian", 172],
+  ["American", 153],
+  ["Vegan", 108],
+  ["Mediterranean", 78],
+  ["Seafood", 77],
+  ["Eastern European", 67],
+  ["Fusion", 61],
+  ["Middle Eastern", 58],
+  ["BBQ", 57],
+  ["Deli", 51],
+  ["Steakhouse", 49],
+  ["Japanese", 34],
+  ["French", 26],
+  ["Sushi", 23],
+  ["Turkish", 22],
+  ["Chinese", 14],
+  ["Greek", 12],
+  ["Indian", 11],
+  ["Thai", 7],
+  ["German", 5],
+  ["Lebanese", 3],
+  ["Portuguese", 1],
+].map(([name, count], index) => ({
+  slug: String(name).toLowerCase().replace(/[^a-z]+/g, "-"),
+  name: String(name),
+  count: Number(count),
+  href: `/menu/cuisines/${String(name).toLowerCase().replace(/[^a-z]+/g, "-")}`,
+  gradient: Object.values(mockGradients)[index % 5],
+}));
+
+export const mockFamilyBlock: MenuFamilyBlockPreview = {
+  slug: "italian",
+  name: "Italian",
+  venueCount: 247,
+  chips: [
+    { slug: "pizza", label: "Pizza", count: 120 },
+    { slug: "pasta", label: "Pasta", count: 96 },
+    { slug: "salad", label: "Salad", count: 88 },
+  ],
+  priceBandLabel: "22–86 lei",
+  photoUrls: [],
+  // Three, as the cuisines index sends, and stripped the same way: no dish and
+  // no price. The dish column is ~110px inside this card, which truncates the
+  // name and wraps its kicker to three lines; the price is already the band
+  // above.
+  venues: mockKitchens
+    .slice(0, 3)
+    .map((kitchen) => ({ ...kitchen, dish: undefined, priceLabel: undefined })),
+  href: "/menu/cuisines/italian",
+};
+
+/** No photographs, no venue, no price — the degraded block still reads. */
+export const mockBareFamilyBlock: MenuFamilyBlockPreview = {
+  slug: "portuguese",
+  name: "Portuguese",
+  venueCount: 1,
+  href: "/menu/cuisines/portuguese",
+};
+
+export const mockQa: QaItem[] = [
+  {
+    question: "Which Italian kitchen is best in Cluj?",
+    answer:
+      "Salt & Stone is named most often — seventeen reviews single out the truffle tagliatelle. The Copper Yard is second on volume and about eight lei cheaper across the menu.",
+  },
+  {
+    question: "What does an Italian main cost?",
+    answer:
+      "Pasta runs 38 to 84 lei and pizza 30 to 68 across these kitchens. Ninety-six of them sit in the mid-range price band.",
+  },
+  {
+    question: "Anywhere open late?",
+    answer:
+      "Four keep the kitchen going past midnight — The Copper Yard until 00:00 is the latest of the Italian rooms.",
+  },
+];