@bearmenu/ui 0.8.7 → 0.8.9

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

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

@@ -0,0 +1,231 @@
+import { cn } from "../lib/utils";
+
+/**
+ * WeekdayThemeBanner — the day's editorial theme, with the whole week beside it.
+ *
+ * Showing all seven days is the point: a banner that only says "it is Burger
+ * Thursday" is an assertion, while one that shows Wednesday was salads and
+ * Friday is pizza reads as a standing rhythm the reader can come back for. The
+ * other six days are also the only affordance for browsing to one.
+ *
+ * ## The active day is the caller's, not the component's
+ *
+ * `activeDay` is an index into `days`, resolved by the caller from the READER's
+ * clock. Resolving it here would use the server's, and a server in UTC and a
+ * reader in Bucharest disagree about which day it is for two hours out of every
+ * twenty-four.
+ *
+ * No directive: with `dayHref` the week rail is links and renders on the
+ * server; with `onDayChange` it is buttons and needs a client caller.
+ */
+
+export type WeekdayThemeBannerLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+};
+
+function DefaultLink({ href, ...props }: WeekdayThemeBannerLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type WeekdayThemeDay = {
+  /** Short code, e.g. "THU". Already localised. */
+  code: string;
+  /** Theme name, e.g. "Burger Thursday". */
+  name: string;
+  /** Short form for the rail, e.g. "Burger". Falls back to `name`. */
+  shortName?: string;
+  /** Items under the theme. Omit where there is no count to show. */
+  count?: number;
+};
+
+export type WeekdayThemeBannerProps = {
+  days: WeekdayThemeDay[];
+  /** Index into `days` for the reader's own today. */
+  activeDay: number;
+  /** Kicker over the title, e.g. "TODAY IS THURSDAY". Composed by the caller. */
+  kicker?: string;
+  kickerIcon?: React.ReactNode;
+  /** The banner's body copy for the active day. */
+  body?: string;
+  /** Heading over the week rail, e.g. "THE WEEK". */
+  weekLabel?: string;
+  /** The primary action — pass a rendered button or link. */
+  action?: React.ReactNode;
+  /** Note beside the action, e.g. "Bruno picks nine, ranked on mentions". */
+  actionNote?: string;
+  /** Destination per day index. Renders the rail as links. */
+  dayHref?: (day: WeekdayThemeDay, index: number) => string;
+  /** Selects a day in place. Renders the rail as buttons. */
+  onDayChange?: (index: number) => void;
+  /**
+   * The day's photograph.
+   *
+   * This is the one editorial slot on a menu hub that carries a plated dish,
+   * and it can because these are art-directed assets shipped with the app, not
+   * generated item photos pulled off a menu row. Without one the banner falls
+   * back to its flat ground and still reads — but the flat version is the
+   * degraded state, not the design.
+   */
+  imageUrl?: string;
+  linkComponent?: React.ComponentType<WeekdayThemeBannerLinkProps>;
+  className?: string;
+};
+
+export function WeekdayThemeBanner({
+  days,
+  activeDay,
+  kicker,
+  kickerIcon,
+  body,
+  weekLabel,
+  action,
+  actionNote,
+  dayHref,
+  onDayChange,
+  imageUrl,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: WeekdayThemeBannerProps) {
+  const active = days[activeDay];
+  if (!active) return null;
+
+  return (
+    <div
+      className={cn(
+        "relative grid overflow-hidden rounded-[18px] bg-[linear-gradient(120deg,oklch(0.32_0.06_45),oklch(0.24_0.04_40))] text-white lg:grid-cols-[1fr_auto]",
+        className
+      )}
+    >
+      {imageUrl && (
+        <>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={imageUrl}
+            alt=""
+            aria-hidden
+            className="absolute inset-0 h-full w-full object-cover"
+          />
+          {/*
+            The scrim covers the WHOLE banner, not just the text side.
+            It used to fade to near-transparent on the right, which looked
+            better in isolation and made the week rail — seven lines of 12px
+            type — sit directly on whatever the plate happened to be. A photo
+            you can half-read under is worth less than seven labels you can
+            read. Still a gradient rather than a flat wash, so the image keeps
+            some depth on the right.
+          */}
+          <div
+            aria-hidden
+            className="absolute inset-0 bg-[linear-gradient(100deg,oklch(0.18_0.03_45_/_0.94)_0%,oklch(0.18_0.03_45_/_0.82)_45%,oklch(0.18_0.03_45_/_0.66)_100%)]"
+          />
+        </>
+      )}
+
+      {!imageUrl && (
+        <span
+          aria-hidden
+          className="pointer-events-none absolute bottom-0 right-[28%] select-none font-serif text-[140px] font-bold leading-none text-white/[0.06]"
+        >
+          {active.code}
+        </span>
+      )}
+
+      <div className="relative z-[1] flex flex-col gap-2.5 p-4 lg:gap-3 lg:p-6">
+        {kicker && (
+          <span className="inline-flex w-max items-center gap-1.5 rounded-full bg-white/15 px-2.5 py-1 text-[10.5px] font-bold tracking-[0.09em]">
+            {kickerIcon}
+            {kicker}
+          </span>
+        )}
+
+        <h3 className="font-serif text-[24px] font-semibold tracking-[-0.02em] lg:text-[36px]">
+          {active.name}
+        </h3>
+
+        {body && <p className="max-w-[520px] text-[13.5px] leading-[1.5] opacity-90">{body}</p>}
+
+        {(action || actionNote) && (
+          <div className="mt-1 flex flex-wrap items-center gap-3">
+            {action}
+            {actionNote && <span className="text-xs opacity-75">{actionNote}</span>}
+          </div>
+        )}
+      </div>
+
+      <div
+        className={cn(
+          "relative z-[1] hidden border-t border-white/15 p-4 lg:block lg:min-w-[240px] lg:border-l lg:border-t-0 lg:p-5",
+          // Over a photograph the rail needs its own ground, or seven lines of
+          // small type land on whatever the plate happens to be.
+          imageUrl && "bg-black/45 backdrop-blur-[2px]"
+        )}
+      >
+        {weekLabel && (
+          <div className="mb-2 text-[10px] font-bold tracking-[0.12em] opacity-70">
+            {weekLabel}
+          </div>
+        )}
+
+        <ul className="grid grid-cols-2 gap-x-4 sm:grid-cols-4 lg:grid-cols-1">
+          {days.map((day, index) => {
+            const isActive = index === activeDay;
+            const content = (
+              <>
+                <b className="w-8 shrink-0 font-mono text-[11px] font-medium opacity-70">
+                  {day.code}
+                </b>
+                <span className="min-w-0 flex-1 truncate">{day.shortName ?? day.name}</span>
+                {day.count != null && (
+                  <span className="shrink-0 tabular-nums opacity-70">{day.count}</span>
+                )}
+              </>
+            );
+
+            // Today is set BIGGER, not just bolder. Weight alone was doing all
+            // the work at 12.5px against six neighbours, which is not enough
+            // separation to answer "which one is today" at a glance — the
+            // question the rail exists to answer.
+            const rowClasses = cn(
+              "flex w-full items-center gap-2 rounded transition-opacity",
+              isActive
+                ? "-mx-1.5 bg-white/10 px-1.5 py-1.5 text-[14.5px] font-extrabold"
+                : "py-[5px] text-[12.5px] opacity-70 hover:opacity-100"
+            );
+
+            return (
+              <li key={day.code}>
+                {dayHref ? (
+                  <LinkComponent
+                    href={dayHref(day, index)}
+                    className={cn(
+                      rowClasses,
+                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60"
+                    )}
+                  >
+                    {content}
+                  </LinkComponent>
+                ) : onDayChange ? (
+                  <button
+                    type="button"
+                    aria-pressed={isActive}
+                    onClick={() => onDayChange(index)}
+                    className={cn(
+                      rowClasses,
+                      "text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60"
+                    )}
+                  >
+                    {content}
+                  </button>
+                ) : (
+                  <span className={rowClasses}>{content}</span>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+}

package/src/components/weekend-panel.test.tsx

@@ -0,0 +1,43 @@
+import { describe, it, expect } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { WeekendPanel } from "./weekend-panel";
+
+const labels = { pause: "Pause", play: "Play" };
+
+function renderPanel() {
+  return render(
+    <WeekendPanel dayLabel="Saturday" countLabel="4 events" actionLabel="See all" labels={labels}>
+      <a href="/a">A</a>
+      <a href="/b">B</a>
+      <a href="/c">C</a>
+      <a href="/d">D</a>
+    </WeekendPanel>
+  );
+}
+
+const track = () => screen.getByText("A").parentElement!.parentElement as HTMLElement;
+
+describe("WeekendPanel", () => {
+  it("has no autoplay control below the desktop breakpoint", () => {
+    renderPanel();
+    expect(screen.queryByRole("button", { name: "Pause" })).not.toBeInTheDocument();
+  });
+
+  it("starts on the first page and turns on a leftward drag", () => {
+    renderPanel();
+    expect(track().style.transform).toContain("calc(0 *");
+
+    const stage = track().parentElement as HTMLElement;
+    fireEvent.pointerDown(stage, { clientX: 200, pointerId: 1, button: 0 });
+    fireEvent.pointerMove(stage, { clientX: 150, pointerId: 1 });
+    fireEvent.pointerMove(stage, { clientX: 100, pointerId: 1 });
+    fireEvent.pointerUp(stage, { clientX: 100, pointerId: 1 });
+    expect(track().style.transform).toContain("calc(-1 *");
+  });
+
+  it("turns to the page of a card that receives focus", () => {
+    renderPanel();
+    fireEvent.focus(screen.getByText("D"));
+    expect(track().style.transform).toContain("calc(-1 *");
+  });
+});