@bearmenu/ui 0.8.3 → 0.8.6

package/src/components/timeline-band.tsx

@@ -0,0 +1,207 @@
+"use client";
+
+import * as React from "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 the deleted `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: the playhead's
+ * `transform: scale` would make the hairline visibly breathe here, because
+ * unlike the playhead this puck sits ON the rail.
+ */
+const LIVE_PUCK_PULSE_CLASS = "bm-timeline-live-puck-pulse";
+
+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;
+  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, className }: TimelineHourPuckProps) {
+  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 rounded-[7px] border bg-background px-[7px] py-[3px]",
+          "font-mono text-[12.5px] font-medium tabular-nums",
+          isLive
+            ? cn("border-success/40 text-success", LIVE_PUCK_PULSE_CLASS)
+            : "border-border text-foreground"
+        )}
+      >
+        {time}
+      </span>
+      {isLive && !!liveLabel && (
+        <span
+          className={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>
+  );
+}

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

@@ -9,7 +9,7 @@ const meta = {
 } satisfies Meta<typeof ToggleGroup>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof ToggleGroup>;
 
 export const Default: Story = {
   render: () => (

package/src/components/tooltip.stories.tsx

@@ -3,7 +3,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tool
 import { Button } from "./button";
 import { Plus } from "lucide-react";
 
-const meta = {
+const meta: Meta<typeof Tooltip> = {
   title: "Components/Tooltip",
   component: Tooltip,
   tags: ["autodocs"],
@@ -14,7 +14,7 @@ const meta = {
       </TooltipProvider>
     ),
   ],
-} satisfies Meta<typeof Tooltip>;
+};
 
 export default meta;
 type Story = StoryObj<typeof meta>;

package/src/components/venue-events-block.stories.tsx

@@ -0,0 +1,216 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  VenueEventsBlock,
+  VenueEventsBlockSkeleton,
+  type VenueEventsBlockDish,
+  type VenueEventsBlockNight,
+} from "./venue-events-block";
+
+const nights: VenueEventsBlockNight[] = [
+  { id: "n1", dayLabel: "Fri", title: "Psihotrop — Infinity", timeLabel: "20:00", href: "/events/n1" },
+  { id: "n2", dayLabel: "Sat", title: "Warehouse Sessions", timeLabel: "22:00", href: "/events/n2" },
+  { id: "n3", dayLabel: "Sun", title: "Jazz at the Attic", timeLabel: "19:30", href: "/events/n3" },
+];
+
+const dishes: VenueEventsBlockDish[] = [
+  {
+    id: "d1",
+    name: "Smoked brisket burger",
+    description: "Slow-smoked 14h, pickled onion, house sauce",
+    priceLabel: "54 RON",
+    quantityLabel: "Serves 1",
+    mentionsLabel: "18",
+  },
+  {
+    id: "d2",
+    name: "Truffle fries",
+    description: "Parmesan, rosemary salt",
+    priceLabel: "28 RON",
+    mentionsLabel: "9",
+  },
+  {
+    id: "d3",
+    name: "Craft lager, 0.5l",
+    priceLabel: "22 RON",
+  },
+];
+
+// 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 VenueEventsBlock> = {
+  title: "Events/VenueEventsBlock",
+  component: VenueEventsBlock,
+  tags: ["autodocs"],
+  args: {
+    venue: {
+      name: "Flying Circus",
+      ratingLabel: "4.7",
+      metaLabel: "pub · $$",
+      isOpenNow: true,
+      href: "/places/flying-circus",
+    },
+    nights,
+    allEventsLabel: "All 12 events at Flying Circus",
+    allEventsHref: "/places/flying-circus/events",
+    menuHeader: <h3 className="mb-1 text-sm font-bold">From the menu</h3>,
+    dishes,
+    footnote: "Menu prices last confirmed 2 days ago.",
+  },
+  decorators: [
+    (Story) => (
+      <div className="max-w-2xl">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "'One venue, a whole fortnight' — the venue and its upcoming nights on the left, its menu on the right. Stacks to a single column on mobile, menu below.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof VenueEventsBlock>;
+
+export const Default: Story = {};
+
+/** No thumbnail, not currently open, no rating yet. */
+export const MinimalVenue: Story = {
+  args: {
+    venue: { name: "The Attic", metaLabel: "wine bar" },
+  },
+};
+
+/** Neither the venue header, night rows, nor the chip are links — a read-only summary block. */
+export const NoLinks: Story = {
+  args: {
+    venue: { name: "Flying Circus", ratingLabel: "4.7", metaLabel: "pub · $$", isOpenNow: true },
+    nights: nights.map((night) => ({ ...night, href: undefined })),
+    allEventsHref: undefined,
+  },
+};
+
+export const Skeleton: Story = {
+  render: () => (
+    <div className="max-w-2xl">
+      <VenueEventsBlockSkeleton />
+    </div>
+  ),
+};
+
+/**
+ * `menuContent` in use — a consuming app renders its OWN menu-row component
+ * here instead of the block's built-in dish row, so a dish looks identical
+ * whether it is met on this block, the venue's menu page, or anywhere else
+ * that app renders a row. `dishes` is omitted: it is ignored once
+ * `menuContent` is given.
+ */
+export const WithCustomMenuContent: Story = {
+  args: {
+    dishes: undefined,
+    menuContent: (
+      <ul>
+        {dishes.map((dish, index) => (
+          <li
+            key={dish.id}
+            className="relative flex items-start justify-between gap-3 border-2 border-dashed border-primary/40 py-3 first:border-t-0"
+          >
+            <div className="min-w-0">
+              <p className="text-[15px] font-semibold">{dish.name}</p>
+              <p className="text-xs text-muted-foreground">
+                Stand-in for the host app&apos;s own menu row, item {index + 1}
+              </p>
+            </div>
+            <span className="shrink-0 text-sm font-bold text-primary">{dish.priceLabel}</span>
+          </li>
+        ))}
+      </ul>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The DS renders only the layout column; the row markup itself belongs to whatever menu row the host app already owns.",
+      },
+    },
+  },
+};
+
+/**
+ * All three content slots in use at once — `venueContent`, `nightsContent`,
+ * and `menuContent` — the shape a real consuming app actually reaches for:
+ * its own place card up top, its own event row per night, its own menu row
+ * per dish. `venue`, `nights`, and `dishes` are all omitted; none of them are
+ * read once their slot is given. This is the block's real-world shape more
+ * than `Default` is — `Default` exists to prove the plain-data fallback still
+ * renders something reasonable on its own.
+ */
+export const WithAllContentSlots: Story = {
+  args: {
+    venue: undefined,
+    venueContent: (
+      <div className="flex gap-3 rounded-xl border-2 border-dashed border-primary/40 p-3">
+        <div className="h-[72px] w-28 shrink-0 rounded-lg bg-muted" />
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-semibold">Stand-in for the host app&apos;s own place card</p>
+          <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
+            Real photo, cuisine/price meta, and the place&apos;s description — the app&apos;s
+            canonical card, not a second one owned by this block.
+          </p>
+        </div>
+      </div>
+    ),
+    nights: undefined,
+    nightsContent: (
+      <ul>
+        {nights.map((night, index) => (
+          <li
+            key={night.id}
+            className="relative flex items-center gap-3 border-2 border-dashed border-primary/40 py-2 first:border-t-0"
+          >
+            <div className="h-[34px] w-[34px] shrink-0 rounded-md bg-muted" />
+            <div className="min-w-0 flex-1">
+              <p className="truncate text-[13px] font-semibold">{night.title}</p>
+              <p className="truncate text-[11.5px] text-muted-foreground">
+                Stand-in for the host app&apos;s own event row, night {index + 1}
+              </p>
+            </div>
+          </li>
+        ))}
+      </ul>
+    ),
+    dishes: undefined,
+    menuContent: (
+      <ul>
+        {dishes.map((dish, index) => (
+          <li
+            key={dish.id}
+            className="relative flex items-start justify-between gap-3 border-2 border-dashed border-primary/40 py-3 first:border-t-0"
+          >
+            <div className="min-w-0">
+              <p className="text-[15px] font-semibold">{dish.name}</p>
+              <p className="text-xs text-muted-foreground">
+                Stand-in for the host app&apos;s own menu row, item {index + 1}
+              </p>
+            </div>
+            <span className="shrink-0 text-sm font-bold text-primary">{dish.priceLabel}</span>
+          </li>
+        ))}
+      </ul>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The block renders nothing but the two-column layout and the chip; every row shape — venue, night, dish — belongs to the host app.",
+      },
+    },
+  },
+};