@bearmenu/ui 0.8.8 → 0.8.9

package/src/components/hub-surface.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { HubSurface } from "./hub-surface";
+import { SectionHeader } from "./section-header";
+
+const meta: Meta<typeof HubSurface> = {
+  title: "Menu/HubSurface",
+  component: HubSurface,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-[var(--surface-2,oklch(0.97_0.004_60))] p-3">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The surface a hub section sits on below `lg`. On a phone a hub is an app screen, not a page: each section is a white card on the tinted ground, 18px radius, one shadow, no border. From `lg` up the card dissolves entirely and sections sit flat the way the desktop design draws them — one element, two looks, identical markup inside. Hairlines live inside a card, never across the page.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HubSurface>;
+
+export const Default: Story = {
+  render: () => (
+    <HubSurface>
+      <SectionHeader title="Open right now" />
+      <p className="text-sm text-muted-foreground">
+        Section content, inset by the surface.
+      </p>
+    </HubSurface>
+  ),
+};
+
+/** `flush` drops the inset so a rail or a photograph can bleed to the edge. */
+export const Flush: Story = {
+  render: () => (
+    <HubSurface flush>
+      <div className="px-3.5 pt-4">
+        <SectionHeader title="Browse by cuisine" />
+      </div>
+      <div className="flex gap-3 overflow-x-auto px-3.5 pb-4">
+        {[0, 1, 2].map((card) => (
+          <div key={card} className="h-24 w-40 shrink-0 rounded-xl bg-muted" />
+        ))}
+      </div>
+    </HubSurface>
+  ),
+};
+
+/** Stacked, at the 12px rhythm the hub uses between sections. */
+export const Stacked: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      {["Open right now", "One kitchen worth knowing", "Most named"].map((title) => (
+        <HubSurface key={title}>
+          <SectionHeader title={title} />
+          <div className="h-12 rounded-lg bg-muted" />
+        </HubSurface>
+      ))}
+    </div>
+  ),
+};

package/src/components/hub-surface.tsx

@@ -0,0 +1,40 @@
+import { cn } from "../lib/utils";
+
+/**
+ * HubSurface — the surface a hub section sits on BELOW `lg`.
+ *
+ * On a phone a hub is an app screen, not a page: each section is a white card
+ * on the tinted ground, 18px radius, one card shadow and no border, with 14px
+ * of inset. Hairlines live inside a card, never across the page. From `lg` up
+ * the card dissolves — no fill, no radius, no inset — and the sections sit flat
+ * the way the desktop design draws them. One element, two looks; the section
+ * markup inside is identical at every width.
+ *
+ * `flush` drops the inset so a section whose content bleeds to the card edge —
+ * a snap rail, a full-width photograph — can pad its own header and let the
+ * rest run.
+ *
+ * Generalised out of the events hub's `EventsHubCard`, which had the same job
+ * and lived in the app. Nothing here is menu- or event-shaped.
+ */
+
+export type HubSurfaceProps = {
+  flush?: boolean;
+  className?: string;
+  children: React.ReactNode;
+};
+
+export function HubSurface({ flush, className, children }: HubSurfaceProps) {
+  return (
+    <section
+      className={cn(
+        "rounded-[18px] border border-border bg-card shadow-none",
+        flush ? "overflow-hidden" : "px-3.5 py-4",
+        "lg:overflow-visible lg:rounded-none lg:bg-transparent lg:p-0 lg:shadow-none",
+        className
+      )}
+    >
+      {children}
+    </section>
+  );
+}

package/src/components/menu-family-card.stories.tsx

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MenuFamilyCard } from "./menu-family-card";
+import { mockDrinkFamily, mockFamily } from "./menu-mocks";
+
+const itemLabels = {
+  currency: "lei",
+  mentions: (count: number) => `${count} mentions`,
+  signature: "SIGNATURE",
+  mentioned: "MENTIONED",
+};
+const formatPrice = (amount: number) => String(amount);
+
+const labels = {
+  venueUnit: "KITCHENS",
+  mostNamed: "Most named",
+  priceBand: "kitchen price band",
+};
+
+const meta: Meta<typeof MenuFamilyCard> = {
+  title: "Menu/MenuFamilyCard",
+  component: MenuFamilyCard,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[300px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A browsable grouping of venues — a cuisine on the dishes tab, a drink family on the drinks tab. Two halves with two jobs: the dark panel is for scanning a row of four (one number, one name, the groups the family consists of, over a mosaic of its venues), and the white half underneath answers what you would actually order, as the production `MenuItem`. Both halves count VENUES: cuisine exists only on places, so a card counting dishes cannot be built.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuFamilyCard>;
+
+export const Default: Story = {
+  args: {
+    family: mockFamily,
+    labels,
+    itemLabels,
+    formatPrice,
+    href: "/top/italian",
+    hue: "oklch(0.55 0.15 40)",
+    priceBandLabel: "32–84 lei",
+  },
+};
+
+/** The drinks tab. Same card, different unit and vocabulary. */
+export const DrinkFamily: Story = {
+  args: {
+    family: mockDrinkFamily,
+    labels: { venueUnit: "BARS", mostNamed: "Most named", priceBand: "bar price band" },
+    itemLabels,
+    formatPrice,
+    href: "/top/baruri",
+    hue: "oklch(0.5 0.13 240)",
+    priceBandLabel: "18–54 lei",
+  },
+};
+
+/** A one-venue cuisine: the count is honest, and the mosaic repeats one photo. */
+export const Sparse: Story = {
+  args: {
+    family: {
+      slug: "portuguese",
+      name: "Portuguese",
+      venue_count: 1,
+      chips: [{ slug: "seafood-dish", label: "seafood" }],
+      signature: mockFamily.signature,
+    },
+    labels,
+    itemLabels,
+    formatPrice,
+    href: "/top/restaurante",
+    hue: "oklch(0.52 0.13 340)",
+    priceBandLabel: "42–88 lei",
+  },
+};
+
+/** The row of four the card is designed to be scanned in. */
+export const Row: Story = {
+  render: () => (
+    <div className="grid grid-cols-4 gap-5">
+      {[mockFamily, mockDrinkFamily, mockFamily, mockDrinkFamily].map((family, index) => (
+        <MenuFamilyCard
+          key={index}
+          family={family}
+          labels={labels}
+          itemLabels={itemLabels}
+          formatPrice={formatPrice}
+          href={`/top/${family.slug}`}
+          hue="oklch(0.55 0.15 40)"
+          priceBandLabel="32–84 lei"
+        />
+      ))}
+    </div>
+  ),
+  decorators: [
+    (Story) => (
+      <div className="w-[1200px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/menu-family-card.tsx

@@ -0,0 +1,211 @@
+import { Wallet } from "lucide-react";
+import { cn } from "../lib/utils";
+import { MenuItem, type MenuItemLabels } from "./menu-item";
+import type { MenuFamilyPreview, MenuLinkComponent, MenuLinkProps } from "./menu-types";
+
+/**
+ * MenuFamilyCard — a browsable grouping of venues: a cuisine on the dishes tab,
+ * a drink family on the drinks tab.
+ *
+ * ## The count does the scanning, the item answers the question
+ *
+ * The card is two halves with two jobs. The dark panel is for scanning a row of
+ * four: one number, one name, and the groups the family consists of, over a
+ * mosaic of its venues. The white half underneath answers what you would
+ * actually order — the production `<MenuItem>`, with its price, portion and
+ * mention count, so the recommendation is the review census rather than an
+ * editorial pick.
+ *
+ * ## Both halves count VENUES
+ *
+ * Cuisine exists on places and nowhere else — no listing endpoint will tell you
+ * how many dishes are Italian — so a card counting dishes cannot be built and
+ * this one does not try. The groups line is a plain list without counts: at
+ * four cards across, four chips each carrying a number turned the panel into a
+ * table, and the numbers were kitchens, which nobody reads a chip as.
+ *
+ * The mosaic holds VENUE photographs, which are real. It dims them hard — this
+ * is a ground for a number, not a gallery, and at this size a legible photo
+ * competes with the count for the same glance.
+ */
+
+/** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
+export type MenuFamilyCardLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: MenuFamilyCardLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type MenuFamilyCardLabels = {
+  /** Unit under the count, e.g. "KITCHENS". */
+  venueUnit: string;
+  /** Kicker over the featured item, e.g. "MOST NAMED". */
+  mostNamed: string;
+  /** Footer caption, e.g. "kitchen price band". */
+  priceBand: string;
+};
+
+export type MenuFamilyCardProps = {
+  family: MenuFamilyPreview;
+  labels: MenuFamilyCardLabels;
+  /** Passed through to the featured `<MenuItem>`. */
+  itemLabels: MenuItemLabels;
+  formatPrice: (amount: number) => string;
+  formatCount?: (value: number) => string;
+  href: string;
+  /** Finished CSS colour for the featured item's category mark. */
+  hue?: string;
+  /** Composed price band, e.g. "32–84 lei". */
+  priceBandLabel?: string;
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+/**
+ * A 2×2, not a 2×4.
+ *
+ * Four cells at card width give each photograph enough room to read as a room
+ * rather than as a swatch, and — the reason it changed — four cells match the
+ * four venues a caller actually has, so no photo repeats. At eight cells the
+ * list wrapped and put the SAME image directly above itself in a column, which
+ * is the one repeat a mosaic cannot hide.
+ */
+const MOSAIC_CELLS = 4;
+
+export function MenuFamilyCard({
+  family,
+  labels,
+  itemLabels,
+  formatPrice,
+  formatCount,
+  href,
+  hue,
+  priceBandLabel,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: MenuFamilyCardProps) {
+  const photos = family.venue_photo_urls ?? [];
+  const groups = (family.chips ?? []).map((chip) => chip.label);
+
+  return (
+    <div
+      className={cn(
+        "flex h-full flex-col overflow-hidden rounded-[14px] border border-border bg-card",
+        className
+      )}
+    >
+      <LinkComponent
+        href={href}
+        className="relative block overflow-hidden bg-[oklch(0.21_0.012_55)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+      >
+        <span aria-hidden className="absolute inset-0 grid grid-cols-2 grid-rows-2 gap-px">
+          {Array.from({ length: MOSAIC_CELLS }, (_, cell) =>
+            photos.length ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                key={cell}
+                src={photos[cell % photos.length]}
+                alt=""
+                loading="lazy"
+                decoding="async"
+                className="h-full w-full object-cover"
+              />
+            ) : (
+              <span
+                key={cell}
+                className="bg-[repeating-linear-gradient(135deg,oklch(0.6_0.02_55)_0_9px,oklch(0.68_0.016_58)_9px_18px)] opacity-[0.18]"
+              />
+            )
+          )}
+        </span>
+
+        {/*
+          The family's colour over the photography, when the caller passes a
+          `hue`. `mix-blend-mode: color` keeps every photo's luminance and
+          replaces its chroma with the family's, so four cards of four
+          different rooms read as one cocktail-blue, one wine-red, one
+          beer-gold, one coffee-brown — the same dictionary the chips and the
+          price band already use (`markGradient`). The scrim below still owns
+          the contrast; this layer only says which family the room belongs to.
+        */}
+        {hue && (
+          <span
+            aria-hidden
+            className="absolute inset-0 opacity-90 mix-blend-color"
+            style={{ backgroundColor: hue }}
+          />
+        )}
+
+        {/*
+          The hero's scrim, not a light tint.
+          The count and the name sit at opposite ends of this panel, so both
+          ends need to be dark — a gradient that clears in the middle looked
+          better empty and made the type unreadable the moment there were real
+          photographs behind it. Dimming the images themselves was tried first
+          and is worse: it greys the photography without ever guaranteeing
+          contrast, because the guarantee has to come from a fixed layer.
+        */}
+        <span
+          aria-hidden
+          className="absolute inset-0 bg-[linear-gradient(180deg,oklch(0.16_0.012_55_/_0.9)_0%,oklch(0.16_0.012_55_/_0.62)_45%,oklch(0.16_0.012_55_/_0.94)_100%)]"
+        />
+
+        {/* Taller than the half below it: the photography is what makes a row
+            of four scannable, and it was losing the card to a text block. */}
+        <span className="relative flex min-h-[260px] flex-col justify-between p-3.5 text-white">
+          <span className="block">
+            <b className="block text-[34px] font-extrabold leading-none tracking-[-0.03em] tabular-nums">
+              {family.venue_count}
+            </b>
+            <span className="mt-1 block text-[9.5px] font-bold tracking-[0.12em] opacity-80">
+              {labels.venueUnit}
+            </span>
+          </span>
+
+          <span className="block">
+            <span className="block text-[17px] font-bold tracking-[-0.01em]">{family.name}</span>
+            {groups.length > 0 && (
+              <span className="mt-0.5 block truncate text-[11.5px] opacity-75">
+                {groups.join(" · ")}
+              </span>
+            )}
+
+            {/* The band belongs up here with the other facts ABOUT the family.
+                Below, it was a third block competing with the one thing that
+                half is for — the item you might actually order. */}
+            {priceBandLabel && (
+              <span className="mt-2 inline-flex items-center gap-1.5 rounded-full bg-white/15 px-2.5 py-1 text-[11px] backdrop-blur-[2px]">
+                <Wallet className="h-3 w-3 shrink-0" aria-hidden />
+                <span className="opacity-80">{labels.priceBand}</span>
+                <b className="font-semibold tabular-nums">{priceBandLabel}</b>
+              </span>
+            )}
+          </span>
+        </span>
+      </LinkComponent>
+
+      {family.signature && (
+        <div className="flex flex-1 flex-col px-2 pb-2 pt-3">
+          <span className="px-2 text-[9.5px] font-bold uppercase tracking-[0.09em] text-muted-foreground">
+            {labels.mostNamed}
+          </span>
+
+          {/* MenuItem's own `px-4`: its colour mark is drawn at `-ml-4` and
+              needs that gutter — a tighter padding clipped it to a grey stub. */}
+          <MenuItem
+            className="min-h-0"
+            item={family.signature.item}
+            labels={itemLabels}
+            formatPrice={formatPrice}
+            formatCount={formatCount}
+            markGradient={hue}
+            subtitle={family.signature.why}
+            href={family.signature.href ?? href}
+            linkComponent={LinkComponent}
+          />
+
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/menu-field.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MenuField } from "./menu-field";
+import { mockGradients } from "./menu-mocks";
+
+const meta: Meta<typeof MenuField> = {
+  title: "Menu/MenuField",
+  component: MenuField,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The photoless cover for a dish or drink: the item's own name repeating across a shallow diagonal over a gradient. Menu-item photography is AI-generated and never shown, so the type IS the cover. Rows fade symmetrically out from one strong centre line, which is what keeps them reading as texture in the colour rather than as a watermark stamped on top of it. The gradient is injected because resolving a category to a hue needs app-owned enums.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuField>;
+
+export const Default: Story = {
+  args: {
+    name: "Truffle Tagliatelle",
+    gradient: mockGradients.pasta,
+    className: "h-[200px] w-[260px] rounded-xl",
+  },
+};
+
+/** A long name repeats fewer times per line, so the texture opens up. */
+export const LongName: Story = {
+  args: {
+    name: "Burrata & heirloom tomato with basil oil",
+    gradient: mockGradients.greens,
+    className: "h-[200px] w-[260px] rounded-xl",
+  },
+};
+
+/** Short names tile densely — the falloff is what stops that reading as noise. */
+export const ShortName: Story = {
+  args: {
+    name: "Mici",
+    gradient: mockGradients.meat,
+    className: "h-[200px] w-[260px] rounded-xl",
+  },
+};
+
+/**
+ * `seedKey` fixes the horizontal stagger. Two cards for the same concept at
+ * different venues break identically; pass the item slug and they diverge.
+ */
+export const EveryHue: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-3">
+      {Object.entries(mockGradients).map(([name, gradient]) => (
+        <MenuField
+          key={name}
+          name={name}
+          gradient={gradient}
+          className="h-[120px] w-[150px] rounded-xl"
+        />
+      ))}
+    </div>
+  ),
+};
+
+/** At tile scale the type has to survive being small. This is the real size. */
+export const AtTileScale: Story = {
+  args: {
+    name: "Chicken wings, 6 pc",
+    gradient: mockGradients.meat,
+    className: "aspect-[5/4] w-[180px] rounded-xl",
+  },
+};