@bearmenu/ui 0.8.8 → 0.8.9

package/src/components/venue-busyness-strip.tsx

@@ -0,0 +1,64 @@
+import { cn } from "../lib/utils";
+
+/**
+ * VenueBusynessStrip — when a venue actually fills up, as a bar per hour.
+ *
+ * The API serves one score per hour of the venue's own trading day, so the
+ * strip has no fixed length: a bakery closing at three and a club open until
+ * four draw different numbers of bars, and padding either to 24 would put empty
+ * columns under hours the venue is not open.
+ *
+ * The rush is derived rather than passed: bars at or above `peakRatio` of the
+ * day's own maximum take the accent. A fixed score threshold would mark every
+ * hour at a busy venue and none at a quiet one — busyness is only meaningful
+ * relative to that venue's own day.
+ *
+ * `caption` is composed by the caller ("Usually not busy until 18:00 — the rush
+ * is nine to eleven"), because the sentence needs the venue's clock, its locale
+ * and a plural rule the DS does not own.
+ *
+ * Server-safe.
+ */
+
+export type VenueBusynessStripProps = {
+  busyness: Array<{ hour: number; score: number }>;
+  /** Composed sentence beside the bars. */
+  caption?: string;
+  /** Share of the day's own peak at which an hour counts as the rush. */
+  peakRatio?: number;
+  className?: string;
+};
+
+const BAR_MAX_HEIGHT = 22;
+
+export function VenueBusynessStrip({
+  busyness,
+  caption,
+  peakRatio = 0.8,
+  className,
+}: VenueBusynessStripProps) {
+  if (busyness.length === 0) return null;
+
+  const peak = Math.max(...busyness.map((entry) => entry.score));
+  if (peak <= 0) return null;
+
+  return (
+    <div
+      className={cn("flex items-center gap-2.5 text-[12.5px] text-muted-foreground", className)}
+    >
+      <span aria-hidden className="flex h-[22px] items-end gap-[3px]">
+        {busyness.map(({ hour, score }) => (
+          <i
+            key={hour}
+            className={cn(
+              "w-[7px] rounded-t-sm bg-[oklch(0.88_0.02_45)]",
+              score >= peak * peakRatio && "bg-[var(--accent,currentColor)]"
+            )}
+            style={{ height: Math.max(2, Math.round((score / peak) * BAR_MAX_HEIGHT)) }}
+          />
+        ))}
+      </span>
+      {caption}
+    </div>
+  );
+}

package/src/components/venue-grade-dimensions.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { mockFormatters, mockPlaces } from "./menu-mocks";
+import { VenueGradeDimensions } from "./venue-grade-dimensions";
+
+const labels = {
+  food: "Food",
+  coffee_quality: "Coffee",
+  drinks_quality: "Drinks",
+  service: "Service",
+  value: "Value",
+  ambiance: "Ambiance",
+  portion: "Portion",
+  consistency: "Consistency",
+  cleanliness: "Cleanliness",
+};
+
+const meta: Meta<typeof VenueGradeDimensions> = {
+  title: "Menu/VenueGradeDimensions",
+  component: VenueGradeDimensions,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[720px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Per-dimension review scores as a row of bars. A dimension the reviews never mention is ABSENT from the payload, not zero, and exactly one of food / coffee_quality / drinks_quality is scored per place — so a component drawing a fixed row of seven would invent readings for a third of the catalogue. It iterates the canonical order, skips what is missing, and lays out however many survive. Scores arrive 0–100 and display over ten.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof VenueGradeDimensions>;
+
+export const Default: Story = {
+  args: {
+    dimensions: mockPlaces[0].reviews_digest!.grade!.dimensions!,
+    labels,
+    formatScore: mockFormatters.score,
+  },
+};
+
+/**
+ * A coffee bar. It is graded on `coffee_quality` and has no food score at all —
+ * the row is four columns, not seven with a gap.
+ */
+export const CoffeeBar: Story = {
+  args: {
+    dimensions: mockPlaces[2].reviews_digest!.grade!.dimensions!,
+    labels,
+    formatScore: mockFormatters.score,
+  },
+};
+
+/** Thin evidence: only two dimensions were mentioned often enough to score. */
+export const Sparse: Story = {
+  args: {
+    dimensions: { food: 78, value: 64 },
+    labels,
+    formatScore: mockFormatters.score,
+  },
+};
+
+/** `order` narrows as well as reorders — here, quality and value only. */
+export const Narrowed: Story = {
+  args: {
+    dimensions: mockPlaces[0].reviews_digest!.grade!.dimensions!,
+    labels,
+    order: ["food", "value"],
+    formatScore: mockFormatters.score,
+  },
+};
+
+/** Nothing scored: the component renders nothing rather than an empty row. */
+export const Empty: Story = {
+  args: { dimensions: {}, labels, formatScore: mockFormatters.score },
+};

package/src/components/venue-grade-dimensions.tsx

@@ -0,0 +1,91 @@
+import { cn } from "../lib/utils";
+import type { PlaceGradeDimensions } from "./place-types";
+
+/**
+ * VenueGradeDimensions — the per-dimension review scores as a row of bars.
+ *
+ * ## Why this renders what it is given rather than a fixed row
+ *
+ * A dimension the reviews never mention is ABSENT from the payload, not zero,
+ * and exactly one of `food` / `coffee_quality` / `drinks_quality` is scored per
+ * place — a coffee bar has no food score and a restaurant has no coffee one.
+ * So a component drawing seven fixed columns would invent readings for a third
+ * of the catalogue. It iterates `order`, skips what is missing, and lays out
+ * however many survive.
+ *
+ * Scores arrive 0–100 and display on the 0–10 scale the rest of the product
+ * grades on, so the bar width is the raw value and the numeral is that value
+ * over ten. `formatScore` is injected because a decimal separator is
+ * locale-dependent.
+ *
+ * Server-safe.
+ */
+
+export type VenueGradeDimensionKey = keyof PlaceGradeDimensions;
+
+/** Canonical order. Quality leads, and the three quality keys are mutually exclusive. */
+const DEFAULT_ORDER: VenueGradeDimensionKey[] = [
+  "food",
+  "coffee_quality",
+  "drinks_quality",
+  "service",
+  "value",
+  "ambiance",
+  "portion",
+  "consistency",
+  "cleanliness",
+];
+
+export type VenueGradeDimensionsProps = {
+  dimensions: PlaceGradeDimensions;
+  /** Dimension key → translated label. Keys with no label fall back to the key. */
+  labels: Partial<Record<VenueGradeDimensionKey, string>>;
+  /** Override the canonical order, or narrow which dimensions show at all. */
+  order?: VenueGradeDimensionKey[];
+  /** 0–100 → display numeral, e.g. `(v) => (v / 10).toFixed(1)`. */
+  formatScore: (value: number) => string;
+  className?: string;
+};
+
+export function VenueGradeDimensions({
+  dimensions,
+  labels,
+  order = DEFAULT_ORDER,
+  formatScore,
+  className,
+}: VenueGradeDimensionsProps) {
+  const present = order
+    .map((key) => ({ key, value: dimensions[key] }))
+    .filter((entry): entry is { key: VenueGradeDimensionKey; value: number } =>
+      typeof entry.value === "number"
+    );
+
+  if (present.length === 0) return null;
+
+  return (
+    <dl
+      className={cn(
+        "grid grid-cols-3 gap-2.5 sm:grid-cols-4 lg:flex lg:gap-2.5",
+        className
+      )}
+    >
+      {present.map(({ key, value }) => (
+        <div key={key} className="flex flex-col gap-1.5 lg:flex-1">
+          <dd className="text-[15px] font-extrabold tracking-[-0.02em] tabular-nums">
+            {formatScore(value)}
+          </dd>
+          <div
+            aria-hidden
+            className="relative block h-[3px] overflow-hidden rounded-full bg-muted"
+          >
+            <span
+              className="absolute inset-y-0 left-0 rounded-full bg-[var(--gradient-primary,currentColor)]"
+              style={{ width: `${Math.min(100, Math.max(0, value))}%` }}
+            />
+          </div>
+          <dt className="text-[10.5px] text-muted-foreground">{labels[key] ?? key}</dt>
+        </div>
+      ))}
+    </dl>
+  );
+}

package/src/components/venue-quotes.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { mockPlaces } from "./menu-mocks";
+import { VenueQuotes } from "./venue-quotes";
+
+const highlights = mockPlaces[0].reviews_digest!.highlights!;
+
+const meta: Meta<typeof VenueQuotes> = {
+  title: "Menu/VenueQuotes",
+  component: VenueQuotes,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[720px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The digest's standout lines as pull-quotes — one to three short positives, already resolved into the request locale. They are the only place on a hub where a reviewer speaks in their own register, so they are set in serif italic against the sans everything else uses. `onCite` turns a quote into a button opening the reviews behind it: `review_ids` is what makes the claim checkable, and a quote nobody can trace is just copy.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof VenueQuotes>;
+
+/** Inert prose. Correct on a surface with nowhere to open. */
+export const Default: Story = { args: { quotes: highlights } };
+
+/** With `onCite` each quote becomes a button onto its own evidence. */
+export const Citable: Story = {
+  args: {
+    quotes: highlights,
+    onCite: () => {},
+    citeLabel: (count) => `Read ${count} reviews`,
+  },
+};
+
+/** A quote with no `review_ids` stays inert even when `onCite` is passed. */
+export const MixedEvidence: Story = {
+  args: {
+    quotes: [highlights[0], { text: "Worth the walk from the centre." }],
+    onCite: () => {},
+    citeLabel: (count) => `Read ${count} reviews`,
+  },
+};
+
+export const Single: Story = { args: { quotes: [highlights[0]] } };
+
+export const Limited: Story = {
+  args: {
+    quotes: [...highlights, { text: "A third line the surface has no room for." }],
+    limit: 2,
+  },
+};

package/src/components/venue-quotes.tsx

@@ -0,0 +1,64 @@
+import { cn } from "../lib/utils";
+import type { CitedText } from "./place-types";
+
+/**
+ * VenueQuotes — the digest's standout lines, as pull-quotes.
+ *
+ * These are `reviews_digest.highlights`: one to three short positives already
+ * resolved into the request locale. They are the only place on a hub where a
+ * reviewer speaks in their own register, so they are set in serif italic
+ * against the sans everything else uses.
+ *
+ * `onCite` turns a quote into a button that opens the reviews behind it —
+ * `review_ids` is what makes the claim checkable, and a quote nobody can trace
+ * is just copy. Without the handler the quote renders as inert prose, which is
+ * correct on surfaces that have nowhere to open.
+ *
+ * No directive: inert quotes render on the server; passing `onCite` needs a
+ * client caller.
+ */
+
+export type VenueQuotesProps = {
+  quotes: CitedText[];
+  /** Opens the reviews behind one quote. Omit to render inert prose. */
+  onCite?: (quote: CitedText) => void;
+  /** Accessible name for the cite action, e.g. `(n) => "Read 5 reviews"`. */
+  citeLabel?: (reviewCount: number) => string;
+  /** Cap on how many render. The digest ships at most three. */
+  limit?: number;
+  className?: string;
+};
+
+export function VenueQuotes({ quotes, onCite, citeLabel, limit, className }: VenueQuotesProps) {
+  const shown = typeof limit === "number" ? quotes.slice(0, limit) : quotes;
+  if (shown.length === 0) return null;
+
+  return (
+    <div className={cn("grid gap-3 lg:grid-cols-2", className)}>
+      {shown.map((quote, index) => {
+        const citations = quote.review_ids?.length ?? 0;
+        const canCite = !!onCite && citations > 0;
+
+        const text = (
+          <blockquote className="border-l-2 border-border pl-3 font-serif text-[13px] italic leading-[1.45] text-muted-foreground">
+            {`“${quote.text}”`}
+          </blockquote>
+        );
+
+        if (!canCite) return <div key={index}>{text}</div>;
+
+        return (
+          <button
+            key={index}
+            type="button"
+            onClick={() => onCite(quote)}
+            aria-label={citeLabel?.(citations)}
+            className="rounded-md text-left transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {text}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/venue-signature-block.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { mockGradients, mockVenues } from "./menu-mocks";
+import { VenueSignatureBlock } from "./venue-signature-block";
+
+const labels = {
+  currency: "lei",
+  mentions: (count: number) => `${count} mentions`,
+  signature: "SIGNATURE",
+  mentioned: "MENTIONED",
+};
+
+const meta: Meta<typeof VenueSignatureBlock> = {
+  title: "Menu/VenueSignatureBlock",
+  component: VenueSignatureBlock,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[520px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "\"What it is known for\": the one dish or drink a venue's reviews single out, on a tinted band. It is a `MenuItem` with a kicker — the same row the venue's own menu renders, so the item does not look like a different object here. The kicker sits above the row rather than inside it; inline at 9.5px it competed with the dish name for the same line.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof VenueSignatureBlock>;
+
+export const Default: Story = {
+  args: {
+    item: mockVenues[0].signature!.item,
+    labels,
+    formatPrice: (amount: number) => String(amount),
+    kicker: "WHAT IT IS KNOWN FOR",
+    markGradient: mockGradients.meat,
+    subtitle: mockVenues[0].signature!.why,
+    href: "/menu/dishes/chicken-wings",
+  },
+};
+
+/** A drink signature — same block, different scope. */
+export const Drink: Story = {
+  args: {
+    item: mockVenues[2].signature!.item,
+    labels,
+    formatPrice: (amount: number) => String(amount),
+    kicker: "WHAT THEY POUR",
+    markGradient: mockGradients.cocktail,
+  },
+};
+
+/** Inert: no `href`. Used inside a surface that is itself a link. */
+export const Static: Story = {
+  args: {
+    item: mockVenues[1].signature!.item,
+    labels,
+    formatPrice: (amount: number) => String(amount),
+    kicker: "WHAT IT IS KNOWN FOR",
+    markGradient: mockGradients.pasta,
+  },
+};

package/src/components/venue-signature-block.tsx

@@ -0,0 +1,71 @@
+import { cn } from "../lib/utils";
+import { MenuItem, type MenuItemLabels, type MenuItemLinkProps } from "./menu-item";
+import type { MenuItemPreview } from "./menu-types";
+
+/**
+ * VenueSignatureBlock — "what it is known for": the one dish or drink a venue's
+ * reviews single out, on a tinted band.
+ *
+ * ## It is a `<MenuItem>` with a kicker
+ *
+ * It used to be its own layout — swatch, label, name, price, all hand-placed —
+ * and it drifted from the row every other surface renders. It is now the
+ * production row on an accent ground, so a dish looks like itself here, in the
+ * "known for" list, and on the venue's own menu.
+ *
+ * The kicker sits ABOVE the row rather than inside it. Inline at 9.5px it
+ * competed with the dish name for the same line, which is how it ended up
+ * stacked one word per line.
+ */
+
+export type VenueSignatureBlockProps = {
+  item: MenuItemPreview;
+  labels: MenuItemLabels;
+  formatPrice: (amount: number) => string;
+  formatCount?: (value: number) => string;
+  /** Small caps kicker, e.g. "WHAT IT IS KNOWN FOR". */
+  kicker: string;
+  /** The row's category mark, as a CSS `background-image` value. */
+  markGradient?: string;
+  /** Reviewers' reason, in place of the item description. */
+  subtitle?: string;
+  href?: string;
+  linkComponent?: React.ComponentType<MenuItemLinkProps>;
+  className?: string;
+};
+
+export function VenueSignatureBlock({
+  item,
+  labels,
+  formatPrice,
+  formatCount,
+  kicker,
+  markGradient,
+  subtitle,
+  href,
+  linkComponent,
+  className,
+}: VenueSignatureBlockProps) {
+  return (
+    <div className={cn("overflow-hidden rounded-xl bg-accent-subtle py-1", className)}>
+      <span className="block px-4 pt-2 text-[9.5px] font-bold uppercase tracking-[0.09em] text-muted-foreground">
+        {kicker}
+      </span>
+
+      <MenuItem
+        item={item}
+        labels={labels}
+        formatPrice={formatPrice}
+        formatCount={formatCount}
+        markGradient={markGradient}
+        subtitle={subtitle}
+        showSignatureBadge={false}
+        href={href}
+        linkComponent={linkComponent}
+        // The band is already the emphasis; the row must not also take a hover
+        // fill inside it.
+        className="min-h-0 md:rounded-none md:hover:bg-transparent md:hover:shadow-none"
+      />
+    </div>
+  );
+}

package/src/components/venue-spotlight.stories.tsx

@@ -0,0 +1,141 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./button";
+import { mockFormatters, mockGradients, mockPlaces, mockVenues } from "./menu-mocks";
+import { VenueSpotlight } from "./venue-spotlight";
+
+
+const itemLabels = {
+  currency: "lei",
+  mentions: (count: number) => `${count} mentions`,
+  signature: "SIGNATURE",
+  mentioned: "MENTIONED",
+};
+const formatPrice = (amount: number) => String(amount);
+
+const labels = {
+  photoCredit: "venue photograph",
+  openUntil: "Kitchen open until 23:00",
+  signatureKicker: "WHAT IT IS KNOWN FOR",
+  reviewCount: "318 reviews",
+  dimensions: {
+    food: "Food",
+    coffee_quality: "Coffee",
+    drinks_quality: "Drinks",
+    service: "Service",
+    value: "Value",
+    ambiance: "Ambiance",
+    portion: "Portion",
+    consistency: "Consistency",
+  },
+  tags: { casual: "casual", cozy: "cozy", family_friendly: "family friendly" },
+  valueVerdict: "Good value",
+  busyness: "Usually not busy until 18:00 — the rush is seven to eight.",
+  cite: (count: number) => `Read ${count} reviews`,
+};
+
+const meta: Meta<typeof VenueSpotlight> = {
+  title: "Menu/VenueSpotlight",
+  component: VenueSpotlight,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "One venue given real space: photograph, what it is known for, what reviewers say, how it grades, and when it fills up. The photograph is the point — this is the one module on a menu hub that shows an image, and it can, because venue photography is real and licensed where item photography is generated. Composed from `VenueSignatureBlock`, `VenueQuotes`, `VenueGradeDimensions` and `VenueBusynessStrip`, each exported on its own for consumers building a narrower variant.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof VenueSpotlight>;
+
+export const Default: Story = {
+  args: {
+    place: mockPlaces[0],
+    href: mockVenues[0].href,
+    labels,
+    meta: "pub · Centru · 318 reviews read",
+    signature: mockVenues[0].signature,
+    signatureGradient: mockGradients.meat,
+    formatScore: mockFormatters.score,
+    itemLabels,
+    formatPrice,
+    action: <Button size="sm">Open the menu</Button>,
+  },
+};
+
+/** A coffee bar: no food dimension, and a `frequent` signature rather than a signature one. */
+export const CoffeeBar: Story = {
+  args: {
+    place: mockPlaces[2],
+    href: mockVenues[2].href,
+    labels: { ...labels, openUntil: "Open until 20:00", reviewCount: "96 reviews" },
+    meta: "coffee · Centru",
+    signature: mockVenues[2].signature,
+    signatureGradient: mockGradients.sweet,
+    formatScore: mockFormatters.score,
+    itemLabels,
+    formatPrice,
+  },
+};
+
+/**
+ * A venue the review census has not reached: no digest at all. Every block that
+ * depends on one drops out and the card still reads as a venue.
+ */
+export const WithoutDigest: Story = {
+  args: {
+    place: mockPlaces[3],
+    href: mockVenues[3].href,
+    labels: { ...labels, openUntil: undefined, reviewCount: "141 reviews" },
+    meta: "restaurant · Mărăști",
+    formatScore: mockFormatters.score,
+    itemLabels,
+    formatPrice,
+  },
+};
+
+/** Quotes wired to their evidence. Needs a client caller. */
+export const CitableQuotes: Story = {
+  args: {
+    place: mockPlaces[0],
+    href: mockVenues[0].href,
+    labels,
+    meta: "pub · Centru",
+    signature: mockVenues[0].signature,
+    signatureGradient: mockGradients.meat,
+    formatScore: mockFormatters.score,
+    itemLabels,
+    formatPrice,
+    onCite: () => {},
+  },
+};
+
+export const Mobile: Story = {
+  args: {
+    place: mockPlaces[0],
+    href: mockVenues[0].href,
+    labels,
+    meta: "pub · Centru",
+    signature: mockVenues[0].signature,
+    signatureGradient: mockGradients.meat,
+    formatScore: mockFormatters.score,
+    itemLabels,
+    formatPrice,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};