@bearmenu/ui 0.8.4 → 0.8.7

package/src/components/coverflow.tsx

@@ -0,0 +1,550 @@
+"use client";
+
+import { useEffect, useId, useRef, useState } from "react";
+import { ChevronLeft, ChevronRight, Gift } from "lucide-react";
+import { cn } from "../lib/utils";
+import { EventPosterFallback } from "./event-poster-fallback";
+
+/**
+ * Coverflow — the busiest-events browser: a 3D perspective lane with a large
+ * lead poster flanked by up to three shrinking, desaturating posters on each
+ * side. The lane itself drifts a few pixels back and forth
+ * (`prefers-reduced-motion` stops this outright; an `IntersectionObserver`
+ * pauses it off-screen).
+ *
+ * IT IS A RING, NOT A LANE. A card's slot comes from `ringOffset` — the
+ * SIGNED SHORTEST WAY ROUND the list, not the raw `index - activeIndex`. With
+ * seven items and `activeIndex` at 0, item 6 renders at offset −1 (just left
+ * of the lead) rather than +6, so both flanks are full at every index instead
+ * of the stage emptying out at the two ends, and prev/next keep going past
+ * either end. `goTo` already reported a wrapped index; the visuals now agree
+ * with it.
+ *
+ * IDENTITY IS THE ANIMATION: a card renders keyed by `item.id`, and its
+ * appearance (position, rotation, scale, depth filter) is a pure function of
+ * that offset. Advancing `activeIndex` shifts every offset by one, and
+ * because the DOM node stays put the browser tweens it from its old slot to
+ * its new one instead of popping straight there.
+ *
+ * THE WRAP MUST NOT TWEEN. Exactly one card per step crosses the ring's seam
+ * — with seven items it goes from offset −3 to +3 — and animating that would
+ * drag a poster right across the face of the coverflow. The mechanism chosen:
+ * `Coverflow` keeps the previous and current active index in one piece of
+ * state (`step`), so a render can tell, per card, whether its offset moved by
+ * the same amount the active index did. A card that did not (the only way
+ * that happens is crossing the seam) renders WITHOUT its transition classes
+ * for that one commit, so the transform applies instantly; the next commit
+ * restores them and it tweens normally from its new slot. Two alternatives
+ * were rejected: re-keying the card to force a remount throws away the
+ * decoded `<img>` and flashes the poster, and an effect-based "clear the
+ * transition after paint" lands a frame too late — the slide has already
+ * started. The seam sits at the deepest tier, which is also the lowest
+ * `z-index`, so the teleport happens behind the stack and off-stage.
+ *
+ * ONLY THE VISIBLE TIERS ARE MOUNTED. Every item now resolves to some ring
+ * offset, so the component renders only `|offset| <= 3` and drops the rest
+ * entirely — a fifty-item list paints seven posters, not fifty. Cards enter
+ * and leave at tier 3, parked well outside the stage's horizontal clip, so the
+ * mount/unmount is never seen. The stage clips on the x axis ONLY; see the
+ * note on the container element for why the y axis must stay visible.
+ *
+ * DEGENERATE LENGTHS: with one item there is no ring, so the arrows are not
+ * rendered at all rather than shown inert — see the note below on controls
+ * that look operable and do nothing. With two items the shortest path ties at
+ * `n / 2`; `ringOffset` resolves the tie to the POSITIVE side, so the other
+ * card is always on the right flank instead of flipping between them.
+ *
+ * `prefers-reduced-motion` already removes the position transition outright
+ * (`motion-reduce:transition-none`), so under it every step is a jump and the
+ * wrap is not a special case — it cannot read as a flash because nothing else
+ * is animating either.
+ *
+ * ACCESSIBILITY: every item carries a `title`, so every card is a real,
+ * focusable control (the injected link when it carries an `href`, otherwise a
+ * `<button>`) named after the event it depicts — a keyboard or screen-reader
+ * user can jump straight to any visible card the way a mouse user clicks one
+ * directly, not just step with `prevLabel`/`nextLabel`. Selecting one calls
+ * `onActiveIndexChange` with its index. Cards beyond the visible tiers are
+ * not rendered at all, so a screen-reader/keyboard user never lands on an
+ * invisible control — there is nothing there to land on. The depth
+ * styling (scale/grayscale/opacity) stays purely decorative, applied to an
+ * inner media element rather than the focusable wrapper — `filter` creates a
+ * new stacking context that would otherwise dim a `box-shadow`-based focus
+ * ring along with the poster. The active item's title/meta stays
+ * `aria-live="polite"` so a screen-reader user is told what changed after any
+ * kind of jump.
+ */
+export type CoverflowItem = {
+  /** Stable identity — this is what makes the position change animate rather than pop. */
+  id: string;
+  title: string;
+  /** Caller-composed, e.g. "Fri 4 · 90 going". */
+  meta: string;
+  posterUrl?: string;
+  href?: string;
+  /**
+   * Top-left overlay slot, rendered exactly as given — bring your own pill,
+   * icon and colour. Deliberately unstyled: a wrapper here would cap every
+   * caller at one look, and the first real consumer needed a colour-ramped
+   * badge the old black pill could not express.
+   */
+  badge?: React.ReactNode;
+  isFree?: boolean;
+};
+
+export type CoverflowLinkProps = {
+  href: string;
+  className?: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+  onClick?: (mouseEvent: React.MouseEvent) => void;
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+  tabIndex?: number;
+};
+
+function DefaultLink({ href, ...props }: CoverflowLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type CoverflowProps = {
+  items: CoverflowItem[];
+  activeIndex: number;
+  onActiveIndexChange?: (index: number) => void;
+  /**
+   * Optional centred caption under the stage, e.g. a pluralized item count
+   * ("7 events"). Omit it when `positionLabel` already says everything there
+   * is to say — passing a position string here as well renders it twice, with
+   * a separator dot between the two identical halves.
+   */
+  caption?: string;
+  /** Required to render the free pill on an item — no label, no pill. */
+  freeLabel: string;
+  /** Accessible name for the previous-item control. */
+  prevLabel: string;
+  /** Accessible name for the next-item control. */
+  nextLabel: string;
+  /** e.g. "3 of 7" — caller-composed, locale-dependent. Shown next to `caption`. */
+  positionLabel?: string;
+  linkComponent?: React.ComponentType<CoverflowLinkProps>;
+  className?: string;
+};
+
+/**
+ * Depth tiers beyond the lead, indexed by `Math.min(|offset|, 3)`. Index 0 is
+ * unused for rotation/scale (the lead is handled separately, scaling up from
+ * the shared card box instead of down) but keeps every array the same shape.
+ */
+const COVERFLOW_MAX_VISIBLE_TIER = 3;
+const COVERFLOW_TIER_ROTATE_DEG = [0, 20, 30, 38] as const;
+const COVERFLOW_TIER_SCALE = [1, 0.92, 0.82, 0.72] as const;
+const COVERFLOW_TIER_GRAYSCALE = [0, 0, 0.35, 0.5] as const;
+const COVERFLOW_TIER_OPACITY = [1, 0.88, 0.7, 0.5] as const;
+
+/**
+ * Every card — lead included — shares this DOM box, which is what keeps a
+ * change of tier part of the one continuous transform rather than a discrete,
+ * unanimatable layout jump the moment a card crosses into (or out of) the lead
+ * slot.
+ *
+ * THE BOX IS THE LEAD'S SIZE, AND THAT IS WHY THE LEAD IS SHARP. It used to be
+ * the SIDE card's size, with the lead scaled UP to reach its on-screen width.
+ * A browser rasterises a layer at its layout size and then stretches that
+ * texture, so the one card a reader actually looks at was the only one being
+ * resampled upward — soft by construction. The poster was never the cause: it
+ * is fetched well above display width. Sizing the box to the lead puts the lead
+ * at scale 1 and makes every other tier scale DOWN, which resamples cleanly.
+ */
+const COVERFLOW_CARD_WIDTH_CLASS = "w-[149px] sm:w-[210px]";
+
+/** Keeps the focus ring on the un-filtered wrapper (button/link) and the
+ *  grayscale/opacity depth effect on the inner media div — see the
+ *  ACCESSIBILITY note above. */
+const COVERFLOW_CARD_TRANSFORM_TRANSITION_CLASS =
+  "transition-[transform,box-shadow] duration-[420ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none motion-reduce:duration-0";
+const COVERFLOW_MEDIA_FILTER_TRANSITION_CLASS =
+  "transition-[filter,opacity] duration-[420ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none motion-reduce:duration-0";
+const COVERFLOW_CARD_FOCUS_CLASS =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
+/**
+ * Scaled with the cards (see the width class). These are authored at the size
+ * they PAINT now: the lead no longer carries a `scale()`, so its shadow is no
+ * longer multiplied by one — the old `0 30px 70px` on a 1.75x-scaled element
+ * was really a 175px tail, which is what drove it through the stage's bottom
+ * edge.
+ */
+const COVERFLOW_SIDE_SHADOW_CLASS = "shadow-[0_11px_27px_oklch(0.3_0.02_60/0.22)]";
+const COVERFLOW_LEAD_SHADOW_CLASS = "shadow-[0_24px_56px_oklch(0.28_0.03_45/0.32)]";
+const COVERFLOW_PILL_CLASS =
+  "inline-flex h-6 max-w-[85%] items-center gap-1 rounded-full px-2 text-[11px] font-semibold";
+
+const COVERFLOW_DRIFT_DURATION_SECONDS = 26;
+const COVERFLOW_DRIFT_PIXELS = 40;
+
+/** Below the lead's z-index the arrows (z-20) and edge fades (z-10) always
+ *  win, no matter how many cards are mid-transition and briefly promoted. */
+const COVERFLOW_LEAD_Z_INDEX = 6;
+
+const COVERFLOW_ARROW_CLASS =
+  "absolute top-1/2 z-20 flex h-11 w-11 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-background/85 text-foreground shadow-[var(--shadow-overlay)] backdrop-blur-sm transition-colors duration-150 hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:transition-none";
+
+function wrapIndex(index: number, length: number): number {
+  return ((index % length) + length) % length;
+}
+
+/**
+ * Signed shortest way round the ring: `0`, `±1` … up to `±floor(length / 2)`.
+ * A tie (`raw === length / 2`, reachable only on an even-length ring, most
+ * visibly the two-item one) resolves to the POSITIVE side, so that card is
+ * always on the right flank rather than oscillating between the two.
+ */
+function ringOffset(delta: number, length: number): number {
+  const raw = wrapIndex(delta, length);
+  return raw > length / 2 ? raw - length : raw;
+}
+
+type CoverflowCardProps = {
+  item: CoverflowItem;
+  index: number;
+  /** Signed ring offset from the lead — always within `±COVERFLOW_MAX_VISIBLE_TIER`. */
+  offset: number;
+  /** Set for the single card crossing the ring's seam this commit — see the wrap note above. */
+  suppressTransition: boolean;
+  freeLabel: string;
+  onActivate: (index: number) => void;
+  linkComponent: React.ComponentType<CoverflowLinkProps>;
+};
+
+function CoverflowCard({
+  item,
+  index,
+  offset,
+  suppressTransition,
+  freeLabel,
+  onActivate,
+  linkComponent: LinkComponent,
+}: CoverflowCardProps) {
+  const isLead = offset === 0;
+  const magnitude = Math.abs(offset);
+  const tier = Math.min(magnitude, COVERFLOW_MAX_VISIBLE_TIER);
+  const sign = Math.sign(offset);
+
+  const wrapperStyle: React.CSSProperties = {
+    // The lead sits at `--cf-scale-lead`, which is now 1 — see the width class.
+    // Side tiers multiply their depth ratio by `--cf-tier-base`, the side/lead
+    // width ratio, because the shared box is the LEAD's size: without it every
+    // side card would render at nearly lead width. It is a CSS var rather than
+    // a constant here because the ratio differs per breakpoint, and calc()
+    // cannot divide two lengths to derive it live.
+    transform: isLead
+      ? "translate(-50%, -50%) scale(var(--cf-scale-lead))"
+      : `translate(-50%, -50%) translateX(calc(${sign} * var(--cf-x${tier}))) rotateY(${-sign * COVERFLOW_TIER_ROTATE_DEG[tier]}deg) scale(calc(var(--cf-tier-base) * ${COVERFLOW_TIER_SCALE[tier]}))`,
+    zIndex: Math.max(COVERFLOW_LEAD_Z_INDEX - magnitude, 0),
+  };
+
+  const mediaStyle: React.CSSProperties = {
+    opacity: COVERFLOW_TIER_OPACITY[tier],
+    filter:
+      COVERFLOW_TIER_GRAYSCALE[tier] > 0
+        ? `grayscale(${COVERFLOW_TIER_GRAYSCALE[tier] * 100}%)`
+        : "none",
+  };
+
+  const media = (
+    <div
+      className={cn(
+        "relative aspect-[4/5] overflow-hidden rounded-[10px] bg-muted",
+        !suppressTransition && COVERFLOW_MEDIA_FILTER_TRANSITION_CLASS
+      )}
+      style={mediaStyle}
+    >
+      {item.posterUrl ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={item.posterUrl}
+          alt=""
+          loading={isLead ? "eager" : "lazy"}
+          decoding="async"
+          className="h-full w-full object-cover"
+        />
+      ) : (
+        <EventPosterFallback />
+      )}
+
+      <div className="absolute inset-x-2 top-2 flex items-start justify-between gap-2">
+        {/* The badge renders AS GIVEN — no pill of ours around it.
+            It used to be wrapped in `COVERFLOW_PILL_CLASS bg-black/62
+            text-white`, which meant a caller could only ever produce a black
+            pill here. The events hub's hype badge is a colour-ramped
+            speedometer on a brand gradient, so to survive that wrapper it had
+            been hand-rolled down to a monochrome flame — the carousel showed a
+            flat grey badge where every other event surface showed the real one.
+            A caller wanting the old look styles it itself; `isFree` below keeps
+            its pill because that one IS the component's own. */}
+        {item.badge ?? <span />}
+        {item.isFree && freeLabel && (
+          <span className={cn(COVERFLOW_PILL_CLASS, "bg-success font-bold text-success-foreground")}>
+            <Gift className="h-3 w-3" aria-hidden />
+            {freeLabel}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+
+  const wrapperClassName = cn(
+    "absolute left-1/2 top-1/2 block bg-transparent p-0 text-left",
+    COVERFLOW_CARD_WIDTH_CLASS,
+    isLead ? "cursor-default" : "cursor-pointer",
+    isLead ? COVERFLOW_LEAD_SHADOW_CLASS : COVERFLOW_SIDE_SHADOW_CLASS,
+    "rounded-[10px]",
+    !suppressTransition && COVERFLOW_CARD_TRANSFORM_TRANSITION_CLASS,
+    COVERFLOW_CARD_FOCUS_CLASS
+  );
+
+  // The lead never needs to reselect itself — clicking it should only follow
+  // its own `href`, same as before.
+  const handleActivate = isLead ? undefined : () => onActivate(index);
+
+  if (item.href) {
+    return (
+      <LinkComponent
+        href={item.href}
+        className={wrapperClassName}
+        style={wrapperStyle}
+        aria-label={item.title}
+        onClick={handleActivate}
+      >
+        {media}
+      </LinkComponent>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={wrapperClassName}
+      style={wrapperStyle}
+      aria-label={item.title}
+      onClick={handleActivate}
+    >
+      {media}
+    </button>
+  );
+}
+
+export function Coverflow({
+  items,
+  activeIndex,
+  onActiveIndexChange,
+  caption,
+  freeLabel,
+  prevLabel,
+  nextLabel,
+  positionLabel,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: CoverflowProps) {
+  const scopeId = useId().replace(/[^a-zA-Z0-9]/g, "");
+  const scopeClass = `coverflow-${scopeId}`;
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const length = items.length;
+  const active = length > 0 ? wrapIndex(activeIndex, length) : 0;
+
+  /**
+   * The previous and current active index, as one value. Kept in state rather
+   * than a ref because a ref written during render gives the wrong answer on
+   * StrictMode's second pass, and because this has to be readable DURING the
+   * render that repositions the cards: it is what tells a card whether it moved
+   * with the stage or jumped the seam, and the answer decides whether that
+   * card's transition classes are applied at all.
+   */
+  const [step, setStep] = useState({ from: active, to: active, length });
+  if (step.to !== active || step.length !== length) {
+    // React re-runs the component and throws this pass away, so `step` is
+    // already correct by the time anything commits. A length change resets the
+    // pair — offsets computed against a different ring size mean nothing.
+    setStep(
+      step.length === length
+        ? { from: step.to, to: active, length }
+        : { from: active, to: active, length }
+    );
+  }
+
+  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();
+  }, []);
+
+  if (length === 0) return null;
+
+  const activeItem = items[active];
+  // No clamp at the ends: prev from 0 reports `length - 1` and next from
+  // `length - 1` reports 0, so the index the parent stores matches the ring.
+  const goTo = (index: number) => onActiveIndexChange?.(wrapIndex(index, length));
+
+  /** How far the lead itself moved, the short way round — 0 on a settled render. */
+  const activeDelta = ringOffset(step.to - step.from, length);
+
+  const visibleCards = items
+    .map((item, index) => {
+      const offset = ringOffset(index - active, length);
+      // A card that moved by anything other than `activeDelta` did not travel
+      // with the stage — it came round the back. That is the wrap, and the only
+      // thing that produces it.
+      const suppressTransition = offset !== ringOffset(index - step.from, length) - activeDelta;
+      return { item, index, offset, suppressTransition };
+    })
+    .filter(({ offset }) => Math.abs(offset) <= COVERFLOW_MAX_VISIBLE_TIER);
+
+  const hasRing = length > 1;
+
+  return (
+    <div className={cn(scopeClass, "w-full", className)}>
+      <style>{`
+        .${scopeClass} {
+          /*
+           * Every card shares one DOM box (COVERFLOW_CARD_WIDTH_CLASS above),
+           * and that box is now the LEAD's width. These are the visual
+           * footprints the JS transform math targets.
+           *
+           * --cf-scale-lead is therefore 1: the lead paints at its own size and
+           * is never resampled upward, which is what fixed it reading soft.
+           * --cf-tier-base is --cf-side-w / --cf-lead-w, the factor every side
+           * tier multiplies its depth ratio by; it must be kept in sync by hand
+           * if either width changes, because calc() cannot divide two lengths.
+           *   77 / 149 = 0.5168      120 / 210 = 0.5714
+           *
+           * Both footprints are 20% down from where they started (186/96 and
+           * 262/150): the lead was large enough that a poster meant for a feed
+           * thumbnail was being asked to carry a hero, and it showed.
+           */
+          --cf-lead-w: 149px;
+          --cf-side-w: 77px;
+          --cf-gap: 21px;
+          --cf-scale-lead: 1;
+          --cf-tier-base: 0.5168;
+          --cf-x1: calc(var(--cf-lead-w) / 2 + var(--cf-gap) + var(--cf-side-w) / 2);
+          --cf-x2: calc(var(--cf-x1) + var(--cf-side-w) + var(--cf-gap));
+          --cf-x3: calc(var(--cf-x2) + var(--cf-side-w) + var(--cf-gap));
+        }
+        @media (min-width: 640px) {
+          .${scopeClass} {
+            --cf-lead-w: 210px;
+            --cf-side-w: 120px;
+            --cf-gap: 26px;
+            --cf-tier-base: 0.5714;
+          }
+        }
+        .${scopeClass} .coverflow-lane {
+          animation: ${scopeClass}-drift ${COVERFLOW_DRIFT_DURATION_SECONDS}s ease-in-out infinite alternate;
+        }
+        .${scopeClass}[data-offscreen="true"] .coverflow-lane {
+          animation-play-state: paused;
+        }
+        @keyframes ${scopeClass}-drift {
+          from { transform: translateX(-${COVERFLOW_DRIFT_PIXELS}px); }
+          to { transform: translateX(${COVERFLOW_DRIFT_PIXELS}px); }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .${scopeClass} .coverflow-lane {
+            animation: none;
+            transform: none;
+          }
+        }
+      `}</style>
+
+      <div
+        ref={containerRef}
+        // CLIPS HORIZONTALLY ONLY. The clip is what hides a card teleporting
+        // round the back of the ring, and that only ever happens off the left
+        // and right edges — but `overflow-hidden` clips both axes, so it was
+        // also slicing a hard horizontal line through the cards' drop shadows
+        // at the top and bottom edges.
+        //
+        // `overflow-x: clip` rather than `hidden` is the load-bearing part:
+        // `hidden` forces the other axis to compute to `auto` (a scroll
+        // container), so `overflow-x-hidden overflow-y-visible` is not a thing
+        // the cascade will give you. `clip` carries no such rule, so the pair
+        // below means what it says.
+        className="relative flex h-[300px] items-center justify-center overflow-x-clip overflow-y-visible [perspective:900px] sm:h-[380px] sm:[perspective:1400px]"
+      >
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-y-0 left-0 z-10 w-[120px] bg-gradient-to-r from-background to-transparent"
+        />
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-y-0 right-0 z-10 w-[120px] bg-gradient-to-l from-background to-transparent"
+        />
+
+        {/* One item is not a ring — an arrow here would be a control that
+            looks operable and does nothing, so there is no arrow. */}
+        {hasRing && (
+          <>
+            <button
+              type="button"
+              aria-label={prevLabel}
+              onClick={() => goTo(active - 1)}
+              className={cn(COVERFLOW_ARROW_CLASS, "left-2 sm:left-4")}
+            >
+              <ChevronLeft className="h-5 w-5" aria-hidden />
+            </button>
+            <button
+              type="button"
+              aria-label={nextLabel}
+              onClick={() => goTo(active + 1)}
+              className={cn(COVERFLOW_ARROW_CLASS, "right-2 sm:right-4")}
+            >
+              <ChevronRight className="h-5 w-5" aria-hidden />
+            </button>
+          </>
+        )}
+
+        <div className="coverflow-lane relative h-full w-full [transform-style:preserve-3d] motion-reduce:[animation:none]">
+          {visibleCards.map(({ item, index, offset, suppressTransition }) => (
+            <CoverflowCard
+              key={item.id}
+              item={item}
+              index={index}
+              offset={offset}
+              suppressTransition={suppressTransition}
+              freeLabel={freeLabel}
+              onActivate={goTo}
+              linkComponent={LinkComponent}
+            />
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-4 space-y-4 text-center">
+        <div aria-live="polite">
+          <h3 className="text-[17px] font-extrabold">{activeItem.title}</h3>
+          <p className="mt-[3px] text-[12.5px] text-muted-foreground">{activeItem.meta}</p>
+        </div>
+
+        {/* The dot is a separator, not decoration: it only exists when there
+            are in fact two things to separate. With one of them absent the
+            row collapses to a single centred span, no dangling glyph, no gap
+            — and the whole row disappears when neither is given. */}
+        {(caption || positionLabel) && (
+          <div className="flex items-center justify-center gap-2 text-[12.5px] text-muted-foreground">
+            {caption && <span>{caption}</span>}
+            {caption && positionLabel && <span aria-hidden="true">·</span>}
+            {positionLabel && <span>{positionLabel}</span>}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DayRailChip, DayRailChipSkeleton } from "./day-rail-chip";
+import type { DayRailChipLabels } from "./event-types";
+
+const labels: DayRailChipLabels = { noEvents: "No events" };
+
+const meta: Meta<typeof DayRailChip> = {
+  title: "Events/DayRailChip",
+  component: DayRailChip,
+  tags: ["autodocs"],
+  args: { labels },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "One day in the timeline's day rail. An empty day keeps its place in the rail with an em dash and no density dot — ten of fourteen days routinely read empty, and dropping them would make the rail lie about how far ahead it reaches.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DayRailChip>;
+
+export const Active: Story = {
+  args: { label: "Today", dayNumber: "3", count: 15, isActive: true },
+};
+
+export const HasEvents: Story = {
+  args: { label: "Fri", dayNumber: "4", count: 17 },
+};
+
+/** Weekend days keep the bold weight while inactive, so they stay findable. */
+export const Weekend: Story = {
+  args: { label: "Sat", dayNumber: "5", count: 23, isWeekend: true },
+};
+
+/** No dot, an em dash rather than "0", muted label — but still in the rail. */
+export const Empty: Story = {
+  args: { label: "Fri", dayNumber: "11", count: 0 },
+};
+
+/** The full fortnight, as the rail actually renders it. */
+export const TheRail: Story = {
+  render: () => {
+    const days: Array<[string, string, number, boolean]> = [
+      ["Today", "3", 15, false],
+      ["Fri", "4", 17, true],
+      ["Sat", "5", 23, true],
+      ["Sun", "6", 10, true],
+      ["Mon", "7", 5, false],
+      ["Tue", "8", 3, false],
+      ["Wed", "9", 3, false],
+      ["Thu", "10", 2, false],
+      ["Fri", "11", 0, true],
+      ["Sat", "12", 4, true],
+      ["Sun", "13", 3, true],
+      ["Mon", "14", 0, false],
+    ];
+    return (
+      <div className="flex max-w-[390px] gap-2 overflow-x-auto px-4 pb-1">
+        {days.map(([label, dayNumber, count, isWeekend], i) => (
+          <DayRailChip
+            key={`${label}-${dayNumber}`}
+            label={label}
+            dayNumber={dayNumber}
+            count={count}
+            isWeekend={isWeekend}
+            isActive={i === 0}
+            labels={labels}
+            onClick={() => {}}
+          />
+        ))}
+      </div>
+    );
+  },
+};
+
+/** Loading state — one chip's footprint (62×50, 12px radius). */
+export const Loading: Story = {
+  render: () => <DayRailChipSkeleton />,
+};
+
+/** The full fortnight, loading — six chips at the rail's own `gap-2` (8px). */
+export const LoadingRail: Story = {
+  render: () => (
+    <div className="flex max-w-[390px] gap-2 overflow-x-auto px-4 pb-1">
+      {Array.from({ length: 6 }).map((_, index) => (
+        <DayRailChipSkeleton key={index} />
+      ))}
+    </div>
+  ),
+};
+
+/** A loading rail beside the loaded one, so any geometry drift is visible at a glance. */
+export const LoadingVsLoaded: Story = {
+  render: () => (
+    <div className="space-y-2">
+      <div className="flex max-w-[390px] gap-2 overflow-x-auto px-4 pb-1">
+        {Array.from({ length: 6 }).map((_, index) => (
+          <DayRailChipSkeleton key={index} />
+        ))}
+      </div>
+      <div className="flex max-w-[390px] gap-2 overflow-x-auto px-4 pb-1">
+        <DayRailChip label="Today" dayNumber="3" count={15} isActive labels={labels} onClick={() => {}} />
+        <DayRailChip label="Fri" dayNumber="4" count={17} labels={labels} onClick={() => {}} />
+        <DayRailChip label="Sat" dayNumber="5" count={23} isWeekend labels={labels} onClick={() => {}} />
+        <DayRailChip label="Sun" dayNumber="6" count={10} isWeekend labels={labels} onClick={() => {}} />
+        <DayRailChip label="Mon" dayNumber="7" count={5} labels={labels} onClick={() => {}} />
+        <DayRailChip label="Tue" dayNumber="8" count={3} labels={labels} onClick={() => {}} />
+      </div>
+    </div>
+  ),
+};
+
+/** With a filter applied, counts redraw and most days fall to zero. */
+export const FilteredToFreeEntry: Story = {
+  render: () => {
+    const days: Array<[string, string, number]> = [
+      ["Today", "3", 2],
+      ["Fri", "4", 3],
+      ["Sat", "5", 2],
+      ["Sun", "6", 0],
+      ["Mon", "7", 1],
+      ["Tue", "8", 0],
+      ["Wed", "9", 1],
+      ["Thu", "10", 0],
+    ];
+    return (
+      <div className="flex max-w-[390px] gap-2 overflow-x-auto px-4 pb-1">
+        {days.map(([label, dayNumber, count], i) => (
+          <DayRailChip
+            key={`${label}-${dayNumber}`}
+            label={label}
+            dayNumber={dayNumber}
+            count={count}
+            isActive={i === 2}
+            labels={labels}
+            onClick={() => {}}
+          />
+        ))}
+      </div>
+    );
+  },
+};