@bearmenu/ui 0.8.3 → 0.8.6

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

@@ -0,0 +1,268 @@
+"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. */
+  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 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 && (
+                <>
+                  <span className="font-mono tabular-nums">{formatters.time(event.starts_at)}</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>
+  ),
+};

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

@@ -0,0 +1,180 @@
+"use client";
+
+import * as React from "react";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./skeleton";
+
+/**
+ * EventDayHeader — the day divider in the timeline: an oversized day number,
+ * the weekday, and a meta line.
+ *
+ * The meta line is ONE caller-composed string. The design's variants
+ * ("September · 15 events · 3 live", "September · nothing listed yet",
+ * "September · 2 of 23 are free") do not decompose into counts, and building
+ * them from parts inside the DS would bake in English clause order.
+ *
+ * A day with nothing on still gets a header — the empty state belongs under it,
+ * not instead of it, so the reader can see the date they are looking at.
+ */
+
+export type EventDayHeaderLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+};
+
+function DefaultLink({ href, ...props }: EventDayHeaderLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type EventDayHeaderProps = {
+  /** Day of month as displayed, e.g. "03". */
+  dayNumber: string;
+  /** Weekday name, already localised. */
+  weekday: string;
+  /** Month plus counts, composed by the caller. */
+  meta: string;
+  /**
+   * Trailing slot, right-aligned. The desktop design puts a "See the whole day →"
+   * chip here; mobile has no slot and falls back to the chevron below. Passing an
+   * action REPLACES the chevron rather than sitting beside it — two affordances
+   * for one destination is the duplication this design set out to remove.
+   *
+   * The action is rendered outside the header's own link/button when the header
+   * is itself interactive, so an interactive chip is never nested inside an
+   * anchor (invalid HTML, and it steals the row's click target).
+   */
+  action?: React.ReactNode;
+  /**
+   * Larger desktop scale: 58px day number, 18px weekday, 12.5px meta,
+   * against the mobile 40/15/11.5.
+   */
+  size?: "sm" | "default";
+  href?: string;
+  linkComponent?: React.ComponentType<EventDayHeaderLinkProps>;
+  onClick?: () => void;
+  className?: string;
+};
+
+export function EventDayHeader({
+  dayNumber,
+  weekday,
+  meta,
+  action,
+  size = "sm",
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className,
+}: EventDayHeaderProps) {
+  const isInteractive = !!href || !!onClick;
+  const large = size === "default";
+
+  const body = (
+    <>
+      <div
+        className={cn(
+          "font-black leading-[0.82] tracking-[-0.05em] tabular-nums",
+          large ? "text-[58px]" : "text-[40px]"
+        )}
+      >
+        {dayNumber}
+      </div>
+      <div className={large ? "pb-1" : "pb-0.5"}>
+        <div
+          className={cn("font-extrabold tracking-[-0.015em]", large ? "text-lg" : "text-[15px]")}
+        >
+          {weekday}
+        </div>
+        <div
+          className={cn(
+            "mt-0.5 text-muted-foreground",
+            large ? "whitespace-nowrap text-[12.5px]" : "text-[11.5px]"
+          )}
+        >
+          {meta}
+        </div>
+      </div>
+      {/* The chevron only stands in when there is no action slot — see `action`. */}
+      {!action && isInteractive && (
+        <ChevronRight className="ml-auto mb-1 h-[18px] w-[18px] text-muted-foreground" aria-hidden />
+      )}
+    </>
+  );
+
+  // The interactive region covers the date only, never the action slot. Nesting
+  // the design's "See the whole day" chip inside the header's own anchor would
+  // be invalid HTML and would swallow the chip's click.
+  const dateClasses = cn(
+    "flex min-w-0 items-end gap-3 text-left",
+    !action && "flex-1",
+    isInteractive &&
+      "cursor-pointer rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+  );
+
+  const date = href ? (
+    <LinkComponent href={href} className={dateClasses}>
+      {body}
+    </LinkComponent>
+  ) : onClick ? (
+    <button type="button" className={dateClasses} onClick={onClick}>
+      {body}
+    </button>
+  ) : (
+    <div className={dateClasses}>{body}</div>
+  );
+
+  return (
+    <div
+      className={cn(
+        "relative flex w-full items-end gap-3 pb-3 pt-[18px]",
+        large && "gap-[18px] pb-4",
+        className
+      )}
+    >
+      {/* NO BOTTOM RULE. A 50px day number above its own month/count line is
+          already the loudest thing on the page, and the timeline puts an hour
+          puck carrying its own hairline immediately beneath — so this drew a
+          second horizontal line a few pixels from a first, dividing a heading
+          from the content it introduces rather than separating two things a
+          reader could run together. Rules stay where they divide peers: rows
+          in a list, an hour heading from its count. */}
+      {date}
+      {action && <div className="ml-auto mb-1.5 shrink-0">{action}</div>}
+    </div>
+  );
+}
+
+export type EventDayHeaderSkeletonProps = {
+  /** Reserves space for the chevron — only render this once you know the header will be tappable. */
+  interactive?: boolean;
+  className?: string;
+};
+
+/**
+ * Mirrors `<EventDayHeader>`'s geometry. The big day-number block (86×50,
+ * 10px radius) and the weekday/meta column (120×16, 200×12) come from the
+ * source design's own desktop day-header skeleton — the chevron does not: the
+ * design's spec for it (a 170×34 pill pushed right) matches nothing in this
+ * component, whose only trailing affordance is an 18×18 chevron icon, so that
+ * placeholder is sized from the real component instead.
+ */
+export function EventDayHeaderSkeleton({ interactive, className }: EventDayHeaderSkeletonProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn("relative flex w-full items-end gap-3 pb-3 pt-[18px] text-left", className)}
+    >
+      {/* Mirrors the real header, which no longer draws a bottom rule. */}
+      <Skeleton className="h-[50px] w-[86px] rounded-[10px]" />
+
+      <div className="space-y-0.5 pb-0.5">
+        <Skeleton className="h-4 w-[120px]" />
+        <Skeleton className="h-3 w-[200px]" />
+      </div>
+
+      {interactive && <Skeleton className="mb-1 ml-auto h-[18px] w-[18px] shrink-0 rounded-full" />}
+    </div>
+  );
+}

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

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EventDaySeparator, EventDaySeparatorSkeleton } from "./event-day-separator";
+
+const meta: Meta<typeof EventDaySeparator> = {
+  title: "Events/EventDaySeparator",
+  component: EventDaySeparator,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[600px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The day divider in the list view. Distinct from `<EventDayHeader>` (the timeline's oversized day-number header) — different surface, different density. Both `label` and `count` are caller-composed strings.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EventDaySeparator>;
+
+export const Default: Story = {
+  args: { label: "Today · Thursday 3 September", count: "15 events" },
+};
+
+export const NoCount: Story = {
+  args: { label: "Friday 4 September" },
+};
+
+export const Small: Story = {
+  args: { label: "Today · Thursday 3 September", count: "15 events", size: "sm" },
+};
+
+/** Loading state — identical geometry to `Default`, so nothing shifts on data arrival. */
+export const Loading: Story = {
+  render: () => <EventDaySeparatorSkeleton />,
+};
+
+/** The `size="sm"` loading geometry. */
+export const LoadingSmall: Story = {
+  render: () => <EventDaySeparatorSkeleton size="sm" />,
+};
+
+/** Loading above loaded, so any geometry drift is visible at a glance. */
+export const LoadingVsLoaded: Story = {
+  render: () => (
+    <div>
+      <EventDaySeparatorSkeleton />
+      <EventDaySeparator label="Today · Thursday 3 September" count="15 events" />
+    </div>
+  ),
+};
+
+/** A stack, as the list view actually renders consecutive days. */
+export const Stack: Story = {
+  render: () => (
+    <div>
+      <EventDaySeparator label="Today · Thursday 3 September" count="15 events" />
+      <div className="py-2 text-sm text-muted-foreground">…events for today…</div>
+      <EventDaySeparator label="Friday 4 September" count="17 events" />
+      <div className="py-2 text-sm text-muted-foreground">…events for tomorrow…</div>
+    </div>
+  ),
+};