@bearmenu/ui 0.8.3 → 0.8.6

package/src/components/event-card.tsx

@@ -0,0 +1,321 @@
+"use client";
+
+import { memo, useState } from "react";
+import { Gift, MapPin, Radio } from "lucide-react";
+import { cn } from "../lib/utils";
+import { EventPosterFallback } from "./event-poster-fallback";
+import { Skeleton } from "./skeleton";
+import { Tag } from "./tag";
+import { TagGroup } from "./tag-group";
+import {
+  resolveEventEntryFee,
+  type EventCardLabels,
+  type EventFormatters,
+  type EventPreview,
+} from "./event-types";
+
+/**
+ * EventCard — the poster card every events surface reuses.
+ *
+ * RENDERS AN ANCHOR WHENEVER `href` IS GIVEN, and that is not incidental. The
+ * consumer app's events hub was measured serving 2,751 words and 50 links in
+ * its raw HTML but only 12 links — none of them to an event — in the rendered
+ * DOM, because the hydrated cards were `<button onClick>` rather than links.
+ * Pass `href` AND `onClick`: the anchor is real for crawlers, middle-click and
+ * "open in new tab", while `onClick` opens the detail sheet (call
+ * `preventDefault()` there). Falls back to a `<button>` when only `onClick` is
+ * given, and a plain `<div>` when neither is.
+ *
+ * Like `place-card.tsx`, this takes a DS-owned view model, injected labels and
+ * injected formatters — no app schema, no app hooks, no i18n, and a plain
+ * `<img>` so it works outside Next.
+ */
+
+export type EventCardLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+  onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+
+function DefaultLink({ href, ...props }: EventCardLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type EventCardProps = {
+  event: EventPreview;
+  labels: EventCardLabels;
+  formatters: EventFormatters;
+  /**
+   * Poster ratio. `4/3` is the house shape shared with the dish/drink/place
+   * cards — the default, and what every card sitting in a column should use.
+   * `3/4` is the hub's original portrait deck/rail/tape ratio. `4/5` matches
+   * the Instagram source most real posters ship at (1080x1350) and is used by
+   * the hub's editorial poster surfaces (`CategoryDeck`, `PosterTape`,
+   * `Coverflow`) — it crops less than `3/4` and is not the same as it.
+   */
+  posterAspect?: "4/3" | "3/4" | "4/5";
+  /** Larger title — the featured/highlight slot. Never a clamp: the title wraps in full either way. */
+  emphasis?: boolean;
+  /** Top-left overlay pill (the design's "Busy" hype marker). Include its icon. */
+  badge?: React.ReactNode;
+  /** Bottom-left overlay pill naming the category. Include its icon. */
+  tagLabel?: React.ReactNode;
+  /**
+   * Caller-supplied display labels, rendered as small chips in the text area
+   * beneath the venue/meta line. `EventPreview.tags` is taxonomy coordinates
+   * (`slug`/`axis_slug`), not display text, so the DS cannot render them
+   * itself. Distinct from `tagLabel`: that is a single overlay pill on the
+   * poster (the design's category affordance for posters); this is an
+   * in-body list for the rest of an event's tags. Cap the count at the call
+   * site — this card does not.
+   */
+  tags?: string[];
+  /**
+   * The live line, fully composed by the caller (e.g. "Live now · ends around
+   * 23:00"). Composed outside the DS deliberately: the clause order differs by
+   * locale, and "is this live" depends on the app's clock, not the DS's.
+   */
+  liveStatus?: string;
+  /** Hide the day/time line — the timeline supplies its own hour heading. */
+  hideWhen?: boolean;
+  /** Overrides the day label when the card appears outside its own day section. */
+  dayLabel?: string;
+  /** Append the entry fee to the meta line. Off by default, matching the design's base card. */
+  showPrice?: boolean;
+  href?: string;
+  /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
+  linkComponent?: React.ComponentType<EventCardLinkProps>;
+  onClick?: (event: EventPreview, mouseEvent: React.MouseEvent) => void;
+  className?: string;
+  /** Forwarded to the poster's `loading` attribute (`"eager"` when true). */
+  priority?: boolean;
+  /** Rendered instead of the poster when it's absent or failed to load. Defaults to `<EventPosterFallback />`. */
+  fallback?: React.ReactNode;
+};
+
+const PILL_BASE =
+  "inline-flex items-center gap-1 h-6 max-w-[70%] px-2 rounded-full text-[11px] font-semibold";
+
+export const EventCard = memo(function EventCard({
+  event,
+  labels,
+  formatters,
+  posterAspect = "4/3",
+  emphasis,
+  badge,
+  tagLabel,
+  tags,
+  liveStatus,
+  hideWhen,
+  dayLabel,
+  showPrice,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className,
+  priority,
+  fallback = <EventPosterFallback />,
+}: EventCardProps) {
+  const [imgError, setImgError] = useState(false);
+
+  const fee = resolveEventEntryFee(event);
+  const showPoster = !!event.poster_url && !imgError;
+  const venue = event.place_name ?? event.location;
+
+  const body = (
+    <>
+      <div
+        className={cn(
+          "relative overflow-hidden rounded-xl bg-muted",
+          posterAspect === "3/4"
+            ? "aspect-[3/4]"
+            : posterAspect === "4/5"
+              ? "aspect-[4/5]"
+              : "aspect-[4/3]"
+        )}
+      >
+        {showPoster ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={event.poster_url}
+            alt={event.title}
+            title={event.title}
+            loading={priority ? "eager" : "lazy"}
+            decoding="async"
+            className="h-full w-full object-cover"
+            onError={() => setImgError(true)}
+          />
+        ) : (
+          fallback
+        )}
+
+        {/* Top overlay row — hype badge left, entry fee right. The empty span
+            keeps the fee pill right-aligned when there is no badge. */}
+        <div className="absolute inset-x-2 top-2 flex items-start justify-between gap-2">
+          {badge ? <span className={cn(PILL_BASE, "bg-black/55 text-white")}>{badge}</span> : <span />}
+          {fee.kind === "free" && (
+            <span className={cn(PILL_BASE, "bg-success font-bold text-success-foreground")}>
+              <Gift className="h-3 w-3" aria-hidden />
+              {labels.free}
+            </span>
+          )}
+        </div>
+
+        {tagLabel && (
+          <div className="absolute inset-x-2 bottom-2 flex gap-1">
+            <span className={cn(PILL_BASE, "bg-black/55 text-white")}>{tagLabel}</span>
+          </div>
+        )}
+      </div>
+
+      {/* NEVER CLAMPED, in any variant. The title is the one thing a card
+          exists to say, and "Movie Night: Futni m…" says none of it — the
+          truncated form was the reported defect. It wraps to as many lines as
+          the event needs; the card is `flex-col` and grows downward, so a
+          three-line title lengthens the card rather than pushing anything out
+          of it. In a grid, give the row `items-start` so the extra lines hang
+          below instead of stretching every sibling. */}
+      <h3
+        className={cn(
+          "mt-2.5 leading-[1.35]",
+          emphasis ? "text-lg font-bold tracking-[-0.02em]" : "text-sm font-semibold"
+        )}
+      >
+        {event.title}
+      </h3>
+
+      <div className="mt-0.5 flex min-w-0 items-center gap-1 text-xs font-medium text-foreground/85">
+        <MapPin className="h-3 w-3 shrink-0" aria-hidden />
+        <span className="truncate">{venue}</span>
+      </div>
+
+      {!hideWhen && (
+        <div className="mt-[3px] flex items-center gap-1.5 text-xs text-muted-foreground">
+          <span>{dayLabel ?? formatters.day(event.starts_at)}</span>
+          <span className="text-border" aria-hidden>
+            ·
+          </span>
+          <span>{formatters.time(event.starts_at)}</span>
+          {showPrice && fee.kind === "paid" && (
+            <>
+              <span className="text-border" aria-hidden>
+                ·
+              </span>
+              <span>{formatters.price(fee.amountRon)}</span>
+            </>
+          )}
+        </div>
+      )}
+
+      {tags && tags.length > 0 && (
+        <TagGroup className="mt-1.5">
+          {tags.map((tag) => (
+            <Tag key={tag} size="sm">
+              {tag}
+            </Tag>
+          ))}
+        </TagGroup>
+      )}
+
+      {liveStatus && (
+        <div className="mt-1 flex items-center gap-1.5 text-xs font-bold text-success">
+          <Radio className="h-3 w-3 shrink-0" aria-hidden />
+          {liveStatus}
+        </div>
+      )}
+    </>
+  );
+
+  const rootClasses = cn(
+    "flex min-w-0 flex-col text-left",
+    (href || onClick) &&
+      "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl",
+    className
+  );
+
+  if (href) {
+    return (
+      <LinkComponent
+        href={href}
+        className={rootClasses}
+        onClick={onClick ? (mouseEvent) => onClick(event, mouseEvent) : undefined}
+      >
+        {body}
+      </LinkComponent>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <button type="button" className={rootClasses} onClick={(e) => onClick(event, e)}>
+        {body}
+      </button>
+    );
+  }
+
+  return <div className={rootClasses}>{body}</div>;
+});
+
+export type EventCardSkeletonProps = {
+  /** Matches `EventCardProps["posterAspect"]` — keep the poster box the same shape. */
+  posterAspect?: "4/3" | "3/4" | "4/5";
+  /** Matches `EventCardProps["emphasis"]` — the featured slot's taller title. */
+  emphasis?: boolean;
+  /** Matches `EventCardProps["hideWhen"]` — drops the day/time line placeholder too. */
+  hideWhen?: boolean;
+  className?: string;
+};
+
+/**
+ * Mirrors `<EventCard>`'s geometry so nothing shifts when data lands — with
+ * one honest caveat since the title stopped being clamped: the placeholder
+ * reserves two lines (three under `emphasis`), and a real title longer than
+ * that will grow the card past the skeleton it replaces. Reserving more would
+ * only move the shift to the far commoner short-title case.
+ */
+export function EventCardSkeleton({
+  posterAspect = "4/3",
+  emphasis,
+  hideWhen,
+  className,
+}: EventCardSkeletonProps) {
+  return (
+    <div aria-hidden="true" className={cn("flex min-w-0 flex-col text-left", className)}>
+      <Skeleton
+        className={cn(
+          posterAspect === "3/4"
+            ? "aspect-[3/4]"
+            : posterAspect === "4/5"
+              ? "aspect-[4/5]"
+              : "aspect-[4/3]"
+        )}
+      />
+
+      {emphasis ? (
+        <div className="mt-2.5 space-y-2">
+          <Skeleton className="h-5 w-full" />
+          <Skeleton className="h-5 w-full" />
+          <Skeleton className="h-5 w-1/2" />
+        </div>
+      ) : (
+        <div className="mt-2.5 space-y-1.5">
+          <Skeleton className="h-3.5 w-full" />
+          <Skeleton className="h-3.5 w-2/3" />
+        </div>
+      )}
+
+      <div className="mt-0.5 flex items-center gap-1">
+        <Skeleton className="h-3 w-3 shrink-0 rounded-full" />
+        <Skeleton className="h-3 w-24" />
+      </div>
+
+      {!hideWhen && (
+        <div className="mt-[3px] flex items-center gap-1.5">
+          <Skeleton className="h-3 w-16" />
+          <Skeleton className="h-3 w-10" />
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,221 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EventCompactRow, EventCompactRowSkeleton } from "./event-compact-row";
+import type { EventCardLabels, EventFormatters, EventPreview } from "./event-types";
+
+const labels: EventCardLabels = { free: "Free", liveNow: "Live now" };
+
+const formatters: EventFormatters = {
+  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`,
+};
+
+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 EventCompactRow> = {
+  title: "Events/EventCompactRow",
+  component: EventCompactRow,
+  tags: ["autodocs"],
+  args: { labels, formatters },
+  decorators: [
+    (Story) => (
+      <div className="w-[358px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The dense row used inside `<HourGroup>` once the night thins out. Unlike `<EventListRow>`, it carries neither a date badge nor a trailing CTA — the timeline's hour heading already names the hour, and every row here means 'open me'.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EventCompactRow>;
+
+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 poster — the gradient fallback, which this row did not have until the
+ * thumbnail grew. A blank `bg-muted` box passed for "no image" at 34px; at
+ * 64x80 beside real posters it reads as broken.
+ */
+export const NoPoster: Story = {
+  args: {
+    event: {
+      ...event("np", "Loops & Books at The Square One", "The Square One", "2026-09-04T18:30:00"),
+      poster_url: undefined,
+    },
+  },
+};
+
+/**
+ * The hover wash, which cannot be asserted in a test and has to be looked at.
+ * Point at a row: the whole row washes and the title takes `--primary`.
+ *
+ * Both surfaces are shown because the treatment had to work on each. The row
+ * renders straight on `--background` in the timeline and inside an elevated
+ * `Card` in the hub's venue block — a wash keyed to a background token is a
+ * no-op on one of the two, which is why this one is keyed to the text colour.
+ */
+export const HoverOnBothSurfaces: Story = {
+  render: (args) => (
+    <div className="space-y-4">
+      <div className="rounded-xl bg-background p-3">
+        <p className="mb-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+          on --background
+        </p>
+        <EventCompactRow {...args} href="#a" />
+        <EventCompactRow {...args} event={event("h2", "Frat House Party with DJ M4RA", "Flying Circus", "2026-09-04T23:00:00")} href="#b" />
+      </div>
+      <div className="rounded-xl border border-border bg-card p-3">
+        <p className="mb-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+          on --card
+        </p>
+        <EventCompactRow {...args} href="#c" />
+        <EventCompactRow {...args} event={event("h4", "Horticulture Workshop at DOT", "DOT", "2026-09-04T19:00:00")} href="#d" />
+      </div>
+    </div>
+  ),
+  args: { event: event("h1", "Last Open Air with Dominik Muélar", "Iconic Garden", "2026-09-04T18:00:00") },
+};
+
+/** `hideTime` drops the leading time — for when the enclosing `HourGroup` already names it. */
+export const HiddenTime: Story = {
+  args: {
+    event: event("3", "Quiz Night", "Flying Circus", "2026-09-03T19:00:00"),
+    hideTime: true,
+  },
+};
+
+/**
+ * A long title WRAPS — the row grows taller rather than cutting the event's
+ * name off. This story used to demonstrate the opposite; the single truncated
+ * line was the reported defect, on this row and every sibling.
+ */
+export const LongTitle: Story = {
+  args: {
+    event: event(
+      "4",
+      "Stand-up Comedy with Dobrotă, Cîrje & Florin — The Late Show, second edition",
+      "Klausen Pubhouse",
+      "2026-09-04T19:30:00",
+      45
+    ),
+  },
+};
+
+/** The mobile variant — a slightly larger poster and chip. */
+export const Small: Story = {
+  args: {
+    size: "sm",
+    event: event("5", "Beer Battle", "Irish Music Pub", "2026-09-03T20:00:00", 0),
+  },
+};
+
+/**
+ * `subtitle` replaces the default "time · venue" sub-line entirely — the hub's
+ * venue block case, where the block's header already names the venue and the
+ * event's description is what actually distinguishes rows.
+ */
+export const WithSubtitle: Story = {
+  args: {
+    event: event("6", "Karaoke Thursdays", "Yolka", "2026-09-03T21:00:00"),
+    subtitle: "Sing your heart out with the house band backing every song.",
+  },
+};
+
+/** Default sub-line beside the `subtitle` override, so the difference is visible. */
+export const DefaultVsSubtitle: Story = {
+  render: () => (
+    <div>
+      <EventCompactRow
+        event={event("6a", "Karaoke Thursdays", "Yolka", "2026-09-03T21:00:00")}
+        labels={labels}
+        formatters={formatters}
+      />
+      <EventCompactRow
+        event={event("6b", "Karaoke Thursdays", "Yolka", "2026-09-03T21:00:00")}
+        labels={labels}
+        formatters={formatters}
+        subtitle="Sing your heart out with the house band backing every song."
+      />
+    </div>
+  ),
+};
+
+/** Tag chips below the sub-line — labels the caller derives from `event.tags`. */
+export const WithTags: Story = {
+  args: {
+    event: event("7", "Psihotrop Live", "Atelier Café", "2026-09-05T20:00:00", 50),
+    tags: ["Live Music", "Rock"],
+  },
+};
+
+/** Loading state — identical geometry to `Default`, so nothing shifts on data arrival. */
+export const Loading: Story = {
+  render: () => <EventCompactRowSkeleton />,
+};
+
+/** The `size="sm"` loading geometry. */
+export const LoadingSmall: Story = {
+  render: () => <EventCompactRowSkeleton size="sm" />,
+};
+
+/** A loading row above a loaded one, so any geometry drift is visible at a glance. */
+export const LoadingVsLoaded: Story = {
+  render: () => (
+    <div>
+      <EventCompactRowSkeleton />
+      <EventCompactRow
+        event={event("1", "Psihotrop Live", "Atelier Café", "2026-09-05T20:00:00", 50)}
+        labels={labels}
+        formatters={formatters}
+      />
+    </div>
+  ),
+};
+
+/** A run of rows as they stack inside `HourGroup`. */
+export const AStretch: Story = {
+  render: () => (
+    <div>
+      <EventCompactRow
+        event={event("a", "Psihotrop Live", "Atelier Café", "2026-09-03T20:00:00", 50)}
+        labels={labels}
+        formatters={formatters}
+        hideTime
+      />
+      <EventCompactRow
+        event={event("b", "Quiz Night", "Flying Circus", "2026-09-03T20:00:00")}
+        labels={labels}
+        formatters={formatters}
+        hideTime
+      />
+      <EventCompactRow
+        event={event("c", "Beer Battle", "Irish Music Pub", "2026-09-03T20:00:00", 0)}
+        labels={labels}
+        formatters={formatters}
+        hideTime
+      />
+    </div>
+  ),
+};