@bearmenu/ui 0.8.8 → 0.8.9

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

package/src/components/venue-wall.tsx

@@ -0,0 +1,185 @@
+import { cn } from "../lib/utils";
+import type { MenuLinkProps, MenuLinkComponent } from "./menu-types";
+import type { PlacePreview } from "./place-types";
+
+/**
+ * VenueWall — 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.
+ *
+ * Server-safe.
+ */
+
+/** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
+export type VenueWallLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: VenueWallLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type VenueWallProps = {
+  places: PlacePreview[];
+  /** Destination per place, keyed by slug. Without one an avatar is inert. */
+  hrefs?: Record<string, string>;
+  kicker?: string;
+  kickerIcon?: React.ReactNode;
+  headline?: string;
+  body?: string;
+  /** Composed overflow chip, e.g. "+393 more". */
+  overflowLabel?: string;
+  /**
+   * Tiles for the mosaic ground — the same licensed stills the hero uses.
+   * Without them the wall falls back to the flat diagonal texture, which is
+   * the degraded state rather than the design.
+   */
+  tileUrls?: string[];
+  /** The action — pass a rendered link or button. */
+  action?: React.ReactNode;
+  className?: string;
+  linkComponent?: MenuLinkComponent;
+};
+
+export function VenueWall({
+  places,
+  hrefs,
+  kicker,
+  kickerIcon,
+  headline,
+  body,
+  overflowLabel,
+  tileUrls,
+  action,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: VenueWallProps) {
+  return (
+    <div
+      className={cn(
+        "relative flex flex-col gap-4 overflow-hidden rounded-[20px] bg-[oklch(0.21_0.012_55)] p-5 text-white lg:p-8",
+        className
+      )}
+    >
+      {tileUrls?.length ? (
+        <>
+          <div aria-hidden className="absolute inset-0 grid auto-rows-fr grid-cols-4 gap-0.5 lg:grid-cols-6">
+            {Array.from({ length: 18 }, (_, cell) => (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                key={cell}
+                src={tileUrls[cell % tileUrls.length]}
+                alt=""
+                loading="lazy"
+                decoding="async"
+                className="h-full w-full object-cover"
+              />
+            ))}
+          </div>
+          {/* Heavier than the hero's: this block's copy sits over the full
+              width rather than in a left column. */}
+          <div
+            aria-hidden
+            className="absolute inset-0 bg-[oklch(0.16_0.012_55_/_0.9)]"
+          />
+        </>
+      ) : (
+        <div
+          aria-hidden
+          className="absolute inset-0 bg-[repeating-linear-gradient(135deg,oklch(0.6_0.02_55)_0_9px,oklch(0.68_0.016_58)_9px_18px)] opacity-[0.18]"
+        />
+      )}
+
+      <div className="relative z-[1] flex flex-col gap-3">
+        {kicker && (
+          <span className="inline-flex w-max items-center gap-1.5 rounded-full bg-white/15 px-3 py-1.5 text-[11px] font-extrabold tracking-[0.11em]">
+            {kickerIcon}
+            {kicker}
+          </span>
+        )}
+
+        {headline && (
+          <h3 className="max-w-[640px] font-serif text-[28px] font-semibold leading-[1.1] tracking-[-0.025em] lg:text-[40px]">
+            {headline}
+          </h3>
+        )}
+
+        {body && <p className="hidden max-w-[540px] text-sm leading-[1.55] opacity-85 lg:block">{body}</p>}
+      </div>
+
+      {/* Below `lg` the crowd is a stack: the first few faces overlapping, then
+          the count. Eight named chips wrapped over four lines were most of the
+          banner on a phone and said nothing the count does not. */}
+      <div aria-hidden className="relative z-[1] flex items-center gap-3 lg:hidden">
+        <div className="flex">
+          {places.slice(0, 5).map((place, index) => (
+            <span
+              key={place.slug}
+              className={cn(
+                "h-9 w-9 shrink-0 overflow-hidden rounded-full bg-white/20 ring-2 ring-[oklch(0.21_0.012_55)]",
+                index > 0 && "-ml-2.5"
+              )}
+            >
+              {place.thumbnail_url && (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img src={place.thumbnail_url} alt="" className="h-full w-full object-cover" loading="lazy" />
+              )}
+            </span>
+          ))}
+        </div>
+        {overflowLabel && <span className="text-[13px] font-medium opacity-85">{overflowLabel}</span>}
+      </div>
+
+      <ul className="relative z-[1] hidden flex-wrap items-center gap-2 lg:flex">
+        {places.map((place) => {
+          const avatar = (
+            <>
+              <span className="h-7 w-7 shrink-0 overflow-hidden rounded-full bg-white/20">
+                {place.thumbnail_url && (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={place.thumbnail_url}
+                    alt=""
+                    className="h-full w-full object-cover"
+                    loading="lazy"
+                  />
+                )}
+              </span>
+              <span className="truncate text-[12.5px] font-medium">{place.name}</span>
+            </>
+          );
+
+          const chipClasses =
+            "inline-flex max-w-[220px] items-center gap-2 rounded-full bg-white/10 py-1 pl-1 pr-3.5 backdrop-blur-[6px]";
+
+          return (
+            <li key={place.slug}>
+              {hrefs?.[place.slug] ? (
+                <LinkComponent
+                  href={hrefs[place.slug]}
+                  className={cn(
+                    chipClasses,
+                    "transition-colors hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60"
+                  )}
+                >
+                  {avatar}
+                </LinkComponent>
+              ) : (
+                <span className={chipClasses}>{avatar}</span>
+              )}
+            </li>
+          );
+        })}
+
+        {overflowLabel && (
+          <li className="inline-flex h-9 items-center rounded-full bg-white/10 px-4 text-[12.5px] opacity-80">
+            {overflowLabel}
+          </li>
+        )}
+      </ul>
+
+      {action && <div className="relative z-[1] mt-1">{action}</div>}
+    </div>
+  );
+}

package/src/components/weekday-theme-banner.stories.tsx

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Calendar, PanelRightOpen } from "lucide-react";
+import { Button } from "./button";
+import { WeekdayThemeBanner, type WeekdayThemeDay } from "./weekday-theme-banner";
+
+const days: WeekdayThemeDay[] = [
+  { code: "MON", name: "Meatless Monday", shortName: "Meatless", count: 84 },
+  { code: "TUE", name: "Taco Tuesday", shortName: "Taco", count: 26 },
+  { code: "WED", name: "Salad Wednesday", shortName: "Salad", count: 132 },
+  { code: "THU", name: "Burger Thursday", shortName: "Burger", count: 186 },
+  { code: "FRI", name: "Pizza Friday", shortName: "Pizza", count: 214 },
+  { code: "SAT", name: "Brunch Saturday", shortName: "Brunch", count: 96 },
+  { code: "SUN", name: "Roast Sunday", shortName: "Roast", count: 41 },
+];
+
+const drinkDays: WeekdayThemeDay[] = [
+  { code: "MON", name: "Mulled Monday", shortName: "Mulled", count: 22 },
+  { code: "TUE", name: "Tap Takeover", shortName: "Tap", count: 41 },
+  { code: "WED", name: "Wine Wednesday", shortName: "Wine", count: 52 },
+  { code: "THU", name: "Spritz Thursday", shortName: "Spritz", count: 64 },
+  { code: "FRI", name: "Negroni Friday", shortName: "Negroni", count: 38 },
+  { code: "SAT", name: "Sour Saturday", shortName: "Sour", count: 29 },
+  { code: "SUN", name: "Slow Coffee Sunday", shortName: "Coffee", count: 34 },
+];
+
+const meta: Meta<typeof WeekdayThemeBanner> = {
+  title: "Menu/WeekdayThemeBanner",
+  component: WeekdayThemeBanner,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The day's editorial theme, with the whole week beside it. Showing all seven is the point: a banner that only says \"it is Burger Thursday\" is an assertion, while one showing Wednesday was salads and Friday is pizza reads as a standing rhythm worth coming back for — and the other six days are the only way to browse to one. `activeDay` is resolved by the CALLER from the reader's clock, because a server in UTC and a reader in Bucharest disagree about the date for two hours a day.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof WeekdayThemeBanner>;
+
+export const Default: Story = {
+  args: {
+    days,
+    activeDay: 3,
+    kicker: "TODAY IS THURSDAY",
+    kickerIcon: <Calendar className="h-3 w-3" />,
+    body: "186 of them across 11 kitchens, from 32 lei. Two do a vegetarian version and four keep the grill on past midnight.",
+    weekLabel: "THE WEEK",
+    action: (
+      <Button size="sm" variant="secondary">
+        <PanelRightOpen className="h-3.5 w-3.5" />
+        See today&apos;s picks
+      </Button>
+    ),
+    actionNote: "Bruno picks nine, ranked on review mentions",
+    dayHref: (day) => `/menu?theme=${day.code.toLowerCase()}`,
+  },
+};
+
+/** The drinks tab, same component. */
+export const DrinksTab: Story = {
+  args: {
+    days: drinkDays,
+    activeDay: 2,
+    kicker: "TODAY IS WEDNESDAY",
+    kickerIcon: <Calendar className="h-3 w-3" />,
+    body: "Fifty-two by the glass across nineteen bars, from 16 lei.",
+    weekLabel: "THE WEEK",
+  },
+};
+
+/** `onDayChange` instead of `dayHref` — the rail selects in place. Needs a client caller. */
+export const Selectable: Story = {
+  args: { days, activeDay: 4, kicker: "TODAY IS FRIDAY", weekLabel: "THE WEEK", onDayChange: () => {} },
+};
+
+/** No counts: themes without a number behind them still read. */
+export const WithoutCounts: Story = {
+  args: {
+    days: days.map(({ count: _count, ...day }) => day),
+    activeDay: 0,
+    kicker: "TODAY IS MONDAY",
+    weekLabel: "THE WEEK",
+  },
+};
+
+export const Mobile: Story = {
+  args: {
+    days,
+    activeDay: 3,
+    kicker: "TODAY IS THURSDAY",
+    kickerIcon: <Calendar className="h-3 w-3" />,
+    body: "186 of them across 11 kitchens, from 32 lei.",
+    weekLabel: "THE WEEK",
+    action: <Button size="sm" variant="secondary">See today&apos;s picks</Button>,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};