@bearmenu/ui 0.8.3 → 0.8.6

package/src/components/venue-events-block.tsx

@@ -0,0 +1,408 @@
+"use client";
+
+import * as React from "react";
+import { Quote, Star } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Card } from "./card";
+import { Separator } from "./separator";
+import { Skeleton } from "./skeleton";
+
+/**
+ * VenueEventsBlock — "one venue, a whole fortnight": the venue and its
+ * upcoming nights on the left, its menu on the right. Every string arrives
+ * pre-formatted from the caller (ratings, prices, counts) — this component
+ * does no number or currency formatting, same contract as `EventCard`.
+ *
+ * Three independent link surfaces share one `linkComponent`: the venue
+ * header, each night row, and the "all events" chip. Each renders a link only
+ * when its own `href` is given, a plain element otherwise — none of them
+ * assume the others are interactive.
+ *
+ * `venue`/`nights`/`dishes` default to an empty venue / `[]` so a caller using
+ * only `venueContent`/`nightsContent`/`menuContent` never has to fabricate
+ * placeholder data just to satisfy these props.
+ */
+
+export type VenueEventsBlockLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+};
+
+function DefaultLink({ href, ...props }: VenueEventsBlockLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type VenueEventsBlockVenue = {
+  name: string;
+  ratingLabel?: string;
+  metaLabel?: string;
+  thumbnailUrl?: string;
+  isOpenNow?: boolean;
+  href?: string;
+};
+
+export type VenueEventsBlockNight = {
+  id: string;
+  dayLabel: string;
+  title: string;
+  timeLabel: string;
+  href?: string;
+};
+
+export type VenueEventsBlockDish = {
+  id: string;
+  name: string;
+  description?: string;
+  priceLabel: string;
+  quantityLabel?: string;
+  mentionsLabel?: string;
+};
+
+export type VenueEventsBlockProps = {
+  /**
+   * Plain venue data this block formats itself into the header card. Fine
+   * for a caller with nothing richer than name/rating/meta — and kept for
+   * the existing stories — but a consuming app that already owns a place
+   * card (real photo, description, cuisine/price meta) should reach for
+   * `venueContent` instead: rebuilding that card here would fork it, and the
+   * fork would drift the moment either copy changes.
+   */
+  venue?: VenueEventsBlockVenue;
+  /**
+   * Plain night data this block formats itself into a row. Fine for a
+   * caller with nothing richer than day/title/time — and kept for the
+   * existing stories — but a consuming app that already owns an event row
+   * component (poster, description, tags) should reach for `nightsContent`
+   * instead, for the same reason.
+   */
+  nights?: VenueEventsBlockNight[];
+  allEventsLabel: string;
+  allEventsHref?: string;
+  menuHeader?: React.ReactNode;
+  /**
+   * Plain dish data this block formats itself into a row. Fine for a caller
+   * with nothing richer than name/price/description — and kept for the
+   * existing stories — but a consuming app that already owns a menu-row
+   * component (signature badges, an evidence/mentions control, category
+   * marks, an ingredient-hue fallback) should reach for `menuContent`
+   * instead: rebuilding that row's markup here would fork it, and the fork
+   * would drift the moment either copy changes.
+   */
+  dishes?: VenueEventsBlockDish[];
+  /**
+   * Replaces the internally-rendered venue header entirely when given —
+   * `venue.name`/`ratingLabel`/`metaLabel`/`thumbnailUrl`/`isOpenNow` are
+   * then ignored (`venue.href` still wraps this slot in a link when given —
+   * a caller whose card is already a link should omit `venue.href` and let
+   * its own card own the anchor). Exists because this block should own the
+   * LAYOUT and nothing about the shape of a venue card: the consuming app
+   * has its own canonical place card (used on its place list, its search
+   * results, its map sheet), and the DS must not maintain a second
+   * implementation of it.
+   */
+  venueContent?: React.ReactNode;
+  /**
+   * Replaces the internally-rendered night rows entirely when given —
+   * `nights` is then ignored. Exists because this block should own the
+   * LAYOUT and nothing about the shape of a night row: the consuming app
+   * has its own canonical event row (used on its timeline, its event
+   * detail's "more from this venue"), and the DS must not maintain a
+   * second implementation of it. Render that row component here, one per
+   * item, with its own key/link/interaction — this slot only provides the
+   * column it sits in.
+   */
+  nightsContent?: React.ReactNode;
+  /**
+   * Replaces the internally-rendered dish rows entirely when given —
+   * `dishes` is then ignored. Exists because this block should own the
+   * LAYOUT (venue, nights, menu column) and nothing about the shape of a
+   * menu row: the consuming app has its own canonical row (used on its menu
+   * page, its place-details sheet, its must-try and pairings lists), and the
+   * DS must not maintain a second implementation of it. Render that row
+   * component here, one per item, with its own key/link/interaction — this
+   * slot only provides the column it sits in.
+   */
+  menuContent?: React.ReactNode;
+  footnote?: string;
+  linkComponent?: React.ComponentType<VenueEventsBlockLinkProps>;
+  className?: string;
+};
+
+export function VenueEventsBlock({
+  venue = { name: "" },
+  nights = [],
+  allEventsLabel,
+  allEventsHref,
+  menuHeader,
+  dishes = [],
+  venueContent,
+  nightsContent,
+  menuContent,
+  footnote,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: VenueEventsBlockProps) {
+  const [thumbError, setThumbError] = React.useState(false);
+  const showThumb = !!venue.thumbnailUrl && !thumbError;
+
+  const venueHeader = (
+    <div className="flex items-center gap-3 rounded-xl border border-border bg-card p-3">
+      <div className="relative h-16 w-16 shrink-0 overflow-hidden rounded-lg bg-muted">
+        {showThumb && (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={venue.thumbnailUrl}
+            alt=""
+            loading="lazy"
+            decoding="async"
+            className="h-full w-full object-cover"
+            onError={() => setThumbError(true)}
+          />
+        )}
+        {venue.isOpenNow && (
+          <span
+            className="absolute right-1 top-1 h-1.5 w-1.5 rounded-full bg-success ring-2 ring-background"
+            aria-hidden
+          />
+        )}
+      </div>
+
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2">
+          <span className="truncate text-sm font-semibold">{venue.name}</span>
+          {venue.ratingLabel && (
+            <span className="ml-auto flex shrink-0 items-center gap-1 text-xs font-medium text-foreground">
+              <Star className="h-3 w-3 fill-current text-primary" aria-hidden />
+              {venue.ratingLabel}
+            </span>
+          )}
+        </div>
+        {venue.metaLabel && (
+          <div className="mt-0.5 truncate text-xs text-muted-foreground">{venue.metaLabel}</div>
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    // `Card variant="elevatedPanel"` rather than a hand-rolled surface. This
+    // root WAS `border border-border bg-card` — a `surface` card reimplemented
+    // inside the DS, which is how it and the skeleton below drifted apart from
+    // the primitive and from each other.
+    //
+    // The elevation is the point: in light mode `--card` on `--background` is
+    // 1.04:1, so a panel this size was defined by a 1.32:1 hairline alone and
+    // read as a drawn rectangle rather than a raised thing.
+    //
+    // `rounded-2xl` is exactly the 18px this used to hardcode
+    // (`--radius` 0.625rem + 8px) and now re-scales with the token like every
+    // other surface. `overflow-hidden` clips descendants, never the element's
+    // own box-shadow, so the right column keeps its radius and the panel keeps
+    // its lift.
+    <Card
+      variant="elevatedPanel"
+      className={cn("grid grid-cols-1 overflow-hidden rounded-2xl md:grid-cols-2", className)}
+    >
+      <div className="p-5">
+        {venue.href ? (
+          <LinkComponent
+            href={venue.href}
+            className="block rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          >
+            {venueContent ?? venueHeader}
+          </LinkComponent>
+        ) : (
+          venueContent ?? venueHeader
+        )}
+
+        <div>
+          {nightsContent ??
+            nights.map((night) => {
+              const row = (
+                <>
+                  <Separator className="absolute inset-x-0 top-0" />
+
+                  <span className="w-11 shrink-0 font-mono text-xs text-muted-foreground">
+                    {night.dayLabel}
+                  </span>
+                  {/* Event title, wrapped in full — same rule as every other
+                      event surface. The day and time columns keep their fixed
+                      widths, so a two-line title only makes the row taller. */}
+                  <span className="min-w-0 flex-1 text-[13.5px] font-semibold leading-[1.35]">
+                    {night.title}
+                  </span>
+                  <span className="shrink-0 font-mono text-xs text-muted-foreground">
+                    {night.timeLabel}
+                  </span>
+                </>
+              );
+
+              const rowClasses = "relative flex items-center gap-[11px] py-[9px]";
+
+              return night.href ? (
+                <LinkComponent
+                  key={night.id}
+                  href={night.href}
+                  className={cn(
+                    rowClasses,
+                    "cursor-pointer transition-colors duration-150 hover:text-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md"
+                  )}
+                >
+                  {row}
+                </LinkComponent>
+              ) : (
+                <div key={night.id} className={rowClasses}>
+                  {row}
+                </div>
+              );
+            })}
+        </div>
+
+        {allEventsHref ? (
+          <LinkComponent
+            href={allEventsHref}
+            className="mt-3 inline-flex h-9 items-center rounded-full border border-border px-3 text-xs font-semibold text-foreground transition-colors duration-150 hover:bg-muted motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          >
+            {allEventsLabel} ›
+          </LinkComponent>
+        ) : (
+          <div className="mt-3 inline-flex h-9 items-center rounded-full border border-border px-3 text-xs font-semibold text-foreground">
+            {allEventsLabel} ›
+          </div>
+        )}
+      </div>
+
+      <div className="relative bg-muted/50 px-[18px] pb-5 pt-4">
+        <Separator className="absolute inset-x-0 top-0 md:hidden" />
+        <Separator orientation="vertical" className="absolute inset-y-0 left-0 hidden md:block" />
+
+        {menuHeader}
+
+        {menuContent ??
+          dishes.map((dish) => (
+            <div
+              key={dish.id}
+              className="relative flex items-start gap-3 py-3 first:[&>[data-slot=separator]]:hidden"
+            >
+              <Separator className="absolute inset-x-0 top-0" />
+
+              <div className="min-w-0 flex-1">
+                <div className="text-[15px] font-medium leading-[1.3]">{dish.name}</div>
+                {dish.description && (
+                  <div className="mt-[3px] line-clamp-1 text-xs text-muted-foreground">
+                    {dish.description}
+                  </div>
+                )}
+                <div className="mt-1.5 flex items-center gap-2 text-[11px] tabular-nums text-muted-foreground">
+                  {dish.quantityLabel && <span>{dish.quantityLabel}</span>}
+                  {dish.mentionsLabel && (
+                    <span className="ml-auto inline-flex items-center gap-1 text-[11.5px] text-muted-foreground">
+                      <Quote className="h-3 w-3" aria-hidden />
+                      {dish.mentionsLabel}
+                    </span>
+                  )}
+                </div>
+              </div>
+              <span className="shrink-0 text-sm font-bold text-primary">{dish.priceLabel}</span>
+            </div>
+          ))}
+
+        {footnote && <div className="mt-3 text-xs text-muted-foreground">{footnote}</div>}
+      </div>
+    </Card>
+  );
+}
+
+export type VenueEventsBlockSkeletonProps = {
+  /**
+   * Mirrors `VenueEventsBlockProps.venueContent`: a caller rendering its own
+   * place card through that slot should pass its own card-shaped skeleton
+   * here too, so the loading state matches what actually mounts instead of
+   * the block's built-in thumbnail-and-two-lines placeholder.
+   */
+  venueContent?: React.ReactNode;
+  /**
+   * Mirrors `VenueEventsBlockProps.nightsContent`: a caller rendering its own
+   * row component through that slot should pass its own row-shaped
+   * skeletons here too, so the loading state matches what actually mounts
+   * instead of three generic placeholder rows.
+   */
+  nightsContent?: React.ReactNode;
+  /**
+   * Mirrors `VenueEventsBlockProps.menuContent`: a caller rendering its own
+   * row component through that slot should pass its own row-shaped skeleton
+   * here too, so the loading state matches what actually mounts instead of
+   * three generic placeholder rows.
+   */
+  menuContent?: React.ReactNode;
+  className?: string;
+};
+
+export function VenueEventsBlockSkeleton({
+  venueContent,
+  nightsContent,
+  menuContent,
+  className,
+}: VenueEventsBlockSkeletonProps) {
+  return (
+    // Identical root to the component above, deliberately — the two drifted
+    // once already by both hand-rolling it, so they now share the variant.
+    <Card
+      aria-hidden="true"
+      variant="elevatedPanel"
+      className={cn("grid grid-cols-1 overflow-hidden rounded-2xl md:grid-cols-2", className)}
+    >
+      <div className="p-5">
+        {venueContent ?? (
+          <div className="flex items-center gap-3 rounded-xl border border-border bg-card p-3">
+            <Skeleton className="h-16 w-16 shrink-0 rounded-lg" />
+            <div className="min-w-0 flex-1">
+              <Skeleton className="h-4 w-2/5" />
+              <Skeleton className="mt-1.5 h-3 w-1/3" />
+            </div>
+          </div>
+        )}
+
+        <div>
+          {nightsContent ??
+            Array.from({ length: 3 }, (_, index) => (
+              <div key={index} className="relative flex items-center gap-[11px] py-[9px]">
+                <Separator className="absolute inset-x-0 top-0" />
+
+                <Skeleton className="h-3 w-11 shrink-0" />
+                <Skeleton className="h-[13.5px] flex-1" />
+                <Skeleton className="h-3 w-10 shrink-0" />
+              </div>
+            ))}
+        </div>
+
+        <Skeleton className="mt-3 h-9 w-40 rounded-full" />
+      </div>
+
+      <div className="relative bg-muted/50 px-[18px] pb-5 pt-4">
+        <Separator className="absolute inset-x-0 top-0 md:hidden" />
+        <Separator orientation="vertical" className="absolute inset-y-0 left-0 hidden md:block" />
+
+        <Skeleton className="mb-2 h-4 w-32" />
+
+        {menuContent ??
+          Array.from({ length: 3 }, (_, index) => (
+            <div
+              key={index}
+              className="relative flex items-start gap-3 py-3 first:[&>[data-slot=separator]]:hidden"
+            >
+              <Separator className="absolute inset-x-0 top-0" />
+
+              <div className="min-w-0 flex-1">
+                <Skeleton className="h-[15px] w-3/5" />
+                <Skeleton className="mt-[3px] h-3 w-4/5" />
+                <Skeleton className="mt-1.5 h-3 w-1/4" />
+              </div>
+              <Skeleton className="h-4 w-12 shrink-0" />
+            </div>
+          ))}
+      </div>
+    </Card>
+  );
+}

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

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { WeekendPanel, WeekendPanelSkeleton } from "./weekend-panel";
+
+function fakeCard(label: string) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className="aspect-[4/3] w-full rounded-xl bg-muted" />
+      <div className="text-sm font-semibold">{label}</div>
+      <div className="text-xs text-muted-foreground">Atelier Café · 20:00</div>
+    </div>
+  );
+}
+
+// Explicitly annotated rather than `satisfies`: the meta-level decorator makes
+// the inferred type reference storybook's internal CSF module, which tsc cannot
+// name portably (TS2742).
+const meta: Meta<typeof WeekendPanel> = {
+  title: "Events/WeekendPanel",
+  component: WeekendPanel,
+  tags: ["autodocs"],
+  args: {
+    dayLabel: "Friday",
+    countLabel: "23 events",
+    actionLabel: "See all",
+    actionHref: "/events?day=friday",
+    labels: { pause: "Pause carousel", play: "Play carousel" },
+    children: (
+      <>
+        {fakeCard("Psihotrop — Infinity")}
+        {fakeCard("Warehouse Sessions")}
+        {fakeCard("Jazz at the Attic")}
+        {fakeCard("Open Mic Night")}
+      </>
+    ),
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[380px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "One day panel from the weekend section. Built for exactly four children (two pages of two) — the slide keyframes measure `translateX(-100% - gap)`, i.e. exactly one page. Auto-advances on a loop paused by hover, focus, and off-screen, and by a visible pause/play toggle next to the progress dots — the actual WCAG 2.2.2 mechanism, since hover/focus aren't reachable by every user. Falls back to a static two-column grid (control omitted) under `prefers-reduced-motion`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof WeekendPanel>;
+
+export const Default: Story = {};
+
+/** The bordered, primary-tinted panel — the design's "today" or "this weekend" highlight. */
+export const Highlighted: Story = {
+  args: { isHighlighted: true },
+};
+
+/** Sibling panels stagger their loop so three side-by-side panels don't slide in lockstep. */
+export const SlowerLoop: Story = {
+  args: { durationSeconds: 10 },
+};
+
+/**
+ * The WCAG 2.2.2 mechanism: click the pause/play toggle next to the dots.
+ * Manual pause is a latch — it stays paused until pressed again, independent
+ * of hover/focus, and stops the track and both dot animations together.
+ */
+export const PauseControl: Story = {
+  args: { durationSeconds: 3 },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Toggle the button next to the progress dots to pause/resume the carousel. Unlike hover-pause, this state persists while reading — the required manual mechanism for WCAG 2.2.2.",
+      },
+    },
+  },
+};
+
+/** The panel at rest — the two visible cards of the two-up carousel, no slide. */
+export const Skeleton: Story = {
+  render: () => (
+    <div className="w-[380px]">
+      <WeekendPanelSkeleton />
+    </div>
+  ),
+};