@bearmenu/ui 0.8.4 → 0.8.7

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

package/src/components/event-hub-hero.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EventHubHero, EventHubHeroSkeleton } from "./event-hub-hero";
+import { PosterStack } from "./poster-stack";
+
+function posterDataUri(label: string, fill: string) {
+  return (
+    "data:image/svg+xml;utf8," +
+    encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400"><rect width="300" height="400" fill="${fill}"/><text x="50%" y="50%" font-family="monospace" font-size="20" fill="#fff" text-anchor="middle">${label}</text></svg>`
+    )
+  );
+}
+
+// Explicitly annotated rather than `satisfies`: the meta-level decorator makes
+// the inferred type reference storybook's internal CSF module, which tsc cannot
+// name portably (TS2742).
+const meta: Meta<typeof EventHubHero> = {
+  title: "Events/EventHubHero",
+  component: EventHubHero,
+  tags: ["autodocs"],
+  args: {
+    eyebrow: "Updated today",
+    title: "Everything happening in Bucharest",
+    intro:
+      "Concerts, parties, exhibitions and everything in between — hand-curated and updated every morning.",
+    stats: [
+      { value: "312", label: "events this month" },
+      { value: "48", label: "venues" },
+      { value: "19", label: "free tonight" },
+    ],
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-6">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof EventHubHero>;
+
+export const Default: Story = {};
+
+export const WithPosterStackAside: Story = {
+  args: {
+    aside: (
+      <PosterStack
+        posters={[
+          { src: posterDataUri("1", "#7a5c46"), alt: "Psihotrop poster" },
+          { src: posterDataUri("2", "#4a6a5c"), alt: "Warehouse rave poster" },
+          { src: posterDataUri("3", "#6a5c8a"), alt: "Jazz night poster" },
+        ]}
+      />
+    ),
+  },
+};
+
+export const NoAside: Story = {
+  args: { aside: undefined },
+};
+
+export const Skeleton: Story = {
+  render: () => <EventHubHeroSkeleton aside={<div className="aspect-[3/2] rounded-xl bg-muted" />} />,
+};

package/src/components/event-hub-hero.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./skeleton";
+
+/**
+ * EventHubHero — the hub's opening block: an eyebrow, a big headline, an
+ * intro line and a stats row on the left; an arbitrary slot (the poster
+ * stack, in the source design) on the right. Stacks on mobile.
+ *
+ * All copy and stat values arrive pre-formatted — the DS holds no `Intl`
+ * locale and does not format numbers.
+ */
+
+export type EventHubHeroStat = {
+  value: string;
+  label: string;
+};
+
+export type EventHubHeroProps = {
+  /** Small caps-style label above the title, e.g. "Updated today". */
+  eyebrow: string;
+  title: string;
+  intro: string;
+  stats: EventHubHeroStat[];
+  /** The right-column slot — the poster stack in the source design. */
+  aside?: React.ReactNode;
+  className?: string;
+};
+
+export function EventHubHero({ eyebrow, title, intro, stats, aside, className }: EventHubHeroProps) {
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-1 gap-8 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
+        className
+      )}
+    >
+      <div className="flex flex-col gap-4">
+        <p className="text-[11.5px] font-extrabold tracking-[0.12em] text-muted-foreground">
+          {eyebrow}
+        </p>
+
+        <h1 className="text-[31px] font-black leading-[1.05] tracking-[-0.035em] text-foreground md:text-[42px] md:tracking-[-0.04em]">
+          {title}
+        </h1>
+
+        <p className="max-w-[520px] text-[14px] leading-[1.6] text-muted-foreground md:text-[15px] md:leading-[1.65]">
+          {intro}
+        </p>
+
+        <div className="flex gap-[22px] pt-1.5 md:gap-[30px]">
+          {stats.map((stat) => (
+            <div key={stat.label} className="flex flex-col">
+              <span className="text-[24px] font-black leading-none tracking-[-0.03em] tabular-nums text-foreground md:text-[30px]">
+                {stat.value}
+              </span>
+              <span className="mt-1 text-[11px] text-muted-foreground md:mt-[5px] md:text-[12.5px]">
+                {stat.label}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {aside && <div className="min-w-0">{aside}</div>}
+    </div>
+  );
+}
+
+export type EventHubHeroSkeletonProps = {
+  /** The right-column slot, e.g. a `PosterStack`-shaped placeholder. Mirrors `aside` on the real component. */
+  aside?: React.ReactNode;
+  className?: string;
+};
+
+export function EventHubHeroSkeleton({ aside, className }: EventHubHeroSkeletonProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "grid grid-cols-1 gap-8 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
+        className
+      )}
+    >
+      <div className="flex flex-col gap-4">
+        <Skeleton className="h-[11.5px] w-28" />
+
+        <Skeleton className="h-[31px] w-full max-w-[420px] md:h-[42px]" />
+
+        <div className="flex max-w-[520px] flex-col gap-1.5">
+          <Skeleton className="h-[14px] w-full md:h-[15px]" />
+          <Skeleton className="h-[14px] w-4/5 md:h-[15px]" />
+        </div>
+
+        <div className="flex gap-[22px] pt-1.5 md:gap-[30px]">
+          {Array.from({ length: 3 }, (_, index) => (
+            <div key={index} className="flex flex-col">
+              <Skeleton className="h-[24px] w-10 md:h-[30px]" />
+              <Skeleton className="mt-1 h-[11px] w-16 md:mt-[5px] md:h-[12.5px]" />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {aside && <div className="min-w-0">{aside}</div>}
+    </div>
+  );
+}

package/src/components/event-index-row.stories.tsx

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Music, Wine } from "lucide-react";
+import { EventIndexRow } from "./event-index-row";
+import { EventDaySeparator } from "./event-day-separator";
+import { EventPosterFallback } from "./event-poster-fallback";
+
+const POSTER = "https://images.unsplash.com/photo-1514525253161-7a46d19cd819?w=256&h=256&fit=crop";
+
+const DESCRIPTION =
+  "Trupa cântă un set de două ore din repertoriul propriu plus reinterpretări de standarde, cu pauză de treizeci de minute la mijloc. Barul rămâne deschis până la ora două, iar bucătăria ia ultima comandă la unsprezece.";
+
+const meta: Meta<typeof EventIndexRow> = {
+  title: "Events/EventIndexRow",
+  component: EventIndexRow,
+  tags: ["autodocs"],
+  args: {
+    title: "Afterwork Karaoke",
+    href: "#event",
+    when: "26 iulie, 20:00–23:00",
+    venue: "Cafe Solas",
+    venueHref: "#place",
+    fee: "intrare liberă",
+    tags: ["Karaoke", "Live music"],
+    description: DESCRIPTION,
+    posterUrl: POSTER,
+  },
+  // The row sits on a tinted band on its real surface; the decorator mirrors
+  // that so the `outline` tags and the `bg-card/60` hover are judged against
+  // the ground they actually land on, not against plain `--background`.
+  decorators: [
+    (Story) => (
+      <div className="w-full max-w-[900px] bg-muted/50 p-6">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof EventIndexRow>;
+
+export const Default: Story = {};
+
+/** The shape the section actually renders: a heading that ends in its own rule,
+ *  then rows, the first of which suppresses its rule to avoid doubling. */
+export const InAGroup: Story = {
+  render: (args) => (
+    <div>
+      <EventDaySeparator as="h2" label="Evenimente azi în Cluj-Napoca" count="3 evenimente" />
+      <EventIndexRow {...args} hideRule />
+      <EventIndexRow
+        {...args}
+        title="Degustare de vinuri naturale"
+        when="26 iulie, 19:00"
+        venue="Enoteca Veche"
+        fee="bilet 80 lei"
+        tags={["Wine tasting"]}
+        posterUrl={undefined}
+        fallback={<EventPosterFallback icon={<Wine className="h-5 w-5 md:h-7 md:w-7" aria-hidden />} />}
+      />
+      <EventIndexRow
+        {...args}
+        title="Peggy Gou b2b special guest"
+        when="26 iulie, 23:00–05:00"
+        venue="Form Space"
+        fee="bilet 140 lei"
+        tags={["Techno", "Party"]}
+        fallback={<EventPosterFallback icon={<Music className="h-5 w-5 md:h-7 md:w-7" aria-hidden />} />}
+      />
+    </div>
+  ),
+};
+
+/** No poster: the gradient fallback is already layered behind the image slot,
+ *  so this is what a missing OR a failed image renders — with no JS. */
+export const NoPoster: Story = {
+  args: { posterUrl: undefined },
+};
+
+export const TagDerivedFallback: Story = {
+  args: {
+    posterUrl: undefined,
+    fallback: <EventPosterFallback icon={<Wine className="h-5 w-5 md:h-7 md:w-7" aria-hidden />} />,
+  },
+};
+
+/** An event nobody wrote a description for. The row closes up rather than
+ *  reserving empty space, so a group of mixed rows still scans. */
+export const NoDescription: Story = {
+  args: { description: undefined },
+};
+
+/** A venue with no place page — the name stays plain text rather than becoming
+ *  a link to nowhere. */
+export const NoVenueLink: Story = {
+  args: { venueHref: undefined },
+};
+
+export const NoTags: Story = {
+  args: { tags: undefined },
+};
+
+/** Long titles WRAP. They are document-outline headings, so truncating one
+ *  would hide text from the outline the section exists to build. */
+export const LongTitle: Story = {
+  args: {
+    title:
+      "Concert aniversar: douăzeci de ani de la primul album, cu invitați speciali și orchestră de cameră",
+  },
+};
+
+/** `hideRule` on its own, for the first row directly under any heading that
+ *  already draws a rule. */
+export const FirstInGroup: Story = {
+  args: { hideRule: true },
+};