@bearmenu/ui 0.8.7 → 0.8.9

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>
+    ),
+  ],
+};

package/src/components/venue-spotlight.tsx

@@ -0,0 +1,236 @@
+import { Camera, Star } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Separator } from "./separator";
+import { VenueGradeDimensions, type VenueGradeDimensionKey } from "./venue-grade-dimensions";
+import { VenueQuotes } from "./venue-quotes";
+import { VenueSignatureBlock } from "./venue-signature-block";
+import type { MenuItemLabels } from "./menu-item";
+import type { MenuVenueSignature, MenuLinkProps, MenuLinkComponent } from "./menu-types";
+import type { CitedText, PlacePreview } from "./place-types";
+
+/**
+ * VenueSpotlight — 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 of this surface. It 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. Absent a photo it degrades to
+ * the same diagonal texture the hero uses, never to a bare icon.
+ *
+ * ## Composed from exported parts
+ *
+ * `VenueSignatureBlock`, `VenueQuotes`, `VenueGradeDimensions` and
+ * `VenueBusynessStrip` are each exported on their own. This composite is the
+ * arrangement the hub wants; a consumer filming a single panel, or building a
+ * narrower variant, takes the parts instead. Everything here is layout — no
+ * part is reachable only through the composite.
+ *
+ * No directive: it renders on the server unless `onCite` is passed through to
+ * the quotes.
+ */
+
+/** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
+export type VenueSpotlightLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: VenueSpotlightLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type VenueSpotlightLabels = {
+  /** Overlay on the photograph, e.g. "venue photograph". */
+  photoCredit?: string;
+  /** Composed open state, e.g. "Kitchen open until 23:00". Absent when closed or unknown. */
+  openUntil?: string;
+  /** Kicker over the signature, e.g. "WHAT IT IS KNOWN FOR". */
+  signatureKicker: string;
+  /** Composed review count, e.g. "318 reviews". */
+  reviewCount?: string;
+  /** Dimension key → translated label. */
+  dimensions: Partial<Record<VenueGradeDimensionKey, string>>;
+  /** Tag code → translated label. Missing codes render the raw code. */
+  tags?: Record<string, string>;
+  /** Composed value verdict, e.g. "Good value". */
+  valueVerdict?: string;
+  /** Composed busyness sentence. */
+  busyness?: string;
+  /** Accessible name for a quote's cite action. */
+  cite?: (reviewCount: number) => string;
+};
+
+export type VenueSpotlightProps = {
+  place: PlacePreview;
+  href: string;
+  labels: VenueSpotlightLabels;
+  /** Composed meta line, e.g. "pub · Centru". Clause order is locale-dependent. */
+  meta?: string;
+  signature?: MenuVenueSignature;
+  /** CSS gradient for the signature swatch. */
+  signatureGradient?: string;
+  /** Passed through to the signature `<MenuItem>`. */
+  itemLabels: MenuItemLabels;
+  formatPrice: (amount: number) => string;
+  formatCount?: (value: number) => string;
+  /** 0–100 → display numeral for the dimension bars. */
+  formatScore: (value: number) => string;
+  /** Opens the reviews behind a quote. */
+  onCite?: (quote: CitedText) => void;
+  /** The action in the footer — pass a rendered link or button. */
+  action?: React.ReactNode;
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+/** Quotes are capped at two: a third pushes the grade row below the fold on a phone. */
+const QUOTE_LIMIT = 2;
+
+export function VenueSpotlight({
+  place,
+  href,
+  labels,
+  meta,
+  signature,
+  signatureGradient,
+  itemLabels,
+  formatPrice,
+  formatCount,
+  formatScore,
+  onCite,
+  action,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: VenueSpotlightProps) {
+  const digest = place.reviews_digest;
+  const tags = digest?.tags ?? [];
+
+  return (
+    <div
+      className={cn(
+        "grid overflow-hidden rounded-[18px] border border-border bg-card lg:grid-cols-[404px_1fr]",
+        className
+      )}
+    >
+      <div className="relative min-h-[220px] bg-[repeating-linear-gradient(135deg,oklch(0.76_0.02_55)_0_10px,oklch(0.83_0.013_58)_10px_20px)] lg:min-h-[340px]">
+        {place.thumbnail_url && (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={place.thumbnail_url}
+            alt={place.name}
+            className="absolute inset-0 h-full w-full object-cover"
+          />
+        )}
+
+        {labels.photoCredit && (
+          <span className="absolute left-3.5 top-3.5 inline-flex h-7 items-center gap-1.5 rounded-full bg-black/60 px-2.5 text-[11px] font-bold text-white">
+            <Camera className="h-2.5 w-2.5" aria-hidden />
+            {labels.photoCredit}
+          </span>
+        )}
+
+        {labels.openUntil && (
+          <span className="absolute bottom-3.5 left-3.5 inline-flex h-[30px] items-center gap-[7px] rounded-full bg-background px-3 text-[11.5px] font-bold text-[var(--free,currentColor)]">
+            <i className="h-[7px] w-[7px] rounded-full bg-current" aria-hidden />
+            {labels.openUntil}
+          </span>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-3.5 p-4 lg:p-6">
+        {/*
+          `items-baseline` and a hard `shrink-0` on the rating: the venue name
+          is a long serif line that wraps, and with `items-start` the numeral
+          floated beside its second line instead of sitting on the first. The
+          name column also needs `min-w-0` AND `basis-0` — without the basis a
+          long unbroken word (a venue called "Tortelli Pasta Bar") refuses to
+          wrap and pushes the rating off the card.
+        */}
+        <div className="flex items-baseline justify-between gap-3">
+          <h3 className="min-w-0 flex-1 basis-0 font-serif text-xl font-semibold leading-tight tracking-[-0.02em] lg:text-[28px]">
+            <LinkComponent
+              href={href}
+              className="rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {place.name}
+            </LinkComponent>
+          </h3>
+
+          {place.rating && (
+            <div className="flex shrink-0 items-baseline gap-1.5">
+              <b className="text-xl font-extrabold tabular-nums lg:text-2xl">
+                {place.rating.rating}
+              </b>
+              <Star className="h-3 w-3 self-center text-muted-foreground" aria-hidden />
+            </div>
+          )}
+        </div>
+
+        {(meta || labels.reviewCount) && (
+          <div className="-mt-2 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[12.5px] text-muted-foreground">
+            {meta && <span>{meta}</span>}
+            {meta && labels.reviewCount && <span aria-hidden>·</span>}
+            {labels.reviewCount && <span>{labels.reviewCount}</span>}
+          </div>
+        )}
+
+        {signature && (
+          <VenueSignatureBlock
+            item={signature.item}
+            labels={itemLabels}
+            formatPrice={formatPrice}
+            formatCount={formatCount}
+            kicker={labels.signatureKicker}
+            markGradient={signatureGradient}
+            subtitle={signature.why}
+            href={signature.href}
+            linkComponent={LinkComponent}
+          />
+        )}
+
+        {digest?.highlights && (
+          <VenueQuotes
+            quotes={digest.highlights}
+            limit={QUOTE_LIMIT}
+            onCite={onCite}
+            citeLabel={labels.cite}
+          />
+        )}
+
+        {digest?.grade?.dimensions && <Separator />}
+
+        {digest?.grade?.dimensions && (
+          <VenueGradeDimensions
+            dimensions={digest.grade.dimensions}
+            labels={labels.dimensions}
+            formatScore={formatScore}
+            className="mt-1"
+          />
+        )}
+
+        {(labels.valueVerdict || tags.length > 0) && (
+          <div className="flex flex-wrap items-center gap-2">
+            {labels.valueVerdict && (
+              <span className="inline-flex h-[26px] items-center gap-1.5 rounded-full bg-accent-subtle px-2.5 text-[11.5px] font-bold text-accent">
+                {labels.valueVerdict}
+              </span>
+            )}
+            {tags.map((tag) => (
+              <span
+                key={tag.value}
+                className="inline-flex h-[26px] items-center rounded-full border border-border px-2.5 text-[11.5px] text-muted-foreground"
+              >
+                {labels.tags?.[tag.value] ?? tag.value}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {/* No busyness strip here. Twelve unlabelled bars under a grade row
+            read as a second, unexplained chart — nobody could tell what they
+            measured without the sentence beside them, and the sentence does not
+            fit on this card. `<VenueBusynessStrip>` still exists and belongs on
+            the venue's own page, where it has room to be captioned. */}
+
+        {action && <div className="mt-auto flex justify-end pt-1">{action}</div>}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { UtensilsCrossed } from "lucide-react";
+import { Button } from "./button";
+import { mockPlaces } from "./menu-mocks";
+import { VenueWall } from "./venue-wall";
+
+const hrefs = Object.fromEntries(
+  mockPlaces.map((place) => [place.slug, `/places/${place.slug}`])
+);
+
+const meta: Meta<typeof VenueWall> = {
+  title: "Menu/VenueWall",
+  component: VenueWall,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The catalogue's scale, stated as a row of the venues in it. A closing beat rather than a browse surface: the avatars are named and linked, but the module's job is to make \"we read every menu in the city\" land as something specific. It shows a handful and counts the rest, because a wall long enough to be exhaustive stops reading as places.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof VenueWall>;
+
+export const Default: Story = {
+  args: {
+    places: mockPlaces,
+    hrefs,
+    kicker: "397 MENUS IN CLUJ-NAPOCA, READ IN FULL",
+    kickerIcon: <UtensilsCrossed className="h-3 w-3" />,
+    headline: "Every menu in the city, priced to the portion",
+    body: "45,140 dishes and drinks with what they cost, how big they are, and a mention count on every one of them.",
+    overflowLabel: "+393 more",
+    action: <Button size="sm" variant="secondary">Ask Bruno</Button>,
+  },
+};
+
+/** Avatars only — the wall inside a section that already has a header. */
+export const Bare: Story = {
+  args: { places: mockPlaces, hrefs, overflowLabel: "+393 more" },
+};
+
+/** Inert avatars, for a render with nowhere to navigate. */
+export const Static: Story = {
+  args: {
+    places: mockPlaces,
+    kicker: "397 MENUS READ IN FULL",
+    headline: "Every menu in the city, priced to the portion",
+    overflowLabel: "+393 more",
+  },
+};
+
+export const Mobile: Story = {
+  args: {
+    places: mockPlaces.slice(0, 3),
+    hrefs,
+    kicker: "397 MENUS READ IN FULL",
+    headline: "Every menu in the city, priced to the portion",
+    overflowLabel: "+394 more",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};