@bearmenu/ui 0.8.4 → 0.8.7

package/src/components/hour-band.stories.tsx

@@ -0,0 +1,159 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { HourBand, HourBandSkeleton } from "./hour-band";
+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: () => "Thu, Sep 3",
+  price: (amount) => `${amount} RON`,
+};
+
+const event = (id: string, title: string, place: string, fee?: number): EventPreview => ({
+  id,
+  title,
+  location: place,
+  place_name: place,
+  starts_at: "2026-09-03T20:00:00",
+  entry_fee: fee,
+});
+
+const meta: Meta<typeof HourBand> = {
+  title: "Events/HourBand",
+  component: HourBand,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background px-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "One hour of the timeline: a 52px gutter with a hairline and an hour puck, and that hour's events beside it. The cards inside carry no timestamp of their own — the band is the timestamp, which is why they are rendered with `hideWhen`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HourBand>;
+
+export const Default: Story = {
+  args: {
+    time: "21:00",
+    children: (
+      <>
+        <EventCard
+          event={event("1", "Karaoke Night", "VIBE OffSeason")}
+          labels={labels}
+          formatters={formatters}
+          hideWhen
+        />
+        <EventCard
+          event={event("2", "Urban Sounds at Caro", "Caro", 0)}
+          labels={labels}
+          formatters={formatters}
+          hideWhen
+        />
+      </>
+    ),
+  },
+};
+
+/** The live hour: green-bordered puck, NOW label, and the content column shifted to clear it. */
+export const Live: Story = {
+  args: {
+    time: "20:00",
+    isLive: true,
+    liveLabel: "NOW ON",
+    children: (
+      <EventCard
+        event={event("3", "Psihotrop — From the Beginning to Infinity", "Atelier Café", 50)}
+        labels={labels}
+        formatters={formatters}
+        hideWhen
+        liveStatus="Live now · ends around 23:00"
+      />
+    ),
+  },
+};
+
+/** A single event in a quiet hour. */
+export const OneEvent: Story = {
+  args: {
+    time: "19:00",
+    children: (
+      <EventCard
+        event={event("4", "Quiz Night", "Flying Circus")}
+        labels={labels}
+        formatters={formatters}
+        hideWhen
+      />
+    ),
+  },
+};
+
+/** Consecutive bands — the hairline should read as one continuous axis. */
+export const StackedHours: Story = {
+  render: () => (
+    <>
+      <HourBand time="20:00" isLive liveLabel="NOW ON">
+        <EventCard
+          event={event("5", "Psihotrop Live", "Atelier Café", 50)}
+          labels={labels}
+          formatters={formatters}
+          hideWhen
+          liveStatus="Live now · ends around 23:00"
+        />
+      </HourBand>
+      <HourBand time="21:00">
+        <EventCard
+          event={event("6", "Charity Concert & Afterparty", "Flying Circus", 30)}
+          labels={labels}
+          formatters={formatters}
+          hideWhen
+        />
+      </HourBand>
+      <HourBand time="22:00">
+        <EventCard
+          event={event("7", "Schoolotheque Afterparty with Machedon", "Flying Circus", 25)}
+          labels={labels}
+          formatters={formatters}
+          hideWhen
+        />
+      </HourBand>
+    </>
+  ),
+};
+
+/**
+ * Loading. The puck is omitted rather than blocked out — the hour isn't known
+ * until data lands, and a grey lozenge sitting on the axis reads as a real but
+ * unreadable timestamp. The hairline alone still says "time axis".
+ */
+export const Loading: Story = {
+  render: () => <HourBandSkeleton />,
+};
+
+/** Loading beside loaded, so gutter and card geometry drift is visible at a glance. */
+export const LoadingVsLoaded: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-6">
+      <HourBandSkeleton cardCount={1} />
+      <HourBand time="21:00">
+        <EventCard
+          event={event("8", "Karaoke Night", "VIBE OffSeason")}
+          labels={labels}
+          formatters={formatters}
+          hideWhen
+        />
+      </HourBand>
+    </div>
+  ),
+};

package/src/components/hour-band.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Separator } from "./separator";
+import { Skeleton } from "./skeleton";
+import { TimelineHourPuck } from "./timeline-band";
+
+/**
+ * HourBand — one hour on the timeline's axis, with that hour's events beside it.
+ *
+ * The design's mobile timeline is deliberately plain: a 52px gutter carrying a
+ * hairline and an hour puck, and full-width cards to its right. Nothing else.
+ * The cards inside carry no timestamp of their own — this band IS the
+ * timestamp, which is why `EventCard` has `hideWhen`.
+ *
+ * The puck is the shared `TimelineHourPuck`, sitting ON the line with a
+ * background fill punching through it so the hairline reads as continuous
+ * behind the label. It used to be a second, hand-rolled copy of the desktop
+ * band's puck, and the two had drifted apart — this one borderless and
+ * `rounded-md px-1.5`, the desktop one bordered and `rounded-[7px] px-[7px]`.
+ * Sharing the object changes this gutter's pixels: the mobile puck now carries
+ * a border, which is what makes it read as clipped onto the rail rather than
+ * text floating over it, and matches the station on the desktop spine.
+ *
+ * `isLive` turns the puck green-bordered and reveals the NOW label beneath it,
+ * which is why live bands need extra top padding on the content column — the
+ * label occupies space the cards would otherwise start in.
+ *
+ * ── Why the gap is 24px and not 12px ──────────────────────────────────────
+ * THE PUCK IS WIDER THAN THE GUTTER IT SITS IN, and the gap is what absorbs
+ * the difference. A 12-hour locale renders "09:00 AM" — 8 monospace glyphs at
+ * 12.5px (~60px) plus `px-[7px]` twice and a border twice, so ~76px of puck
+ * centred on a 52px gutter, overflowing ~12px on each side. At the original
+ * `gap-3` that right-hand overflow exactly consumed the gap and the puck's
+ * edge landed ON the content column, which read as the hairline colliding
+ * with the rows beside it.
+ *
+ * 24px leaves ~12px of real clearance at the widest label. Do not tighten it
+ * back without re-deriving against a 12-hour locale: a 24-hour one ("09:00")
+ * is ~30px narrower and hides the problem completely.
+ */
+
+export type HourBandProps = {
+  /** The hour, already formatted and localised — "20:00". */
+  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;
+  /** The hour's events. */
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function HourBand({ time, isLive, liveLabel, children, className }: HourBandProps) {
+  const showLiveLabel = isLive && !!liveLabel;
+
+  return (
+    <div className={cn("flex gap-6 pt-[18px]", className)}>
+      <div className="relative flex w-[52px] shrink-0 justify-center">
+        <Separator orientation="vertical" className="h-full" />
+        <TimelineHourPuck
+          time={time}
+          isLive={isLive}
+          liveLabel={liveLabel}
+          className="absolute left-1/2 top-0 w-0"
+        />
+      </div>
+
+      <div
+        className={cn(
+          "flex min-w-0 flex-1 flex-col gap-5 pb-2",
+          showLiveLabel ? "pt-[34px]" : "pt-1"
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export type HourBandSkeletonProps = {
+  /** Cards to reserve space for. The design's loading frame shows two. */
+  cardCount?: number;
+  className?: string;
+};
+
+/**
+ * The mobile timeline's loading state, mirroring `HourBand` exactly — same 52px
+ * gutter, same hairline, same content gap — so nothing jumps when data lands.
+ *
+ * The puck is omitted rather than blocked out: the hour is not known until the
+ * data arrives, and a grey lozenge on the axis reads as a real, unreadable
+ * timestamp. The hairline alone still says "this is a time axis".
+ *
+ * Card footprints come from the design's own loading frame: a 220px poster with
+ * an 16px title bar and a 12px meta bar, then a 170px poster with a 15px title.
+ */
+export function HourBandSkeleton({ cardCount = 2, className }: HourBandSkeletonProps) {
+  const cards = [
+    { poster: 220, title: "80%", meta: "50%" },
+    { poster: 170, title: "70%", meta: null },
+  ];
+
+  return (
+    <div className={cn("flex gap-6 pt-[18px]", className)} aria-hidden="true">
+      <div className="relative flex w-[52px] shrink-0 justify-center">
+        <Separator orientation="vertical" className="h-full" />
+      </div>
+
+      <div className="flex min-w-0 flex-1 flex-col gap-5 pb-2 pt-1">
+        {Array.from({ length: cardCount }).map((_, index) => {
+          const card = cards[index % cards.length];
+          return (
+            <div key={index} className="flex flex-col gap-2.5">
+              <Skeleton className="w-full" style={{ height: card.poster }} />
+              <Skeleton className="h-4" style={{ width: card.title }} />
+              {card.meta && <Skeleton className="h-3" style={{ width: card.meta }} />}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/hour-group.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { HourGroup } from "./hour-group";
+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: (iso) => new Date(iso).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" }),
+  day: () => "Thu, Sep 3",
+  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 HourGroup> = {
+  title: "Events/HourGroup",
+  component: HourGroup,
+  tags: ["autodocs"],
+  args: { time: "21:00", countLabel: "3 events" },
+  decorators: [
+    (Story) => (
+      <div className="w-[420px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "An hour heading inside `<TimelineBand>`'s content column — a time, a rule, and a count — with that hour's rows beneath and an optional trailing note.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HourGroup>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <EventCompactRow
+          event={event("1", "Urban Sounds at Caro", "Caro", "2026-09-03T21:00:00", 0)}
+          labels={labels}
+          formatters={formatters}
+        />
+        <EventCompactRow
+          event={event("2", "Quiz Night", "Flying Circus", "2026-09-03T21:30:00")}
+          labels={labels}
+          formatters={formatters}
+        />
+      </>
+    ),
+  },
+};
+
+/** A trailing note after the rows, e.g. summarising overflow. */
+export const WithNote: Story = {
+  args: {
+    countLabel: "5 events",
+    note: "3 more not shown.",
+    children: (
+      <EventCompactRow
+        event={event("3", "COJO", "MATTER", "2026-09-03T21:00:00", 40)}
+        labels={labels}
+        formatters={formatters}
+      />
+    ),
+  },
+};
+
+/** No rows — a quiet hour still gets its heading. */
+export const Empty: Story = {
+  args: { countLabel: "0 events" },
+};
+
+/** The mobile variant — a half-step smaller, matching `HourBand`'s own top offset. */
+export const Small: Story = {
+  args: {
+    size: "sm",
+    children: (
+      <EventCompactRow
+        size="sm"
+        event={event("4", "Quiz Night", "Flying Circus", "2026-09-03T21:00:00")}
+        labels={labels}
+        formatters={formatters}
+      />
+    ),
+  },
+};

package/src/components/hour-group.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Separator } from "./separator";
+import { TimelineHourPuck } from "./timeline-band";
+
+/**
+ * HourGroup — an hour heading inside `<TimelineBand>`'s content column: a
+ * time, a rule, and a count, with that hour's rows beneath and an optional
+ * trailing note (e.g. "3 more not shown").
+ *
+ * ── `spine` — the desktop default ────────────────────────────────────────
+ * Inside a `<TimelineBand>`, pass `spine` and the hour renders as a
+ * `TimelineHourPuck` out ON the axis, centred on this heading's own rule,
+ * instead of as inline text at the head of the content column. Every hour of
+ * the day then reads as a station on the same rail, which is the entire point
+ * of the rail; the band itself no longer draws any hour, so there is nothing
+ * left to collide with.
+ *
+ * The offset is `calc(var(--timeline-spine) * -0.5)` — half the gutter, back
+ * from the content column's left edge, which lands on the hairline. Written
+ * with `*-0.5` rather than `/2` because a slash inside a Tailwind arbitrary
+ * value collides with the opacity-modifier parse. The `w-0` wrapper plus the
+ * puck's own `justify-center` is what centres it, so no `-translate-x-1/2` is
+ * needed and the live label centres on the same line for free.
+ *
+ * `spine` implies the inline time is suppressed — no caller should have to
+ * pass `spine hideTime` to avoid printing the hour twice.
+ *
+ * Keep the rule and the count. The rule is the only thing tying a puck to the
+ * rows it labels across the empty gutter; without it the puck reads as a
+ * sticker rather than a station on a track. The count carries information
+ * present nowhere else and terminates the rule so it doesn't dissolve.
+ *
+ * Where a group's rows already carry their own timestamps, `hideTime` drops the
+ * time and keeps the rule and count, so the hour is stated exactly once.
+ *
+ * `size="sm"` is the mobile variant, shrinking the type a half-step and
+ * matching `<HourBand>`'s own top offset (18px) rather than the desktop
+ * default (22px).
+ */
+
+export type HourGroupProps = {
+  /** The hour, already formatted and localised — "20:00". */
+  time: string;
+  /**
+   * Render the hour as a puck out on `<TimelineBand>`'s spine instead of as
+   * inline text. The desktop timeline's default; implies `hideTime`.
+   */
+  spine?: boolean;
+  /** Marks this hour as the one currently in progress. `spine` only. */
+  isLive?: boolean;
+  /** Shown under the puck when live, e.g. "NOW". `spine` only. */
+  liveLabel?: string;
+  /**
+   * Drop the leading time, keeping the rule and count. For groups whose rows
+   * state their own time.
+   */
+  hideTime?: boolean;
+  /** Caller-composed, e.g. "2 events" — mirrors `EventDayHeader`'s `meta`. */
+  countLabel: string;
+  /** Trailing note shown after the rows, e.g. "3 more not shown". */
+  note?: string;
+  /** The hour's rows. */
+  children?: React.ReactNode;
+  size?: "sm" | "default";
+  className?: string;
+};
+
+export function HourGroup({
+  time,
+  spine,
+  isLive,
+  liveLabel,
+  hideTime,
+  countLabel,
+  note,
+  children,
+  size = "default",
+  className,
+}: HourGroupProps) {
+  const isSm = size === "sm";
+
+  return (
+    // The group's top padding lives HERE, not on the heading row, and that is
+    // load-bearing for `spine`: `top-1/2` resolves against the heading row's
+    // PADDING box while `items-center` centres the rule in its CONTENT box, so
+    // with `pt-[22px]` on the row the puck landed 19.25px down and the rule at
+    // 30.25px — 11px apart, the puck visibly riding above the line it is
+    // supposed to sit on. Unpadded, both resolve against the same box and the
+    // puck's centre, the rule and the spine hairline are one line.
+    <div className={cn(isSm ? "pt-[18px]" : "pt-[22px]", className)}>
+      <div className={cn("flex items-center gap-2.5", spine && "relative")}>
+        {spine && (
+          <TimelineHourPuck
+            time={time}
+            isLive={isLive}
+            liveLabel={liveLabel}
+            className="absolute left-[calc(var(--timeline-spine)*-0.5)] top-1/2 w-0 -translate-y-1/2"
+          />
+        )}
+        {!hideTime && !spine && (
+          <span
+            className={cn(
+              "font-mono text-muted-foreground tabular-nums",
+              isSm ? "text-[11.5px]" : "text-xs"
+            )}
+          >
+            {time}
+          </span>
+        )}
+        <Separator className="flex-1" />
+        <span className={cn("text-muted-foreground/70", isSm ? "text-[10.5px]" : "text-[11px]")}>
+          {countLabel}
+        </span>
+      </div>
+
+      {children}
+
+      {note && <p className="pt-[9px] text-[11.5px] text-muted-foreground">{note}</p>}
+    </div>
+  );
+}

package/src/components/poster-stack.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PosterStack } from "./poster-stack";
+
+function posterDataUri(label: string, fill: string) {
+  return (
+    "data:image/svg+xml;utf8," +
+    encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400"><rect width="300" height="400" fill="${fill}"/><text x="50%" y="50%" font-family="monospace" font-size="20" fill="#fff" text-anchor="middle">${label}</text></svg>`
+    )
+  );
+}
+
+// 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 PosterStack> = {
+  title: "Events/PosterStack",
+  component: PosterStack,
+  tags: ["autodocs"],
+  args: {
+    posters: [
+      { src: posterDataUri("1", "#7a5c46"), alt: "Psihotrop poster" },
+      { src: posterDataUri("2", "#4a6a5c"), alt: "Warehouse rave poster" },
+      { src: posterDataUri("3", "#6a5c8a"), alt: "Jazz night poster" },
+    ],
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[500px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The float pauses via IntersectionObserver when scrolled off-screen and stops entirely under `prefers-reduced-motion: reduce`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PosterStack>;
+
+export const Default: Story = {};
+
+/** Fewer than three posters renders only the slots given. */
+export const TwoPosters: Story = {
+  args: {
+    posters: [
+      { src: posterDataUri("1", "#7a5c46"), alt: "Psihotrop poster" },
+      { src: posterDataUri("2", "#4a6a5c"), alt: "Warehouse rave poster" },
+    ],
+  },
+};
+
+/** No `src` renders the neutral placeholder block, same as `EventCard`. */
+export const MissingSources: Story = {
+  args: {
+    posters: [
+      { alt: "Psihotrop poster" },
+      { alt: "Warehouse rave poster" },
+      { alt: "Jazz night poster" },
+    ],
+  },
+};