@bearmenu/ui 0.8.4 → 0.8.7

package/src/components/day-rail-chip.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./skeleton";
+import type { DayRailChipLabels } from "./event-types";
+
+/**
+ * DayRailChip — one day in the horizontally scrolling day rail.
+ *
+ * Three states the design distinguishes and that are easy to collapse by
+ * accident:
+ *   - ACTIVE: FILLED — accent ground, accent-foreground label, count and dot.
+ *   - HAS EVENTS: card ground, normal foreground, an accent density dot.
+ *   - EMPTY: muted text, NO dot, an em dash instead of "0". A day with nothing
+ *     on stays in the rail — ten of fourteen days routinely read empty, and
+ *     hiding them makes the rail lie about how far it reaches — but the caller
+ *     decides whether it is interactive, and a rail that NAVIGATES has nothing
+ *     to send an empty day to.
+ *
+ * ── Why active is filled ──────────────────────────────────────────────────
+ * It was an accent border and accent text. Measured against the real tokens
+ * that is a 1px hairline plus a label at 1.16:1 against its inactive
+ * neighbours in light mode — and in dark, where `--primary` (0.66) is DIMMER
+ * than `--foreground` (0.96), the active chip read as the recessed one at
+ * 2.86:1. Survivable while a large pinned day header also announced the day;
+ * not survivable once the rail became the only indicator.
+ *
+ * An eye scanning fourteen near-identical 62px boxes horizontally, in
+ * peripheral vision, while the page moves, resolves AREA and LUMINANCE STEP
+ * long before it resolves the hue of a hairline or the weight of 11.5px type.
+ * The fill presents ~3,100px² at 5.97:1 (light) / 6.09:1 (dark). A tinted
+ * ground would not do it: `bg-accent/10` and `--accent-subtle` both measure
+ * ~1.15:1 against the chip's own card, which is no signal at all.
+ *
+ * `--accent`, deliberately, not `--gradient-primary`: white on that gradient's
+ * top stop is 4.45:1, under AA for text, and the gradient has no `.dark`
+ * override so the chip's ink direction would invert against the rest of the
+ * dark theme. `--accent` also already means "current" here — the bottom nav's
+ * active tab uses it.
+ *
+ * The border stays 1px in BOTH states. Thickening it on active would change
+ * the box model, and these chips sit in an equal-width grid that would reflow
+ * on every scroll-spy tick.
+ *
+ * Renders a link when `href` is given, a button when only `onClick` is, and a
+ * plain div otherwise. The button announces `aria-current`, not
+ * `aria-pressed`: this is the current item in a set of days, not a toggle.
+ */
+
+export type DayRailChipLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+  "aria-current"?: "page";
+  onClick?: () => void;
+};
+
+function DefaultLink({ href, ...props }: DayRailChipLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type DayRailChipProps = {
+  /** Short weekday label, already localised — "Today", "Fri", "Sâm". */
+  label: string;
+  /** Day of month, as displayed. */
+  dayNumber: string;
+  /** Events on this day, after any active filter. */
+  count: number;
+  isActive?: boolean;
+  /** Keeps the bold weight when inactive. */
+  isWeekend?: boolean;
+  labels: DayRailChipLabels;
+  href?: string;
+  linkComponent?: React.ComponentType<DayRailChipLinkProps>;
+  onClick?: () => void;
+  className?: string;
+};
+
+export function DayRailChip({
+  label,
+  dayNumber,
+  count,
+  isActive,
+  isWeekend,
+  labels,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className,
+}: DayRailChipProps) {
+  const hasEvents = count > 0;
+
+  const rootClasses = cn(
+    "w-[62px] shrink-0 rounded-xl border px-1 py-2 text-center",
+    "transition-colors duration-150 motion-reduce:transition-none",
+    isActive ? "border-accent bg-accent" : "border-border bg-card",
+    (href || onClick) &&
+      // `ring-offset-background` is not decoration: Tailwind's default offset
+      // colour is white, which painted a white halo around a focused chip on
+      // the dark rail.
+      "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    className
+  );
+
+  const body = (
+    <>
+      <div
+        className={cn(
+          "text-[11.5px]",
+          isActive || isWeekend ? "font-bold" : "font-semibold",
+          isActive
+            ? "text-accent-foreground"
+            : hasEvents
+              ? "text-foreground"
+              // NOT `/70`, which measured 2.96:1 light and 4.17:1 dark — an AA
+              // failure in both. An empty day is inert content, not a disabled
+              // form control, so nothing exempts it. The em dash and the
+              // missing dot already say "empty"; `muted-foreground` against
+              // `foreground` is still an 18.8 → 5.5 step and plainly quieter.
+              : "text-muted-foreground"
+        )}
+      >
+        {label} {dayNumber}
+      </div>
+
+      <div className="mt-[3px] flex items-center justify-center gap-1">
+        {/* Kept on the active chip, not dropped: losing it would shift the
+            count 5px sideways every time the day changes under the scroll spy.
+            Inactive is full `bg-accent`, not `bg-primary/40` — at 40% alpha it
+            measured 2.46:1 / 1.93:1 (invisible at 4px), and in light mode
+            `--primary` is near-black, so the "warm density dot" was grey. */}
+        {hasEvents && (
+          <span
+            className={cn(
+              "h-1 w-1 rounded-full",
+              isActive ? "bg-accent-foreground" : "bg-accent"
+            )}
+            aria-hidden
+          />
+        )}
+        <span
+          className={cn(
+            // Full opacity on active, never dimmed: `/80` lands at 4.48:1, an
+            // AA fail by 0.02. Hierarchy inside a 50px box comes from the
+            // label's weight and the type-size step, which is enough.
+            "font-mono text-[10.5px] tabular-nums",
+            isActive ? "text-accent-foreground" : "text-muted-foreground"
+          )}
+        >
+          {hasEvents ? count : <span aria-label={labels.noEvents}>—</span>}
+        </span>
+      </div>
+    </>
+  );
+
+  if (href) {
+    return (
+      <LinkComponent
+        href={href}
+        className={rootClasses}
+        aria-current={isActive ? "page" : undefined}
+        onClick={onClick}
+      >
+        {body}
+      </LinkComponent>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        className={rootClasses}
+        // `aria-current`, not `aria-pressed`. The rail used to FILTER, where a
+        // toggle semantic was right; it now navigates, and this is the current
+        // day in a set of days.
+        aria-current={isActive ? "true" : undefined}
+        onClick={onClick}
+      >
+        {body}
+      </button>
+    );
+  }
+
+  return <div className={rootClasses}>{body}</div>;
+}
+
+export type DayRailChipSkeletonProps = {
+  className?: string;
+};
+
+/**
+ * Mirrors one `<DayRailChip>`'s footprint (62×50, 12px radius — the source
+ * design's own day-rail skeleton geometry, which also happens to match this
+ * chip's rendered size: label + count rows inside `py-2` padding). The caller
+ * repeats it with the rail's own `gap-2` to build the loading rail.
+ */
+export function DayRailChipSkeleton({ className }: DayRailChipSkeletonProps) {
+  return <Skeleton aria-hidden="true" className={cn("h-[50px] w-[62px] shrink-0", className)} />;
+}

package/src/components/drift-rail.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DriftRail } from "./drift-rail";
+import { FeaturedRailItem } from "./featured-rail-item";
+
+const CHIP_LABELS = [
+  "Live music",
+  "Rooftop",
+  "Free entry",
+  "Late night",
+  "DJ set",
+  "Comedy",
+  "Art walk",
+  "Brunch",
+];
+
+function Chip({ label }: { label: string }) {
+  return (
+    <span className="inline-flex h-9 shrink-0 items-center rounded-full border border-border bg-card px-4 text-sm font-medium">
+      {label}
+    </span>
+  );
+}
+
+// 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 DriftRail> = {
+  title: "Events/DriftRail",
+  component: DriftRail,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "An infinite horizontal marquee. Duplicates its children once so a `translateX(-50%)` loop is seamless — pass a fixed, ordered list. Pauses on hover, pauses when scrolled off-screen (`IntersectionObserver`), and stops outright under `prefers-reduced-motion`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DriftRail>;
+
+export const Chips: Story = {
+  render: () => (
+    <div className="max-w-[420px]">
+      <DriftRail>
+        {CHIP_LABELS.map((label) => (
+          <Chip key={label} label={label} />
+        ))}
+      </DriftRail>
+    </div>
+  ),
+};
+
+/** Two rails at once — the design's opposing-direction pair, forward at 42s and reverse at 52s. */
+export const OpposingPair: Story = {
+  render: () => (
+    <div className="max-w-[420px] space-y-4">
+      <DriftRail>
+        {CHIP_LABELS.slice(0, 5).map((label) => (
+          <Chip key={label} label={label} />
+        ))}
+      </DriftRail>
+      <DriftRail reverse durationSeconds={52}>
+        {CHIP_LABELS.slice(3).map((label) => (
+          <Chip key={label} label={label} />
+        ))}
+      </DriftRail>
+    </div>
+  ),
+};
+
+/** Wrapping the featured rail's own card — the rail supplies the motion, the card stays static content. */
+export const WithFeaturedItems: Story = {
+  render: () => (
+    <div className="max-w-[420px]">
+      <DriftRail durationSeconds={30}>
+        {["Warehouse Rave", "Jazz on the Rooftop", "Open Mic Night", "Street Food Market"].map(
+          (title) => (
+            <FeaturedRailItem
+              key={title}
+              title={title}
+              venue="Atelier Café"
+              note="Sat 5 · 20:00"
+            />
+          )
+        )}
+      </DriftRail>
+    </div>
+  ),
+};

package/src/components/drift-rail.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useEffect, useId, useRef } from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * DriftRail — an infinite horizontal marquee for logos, tag chips or small
+ * poster tiles. The caller passes one set of children; the component renders
+ * a second, `aria-hidden` copy right after it so a `translateX(-50%)` loop is
+ * seamless. Because the loop depends on the duplicate being pixel-identical
+ * to the first pass, keep `children` a fixed, ordered list — no per-render
+ * randomisation.
+ *
+ * Motion is scoped to this instance via a generated id (no shared stylesheet,
+ * no class collisions between multiple rails on one page) and is paused two
+ * ways, per the source design: an `IntersectionObserver` stops the loop the
+ * moment the rail scrolls off-screen, and `prefers-reduced-motion: reduce`
+ * removes the animation outright rather than merely slowing it.
+ */
+export type DriftRailProps = {
+  children: React.ReactNode;
+  /** Runs the loop right-to-left instead of left-to-right. */
+  reverse?: boolean;
+  durationSeconds?: number;
+  /** Pauses the loop while the pointer hovers the rail. */
+  pauseOnHover?: boolean;
+  className?: string;
+};
+
+const DRIFT_RAIL_DEFAULT_DURATION_SECONDS = 42;
+
+export function DriftRail({
+  children,
+  reverse = false,
+  durationSeconds = DRIFT_RAIL_DEFAULT_DURATION_SECONDS,
+  pauseOnHover = true,
+  className,
+}: DriftRailProps) {
+  const scopeId = useId().replace(/[^a-zA-Z0-9]/g, "");
+  const scopeClass = `drift-rail-${scopeId}`;
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const node = containerRef.current;
+    if (!node || typeof IntersectionObserver === "undefined") return undefined;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        node.dataset.offscreen = entry.isIntersecting ? "false" : "true";
+      },
+      { threshold: 0 }
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div ref={containerRef} className={cn(scopeClass, "overflow-hidden py-1.5", className)}>
+      <style>{`
+        .${scopeClass} .drift-rail-run {
+          animation: ${scopeClass}-run ${durationSeconds}s linear infinite;
+          animation-direction: ${reverse ? "reverse" : "normal"};
+        }
+        .${scopeClass}[data-offscreen="true"] .drift-rail-run {
+          animation-play-state: paused;
+        }
+        @keyframes ${scopeClass}-run {
+          from { transform: translateX(0); }
+          to { transform: translateX(-50%); }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .${scopeClass} .drift-rail-run {
+            animation: none;
+          }
+        }
+        ${pauseOnHover ? `.${scopeClass}:hover .drift-rail-run { animation-play-state: paused; }` : ""}
+      `}</style>
+      <div className="drift-rail-run flex w-max items-stretch gap-3.5 motion-reduce:[animation:none]">
+        {children}
+        <div className="contents" aria-hidden="true">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/event-card.stories.tsx

@@ -0,0 +1,248 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Flame, Music } from "lucide-react";
+import { EventCard, EventCardSkeleton } from "./event-card";
+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: (iso) =>
+    new Date(iso).toLocaleDateString("en-GB", { weekday: "short", day: "numeric", month: "short" }),
+  price: (amount) => `${amount} RON`,
+};
+
+const event: EventPreview = {
+  id: "e1",
+  title: "Psihotrop — From the Beginning to Infinity",
+  location: "Atelier Café",
+  place_name: "Atelier Café",
+  place_slug: "atelier-cafe",
+  starts_at: "2026-09-05T20:00:00",
+  entry_fee: 50,
+};
+
+// 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 EventCard> = {
+  title: "Events/EventCard",
+  component: EventCard,
+  tags: ["autodocs"],
+  args: { event, labels, formatters },
+  decorators: [
+    (Story) => (
+      <div className="w-[220px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Pass `href` **and** `onClick` in production: the anchor keeps the card crawlable and middle-clickable, while `onClick` (calling `preventDefault()`) opens the detail sheet. A card rendered as a bare `<button>` is what stripped every event link out of the hub's rendered DOM.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EventCard>;
+
+export const Default: Story = {};
+
+/** `entry_fee: 0` is explicitly free and earns the green pill. */
+export const FreeEntry: Story = {
+  args: { event: { ...event, entry_fee: 0 } },
+};
+
+/** An absent `entry_fee` is *unknown*, not free — no pill, no price. */
+export const UnknownEntryFee: Story = {
+  args: { event: { ...event, entry_fee: undefined } },
+};
+
+/** Overlay pills: hype badge top-left, category tag bottom-left. */
+export const WithBadgeAndTag: Story = {
+  args: {
+    event: { ...event, entry_fee: 0 },
+    badge: (
+      <>
+        <Flame className="h-3 w-3" aria-hidden />
+        Busy
+      </>
+    ),
+    tagLabel: (
+      <>
+        <Music className="h-3 w-3" aria-hidden />
+        Live music
+      </>
+    ),
+  },
+};
+
+/**
+ * `tags` — display labels rendered beneath the venue/meta line, distinct from
+ * `tagLabel`'s single overlay pill on the poster.
+ */
+export const WithTags: Story = {
+  args: { tags: ["Live Music", "Rock", "18+"] },
+};
+
+/** The live line is composed by the caller — clause order differs per locale. */
+export const LiveNow: Story = {
+  args: { liveStatus: "Live now · ends around 23:00" },
+};
+
+/** The featured slot: larger title. Still uncut. */
+export const Emphasis: Story = {
+  args: { emphasis: true },
+  decorators: [
+    (Story) => (
+      <div className="w-[320px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+const LONG_TITLE_EVENT: EventPreview = {
+  ...event,
+  title: "Movie Night: Futni må ikke være så vanskelig — an outdoor screening with live score",
+};
+
+/**
+ * THE TITLE IS NEVER TRUNCATED, in any variant. Real listings run long
+ * ("Movie Night: Futni m…", "Juventus vs AC Milan…" were the reported bug),
+ * and the title is the one thing the card exists to say. It wraps to as many
+ * lines as it needs and the card grows downward.
+ */
+export const LongTitle: Story = {
+  args: { event: LONG_TITLE_EVENT },
+};
+
+/** The same long title across every variant, so no combination quietly clips it. */
+export const LongTitleEveryVariant: Story = {
+  render: () => (
+    <div className="flex items-start gap-4">
+      <div className="w-[150px]">
+        <EventCard
+          event={LONG_TITLE_EVENT}
+          labels={labels}
+          formatters={formatters}
+          posterAspect="4/3"
+        />
+      </div>
+      <div className="w-[150px]">
+        <EventCard
+          event={LONG_TITLE_EVENT}
+          labels={labels}
+          formatters={formatters}
+          posterAspect="3/4"
+        />
+      </div>
+      <div className="w-[150px]">
+        <EventCard
+          event={LONG_TITLE_EVENT}
+          labels={labels}
+          formatters={formatters}
+          posterAspect="4/5"
+        />
+      </div>
+      <div className="w-[220px]">
+        <EventCard event={LONG_TITLE_EVENT} labels={labels} formatters={formatters} emphasis />
+      </div>
+    </div>
+  ),
+  decorators: [
+    (Story) => (
+      <div className="w-[760px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "`items-start` on the row is what keeps a three-line title from stretching its neighbours — the pattern any grid of these cards should copy.",
+      },
+    },
+  },
+};
+
+/** 3/4 poster — the hub's original portrait deck/rail/tape ratio. */
+export const PortraitPoster: Story = {
+  args: { posterAspect: "3/4", showPrice: true },
+};
+
+/**
+ * 4:3 (the house shape, shared with dish/drink/place) beside 4:5 (the
+ * Instagram source ratio, used by the hub's editorial poster surfaces —
+ * `CategoryDeck`, `PosterTape`, `Coverflow`). Side by side so the crop
+ * difference is visible rather than guessed at.
+ */
+export const HouseVsInstagramAspect: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <div className="w-[150px]">
+        <EventCard event={event} labels={labels} formatters={formatters} posterAspect="4/3" />
+      </div>
+      <div className="w-[150px]">
+        <EventCard event={event} labels={labels} formatters={formatters} posterAspect="4/5" />
+      </div>
+    </div>
+  ),
+  decorators: [
+    (Story) => (
+      <div className="w-[340px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** The timeline supplies its own hour heading, so the card drops the meta line. */
+export const InsideAnHourGroup: Story = {
+  args: { hideWhen: true },
+};
+
+/** Loading state — identical geometry to `Default`, so nothing shifts on data arrival. */
+export const Loading: Story = {
+  render: () => <EventCardSkeleton />,
+};
+
+/** Skeleton beside the real card, so any geometry drift is visible at a glance. */
+export const LoadingVsLoaded: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <EventCardSkeleton />
+      <EventCard event={event} labels={labels} formatters={formatters} />
+    </div>
+  ),
+  decorators: [
+    (Story) => (
+      <div className="w-[460px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** With a resolved poster. The caller composes the CDN URL; the DS never does. */
+export const WithPoster: Story = {
+  args: {
+    event: {
+      ...event,
+      poster_url:
+        "data:image/svg+xml;utf8," +
+        encodeURIComponent(
+          `<svg xmlns="http://www.w3.org/2000/svg" width="240" height="180"><rect width="240" height="180" fill="#c8b8a8"/><text x="50%" y="50%" font-family="monospace" font-size="12" fill="#5a4a3a" text-anchor="middle">poster</text></svg>`
+        ),
+    },
+  },
+};