@bearmenu/ui 0.8.9 → 0.8.11

package/src/components/signature-line-list.tsx

@@ -1,136 +0,0 @@
-import { ChevronRight, Star } from "lucide-react";
-import { cn } from "../lib/utils";
-import { Separator } from "./separator";
-import { MenuItem, type MenuItemLabels } from "./menu-item";
-import type { MenuVenuePreview, MenuLinkProps, MenuLinkComponent } from "./menu-types";
-
-/**
- * SignatureLineList — family, venue, dish, price and reputation on one line.
- *
- * The densest surface on the hub, and the one that most nearly justifies the
- * whole catalogue: every row ties a kitchen to the single thing its reviewers
- * keep naming, with the price and the count that back it.
- *
- * ## Two targets per row, deliberately
- *
- * The venue line goes to the venue; the item row goes to the item across every
- * kitchen that makes it. Those are genuinely different destinations, and
- * collapsing them into one tap loses the comparison that makes the item worth
- * showing. They are separate anchors rather than one anchor with a nested
- * button, which would be invalid markup.
- *
- * Below `lg` the row stacks: venue line first, then the full `<MenuItem>`
- * underneath. The desktop layout puts them side by side. Same markup, one
- * breakpoint — no second component.
- *
- * Server-safe.
- */
-
-/** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
-export type SignatureLineListLinkProps = MenuLinkProps;
-
-function DefaultLink({ href, ...props }: SignatureLineListLinkProps) {
-  return <a href={href} {...props} />;
-}
-
-export type SignatureLineListProps = {
-  venues: MenuVenuePreview[];
-  /** Passed through to each `<MenuItem>`. */
-  labels: MenuItemLabels;
-  formatPrice: (amount: number) => string;
-  formatCount?: (value: number) => string;
-  /** Composed meta line per venue, keyed by place slug, e.g. "romanian · Centru". */
-  metaLabels?: Record<string, string>;
-  /** The row's category mark per venue, keyed by place slug. */
-  hues?: Record<string, string>;
-  linkComponent?: MenuLinkComponent;
-  className?: string;
-};
-
-export function SignatureLineList({
-  venues,
-  labels,
-  formatPrice,
-  formatCount,
-  metaLabels,
-  hues,
-  linkComponent: LinkComponent = DefaultLink,
-  className,
-}: SignatureLineListProps) {
-  return (
-    <ul className={cn("flex flex-col", className)}>
-      {venues.map((venue, index) => {
-        const { place, signature } = venue;
-
-        return (
-          <li
-            key={place.slug}
-            className="grid gap-x-4 py-3.5 lg:grid-cols-[minmax(0,260px)_minmax(0,1fr)] lg:items-center"
-          >
-            {/* The DS rule between rows, spanning both grid columns. */}
-            {index > 0 && <Separator className="mb-3.5 lg:col-span-2" />}
-            <LinkComponent
-              href={venue.href}
-              className="flex items-center gap-3 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            >
-              <span className="relative h-12 w-12 shrink-0 overflow-hidden rounded-xl bg-[repeating-linear-gradient(135deg,oklch(0.78_0.018_55)_0_8px,oklch(0.84_0.012_58)_8px_16px)] lg:h-16 lg:w-16">
-                {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"
-                  />
-                )}
-                {place.open_now && (
-                  <i
-                    aria-hidden
-                    className="absolute right-1 top-1 h-[7px] w-[7px] rounded-full bg-[var(--free,currentColor)] ring-2 ring-white/80"
-                  />
-                )}
-              </span>
-
-              <span className="min-w-0 flex-1">
-                <span className="block truncate text-[15px] font-bold tracking-[-0.01em]">
-                  {place.name}
-                </span>
-                <span className="mt-0.5 flex items-center gap-1.5 text-xs text-muted-foreground">
-                  {place.rating && (
-                    <>
-                      <Star className="h-[11px] w-[11px]" aria-hidden />
-                      <span className="tabular-nums">{place.rating.rating}</span>
-                    </>
-                  )}
-                  {metaLabels?.[place.slug] && (
-                    <span className="truncate">{metaLabels[place.slug]}</span>
-                  )}
-                </span>
-              </span>
-
-              <ChevronRight
-                className="h-4 w-4 shrink-0 text-muted-foreground lg:hidden"
-                aria-hidden
-              />
-            </LinkComponent>
-
-            {signature && (
-              <MenuItem
-                item={signature.item}
-                labels={labels}
-                formatPrice={formatPrice}
-                formatCount={formatCount}
-                markGradient={hues?.[place.slug]}
-                subtitle={signature.why}
-                showSignatureBadge={signature.isSignature}
-                href={signature.href}
-                linkComponent={LinkComponent}
-                className="min-w-0"
-              />
-            )}
-          </li>
-        );
-      })}
-    </ul>
-  );
-}

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

@@ -1,66 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { mockPlaces } from "./menu-mocks";
-import { VenueBusynessStrip } from "./venue-busyness-strip";
-
-const busyness = mockPlaces[0].busyness!;
-
-const meta: Meta<typeof VenueBusynessStrip> = {
-  title: "Menu/VenueBusynessStrip",
-  component: VenueBusynessStrip,
-  tags: ["autodocs"],
-  decorators: [
-    (Story) => (
-      <div className="w-[560px] bg-background p-4">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "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 shut. The rush is derived relative to that venue's own peak, because a fixed score threshold would mark every hour at a busy venue and none at a quiet one.",
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof VenueBusynessStrip>;
-
-export const Default: Story = {
-  args: {
-    busyness,
-    caption: "Usually not busy until 18:00 — the rush is seven to eight.",
-  },
-};
-
-/** No caption: the bars alone, for a tight row. */
-export const BarsOnly: Story = { args: { busyness } };
-
-/** A short trading day draws a short strip rather than padding to 24. */
-export const ShortDay: Story = {
-  args: {
-    busyness: [
-      { hour: 8, score: 40 },
-      { hour: 9, score: 72 },
-      { hour: 10, score: 88 },
-      { hour: 11, score: 60 },
-      { hour: 12, score: 34 },
-    ],
-    caption: "Busiest first thing — quiet by noon.",
-  },
-};
-
-/** A flat day: `peakRatio` still finds the top of it, because it is relative. */
-export const Flat: Story = {
-  args: {
-    busyness: Array.from({ length: 10 }, (_, index) => ({ hour: 12 + index, score: 30 })),
-    caption: "Steady all day.",
-  },
-};
-
-/** All zeros — no reading. The strip renders nothing rather than a flat line. */
-export const NoReading: Story = {
-  args: { busyness: Array.from({ length: 8 }, (_, index) => ({ hour: index, score: 0 })) },
-};

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

@@ -1,64 +0,0 @@
-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-signature-block.stories.tsx

@@ -1,68 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,141 +0,0 @@
-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>
-    ),
-  ],
-};