@bearmenu/ui 0.8.3 → 0.8.6

package/src/components/event-list-row-wide.tsx

@@ -0,0 +1,386 @@
+"use client";
+
+import { memo, useState } from "react";
+import type { ReactNode } from "react";
+import { MapPin, Radio } from "lucide-react";
+import { cn } from "../lib/utils";
+import { buttonVariants } from "./button";
+import { EventPosterFallback } from "./event-poster-fallback";
+import { Separator } from "./separator";
+import { Skeleton } from "./skeleton";
+import { Tag } from "./tag";
+import {
+  resolveEventEntryFee,
+  type EventDateBadgeFormatters,
+  type EventListRowLabels,
+  type EventPreview,
+} from "./event-types";
+
+/**
+ * EventListRowWide — the desktop counterpart to `<EventListRow>`.
+ *
+ * Denser than `<EventCard>`, richer than the mobile `<EventListRow>`: desktop
+ * has the width to spare for a description and a dedicated action column, so
+ * this adds both rather than just scaling up the mobile row's type sizes.
+ *
+ * NESTED-LINK PATTERN, not the mobile row's single anchor: the row root is a
+ * plain, non-interactive container. The event TITLE is the primary link and
+ * gets a stretched overlay (`after:absolute after:inset-0`) so the whole row
+ * stays one big click target; "See the menu" (when `menuHref` is supplied) is
+ * a second, real link, `relative` with a higher `z-index` than the overlay so
+ * it wins the click in its own area — nesting it inside the title's anchor
+ * would be invalid HTML, which is why this uses two siblings instead. The
+ * title's `onClick` still fires for the caller (e.g. to `preventDefault()`
+ * into a detail sheet); modifier/middle-clicks still fall through to the
+ * anchor since nothing calls `preventDefault()` here.
+ *
+ * `event-list-row.tsx` (the mobile row) keeps the single-anchor shape and has
+ * no action column at all — the two were reconciled in favour of a real
+ * action here and none there, since a nested inert CTA inside a single-anchor
+ * row is a control that only looks like one. See that file's header.
+ *
+ * WEIGHT: the family tops out at 600, and after that pass the `Button` in this
+ * row's action column is the only 700-class element left in it — correct,
+ * since it is the only real action. Density sets weight, width sets size:
+ * both row titles are 600, and 15px vs 16.5px is what separates them.
+ *
+ * Same contract as the rest of the family: DS-owned view model, injected
+ * labels and formatters, plain `<img>`, anchor whenever `href` is given.
+ */
+
+export type EventListRowWideLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+  onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+
+function DefaultLink({ href, ...props }: EventListRowWideLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+/**
+ * Extends the mobile row's labels with the strings only the wide row needs —
+ * the action column included, since this is the only row in the family that
+ * has one.
+ */
+export type EventListRowWideLabels = EventListRowLabels & {
+  /** Primary row action, e.g. "Reserve". */
+  reserve: string;
+  /** Row action for a sold-out event. */
+  notifyMe: string;
+  /** Secondary link in the action column, e.g. "See the menu". */
+  seeMenu: string;
+};
+
+export type EventListRowWideProps = {
+  event: EventPreview;
+  labels: EventListRowWideLabels;
+  formatters: EventDateBadgeFormatters;
+  /** Currently running — tints the date badge and shows the on-air chip. */
+  isLive?: boolean;
+  /** Sold out or otherwise closed — dims the row and swaps the CTA. */
+  isSoldOut?: boolean;
+  /**
+   * Caller-resolved tag display labels, rendered as chips after the venue.
+   * The DS holds no taxonomy display names, so resolving AND capping them is
+   * the caller's job — three is what the desktop meta line carries. Same
+   * contract as `EventListRowProps.tags`; this replaced a `tagsText` prose
+   * string, which was the only place in the family tags were not chips.
+   */
+  tags?: string[];
+  href?: string;
+  /** Destination for the "See the menu" affordance. Omit to not render it at all. */
+  menuHref?: string;
+  linkComponent?: React.ComponentType<EventListRowWideLinkProps>;
+  onClick?: (event: EventPreview, mouseEvent: React.MouseEvent) => void;
+  className?: string;
+  priority?: boolean;
+  /** Rendered instead of the thumbnail when it's absent or failed to load. Defaults to `<EventPosterFallback />`. */
+  fallback?: ReactNode;
+  /**
+   * Drops this row's top rule. Pass it on the FIRST row under a day heading:
+   * the heading already ends the block above it, so the row's own rule lands
+   * immediately beneath it and draws two dividers a few pixels apart. The gap
+   * is the separator there — whitespace does the same job without the second
+   * line. Same prop and same reason as `EventIndexRow`.
+   */
+  hideRule?: boolean;
+};
+
+export const EventListRowWide = memo(function EventListRowWide({
+  event,
+  labels,
+  formatters,
+  isLive,
+  isSoldOut,
+  tags,
+  href,
+  menuHref,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className,
+  priority,
+  fallback = <EventPosterFallback />,
+  hideRule,
+}: EventListRowWideProps) {
+  const [imgError, setImgError] = useState(false);
+
+  const fee = resolveEventEntryFee(event);
+  const showPoster = !!event.poster_url && !imgError;
+  const venue = event.place_name ?? event.location;
+  const description = event.description ?? event.short_description;
+
+  /**
+   * `undefined` when the price is UNKNOWN — the row renders nothing rather
+   * than "Price TBA".
+   *
+   * An unknown fee is the commonest case in this feed (the ingest reads
+   * Instagram captions, which mostly do not state a door price), so the
+   * placeholder was the loudest, boldest element on most rows, repeated down
+   * the page, saying only that we do not know something. That is worse than
+   * silence: it spends the row's strongest typographic slot on an absence, and
+   * a reader scanning for prices learns to skip the one place a real price
+   * would appear. Silence reads as "not stated"; "Price TBA" reads as a
+   * promise that a number is coming.
+   *
+   * `EventListRow` reached the same conclusion, and `labels.priceUnknown` is
+   * gone from the contract entirely — no component in the package renders a
+   * placeholder for a fee any more.
+   */
+  const priceText =
+    fee.kind === "free" ? labels.free : fee.kind === "paid" ? formatters.price(fee.amountRon) : undefined;
+
+  const body = (
+    <>
+      {!hideRule && <Separator className="absolute inset-x-0 top-0" />}
+
+      {/* Fill means LIVE, not decoration — same rule as the phone row, and the
+          one thing about the badge that must not diverge between widths. */}
+      <div
+        className={cn("w-[52px] shrink-0 rounded-[10px] py-[7px] text-center", isLive && "bg-success/10")}
+      >
+        <div
+          className={cn(
+            "text-[19px] font-semibold leading-none tracking-[-0.02em] tabular-nums",
+            isLive ? "text-success" : "text-foreground"
+          )}
+        >
+          {formatters.dayNumber(event.starts_at)}
+        </div>
+        <div
+          className={cn(
+            "mt-[3px] text-[10.5px] font-semibold tracking-[0.06em]",
+            isLive ? "text-success" : "text-muted-foreground"
+          )}
+        >
+          {formatters.monthShort(event.starts_at)}
+        </div>
+      </div>
+
+      <div className="aspect-square w-[104px] shrink-0 overflow-hidden rounded-[10px] bg-muted">
+        {showPoster ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={event.poster_url}
+            alt=""
+            loading={priority ? "eager" : "lazy"}
+            decoding="async"
+            className="h-full w-full object-cover"
+            onError={() => setImgError(true)}
+          />
+        ) : (
+          fallback
+        )}
+      </div>
+
+      <div className="min-w-0 flex-1">
+        <div className="flex flex-wrap items-center gap-2">
+          {href ? (
+            <LinkComponent
+              href={href}
+              className="rounded-sm text-[16.5px] font-semibold tracking-[-0.01em] after:absolute after:inset-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+              onClick={onClick ? (mouseEvent) => onClick(event, mouseEvent) : undefined}
+            >
+              {event.title}
+            </LinkComponent>
+          ) : onClick ? (
+            <button
+              type="button"
+              className="relative cursor-pointer rounded-sm bg-transparent p-0 text-left text-[16.5px] font-semibold tracking-[-0.01em] after:absolute after:inset-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+              onClick={(mouseEvent) => onClick(event, mouseEvent)}
+            >
+              {event.title}
+            </button>
+          ) : (
+            <span className="text-[16.5px] font-semibold tracking-[-0.01em]">{event.title}</span>
+          )}
+
+          {isLive && (
+            <Tag size="sm" variant="success" className="shrink-0 whitespace-nowrap">
+              <Radio className="h-2.5 w-2.5" aria-hidden />
+              {labels.liveNow}
+            </Tag>
+          )}
+
+          {isSoldOut && (
+            <Tag size="sm" variant="quiet" className="shrink-0 whitespace-nowrap">
+              {labels.soldOut}
+            </Tag>
+          )}
+        </div>
+
+        {/* Time first, matching the phone row and the compact row: in a
+            time-sorted feed the clock is the axis, so it belongs at a fixed
+            left edge. Emphasis moved from weight to the ink channel — 400 in
+            `text-foreground` against the muted rest. The `MapPin` marks the
+            venue field and replaces the dot that used to; both widths carry
+            it, and it is the same glyph the filter rail uses for VENUE. */}
+        <div className="mt-[5px] flex items-center gap-2 text-[12.5px] text-muted-foreground">
+          <span className="shrink-0 tabular-nums text-foreground">
+            {formatters.time(event.starts_at)}
+          </span>
+          <span className="flex min-w-0 items-center gap-1">
+            <MapPin className="h-3 w-3 shrink-0" aria-hidden />
+            <span className="truncate">{venue}</span>
+          </span>
+          {tags?.map((tag) => (
+            <Tag key={tag} size="sm" variant="quiet" className="shrink-0 whitespace-nowrap">
+              {tag}
+            </Tag>
+          ))}
+        </div>
+
+        {description && (
+          <p className="mt-2 line-clamp-2 max-w-[620px] text-[13.5px] leading-[1.55] text-muted-foreground">
+            {description}
+          </p>
+        )}
+      </div>
+
+      <div className="flex w-[150px] shrink-0 flex-col items-end gap-[9px]">
+        {priceText && (
+          <span
+            className={cn("text-[15px] font-semibold tabular-nums", fee.kind === "free" && "text-success")}
+          >
+            {priceText}
+          </span>
+        )}
+
+        {/* The CTA carries the DS `Button`'s own styling via `buttonVariants`,
+            not a hand-rolled pill. It stays a `<span>` rather than becoming a
+            real `<Button>`: the whole row is already a link or a button, and a
+            nested interactive element inside one is invalid HTML and steals
+            the row's click target. So it takes the button's LOOK from the
+            single source that defines it, while remaining inert — which is
+            what it always was, just previously drawn by hand from `CHIP_BASE`
+            plus `bg-primary` and free to drift from every real button on the
+            page. */}
+        <span
+          className={buttonVariants({
+            variant: isSoldOut ? "outline" : "default",
+            size: "sm",
+          })}
+        >
+          {isSoldOut ? labels.notifyMe : labels.reserve}
+        </span>
+
+        {menuHref && (
+          <LinkComponent
+            href={menuHref}
+            className="relative z-10 cursor-pointer rounded-sm text-xs font-semibold text-primary underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          >
+            {labels.seeMenu}
+          </LinkComponent>
+        )}
+      </div>
+    </>
+  );
+
+  const rootClasses = cn(
+    "relative flex w-full items-start gap-[18px] py-[18px] text-left",
+    // The row is a click target — its title carries an `after:inset-0` overlay
+    // that makes the WHOLE row the link — and it had no hover response at all,
+    // so a pointer user got no confirmation the thing under the cursor was
+    // interactive until they had already clicked it.
+    //
+    // The tint bleeds past the text edges (`-mx-3 px-3`) so the fill reads as
+    // one row rather than a box drawn around the copy, and the row keeps its
+    // full-bleed separator. Sold-out rows are excluded: they are dimmed and
+    // inert, and lighting one up on hover promises an action that is not there.
+    //
+    // TEXT-KEYED, not surface-keyed — the same reasoning as `EventCompactRow`.
+    // This shipped as `bg-muted/50` and the numbers are why it did not stay:
+    // composited, that lands 0.0155 L from `--background` in light mode, which
+    // is the case this row actually renders in, and 0.0075 from `--card` in
+    // dark, which is invisible. `--foreground` at 5% holds 0.038-0.041 L across
+    // all four surface/mode combinations, so the wash is the same strength
+    // wherever the row is dropped and cannot be silently cancelled by the
+    // surface beneath it.
+    !isSoldOut &&
+      "-mx-3 rounded-xl px-3 transition-colors duration-150 hover:bg-foreground/5 motion-reduce:transition-none",
+    isSoldOut && "opacity-60",
+    className
+  );
+
+  return <div className={rootClasses}>{body}</div>;
+});
+
+export type EventListRowWideSkeletonProps = {
+  /** Matches `EventListRowWideProps` shape: show the description block by default, drop it for `NoDescription`-style rows. */
+  showDescription?: boolean;
+  /** Matches `EventListRowWideProps["hideRule"]` — drop the top rule on the first row of a day group. */
+  hideRule?: boolean;
+  className?: string;
+};
+
+/** Mirrors `<EventListRowWide>`'s geometry exactly so nothing shifts when data lands. */
+export function EventListRowWideSkeleton({
+  showDescription = true,
+  hideRule,
+  className,
+}: EventListRowWideSkeletonProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "relative flex w-full items-start gap-[18px] py-[18px] text-left",
+        className
+      )}
+    >
+      {!hideRule && <Separator className="absolute inset-x-0 top-0" />}
+
+      <div className="w-[52px] shrink-0 rounded-[10px] py-[7px] text-center">
+        <Skeleton className="mx-auto h-5 w-6" />
+        <Skeleton className="mx-auto mt-[3px] h-[10px] w-7" />
+      </div>
+
+      <Skeleton className="aspect-square w-[104px] shrink-0 rounded-[10px]" />
+
+      <div className="min-w-0 flex-1">
+        <Skeleton className="h-[16.5px] w-3/5" />
+
+        <div className="mt-[5px] flex items-center gap-2">
+          <Skeleton className="h-3 w-10" />
+          <Skeleton className="h-3 w-3 shrink-0 rounded-full" />
+          <Skeleton className="h-3 w-24" />
+          <Skeleton className="h-[22px] w-16 rounded-full" />
+          <Skeleton className="h-[22px] w-12 rounded-full" />
+        </div>
+
+        {showDescription && (
+          <div className="mt-2 max-w-[620px] space-y-1.5">
+            <Skeleton className="h-[13.5px] w-full" />
+            <Skeleton className="h-[13.5px] w-2/3" />
+          </div>
+        )}
+      </div>
+
+      <div className="flex w-[150px] shrink-0 flex-col items-end gap-[9px]">
+        <Skeleton className="h-[15px] w-16" />
+        <Skeleton className="h-6 w-20 rounded-full" />
+        <Skeleton className="h-3 w-20" />
+      </div>
+    </div>
+  );
+}

package/src/components/event-list-row.stories.tsx

@@ -0,0 +1,159 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EventListRow, EventListRowSkeleton } from "./event-list-row";
+import type { EventDateBadgeFormatters, EventListRowLabels, EventPreview } from "./event-types";
+import { Separator } from "./separator";
+
+const labels: EventListRowLabels = {
+  free: "Free",
+  liveNow: "On now",
+  soldOut: "Sold out",
+};
+
+const formatters: EventDateBadgeFormatters = {
+  time: (iso) => new Date(iso).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" }),
+  day: (iso) =>
+    new Date(iso).toLocaleDateString("en-GB", { weekday: "short", day: "numeric", month: "short" }),
+  price: (amount) => `${amount} RON`,
+  dayNumber: (iso) => String(new Date(iso).getDate()).padStart(2, "0"),
+  monthShort: (iso) =>
+    new Date(iso).toLocaleDateString("en-GB", { month: "short" }).toUpperCase(),
+};
+
+const event = (
+  id: string,
+  title: string,
+  place: string,
+  startsAt: string,
+  fee?: number
+): EventPreview => ({ id, title, location: place, place_name: place, starts_at: startsAt, entry_fee: fee });
+
+const meta: Meta<typeof EventListRow> = {
+  title: "Events/EventListRow",
+  component: EventListRow,
+  tags: ["autodocs"],
+  args: { labels, formatters },
+  decorators: [
+    (Story) => (
+      <div className="w-[358px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The dense row for the list view — roughly eight events per screen against the poster card's two. Note it carries a trailing CTA, which the poster card deliberately does not: cards elsewhere mean one thing, 'open me'. That divergence is intentional per the source design; reconcile both surfaces if it ever changes.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EventListRow>;
+
+export const Default: Story = {
+  args: { event: event("1", "Psihotrop Live", "Atelier Café", "2026-09-05T20:00:00", 50) },
+};
+
+export const FreeEntry: Story = {
+  args: { event: event("2", "Vinyl Happy Hour", "Zorki Photo Cafe", "2026-09-04T18:00:00", 0) },
+};
+
+/** No published fee is "TBC", never "Free". */
+export const UnknownPrice: Story = {
+  args: { event: event("3", "Quiz Night", "Flying Circus", "2026-09-03T19:00:00") },
+};
+
+/** Live tints the date badge and adds the on-air chip. */
+export const LiveNow: Story = {
+  args: {
+    event: event("4", "Charity Concert & Afterparty", "Flying Circus", "2026-09-03T21:00:00", 30),
+    isLive: true,
+  },
+};
+
+/** Sold out dims the row and swaps the CTA to "Notify me". */
+export const SoldOut: Story = {
+  args: {
+    event: event("5", "Friday Night Techno", "Form Space", "2026-09-04T22:00:00", 50),
+    isSoldOut: true,
+  },
+};
+
+/**
+ * A long title wraps in full and the row grows to fit it. It used to clamp at
+ * two lines; that clamp was the reported defect, so this story now proves the
+ * opposite.
+ */
+export const LongTitle: Story = {
+  args: {
+    event: event(
+      "6",
+      "Stand-up Comedy with Dobrotă, Cîrje & Florin — The Late Show, second edition",
+      "Klausen Pubhouse",
+      "2026-09-04T19:30:00",
+      45
+    ),
+  },
+};
+
+/** Loading state — identical geometry to `Default`, so nothing shifts on data arrival. */
+export const Loading: Story = {
+  render: () => <EventListRowSkeleton />,
+};
+
+/** A stack of loading rows, plus one loaded row for comparison. */
+export const LoadingVsLoaded: Story = {
+  render: () => (
+    <div>
+      <EventListRowSkeleton />
+      <EventListRowSkeleton />
+      <EventListRow
+        event={event("1", "Psihotrop Live", "Atelier Café", "2026-09-05T20:00:00", 50)}
+        labels={labels}
+        formatters={formatters}
+      />
+    </div>
+  ),
+};
+
+/** A day's worth of rows, as the list view stacks them. */
+export const ADay: Story = {
+  render: () => (
+    <div>
+      <div className="flex items-center gap-2.5 py-4">
+        <span className="text-sm font-extrabold">Today · Thursday 3</span>
+        <span className="text-[11.5px] text-muted-foreground">15 events</span>
+        <Separator className="flex-1" />
+      </div>
+      <EventListRow
+        event={event("a", "Psihotrop Live", "Atelier Café", "2026-09-03T20:00:00", 50)}
+        labels={labels}
+        formatters={formatters}
+        isLive
+      />
+      <EventListRow
+        event={event("b", "Quiz Night", "Flying Circus", "2026-09-03T20:00:00")}
+        labels={labels}
+        formatters={formatters}
+      />
+      <EventListRow
+        event={event("c", "Beer Battle", "Irish Music Pub", "2026-09-03T20:00:00", 0)}
+        labels={labels}
+        formatters={formatters}
+      />
+      <EventListRow
+        event={event("d", "COJO", "MATTER", "2026-09-03T20:30:00", 40)}
+        labels={labels}
+        formatters={formatters}
+      />
+      <EventListRow
+        event={event("e", "Schoolotheque Afterparty", "Flying Circus", "2026-09-03T22:00:00", 25)}
+        labels={labels}
+        formatters={formatters}
+        isSoldOut
+      />
+    </div>
+  ),
+};