@bearmenu/ui 0.8.4 → 0.8.6

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

@@ -0,0 +1,181 @@
+import type { ComponentType, ReactNode } from "react";
+import { cn } from "../lib/utils";
+import { EventPosterFallback } from "./event-poster-fallback";
+import { Separator } from "./separator";
+import { Tag } from "./tag";
+import { TagGroup } from "./tag-group";
+
+/**
+ * EventIndexRow — the row of an exhaustive, crawlable event index.
+ *
+ * NOT `<EventListRowWide>`: that row belongs to the list VIEW, and it carries
+ * a price column and a Reserve chip because the list view is where you act.
+ * This row makes no claim to be operable — it is a catalogue entry. Its only
+ * affordances are two real links: the title (stretched over the whole row via
+ * `after:absolute after:inset-0`) and the venue (escaping that overlay with
+ * `relative z-10`, the same nested-link pattern `<EventListRowWide>` uses for
+ * `menuHref`). That venue link is why this could not be a variant of
+ * `<EventCompactRow>` or `<EventListRow>`: both wrap their entire body in one
+ * anchor, so a second link inside would be a nested `<a>` — invalid HTML that
+ * browsers unnest, breaking both links.
+ *
+ * NO `"use client"`, AND THAT IS LOAD-BEARING. This row's surface is a
+ * server-only prerendered page carrying ~50 of them, and every sibling row in
+ * this family is a client component for one reason: `useState` to catch
+ * `<img onError>`. Here the fallback is layered BEHIND the poster instead, so
+ * a failed image reveals the designed gradient with no JS at all. The
+ * consequence to accept: an image that returns 200 but decodes to garbage
+ * shows an empty box rather than the fallback.
+ *
+ * THE DESCRIPTION IS NEVER TRUNCATED IN THE MARKUP — it is clamped with CSS
+ * (`line-clamp`), so the full text stays in the DOM. Callers must pass the
+ * whole string. On this surface that is the entire point: the text is the
+ * page's body copy, and a row that cut it at N characters would be deleting
+ * the thing the section exists to carry.
+ *
+ * ROW RULES: this row draws its own top rule, same as `<EventListRow>` and
+ * `<EventListRowWide>`. Pass `hideRule` on the first row under a heading that
+ * already ends in one (`<EventDaySeparator>` does), or you get two rules a few
+ * pixels apart.
+ */
+
+export type EventIndexRowLinkProps = {
+  href: string;
+  className?: string;
+  children: ReactNode;
+};
+
+function DefaultLink({ href, ...props }: EventIndexRowLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type EventIndexRowProps = {
+  /** Rendered inside `as` and allowed to WRAP — a document-outline heading is never truncated. */
+  title: string;
+  /** Heading level for `title`. Defaults to `h3`, one below the group headings. */
+  as?: "h2" | "h3" | "h4";
+  href: string;
+  /** Leading emphasised fact on the meta line — caller-composed date + time, e.g. "26 iulie, 20:00–23:00". */
+  when: string;
+  venue?: string;
+  /** Makes the venue a real second link. Omit for a venue with no place page. */
+  venueHref?: string;
+  /** Plain text, never a chip: "intrare liberă" / "bilet 40 lei". */
+  fee?: string;
+  /** Display labels. `EventPreview.tags` is taxonomy coordinates the DS cannot translate, so the caller resolves and caps them. */
+  tags?: string[];
+  /** FULL text. Clamped to 3 lines (mobile) / 2 (md+) in CSS only. */
+  description?: string;
+  posterUrl?: string;
+  fallback?: ReactNode;
+  /** Suppresses the top rule. Use on the first row under a heading that draws its own. */
+  hideRule?: boolean;
+  linkComponent?: ComponentType<EventIndexRowLinkProps>;
+  className?: string;
+};
+
+export function EventIndexRow({
+  title,
+  as: Heading = "h3",
+  href,
+  when,
+  venue,
+  venueHref,
+  fee,
+  tags,
+  description,
+  posterUrl,
+  fallback = <EventPosterFallback />,
+  hideRule,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: EventIndexRowProps) {
+  const dot = (
+    <span className="px-1 text-border" aria-hidden>
+      ·
+    </span>
+  );
+
+  return (
+    <div className={cn("relative", className)}>
+      {!hideRule && <Separator className="absolute inset-x-0 top-0" />}
+
+      <div className="relative -mx-3 flex gap-3 rounded-lg px-3 py-4 transition-colors duration-150 hover:bg-card/60 motion-reduce:transition-none md:gap-4 md:py-5">
+        {/* Square poster at the same 72/104 the rest of the row family uses —
+            the editorial surfaces above this one are 4:3, but a third ratio
+            inside the ROW family would break the sibling-shape rule for one
+            section's sake. The fallback sits behind the image rather than
+            beside it in a ternary, which is what lets this whole row stay a
+            server component. */}
+        <div className="relative aspect-square w-[72px] shrink-0 overflow-hidden rounded-[9px] bg-muted md:w-[104px]">
+          <div className="absolute inset-0">{fallback}</div>
+          {posterUrl && (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={posterUrl}
+              alt=""
+              loading="lazy"
+              decoding="async"
+              className="absolute inset-0 h-full w-full object-cover"
+            />
+          )}
+        </div>
+
+        <div className="min-w-0 flex-1">
+          <Heading className="text-[15px] font-bold leading-snug tracking-[-0.01em] text-foreground md:text-[16.5px]">
+            <LinkComponent
+              href={href}
+              className="rounded-sm transition-colors duration-150 after:absolute after:inset-0 hover:text-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            >
+              {title}
+            </LinkComponent>
+          </Heading>
+
+          <p className="mt-1 text-[12px] leading-5 text-muted-foreground md:text-[12.5px]">
+            <span className="font-semibold tabular-nums text-foreground">{when}</span>
+            {venue && (
+              <>
+                {dot}
+                {venueHref ? (
+                  <LinkComponent
+                    href={venueHref}
+                    className="relative z-10 rounded-sm font-semibold text-foreground/85 underline decoration-border underline-offset-2 transition-colors duration-150 hover:text-primary hover:decoration-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                  >
+                    {venue}
+                  </LinkComponent>
+                ) : (
+                  <span className="font-semibold text-foreground/85">{venue}</span>
+                )}
+              </>
+            )}
+            {fee && (
+              <>
+                {dot}
+                {fee}
+              </>
+            )}
+          </p>
+
+          {tags && tags.length > 0 && (
+            // `outline`, not the default: default `Tag` is `bg-muted`, and this
+            // row's surface is a `bg-muted/50` band — a 0.019-L delta in light
+            // mode, which is invisible. `outline` reads on both.
+            <TagGroup className="mt-2">
+              {tags.map((tag) => (
+                <Tag key={tag} size="sm" variant="outline">
+                  {tag}
+                </Tag>
+              ))}
+            </TagGroup>
+          )}
+
+          {description && (
+            <p className="mt-2 line-clamp-3 max-w-[620px] text-[13px] leading-[1.6] text-muted-foreground md:line-clamp-2 md:text-[13.5px] md:leading-[1.55]">
+              {description}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,204 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EventListRowWide, EventListRowWideSkeleton } from "./event-list-row-wide";
+import type { EventListRowWideLabels } from "./event-list-row-wide";
+import type { EventDateBadgeFormatters, EventPreview } from "./event-types";
+
+const labels: EventListRowWideLabels = {
+  free: "Free",
+  liveNow: "On now",
+  reserve: "Reserve",
+  notifyMe: "Notify me",
+  soldOut: "Sold out",
+  seeMenu: "See the menu",
+};
+
+const formatters: EventDateBadgeFormatters = {
+  time: (iso) => new Date(iso).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" }),
+  day: (iso) =>
+    new Date(iso).toLocaleDateString("en-GB", { weekday: "short", day: "numeric", month: "short" }),
+  price: (amount) => `${amount} RON`,
+  dayNumber: (iso) => String(new Date(iso).getDate()).padStart(2, "0"),
+  monthShort: (iso) =>
+    new Date(iso).toLocaleDateString("en-GB", { month: "short" }).toUpperCase(),
+};
+
+const event = (
+  id: string,
+  title: string,
+  place: string,
+  startsAt: string,
+  fee?: number,
+  description?: string
+): EventPreview => ({
+  id,
+  title,
+  location: place,
+  place_name: place,
+  starts_at: startsAt,
+  entry_fee: fee,
+  description,
+});
+
+const description =
+  "Rooftop set from sunset to close, resident DJs on the decks all night, kitchen open until midnight with the full grill menu.";
+
+const meta: Meta<typeof EventListRowWide> = {
+  title: "Events/EventListRowWide",
+  component: EventListRowWide,
+  tags: ["autodocs"],
+  args: { labels, formatters },
+  decorators: [
+    (Story) => (
+      <div className="w-[860px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The desktop list row — denser than the poster card, richer than the mobile list row, with a description and a dedicated action column. The row root is a plain container: the title is the primary link with a stretched overlay (so the whole row stays one click target), and 'See the menu' — rendered only when `menuHref` is set — is a second, real link layered above the overlay so it wins clicks in its own area.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EventListRowWide>;
+
+export const Default: Story = {
+  args: {
+    event: event("1", "Psihotrop Live", "Atelier Café", "2026-09-05T20:00:00", 50, description),
+    tags: ["Live music", "Rooftop"],
+  },
+};
+
+/**
+ * The nested-link pattern: the title is the primary link (stretched over the
+ * whole row via `after:absolute after:inset-0`), and "See the menu" is a real,
+ * independently targeted link that wins clicks in its own area.
+ */
+export const WithMenuLink: Story = {
+  args: {
+    event: event("1b", "Psihotrop Live", "Atelier Café", "2026-09-05T20:00:00", 50, description),
+    tags: ["Live music", "Rooftop"],
+    href: "/events/psihotrop-live",
+    menuHref: "/places/atelier-cafe/menu",
+    onClick: (_event, mouseEvent) => mouseEvent.preventDefault(),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Click the title anywhere in the row to open the event; click 'See the menu' to go to the venue's menu instead — both are real links, not one anchor with dead text nested inside it.",
+      },
+    },
+  },
+};
+
+/** No `menuHref` — the affordance is omitted entirely rather than rendered as dead text. */
+export const WithoutMenuLink: Story = {
+  args: {
+    event: event("1c", "Psihotrop Live", "Atelier Café", "2026-09-05T20:00:00", 50, description),
+    tags: ["Live music", "Rooftop"],
+    href: "/events/psihotrop-live",
+    onClick: (_event, mouseEvent) => mouseEvent.preventDefault(),
+  },
+};
+
+export const FreeEntry: Story = {
+  args: {
+    event: event("2", "Vinyl Happy Hour", "Zorki Photo Cafe", "2026-09-04T18:00:00", 0, description),
+    tags: ["Vinyl", "Happy hour"],
+  },
+};
+
+/** No published fee is "TBC", never "Free". */
+export const UnknownPrice: Story = {
+  args: { event: event("3", "Quiz Night", "Flying Circus", "2026-09-03T19:00:00") },
+};
+
+/** Live tints the date badge and adds the on-air chip. */
+export const LiveNow: Story = {
+  args: {
+    event: event("4", "Charity Concert & Afterparty", "Flying Circus", "2026-09-03T21:00:00", 30, description),
+    isLive: true,
+    tags: ["Charity", "Concert"],
+  },
+};
+
+/** Sold out dims the row and swaps the CTA to "Notify me". */
+export const SoldOut: Story = {
+  args: {
+    event: event("5", "Friday Night Techno", "Form Space", "2026-09-04T22:00:00", 50, description),
+    isSoldOut: true,
+    tags: ["Techno", "Club night"],
+  },
+};
+
+/** No `description` on the event — the block collapses instead of leaving a gap. */
+export const NoDescription: Story = {
+  args: {
+    event: event("6", "Stand-up Comedy Night", "Klausen Pubhouse", "2026-09-04T19:30:00", 45),
+    tags: ["Comedy"],
+  },
+};
+
+/** Loading state — identical geometry to `Default`, so nothing shifts on data arrival. */
+export const Loading: Story = {
+  render: () => <EventListRowWideSkeleton />,
+};
+
+/** `NoDescription`'s narrower geometry, loading. */
+export const LoadingNoDescription: Story = {
+  render: () => <EventListRowWideSkeleton showDescription={false} />,
+};
+
+/** A loading row above a loaded one, so any geometry drift is visible at a glance. */
+export const LoadingVsLoaded: Story = {
+  render: () => (
+    <div>
+      <EventListRowWideSkeleton />
+      <EventListRowWide
+        event={event("1", "Psihotrop Live", "Atelier Café", "2026-09-05T20:00:00", 50, description)}
+        labels={labels}
+        formatters={formatters}
+        tags={["Live music", "Rooftop"]}
+      />
+    </div>
+  ),
+};
+
+/** A day's worth of rows, as the desktop list view stacks them. */
+export const ADay: Story = {
+  render: () => (
+    <div>
+      <EventListRowWide
+        event={event("a", "Psihotrop Live", "Atelier Café", "2026-09-03T20:00:00", 50, description)}
+        labels={labels}
+        formatters={formatters}
+        tags={["Live music", "Rooftop"]}
+        isLive
+      />
+      <EventListRowWide
+        event={event("b", "Quiz Night", "Flying Circus", "2026-09-03T20:00:00")}
+        labels={labels}
+        formatters={formatters}
+      />
+      <EventListRowWide
+        event={event("c", "Beer Battle", "Irish Music Pub", "2026-09-03T20:00:00", 0, description)}
+        labels={labels}
+        formatters={formatters}
+        tags={["Nightlife"]}
+      />
+      <EventListRowWide
+        event={event("e", "Schoolotheque Afterparty", "Flying Circus", "2026-09-03T22:00:00", 25, description)}
+        labels={labels}
+        formatters={formatters}
+        tags={["Afterparty"]}
+        isSoldOut
+      />
+    </div>
+  ),
+};