@bearmenu/ui 0.8.17 → 0.8.19

package/src/components/timeline-day.stories.tsx

@@ -0,0 +1,201 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TimelineDay, TimelineDaySkeleton } from "./timeline-day";
+import { TimelineHour } from "./timeline-hour";
+import { EventCard } from "./event-card";
+import { EventDayHeader } from "./event-day-header";
+import type { EventCardLabels, EventFormatters, EventPreview } from "./event-types";
+
+const labels: EventCardLabels = { free: "Free", liveNow: "Live now" };
+
+const formatters: EventFormatters = {
+  time: (iso) => iso.slice(11, 16),
+  day: () => "Thu, Sep 3",
+  price: (amount) => `${amount} RON`,
+};
+
+const POSTER =
+  "https://images.unsplash.com/photo-1514525253161-7a46d19cd819?w=640&q=70&auto=format&fit=crop";
+
+const event = (
+  id: string,
+  title: string,
+  place: string,
+  hour: string,
+  fee?: number,
+  poster = POSTER
+): EventPreview => ({
+  id,
+  title,
+  location: place,
+  place_name: place,
+  starts_at: `2026-09-03T${hour}:00`,
+  entry_fee: fee,
+  poster_url: poster,
+});
+
+const meta: Meta<typeof TimelineDay> = {
+  title: "Events/TimelineDay",
+  component: TimelineDay,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="mx-auto max-w-[1180px] bg-background px-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "One day of the timeline, ONE DOM for both viewports. Below `lg` it is a column of hours, each a `TimelineHour` with a gutter chip and the hour's cards. From `lg` the same nodes become lane │ spine │ content: the hour with `role=\"hero\"` is placed in the lane by the grid and pins, every other hour stations itself on the spine, and cards past the cap paint as rows (`EventCard density=\"row-lg\"`). Resize the canvas across 1024px to watch one tree change shape. `rows` counts the column-3 children.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TimelineDay>;
+
+function Card(props: {
+  ev: EventPreview;
+  emphasis?: boolean | "lg";
+  hideWhen?: boolean | "below-lg";
+  density?: "card" | "row-lg";
+  liveStatus?: string;
+  priority?: boolean;
+}) {
+  return (
+    <EventCard
+      event={props.ev}
+      labels={labels}
+      formatters={formatters}
+      emphasis={props.emphasis}
+      hideWhen={props.hideWhen ?? true}
+      density={props.density}
+      liveStatus={props.liveStatus}
+      showPrice
+      tags={["Live music", "Jazz"]}
+      href={`#${props.ev.id}`}
+      priority={props.priority}
+    />
+  );
+}
+
+/**
+ * A six-hour Friday with the hero in the middle: 19:00 opens, the 20:00 hero
+ * is lifted into the lane on desktop while its hour's other event stays as a
+ * continuation, later hours demote to rows past the cap, and a group of
+ * events the ingest never timed trails the day off the axis.
+ */
+export const FullDay: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3 py-6">
+      <EventDayHeader
+        dayNumber="03"
+        weekday="Thursday"
+        meta="September · 9 events · 1 live"
+        size="responsive"
+      />
+      <TimelineDay rows={6} laneTop="16px">
+        <TimelineHour time="19:00" countLabel="2 events">
+          <Card ev={event("a", "Vinyl night at the bar", "Joben Bistro", "19:00", 0)} priority />
+          <Card ev={event("b", "Pub quiz: nineties", "Klausen", "19:00", 20)} />
+        </TimelineHour>
+        <TimelineHour time="20:00" role="hero" isLive liveLabel="NOW ON" countLabel="1 event">
+          <Card
+            ev={event("c", "Subcarpați live — sold-out tour warm-up", "Form Space", "20:00", 60)}
+            emphasis="lg"
+            hideWhen="below-lg"
+            liveStatus="Live now · ends around 23:00"
+          />
+        </TimelineHour>
+        <TimelineHour time="20:00" role="continuation" isLive liveLabel="NOW ON" countLabel="1 event">
+          <Card ev={event("d", "Wine tasting: Dealu Mare", "Enoteca", "20:00", 90)} />
+        </TimelineHour>
+        <TimelineHour time="21:00" countLabel="3 events" layout="rows">
+          <Card ev={event("e", "Comedy open mic", "Flying Circus", "21:00", 25)} density="row-lg" />
+          <Card ev={event("f", "Techno: Berlin calling", "Mansion", "21:00", 40)} density="row-lg" />
+          <Card ev={event("g", "Salsa social", "Casa Tranzit", "21:00", 0)} density="row-lg" />
+        </TimelineHour>
+        <TimelineHour time="23:00" countLabel="1 event" layout="rows">
+          <Card ev={event("h", "Late-night jazz jam", "Jazz Club", "23:00")} density="row-lg" />
+        </TimelineHour>
+        <TimelineHour
+          time="Time to be confirmed"
+          role="unscheduled"
+          countLabel="1 event"
+          note="The venue has not published a start time."
+        >
+          <Card ev={event("i", "Board games afternoon", "Insomnia Café", "00:00", 0)} />
+        </TimelineHour>
+      </TimelineDay>
+    </div>
+  ),
+};
+
+/** A quiet Tuesday: one hour, one event, no hero — no lane on desktop either. */
+export const OneHour: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3 py-6">
+      <EventDayHeader dayNumber="08" weekday="Tuesday" meta="September · 1 event" size="responsive" />
+      <TimelineDay rows={1}>
+        <TimelineHour time="19:30" countLabel="1 event">
+          <Card ev={event("a", "Book club: Cărtărescu", "Cărturești", "19:30", 0)} priority />
+        </TimelineHour>
+      </TimelineDay>
+    </div>
+  ),
+};
+
+/**
+ * Two full days stacked, so the lane's pin and release can be watched at
+ * 1024 and 1440: scroll the canvas and the first day's poster holds until
+ * its column runs out, then the second day's takes over.
+ */
+export const StickyLane: Story = {
+  render: () => (
+    <div className="flex flex-col gap-10 py-6">
+      {["03", "04"].map((day) => (
+        <div key={day} className="flex flex-col gap-3">
+          <EventDayHeader
+            dayNumber={day}
+            weekday={day === "03" ? "Thursday" : "Friday"}
+            meta="September · 7 events"
+            size="responsive"
+          />
+          <TimelineDay rows={4} laneTop="16px">
+            <TimelineHour time="18:00" role="hero" countLabel="1 event">
+              <Card
+                ev={event(`${day}-hero`, "Headliner of the night", "Form Space", "18:00", 50)}
+                emphasis="lg"
+                hideWhen="below-lg"
+              />
+            </TimelineHour>
+            {["19:00", "20:00", "21:00", "22:00"].map((hour) => (
+              <TimelineHour key={hour} time={hour} countLabel="2 events" layout="rows">
+                <Card
+                  ev={event(`${day}-${hour}-1`, `Something at ${hour}`, "Klausen", hour, 20)}
+                  density="row-lg"
+                />
+                <Card
+                  ev={event(`${day}-${hour}-2`, `Something else at ${hour}`, "Joben", hour, 0)}
+                  density="row-lg"
+                />
+              </TimelineHour>
+            ))}
+          </TimelineDay>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const Skeleton: Story = {
+  render: () => (
+    <div className="py-6">
+      <TimelineDaySkeleton hourCount={3} />
+    </div>
+  ),
+};

package/src/components/timeline-day.test.tsx

@@ -0,0 +1,78 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { TimelineDay } from "./timeline-day";
+import { TimelineHour } from "./timeline-hour";
+
+describe("TimelineDay", () => {
+  it("renders every hour in source order, hero included, with one puck per stationed hour", () => {
+    const { container } = render(
+      <TimelineDay rows={2}>
+        <TimelineHour time="19:00" countLabel="1 event">
+          <p>Early</p>
+        </TimelineHour>
+        <TimelineHour time="20:00" role="hero">
+          <p>Hero</p>
+        </TimelineHour>
+        <TimelineHour time="21:00" countLabel="1 event">
+          <p>Late</p>
+        </TimelineHour>
+      </TimelineDay>
+    );
+
+    const hours = [...container.querySelectorAll("[data-timeline-hour]")];
+    expect(hours.map((hour) => hour.getAttribute("data-timeline-hour"))).toEqual([
+      "hour",
+      "hero",
+      "hour",
+    ]);
+    // Chronological in the DOM — the phone's visual order and the reading order.
+    expect(container.textContent).toMatch(/19:00[^]*Early[^]*20:00[^]*Hero[^]*21:00[^]*Late/);
+    expect(screen.getAllByText(/^\d\d:00$/)).toHaveLength(3);
+  });
+
+  it("sets the row count the lane and spine span", () => {
+    const { container } = render(
+      <TimelineDay rows={5} laneTop="120px">
+        <TimelineHour time="19:00">
+          <p>x</p>
+        </TimelineHour>
+      </TimelineDay>
+    );
+    const root = container.firstElementChild as HTMLElement;
+    expect(root.style.getPropertyValue("--timeline-rows")).toBe("5");
+    expect(root.style.getPropertyValue("--timeline-lane-top")).toBe("120px");
+  });
+
+  it("gives an unscheduled group an inline heading and no station", () => {
+    const { container } = render(
+      <TimelineDay rows={1}>
+        <TimelineHour time="Time to be confirmed" role="unscheduled" countLabel="2 events" note="No hour">
+          <p>a</p>
+          <p>b</p>
+        </TimelineHour>
+      </TimelineDay>
+    );
+    expect(screen.getByText("Time to be confirmed")).toBeInTheDocument();
+    expect(screen.getByText("2 events")).toBeInTheDocument();
+    expect(screen.getByText("No hour")).toBeInTheDocument();
+    expect(container.querySelector(".font-mono.tabular-nums.whitespace-nowrap")).toBeNull();
+  });
+
+  it("rules between rows but not between cards", () => {
+    const { container: rows } = render(
+      <TimelineHour time="21:00" layout="rows">
+        <p>a</p>
+        <p>b</p>
+      </TimelineHour>
+    );
+    const { container: cards } = render(
+      <TimelineHour time="21:00" layout="cards">
+        <p>a</p>
+        <p>b</p>
+      </TimelineHour>
+    );
+    // The hour's own hairline (vertical) plus the heading rule plus one between the two rows.
+    expect(rows.querySelectorAll('[data-orientation="horizontal"]').length).toBe(2);
+    expect(cards.querySelectorAll('[data-orientation="horizontal"]').length).toBe(1);
+  });
+});

package/src/components/timeline-day.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Separator } from "./separator";
+import { Skeleton } from "./skeleton";
+import { TimelineHourSkeleton } from "./timeline-hour";
+
+/**
+ * TimelineDay — one day's programme on the timeline: a column of
+ * `TimelineHour`s that becomes, from `lg`, the three-column row
+ * lane │ spine │ content that `TimelineBand` used to draw.
+ *
+ * ONE DOM FOR BOTH VIEWPORTS. `TimelineBand` took the lane as a prop — a
+ * second parent — which forced the consumer to render two trees and pick one
+ * in JavaScript, and a server render cannot pick. Here the lane is grid
+ * column 1, and the day's hero is an ordinary child in its chronological
+ * slot that the grid PLACES in that column from `lg` (see `TimelineHour`
+ * `role="hero"`). Source order is the phone's visual order, which is the
+ * primary surface and the one a screen reader gets on both.
+ *
+ * `rows` is the number of children that are NOT the hero — the column-3
+ * items. It sets `--timeline-rows`, which both the lane and the spine span,
+ * and the explicit row track count. It has to be a number the caller
+ * supplies: the grid needs the lane to cover every row so auto-placement
+ * never drops a later hour into the lane column, and this component cannot
+ * tell a hero child from an hour child without inspecting props.
+ *
+ * `laneTop` is the lane's sticky `top` as a CSS value. `position: sticky` on
+ * a grid item is bounded by its grid area — column 1, rows 1…N, the day's
+ * full height — so the poster holds while column 3 scrolls and releases when
+ * the day runs out, with no scroll listener and no measured height.
+ *
+ * The spine is a vertical `Separator` in column 2 spanning every row, drawn
+ * here so consumers never forget it; the pucks that sit on it are
+ * `TimelineHour`'s.
+ */
+
+export type TimelineDayProps = {
+  /** The column-3 children count — every child except the hero. */
+  rows: number;
+  /** Sticky `top` for the lane, as a CSS value. Omitted, the lane scrolls. */
+  laneTop?: string;
+  /** `TimelineHour`s, in chronological order, the hero among them. */
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function TimelineDay({ rows, laneTop, children, className }: TimelineDayProps) {
+  const style = {
+    "--timeline-rows": String(Math.max(rows, 1)),
+    ...(laneTop !== undefined ? { "--timeline-lane-top": laneTop } : {}),
+  } as React.CSSProperties;
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col",
+        "lg:grid lg:grid-cols-[var(--timeline-lane)_var(--timeline-spine)_minmax(0,1fr)]",
+        "lg:[grid-template-rows:repeat(var(--timeline-rows),auto)]",
+        className
+      )}
+      style={style}
+    >
+      <div
+        aria-hidden
+        className={cn(
+          "hidden lg:col-start-2 lg:row-start-1 lg:flex lg:justify-center lg:self-stretch",
+          "lg:[grid-row-end:span_var(--timeline-rows)]"
+        )}
+      >
+        <Separator orientation="vertical" className="h-full" />
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export type TimelineDaySkeletonProps = {
+  /** Hours to reserve space for. */
+  hourCount?: number;
+  className?: string;
+};
+
+/**
+ * Holds the day's geometry at both widths so nothing jumps when data lands:
+ * the phone's stacked hours, the desktop's lane / spine / grid.
+ */
+export function TimelineDaySkeleton({ hourCount = 2, className }: TimelineDaySkeletonProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "flex flex-col",
+        "lg:grid lg:grid-cols-[var(--timeline-lane)_var(--timeline-spine)_minmax(0,1fr)]",
+        "lg:[grid-template-rows:repeat(var(--timeline-rows),auto)]",
+        className
+      )}
+      style={{ "--timeline-rows": String(hourCount) } as React.CSSProperties}
+    >
+      <div className="hidden lg:col-start-1 lg:row-start-1 lg:flex lg:flex-col lg:gap-3 lg:pt-3.5 lg:[grid-row-end:span_var(--timeline-rows)]">
+        <Skeleton className="aspect-[3/4] w-full rounded-xl" />
+        <Skeleton className="h-[18px] w-[70%]" />
+        <Skeleton className="h-[13px] w-[45%]" />
+      </div>
+      <div className="hidden lg:col-start-2 lg:row-start-1 lg:flex lg:justify-center lg:self-stretch lg:[grid-row-end:span_var(--timeline-rows)]">
+        <Separator orientation="vertical" className="h-full" />
+      </div>
+      {Array.from({ length: hourCount }, (_, index) => (
+        <TimelineHourSkeleton key={index} cardCount={index === 0 ? 3 : 2} />
+      ))}
+    </div>
+  );
+}

package/src/components/timeline-hour-puck.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import * as React from "react";
+import { Radio } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * Ring pulse on the live puck — inherited from an earlier `TimelinePlayhead`,
+ * which carried this surface's only motion. Kept at its 2.4s `ease-in-out` and
+ * its reduced-motion kill switch, but BOX-SHADOW ONLY: a `transform: scale`
+ * would make the hairline visibly breathe here, because this puck sits ON the
+ * rail. (Today's `timeline-playhead.tsx` is static and sits between bands.)
+ */
+const LIVE_PUCK_PULSE_CLASS = "bm-timeline-live-puck-pulse";
+
+/**
+ * The phone axis gutter, shared by `TimelineHour` and `TimelinePlayhead` so
+ * the hour chips and the current-time label sit in one column. 58px is the
+ * width of a five-glyph 24-hour label ("20:00") in the chip's mono type plus
+ * its padding; a 12-hour locale's "09:00 AM" overflows it, which is one of the
+ * reasons the events surfaces format 24-hour everywhere.
+ */
+export const TIMELINE_MOBILE_GUTTER_CLASS = "w-[58px]";
+
+export type TimelineHourPuckProps = {
+  /** The hour, already formatted and localised — or an em dash for a quiet day. */
+  time: string;
+  /** Marks this as the hour currently in progress. */
+  isLive?: boolean;
+  /** Shown under the puck when live, e.g. "NOW ON". Required to render it. */
+  liveLabel?: string;
+  /**
+   * `station`: the bordered puck that sits ON the hairline, for the desktop
+   * spine. `chip`: a filled, fixed-width lozenge with the hairline starting
+   * BELOW it, for the phone gutter — an app's time label, not a station on a
+   * rail. `responsive` (the default): the chip below `lg`, the station from
+   * `lg` — ONE node that changes its look with the viewport, so a
+   * server-rendered timeline carries a single DOM for both widths. In the
+   * chip look the live label is visually hidden: the tinted chip plus a small
+   * on-air glyph are the visible signal (the glyph so the state never rests on
+   * colour alone once the pulse is reduced away) and the label stays for
+   * screen readers only.
+   */
+  variant?: "station" | "chip" | "responsive";
+  className?: string;
+};
+
+/**
+ * The station on the timeline's axis — ONE object, positioned by its host
+ * (`TimelineHour`): pinned to the top of the phone gutter, centred on the
+ * hour's heading rule out on the desktop spine.
+ *
+ * The `bg-background` fill punches through the hairline so the rail reads as
+ * continuous behind the label rather than butting into it.
+ *
+ * The live label is absolutely positioned rather than a flex sibling: hosts
+ * centre this puck with `-translate-y-1/2`, and a two-item column would centre
+ * the STACK, lifting the puck off the line it exists to sit on.
+ */
+export function TimelineHourPuck({
+  time,
+  isLive,
+  liveLabel,
+  variant = "responsive",
+  className,
+}: TimelineHourPuckProps) {
+  const chipClasses = cn(
+    "inline-flex h-6 min-w-[58px] items-center justify-center gap-1 rounded-[7px] border border-transparent px-1 text-[12px] font-medium",
+    isLive ? cn("bg-success/10 text-success", LIVE_PUCK_PULSE_CLASS) : "bg-muted text-foreground"
+  );
+  const stationClasses = cn(
+    "rounded-[7px] border bg-background px-[7px] py-[3px] text-[12.5px] font-medium",
+    isLive ? cn("border-success/40 text-success", LIVE_PUCK_PULSE_CLASS) : "border-border text-foreground"
+  );
+  const glyphClasses = "h-2.5 w-2.5 shrink-0";
+  const labelHiddenClasses = "sr-only";
+  const labelStationClasses = cn(
+    "absolute top-[calc(100%+6px)] whitespace-nowrap bg-background px-1",
+    "text-[9.5px] font-extrabold tracking-[0.08em] text-success"
+  );
+  // `sr-only` spelled out property by property so every one has an `lg:`
+  // twin — this project's Tailwind emits no `max-*` queries, and `lg:not-sr-only`
+  // would reset `position` under the `absolute` the station needs.
+  const labelResponsiveClasses = cn(
+    "absolute -m-px h-px w-px overflow-hidden whitespace-nowrap p-0 [clip:rect(0,0,0,0)]",
+    "lg:m-0 lg:h-auto lg:w-auto lg:overflow-visible lg:px-1 lg:[clip:auto]",
+    "lg:top-[calc(100%+6px)] lg:bg-background lg:text-[9.5px] lg:font-extrabold lg:tracking-[0.08em] lg:text-success"
+  );
+
+  return (
+    <span className={cn("relative flex justify-center", className)}>
+      {isLive && (
+        <style>{`
+          @keyframes ${LIVE_PUCK_PULSE_CLASS} {
+            0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--success) 40%, transparent); }
+            50% { box-shadow: 0 0 0 4px color-mix(in oklch, var(--success) 0%, transparent); }
+          }
+          .${LIVE_PUCK_PULSE_CLASS} {
+            animation: ${LIVE_PUCK_PULSE_CLASS} 2.4s ease-in-out infinite;
+          }
+          @media (prefers-reduced-motion: reduce) {
+            .${LIVE_PUCK_PULSE_CLASS} { animation: none; }
+          }
+        `}</style>
+      )}
+      <span
+        className={cn(
+          "whitespace-nowrap font-mono tabular-nums",
+          variant === "chip" && chipClasses,
+          variant === "station" && stationClasses,
+          variant === "responsive" &&
+            cn(
+              chipClasses,
+              // The station look from `lg`: bordered, background-filled,
+              // content-width. Every chip utility above has an `lg:` twin.
+              // `min-w-max`, NOT `min-w-0`: the host centres the puck inside
+              // a zero-width flex box, and a flex item allowed to shrink to 0
+              // collapses to a 24px square behind its own text.
+              "lg:h-auto lg:min-w-max lg:shrink-0 lg:gap-0 lg:border-border lg:bg-background lg:px-[7px] lg:py-[3px] lg:text-[12.5px] lg:text-foreground",
+              isLive && "lg:border-success/40 lg:bg-background lg:text-success"
+            )
+        )}
+      >
+        {isLive && variant !== "station" && (
+          <Radio className={cn(glyphClasses, variant === "responsive" && "lg:hidden")} aria-hidden />
+        )}
+        {time}
+      </span>
+      {isLive && !!liveLabel && (
+        <span
+          className={cn(
+            variant === "chip" && labelHiddenClasses,
+            variant === "station" && labelStationClasses,
+            variant === "responsive" && labelResponsiveClasses
+          )}
+        >
+          {liveLabel}
+        </span>
+      )}
+    </span>
+  );
+}