@bearmenu/ui 0.8.8 → 0.8.9

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,
 };

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

@@ -0,0 +1,181 @@
+import { describe, it, expect, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import {
+  EventDetailFooter,
+  EventDetailGhostAction,
+  EventDetailPanel,
+  EventDetailPanelError,
+  type EventDetailPanelLabels,
+} from "./event-detail-panel";
+import type { EventFormatters, EventPreview } from "./event-types";
+
+const labels: EventDetailPanelLabels = {
+  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: () => "17:30",
+  day: () => "Tue",
+  price: (n) => `${n} RON`,
+};
+const event: EventPreview = {
+  id: "e1",
+  title: "Brides & Bubbles",
+  description: "",
+  location: "Sophie Wedding House",
+  starts_at: "2026-09-08T17:30:00",
+  entry_fee: 50,
+};
+const base = { event, labels, formatters, dateLine: "Tuesday · 17:30" };
+
+describe("EventDetailPanel", () => {
+  it("shows the status chip for live, soon and ended, and none when upcoming", () => {
+    const { rerender } = render(<EventDetailPanel {...base} />);
+    expect(screen.queryByText("Now")).not.toBeInTheDocument();
+    rerender(<EventDetailPanel {...base} status="live" />);
+    expect(screen.getByText("Now")).toBeInTheDocument();
+    rerender(
+      <EventDetailPanel {...base} status="soon" soonLabel="Starts in 2h" />,
+    );
+    expect(screen.getByText("Starts in 2h")).toBeInTheDocument();
+    rerender(<EventDetailPanel {...base} status="ended" />);
+    expect(screen.getByText("Ended")).toBeInTheDocument();
+  });
+
+  it("renders the fee as a chip: paid amount, free label, nothing when unknown", () => {
+    const { rerender } = render(<EventDetailPanel {...base} />);
+    expect(screen.getByText("50 RON")).toBeInTheDocument();
+    rerender(<EventDetailPanel {...base} event={{ ...event, entry_fee: 0 }} />);
+    expect(screen.getByText("Free entry")).toBeInTheDocument();
+    rerender(
+      <EventDetailPanel {...base} event={{ ...event, entry_fee: undefined }} />,
+    );
+    expect(screen.queryByText(/RON|Free entry/)).not.toBeInTheDocument();
+  });
+
+  it("links the venue card only when the venue has a page, and says so otherwise", () => {
+    const { rerender } = render(
+      <EventDetailPanel
+        {...base}
+        venue={{
+          name: "Sophie",
+          address: "Str. 5",
+          ratingLabel: "4.7",
+          href: "/places/sophie",
+        }}
+      />,
+    );
+    expect(screen.getByRole("link", { name: /Sophie/ })).toHaveAttribute(
+      "href",
+      "/places/sophie",
+    );
+    expect(screen.queryByText(labels.venueNoPage)).not.toBeInTheDocument();
+
+    rerender(<EventDetailPanel {...base} venue={{ name: "Sophie" }} />);
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+    expect(screen.getByText(labels.venueNoPage)).toBeInTheDocument();
+  });
+
+  it("previews five performers and reveals the rest on request", () => {
+    const performers = ["A", "B", "C", "D", "E", "F", "G"];
+    render(
+      <EventDetailPanel
+        {...base}
+        performers={performers}
+        showAllPerformersLabel="Show all 7"
+      />,
+    );
+    expect(screen.queryByText("F")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "Show all 7" }));
+    expect(screen.getByText("F")).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Show all 7" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("clamps a long description behind Read more and prints the placeholder for none", () => {
+    const long = "x".repeat(300);
+    const { rerender } = render(
+      <EventDetailPanel {...base} event={{ ...event, description: long }} />,
+    );
+    expect(screen.getByText(long).className).toContain("line-clamp-4");
+    fireEvent.click(screen.getByRole("button", { name: "Read more" }));
+    expect(screen.getByText(long).className).not.toContain("line-clamp-4");
+    expect(
+      screen.getByRole("button", { name: "Read less" }),
+    ).toBeInTheDocument();
+
+    rerender(<EventDetailPanel {...base} />);
+    expect(screen.getByText("Event details coming soon.")).toBeInTheDocument();
+  });
+
+  it("dims the poster and mutes the title when ended, not the whole panel", () => {
+    render(
+      <EventDetailPanel
+        {...base}
+        status="ended"
+        event={{ ...event, poster_url: "p.jpg" }}
+      />,
+    );
+    expect(screen.getByRole("img").parentElement?.className).toContain(
+      "saturate-",
+    );
+    expect(
+      screen.getByRole("heading", { name: "Brides & Bubbles" }).className,
+    ).toContain("text-muted-foreground");
+  });
+});
+
+describe("EventDetailFooter", () => {
+  it("lays out the ghosts in one row above the primary", () => {
+    render(
+      <EventDetailFooter
+        ghosts={[
+          <EventDetailGhostAction key="a" href="/a">
+            Directions
+          </EventDetailGhostAction>,
+          <EventDetailGhostAction key="b" href="/b">
+            Event page
+          </EventDetailGhostAction>,
+        ]}
+        primary={<button type="button">Reserve</button>}
+      />,
+    );
+    expect(
+      screen.getByRole("link", { name: "Directions" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "Event page" }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Reserve" })).toBeInTheDocument();
+  });
+});
+
+describe("EventDetailPanelError", () => {
+  it("offers a retry and a way onward", () => {
+    const onRetry = vi.fn();
+    render(
+      <EventDetailPanelError
+        title="We could not load this event"
+        description="Try again."
+        retryLabel="Try again"
+        onRetry={onRetry}
+        secondaryLabel="See what's on tonight"
+        secondaryHref="/events/schedule"
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Try again" }));
+    expect(onRetry).toHaveBeenCalled();
+    expect(
+      screen.getByRole("link", { name: "See what's on tonight" }),
+    ).toHaveAttribute("href", "/events/schedule");
+  });
+});