@bearmenu/ui 0.8.4 → 0.8.6

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

@@ -0,0 +1,180 @@
+"use client";
+
+import * as React from "react";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./skeleton";
+
+/**
+ * EventDayHeader — the day divider in the timeline: an oversized day number,
+ * the weekday, and a meta line.
+ *
+ * The meta line is ONE caller-composed string. The design's variants
+ * ("September · 15 events · 3 live", "September · nothing listed yet",
+ * "September · 2 of 23 are free") do not decompose into counts, and building
+ * them from parts inside the DS would bake in English clause order.
+ *
+ * A day with nothing on still gets a header — the empty state belongs under it,
+ * not instead of it, so the reader can see the date they are looking at.
+ */
+
+export type EventDayHeaderLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+};
+
+function DefaultLink({ href, ...props }: EventDayHeaderLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type EventDayHeaderProps = {
+  /** Day of month as displayed, e.g. "03". */
+  dayNumber: string;
+  /** Weekday name, already localised. */
+  weekday: string;
+  /** Month plus counts, composed by the caller. */
+  meta: string;
+  /**
+   * Trailing slot, right-aligned. The desktop design puts a "See the whole day →"
+   * chip here; mobile has no slot and falls back to the chevron below. Passing an
+   * action REPLACES the chevron rather than sitting beside it — two affordances
+   * for one destination is the duplication this design set out to remove.
+   *
+   * The action is rendered outside the header's own link/button when the header
+   * is itself interactive, so an interactive chip is never nested inside an
+   * anchor (invalid HTML, and it steals the row's click target).
+   */
+  action?: React.ReactNode;
+  /**
+   * Larger desktop scale: 58px day number, 18px weekday, 12.5px meta,
+   * against the mobile 40/15/11.5.
+   */
+  size?: "sm" | "default";
+  href?: string;
+  linkComponent?: React.ComponentType<EventDayHeaderLinkProps>;
+  onClick?: () => void;
+  className?: string;
+};
+
+export function EventDayHeader({
+  dayNumber,
+  weekday,
+  meta,
+  action,
+  size = "sm",
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className,
+}: EventDayHeaderProps) {
+  const isInteractive = !!href || !!onClick;
+  const large = size === "default";
+
+  const body = (
+    <>
+      <div
+        className={cn(
+          "font-black leading-[0.82] tracking-[-0.05em] tabular-nums",
+          large ? "text-[58px]" : "text-[40px]"
+        )}
+      >
+        {dayNumber}
+      </div>
+      <div className={large ? "pb-1" : "pb-0.5"}>
+        <div
+          className={cn("font-extrabold tracking-[-0.015em]", large ? "text-lg" : "text-[15px]")}
+        >
+          {weekday}
+        </div>
+        <div
+          className={cn(
+            "mt-0.5 text-muted-foreground",
+            large ? "whitespace-nowrap text-[12.5px]" : "text-[11.5px]"
+          )}
+        >
+          {meta}
+        </div>
+      </div>
+      {/* The chevron only stands in when there is no action slot — see `action`. */}
+      {!action && isInteractive && (
+        <ChevronRight className="ml-auto mb-1 h-[18px] w-[18px] text-muted-foreground" aria-hidden />
+      )}
+    </>
+  );
+
+  // The interactive region covers the date only, never the action slot. Nesting
+  // the design's "See the whole day" chip inside the header's own anchor would
+  // be invalid HTML and would swallow the chip's click.
+  const dateClasses = cn(
+    "flex min-w-0 items-end gap-3 text-left",
+    !action && "flex-1",
+    isInteractive &&
+      "cursor-pointer rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+  );
+
+  const date = href ? (
+    <LinkComponent href={href} className={dateClasses}>
+      {body}
+    </LinkComponent>
+  ) : onClick ? (
+    <button type="button" className={dateClasses} onClick={onClick}>
+      {body}
+    </button>
+  ) : (
+    <div className={dateClasses}>{body}</div>
+  );
+
+  return (
+    <div
+      className={cn(
+        "relative flex w-full items-end gap-3 pb-3 pt-[18px]",
+        large && "gap-[18px] pb-4",
+        className
+      )}
+    >
+      {/* NO BOTTOM RULE. A 50px day number above its own month/count line is
+          already the loudest thing on the page, and the timeline puts an hour
+          puck carrying its own hairline immediately beneath — so this drew a
+          second horizontal line a few pixels from a first, dividing a heading
+          from the content it introduces rather than separating two things a
+          reader could run together. Rules stay where they divide peers: rows
+          in a list, an hour heading from its count. */}
+      {date}
+      {action && <div className="ml-auto mb-1.5 shrink-0">{action}</div>}
+    </div>
+  );
+}
+
+export type EventDayHeaderSkeletonProps = {
+  /** Reserves space for the chevron — only render this once you know the header will be tappable. */
+  interactive?: boolean;
+  className?: string;
+};
+
+/**
+ * Mirrors `<EventDayHeader>`'s geometry. The big day-number block (86×50,
+ * 10px radius) and the weekday/meta column (120×16, 200×12) come from the
+ * source design's own desktop day-header skeleton — the chevron does not: the
+ * design's spec for it (a 170×34 pill pushed right) matches nothing in this
+ * component, whose only trailing affordance is an 18×18 chevron icon, so that
+ * placeholder is sized from the real component instead.
+ */
+export function EventDayHeaderSkeleton({ interactive, className }: EventDayHeaderSkeletonProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn("relative flex w-full items-end gap-3 pb-3 pt-[18px] text-left", className)}
+    >
+      {/* Mirrors the real header, which no longer draws a bottom rule. */}
+      <Skeleton className="h-[50px] w-[86px] rounded-[10px]" />
+
+      <div className="space-y-0.5 pb-0.5">
+        <Skeleton className="h-4 w-[120px]" />
+        <Skeleton className="h-3 w-[200px]" />
+      </div>
+
+      {interactive && <Skeleton className="mb-1 ml-auto h-[18px] w-[18px] shrink-0 rounded-full" />}
+    </div>
+  );
+}

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

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EventDaySeparator, EventDaySeparatorSkeleton } from "./event-day-separator";
+
+const meta: Meta<typeof EventDaySeparator> = {
+  title: "Events/EventDaySeparator",
+  component: EventDaySeparator,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[600px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The day divider in the list view. Distinct from `<EventDayHeader>` (the timeline's oversized day-number header) — different surface, different density. Both `label` and `count` are caller-composed strings.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EventDaySeparator>;
+
+export const Default: Story = {
+  args: { label: "Today · Thursday 3 September", count: "15 events" },
+};
+
+export const NoCount: Story = {
+  args: { label: "Friday 4 September" },
+};
+
+export const Small: Story = {
+  args: { label: "Today · Thursday 3 September", count: "15 events", size: "sm" },
+};
+
+/** Loading state — identical geometry to `Default`, so nothing shifts on data arrival. */
+export const Loading: Story = {
+  render: () => <EventDaySeparatorSkeleton />,
+};
+
+/** The `size="sm"` loading geometry. */
+export const LoadingSmall: Story = {
+  render: () => <EventDaySeparatorSkeleton size="sm" />,
+};
+
+/** Loading above loaded, so any geometry drift is visible at a glance. */
+export const LoadingVsLoaded: Story = {
+  render: () => (
+    <div>
+      <EventDaySeparatorSkeleton />
+      <EventDaySeparator label="Today · Thursday 3 September" count="15 events" />
+    </div>
+  ),
+};
+
+/** A stack, as the list view actually renders consecutive days. */
+export const Stack: Story = {
+  render: () => (
+    <div>
+      <EventDaySeparator label="Today · Thursday 3 September" count="15 events" />
+      <div className="py-2 text-sm text-muted-foreground">…events for today…</div>
+      <EventDaySeparator label="Friday 4 September" count="17 events" />
+      <div className="py-2 text-sm text-muted-foreground">…events for tomorrow…</div>
+    </div>
+  ),
+};

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