@bearmenu/ui 0.8.8 → 0.8.10

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

@@ -0,0 +1,131 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { PhotoGround } from "./photo-ground";
+import { SnapRail, SnapRailDots } from "./snap-rail";
+
+/**
+ * ConceptCompareRail — the rooms as a rail, the card's backdrop following the
+ * active room, and the foot band that carries the page dots.
+ *
+ * On the phone the card IS the current room's photograph: the head, the rail
+ * and the foot all sit on it, and it cross-fades to the next room as the
+ * reader swipes. That needs the rail's active index, which is state — so this
+ * is the one client boundary in `ConceptCompare`. It takes only what can cross
+ * that boundary: photograph URLs, initials, and the pre-rendered rooms and
+ * foot as children. `labels`, `formatPrice` and the rest stay server-side.
+ *
+ * ## Why the backdrop lives here and not in each slide
+ *
+ * A slide carrying its own photograph is a boxed card sliding over a dark
+ * ground; the backdrop changing under a transparent slide is the reader
+ * turning to look at the next room. The second is the smoother thing, and it
+ * is also cheaper to look at — one photograph at a time instead of the edge of
+ * the next one peeking in.
+ *
+ * ## Why the foot is here too
+ *
+ * The dots need the rail's state, and on the phone they belong INSIDE the foot
+ * band's glass — under the rail they sat on a strip of bare photograph between
+ * the room's scrim and the foot's. So the foot renders here, with the dots as
+ * its first row below `lg`, and `ConceptCompare` hands it the foot's content.
+ *
+ * Desktop ignores the backdrop and the dots (`lg:hidden`); each room carries
+ * its own photograph there, side by side, and the foot is an absolute glass
+ * band over them.
+ */
+
+export type ConceptCompareBackdrop = {
+  /** The room's photograph. Absent: the ground with the venue's initial. */
+  src?: string;
+  /** The venue's first letter, for the no-photograph fallback. */
+  initial: string;
+};
+
+export type ConceptCompareRailProps = {
+  backdrops: ConceptCompareBackdrop[];
+  /** Classes for the rail itself — the desktop grid lives here. */
+  railClassName?: string;
+  /** The foot's content: the note and the action. Omit for no foot. */
+  foot?: React.ReactNode;
+  children: React.ReactNode;
+};
+
+/**
+ * The foot band's glass — two behaviours, one element.
+ *
+ * On the phone the band sits directly under a slide whose own scrim has
+ * already reached 0.9 at its bottom edge, so the glass is SOLID from its first
+ * pixel: a fade-in here left a lighter strip at the seam where the photograph
+ * showed through between the slide's darkness and the foot's, and the two read
+ * as disconnected pieces. From `lg` the foot floats over open photography with
+ * the room text well above it, so there it fades out over its top edge on the
+ * same curve as its mask, the way the head does at its underside.
+ *
+ * Same literal as every other scrim on the card, so they read as one shadow;
+ * not `var(--scrim)`, which is the app's token and not this package's.
+ */
+const FOOT_GLASS = cn(
+  "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:content-[''] before:backdrop-blur-lg",
+  "before:bg-[oklch(0.16_0.012_55_/_0.9)]",
+  "lg:before:[mask-image:linear-gradient(to_top,black_60%,transparent_100%)] lg:before:bg-[linear-gradient(to_top,oklch(0.16_0.012_55_/_0.88)_0%,oklch(0.16_0.012_55_/_0.84)_60%,oklch(0.16_0.012_55_/_0.4)_85%,oklch(0.16_0.012_55_/_0)_100%)]"
+);
+
+export function ConceptCompareRail({
+  backdrops,
+  railClassName,
+  foot,
+  children,
+}: ConceptCompareRailProps) {
+  const [active, setActive] = React.useState(0);
+  const count = React.Children.count(children);
+
+  return (
+    <>
+      {/* The backdrop: every room's photograph stacked, the active one shown,
+          cross-fading on swipe. Positioned against the CARD — `ConceptCompare`
+          renders this inside its `relative isolate` frame. Desktop hides it;
+          each room carries its own photograph there. */}
+      <PhotoGround
+        className="-z-10 lg:hidden"
+        mode="stack"
+        active={active}
+        photos={backdrops.map((backdrop) => backdrop.src)}
+        initials={backdrops.map((backdrop) => backdrop.initial)}
+        overlay
+        loading="eager"
+      />
+
+      {/* `pb-0` over the rail's default `pb-0.5`: two pixels of half-inked
+          photograph between the slide's scrim and the foot's glass reads as a
+          hairline where none was drawn.
+
+          `overscroll-x-contain`, because this card is itself a slide in the
+          hub's concept carousel. Without it a swipe that reaches the last room
+          chains into the outer rail and jumps to the next concept — the reader
+          asked to see the fourth kitchen and got a different dish. */}
+      <SnapRail
+        itemWidth="full"
+        gap="sm"
+        onActiveChange={setActive}
+        className={cn("pb-0 overscroll-x-contain", railClassName)}
+      >
+        {children}
+      </SnapRail>
+
+      {foot && (
+        <div
+          className={cn(
+            "relative isolate flex flex-col gap-3 px-4 pb-4 pt-3",
+            "lg:absolute lg:inset-x-0 lg:bottom-0 lg:z-10 lg:flex-row lg:items-center lg:gap-5 lg:px-5 lg:pb-4 lg:pt-6",
+            FOOT_GLASS
+          )}
+        >
+          <SnapRailDots count={count} active={active} className="lg:hidden" />
+          {foot}
+        </div>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,172 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ConceptCompare } from "./concept-compare";
+import { mockConcept } from "./menu-mocks";
+import type { MenuConceptRow } from "./menu-types";
+
+const labels = {
+  kind: "DISH CONCEPT",
+  cheapest: "Cheapest",
+  mentions: (count: number) => `${count} mentions`,
+  openRoom: (alias: string, venue: string) => `${alias} at ${venue}`,
+};
+
+const formatPrice = (amount: number) => `${amount} lei`;
+
+/** A stand-in venue photograph with enough variance that the glass has something to blur. */
+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.12] px-4 text-[13.5px] font-bold text-white backdrop-blur-md"
+  >
+    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-[1100px] bg-background p-6">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "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 through glass: 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 glass genuinely blurs 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.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ConceptCompare>;
+
+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: { ...concept, title: "Kürtőskalács", rows: rooms.slice(0, 3) },
+    lede: "Three kitchens in the city make it",
+    figures: [
+      { value: "3", label: "kitchens" },
+      { value: "14–19", label: "lei across them", accent: true },
+      { value: "11", label: "mentions" },
+      { value: "3", label: "names" },
+    ],
+    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,
+  },
+};
+
+/** A room with no photograph: the ground with the venue's initial, never a grey box. */
+export const MissingPhoto: Story = {
+  args: {
+    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">
+        <Story />
+      </div>
+    ),
+  ],
+};