@bearmenu/ui 0.8.3 → 0.8.6

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

@@ -0,0 +1,248 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Flame, Music } from "lucide-react";
+import { EventCard, EventCardSkeleton } from "./event-card";
+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: EventPreview = {
+  id: "e1",
+  title: "Psihotrop — From the Beginning to Infinity",
+  location: "Atelier Café",
+  place_name: "Atelier Café",
+  place_slug: "atelier-cafe",
+  starts_at: "2026-09-05T20:00:00",
+  entry_fee: 50,
+};
+
+// 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 EventCard> = {
+  title: "Events/EventCard",
+  component: EventCard,
+  tags: ["autodocs"],
+  args: { event, labels, formatters },
+  decorators: [
+    (Story) => (
+      <div className="w-[220px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Pass `href` **and** `onClick` in production: the anchor keeps the card crawlable and middle-clickable, while `onClick` (calling `preventDefault()`) opens the detail sheet. A card rendered as a bare `<button>` is what stripped every event link out of the hub's rendered DOM.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EventCard>;
+
+export const Default: Story = {};
+
+/** `entry_fee: 0` is explicitly free and earns the green pill. */
+export const FreeEntry: Story = {
+  args: { event: { ...event, entry_fee: 0 } },
+};
+
+/** An absent `entry_fee` is *unknown*, not free — no pill, no price. */
+export const UnknownEntryFee: Story = {
+  args: { event: { ...event, entry_fee: undefined } },
+};
+
+/** Overlay pills: hype badge top-left, category tag bottom-left. */
+export const WithBadgeAndTag: Story = {
+  args: {
+    event: { ...event, entry_fee: 0 },
+    badge: (
+      <>
+        <Flame className="h-3 w-3" aria-hidden />
+        Busy
+      </>
+    ),
+    tagLabel: (
+      <>
+        <Music className="h-3 w-3" aria-hidden />
+        Live music
+      </>
+    ),
+  },
+};
+
+/**
+ * `tags` — display labels rendered beneath the venue/meta line, distinct from
+ * `tagLabel`'s single overlay pill on the poster.
+ */
+export const WithTags: Story = {
+  args: { tags: ["Live Music", "Rock", "18+"] },
+};
+
+/** The live line is composed by the caller — clause order differs per locale. */
+export const LiveNow: Story = {
+  args: { liveStatus: "Live now · ends around 23:00" },
+};
+
+/** The featured slot: larger title. Still uncut. */
+export const Emphasis: Story = {
+  args: { emphasis: true },
+  decorators: [
+    (Story) => (
+      <div className="w-[320px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+const LONG_TITLE_EVENT: EventPreview = {
+  ...event,
+  title: "Movie Night: Futni må ikke være så vanskelig — an outdoor screening with live score",
+};
+
+/**
+ * THE TITLE IS NEVER TRUNCATED, in any variant. Real listings run long
+ * ("Movie Night: Futni m…", "Juventus vs AC Milan…" were the reported bug),
+ * and the title is the one thing the card exists to say. It wraps to as many
+ * lines as it needs and the card grows downward.
+ */
+export const LongTitle: Story = {
+  args: { event: LONG_TITLE_EVENT },
+};
+
+/** The same long title across every variant, so no combination quietly clips it. */
+export const LongTitleEveryVariant: Story = {
+  render: () => (
+    <div className="flex items-start gap-4">
+      <div className="w-[150px]">
+        <EventCard
+          event={LONG_TITLE_EVENT}
+          labels={labels}
+          formatters={formatters}
+          posterAspect="4/3"
+        />
+      </div>
+      <div className="w-[150px]">
+        <EventCard
+          event={LONG_TITLE_EVENT}
+          labels={labels}
+          formatters={formatters}
+          posterAspect="3/4"
+        />
+      </div>
+      <div className="w-[150px]">
+        <EventCard
+          event={LONG_TITLE_EVENT}
+          labels={labels}
+          formatters={formatters}
+          posterAspect="4/5"
+        />
+      </div>
+      <div className="w-[220px]">
+        <EventCard event={LONG_TITLE_EVENT} labels={labels} formatters={formatters} emphasis />
+      </div>
+    </div>
+  ),
+  decorators: [
+    (Story) => (
+      <div className="w-[760px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "`items-start` on the row is what keeps a three-line title from stretching its neighbours — the pattern any grid of these cards should copy.",
+      },
+    },
+  },
+};
+
+/** 3/4 poster — the hub's original portrait deck/rail/tape ratio. */
+export const PortraitPoster: Story = {
+  args: { posterAspect: "3/4", showPrice: true },
+};
+
+/**
+ * 4:3 (the house shape, shared with dish/drink/place) beside 4:5 (the
+ * Instagram source ratio, used by the hub's editorial poster surfaces —
+ * `CategoryDeck`, `PosterTape`, `Coverflow`). Side by side so the crop
+ * difference is visible rather than guessed at.
+ */
+export const HouseVsInstagramAspect: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <div className="w-[150px]">
+        <EventCard event={event} labels={labels} formatters={formatters} posterAspect="4/3" />
+      </div>
+      <div className="w-[150px]">
+        <EventCard event={event} labels={labels} formatters={formatters} posterAspect="4/5" />
+      </div>
+    </div>
+  ),
+  decorators: [
+    (Story) => (
+      <div className="w-[340px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** The timeline supplies its own hour heading, so the card drops the meta line. */
+export const InsideAnHourGroup: Story = {
+  args: { hideWhen: true },
+};
+
+/** Loading state — identical geometry to `Default`, so nothing shifts on data arrival. */
+export const Loading: Story = {
+  render: () => <EventCardSkeleton />,
+};
+
+/** Skeleton beside the real card, so any geometry drift is visible at a glance. */
+export const LoadingVsLoaded: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <EventCardSkeleton />
+      <EventCard event={event} labels={labels} formatters={formatters} />
+    </div>
+  ),
+  decorators: [
+    (Story) => (
+      <div className="w-[460px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** With a resolved poster. The caller composes the CDN URL; the DS never does. */
+export const WithPoster: Story = {
+  args: {
+    event: {
+      ...event,
+      poster_url:
+        "data:image/svg+xml;utf8," +
+        encodeURIComponent(
+          `<svg xmlns="http://www.w3.org/2000/svg" width="240" height="180"><rect width="240" height="180" fill="#c8b8a8"/><text x="50%" y="50%" font-family="monospace" font-size="12" fill="#5a4a3a" text-anchor="middle">poster</text></svg>`
+        ),
+    },
+  },
+};

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