@bearmenu/ui 0.8.17 → 0.8.19

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

@@ -1,206 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { ChevronDown, TimerOff } from "lucide-react";
-import { TimelineBand, TimelineBandSkeleton } from "./timeline-band";
-import { HourGroup } from "./hour-group";
-import { EventCompactRow } from "./event-compact-row";
-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 TimelineBand> = {
-  title: "Events/TimelineBand",
-  component: TimelineBand,
-  tags: ["autodocs"],
-  decorators: [
-    (Story) => (
-      <div className="w-[1180px] bg-background">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "The desktop timeline's three-column row — lane, spine, content — and the desktop counterpart of `<HourBand>`. The band draws the geometry and the hairline only: every hour on the axis is a puck emitted by its own `<HourGroup spine>`, so an hour appears exactly once and always on the spine. Pass an em dash as a group's `time` for a quiet day, so it still reads as a point on the axis rather than a gap in it.",
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof TimelineBand>;
-
-/**
- * THE FULL COMPOSITION, as the source design builds it. Density falls off left
- * to right and top to bottom: one feature poster in the lane, then a grid of
- * cards for the band's own hour, then compact rows for each later hour.
- *
- * EVERY hour is a station: each `HourGroup` carries `spine`, so 20:00, 21:00
- * and 22:00 all sit on the rail in the same grammar, each centred on its own
- * heading rule. The opening group passes `hideTime` implicitly via `spine` and
- * holds cards rather than rows — that is what the density ladder is, not a
- * difference in how the hour is drawn.
- */
-export const FullBand: Story = {
-  args: {
-    lane: (
-      <div className="flex flex-col gap-5 pt-3.5">
-        <EventCard
-          event={event("f", "Psihotrop — From the Beginning to Infinity", "Atelier Café", 50)}
-          labels={labels}
-          formatters={formatters}
-          emphasis
-          hideWhen
-          tagLabel="Live music"
-        />
-        <button
-          type="button"
-          className="inline-flex h-9 w-max items-center gap-1.5 rounded-full border border-border bg-card px-4 text-[13px] font-semibold"
-        >
-          <TimerOff className="h-3.5 w-3.5" aria-hidden />7 earlier events, 14:00 — 19:00
-          <ChevronDown className="h-3.5 w-3.5" aria-hidden />
-        </button>
-      </div>
-    ),
-    children: (
-      <>
-        {/* The opening hour: its own station, holding cards rather than rows. */}
-        <HourGroup spine time="20:00 — 20:30" countLabel="4 events">
-        <div className="grid grid-cols-3 gap-5 pt-3.5">
-          <EventCard
-            event={event("c1", "Quiz Night", "Flying Circus")}
-            labels={labels}
-            formatters={formatters}
-            hideWhen
-          />
-          <EventCard
-            event={event("c2", "Beer Battle", "Irish Music Pub", 0)}
-            labels={labels}
-            formatters={formatters}
-            hideWhen
-          />
-          <EventCard
-            event={event("c3", "COJO", "MATTER", 40)}
-            labels={labels}
-            formatters={formatters}
-            hideWhen
-          />
-        </div>
-        </HourGroup>
-
-        {/* Later hours thin out into rows — same station, denser content. */}
-        <HourGroup spine time="21:00" countLabel="2 events">
-          <EventCompactRow
-            event={event("r1", "Karaoke Night", "VIBE OffSeason")}
-            labels={labels}
-            formatters={formatters}
-          />
-          <EventCompactRow
-            event={event("r2", "Urban Sounds at Caro", "Caro", 0)}
-            labels={labels}
-            formatters={formatters}
-          />
-        </HourGroup>
-
-        <HourGroup spine time="22:00 — 23:00" countLabel="2 events">
-          <EventCompactRow
-            event={event("r3", "Schoolotheque Afterparty", "Flying Circus", 25)}
-            labels={labels}
-            formatters={formatters}
-          />
-          <EventCompactRow
-            event={event("r4", "Összerázó Party Vol. I", "After Eight", 30)}
-            labels={labels}
-            formatters={formatters}
-          />
-        </HourGroup>
-      </>
-    ),
-  },
-};
-
-/** A minimal band — one poster, one group of rows. */
-export const Default: Story = {
-  args: {
-    lane: (
-      <EventCard
-        event={event("1", "Karaoke Night", "VIBE OffSeason")}
-        labels={labels}
-        formatters={formatters}
-        posterAspect="4/3"
-        hideWhen
-      />
-    ),
-    children: (
-      <HourGroup spine time="21:00" countLabel="3 events">
-        <EventCompactRow
-          event={event("2", "Urban Sounds at Caro", "Caro", 0)}
-          labels={labels}
-          formatters={formatters}
-        />
-        <EventCompactRow
-          event={event("3", "Quiz Night", "Flying Circus")}
-          labels={labels}
-          formatters={formatters}
-        />
-      </HourGroup>
-    ),
-  },
-};
-
-/** The live hour: green-bordered puck, a slow ring pulse, and a NOW ON label
- *  beneath it. This is the ONLY live marker on the surface — there is no
- *  separate playhead printing a second, different time beside it. */
-export const Live: Story = {
-  args: {
-    lane: (
-      <EventCard
-        event={event("4", "Psihotrop — From the Beginning to Infinity", "Atelier Café", 50)}
-        labels={labels}
-        formatters={formatters}
-        posterAspect="4/3"
-        hideWhen
-        liveStatus="Live now · ends around 23:00"
-      />
-    ),
-    children: (
-      <HourGroup spine isLive liveLabel="NOW ON" time="20:00" countLabel="1 event">
-        <EventCompactRow
-          event={event("5", "Charity Concert & Afterparty", "Flying Circus", 30)}
-          labels={labels}
-          formatters={formatters}
-        />
-      </HourGroup>
-    ),
-  },
-};
-
-/** A quiet hour: an em dash on the axis, no lane content. */
-export const EmptyHour: Story = {
-  args: {
-    lane: null,
-    children: <HourGroup spine time="—" countLabel="0 events" note="Nothing listed yet." />,
-  },
-};
-
-/** Holds the lane/spine/content geometry so nothing jumps when data lands. */
-export const Skeleton: Story = {
-  render: () => <TimelineBandSkeleton />,
-};

package/src/components/timeline-band.tsx

@@ -1,247 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Radio } from "lucide-react";
-import { cn } from "../lib/utils";
-import { Separator } from "./separator";
-import { Skeleton } from "./skeleton";
-
-/**
- * TimelineBand — the desktop timeline's three-column row: lane │ spine │ content.
- *
- * Desktop counterpart of `<HourBand>`. Where the mobile timeline collapses the
- * axis into a 52px gutter beside full-width cards, the desktop layout gives the
- * poster its own lane (`--timeline-lane`), a dedicated spine
- * (`--timeline-spine`) carrying the hairline, and a separate content column for
- * whatever follows.
- *
- * ── The band does not draw hours ──────────────────────────────────────────
- * IT USED TO, and only for the hour it opened on. Every LATER hour was an
- * inline `HourGroup` heading in the content column instead, so one concept was
- * drawn in two grammars 48px apart — a bordered puck ON the axis at the top of
- * the day, bare muted text OFF it for the rest of it. An axis whose ticks are
- * labelled once is not an axis, and that is exactly how it read: the later
- * hours were harder to follow than the first.
- *
- * Now every hour is a station and `HourGroup` emits its own, via
- * `TimelineHourPuck` below. The band keeps the geometry and the hairline and
- * nothing else — which is also why `puckTop` is gone: each puck centres itself
- * on its own heading rule, so there is no magic offset left for a caller to
- * tune against a lane height.
- *
- * The invariant the old docblock was reaching for still holds, and states more
- * simply now: AN HOUR APPEARS EXACTLY ONCE, AND ALWAYS ON THE SPINE.
- *
- * HOW THE CONTENT COLUMN IS MEANT TO BE FILLED — the source design composes it
- * in tiers, and getting this wrong is what makes the band look flat:
- *
- *   lane      one feature card (an `EventCard` with `emphasis`), plus any
- *             "N earlier events" collapse control beneath it.
- *   content   an `<HourGroup spine>` per hour — the opening one holding a grid
- *             of `EventCard`s, later ones holding the denser
- *             `<EventCompactRow>` as the night thins out.
- *
- * So the density falls off across the row: one poster, then a few cards, then
- * rows.
- */
-
-/**
- * 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 mobile axis gutter, shared by `HourBand` 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` (default): 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 mobile gutter — an app's time label, not a
-   * station on a rail. In `chip` 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";
-  className?: string;
-};
-
-/**
- * The station on the timeline's axis — ONE object, positioned by its host:
- * `HourGroup` centres it on its own heading rule out in the desktop spine,
- * `HourBand` pins it to the top of the mobile gutter.
- *
- * Extracted because it was hand-rolled twice and the copies had already
- * drifted — this one bordered and `rounded-[7px] px-[7px]`, `hour-band.tsx`'s
- * borderless and `rounded-md px-1.5`. 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 = "station",
-  className,
-}: TimelineHourPuckProps) {
-  const isChip = variant === "chip";
-
-  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",
-          isChip
-            ? cn(
-                "inline-flex h-6 min-w-[58px] items-center justify-center gap-1 rounded-[7px] px-1 text-[12px] font-medium",
-                isLive ? cn("bg-success/10 text-success", LIVE_PUCK_PULSE_CLASS) : "bg-muted text-foreground"
-              )
-            : 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"
-              )
-        )}
-      >
-        {isChip && isLive && <Radio className="h-2.5 w-2.5 shrink-0" aria-hidden />}
-        {time}
-      </span>
-      {isLive && !!liveLabel && (
-        <span
-          className={cn(
-            isChip
-              ? "sr-only"
-              : cn(
-                  "absolute top-[calc(100%+6px)] whitespace-nowrap bg-background px-1",
-                  "text-[9.5px] font-extrabold tracking-[0.08em] text-success"
-                )
-          )}
-        >
-          {liveLabel}
-        </span>
-      )}
-    </span>
-  );
-}
-
-export type TimelineBandProps = {
-  /** The lane column — usually a poster card, or empty for a quiet hour. */
-  lane: React.ReactNode;
-  /** The content column, normally one `<HourGroup spine>` per hour. */
-  children: React.ReactNode;
-  className?: string;
-};
-
-export function TimelineBand({ lane, children, className }: TimelineBandProps) {
-  return (
-    <div className={cn("flex items-stretch", className)}>
-      <div className="w-[var(--timeline-lane)] shrink-0">{lane}</div>
-
-      <div className="relative flex w-[var(--timeline-spine)] shrink-0 justify-center self-stretch">
-        <Separator orientation="vertical" className="h-full" />
-      </div>
-
-      <div className="flex min-w-0 flex-1 flex-col">{children}</div>
-    </div>
-  );
-}
-
-/**
- * A fixed-size shimmer block. `radiusPx` only needs to be passed for the
- * poster-sized blocks (12, matching `rounded-xl`) — every thinner text-line
- * height here (13–18px) is less than twice that radius, so the browser clamps
- * it to a pill automatically even left at the `Skeleton` default.
- */
-function sk(width: string, height: number, radiusPx = 12) {
-  return (
-    <Skeleton
-      style={{ width, height: `${height}px`, borderRadius: `${radiusPx}px` }}
-    />
-  );
-}
-
-export type TimelineBandSkeletonProps = {
-  className?: string;
-};
-
-/**
- * Holds the lane/spine/content geometry so nothing jumps when data lands.
- * The spine renders its hairline with no puck — there's no hour to show yet.
- */
-export function TimelineBandSkeleton({ className }: TimelineBandSkeletonProps) {
-  return (
-    <div className={cn("flex items-stretch", className)} aria-hidden="true">
-      <div className="flex w-[var(--timeline-lane)] shrink-0 flex-col gap-3">
-        {sk("100%", 297, 12)}
-        {sk("70%", 18)}
-        {sk("45%", 13)}
-      </div>
-
-      <div className="relative flex w-[var(--timeline-spine)] shrink-0 justify-center self-stretch">
-        <Separator orientation="vertical" className="h-full" />
-      </div>
-
-      <div className="flex min-w-0 flex-1 flex-col gap-4">
-        <div className="grid grid-cols-3 gap-[10px]">
-          {Array.from({ length: 3 }, (_, index) => (
-            <div key={index} className="flex flex-col gap-2">
-              {sk("100%", 190, 12)}
-              {sk("85%", 15)}
-              {sk("55%", 12)}
-            </div>
-          ))}
-        </div>
-
-        <div className="flex flex-col">
-          {Array.from({ length: 3 }, (_, index) => (
-            <div key={index} className="relative flex items-center gap-[11px] py-2">
-              <Separator className="absolute inset-x-0 top-0" />
-
-              <Skeleton className="h-[34px] w-[34px] shrink-0 rounded-md" />
-              <div className="flex min-w-0 flex-1 flex-col gap-1.5">
-                {sk("60%", 13)}
-                {sk("40%", 11.5)}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}