@bearmenu/ui 0.8.4 → 0.8.7

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

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

@@ -0,0 +1,51 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { EventCompactRow } from "./event-compact-row";
+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 event: EventPreview = {
+  id: "e1",
+  title: "Psihotrop Live",
+  location: "Atelier Cafe",
+  starts_at: "2026-09-05T20:00:00Z",
+  place_name: "Atelier Cafe",
+};
+
+describe("EventCompactRow sub line", () => {
+  it("leads with the time and the venue by default", () => {
+    const { container } = render(
+      <EventCompactRow event={event} labels={labels} formatters={formatters} />
+    );
+    expect(screen.getByText("20:00")).toBeInTheDocument();
+    expect(container.textContent).toContain("·");
+    expect(screen.getByText("Atelier Cafe")).toBeInTheDocument();
+  });
+
+  it("prints the venue alone when the time formatter returns an empty string (hour unknown)", () => {
+    const { container } = render(
+      <EventCompactRow
+        event={event}
+        labels={labels}
+        formatters={{ ...formatters, time: () => "" }}
+      />
+    );
+    expect(container.textContent).not.toContain("·");
+    expect(screen.getByText("Atelier Cafe")).toBeInTheDocument();
+  });
+
+  it("still honours hideTime for callers that know the hour is stated elsewhere", () => {
+    const { container } = render(
+      <EventCompactRow event={event} labels={labels} formatters={formatters} hideTime />
+    );
+    expect(container.textContent).not.toContain("20:00");
+    expect(container.textContent).not.toContain("·");
+  });
+});

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

@@ -0,0 +1,270 @@
+"use client";
+
+import { memo, useState } from "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";
+
+/**
+ * EventCompactRow — the dense row used inside `<HourGroup>` once the night
+ * thins out and a run of poster cards would spend more space than it earns.
+ *
+ * NOT `<EventListRow>`: that one carries a date badge and a trailing CTA for
+ * the list view. This row has neither — the timeline's `<HourGroup>` already
+ * names the hour, and every row here means "open me", same as the poster
+ * card. `hideTime` drops the leading time from the sub line too, for the
+ * common case where the surrounding heading already names it to the minute.
+ *
+ * THIS ROW DOES NOT DRAW DIVIDERS; ITS CONTAINER DOES. `<HourGroup>` already
+ * draws the rule under the hour heading, so a row-level top separator here
+ * doubled it directly beneath every hour. `<EventListRow>` and
+ * `<EventListRowWide>` are different: they stack in a plain list with no
+ * other rule around them, so their own top separator is the only one there —
+ * do not carry this rule over to them.
+ *
+ * Same contract as the rest: DS-owned view model, injected labels/formatters,
+ * plain `<img>`, anchor whenever `href` is given.
+ */
+
+export type EventCompactRowLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+  onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+
+function DefaultLink({ href, ...props }: EventCompactRowLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type EventCompactRowProps = {
+  event: EventPreview;
+  labels: EventCardLabels;
+  formatters: EventFormatters;
+  /** Drops the leading time from the sub line. An empty `formatters.time`
+   *  result (hour unknown) drops it the same way, without the prop. */
+  hideTime?: boolean;
+  /**
+   * Replaces the default "time · venue" sub-line entirely. For surfaces where
+   * the venue is already named above every row (the hub's venue block) and
+   * repeating it on each one is noise — the caller has something more
+   * differentiating to say instead (the event's own description). The
+   * timeline keeps the default: there the venue IS what tells rows apart
+   * across the night. Mirrors `menu-item-row.tsx`'s prop of the same name and
+   * intent.
+   */
+  subtitle?: string;
+  /** Caller-supplied display labels — `EventPreview.tags` is taxonomy
+   *  coordinates (`slug`/`axis_slug`), not display text, so the DS cannot
+   *  render them itself. Rendered as small chips below the sub-line; wrap
+   *  rather than truncate, so a chip's own text is never cut mid-word. Cap
+   *  the count at the call site — this row does not. */
+  tags?: string[];
+  size?: "sm" | "default";
+  href?: string;
+  linkComponent?: React.ComponentType<EventCompactRowLinkProps>;
+  onClick?: (event: EventPreview, mouseEvent: React.MouseEvent) => void;
+  className?: string;
+  /** Forwarded to the poster's `loading` attribute (`"eager"` when true). */
+  priority?: boolean;
+  /** Rendered in place of the poster when it is absent or fails to load. Defaults to `<EventPosterFallback />`. */
+  fallback?: React.ReactNode;
+};
+
+export const EventCompactRow = memo(function EventCompactRow({
+  event,
+  labels,
+  formatters,
+  hideTime,
+  subtitle,
+  tags,
+  size = "default",
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className,
+  priority,
+  fallback = <EventPosterFallback />,
+}: EventCompactRowProps) {
+  const [imgError, setImgError] = useState(false);
+  const isSm = size === "sm";
+
+  const fee = resolveEventEntryFee(event);
+  const showPoster = !!event.poster_url && !imgError;
+  const venue = event.place_name ?? event.location;
+  const time = formatters.time(event.starts_at);
+
+  const body = (
+    <>
+      {/* 64x80 AND PORTRAIT, not a 34px square, and both parts matter.
+          91% of the posters this renders are portrait and ~57% are Instagram's
+          4:5 — so a square crop kept the middle band and threw away the top and
+          bottom, which on a flyer is exactly where the act, the venue and the
+          date sit. The complaint was that the thumbnail was unreadable, and it
+          was unreadable because of what the crop removed as much as the size.
+          `4/5` is the least-cropping ratio this DS has, and `event-card.tsx`
+          already reserves it for surfaces whose job is to sell the poster.
+
+          One size for both `sm` and `default`: no consumer passes `sm` today,
+          and the failure is identical on a phone, so there is no second number
+          to justify. `size` still drives type scale and pill height. */}
+      <div className="relative aspect-[4/5] w-16 shrink-0 overflow-hidden rounded-[9px] 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)}
+          />
+        ) : (
+          // A bare `bg-muted` rectangle was survivable at 34px. At 64x80 beside
+          // real posters it reads as a broken image rather than an absent one —
+          // so this row finally joins every sibling in the family in having a
+          // designed fallback.
+          fallback
+        )}
+      </div>
+
+      <div className="min-w-0 flex-1">
+        {/* The title wraps in full — never truncated, in this row or any of
+            its siblings. The sub-line below it keeps its `truncate`: that one
+            is "20:00 · Venue", where the leading fact survives the cut and the
+            row's own height is what the density buys. */}
+        {/* `group-hover`, not `hover`: the whole row is one anchor, so the
+            pointer is over the parent and a plain `hover:` here would never
+            fire. */}
+        <div
+          className={cn(
+            "font-semibold leading-[1.35]",
+            "transition-colors duration-150 motion-reduce:transition-none",
+            isSm ? "text-[13.5px]" : "text-[13px]",
+            (href || onClick) && "group-hover:text-primary"
+          )}
+        >
+          {event.title}
+        </div>
+        <div className="truncate text-[11.5px] text-muted-foreground">
+          {subtitle ? (
+            subtitle
+          ) : (
+            <>
+              {!hideTime && time && (
+                <>
+                  <span className="font-mono tabular-nums">{time}</span>
+                  <span aria-hidden> · </span>
+                </>
+              )}
+              {venue}
+            </>
+          )}
+        </div>
+        {tags && tags.length > 0 && (
+          <TagGroup className="mt-1">
+            {tags.map((tag) => (
+              <Tag key={tag} size="sm">
+                {tag}
+              </Tag>
+            ))}
+          </TagGroup>
+        )}
+      </div>
+
+      {fee.kind === "free" && (
+        <span
+          className={cn(
+            "inline-flex shrink-0 items-center rounded-full border border-success/40 px-2 font-semibold text-success",
+            isSm ? "h-[22px] text-[10.5px]" : "h-6 text-[11px]"
+          )}
+        >
+          {labels.free}
+        </span>
+      )}
+    </>
+  );
+
+  // `items-start`, not `items-center`: an 80px poster is taller than a one-line
+  // title over its sub-line, so centring floated the text in empty space.
+  // `EventListRow` already made this call at its own 72px poster.
+  //
+  // THE HOVER WASH IS `bg-foreground/5`, AND THE TOKEN CHOICE IS LOAD-BEARING.
+  // This row renders on two different planes: the timeline puts it straight on
+  // `--background`, the hub's venue block puts it inside an elevated `Card`, so
+  // on `--card`. `hover:bg-card/60` — the obvious thing to copy from the
+  // nearest sibling — is a no-op on the second one, card blended onto card. And
+  // `bg-muted/50` is nearly invisible on `--card` in dark mode (an L delta of
+  // 0.015). A wash relative to the TEXT colour is surface-agnostic by
+  // construction, and lands at ~0.04 L on all four surface/mode combinations.
+  //
+  // The negative margin cancels the padding, so the fill bleeds past the text
+  // column and takes a radius without changing the row's content width — the
+  // same shape `EventIndexRow` uses. No transform: this is a zero-gap stacked
+  // list, so a lift would overlap its neighbours rather than read as elevation.
+  const rootClasses = cn(
+    "group relative -mx-2.5 flex w-full items-start gap-[11px] rounded-lg px-2.5 py-2 text-left",
+    "transition-colors duration-150 motion-reduce:transition-none",
+    (href || onClick) &&
+      "cursor-pointer hover:bg-foreground/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    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 EventCompactRowSkeletonProps = {
+  /** Matches `EventCompactRowProps["size"]` — keep the poster and title sizes in step. */
+  size?: "sm" | "default";
+  className?: string;
+};
+
+/** Mirrors `<EventCompactRow>`'s geometry exactly so nothing shifts when data lands. */
+export function EventCompactRowSkeleton({ size = "default", className }: EventCompactRowSkeletonProps) {
+  const isSm = size === "sm";
+
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "relative -mx-2.5 flex w-full items-start gap-[11px] rounded-lg px-2.5 py-2 text-left",
+        className
+      )}
+    >
+      <Skeleton className="aspect-[4/5] w-16 shrink-0 rounded-[9px]" />
+
+      <div className="min-w-0 flex-1">
+        <Skeleton className={cn(isSm ? "h-[13.5px]" : "h-[13px]", "w-2/5")} />
+        <Skeleton className="mt-0.5 h-[11.5px] w-1/3" />
+      </div>
+    </div>
+  );
+}

package/src/components/event-day-header.stories.tsx

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ArrowRight, PanelRightOpen } from "lucide-react";
+import { EventDayHeader, EventDayHeaderSkeleton } from "./event-day-header";
+
+const meta: Meta<typeof EventDayHeader> = {
+  title: "Events/EventDayHeader",
+  component: EventDayHeader,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[358px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The day divider in the timeline. Its meta line is one caller-composed string — the design's variants don't decompose into counts, and assembling them inside the DS would bake in English clause order.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EventDayHeader>;
+
+export const Today: Story = {
+  args: { dayNumber: "03", weekday: "Thursday", meta: "September · 15 events · 3 live" },
+};
+
+export const BusyDay: Story = {
+  args: { dayNumber: "05", weekday: "Saturday", meta: "September · 23 events" },
+};
+
+export const OneEvent: Story = {
+  args: { dayNumber: "08", weekday: "Tuesday", meta: "September · 1 event" },
+};
+
+/** A day with nothing on still gets a header — the empty state goes under it. */
+export const NothingListed: Story = {
+  args: { dayNumber: "11", weekday: "Friday", meta: "September · nothing listed yet" },
+};
+
+/** Under an active filter the meta line reports the filtered count against the whole. */
+export const Filtered: Story = {
+  args: { dayNumber: "05", weekday: "Saturday", meta: "September · 2 of 23 are free" },
+};
+
+/** Tappable days get a chevron; static ones don't. */
+export const Tappable: Story = {
+  args: {
+    dayNumber: "06",
+    weekday: "Sunday",
+    meta: "September · 10 events",
+    onClick: () => {},
+  },
+};
+
+/** Romanian, to check the meta line and weekday don't assume English width. */
+export const Romanian: Story = {
+  args: { dayNumber: "05", weekday: "Sâmbătă", meta: "Septembrie · 23 de evenimente · 3 live" },
+};
+
+/** Loading state — identical geometry to `Today`, so nothing shifts on data arrival. */
+export const Loading: Story = {
+  render: () => <EventDayHeaderSkeleton />,
+};
+
+/** Reserves the chevron's space for a header that will end up tappable. */
+export const LoadingInteractive: Story = {
+  render: () => <EventDayHeaderSkeleton interactive />,
+};
+
+/** Loading above loaded, so any geometry drift is visible at a glance. */
+export const LoadingVsLoaded: Story = {
+  render: () => (
+    <div>
+      <EventDayHeaderSkeleton />
+      <EventDayHeader dayNumber="03" weekday="Thursday" meta="September · 15 events · 3 live" />
+    </div>
+  ),
+};
+
+/**
+ * Desktop scale: 58px day number, 18px weekday, and the "See the whole day"
+ * action chip the design puts in the trailing slot. The chip REPLACES the
+ * chevron — two affordances for one destination is the duplication this design
+ * set out to remove — and it renders outside the header's own link, so it is
+ * never an interactive element nested inside an anchor.
+ */
+export const DesktopWithAction: Story = {
+  render: () => (
+    <div className="w-[860px]">
+      <EventDayHeader
+        size="default"
+        dayNumber="03"
+        weekday="Thursday"
+        meta="September · 15 events · 3 live right now"
+        href="/events/schedule?day=2026-09-03"
+        action={
+          <button
+            type="button"
+            className="inline-flex h-9 items-center gap-1.5 rounded-full border border-border bg-card px-4 text-sm font-semibold"
+          >
+            <PanelRightOpen className="h-3.5 w-3.5" aria-hidden />
+            See the whole day
+            <ArrowRight className="h-3.5 w-3.5" aria-hidden />
+          </button>
+        }
+      />
+    </div>
+  ),
+};
+
+/** Desktop scale with no action — a quiet day the reader cannot drill into. */
+export const DesktopPlain: Story = {
+  render: () => (
+    <div className="w-[860px]">
+      <EventDayHeader size="default" dayNumber="11" weekday="Friday" meta="September · nothing listed yet" />
+    </div>
+  ),
+};