@bearmenu/ui 0.8.8 → 0.8.10

package/src/components/convergence.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { motion, useReducedMotion, type Variants } from "framer-motion";
+import { cn } from "../lib/utils";
+import { duration, ease, springSnappy, stagger } from "../lib/motion";
+
+/**
+ * Convergence — many things on the left becoming one thing on the right.
+ *
+ * The diagram the explainers are built on: several spellings of a dish
+ * converging on one concept; a column of reviews converging on one mention
+ * count. The DS draws the SHAPE — a stack of sources, hairlines curving into
+ * a single point, the target — and the caller draws the nodes, because what a
+ * source is (a chip, a redacted line, a thumbnail) is the caller's data.
+ *
+ * ## The motion tells the story
+ *
+ * Three beats on mount, overlapping, under 700ms: the many arrive (each
+ * source slides in from the left, staggered), the lines draw toward the one
+ * (each curve starts once its source is about half visible, so cause reads
+ * before effect), and the one lands (the target scales in on a snappy spring
+ * while the last lines are still in flight — it catches them rather than
+ * waiting for a clean hand-off). Self-contained: the sheet this sits in
+ * animates by CSS `data-state`, which nothing here could await, and the
+ * `delayChildren` already puts the content a beat behind the surface.
+ *
+ * `useReducedMotion` owns the fallback — the stylesheet's global rule only
+ * shortens CSS transitions and does not reach Framer's own scheduler. Under
+ * it the diagram renders settled and fades in once. `animate={false}` is a
+ * separate switch for static reuse (a docs frame), independent of the
+ * reader's setting.
+ *
+ * ## Why the lines are an SVG and not borders
+ *
+ * A curve from each source to one point cannot be a border on anything. The
+ * SVG stretches to the sources column's height (`preserveAspectRatio: none`)
+ * and keeps its hairlines at one pixel through `vector-effect`, so the curves
+ * follow however tall the stack is without the stroke thickening with it.
+ * `pathLength` is normalised by Framer to the path's own space, so the draw
+ * is unaffected by the stretch.
+ */
+
+/** The first line starts once the first source is about half visible. */
+const LINE_LEAD = 0.15;
+/** The target lands before the last line finishes — it catches them. */
+const TARGET_DELAY = 0.38;
+
+const sourcesContainer: Variants = {
+  hidden: {},
+  show: { transition: { delayChildren: 0.06, staggerChildren: stagger.tight } },
+};
+
+const sourceItem: Variants = {
+  hidden: { opacity: 0, x: -8 },
+  show: { opacity: 1, x: 0, transition: { duration: duration.quick, ease: ease.enter } },
+};
+
+const targetItem: Variants = {
+  hidden: { opacity: 0, scale: 0.92 },
+  show: { opacity: 1, scale: 1, transition: { delay: TARGET_DELAY, ...springSnappy } },
+};
+
+export type ConvergeLinesProps = {
+  /** How many sources the lines leave from. */
+  count: number;
+  /** Draw the curves in, source by source. Off: drawn already. */
+  animate?: boolean;
+  className?: string;
+};
+
+const LINES_WIDTH = 40;
+const LINES_HEIGHT = 100;
+
+export function ConvergeLines({ count, animate = true, className }: ConvergeLinesProps) {
+  const mid = LINES_HEIGHT / 2;
+  return (
+    <svg
+      aria-hidden
+      viewBox={`0 0 ${LINES_WIDTH} ${LINES_HEIGHT}`}
+      preserveAspectRatio="none"
+      className={cn("h-full w-10 text-border", className)}
+    >
+      {Array.from({ length: count }, (_, index) => {
+        const y = ((index + 0.5) / count) * LINES_HEIGHT;
+        const d = `M0 ${y} C ${LINES_WIDTH / 2} ${y}, ${LINES_WIDTH / 2} ${mid}, ${LINES_WIDTH} ${mid}`;
+        const stroke = {
+          d,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 1.5,
+          strokeLinecap: "round" as const,
+          vectorEffect: "non-scaling-stroke" as const,
+        };
+        return animate ? (
+          <motion.path
+            key={index}
+            {...stroke}
+            initial={{ pathLength: 0, opacity: 0 }}
+            animate={{ pathLength: 1, opacity: 1 }}
+            transition={{
+              delay: LINE_LEAD + index * stagger.tight,
+              duration: duration.standard,
+              ease: ease.standard,
+            }}
+          />
+        ) : (
+          <path key={index} {...stroke} />
+        );
+      })}
+    </svg>
+  );
+}
+
+export type ConvergenceProps = {
+  /** The many. One node each; the stack fans slightly so it reads as a spread, not a list. */
+  sources: ReactNode[];
+  /** The one. */
+  target: ReactNode;
+  /** The entrance choreography. Off for static reuse; the reader's reduced-motion setting is honoured either way. */
+  animate?: boolean;
+  /** The curves' colour, e.g. `"text-white/30"` on a dark stage. Defaults to the border. */
+  linesClassName?: string;
+  className?: string;
+};
+
+export function Convergence({
+  sources,
+  target,
+  animate = true,
+  linesClassName,
+  className,
+}: ConvergenceProps) {
+  const reduce = useReducedMotion();
+  const run = animate && !reduce;
+  const fadeOnly = animate && reduce;
+
+  return (
+    <motion.div
+      className={cn("grid grid-cols-[minmax(0,1fr)_auto_auto] items-center", className)}
+      initial={fadeOnly ? { opacity: 0 } : false}
+      animate={fadeOnly ? { opacity: 1 } : undefined}
+      transition={{ duration: duration.quick, ease: ease.standard }}
+    >
+      <motion.div
+        className={cn(
+          "flex min-w-0 flex-col items-start justify-center gap-2 py-1",
+          /* The fan: the middle sources sit a little further right than the
+             ends, so five chips read as one hand of cards, not as a menu. */
+          "[&>*:nth-child(2)]:translate-x-1.5 [&>*:nth-child(3)]:translate-x-3 [&>*:nth-child(4)]:translate-x-1.5"
+        )}
+        variants={run ? sourcesContainer : undefined}
+        initial={run ? "hidden" : false}
+        animate={run ? "show" : undefined}
+      >
+        {sources.map((node, index) => (
+          <motion.div key={index} className="flex max-w-full" variants={run ? sourceItem : undefined}>
+            {node}
+          </motion.div>
+        ))}
+      </motion.div>
+
+      <div className="self-stretch">
+        <ConvergeLines count={sources.length} animate={run} className={linesClassName} />
+      </div>
+
+      <motion.div
+        className="flex items-center"
+        variants={run ? targetItem : undefined}
+        initial={run ? "hidden" : false}
+        animate={run ? "show" : undefined}
+      >
+        {target}
+      </motion.div>
+    </motion.div>
+  );
+}

package/src/components/event-compact-row.tsx

@@ -74,7 +74,7 @@ export type EventCompactRowProps = {
    * repeating it on each one is noise — the caller has something more
    * differentiating to say instead (the event's own description). The
    * timeline keeps the default: there the venue IS what tells rows apart
-   * across the night. Mirrors `menu-item-row.tsx`'s prop of the same name and
+   * across the night. Mirrors `menu-item.tsx`'s prop of the same name and
    * intent.
    */
   subtitle?: string;

package/src/components/event-detail-panel.stories.tsx

@@ -1,81 +1,127 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { ExternalLink, Navigation, Phone, Share2, X } from "lucide-react";
 import {
+  ExternalLink,
+  Navigation,
+  Phone,
+  Share2,
+  X,
+  CalendarClock,
+} from "lucide-react";
+import { Button } from "./button";
+import {
+  EventDetailFooter,
+  EventDetailGhostAction,
   EventDetailPanel,
+  EventDetailPanelError,
   EventDetailPanelSkeleton,
   type EventDetailPanelLabels,
 } from "./event-detail-panel";
 import type { EventFormatters, EventPreview } from "./event-types";
 
 const labels: EventDetailPanelLabels = {
-  free: "Free",
-  liveNow: "Live now",
+  free: "Free entry",
+  liveNow: "Now",
+  ended: "Ended",
   venueHeading: "Event venue",
+  venueNoPage: "name only — no venue page yet",
+  lineupHeading: "Line-up",
   aboutHeading: "About this event",
+  noDescription: "Event details coming soon.",
+  readMore: "Read more",
+  readLess: "Read less",
 };
 
 const formatters: EventFormatters = {
-  time: () => "20:00",
-  day: () => "Sat, Sep 5",
+  time: () => "17:30",
+  day: () => "Tue, Sep 8",
   price: (amount) => `${amount} RON`,
 };
 
+const description =
+  "An event for future brides featuring the new Rosa Clara 2027 collection and wedding planning advice from industry specialists. Doors at 17:00. The first look runs about an hour, then the atelier stays open for fittings until half seven. Bubbles throughout, and the kitchen puts out canapés at six.";
+
 const event: EventPreview = {
   id: "e1",
-  title: "Psihotrop Live",
-  description:
-    "A full live set spanning the band's whole catalogue, with support from Mara Ionescu. Doors at 19:30.",
-  location: "Atelier Café",
-  place_name: "Atelier Café",
-  starts_at: "2026-09-05T20:00:00",
+  title: "Brides & Bubbles at Sophie Wedding House",
+  description,
+  location: "Sophie Wedding House",
+  place_name: "Sophie Wedding House",
+  place_slug: "sophie-wedding-house",
+  starts_at: "2026-09-08T17:30:00",
   entry_fee: 50,
+  hype_score: 72,
 };
 
+const performers = [
+  "Rosa Clara",
+  "Sophie Atelier",
+  "Mara Ionescu",
+  "DJ Vlad",
+  "Trio Boema",
+  "Ana Pop",
+  "Mihai Ionescu",
+  "Quartetto",
+];
+
 const venue = {
-  name: "Atelier Café",
-  meta: "Str. Iuliu Maniu 5 · open until 01:00",
+  name: "Sophie Wedding House",
+  address: "Str. Iuliu Maniu 5",
   ratingLabel: "4.7",
-  href: "/places/atelier-cafe",
+  isOpenNow: true,
+  href: "/places/sophie-wedding-house",
 };
 
-const roundBtn =
-  "flex h-9 w-9 items-center justify-center rounded-full bg-white/90 text-foreground";
+const overlayButton =
+  "flex h-9 w-9 items-center justify-center rounded-full bg-black/40 text-white backdrop-blur-sm";
 
-const headerActions = (
+const sheetActions = (
   <>
-    <button type="button" aria-label="Share" className={`absolute left-3.5 top-3.5 ${roundBtn}`}>
+    <button type="button" aria-label="Share" className={overlayButton}>
       <Share2 className="h-4 w-4" aria-hidden />
     </button>
-    <button type="button" aria-label="Close" className={`absolute right-3.5 top-3.5 ${roundBtn}`}>
-      <X className="h-[17px] w-[17px]" aria-hidden />
-    </button>
-  </>
-);
-
-const footer = (
-  <>
-    <button
-      type="button"
-      className="flex h-[46px] flex-1 items-center justify-center gap-2 rounded-xl bg-primary text-sm font-bold text-primary-foreground"
-    >
-      <Phone className="h-4 w-4" aria-hidden />
-      Reserve a spot
-    </button>
     <button
       type="button"
-      className="flex h-[46px] items-center gap-2 rounded-xl border border-border px-4 text-sm font-bold"
+      aria-label="Close"
+      className={`ml-auto ${overlayButton}`}
     >
-      <Navigation className="h-4 w-4" aria-hidden />
-      Directions
+      <X className="h-[17px] w-[17px]" aria-hidden />
     </button>
   </>
 );
 
-const externalLink = (
-  <a href="#" className="flex items-center gap-1.5 text-[13.5px] font-bold text-primary">
-    <ExternalLink className="h-3.5 w-3.5" aria-hidden />
-    View on Instagram
-  </a>
+const hypePill = (
+  <span className="inline-flex h-6 items-center gap-1 rounded-full bg-[image:var(--gradient-primary)] px-2.5 text-[11.5px] font-bold text-primary-foreground">
+    Popular
+  </span>
+);
+
+const footer = (
+  <EventDetailFooter
+    ghosts={[
+      <EventDetailGhostAction
+        key="dir"
+        icon={<Navigation className="h-3.5 w-3.5" aria-hidden />}
+        href="https://maps.google.com"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Directions
+      </EventDetailGhostAction>,
+      <EventDetailGhostAction
+        key="page"
+        icon={<ExternalLink className="h-3.5 w-3.5" aria-hidden />}
+        href="/events/e/brides-and-bubbles"
+      >
+        Event page
+      </EventDetailGhostAction>,
+    ]}
+    primary={
+      <Button fullWidth>
+        <Phone aria-hidden />
+        Get tickets · 50 RON
+      </Button>
+    }
+  />
 );
 
 const meta: Meta<typeof EventDetailPanel> = {
@@ -86,18 +132,20 @@ const meta: Meta<typeof EventDetailPanel> = {
     event,
     labels,
     formatters,
-    dateLine: "Saturday, September 5 · Starts at 20:00",
+    dateLine: "Tuesday, September 8 · Starts at 17:30",
     venue,
-    tags: ["Live music"],
-    headerActions,
+    tags: ["Workshop", "Tasting"],
+    performers,
+    showAllPerformersLabel: "Show all 8 performers",
+    hype: hypePill,
+    headerActions: sheetActions,
     footer,
-    externalLink,
   },
   parameters: {
     docs: {
       description: {
         component:
-          "The BODY of the detail sheet, not a sheet itself — the DS already ships `Sheet` and `Drawer`, and the app mounts this inside the side sheet on desktop and the bottom sheet on mobile. This is the terminal surface for acting on an event, which is why the cards that open it carry no actions of their own.",
+          "The body of the event detail sheet and the base the event page extends. Not a sheet: mount it in `Sheet` (desktop) or `Drawer` (mobile). The hero is capped per host so the venue card clears the fold; status, fee, hype and tags share one chip row; the footer is one primary over a ghost row.",
       },
     },
   },
@@ -106,86 +154,146 @@ const meta: Meta<typeof EventDetailPanel> = {
 export default meta;
 type Story = StoryObj<typeof EventDetailPanel>;
 
-/** Desktop side sheet — 460px wide, 4:5 poster. */
+/** The desktop side sheet: 480px wide, hero capped at 300px. */
 export const SideSheet: Story = {
   decorators: [
     (Story) => (
-      <div className="h-[820px] w-[460px] overflow-hidden rounded-[18px] shadow-2xl">
+      <div className="h-[820px] w-[480px] overflow-hidden rounded-2xl shadow-[var(--shadow-overlay)]">
         <Story />
       </div>
     ),
   ],
 };
 
-/** Mobile bottom sheet — compact size, same 4:5 poster, tighter type. The hero scrolls away with the body; only the footer stays put. */
-export const BottomSheet: Story = {
-  args: { size: "compact" },
+/** The phone drawer: `compact` caps the hero at 318px. The host draws the handle and a Back pill. */
+export const PhoneDrawer: Story = {
+  args: {
+    size: "compact",
+    headerActions: (
+      <>
+        <span className="inline-flex h-9 items-center gap-1.5 rounded-full bg-black/40 pl-2.5 pr-3 text-[13px] font-semibold text-white backdrop-blur-sm">
+          Back
+        </span>
+        <button
+          type="button"
+          aria-label="Share"
+          className={`ml-auto ${overlayButton}`}
+        >
+          <Share2 className="h-4 w-4" aria-hidden />
+        </button>
+      </>
+    ),
+  },
   decorators: [
     (Story) => (
-      <div className="h-[720px] w-full max-w-[390px] overflow-hidden rounded-t-[20px] shadow-2xl">
-        <div className="mx-auto mt-2.5 mb-1 h-1 w-[38px] rounded-full bg-border" />
+      <div className="h-[720px] w-[390px] overflow-hidden rounded-t-[20px] shadow-[var(--shadow-overlay)]">
         <Story />
       </div>
     ),
   ],
 };
 
-/** Live events get the on-air chip beside the category and price. */
-export const LiveNow: Story = {
-  args: { isLive: true },
-  decorators: [
-    (Story) => (
-      <div className="h-[820px] w-[460px] overflow-hidden rounded-[18px] shadow-2xl">
-        <Story />
-      </div>
-    ),
-  ],
+/** Live, free, no poster: the gradient fallback, the Now chip and the free chip. */
+export const LiveFreeNoPoster: Story = {
+  args: {
+    event: { ...event, poster_url: undefined, entry_fee: 0 },
+    status: "live",
+  },
+  decorators: SideSheet.decorators,
 };
 
-/** A free event: `entry_fee: 0` renders the free chip instead of a price. */
-export const FreeEntry: Story = {
-  args: { event: { ...event, entry_fee: 0 } },
-  decorators: [
-    (Story) => (
-      <div className="h-[820px] w-[460px] overflow-hidden rounded-[18px] shadow-2xl">
-        <Story />
-      </div>
-    ),
-  ],
+/** Starting soon: the accent countdown chip. */
+export const Soon: Story = {
+  args: { status: "soon", soonLabel: "Starts in 2h 10m" },
+  decorators: SideSheet.decorators,
 };
 
-/** No description and no venue — the sections drop out rather than render empty headings. */
+/**
+ * Unknown hour, no booking, a venue with no page, no line-up, no description.
+ * Every optional region drops out; the venue card says why it is not a link.
+ */
 export const Sparse: Story = {
   args: {
-    event: { ...event, description: undefined, entry_fee: undefined },
-    venue: undefined,
-    tags: undefined,
-    externalLink: undefined,
+    event: { ...event, description: "", hype_score: 0 },
+    dateLine: "Tuesday, September 8 · time to be announced",
+    venue: { name: "Sophie Wedding House" },
+    performers: undefined,
+    hype: undefined,
+    footer: (
+      <EventDetailFooter
+        ghosts={[
+          <EventDetailGhostAction
+            key="page"
+            icon={<ExternalLink className="h-3.5 w-3.5" aria-hidden />}
+            href="/events/e/x"
+          >
+            See the event page
+          </EventDetailGhostAction>,
+        ]}
+        primary={
+          <Button fullWidth>
+            <Navigation aria-hidden />
+            Directions
+          </Button>
+        }
+      />
+    ),
   },
-  decorators: [
-    (Story) => (
-      <div className="h-[560px] w-[460px] overflow-hidden rounded-[18px] shadow-2xl">
-        <Story />
-      </div>
+  decorators: SideSheet.decorators,
+};
+
+/** Ended: poster desaturated, title muted, explicit chip, and the primary replaced rather than disabled. */
+export const Ended: Story = {
+  args: {
+    status: "ended",
+    footer: (
+      <EventDetailFooter
+        ghosts={[
+          <EventDetailGhostAction
+            key="dir"
+            icon={<Navigation className="h-3.5 w-3.5" aria-hidden />}
+            href="https://maps.google.com"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Directions
+          </EventDetailGhostAction>,
+          <EventDetailGhostAction
+            key="page"
+            icon={<ExternalLink className="h-3.5 w-3.5" aria-hidden />}
+            href="/events/e/x"
+          >
+            Event page
+          </EventDetailGhostAction>,
+        ]}
+        primary={
+          <Button fullWidth>
+            <CalendarClock aria-hidden />
+            See what's on tonight
+          </Button>
+        }
+      />
     ),
-  ],
+  },
+  decorators: SideSheet.decorators,
 };
 
-/** Desktop side sheet loading state. */
-export const Skeleton: Story = {
-  render: () => (
-    <div className="h-[820px] w-[460px] overflow-hidden rounded-[18px] shadow-2xl">
-      <EventDetailPanelSkeleton />
-    </div>
-  ),
+export const Loading: Story = {
+  render: () => <EventDetailPanelSkeleton headerActions={sheetActions} />,
+  decorators: SideSheet.decorators,
 };
 
-/** Mobile bottom sheet loading state — compact size, same 4:5 poster. */
-export const SkeletonCompact: Story = {
+export const Error: Story = {
   render: () => (
-    <div className="h-[720px] w-full max-w-[390px] overflow-hidden rounded-t-[20px] shadow-2xl">
-      <div className="mx-auto mt-2.5 mb-1 h-1 w-[38px] rounded-full bg-border" />
-      <EventDetailPanelSkeleton size="compact" />
-    </div>
+    <EventDetailPanelError
+      title="We could not load this event"
+      description="It may have been taken down, or the connection dropped on the way. The rest of tonight is still there."
+      retryLabel="Try again"
+      onRetry={() => {}}
+      secondaryLabel="See what's on tonight"
+      secondaryHref="/events/schedule"
+      headerActions={sheetActions}
+    />
   ),
+  decorators: SideSheet.decorators,
 };