@bearmenu/ui 0.8.7 → 0.8.9

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

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./button";
+import { ConceptCompare } from "./concept-compare";
+import { mockConcept, mockGradients } from "./menu-mocks";
+
+const labels = {
+  kind: "DISH CONCEPT",
+  alias: "ON THEIR MENU AS",
+  perPortion: "per portion",
+  cheapest: "cheapest shown",
+};
+
+const itemLabels = {
+  currency: "lei",
+  mentions: (count: number) => `${count} mentions`,
+  signature: "SIGNATURE",
+  mentioned: "MENTIONED",
+};
+
+const formatPrice = (amount: number) => `${amount} lei`;
+
+const hrefs = Object.fromEntries(
+  (mockConcept.rows ?? []).map((row) => [row.place_slug, `/places/${row.place_slug}`])
+);
+
+const meta: Meta<typeof ConceptCompare> = {
+  title: "Menu/ConceptCompare",
+  component: ConceptCompare,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[1000px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    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.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ConceptCompare>;
+
+export const Default: 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,
+    footnote: "Prices read from each menu as it stands. Portions normalised where the menu states them.",
+    actions: <Button size="sm">See all 44</Button>,
+  },
+};
+
+/** Below `lg` every row is a `MenuItem`, the alias leading. */
+export const Mobile: 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,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** 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,
+  },
+};

package/src/components/concept-compare.tsx

@@ -0,0 +1,276 @@
+import { MessageSquare, Star } from "lucide-react";
+import { cn } from "../lib/utils";
+import { MenuField } from "./menu-field";
+import { MenuItem, type MenuItemLabels } from "./menu-item";
+import type { MenuConceptPreview, MenuLinkComponent, MenuLinkProps } from "./menu-types";
+
+/**
+ * ConceptCompare — one dish or drink across every kitchen that makes it, under
+ * whatever name each of them uses.
+ *
+ * The keystone module: a single menu can list papanași, only a catalogue can
+ * say that seventy kitchens make them under fifty different names between 8 and
+ * 44 lei. The alias column is what makes it honest — these are not the same row
+ * seventy times, they are seventy differently-named rows we matched, and
+ * showing each kitchen's own wording is the evidence for that.
+ *
+ * ## The row is place-led
+ *
+ * Each row leads with the VENUE PHOTOGRAPH, which is real and licensed. It
+ * replaced a price bar, and the trade is not close: the bar measured the one
+ * value already printed beside it in words, while the thing a reader is
+ * actually choosing between — the restaurant — had no image at all. Five
+ * restaurants that disagree about a name is the story; five bars of similar
+ * length is not.
+ *
+ * ## Two layouts, one component
+ *
+ * From `lg` the row is a table: rank, venue, alias, mentions, price. Below it,
+ * the rows become the production `<MenuItem>` — the alias as the name, the
+ * venue underneath — because a five-column table does not survive 390px and
+ * the item row already solves this exact shape everywhere else in the app.
+ */
+
+/** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
+export type ConceptCompareLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: ConceptCompareLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type ConceptCompareFigure = {
+  /** Pre-formatted, e.g. "44". */
+  value: string;
+  label: string;
+};
+
+export type ConceptCompareLabels = {
+  /** Small caps kicker, e.g. "DISH CONCEPT". */
+  kind: string;
+  /** Column heading over the aliases, e.g. "ON THEIR MENU AS". */
+  alias: string;
+  /** Under each price, e.g. "per portion". */
+  perPortion?: string;
+  /** Badge on the lowest-priced row, e.g. "cheapest shown". */
+  cheapest?: string;
+};
+
+export type ConceptCompareProps = {
+  concept: MenuConceptPreview;
+  labels: ConceptCompareLabels;
+  /** Passed to the mobile `<MenuItem>` rows. */
+  itemLabels: MenuItemLabels;
+  formatPrice: (amount: number) => string;
+  formatCount?: (value: number) => string;
+  /** CSS gradient for the header swatch, when there is no photograph. */
+  gradient: string;
+  /** A real photograph of the concept, when the matched menu row carries one. */
+  imageUrl?: string;
+  figures?: ConceptCompareFigure[];
+  /** Destination per row, keyed by place slug. */
+  hrefs?: Record<string, string>;
+  /** The provenance note in the footer. */
+  footnote?: string;
+  /** Actions in the footer — pass rendered links or buttons. */
+  actions?: React.ReactNode;
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+export function ConceptCompare({
+  concept,
+  labels,
+  itemLabels,
+  formatPrice,
+  formatCount,
+  gradient,
+  imageUrl,
+  figures,
+  hrefs,
+  footnote,
+  actions,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: ConceptCompareProps) {
+  const rows = concept.rows ?? [];
+  // Derived, not passed: the cheapest row is a fact about THIS list, and a
+  // caller computing it separately could disagree with what is rendered.
+  const cheapest = rows.reduce<number | undefined>(
+    (lowest, row) => (lowest === undefined || row.price < lowest ? row.price : lowest),
+    undefined
+  );
+
+  return (
+    <div className={cn("overflow-hidden rounded-[18px] border border-border bg-card", className)}>
+      <div className="flex flex-col gap-4 p-4 lg:flex-row lg:items-center lg:gap-6 lg:p-5">
+        {imageUrl ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={imageUrl}
+            alt=""
+            className="aspect-[16/9] w-full shrink-0 rounded-xl object-cover lg:aspect-auto lg:h-[88px] lg:w-[88px]"
+          />
+        ) : (
+          <MenuField
+            name={concept.title}
+            gradient={gradient}
+            seedKey={concept.slug}
+            className="aspect-[16/9] w-full shrink-0 rounded-xl lg:aspect-auto lg:h-[88px] lg:w-[88px]"
+          />
+        )}
+
+        <div className="min-w-0 flex-1">
+          <span className="text-[9.5px] font-bold uppercase tracking-[0.12em] text-muted-foreground">
+            {labels.kind}
+          </span>
+          <h3 className="mt-1 font-serif text-2xl font-semibold tracking-[-0.02em] lg:text-[30px]">
+            {concept.title}
+          </h3>
+        </div>
+
+        {figures && figures.length > 0 && (
+          <div className="flex shrink-0 gap-6 lg:gap-8">
+            {figures.map((figure) => (
+              <div key={figure.label} className="text-left lg:text-right">
+                <div className="text-xl font-extrabold leading-none tracking-[-0.03em] tabular-nums lg:text-2xl">
+                  {figure.value}
+                </div>
+                <div className="mt-1 text-[10.5px] text-muted-foreground">{figure.label}</div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* ── Below `lg`: the production item row ─────────────────────────── */}
+      <ul className="border-t border-border lg:hidden">
+        {rows.map((row) => (
+          <li key={row.place_slug} className="border-b border-border last:border-b-0">
+            <MenuItem
+              item={{
+                id: row.place_slug,
+                slug: row.place_slug,
+                // The kitchen's OWN wording leads the row — that IS the point
+                // of the module.
+                name: row.alias,
+                kind: concept.kind,
+                mentions: row.mentions,
+                sizes_and_prices: [{ size: 0, price: row.price }],
+              }}
+              labels={itemLabels}
+              formatPrice={formatPrice}
+              formatCount={formatCount}
+              venueName={row.place_name}
+              href={hrefs?.[row.place_slug]}
+              linkComponent={LinkComponent}
+              className={cn(row.price === cheapest && "bg-accent-subtle/40")}
+            />
+          </li>
+        ))}
+      </ul>
+
+      {/* ── From `lg`: the comparison table ─────────────────────────────── */}
+      <ol className="hidden border-t border-border lg:block">
+        {rows.map((row, index) => {
+          const isCheapest = row.price === cheapest;
+
+          const content = (
+            <>
+              <span className="w-5 shrink-0 text-center text-xs font-bold tabular-nums text-muted-foreground">
+                {index + 1}
+              </span>
+
+              <span className="relative h-10 w-10 shrink-0 overflow-hidden rounded-lg bg-[repeating-linear-gradient(135deg,oklch(0.78_0.018_55)_0_8px,oklch(0.84_0.012_58)_8px_16px)]">
+                {row.place_thumbnail_url && (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={row.place_thumbnail_url}
+                    alt=""
+                    loading="lazy"
+                    className="h-full w-full object-cover"
+                  />
+                )}
+                {row.open_now && (
+                  <i
+                    aria-hidden
+                    className="absolute right-0.5 top-0.5 h-[6px] w-[6px] rounded-full bg-[var(--free,currentColor)] ring-2 ring-white/80"
+                  />
+                )}
+              </span>
+
+              <span className="min-w-0 w-[200px] shrink-0">
+                <span className="block truncate text-sm font-bold tracking-[-0.01em]">
+                  {row.place_name}
+                </span>
+                <span className="mt-px flex items-center gap-1.5 text-[11px] text-muted-foreground">
+                  {row.rating != null && (
+                    <>
+                      <Star className="h-2.5 w-2.5" aria-hidden />
+                      <span className="tabular-nums">{row.rating}</span>
+                    </>
+                  )}
+                  {row.place_area && <span className="truncate">{row.place_area}</span>}
+                </span>
+              </span>
+
+              <span className="min-w-0 flex-1">
+                <span className="block text-[9.5px] font-bold uppercase tracking-[0.1em] text-muted-foreground">
+                  {labels.alias}
+                </span>
+                <span className="block truncate font-serif text-[13px] italic">{row.alias}</span>
+              </span>
+
+              {row.mentions != null && row.mentions > 0 && (
+                <span className="inline-flex shrink-0 items-center gap-1 text-[11px] tabular-nums text-muted-foreground">
+                  <MessageSquare className="h-[11px] w-[11px]" aria-hidden />
+                  {row.mentions}
+                </span>
+              )}
+
+              <span className="w-[92px] shrink-0 text-right">
+                <b
+                  className={cn(
+                    "block text-sm font-extrabold tabular-nums",
+                    isCheapest && "text-[var(--free,currentColor)]"
+                  )}
+                >
+                  {formatPrice(row.price)}
+                </b>
+                <span className="block text-[10px] text-muted-foreground">
+                  {isCheapest && labels.cheapest ? labels.cheapest : labels.perPortion}
+                </span>
+              </span>
+            </>
+          );
+
+          const rowClasses = "flex items-center gap-4 px-5 py-3";
+
+          return (
+            <li key={row.place_slug} className="border-b border-border last:border-b-0">
+              {hrefs?.[row.place_slug] ? (
+                <LinkComponent
+                  href={hrefs[row.place_slug]}
+                  className={cn(
+                    rowClasses,
+                    "transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+                  )}
+                >
+                  {content}
+                </LinkComponent>
+              ) : (
+                <div className={rowClasses}>{content}</div>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+
+      {(footnote || actions) && (
+        <div className="flex flex-wrap items-center gap-3 p-4">
+          {footnote && <span className="text-[11.5px] text-muted-foreground">{footnote}</span>}
+          {actions && <div className="ml-auto flex items-center gap-2">{actions}</div>}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/coverflow.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { Coverflow, type CoverflowItem } from "./coverflow";
 
@@ -175,6 +175,33 @@ describe("Coverflow", () => {
     });
   });
 
+  describe("the drag", () => {
+    it("steps forward on a leftward drag and back on a rightward one", () => {
+      const onActiveIndexChange = vi.fn();
+      renderCoverflow({ activeIndex: 2, onActiveIndexChange });
+      const stage = screen.getByRole("button", { name: "Event 2" }).parentElement!
+        .parentElement as HTMLElement;
+
+      fireEvent.pointerDown(stage, { clientX: 200, pointerId: 1, button: 0 });
+      fireEvent.pointerMove(stage, { clientX: 150, pointerId: 1 });
+      fireEvent.pointerMove(stage, { clientX: 100, pointerId: 1 });
+      fireEvent.pointerUp(stage, { clientX: 100, pointerId: 1 });
+      expect(onActiveIndexChange).toHaveBeenLastCalledWith(3);
+
+      fireEvent.pointerDown(stage, { clientX: 100, pointerId: 1, button: 0 });
+      fireEvent.pointerMove(stage, { clientX: 150, pointerId: 1 });
+      fireEvent.pointerMove(stage, { clientX: 200, pointerId: 1 });
+      fireEvent.pointerUp(stage, { clientX: 200, pointerId: 1 });
+      expect(onActiveIndexChange).toHaveBeenLastCalledWith(1);
+    });
+
+    it("keeps the arrows for desktop only", () => {
+      renderCoverflow();
+      expect(screen.getByRole("button", { name: "Next" }).className).toContain("lg:flex");
+      expect(screen.getByRole("button", { name: "Next" }).className).toContain("hidden");
+    });
+  });
+
   describe("caption and position", () => {
     it("renders the position on its own, with no separator dot, when there is no caption", () => {
       renderCoverflow({ positionLabel: "1 of 7" });

package/src/components/coverflow.tsx

@@ -1,16 +1,25 @@
 "use client";
 
-import { useEffect, useId, useRef, useState } from "react";
+import { useId, useState } from "react";
 import { ChevronLeft, ChevronRight, Gift } from "lucide-react";
 import { cn } from "../lib/utils";
+import { useDragSwipe } from "../hooks/use-drag-swipe";
 import { EventPosterFallback } from "./event-poster-fallback";
 
 /**
  * Coverflow — the busiest-events browser: a 3D perspective lane with a large
  * lead poster flanked by up to three shrinking, desaturating posters on each
- * side. The lane itself drifts a few pixels back and forth
- * (`prefers-reduced-motion` stops this outright; an `IntersectionObserver`
- * pauses it off-screen).
+ * side.
+ *
+ * NOTHING MOVES ON ITS OWN. The lane used to drift ±40px on a loop; it was
+ * removed at product request — a stage that sways is read as a carousel that
+ * is about to advance, and the reader waits for it instead of touching it.
+ * The stage is driven by the reader: a horizontal drag (touch, pen or mouse)
+ * steps the ring one card in the drag's direction and the lane follows the
+ * finger a little on the way, so the gesture has weight. The prev/next arrows
+ * stay for desktop and keyboard; below `lg` they are hidden so nothing sits
+ * over the lead card — the swipe is the control there, and every card is
+ * still a focusable, named button for keyboard and screen-reader users.
  *
  * IT IS A RING, NOT A LANE. A card's slot comes from `ringOffset` — the
  * SIGNED SHORTEST WAY ROUND the list, not the raw `index - activeIndex`. With
@@ -178,15 +187,12 @@ const COVERFLOW_LEAD_SHADOW_CLASS = "shadow-[0_24px_56px_oklch(0.28_0.03_45/0.32
 const COVERFLOW_PILL_CLASS =
   "inline-flex h-6 max-w-[85%] items-center gap-1 rounded-full px-2 text-[11px] font-semibold";
 
-const COVERFLOW_DRIFT_DURATION_SECONDS = 26;
-const COVERFLOW_DRIFT_PIXELS = 40;
-
 /** Below the lead's z-index the arrows (z-20) and edge fades (z-10) always
  *  win, no matter how many cards are mid-transition and briefly promoted. */
 const COVERFLOW_LEAD_Z_INDEX = 6;
 
 const COVERFLOW_ARROW_CLASS =
-  "absolute top-1/2 z-20 flex h-11 w-11 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-background/85 text-foreground shadow-[var(--shadow-overlay)] backdrop-blur-sm transition-colors duration-150 hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:transition-none";
+  "absolute top-1/2 z-20 hidden h-11 w-11 -translate-y-1/2 lg:flex cursor-pointer items-center justify-center rounded-full bg-background/85 text-foreground shadow-[var(--shadow-overlay)] backdrop-blur-sm transition-colors duration-150 hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:transition-none";
 
 function wrapIndex(index: number, length: number): number {
   return ((index % length) + length) % length;
@@ -347,7 +353,6 @@ export function Coverflow({
 }: CoverflowProps) {
   const scopeId = useId().replace(/[^a-zA-Z0-9]/g, "");
   const scopeClass = `coverflow-${scopeId}`;
-  const containerRef = useRef<HTMLDivElement>(null);
 
   const length = items.length;
   const active = length > 0 ? wrapIndex(activeIndex, length) : 0;
@@ -372,26 +377,21 @@ export function Coverflow({
     );
   }
 
-  useEffect(() => {
-    const node = containerRef.current;
-    if (!node || typeof IntersectionObserver === "undefined") return undefined;
+  // No clamp at the ends: prev from 0 reports `length - 1` and next from
+  // `length - 1` reports 0, so the index the parent stores matches the ring.
+  const goTo = (index: number) => onActiveIndexChange?.(wrapIndex(index, length));
 
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        node.dataset.offscreen = entry.isIntersecting ? "false" : "true";
-      },
-      { threshold: 0 }
-    );
-    observer.observe(node);
-    return () => observer.disconnect();
-  }, []);
+  // A drag to the left means "next" — the ring turns the way the finger went.
+  // The lane follows at a third of the drag distance while the finger is down,
+  // then snaps back as the step lands.
+  const { dragX, isDragging, handlers } = useDragSwipe({
+    onSwipe: (direction) => goTo(active + direction),
+    disabled: length < 2,
+  });
 
   if (length === 0) return null;
 
   const activeItem = items[active];
-  // No clamp at the ends: prev from 0 reports `length - 1` and next from
-  // `length - 1` reports 0, so the index the parent stores matches the ring.
-  const goTo = (index: number) => onActiveIndexChange?.(wrapIndex(index, length));
 
   /** How far the lead itself moved, the short way round — 0 on a settled render. */
   const activeDelta = ringOffset(step.to - step.from, length);
@@ -446,26 +446,10 @@ export function Coverflow({
             --cf-tier-base: 0.5714;
           }
         }
-        .${scopeClass} .coverflow-lane {
-          animation: ${scopeClass}-drift ${COVERFLOW_DRIFT_DURATION_SECONDS}s ease-in-out infinite alternate;
-        }
-        .${scopeClass}[data-offscreen="true"] .coverflow-lane {
-          animation-play-state: paused;
-        }
-        @keyframes ${scopeClass}-drift {
-          from { transform: translateX(-${COVERFLOW_DRIFT_PIXELS}px); }
-          to { transform: translateX(${COVERFLOW_DRIFT_PIXELS}px); }
-        }
-        @media (prefers-reduced-motion: reduce) {
-          .${scopeClass} .coverflow-lane {
-            animation: none;
-            transform: none;
-          }
-        }
       `}</style>
 
       <div
-        ref={containerRef}
+        {...handlers}
         // CLIPS HORIZONTALLY ONLY. The clip is what hides a card teleporting
         // round the back of the ring, and that only ever happens off the left
         // and right edges — but `overflow-hidden` clips both axes, so it was
@@ -477,7 +461,11 @@ export function Coverflow({
         // container), so `overflow-x-hidden overflow-y-visible` is not a thing
         // the cascade will give you. `clip` carries no such rule, so the pair
         // below means what it says.
-        className="relative flex h-[300px] items-center justify-center overflow-x-clip overflow-y-visible [perspective:900px] sm:h-[380px] sm:[perspective:1400px]"
+        //
+        // `touch-action: pan-y` hands vertical gestures to the browser and
+        // horizontal ones to the drag handlers; `select-none` stops a mouse
+        // drag from selecting the captions underneath.
+        className="relative flex h-[300px] select-none items-center justify-center overflow-x-clip overflow-y-visible [touch-action:pan-y] [perspective:900px] sm:h-[380px] sm:[perspective:1400px]"
       >
         <div
           aria-hidden="true"
@@ -511,7 +499,13 @@ export function Coverflow({
           </>
         )}
 
-        <div className="coverflow-lane relative h-full w-full [transform-style:preserve-3d] motion-reduce:[animation:none]">
+        <div
+          className={cn(
+            "coverflow-lane relative h-full w-full [transform-style:preserve-3d]",
+            !isDragging && "transition-transform duration-300 ease-out motion-reduce:transition-none"
+          )}
+          style={{ transform: `translateX(${dragX / 3}px)` }}
+        >
           {visibleCards.map(({ item, index, offset, suppressTransition }) => (
             <CoverflowCard
               key={item.id}