@bearmenu/ui 0.8.2 → 0.8.4

package/src/lib/icon-registry.ts

@@ -0,0 +1,139 @@
+/**
+ * The purpose → glyph registry.
+ *
+ * One place recording which glyph means what. Before this existed, ~10 ad-hoc
+ * glyph maps were scattered across the app and the same purpose ended up drawn
+ * two different ways: back as both an arrow and a chevron, "open filters" as
+ * both a funnel and sliders (one surface used both, chosen by which view you
+ * were in), clear and close sharing a bare X.
+ *
+ * Only GENERIC action vocabulary lives here. Product taxonomy — cuisine
+ * shortcuts, facet dimensions, digest categories — stays in the consuming app.
+ *
+ * ## The rules this encodes
+ *
+ * 1. **Arrow leaves, chevron stays.** `ArrowRight` means "you are going to a new
+ *    destination" (see-all links, banner CTAs). `ChevronRight` means "reveal
+ *    more, in place" and is scoped to exactly two jobs: carousel paging and
+ *    row-contained drill-in. Collapsing these is what produced a glyph with
+ *    four meanings.
+ * 2. **Sliders, not a funnel.** A funnel reads as "narrow a list" and collides
+ *    with search and sort iconography at 24px; three sliders read
+ *    unambiguously as "adjust parameters" and carry a badge count cleanly.
+ * 3. **Containment separates clear from close.** A bare `X` leaves a layer. A
+ *    contained `XCircle` resets a value in place without leaving. In a dense
+ *    filter row, bare Xs beside each other cannot say which layer they close.
+ * 4. **Tappable has a container or a colour state; information is muted and
+ *    bare.** This is what disambiguates the overloaded glyphs (`MapPin`,
+ *    `Star`) rather than picking different glyphs for each sense. An
+ *    interactive instance sits in a chip or button and takes an active colour;
+ *    a decorative one is `text-muted-foreground`, `aria-hidden`, outside any
+ *    button, with no hover or active transition.
+ * 5. **Loved and want-to-try are two actions, not one.** `Heart` is
+ *    retrospective ("I have had this and I love it"), `Bookmark` is prospective
+ *    ("I want to try this"). They feed different lists and are mutually
+ *    exclusive per item.
+ */
+
+import {
+  ArrowLeft,
+  ArrowRight,
+  ArrowUpDown,
+  Bookmark,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ExternalLink,
+  Flag,
+  Heart,
+  Info,
+  Navigation,
+  Phone,
+  Plus,
+  RefreshCw,
+  Search,
+  Share2,
+  SlidersHorizontal,
+  Trash2,
+  X,
+  XCircle,
+  type LucideIcon,
+} from "lucide-react";
+
+export type IconPurpose =
+  // navigation
+  | "back"
+  | "seeAll"
+  | "drillIn"
+  | "carouselPrev"
+  | "carouselNext"
+  | "directions"
+  | "externalLink"
+  // layers and values
+  | "close"
+  | "clear"
+  | "expand"
+  // list controls
+  | "filter"
+  | "sort"
+  | "search"
+  // actions
+  | "share"
+  | "favorite"
+  | "wantToTry"
+  | "confirm"
+  | "add"
+  | "remove"
+  | "refresh"
+  | "call"
+  | "report"
+  | "info";
+
+export const iconFor: Record<IconPurpose, LucideIcon> = {
+  back: ArrowLeft,
+  seeAll: ArrowRight,
+  drillIn: ChevronRight,
+  carouselPrev: ChevronLeft,
+  carouselNext: ChevronRight,
+  directions: Navigation,
+  externalLink: ExternalLink,
+
+  close: X,
+  clear: XCircle,
+  expand: ChevronDown,
+
+  filter: SlidersHorizontal,
+  sort: ArrowUpDown,
+  search: Search,
+
+  share: Share2,
+  favorite: Heart,
+  wantToTry: Bookmark,
+  confirm: Check,
+  add: Plus,
+  remove: Trash2,
+  refresh: RefreshCw,
+  call: Phone,
+  report: Flag,
+  info: Info,
+};
+
+/**
+ * Purposes whose glyph must rotate to show state, and by how much.
+ * `expand` is the disclosure chevron: pointing down at rest, up when open.
+ */
+export const iconRotation: Partial<Record<IconPurpose, number>> = {
+  expand: 180,
+};
+
+/**
+ * Retired glyphs and what replaced them. Kept so a reviewer can tell a
+ * deliberate choice from a regression, and so lint/codemods have a source.
+ */
+export const retiredIcons = {
+  Filter: "filter → SlidersHorizontal",
+  ChevronRightAsSeeAll: "seeAll → ArrowRight",
+  ChevronLeftAsBack: "back → ArrowLeft",
+  XAsClear: "clear → XCircle",
+} as const;

package/src/test/setup.ts

@@ -1,6 +1,10 @@
 import "@testing-library/jest-dom";
 
-global.ResizeObserver = class ResizeObserver {
+// `globalThis`, not `global`: the latter is a Node-only global, and this
+// project's `lib` is dom / dom.iterable / esnext with no `@types/node`, so it
+// did not typecheck. This file already reaches for `window` below — the test
+// environment is jsdom, and `globalThis` is the spelling that is typed in both.
+globalThis.ResizeObserver = class ResizeObserver {
   observe() {}
   unobserve() {}
   disconnect() {}