@bearmenu/ui 0.8.3 → 0.8.6

package/src/components/event-day-separator.tsx

@@ -0,0 +1,95 @@
+import type { ElementType } from "react";
+import { cn } from "../lib/utils";
+import { Separator } from "./separator";
+import { Skeleton } from "./skeleton";
+
+/**
+ * EventDaySeparator — the day divider in the list view (as opposed to
+ * `<EventDayHeader>`, the timeline's oversized day-number header — the two
+ * live on different surfaces with different densities, not a size variant of
+ * one component).
+ *
+ * Both `label` and `count` are caller-composed strings, same reasoning as
+ * `<EventDayHeader>`'s `meta`: "Today · Thursday 3 September" / "15 events"
+ * don't decompose into parts without baking in English clause order.
+ *
+ * Renders the label as a real heading (`as`, default `h2`) so a list of these
+ * gives the page a document outline instead of being purely decorative rules.
+ *
+ * NOTE ON WEIGHT: this heading is deliberately SMALLER and lighter than the
+ * row titles beneath it. The boundary is already the strongest structural
+ * event on the page — a rule to the right edge, 24px of air above it, a muted
+ * count beside it — so it needs no ink on top of that. And the day is chrome
+ * on a scan surface where the events are the content: when the chrome is the
+ * heaviest thing on screen, the eye lands on the same repeated word every
+ * eight rows and nothing in the actual inventory ever wins. If the boundary
+ * ever needs to read louder, the levers are the rule and the air (move the
+ * `<Separator>` above the label), not the weight.
+ */
+
+export type EventDaySeparatorProps = {
+  label: string;
+  count?: string;
+  size?: "sm" | "default";
+  /** Heading level for `label`. Defaults to `h2`. */
+  as?: ElementType;
+  className?: string;
+};
+
+export function EventDaySeparator({
+  label,
+  count,
+  size = "default",
+  as: Tag = "h2",
+  className,
+}: EventDaySeparatorProps) {
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-[11px]",
+        size === "sm" ? "pt-[18px] pb-1" : "pt-6 pb-2",
+        className
+      )}
+    >
+      <Tag className={cn("font-semibold", size === "sm" ? "text-[13px]" : "text-sm")}>
+        {label}
+      </Tag>
+
+      {count && (
+        <span className={cn("text-muted-foreground", size === "sm" ? "text-[11.5px]" : "text-xs")}>
+          {count}
+        </span>
+      )}
+
+      <Separator className="flex-1" />
+    </div>
+  );
+}
+
+export type EventDaySeparatorSkeletonProps = {
+  /** Matches `EventDaySeparatorProps["size"]`. */
+  size?: "sm" | "default";
+  /** Shows the count placeholder — omit for label-only separators. */
+  showCount?: boolean;
+  className?: string;
+};
+
+/** Mirrors `<EventDaySeparator>`'s geometry exactly so nothing shifts when data lands. */
+export function EventDaySeparatorSkeleton({
+  size = "default",
+  showCount = true,
+  className,
+}: EventDaySeparatorSkeletonProps) {
+  const isSm = size === "sm";
+
+  return (
+    <div
+      aria-hidden="true"
+      className={cn("flex items-center gap-[11px]", isSm ? "pt-[18px] pb-1" : "pt-6 pb-2", className)}
+    >
+      <Skeleton className={cn(isSm ? "h-3" : "h-3.5", "w-40")} />
+      {showCount && <Skeleton className="h-3 w-16" />}
+      <Separator className="flex-1" />
+    </div>
+  );
+}

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

@@ -0,0 +1,191 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ExternalLink, Navigation, Phone, Share2, X } from "lucide-react";
+import {
+  EventDetailPanel,
+  EventDetailPanelSkeleton,
+  type EventDetailPanelLabels,
+} from "./event-detail-panel";
+import type { EventFormatters, EventPreview } from "./event-types";
+
+const labels: EventDetailPanelLabels = {
+  free: "Free",
+  liveNow: "Live now",
+  venueHeading: "Event venue",
+  aboutHeading: "About this event",
+};
+
+const formatters: EventFormatters = {
+  time: () => "20:00",
+  day: () => "Sat, Sep 5",
+  price: (amount) => `${amount} RON`,
+};
+
+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",
+  entry_fee: 50,
+};
+
+const venue = {
+  name: "Atelier Café",
+  meta: "Str. Iuliu Maniu 5 · open until 01:00",
+  ratingLabel: "4.7",
+  href: "/places/atelier-cafe",
+};
+
+const roundBtn =
+  "flex h-9 w-9 items-center justify-center rounded-full bg-white/90 text-foreground";
+
+const headerActions = (
+  <>
+    <button type="button" aria-label="Share" className={`absolute left-3.5 top-3.5 ${roundBtn}`}>
+      <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"
+    >
+      <Navigation className="h-4 w-4" aria-hidden />
+      Directions
+    </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 meta: Meta<typeof EventDetailPanel> = {
+  title: "Events/EventDetailPanel",
+  component: EventDetailPanel,
+  tags: ["autodocs"],
+  args: {
+    event,
+    labels,
+    formatters,
+    dateLine: "Saturday, September 5 · Starts at 20:00",
+    venue,
+    tags: ["Live music"],
+    headerActions,
+    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.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EventDetailPanel>;
+
+/** Desktop side sheet — 460px wide, 4:5 poster. */
+export const SideSheet: Story = {
+  decorators: [
+    (Story) => (
+      <div className="h-[820px] w-[460px] overflow-hidden rounded-[18px] shadow-2xl">
+        <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" },
+  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" />
+        <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>
+    ),
+  ],
+};
+
+/** 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>
+    ),
+  ],
+};
+
+/** No description and no venue — the sections drop out rather than render empty headings. */
+export const Sparse: Story = {
+  args: {
+    event: { ...event, description: undefined, entry_fee: undefined },
+    venue: undefined,
+    tags: undefined,
+    externalLink: undefined,
+  },
+  decorators: [
+    (Story) => (
+      <div className="h-[560px] w-[460px] overflow-hidden rounded-[18px] shadow-2xl">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** Desktop side sheet loading state. */
+export const Skeleton: Story = {
+  render: () => (
+    <div className="h-[820px] w-[460px] overflow-hidden rounded-[18px] shadow-2xl">
+      <EventDetailPanelSkeleton />
+    </div>
+  ),
+};
+
+/** Mobile bottom sheet loading state — compact size, same 4:5 poster. */
+export const SkeletonCompact: 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>
+  ),
+};

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

@@ -0,0 +1,360 @@
+"use client";
+
+import * as React from "react";
+import { Calendar, ChevronRight, Radio, Star } from "lucide-react";
+import { cn } from "../lib/utils";
+import { EventPosterFallback } from "./event-poster-fallback";
+import { Separator } from "./separator";
+import { Skeleton } from "./skeleton";
+import {
+  resolveEventEntryFee,
+  type EventFormatters,
+  type EventPreview,
+} from "./event-types";
+
+/**
+ * EventDetailPanel — the BODY of the event detail sheet.
+ *
+ * Deliberately not a sheet. The design opens this as a side sheet over a dimmed
+ * page on desktop and a bottom sheet on mobile, and the DS already ships `Sheet`
+ * and `Drawer`; owning sheet mechanics a third time here would fork them. The
+ * consuming app mounts this inside whichever container the breakpoint calls for.
+ *
+ * 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 footer is where booking and
+ * directions live.
+ *
+ * Everything is injected: strings via `labels`, times via `formatters`, and the
+ * close/share affordances as `headerActions` so the sheet container owns
+ * dismissal (bearmenu sheets close by drag handle, not by back navigation).
+ */
+
+export type EventDetailPanelLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+};
+
+function DefaultLink({ href, ...props }: EventDetailPanelLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type EventDetailVenue = {
+  name: string;
+  /** Address plus opening line, composed by the caller. */
+  meta?: string;
+  ratingLabel?: string;
+  thumbnailUrl?: string;
+  href?: string;
+};
+
+export type EventDetailPanelLabels = {
+  free: string;
+  liveNow: string;
+  /** Section heading above the venue card. */
+  venueHeading: string;
+  /** Section heading above the description. */
+  aboutHeading: string;
+};
+
+export type EventDetailPanelProps = {
+  event: EventPreview;
+  labels: EventDetailPanelLabels;
+  formatters: EventFormatters;
+  /**
+   * The date line, composed by the caller — the design reads
+   * "Saturday, September 5 · Starts at 20:00", whose clause order and
+   * preposition are locale-dependent.
+   */
+  dateLine: string;
+  venue?: EventDetailVenue;
+  /** Category chips beside the live/price chips. */
+  tags?: string[];
+  isLive?: boolean;
+  /** Close and share controls, positioned over the poster by this component. */
+  headerActions?: React.ReactNode;
+  /** Footer actions — the booking CTA and directions. Rendered in a sticky footer. */
+  footer?: React.ReactNode;
+  /** An external link row, e.g. "View on Instagram". */
+  externalLink?: React.ReactNode;
+  /** `compact` is the mobile bottom sheet: tighter type and padding, same 4:5 poster. */
+  size?: "compact" | "default";
+  linkComponent?: React.ComponentType<EventDetailPanelLinkProps>;
+  className?: string;
+  /** Rendered instead of the poster when it's absent. Defaults to `<EventPosterFallback />`. */
+  fallback?: React.ReactNode;
+};
+
+const CHIP =
+  "inline-flex items-center gap-1 rounded-full border border-border px-2.5 text-xs";
+
+export function EventDetailPanel({
+  event,
+  labels,
+  formatters,
+  dateLine,
+  venue,
+  tags,
+  isLive,
+  headerActions,
+  footer,
+  externalLink,
+  size = "default",
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+  fallback = <EventPosterFallback />,
+}: EventDetailPanelProps) {
+  const compact = size === "compact";
+  const fee = resolveEventEntryFee(event);
+
+  const venueCard = venue && (
+    <div className="flex items-center gap-3 rounded-[13px] border border-border p-2.5">
+      <div
+        className={cn(
+          "shrink-0 overflow-hidden rounded-[10px] bg-muted",
+          compact ? "h-12 w-12" : "h-[52px] w-[52px]"
+        )}
+      >
+        {venue.thumbnailUrl && (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={venue.thumbnailUrl}
+            alt=""
+            className="h-full w-full object-cover"
+            loading="lazy"
+            decoding="async"
+          />
+        )}
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className={cn("font-bold", compact ? "text-[13.5px]" : "text-sm")}>{venue.name}</div>
+        {venue.meta && (
+          <div className={cn("text-muted-foreground", compact ? "text-[11.5px]" : "text-xs")}>
+            {venue.meta}
+          </div>
+        )}
+        {venue.ratingLabel && (
+          <div className="mt-0.5 flex items-center gap-1 text-xs font-bold">
+            <Star className="h-3 w-3" aria-hidden />
+            {venue.ratingLabel}
+          </div>
+        )}
+      </div>
+      <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+    </div>
+  );
+
+  return (
+    <div className={cn("flex h-full flex-col overflow-hidden bg-card", className)}>
+      <div className="flex-1 overflow-y-auto">
+        <div className="relative aspect-[4/5] shrink-0 overflow-hidden bg-muted">
+          {event.poster_url ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={event.poster_url}
+              alt={event.title}
+              className="h-full w-full object-cover"
+              loading="eager"
+              decoding="async"
+            />
+          ) : (
+            fallback
+          )}
+          {headerActions}
+        </div>
+
+        <div
+          className={cn(
+            "flex flex-col gap-3.5",
+            compact ? "px-4 pt-4" : "px-[22px] pt-5"
+          )}
+        >
+          <h2
+            className={cn(
+              "font-extrabold leading-[1.25] tracking-[-0.02em]",
+              compact ? "text-xl" : "text-[21px]"
+            )}
+          >
+            {event.title}
+          </h2>
+
+          <div
+            className={cn(
+              "flex items-center gap-1.5 text-muted-foreground",
+              compact ? "text-[12.5px]" : "text-[13px]"
+            )}
+          >
+            <Calendar className={compact ? "h-3.5 w-3.5" : "h-4 w-4"} aria-hidden />
+            {dateLine}
+          </div>
+
+          {/* The live chip is green, not the brand accent: "on now" reads as one
+              colour across every events surface, and it is the same green the app
+              already uses for "open now". */}
+          <div className="flex flex-wrap gap-1.5">
+            {isLive && (
+              <span
+                className={cn(
+                  CHIP,
+                  "h-7 border-success/30 bg-success/10 font-semibold text-success"
+                )}
+              >
+                <Radio className="h-3 w-3" aria-hidden />
+                {labels.liveNow}
+              </span>
+            )}
+            {tags?.map((tag) => (
+              <span key={tag} className={cn(CHIP, "h-7")}>
+                {tag}
+              </span>
+            ))}
+            {fee.kind === "free" && (
+              <span className={cn(CHIP, "h-7 border-success/40 font-semibold text-success")}>
+                {labels.free}
+              </span>
+            )}
+            {fee.kind === "paid" && (
+              <span className={cn(CHIP, "h-7")}>{formatters.price(fee.amountRon)}</span>
+            )}
+          </div>
+
+          {venue && (
+            <div>
+              <div className="pb-2 text-[13px] font-extrabold">{labels.venueHeading}</div>
+              {venue.href ? (
+                <LinkComponent href={venue.href} className="block">
+                  {venueCard}
+                </LinkComponent>
+              ) : (
+                venueCard
+              )}
+            </div>
+          )}
+
+          {event.description && (
+            <div>
+              <div className="pb-1.5 text-[13px] font-extrabold">{labels.aboutHeading}</div>
+              <p
+                className={cn(
+                  "leading-[1.6] text-muted-foreground",
+                  compact ? "text-[13px]" : "text-[13.5px]"
+                )}
+              >
+                {event.description}
+              </p>
+            </div>
+          )}
+
+          {externalLink}
+          <div className="h-2" aria-hidden />
+        </div>
+      </div>
+
+      {footer && (
+        <div
+          className={cn(
+            "sticky bottom-0 flex shrink-0 gap-2.5 bg-card",
+            compact
+              ? "px-4 pt-3 pb-[max(1.375rem,env(safe-area-inset-bottom))]"
+              : "px-[22px] pt-4 pb-[max(1.25rem,env(safe-area-inset-bottom))]"
+          )}
+        >
+          <Separator className="absolute inset-x-0 top-0" />
+
+          {footer}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export type EventDetailPanelSkeletonProps = {
+  /** `compact` is the mobile bottom sheet: tighter type and padding, same 4:5 poster. */
+  size?: "compact" | "default";
+  /** Close and share controls, positioned over the poster — same slot as the real component. */
+  headerActions?: React.ReactNode;
+  className?: string;
+};
+
+/** Mirrors `<EventDetailPanel>`'s geometry exactly: the hero scrolls away with the body, the footer is sticky. */
+export function EventDetailPanelSkeleton({
+  size = "default",
+  headerActions,
+  className,
+}: EventDetailPanelSkeletonProps) {
+  const compact = size === "compact";
+
+  return (
+    <div
+      aria-hidden="true"
+      className={cn("flex h-full flex-col overflow-hidden bg-card", className)}
+    >
+      <div className="flex-1 overflow-y-auto">
+        <div className="relative aspect-[4/5] shrink-0 overflow-hidden bg-muted">
+          {headerActions}
+        </div>
+
+        <div
+          className={cn(
+            "flex flex-col gap-3.5",
+            compact ? "px-4 pt-4" : "px-[22px] pt-5"
+          )}
+        >
+          <Skeleton className={cn("w-3/4", compact ? "h-5" : "h-[21px]")} />
+
+          <div className="flex items-center gap-1.5">
+            <Skeleton className={cn("shrink-0 rounded-full", compact ? "h-3.5 w-3.5" : "h-4 w-4")} />
+            <Skeleton className={cn("w-48", compact ? "h-[12.5px]" : "h-[13px]")} />
+          </div>
+
+          <div className="flex flex-wrap gap-1.5">
+            <Skeleton className="h-7 w-20 rounded-full" />
+            <Skeleton className="h-7 w-16 rounded-full" />
+          </div>
+
+          <div>
+            <Skeleton className="mb-2 h-[13px] w-28" />
+            <div className="flex items-center gap-3 rounded-[13px] border border-border p-2.5">
+              <Skeleton
+                className={cn(
+                  "shrink-0 rounded-[10px]",
+                  compact ? "h-12 w-12" : "h-[52px] w-[52px]"
+                )}
+              />
+              <div className="min-w-0 flex-1">
+                <Skeleton className={cn("w-1/2", compact ? "h-[13.5px]" : "h-3.5")} />
+                <Skeleton className={cn("mt-1 w-3/4", compact ? "h-[11.5px]" : "h-3")} />
+              </div>
+              <Skeleton className="h-4 w-4 shrink-0 rounded-full" />
+            </div>
+          </div>
+
+          <div>
+            <Skeleton className="mb-1.5 h-[13px] w-32" />
+            <div className="flex flex-col gap-1.5">
+              <Skeleton className={cn("w-full", compact ? "h-[13px]" : "h-[13.5px]")} />
+              <Skeleton className={cn("w-full", compact ? "h-[13px]" : "h-[13.5px]")} />
+              <Skeleton className={cn("w-2/3", compact ? "h-[13px]" : "h-[13.5px]")} />
+            </div>
+          </div>
+
+          <div className="h-2" aria-hidden />
+        </div>
+      </div>
+
+      <div
+        className={cn(
+          "sticky bottom-0 flex shrink-0 gap-2.5 bg-card",
+          compact
+            ? "px-4 pt-3 pb-[max(1.375rem,env(safe-area-inset-bottom))]"
+            : "px-[22px] pt-4 pb-[max(1.25rem,env(safe-area-inset-bottom))]"
+        )}
+      >
+        <Separator className="absolute inset-x-0 top-0" />
+
+        <Skeleton className="h-[46px] flex-1 rounded-xl" />
+        <Skeleton className="h-[46px] w-24 rounded-xl" />
+      </div>
+    </div>
+  );
+}