@bearmenu/ui 0.8.8 → 0.8.10

package/src/components/kitchen-dossier.stories.tsx

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ArrowRight } from "lucide-react";
+import { KitchenDossier } from "./kitchen-dossier";
+import { mockVenues } from "./menu-mocks";
+
+function photo(hue: number) {
+  return (
+    "data:image/svg+xml;utf8," +
+    encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="960" height="640"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="hsl(${hue} 30% 62%)"/><stop offset="1" stop-color="hsl(${hue} 20% 28%)"/></linearGradient></defs><rect width="960" height="640" fill="url(#g)"/><circle cx="240" cy="180" r="120" fill="hsl(${hue} 40% 80%)" opacity=".6"/><rect x="520" y="360" width="360" height="220" fill="hsl(${hue} 15% 20%)" opacity=".7"/></svg>`
+    )
+  );
+}
+
+const venue = mockVenues[0];
+
+const labels = {
+  knownFor: "Known for",
+  whatPeopleSay: "What people say",
+  theGrade: "The grade",
+  currency: "lei",
+  mentions: (count: number) => `${count} name it`,
+  reviewCount: "427 reviews",
+  openUntil: "Open until 22:00",
+  part: (index: number, count: number) => `Part ${index + 1} of ${count}`,
+  next: "Next",
+  dimensions: {
+    food: "Food",
+    service: "Service",
+    value: "Value",
+    ambiance: "Ambiance",
+    portion: "Portion",
+  },
+};
+
+const action = (
+  <a
+    href={venue.href}
+    className="inline-flex h-11 items-center justify-center gap-2 rounded-full bg-white px-5 text-[13.5px] font-bold text-[oklch(0.21_0.012_55)]"
+  >
+    Open the menu
+    <ArrowRight className="h-4 w-4" aria-hidden />
+  </a>
+);
+
+const meta: Meta<typeof KitchenDossier> = {
+  title: "Menu/KitchenDossier",
+  component: KitchenDossier,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    place: { ...venue.place, thumbnail_url: photo(30) },
+    href: venue.href,
+    meta: "Restaurant · Centru",
+    signature: venue.signature,
+    quotes: [
+      { text: "Complimentary still or sparkling water with every meal, plus free coffee with brunch dishes." },
+      { text: "Incredibly attentive and friendly service that creates a truly relaxing experience." },
+    ],
+    grade: {
+      overall: "9.4",
+      dimensions: { food: 91, service: 90, value: 91, ambiance: 87, portion: 85 },
+    },
+    labels,
+    formatPrice: (amount: number) => String(amount),
+    formatScore: (value: number) => (value / 10).toFixed(1),
+    action,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "One kitchen, told as a story on its own photograph. The room is clear at the top; a frosted caption rises from the foot (`GlassGround`) with the identity, and under it a panel says the three things the reviews established one at a time — the dish it is known for, what people say, the grade — with segments at the top edge. The story runs while the card is in view and pauses while pressed; a tap advances; reduced motion stops the timer and keeps the tap.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof KitchenDossier>;
+
+export const Phone: Story = {};
+
+export const Desktop: Story = {
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** One part only: no segments, no tap-to-advance, the panel just is. */
+export const OnePart: Story = {
+  args: { quotes: undefined, grade: undefined },
+};
+
+/** No photograph: the ground with the initial. */
+export const NoPhoto: Story = {
+  args: { place: venue.place },
+};

package/src/components/kitchen-dossier.tsx

@@ -0,0 +1,322 @@
+import type { ReactNode } from "react";
+import { MessageSquareQuote, Star } from "lucide-react";
+import { cn } from "../lib/utils";
+import { GlassGround } from "./glass-ground";
+import type { MenuLinkComponent, MenuLinkProps, MenuVenueSignature } from "./menu-types";
+import { PHOTO_GROUND, PhotoGround } from "./photo-ground";
+import type { CitedText, PlaceGradeDimensions, PlacePreview } from "./place-types";
+import { Separator } from "./separator";
+import { StoryPanel, StoryProvider, StorySegments } from "./story";
+import {
+  DIMENSION_ORDER,
+  VenueGradeDimensions,
+  type VenueGradeDimensionKey,
+} from "./venue-grade-dimensions";
+import { VenueQuotes } from "./venue-quotes";
+
+/**
+ * KitchenDossier — one kitchen, told as a story on its own photograph.
+ *
+ * The hub used to say this three times: a spotlight with everything the
+ * digest knows, a ranked row with a grade, a card with the signature dish —
+ * and the same kitchen led all three. This is the one card: the venue's
+ * photograph clear at the top, a frosted caption rising from the foot with
+ * the identity (rating, name, type · area · reviews), and under it a PANEL
+ * that says the three or four things the reviews established one at a time —
+ * the dish it is known for, what people say, the grade — with segments at the
+ * top edge showing which is up. The story runs on its own while the card is
+ * in view; a tap advances.
+ *
+ * ## A photograph with a caption, not a dark card
+ *
+ * `ConceptCompare` is a dark card with a photograph showing through two glass
+ * bands. This is the reverse — the room is the subject and the facts are its
+ * caption — which is `GlassGround` at its lightest and smallest: anchored to
+ * the CAPTION, not the card, so it covers the identity, the panel and the
+ * action plus a short lead above them and nothing else; a `sm` blur that
+ * only takes the edge off the detail; ink that never passes 0.45; a text
+ * shadow under the identity doing the rest. Everything above the caption is
+ * the photograph, untouched. The panel is its own glass, so its rule reads
+ * as a panel and not a hole. The same layout at every width; the desktop
+ * card is wider, not turned on its side.
+ *
+ * ## Two targets, and everything else is "next"
+ *
+ * The name and the action open the venue; the dish name in the first part
+ * opens the item. A tap anywhere else on the card advances the story.
+ */
+
+/** @deprecated Alias of `MenuLinkProps`; kept for symmetry with the other menu surfaces. */
+export type KitchenDossierLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: KitchenDossierLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type KitchenDossierLabels = {
+  /** Kickers over the three parts. */
+  knownFor: string;
+  whatPeopleSay: string;
+  theGrade: string;
+  /** Currency beside the price, e.g. "lei". */
+  currency: string;
+  /** Beside the mention count, e.g. "4 name it". */
+  mentions: (count: number) => string;
+  /** "427 reviews", composed by the caller. */
+  reviewCount?: string;
+  /** "Open until 22:00", composed by the caller. Omit when closed or unknown. */
+  openUntil?: string;
+  /** Accessible name per segment, e.g. "Part 2 of 3". */
+  part: (index: number, count: number) => string;
+  /** Accessible name of the tap-to-advance. */
+  next: string;
+  /** Dimension key → translated label. */
+  dimensions: Partial<Record<VenueGradeDimensionKey, string>>;
+};
+
+export type KitchenDossierProps = {
+  place: PlacePreview;
+  /** The venue's destination. */
+  href: string;
+  /** "Restaurant · Centru", composed by the caller. */
+  meta?: string;
+  /** Part one. */
+  signature?: MenuVenueSignature;
+  /** Part two — the digest's highlights; two are shown. */
+  quotes?: CitedText[];
+  /** Part three — the grade, with the overall already formatted. */
+  grade?: { overall?: string; dimensions?: PlaceGradeDimensions };
+  labels: KitchenDossierLabels;
+  formatPrice: (amount: number) => string;
+  /** 0–100 → display numeral. */
+  formatScore: (value: number) => string;
+  /** How long each part shows. */
+  partDurationMs?: number;
+  /** The foot's action — pass a rendered link or button. */
+  action?: ReactNode;
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+/**
+ * How far above the caption the glass begins — the ramp from clear photograph
+ * to frost, ending exactly where the identity starts. Long, so the edge is a
+ * gradient and not a line. The glass wrapper's `-top-32` is this same 128px;
+ * the two must agree, or the identity sits on half-frost.
+ */
+const GLASS_LEAD = "128px";
+
+/** How many dimensions the grade part shows: the three strongest. */
+const DIMENSION_LIMIT = 3;
+
+/** How many quotes the second part shows. */
+const QUOTE_LIMIT = 2;
+
+const initialOf = (name: string) => (name.match(/\p{L}/u)?.[0] ?? "").toLocaleUpperCase();
+
+export function KitchenDossier({
+  place,
+  href,
+  meta,
+  signature,
+  quotes,
+  grade,
+  labels,
+  formatPrice,
+  formatScore,
+  partDurationMs,
+  action,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: KitchenDossierProps) {
+  const rating = place.rating?.rating;
+  const parts: ReactNode[] = [];
+
+  if (signature) {
+    const item = signature.item;
+    const firstEntry = item.sizes_and_prices?.[0];
+    const mentions = item.mentions ?? item.review_count ?? 0;
+    parts.push(
+      <Part key="signature" kicker={labels.knownFor}>
+        {signature.href ? (
+          <LinkComponent
+            href={signature.href}
+            className="w-max max-w-full text-[16px] font-bold leading-tight tracking-[-0.01em] text-white hover:underline focus-visible:outline-none focus-visible:underline"
+          >
+            {item.name}
+          </LinkComponent>
+        ) : (
+          <span className="text-[16px] font-bold leading-tight tracking-[-0.01em] text-white">{item.name}</span>
+        )}
+        {signature.why && (
+          <p className="mt-1 line-clamp-2 font-serif text-[13px] italic leading-snug text-white/75">
+            {signature.why}
+          </p>
+        )}
+        {(firstEntry || mentions > 0) && (
+          <>
+            <Separator className="my-2.5 via-white/20" />
+            <div className="flex items-end justify-between gap-3">
+              <span className="flex items-baseline gap-1.5">
+                {firstEntry && (
+                  <>
+                    <span className="text-[18px] font-extrabold leading-none tabular-nums text-white">
+                      {formatPrice(firstEntry.price)}
+                      <span className="ml-1 text-[12px] font-bold">{labels.currency}</span>
+                    </span>
+                    {firstEntry.size > 0 && (
+                      <span className="text-[11.5px] tabular-nums text-white/60">
+                        {firstEntry.size}
+                        {item.kind === "dish" ? "g" : "ml"}
+                      </span>
+                    )}
+                  </>
+                )}
+              </span>
+              {mentions > 0 && (
+                <span className="inline-flex items-center gap-1 text-[12px] font-semibold tabular-nums text-white/85">
+                  <MessageSquareQuote className="h-3.5 w-3.5" aria-hidden />
+                  {labels.mentions(mentions)}
+                </span>
+              )}
+            </div>
+          </>
+        )}
+      </Part>
+    );
+  }
+
+  if (quotes && quotes.length > 0) {
+    parts.push(
+      <Part key="quotes" kicker={labels.whatPeopleSay}>
+        <VenueQuotes quotes={quotes} limit={QUOTE_LIMIT} className="lg:grid-cols-1" />
+      </Part>
+    );
+  }
+
+  /* The three strongest, ties broken by the canonical order so that food
+     beats cleanliness at an equal score — the reader asked about a kitchen. */
+  const dimensions = grade?.dimensions;
+  const strongest = dimensions
+    ? DIMENSION_ORDER.filter((key) => typeof dimensions[key] === "number")
+        .sort((a, b) => (dimensions[b] ?? 0) - (dimensions[a] ?? 0))
+        .slice(0, DIMENSION_LIMIT)
+    : [];
+  if (grade && (grade.overall || strongest.length > 0)) {
+    parts.push(
+      <Part key="grade" kicker={labels.theGrade}>
+        <div className="flex items-end gap-4">
+          {grade.overall && (
+            <span className="text-[34px] font-extrabold leading-none tracking-[-0.03em] tabular-nums text-[oklch(0.82_0.15_85)]">
+              {grade.overall}
+            </span>
+          )}
+          {dimensions && strongest.length > 0 && (
+            <VenueGradeDimensions
+              className="min-w-0 flex-1"
+              dimensions={dimensions}
+              labels={labels.dimensions}
+              order={strongest}
+              formatScore={formatScore}
+            />
+          )}
+        </div>
+      </Part>
+    );
+  }
+
+  return (
+    <article
+      className={cn(
+        /* `flex flex-col` so the story fills the card's height: in a rail
+           the cards are stretched to the tallest, and a story that stopped
+           at its own min-height left a band of bare photograph under the
+           action on every shorter card. */
+        "dark relative isolate flex flex-col overflow-hidden rounded-[18px] border border-border text-foreground shadow-[var(--shadow-card)]",
+        PHOTO_GROUND,
+        className
+      )}
+    >
+      <PhotoGround className="-z-20" photos={[place.thumbnail_url]} initials={initialOf(place.name)} loading="eager" />
+
+      <StoryProvider
+        count={parts.length}
+        durationMs={partDurationMs}
+        nextLabel={labels.next}
+        className="relative flex min-h-[560px] flex-1 flex-col p-4 lg:min-h-[440px] lg:p-5"
+      >
+        <StorySegments
+          labels={parts.map((_, index) => labels.part(index, parts.length))}
+          className="-mt-1"
+        />
+
+        {/* The clear photograph, with the one fact that belongs on it. */}
+        <div className="relative min-h-[184px] flex-1">
+          {labels.openUntil && (
+            <span className="absolute left-0 top-3 inline-flex h-[30px] items-center gap-[7px] rounded-full bg-[oklch(0.16_0.012_55_/_0.72)] px-3 text-[11.5px] font-bold text-white backdrop-blur-[2px]">
+              <i className="h-[7px] w-[7px] rounded-full bg-success" aria-hidden />
+              {labels.openUntil}
+            </span>
+          )}
+        </div>
+
+        {/* The caption: identity, the story's panel, the action — and the
+            glass, anchored to the caption rather than to the card, so it
+            covers the caption and the `GLASS_LEAD` above it and nothing more.
+            Bled to the card's edges past the story's padding. */}
+        <div className="relative flex flex-col gap-3.5">
+          <div
+            aria-hidden
+            className="pointer-events-none absolute -inset-x-4 -bottom-4 -top-32 -z-10 lg:-inset-x-5 lg:-bottom-5"
+          >
+            <GlassGround
+              stops={{ direction: "to bottom", clear: "0px", full: GLASS_LEAD }}
+              peak={0.4}
+              blur="sm"
+            />
+          </div>
+          <div className="[text-shadow:0_1px_12px_oklch(0_0_0/0.55)]">
+            <div className="flex items-baseline justify-between gap-4">
+              <h3 className="min-w-0 font-serif text-[26px] font-semibold leading-tight tracking-[-0.02em] text-white lg:text-[32px]">
+                <LinkComponent href={href} className="focus-visible:outline-none focus-visible:underline">
+                  {place.name}
+                </LinkComponent>
+              </h3>
+              {rating !== undefined && (
+                <span className="inline-flex shrink-0 items-center gap-1 text-[18px] font-extrabold leading-none tabular-nums text-white lg:text-[22px]">
+                  {rating.toFixed(1)}
+                  <Star className="h-3.5 w-3.5 lg:h-4 lg:w-4" aria-hidden />
+                </span>
+              )}
+            </div>
+            {(meta || labels.reviewCount) && (
+              <p className="mt-1 truncate text-[12.5px] text-white/70">
+                {[meta, labels.reviewCount].filter(Boolean).join(" · ")}
+              </p>
+            )}
+          </div>
+
+          {parts.length > 0 && (
+            <StoryPanel
+              parts={parts}
+              className="rounded-[14px] border border-white/10 bg-[oklch(0.16_0.012_55_/_0.35)] p-4 backdrop-blur-md"
+            />
+          )}
+
+          {action && <div className="flex [&>*]:w-full lg:[&>*]:w-auto">{action}</div>}
+        </div>
+      </StoryProvider>
+    </article>
+  );
+}
+
+function Part({ kicker, children }: { kicker: string; children: ReactNode }) {
+  return (
+    <div className="flex flex-col">
+      <span className="mb-1.5 block text-[9.5px] font-bold uppercase tracking-[0.12em] text-white/60">
+        {kicker}
+      </span>
+      {children}
+    </div>
+  );
+}

package/src/components/menu-dead-end.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MenuDeadEnd, MenuLoosenList } from "./menu-dead-end";
+import { mockLoosenOptions } from "./menu-mocks";
+
+const meta: Meta<typeof MenuDeadEnd> = {
+  title: "Menu/MenuDeadEnd",
+  component: MenuDeadEnd,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[900px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A filter combination that returns nothing is the intent page's worst state, and an empty-state illustration is the worst answer to it: the reader already knows the list is empty — what they do not know is which of their four filters did it. So this names what dropped out, why, and what one specific widening would restore, with the count. It is also drawn on a non-empty list whenever a filter has cost the reader something notable.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuDeadEnd>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <b>Salt &amp; Stone</b> and six others dropped out — their cheapest vegetarian pasta is 58
+        lei. Raising the ceiling to 60 brings back <b>five kitchens</b>, including the highest-rated
+        Italian room in the city.
+      </>
+    ),
+    actionLabel: "Raise to 60 lei · 16 kitchens",
+    onAction: () => {},
+  },
+};
+
+/** No single best widening — the panel explains, the list below prices each one. */
+export const WithoutAction: Story = {
+  args: {
+    children: (
+      <>
+        Nothing matches all four filters. <b>Open now</b> is the most expensive of them.
+      </>
+    ),
+  },
+};
+
+export const LoosenList: StoryObj<typeof MenuLoosenList> = {
+  render: () => <MenuLoosenList options={mockLoosenOptions} />,
+};
+
+export const Mobile: Story = {
+  args: Default.args,
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/menu-dead-end.tsx

@@ -0,0 +1,127 @@
+import { Info } from "lucide-react";
+import { cn } from "../lib/utils";
+import type { MenuLinkComponent, MenuLinkProps, MenuLoosenOption } from "./menu-types";
+
+function DefaultLink({ href, ...props }: MenuLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+/**
+ * MenuDeadEnd — what dropped out, and the one press that brings it back.
+ *
+ * A filter combination that returns nothing is the intent page's worst state,
+ * and an empty-state illustration is the worst answer to it: the reader knows
+ * the list is empty, what they do not know is WHICH of their four filters did
+ * it. So this says what dropped out, why, and what widening one specific filter
+ * would restore — with the count, because "+5 kitchens, including the
+ * highest-rated Italian room in the city" is an answer and "try removing a
+ * filter" is a shrug.
+ *
+ * It is also drawn on a NON-empty list, whenever a filter has cost the reader
+ * something notable. The board's case is 34 kitchens still standing and Casa
+ * Boema — the one they came for — missing.
+ *
+ * Interactive: the consumer marks its own module `"use client"`.
+ */
+
+export type MenuDeadEndProps = {
+  /**
+   * The explanation, composed by the caller.
+   *
+   * A node rather than a string because it emphasises real names ("**Casa
+   * Boema** and six others dropped out"), and assembling that from fragments
+   * here would produce translated word-salad in one of the two locales.
+   */
+  children: React.ReactNode;
+  /** The widening this offers, e.g. "Raise to 60 lei · 16 kitchens". */
+  actionLabel?: string;
+  /** Where the widening leads. Preferred over `onAction` — see `MenuLoosenOption.href`. */
+  actionHref?: string;
+  onAction?: () => void;
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+export function MenuDeadEnd({
+  children,
+  actionLabel,
+  actionHref,
+  onAction,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: MenuDeadEndProps) {
+  const actionClass =
+    "inline-flex h-7 shrink-0 items-center rounded-full bg-foreground px-3 text-[12.5px] font-bold text-background transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:transition-none lg:ml-auto";
+
+  return (
+    <div
+      className={cn(
+        "mt-4 flex flex-wrap items-center gap-3 rounded-[14px] bg-muted p-3.5 lg:flex-nowrap lg:gap-4 lg:px-[18px] lg:py-4",
+        className
+      )}
+    >
+      <Info className="h-[18px] w-[18px] shrink-0 text-muted-foreground" aria-hidden />
+      <p className="max-w-[560px] text-[13px] leading-[1.55] text-muted-foreground [&_b]:font-bold [&_b]:text-foreground">
+        {children}
+      </p>
+      {actionLabel &&
+        (actionHref ? (
+          <LinkComponent href={actionHref} className={actionClass}>
+            {actionLabel}
+          </LinkComponent>
+        ) : (
+          onAction && (
+            <button type="button" onClick={onAction} className={actionClass}>
+              {actionLabel}
+            </button>
+          )
+        ))}
+    </div>
+  );
+}
+
+/**
+ * MenuLoosenList — one row per active filter, each priced in kitchens.
+ *
+ * The companion to the panel above: the panel names the single best widening,
+ * this lists every one of them so the reader can choose which constraint they
+ * care least about. Every row states what it would return, because a filter the
+ * reader cannot price is a filter they will not drop.
+ */
+export type MenuLoosenListProps = {
+  options: MenuLoosenOption[];
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+export function MenuLoosenList({
+  options,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: MenuLoosenListProps) {
+  const rowClass =
+    "inline-flex h-9 items-center justify-between gap-3 rounded-full border border-border bg-card px-4 text-sm font-semibold transition-colors hover:border-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none";
+
+  return (
+    <div className={cn("flex flex-col gap-2.5", className)}>
+      {options.map((option) => {
+        const body = (
+          <>
+            <span className="min-w-0 truncate">{option.label}</span>
+            <span className="shrink-0 font-bold tabular-nums text-accent">{option.gainLabel}</span>
+          </>
+        );
+
+        return option.href ? (
+          <LinkComponent key={option.key} href={option.href} className={rowClass}>
+            {body}
+          </LinkComponent>
+        ) : (
+          <button key={option.key} type="button" onClick={option.onSelect} className={rowClass}>
+            {body}
+          </button>
+        );
+      })}
+    </div>
+  );
+}