@bearmenu/ui 0.8.4 → 0.8.6

package/src/components/event-card.test.tsx

@@ -0,0 +1,177 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { EventCard } from "./event-card";
+import type { EventCardLabels, EventFormatters, EventPreview } from "./event-types";
+
+const labels: EventCardLabels = {
+  free: "Free",
+  liveNow: "Live now",
+};
+
+const formatters: EventFormatters = {
+  time: () => "20:00",
+  day: () => "Sat, Sep 5",
+  price: (amount) => `${amount} RON`,
+};
+
+const baseEvent: EventPreview = {
+  id: "e1",
+  title: "Psihotrop Live",
+  location: "Atelier Cafe",
+  starts_at: "2026-09-05T20:00:00Z",
+  place_name: "Atelier Cafe",
+};
+
+const renderCard = (props: Partial<React.ComponentProps<typeof EventCard>> = {}) =>
+  render(<EventCard event={baseEvent} labels={labels} formatters={formatters} {...props} />);
+
+describe("EventCard", () => {
+  describe("entry fee", () => {
+    // The tri-state is the whole point: an absent fee is unknown, NOT free.
+    // Rendering "Free" for an unpublished price would be a factual claim the
+    // API never made.
+    it("shows the free pill only when entry_fee is explicitly 0", () => {
+      renderCard({ event: { ...baseEvent, entry_fee: 0 } });
+      expect(screen.getByText("Free")).toBeInTheDocument();
+    });
+
+    it("does not show the free pill when entry_fee is absent", () => {
+      renderCard();
+      expect(screen.queryByText("Free")).not.toBeInTheDocument();
+    });
+
+    it("does not show the free pill when entry_fee is a real price", () => {
+      renderCard({ event: { ...baseEvent, entry_fee: 50 } });
+      expect(screen.queryByText("Free")).not.toBeInTheDocument();
+    });
+
+    it("appends the formatted price to the meta line only when asked", () => {
+      const { rerender } = renderCard({ event: { ...baseEvent, entry_fee: 50 } });
+      expect(screen.queryByText("50 RON")).not.toBeInTheDocument();
+
+      rerender(
+        <EventCard
+          event={{ ...baseEvent, entry_fee: 50 }}
+          labels={labels}
+          formatters={formatters}
+          showPrice
+        />
+      );
+      expect(screen.getByText("50 RON")).toBeInTheDocument();
+    });
+  });
+
+  describe("root element", () => {
+    // Regression guard for the measured SEO defect: hydrated event cards used
+    // to render as <button onClick>, so the rendered DOM carried no links into
+    // the events cluster at all.
+    it("renders an anchor when href is given", () => {
+      renderCard({ href: "/en/cluj-napoca/events/e/psihotrop-live-e1" });
+      expect(screen.getByRole("link", { name: /Psihotrop Live/ })).toHaveAttribute(
+        "href",
+        "/en/cluj-napoca/events/e/psihotrop-live-e1"
+      );
+    });
+
+    it("still fires onClick from the anchor, so the sheet can intercept it", async () => {
+      const onClick = vi.fn();
+      renderCard({ href: "/events/e/e1", onClick });
+
+      await userEvent.click(screen.getByRole("link", { name: /Psihotrop Live/ }));
+      expect(onClick).toHaveBeenCalledWith(baseEvent, expect.anything());
+    });
+
+    it("falls back to a button when only onClick is given", () => {
+      renderCard({ onClick: vi.fn() });
+      expect(screen.getByRole("button", { name: /Psihotrop Live/ })).toBeInTheDocument();
+      expect(screen.queryByRole("link")).not.toBeInTheDocument();
+    });
+
+    it("renders a non-interactive element when neither href nor onClick is given", () => {
+      renderCard();
+      expect(screen.queryByRole("link")).not.toBeInTheDocument();
+      expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("meta line", () => {
+    it("uses the injected formatters rather than formatting dates itself", () => {
+      renderCard();
+      expect(screen.getByText("Sat, Sep 5")).toBeInTheDocument();
+      expect(screen.getByText("20:00")).toBeInTheDocument();
+    });
+
+    it("prefers an explicit dayLabel over the formatted start date", () => {
+      renderCard({ dayLabel: "Tomorrow" });
+      expect(screen.getByText("Tomorrow")).toBeInTheDocument();
+      expect(screen.queryByText("Sat, Sep 5")).not.toBeInTheDocument();
+    });
+
+    it("hides the whole meta line when hideWhen is set", () => {
+      renderCard({ hideWhen: true });
+      expect(screen.queryByText("20:00")).not.toBeInTheDocument();
+    });
+
+    it("falls back to location when the event carries no place_name", () => {
+      renderCard({ event: { ...baseEvent, place_name: undefined, location: "Piata Unirii" } });
+      expect(screen.getByText("Piata Unirii")).toBeInTheDocument();
+    });
+  });
+
+  describe("poster", () => {
+    it("renders no img when the event has no resolved poster", () => {
+      const { container } = renderCard();
+      expect(container.querySelector("img")).toBeNull();
+    });
+
+    it("renders the poster the caller resolved", () => {
+      renderCard({ event: { ...baseEvent, poster_url: "https://cdn.example/p.avif" } });
+      expect(screen.getByAltText("Psihotrop Live")).toHaveAttribute(
+        "src",
+        "https://cdn.example/p.avif"
+      );
+    });
+  });
+
+  // Truncation is CSS-only, so jsdom cannot see the visual result — the class
+  // list is the only observable. Asserting on it is worth the coupling here:
+  // the reported bug ("Movie Night: Futni m…") was invisible to every other
+  // kind of test, and a clamp added back in any variant is exactly what this
+  // needs to catch.
+  describe("title", () => {
+    const longTitle =
+      "Movie Night: Futni må ikke være så vanskelig — an outdoor screening with live score";
+
+    it("renders the whole title, never a shortened copy of it", () => {
+      renderCard({ event: { ...baseEvent, title: longTitle } });
+      expect(screen.getByRole("heading", { name: longTitle })).toBeInTheDocument();
+    });
+
+    it("is not clamped in the base variant", () => {
+      renderCard({ event: { ...baseEvent, title: longTitle } });
+      expect(screen.getByRole("heading", { name: longTitle }).className).not.toMatch(
+        /line-clamp|truncate/
+      );
+    });
+
+    it("is not clamped in the emphasis variant either", () => {
+      renderCard({ event: { ...baseEvent, title: longTitle }, emphasis: true });
+      expect(screen.getByRole("heading", { name: longTitle }).className).not.toMatch(
+        /line-clamp|truncate/
+      );
+    });
+
+    it.each(["4/3", "3/4", "4/5"] as const)("is not clamped at posterAspect %s", (posterAspect) => {
+      renderCard({ event: { ...baseEvent, title: longTitle }, posterAspect });
+      expect(screen.getByRole("heading", { name: longTitle }).className).not.toMatch(
+        /line-clamp|truncate/
+      );
+    });
+  });
+
+  it("renders the live line the caller composed, not one of its own", () => {
+    renderCard({ liveStatus: "Live now · ends around 23:00" });
+    expect(screen.getByText("Live now · ends around 23:00")).toBeInTheDocument();
+  });
+});

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