@bearmenu/ui 0.8.9 → 0.8.11

package/src/components/concept-compare.stories.tsx

@@ -1,35 +1,108 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "./button";
 import { ConceptCompare } from "./concept-compare";
-import { mockConcept, mockGradients } from "./menu-mocks";
+import { mockConcept } from "./menu-mocks";
+import type { MenuConceptRow } from "./menu-types";
 
 const labels = {
   kind: "DISH CONCEPT",
-  alias: "ON THEIR MENU AS",
-  perPortion: "per portion",
-  cheapest: "cheapest shown",
-};
-
-const itemLabels = {
-  currency: "lei",
+  cheapest: "Cheapest",
   mentions: (count: number) => `${count} mentions`,
-  signature: "SIGNATURE",
-  mentioned: "MENTIONED",
+  openRoom: (alias: string, venue: string) => `${alias} at ${venue}`,
 };
 
 const formatPrice = (amount: number) => `${amount} lei`;
 
-const hrefs = Object.fromEntries(
-  (mockConcept.rows ?? []).map((row) => [row.place_slug, `/places/${row.place_slug}`])
+/** A stand-in venue photograph with enough variance that the ink bands have something to sit on. */
+function room(hue: number, label: string) {
+  return (
+    "data:image/svg+xml;utf8," +
+    encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="480" height="640"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="hsl(${hue} 28% 60%)"/><stop offset="1" stop-color="hsl(${hue} 22% 26%)"/></linearGradient></defs><rect width="480" height="640" fill="url(#g)"/><circle cx="140" cy="150" r="70" fill="hsl(${hue} 40% 82%)" opacity=".55"/><rect x="240" y="360" width="200" height="140" fill="hsl(${hue} 15% 18%)" opacity=".7"/><text x="50%" y="92%" font-family="monospace" font-size="20" fill="#fff" text-anchor="middle">${label}</text></svg>`
+    )
+  );
+}
+
+const rooms: MenuConceptRow[] = [
+  {
+    place_slug: "casa-maramureseana",
+    place_name: "Casa Maramureșeană",
+    alias: "Papanași cu Smântână și Dulceață",
+    price: 29,
+    mentions: 12,
+    rating: 4.5,
+    place_area: "Centru",
+    place_thumbnail_url: room(30, "room 1"),
+  },
+  {
+    place_slug: "maimuta-plangatoare",
+    place_name: "Maimuța Plângătoare",
+    alias: "Papanasi cu Gem si Smantana",
+    price: 31,
+    mentions: 19,
+    rating: 4.5,
+    place_area: "Centru",
+    place_thumbnail_url: room(200, "room 2"),
+  },
+  {
+    place_slug: "cafe-bulgakov",
+    place_name: "Café Bulgakov",
+    alias: "Papanași",
+    price: 32,
+    mentions: 12,
+    rating: 4.6,
+    place_area: "Centru",
+    place_thumbnail_url: room(90, "room 3"),
+  },
+  {
+    place_slug: "garlic",
+    place_name: "GARLIC - bites&tales",
+    alias: "Papanași în Țeapă",
+    price: 38,
+    mentions: 12,
+    rating: 4.7,
+    place_area: "Centru",
+    place_thumbnail_url: room(300, "room 4"),
+  },
+];
+
+const concept = { ...mockConcept, slug: "papanasi", title: "Papanași", rows: rooms };
+
+const figures = [
+  { value: "45", label: "kitchens" },
+  { value: "29–52", label: "lei across them", accent: true },
+  { value: "167", label: "mentions" },
+  { value: "8", label: "names" },
+];
+
+const hrefs = Object.fromEntries(rooms.map((r) => [r.place_slug, `/places/${r.place_slug}`]));
+
+const seeAll = (
+  <a
+    href="/menu/dishes/papanasi"
+    className="inline-flex h-10 items-center justify-center gap-1.5 rounded-full border border-white/20 bg-white/[0.16] px-4 text-[13.5px] font-bold text-white"
+  >
+    See all 45 kitchens
+  </a>
 );
 
 const meta: Meta<typeof ConceptCompare> = {
   title: "Menu/ConceptCompare",
   component: ConceptCompare,
   tags: ["autodocs"],
+  args: {
+    concept,
+    labels,
+    lede: "45 kitchens make it, and they do not agree on the name",
+    formatPrice,
+    figures,
+    hrefs,
+    footnote:
+      "The four cheapest of the 45, priced from each menu as it stands — the dearest is 52 lei. One photograph per kitchen; no room here is a room that does not serve it.",
+    actions: seeAll,
+  },
   decorators: [
     (Story) => (
-      <div className="w-[1000px] bg-background p-4">
+      <div className="w-[1100px] bg-background p-6">
         <Story />
       </div>
     ),
@@ -38,7 +111,7 @@ const meta: Meta<typeof ConceptCompare> = {
     docs: {
       description: {
         component:
-          "One dish or drink across every kitchen that makes it, under whatever name each of them uses. The row is PLACE-LED: it leads with the venue photograph, which is real and licensed, because the reader is choosing between restaurants. A price bar was drawn here first and measured the one value already printed beside it in words. From `lg` the rows are a comparison table; below it they become the production `MenuItem`, with the kitchen's own wording as the name.",
+          "One dish across the kitchens that make it — and **no surfaces at all**. The card is a contact sheet of venue photographs, one per room, and the three readable things float on it on ink bands: the identity across the top, each kitchen's line over its own photograph, the foot along the bottom. Read ACROSS, not down: four rooms side by side, each with its own name and price. The photographs are placed as cells of the same grid as the rooms, spanning from the head down, so the head's ink fades into them and every seam lands on a room boundary. Nothing in it is themed — the edge is the only thing that adapts to the page.",
       },
     },
   },
@@ -47,39 +120,48 @@ const meta: Meta<typeof ConceptCompare> = {
 export default meta;
 type Story = StoryObj<typeof ConceptCompare>;
 
-export const Default: Story = {
+export const Default: Story = {};
+
+/** The same card on a dark page: identical inside, a light hairline and deeper shadow outside. */
+export const DarkPage: Story = {
+  decorators: [
+    (Story) => (
+      <div className="dark w-[1100px] bg-background p-6">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** Three rooms: one across on the phone, then two. */
+export const ThreeRooms: Story = {
   args: {
-    concept: mockConcept,
-    labels,
-    itemLabels,
-    formatPrice,
-    gradient: mockGradients.pasta,
+    concept: { ...concept, title: "Kürtőskalács", rows: rooms.slice(0, 3) },
+    lede: "Three kitchens in the city make it",
     figures: [
-      { value: "44", label: "kitchens" },
-      { value: "8—44", label: "lei" },
-      { value: "168", label: "mentions" },
+      { value: "3", label: "kitchens" },
+      { value: "14–19", label: "lei across them", accent: true },
+      { value: "11", label: "mentions" },
+      { value: "3", label: "names" },
     ],
-    hrefs,
-    footnote: "Prices read from each menu as it stands. Portions normalised where the menu states them.",
-    actions: <Button size="sm">See all 44</Button>,
+    footnote:
+      "All three kitchens, all three rooms — so the spread above is the whole spread. A concept this thin has no tail to open.",
+    actions: undefined,
   },
 };
 
-/** Below `lg` every row is a `MenuItem`, the alias leading. */
-export const Mobile: Story = {
+/** A room with no photograph: the ground with the venue's initial, never a grey box. */
+export const MissingPhoto: Story = {
   args: {
-    concept: mockConcept,
-    labels,
-    itemLabels,
-    formatPrice,
-    gradient: mockGradients.pasta,
-    figures: [
-      { value: "44", label: "kitchens" },
-      { value: "8—44", label: "lei" },
-      { value: "168", label: "mentions" },
-    ],
-    hrefs,
+    concept: {
+      ...concept,
+      rows: rooms.map((r, i) => (i === 2 ? { ...r, place_thumbnail_url: undefined } : r)),
+    },
   },
+};
+
+/** 2×2 on the phone — the reading turns from across to around, but it is still four rooms in one view. */
+export const Mobile: Story = {
   decorators: [
     (Story) => (
       <div className="w-[390px] bg-background p-3">
@@ -88,17 +170,3 @@ export const Mobile: Story = {
     ),
   ],
 };
-
-/** With the concept's own photograph — the one item surface that shows one. */
-export const WithPhoto: Story = {
-  args: {
-    concept: mockConcept,
-    labels,
-    itemLabels,
-    formatPrice,
-    gradient: mockGradients.pasta,
-    imageUrl: "https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=200&h=200&fit=crop",
-    figures: [{ value: "44", label: "kitchens" }],
-    hrefs,
-  },
-};