@bearmenu/ui 0.8.3 → 0.8.6

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

@@ -0,0 +1,335 @@
+"use client";
+
+import { memo, useState } from "react";
+import type { ReactNode } from "react";
+import { MapPin, Radio } from "lucide-react";
+import { cn } from "../lib/utils";
+import { EventPosterFallback } from "./event-poster-fallback";
+import { Separator } from "./separator";
+import { Skeleton } from "./skeleton";
+import { Tag } from "./tag";
+import { TagGroup } from "./tag-group";
+import {
+  resolveEventEntryFee,
+  type EventDateBadgeFormatters,
+  type EventListRowLabels,
+  type EventPreview,
+} from "./event-types";
+
+/**
+ * EventListRow — the dense row used by the list view at phone width.
+ *
+ * Roughly eight events per screen against the poster card's two, which is the
+ * whole reason the list view exists: fourteen days of inventory is punishing to
+ * scan in posters.
+ *
+ * NOTE ON THE ROW ACTION: this row used to carry a trailing "Reserve" CTA that
+ * `<EventCard>` deliberately does not, and an earlier version of this comment
+ * asked for the two surfaces to be reconciled rather than for the CTA to be
+ * quietly dropped. This is that reconciliation, and it lands differently per
+ * width. At phone width the CTA is gone: it was an inert `<span>` inside the
+ * row's own anchor, so it was drawn like a booking control (`text-primary`,
+ * bold) while doing nothing that a tap anywhere else on the row did not
+ * already do. `<EventListRowWide>` keeps a real action column, because desktop
+ * has the width for one and its row root is a container rather than a single
+ * anchor. If a CTA comes back here, it has to be a real one, not a span.
+ *
+ * NOTE ON WEIGHT: nothing in this row is heavier than 600, and only the title
+ * and the date badge reach it. Eight of these stack per screen, and at that
+ * density hierarchy comes from size and ink tier, not from weight — a field of
+ * bold text has no foreground. `Free` is the one exception (600 plus
+ * `text-success`), because it is an inducement rather than an attribute.
+ *
+ * Same contract as the rest: DS-owned view model, injected labels and
+ * formatters, plain `<img>`, anchor whenever `href` is given.
+ */
+
+export type EventListRowLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+  onClick?: (mouseEvent: React.MouseEvent) => void;
+};
+
+function DefaultLink({ href, ...props }: EventListRowLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type EventListRowProps = {
+  event: EventPreview;
+  labels: EventListRowLabels;
+  formatters: EventDateBadgeFormatters;
+  /** Currently running — fills the date badge and shows the on-air chip. */
+  isLive?: boolean;
+  /** Sold out or otherwise closed — dims the row and replaces the fee. */
+  isSoldOut?: boolean;
+  href?: string;
+  linkComponent?: React.ComponentType<EventListRowLinkProps>;
+  onClick?: (event: EventPreview, mouseEvent: React.MouseEvent) => void;
+  className?: string;
+  priority?: boolean;
+  /**
+   * Caller-resolved tag display labels for the chip line, e.g.
+   * `["Rock", "Terrace"]`. Same contract as `EventCompactRowProps.tags`: the
+   * DS holds no taxonomy display names, so the caller resolves AND caps them
+   * — two is what fits beside the live chip at 375px. Anything that does not
+   * fit is clipped whole rather than counted; see the chip line below.
+   */
+  tags?: string[];
+  /** Rendered instead of the thumbnail when it's absent or failed to load. Defaults to `<EventPosterFallback />`. */
+  fallback?: ReactNode;
+  /**
+   * Drops this row's top rule. Pass it on the FIRST row under a day heading:
+   * the heading already ends the block above it, so the row's own rule lands
+   * immediately beneath it and draws two dividers a few pixels apart. The gap
+   * is the separator there — whitespace does the same job without the second
+   * line. Same prop and same reason as `EventListRowWide` and `EventIndexRow`.
+   */
+  hideRule?: boolean;
+};
+
+export const EventListRow = memo(function EventListRow({
+  event,
+  labels,
+  formatters,
+  isLive,
+  isSoldOut,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  onClick,
+  className,
+  priority,
+  tags,
+  fallback = <EventPosterFallback />,
+  hideRule,
+}: EventListRowProps) {
+  const [imgError, setImgError] = useState(false);
+
+  const fee = resolveEventEntryFee(event);
+  const showPoster = !!event.poster_url && !imgError;
+  const venue = event.place_name ?? event.location;
+
+  /**
+   * `undefined` when the fee is UNKNOWN — the row renders nothing rather than
+   * a "Price TBA" placeholder, for the reasons `<EventListRowWide>` spells out
+   * at length. Unknown is the commonest case in this feed, so the placeholder
+   * was a repeated announcement that we do not know something, and it taught
+   * the reader to skip the one slot where a real price appears.
+   */
+  const priceText =
+    fee.kind === "free"
+      ? labels.free
+      : fee.kind === "paid"
+        ? formatters.price(fee.amountRon)
+        : undefined;
+
+  const body = (
+    <>
+      {!hideRule && <Separator className="absolute inset-x-0 top-0" />}
+
+      {/* No resting fill. Eight tinted chips per screen was the loudest
+          texture in the gutter and meant nothing; the fill now belongs to
+          `isLive` alone, so the only filled badge on screen is the live one.
+          The geometry is identical either way, so nothing shifts when the
+          tint appears. */}
+      <div
+        className={cn("w-[42px] shrink-0 rounded-[9px] py-1.5 text-center", isLive && "bg-success/10")}
+      >
+        <div
+          className={cn(
+            "text-sm font-semibold leading-none tabular-nums",
+            isLive ? "text-success" : "text-foreground"
+          )}
+        >
+          {formatters.dayNumber(event.starts_at)}
+        </div>
+        <div
+          className={cn(
+            "mt-[3px] text-[10px] font-semibold tracking-[0.06em]",
+            isLive ? "text-success" : "text-muted-foreground"
+          )}
+        >
+          {formatters.monthShort(event.starts_at)}
+        </div>
+      </div>
+
+      <div className="aspect-square w-[72px] shrink-0 overflow-hidden rounded-[9px] bg-muted">
+        {showPoster ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={event.poster_url}
+            alt=""
+            loading={priority ? "eager" : "lazy"}
+            decoding="async"
+            className="h-full w-full object-cover"
+            onError={() => setImgError(true)}
+          />
+        ) : (
+          fallback
+        )}
+      </div>
+
+      <div className="min-w-0 flex-1">
+        {/* Full title, never clamped. The row is `items-start`, so extra lines
+            grow the row downward past the 72px poster instead of squeezing
+            anything. */}
+        <div className="text-[15px] font-semibold leading-[1.3] tracking-[-0.01em]">{event.title}</div>
+
+        {/* WHEN and WHERE, with the fee pinned right. Time leads because a
+            time-sorted day group scans down that column. No `·` between time
+            and venue: the `MapPin` is the field marker, so a dot as well is
+            two separators doing one job — the glyph costs 6px net, not 16.
+            The pin is the same one the filter rail uses for VENUE. */}
+        <div className="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
+          <span className="shrink-0 tabular-nums text-foreground">
+            {formatters.time(event.starts_at)}
+          </span>
+
+          <span className="flex min-w-0 flex-1 items-center gap-1">
+            <MapPin className="h-3 w-3 shrink-0" aria-hidden />
+            <span className="truncate">{venue}</span>
+          </span>
+
+          {/* A sold-out event's price is not a fact anyone needs, so the chip
+              takes the fee's slot rather than sitting beside it. The fee stays
+              on THIS line rather than joining the chips: it is the row's only
+              inducement, and among decorative chips it would either become one
+              or duplicate the live chip's green with a second meaning. */}
+          {isSoldOut ? (
+            <Tag size="sm" variant="quiet" className="shrink-0 whitespace-nowrap">
+              {labels.soldOut}
+            </Tag>
+          ) : (
+            priceText && (
+              <span
+                className={cn(
+                  "shrink-0 tabular-nums",
+                  fee.kind === "free" && "font-semibold text-success"
+                )}
+              >
+                {priceText}
+              </span>
+            )
+          )}
+        </div>
+
+        {/* WHAT. Status first, then attributes. Live is the only FILLED chip
+            on the surface, exactly as it is the only filled date badge —
+            under deuteranopia the green/grey hues converge, so the fill and
+            the `Radio` glyph are what actually separate it, not the hue.
+
+            `h-[22px] overflow-hidden` is the overflow mechanism: `TagGroup`
+            already wraps, so a chip that does not fit moves to a second line
+            that is clipped away, and it disappears WHOLE. No half-chips, no
+            ellipsis inside a pill, and it is width-safe for caller strings of
+            any length — which a fixed count is not. Deliberately no "+2"
+            counter: nothing in this row is tappable, so a counter would
+            promise a disclosure that does not exist, eight times per screen.
+
+            The line collapses when there is nothing to say. A "Tags" filler
+            would be the same mistake as "Price TBA" — the row's spare slot
+            announcing an absence. */}
+        {(isLive || (tags && tags.length > 0)) && (
+          <TagGroup className="mt-1.5 h-[22px] overflow-hidden">
+            {isLive && (
+              <Tag size="sm" variant="success" className="shrink-0 whitespace-nowrap">
+                <Radio className="h-2.5 w-2.5" aria-hidden />
+                {labels.liveNow}
+              </Tag>
+            )}
+            {tags?.map((tag) => (
+              <Tag key={tag} size="sm" variant="quiet" className="shrink-0 whitespace-nowrap">
+                {tag}
+              </Tag>
+            ))}
+          </TagGroup>
+        )}
+      </div>
+    </>
+  );
+
+  const rootClasses = cn(
+    // `py-3`, not `py-3.5`: the chip line adds a third line back, and 8px of
+    // padding pays for most of it. Rows with a one-line title and no chips are
+    // still poster-driven and end up SHORTER than before.
+    "relative flex w-full items-start gap-3 py-3 text-left",
+    isSoldOut && "opacity-60",
+    (href || onClick) &&
+      "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    className
+  );
+
+  if (href) {
+    return (
+      <LinkComponent
+        href={href}
+        className={rootClasses}
+        onClick={onClick ? (mouseEvent) => onClick(event, mouseEvent) : undefined}
+      >
+        {body}
+      </LinkComponent>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <button type="button" className={rootClasses} onClick={(e) => onClick(event, e)}>
+        {body}
+      </button>
+    );
+  }
+
+  return <div className={rootClasses}>{body}</div>;
+});
+
+export type EventListRowSkeletonProps = {
+  /** Matches `EventListRowProps["hideRule"]` — drop the top rule on the first row of a day group. */
+  hideRule?: boolean;
+  /** Reserve the chip line. Matches the real row, where it collapses on events with no live status and no tags. */
+  showTags?: boolean;
+  className?: string;
+};
+
+/** Mirrors `<EventListRow>`'s geometry exactly so nothing shifts when data lands. */
+export function EventListRowSkeleton({
+  hideRule,
+  showTags = true,
+  className,
+}: EventListRowSkeletonProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn("relative flex w-full items-start gap-3 py-3 text-left", className)}
+    >
+      {!hideRule && <Separator className="absolute inset-x-0 top-0" />}
+
+      <div className="w-[42px] shrink-0 rounded-[9px] py-1.5 text-center">
+        <Skeleton className="mx-auto h-4 w-5" />
+        <Skeleton className="mx-auto mt-[3px] h-[10px] w-6" />
+      </div>
+
+      <Skeleton className="aspect-square w-[72px] shrink-0 rounded-[9px]" />
+
+      <div className="min-w-0 flex-1">
+        <div className="space-y-1">
+          <Skeleton className="h-[15px] w-full" />
+          <Skeleton className="h-[15px] w-2/3" />
+        </div>
+
+        <div className="mt-1 flex items-center gap-2">
+          <Skeleton className="h-3 w-10" />
+          <Skeleton className="h-3 w-3 shrink-0 rounded-full" />
+          <Skeleton className="h-3 w-24" />
+          <Skeleton className="ml-auto h-3 w-12" />
+        </div>
+
+        {showTags && (
+          <div className="mt-1.5 flex items-center gap-1.5">
+            <Skeleton className="h-[22px] w-14 rounded-full" />
+            <Skeleton className="h-[22px] w-11 rounded-full" />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/event-poster-fallback.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Music, PartyPopper } from "lucide-react";
+import { EventPosterFallback } from "./event-poster-fallback";
+
+// 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 EventPosterFallback> = {
+  title: "Events/EventPosterFallback",
+  component: EventPosterFallback,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="aspect-[4/3] w-[220px] overflow-hidden rounded-xl">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "What every events surface renders in place of a missing or failed poster — a warm `--gradient-primary` fill with a drop-shadowed icon, never a bare icon on a flat background. The consuming app passes a tag-derived icon; the default is a calendar glyph.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EventPosterFallback>;
+
+export const Default: Story = {};
+
+/** The consuming app passes a category-derived icon (e.g. from its own `getEventFallbackIcon`). */
+export const CustomIcon: Story = {
+  args: { icon: <PartyPopper className="h-10 w-10" aria-hidden /> },
+};
+
+export const MusicCategory: Story = {
+  args: { icon: <Music className="h-10 w-10" aria-hidden /> },
+};
+
+/** Portrait poster shape — the same fallback in the hub's 4:5 editorial slots. */
+export const PortraitPoster: Story = {
+  decorators: [
+    (Story) => (
+      <div className="aspect-[4/5] w-[186px] overflow-hidden rounded-xl">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/event-poster-fallback.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import { CalendarDays } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * EventPosterFallback — what every events surface renders in place of a
+ * missing (or failed) poster image.
+ *
+ * Follows the DS image-fallback rule: never a bare icon on a flat background.
+ * `--gradient-primary` is warm in both themes, so the drop-shadowed icon
+ * always sits on a tinted, on-brand surface rather than the cold, zero-chroma
+ * `bg-muted` block a poster box would otherwise show.
+ */
+export type EventPosterFallbackProps = {
+  /** Defaults to a calendar glyph. Pass a tag-derived icon (e.g. `getEventFallbackIcon`) for a closer match to the event's category. */
+  icon?: ReactNode;
+  className?: string;
+};
+
+export function EventPosterFallback({ icon, className }: EventPosterFallbackProps) {
+  return (
+    <div
+      className={cn("flex h-full w-full items-center justify-center", className)}
+      style={{ background: "var(--gradient-primary)" }}
+    >
+      <span className="text-primary-foreground/85 drop-shadow-[0_2px_6px_oklch(0_0_0/0.35)]">
+        {icon ?? <CalendarDays className="h-10 w-10" aria-hidden />}
+      </span>
+    </div>
+  );
+}

package/src/components/event-types.ts

@@ -0,0 +1,133 @@
+/**
+ * Structural mirror of the openapi `Event` schema, decoupled from any one app's
+ * generated types. Both FE and admin map their domain shapes into this type
+ * before passing data to `<EventCard>` / `<EventListRow>` / `<EventDaySection>`.
+ *
+ * Same contract as `place-types.ts`: no app schemas, no app hooks, no i18n.
+ * Every user-facing string arrives through a `*Labels` object, and every
+ * locale-sensitive format arrives as an injected formatter — the DS never owns
+ * a translation key or an `Intl` locale.
+ */
+export type EventPreview = {
+  id: string;
+  title: string;
+  description?: string;
+  /** Short teaser (≤79 chars) for tight surfaces. Absent for events without one. */
+  short_description?: string;
+  /** Free-text venue/location line as returned by the API. */
+  location: string;
+  /** ISO 8601 date-time. */
+  starts_at: string;
+  /** ISO 8601 date-time. Absent for events with no published end. */
+  ends_at?: string;
+  /**
+   * Entry fee in RON. `0` means explicitly free; `undefined` means unknown.
+   * The distinction is load-bearing — see `resolveEventEntryFee`.
+   */
+  entry_fee?: number;
+  place_name?: string;
+  place_slug?: string;
+  /** 0–100 social-buzz score. `0` for events with no engagement signal. */
+  hype_score?: number;
+  performers?: EventPerformerRef[];
+  tags?: EventTagRef[];
+  event_concept_slug?: string;
+  event_concept_title?: string;
+  /** Booking URL, when the host takes bookings through a link. */
+  bookings?: string;
+  /** Ticketing URL, when the event is ticketed. */
+  tickets?: string;
+  /**
+   * Pre-resolved poster URL. Callers compute this themselves — the API returns
+   * a `Photo.key`, and CDN base plus transform differ per app.
+   */
+  poster_url?: string;
+};
+
+/** A taxonomy tag. `slug` is only unique within its `axis_slug`. */
+export type EventTagRef = {
+  slug: string;
+  axis_slug: string;
+};
+
+export type EventPerformerRef = {
+  name: string;
+  kind: "person" | "group";
+};
+
+/**
+ * Entry-fee state. `unknown` is a real third case, not a missing `paid` — an
+ * event with no published fee must never render as free.
+ */
+export type EventEntryFee =
+  | { kind: "free" }
+  | { kind: "paid"; amountRon: number }
+  | { kind: "unknown" };
+
+/** Structural, not editorial — safe to derive inside the DS. */
+export function resolveEventEntryFee(event: EventPreview): EventEntryFee {
+  if (event.entry_fee === undefined) return { kind: "unknown" };
+  if (event.entry_fee === 0) return { kind: "free" };
+  return { kind: "paid", amountRon: event.entry_fee };
+}
+
+/**
+ * Locale-sensitive formatters, injected by the caller. The DS holds no `Intl`
+ * locale and no currency of its own.
+ */
+export type EventFormatters = {
+  /** e.g. `"20:00"` */
+  time: (isoDateTime: string) => string;
+  /** e.g. `"Sat, Sep 5"` — used when a card appears outside its own day section. */
+  day: (isoDateTime: string) => string;
+  /** e.g. `50 => "50 RON"` */
+  price: (amountRon: number) => string;
+};
+
+/**
+ * The extra formatters a date badge needs, split out rather than added to
+ * `EventFormatters` so `<EventCard>` keeps asking for only what it uses.
+ * `<EventListRow>` and the timeline's day headers need the parts separately.
+ */
+export type EventDateBadgeFormatters = EventFormatters & {
+  /** Day of month as displayed, e.g. `"05"`. */
+  dayNumber: (isoDateTime: string) => string;
+  /** Short month, e.g. `"SEP"`. */
+  monthShort: (isoDateTime: string) => string;
+};
+
+/**
+ * Labels passed to `<EventCard>`. All translation happens in the caller.
+ *
+ * There is no `priceUnknown` here on purpose. An unknown fee is the commonest
+ * case in this feed, and every surface that used to render a placeholder for
+ * it now renders nothing — see the long note in `event-list-row-wide.tsx`.
+ */
+export type EventCardLabels = {
+  free: string;
+  /** Badge shown while the event is currently running. */
+  liveNow: string;
+};
+
+/**
+ * Labels passed to `<EventListRow>`. Extends the card's with the sold-out
+ * chip; the row's ACTION labels live on `EventListRowWideLabels`, since the
+ * phone row has no action to label.
+ */
+export type EventListRowLabels = EventCardLabels & {
+  soldOut: string;
+};
+
+/** Labels passed to `<DayRailChip>`. */
+export type DayRailChipLabels = {
+  /** Screen-reader text for a day with no events, rendered where the count sits. */
+  noEvents: string;
+};
+
+/**
+ * `<EventDayHeader>` takes no labels object. Its meta line is one caller-composed
+ * string, because the shapes the design uses do not decompose into counts:
+ * "September · 15 events · 3 live", "September · nothing listed yet",
+ * "September · 2 of 23 are free". Composing those from parts inside the DS would
+ * hardcode English clause order.
+ */

package/src/components/events-empty-state.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CalendarPlus, MapPin } from "lucide-react";
+import { EventsEmptyState } from "./events-empty-state";
+
+const meta: Meta<typeof EventsEmptyState> = {
+  title: "Events/EventsEmptyState",
+  component: EventsEmptyState,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[420px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "\"Nothing on in this city\" — built fresh rather than composed from `empty-state.tsx`, since its actions have no `href`/link-component path and its button chrome doesn't produce this design's dark primary chip. The illustration follows the image-fallback rule: a photo when given, otherwise a tinted gradient circle with a drop-shadowed icon.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EventsEmptyState>;
+
+export const Default: Story = {
+  args: {
+    title: "Nothing on right now",
+    body: "There's no listed events in this city for the next two weeks — check back soon or explore what's on nearby.",
+    primaryAction: { label: "Browse nearby cities", icon: <MapPin className="h-4 w-4" aria-hidden />, href: "#" },
+    secondaryAction: { label: "Suggest an event", icon: <CalendarPlus className="h-4 w-4" aria-hidden />, onClick: () => {} },
+  },
+};
+
+export const WithIllustration: Story = {
+  args: {
+    ...Default.args,
+    illustrationUrl:
+      "https://images.unsplash.com/photo-1514525253161-7a46d19cd819?w=240&h=240&fit=crop",
+  },
+};
+
+export const OneActionOnly: Story = {
+  args: {
+    title: "No matches for these filters",
+    body: "Try clearing a filter or two — this city usually has something on.",
+    primaryAction: { label: "Clear filters", onClick: () => {} },
+  },
+};
+
+export const NoActions: Story = {
+  args: {
+    title: "Nothing scheduled yet",
+    body: "This city hasn't had any events published. Check back once venues start listing.",
+  },
+};