@bearmenu/ui 0.8.8 → 0.8.10

package/src/components/menu-filter-chips.tsx

@@ -0,0 +1,238 @@
+import { X } from "lucide-react";
+import { cn } from "../lib/utils";
+import { ScrollFade } from "./scroll-fade";
+import { Skeleton } from "./skeleton";
+import type { MenuFilterChip } from "./menu-types";
+
+/**
+ * MenuFilterChips — the intent page's filter row.
+ *
+ * ## One unit, one list that moves
+ *
+ * Every chip counts KITCHENS, whatever facet is behind it. A dietary chip reads
+ * "has a vegetarian dish" and counts venues; a dish-group chip reads "has a
+ * pizza" and counts venues. The earlier version mixed venue counts and dish
+ * counts in one row and became unreadable — you could not tell what a number
+ * was counting without reading the label that produced it. The unit is stated
+ * once, at the head of the row (`unitLabel`, e.g. "KITCHENS · 247"), and never
+ * again.
+ *
+ * ## A zero-count chip is dimmed, not disabled
+ *
+ * `empty` chips stay tappable. Pressing one swaps it in and drops whichever
+ * active filter conflicts with it, and the caller says which in a line beneath.
+ * Disabling it would refuse the reader the thing they asked for and give no
+ * reason; this way the row answers the question by being pressed. Facets the
+ * API says are unavailable for this intent are not passed in at all — not
+ * drawn, rather than drawn dead.
+ *
+ * ## The row scrolls; the escape hatch does not
+ *
+ * One line in every state. Chips scroll horizontally under a `<ScrollFade>`,
+ * and "More filters" is pinned opposite the unit label rather than wrapping,
+ * so the way out of a full row is always in the same place.
+ *
+ * Interactive: the consumer marks its own module `"use client"`.
+ */
+
+export type MenuFilterChipsProps = {
+  chips: MenuFilterChip[];
+  onToggle: (key: string) => void;
+  /** The unit and the current total, composed by the caller, e.g. "KITCHENS · 247". */
+  unitLabel?: string;
+  /** Opens the full filter sheet. Omit for a row where every facet is a chip. */
+  onMore?: () => void;
+  moreLabel?: string;
+  /**
+   * A glyph for the phone's icon-only "more filters" button.
+   *
+   * The label is the widest fixed element in the row — "More filters" is ~80px
+   * of a 358px viewport, and it is the one thing that never scrolls, so it eats
+   * the chips' runway on every phone. Given an icon, the button collapses to a
+   * square below `lg` and keeps `moreLabel` as its accessible name.
+   *
+   * A node rather than a name because the app owns its iconography, and this
+   * one is animated on press — the DS neither knows the glyph nor drives it.
+   */
+  moreIcon?: React.ReactNode;
+  /** Press handler for the icon button, e.g. to replay the glyph's animation. */
+  onMorePointerDown?: () => void;
+  /** Locale-aware integer formatter for the counts. Defaults to `String`. */
+  formatCount?: (value: number) => string;
+  /** Accessible name for the row. */
+  ariaLabel?: string;
+  className?: string;
+};
+
+export function MenuFilterChips({
+  chips,
+  onToggle,
+  unitLabel,
+  onMore,
+  moreLabel,
+  moreIcon,
+  onMorePointerDown,
+  formatCount = String,
+  ariaLabel,
+  className,
+}: MenuFilterChipsProps) {
+  return (
+    <div className={cn("relative flex items-center gap-2", className)}>
+      {/* Desktop only. It states a unit and a total that the section heading
+          directly below already gives in full ("The kitchens Cluj-Napoca rates
+          for Italian · 247"), and on a phone it is a fixed 110px bitten out of
+          the one row that needs every pixel to scroll. */}
+      {unitLabel && (
+        <span className="hidden shrink-0 pr-0.5 text-[11px] font-extrabold uppercase tracking-[0.1em] text-muted-foreground lg:inline">
+          {unitLabel}
+        </span>
+      )}
+
+      <ScrollFade
+        orientation="horizontal"
+        size="sm"
+        className="min-w-0 flex-1"
+        scrollClassName="scrollbar-hide"
+      >
+        <div className="flex items-center gap-2" role="group" aria-label={ariaLabel}>
+          {chips.map((chip) => (
+            <Chip
+              key={chip.key}
+              chip={chip}
+              onToggle={() => onToggle(chip.key)}
+              formatCount={formatCount}
+            />
+          ))}
+        </div>
+      </ScrollFade>
+
+      {onMore && (
+        <>
+          {/* One control, two shapes. On a phone it is a 40px square carrying
+              the caller's glyph, with `moreLabel` as its accessible name; from
+              `lg` it is the text link it has always been. Two elements rather
+              than one so neither has to carry the other's padding, and both
+              stay `shrink-0` against the scrolling chips. */}
+          {moreIcon && (
+            <button
+              type="button"
+              onClick={onMore}
+              onPointerDown={onMorePointerDown}
+              aria-label={moreLabel}
+              aria-haspopup="dialog"
+              className="inline-flex size-10 shrink-0 items-center justify-center rounded-full border border-border text-accent transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none lg:hidden"
+            >
+              {moreIcon}
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={onMore}
+            className={cn(
+              "shrink-0 rounded-md pl-2 text-[12.5px] font-bold text-accent transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+              moreIcon && "hidden lg:inline"
+            )}
+          >
+            {moreLabel}
+          </button>
+        </>
+      )}
+    </div>
+  );
+}
+
+function Chip({
+  chip,
+  onToggle,
+  formatCount,
+}: {
+  chip: MenuFilterChip;
+  onToggle: () => void;
+  formatCount: (value: number) => string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      aria-pressed={chip.active}
+      className={cn(
+        "inline-flex h-9 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full border px-4 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+        chip.active
+          ? "border-accent font-semibold text-accent shadow-[0_1px_2px_oklch(0.51_0.095_45_/_0.08)]"
+          : "border-border bg-card text-foreground hover:border-accent/40",
+        // Dimmed, never disabled — pressing it is how the reader finds out
+        // which active filter is in the way.
+        chip.empty && "opacity-45"
+      )}
+    >
+      {chip.icon}
+      {chip.label}
+      {chip.count !== undefined && (
+        <span className={cn("tabular-nums", chip.active ? "text-accent" : "text-muted-foreground")}>
+          {formatCount(chip.count)}
+        </span>
+      )}
+      {chip.active && <X className="h-3 w-3 shrink-0" aria-hidden />}
+    </button>
+  );
+}
+
+/**
+ * MenuFilterSummary — what the active filters did, and the way out.
+ *
+ * Sits under the row whenever anything is on. The sentence is composed by the
+ * caller because it is a real sentence in two languages ("Three filters · 34 of
+ * 247 kitchens are mid-range, have a vegetarian Italian dish, and are open
+ * now") and assembling it from fragments here would produce translated
+ * word-salad in one of them.
+ */
+export type MenuFilterSummaryProps = {
+  /** The composed sentence. */
+  summary: React.ReactNode;
+  clearLabel: string;
+  onClear: () => void;
+  className?: string;
+};
+
+export function MenuFilterSummary({
+  summary,
+  clearLabel,
+  onClear,
+  className,
+}: MenuFilterSummaryProps) {
+  return (
+    <div className={cn("flex flex-wrap items-center gap-2.5 pt-3.5", className)}>
+      <span className="text-[13px] text-muted-foreground [&_b]:font-bold [&_b]:text-foreground">
+        {summary}
+      </span>
+      <button
+        type="button"
+        onClick={onClear}
+        className="ml-auto shrink-0 rounded-md text-[12.5px] font-bold text-accent transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none"
+      >
+        {clearLabel}
+      </button>
+    </div>
+  );
+}
+
+// ─── Skeleton ───────────────────────────────────────────────────────────────
+
+/**
+ * One line, as the row itself renders — never a wrapped block.
+ *
+ * The widths vary deliberately: six identical pills read as a progress bar, and
+ * the real row is a set of labels of different lengths.
+ */
+const CHIP_WIDTHS = [128, 104, 96, 148, 112, 88];
+
+export function MenuFilterChipsSkeleton({ className }: { className?: string }) {
+  return (
+    <div className={cn("flex items-center gap-2 overflow-hidden", className)} aria-hidden>
+      <Skeleton className="h-3 w-[92px] shrink-0" />
+      {CHIP_WIDTHS.map((width, index) => (
+        <Skeleton key={index} className="h-9 shrink-0 rounded-full" style={{ width }} />
+      ))}
+    </div>
+  );
+}

package/src/components/menu-group-rows.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MenuGroupRows } from "./menu-group-rows";
+import { mockGradients } from "./menu-mocks";
+
+const meta: Meta<typeof MenuGroupRows> = {
+  title: "Menu/MenuGroupRows",
+  component: MenuGroupRows,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[380px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "What an intent consists of — the `dish_groups` facet on a cuisine page, digest tags and graded strengths on a going-out page. One component for both, because both are the same object: a facet value, its venue count and a range. The counts are VENUES: no endpoint counts dishes per cuisine, so *120* is a hundred and twenty kitchens that make a pizza, and the `meta` line is composed by the caller so it can say which.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuGroupRows>;
+
+export const Cuisine: Story = {
+  args: {
+    rows: [
+      { slug: "pizza", name: "Pizza", meta: "120 kitchens", rangeLabel: "30—68", href: "#", gradient: mockGradients.pasta },
+      { slug: "pasta", name: "Pasta", meta: "96 kitchens", rangeLabel: "38—84", href: "#", gradient: mockGradients.pasta },
+      { slug: "salad", name: "Salad", meta: "88 kitchens", rangeLabel: "22—56", href: "#", gradient: mockGradients.greens },
+      { slug: "beef", name: "Beef", meta: "77 kitchens", rangeLabel: "34—72", href: "#", gradient: mockGradients.meat },
+    ],
+  },
+};
+
+/** The going-out side: tags and strengths, and no price range behind them. */
+export const GoingOut: Story = {
+  args: {
+    rows: [
+      { slug: "cocktails", name: "Cocktails", meta: "63 places", href: "#", gradient: mockGradients.cocktail },
+      { slug: "late_night", name: "Open late", meta: "59 places", href: "#", gradient: mockGradients.meat },
+      { slug: "drinks_quality", name: "Strong on drinks", meta: "131 places", href: "#", gradient: mockGradients.sweet },
+    ],
+  },
+};
+
+/** No gradient and no range — the row still reads. */
+export const Bare: Story = {
+  args: { rows: [{ slug: "soup", name: "Soup", meta: "169 kitchens" }] },
+};

package/src/components/menu-group-rows.tsx

@@ -0,0 +1,133 @@
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./skeleton";
+import type { MenuLinkComponent, MenuLinkProps } from "./menu-types";
+
+/**
+ * MenuGroupRows — what an intent consists of.
+ *
+ * On a cuisine page this is the `dish_groups` facet narrowed by the cuisine
+ * ("Pizza · 120 kitchens · 30–68"); on a going-out page it is the digest tags
+ * and graded strengths ("Cocktails · 63 places"). One component for both,
+ * because both are the same object: a facet value, its venue count, and a range.
+ *
+ * ## The counts are VENUES, and the label has to say so
+ *
+ * There is no endpoint that counts dishes per cuisine — `/dishes` accepts
+ * `cuisine_slugs` and ignores it — so "120" here is a hundred and twenty
+ * kitchens that make a pizza, not a hundred and twenty pizzas. The `meta` line
+ * is composed by the caller precisely so that it can say which, in a language
+ * where the two words differ.
+ *
+ * ## Not `<ConceptCard>`
+ *
+ * That one is a cover-led card for a thing with a date and a venue. This is a
+ * row in a sidebar: a hue bar, a name, a count and a range. Giving it a cover
+ * would mean finding a photograph of "pasta", which is the kind of picture that
+ * makes a page look generated.
+ */
+
+/** @deprecated Alias of `MenuLinkProps`; kept for symmetry with the other menu surfaces. */
+export type MenuGroupRowsLinkProps = MenuLinkProps;
+
+function DefaultLink({ href, ...props }: MenuGroupRowsLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type MenuGroupRow = {
+  slug: string;
+  name: string;
+  /** Venue count line, e.g. "120 kitchens". Pluralised by the caller. */
+  meta: string;
+  /** Price range, already formatted, e.g. "30—68". Omitted where none is known. */
+  rangeLabel?: string;
+  href?: string;
+  /** Finished CSS gradient for the bar. A missing one falls back to the border colour. */
+  gradient?: string;
+};
+
+export type MenuGroupRowsProps = {
+  rows: MenuGroupRow[];
+  linkComponent?: MenuLinkComponent;
+  className?: string;
+};
+
+export function MenuGroupRows({
+  rows,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: MenuGroupRowsProps) {
+  return (
+    <ul className={cn("flex flex-col", className)}>
+      {rows.map((row) => {
+        const body = (
+          <>
+            <span
+              aria-hidden
+              className={cn(
+                "h-[34px] w-2 shrink-0 rounded-full",
+                !row.gradient && "bg-border"
+              )}
+              style={row.gradient ? { backgroundImage: row.gradient } : undefined}
+            />
+            <span className="min-w-0 flex-1">
+              <span className="block truncate text-sm font-bold">{row.name}</span>
+              <span className="mt-px block truncate text-[11.5px] text-muted-foreground">
+                {row.meta}
+              </span>
+            </span>
+            {row.rangeLabel && (
+              <span className="shrink-0 font-mono text-xs tabular-nums text-muted-foreground">
+                {row.rangeLabel}
+              </span>
+            )}
+            <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden />
+          </>
+        );
+
+        return (
+          <li key={row.slug} className="border-t border-border first:border-t-0">
+            {row.href ? (
+              <LinkComponent
+                href={row.href}
+                className="flex items-center gap-3 py-3 transition-colors hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring motion-reduce:transition-none"
+              >
+                {body}
+              </LinkComponent>
+            ) : (
+              <span className="flex items-center gap-3 py-3">{body}</span>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+// ─── Skeleton ───────────────────────────────────────────────────────────────
+
+export function MenuGroupRowsSkeleton({
+  rows = 5,
+  className,
+}: {
+  rows?: number;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex flex-col", className)} aria-hidden>
+      {Array.from({ length: rows }, (_, index) => (
+        <div
+          key={index}
+          className="flex items-center gap-3 border-t border-border py-3 first:border-t-0"
+        >
+          <Skeleton className="h-[34px] w-2 rounded-full" />
+          <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+            <Skeleton className="h-3.5 w-[50%]" />
+            <Skeleton className="h-3 w-[35%]" />
+          </div>
+          <Skeleton className="h-3 w-[52px]" />
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ArrowLeftRight, UtensilsCrossed } from "lucide-react";
+import { Button } from "./button";
+import { MenuHubHero } from "./menu-hub-hero";
+
+const meta: Meta<typeof MenuHubHero> = {
+  title: "Menu/MenuHubHero",
+  component: MenuHubHero,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[1100px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The claim that opens a menu hub, proven by live figures. A statement rather than a count, with the catalogue's real numbers under it and one proof line demonstrating what a catalogue can say that a single menu cannot. The ground is a texture rather than a photograph because item photography is generated and one venue's photo behind a claim about every venue argues the wrong thing — callers with a real licensed venue image can pass `backgroundUrl`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuHubHero>;
+
+export const Default: Story = {
+  args: {
+    kicker: "397 MENUS IN CLUJ-NAPOCA, READ IN FULL",
+    kickerIcon: <UtensilsCrossed className="h-3 w-3" />,
+    headline: "Nobody should have to walk in blind.",
+    body: "We read every menu in the city — what each kitchen serves, what it costs, how big the portion is, and which plates the reviews keep naming. Decide before you sit down.",
+    figures: [
+      { value: "19,062", label: "dishes" },
+      { value: "26,078", label: "drinks" },
+      { value: "397", label: "menus read" },
+      { value: "38", label: "cuisines" },
+    ],
+    proof: (
+      <span>
+        A margherita: <b className="font-mono font-medium">87 kitchens make one, 10 to 120 lei</b>
+      </span>
+    ),
+    proofIcon: <ArrowLeftRight className="h-3.5 w-3.5" />,
+    action: (
+      <Button size="sm" variant="secondary">
+        See the spread
+      </Button>
+    ),
+  },
+};
+
+/** The drinks tab: same component, different view model and copy. */
+export const DrinksTab: Story = {
+  args: {
+    kicker: "397 MENUS IN CLUJ-NAPOCA, READ IN FULL",
+    kickerIcon: <UtensilsCrossed className="h-3 w-3" />,
+    headline: "The same negroni, across seventy-four bars.",
+    body: "Twenty-six thousand drinks, matched into concepts so the price comparison is real.",
+    figures: [
+      { value: "26,078", label: "drinks" },
+      { value: "397", label: "menus read" },
+      { value: "74", label: "bars pour a negroni" },
+    ],
+  },
+};
+
+/** No figures, no proof — the hero degrades to a claim and nothing else. */
+export const ClaimOnly: Story = {
+  args: { headline: "Nobody should have to walk in blind." },
+};
+
+export const Mobile: Story = {
+  args: {
+    kicker: "397 MENUS READ IN FULL",
+    headline: "Nobody should have to walk in blind.",
+    figures: [
+      { value: "19,062", label: "dishes" },
+      { value: "397", label: "menus read" },
+    ],
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background p-3">
+        <Story />
+      </div>
+    ),
+  ],
+};