@bearmenu/ui 0.8.13 → 0.8.14

package/src/components/motion-icon.tsx

@@ -32,7 +32,13 @@
  */
 
 import * as React from "react";
-import { motion, useAnimationControls, type Transition, type Variants } from "framer-motion";
+import {
+  motion,
+  useAnimationControls,
+  useReducedMotion,
+  type Transition,
+  type Variants,
+} from "framer-motion";
 
 import { cn } from "../lib/utils";
 
@@ -107,50 +113,133 @@ const rootVariants: Variants = {
   play: { strokeWidth: 2.25, transition: { duration: 0.12 } },
 };
 
+/** The longest gesture in the set, with a little room: a play started this recently is still on screen. */
+const GESTURE_MS = 700;
+/**
+ * How long a performed-but-not-yet-active glyph keeps its end pose before
+ * snapping back to rest — the route the tap triggered usually confirms within
+ * this, and a pour that cuts to empty at 620ms only to refill at 900ms is
+ * worse than one that waits.
+ */
+const HOLD_GRACE_MS = 900;
+
 /**
  * Mount poses without playing; pointer down plays; arriving plays unless the
  * pointer already started it; leaving returns.
  *
  * Both effects compare against a ref rather than trusting the dependency array,
  * so they fire once per actual change and not once per render.
+ *
+ * A gesture's last keyframe draws the same PICTURE as the held pose, but not
+ * always with the same VALUES: the grid's tiles end one slot around the
+ * board, the calendar's reel ends four rows up. Left there, the next `rest`
+ * tween would perform a second, backwards gesture on leave. So once `play`
+ * resolves the values snap — invisibly — to the pose they depict: `active`
+ * straight away if the state has arrived, else `rest` after a grace period
+ * that a late-arriving `active` cancels. Leaving while a play is in flight
+ * defers to that same snap rather than springing the parts back mid-gesture.
  */
 export function useIconGesture(active: boolean, replayToken: number) {
   const controls = useAnimationControls();
+  const reducedMotion = useReducedMotion() === true;
   const lastPlayAt = React.useRef(0);
   const seenToken = React.useRef(0);
   // `null` until mounted, so the pose effect can tell a real change from the
   // first run and never performs the gesture on page load.
   const seenActive = React.useRef<boolean | null>(null);
+  const playCount = React.useRef(0);
+  const mounted = React.useRef(false);
+  const restTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearRestTimer = React.useCallback(() => {
+    if (restTimer.current !== null) clearTimeout(restTimer.current);
+    restTimer.current = null;
+  }, []);
 
   React.useEffect(() => {
+    mounted.current = true;
     controls.set(active ? "active" : "rest");
     seenActive.current = active;
+    return () => {
+      mounted.current = false;
+      clearRestTimer();
+    };
     // Mount only — the two effects below own everything after that.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // Guarded on a counter, so a replay that started mid-gesture is not cut
+  // short by the first one finishing, and on `mounted`, so a sheet that closes
+  // under its own close button never reaches `controls.set` after unmount.
+  //
+  // Reduced motion means less movement, not less feedback: the gesture is
+  // skipped and the icon goes straight to the pose it would have landed on,
+  // so a hold glyph still changes state and a return glyph stays put.
+  const perform = React.useCallback(async () => {
+    const id = ++playCount.current;
+    lastPlayAt.current = Date.now();
+    clearRestTimer();
+    if (reducedMotion) {
+      if (seenActive.current) controls.set("active");
+      return;
+    }
+    await controls.start("play");
+    if (!mounted.current || playCount.current !== id) return;
+    if (seenActive.current) {
+      controls.set("active");
+      return;
+    }
+    restTimer.current = setTimeout(() => {
+      restTimer.current = null;
+      if (mounted.current && !seenActive.current) controls.set("rest");
+    }, HOLD_GRACE_MS);
+  }, [controls, clearRestTimer, reducedMotion]);
+
   React.useEffect(() => {
     if (replayToken === seenToken.current) return;
     seenToken.current = replayToken;
-    lastPlayAt.current = Date.now();
-    void controls.start("play");
-  }, [replayToken, controls]);
+    void perform();
+  }, [replayToken, perform]);
 
   React.useEffect(() => {
     if (seenActive.current === null || seenActive.current === active) return;
     seenActive.current = active;
+    if (reducedMotion) {
+      // No performance to wait for or to double: the pose is the feedback.
+      clearRestTimer();
+      controls.set(active ? "active" : "rest");
+      return;
+    }
+    const sincePlay = Date.now() - lastPlayAt.current;
     if (!active) {
+      // Mid-gesture: let it land; the settle above snaps to `rest` for us.
+      if (sincePlay < GESTURE_MS) return;
+      clearRestTimer();
       void controls.start("rest");
       return;
     }
-    // The pointer that caused this state change already started the gesture.
-    if (Date.now() - lastPlayAt.current < 600) return;
-    void controls.start("play");
-  }, [active, controls]);
+    // The pointer that caused this state change already performed the
+    // gesture — in flight, or resolved and waiting in its end pose. Take the
+    // held pose rather than performing it twice.
+    if (sincePlay < GESTURE_MS + HOLD_GRACE_MS) {
+      clearRestTimer();
+      if (sincePlay >= GESTURE_MS) controls.set("active");
+      return;
+    }
+    void perform();
+  }, [active, controls, perform, clearRestTimer, reducedMotion]);
 
   return controls;
 }
 
+/**
+ * An id safe inside `url(#…)`: React 18's `useId` contains colons, React 19's
+ * may contain guillemets, and neither survives a fragment reference.
+ */
+export function useSvgId(prefix: string): string {
+  return `${prefix}-${React.useId().replace(/[^\w-]/g, "")}`;
+}
+
 export function MotionIcon({
   active = false,
   replayToken = 0,

package/src/components/place-card.stories.tsx

@@ -1,28 +1,40 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { PlaceCard } from "./place-card";
+import { Flame } from "lucide-react";
+import { PlaceCard, PlaceCardSkeleton } from "./place-card";
+import { Badge } from "./badge";
+import { Skeleton as SkeletonBlock } from "./skeleton";
+import { OVERLAY_ICON, OVERLAY_PILL } from "../lib/overlay-pill";
 import type { PlaceCardLabels, PlacePreview } from "./place-types";
 
 const labels: PlaceCardLabels = {
-  open: "Open",
   closed: "Closed",
-  until: "until",
-  opensAt: "opens at",
-  currency: "RON",
+  viewDetails: (name) => `View details for ${name}`,
+  priceLevel: (level) => `Price level ${level} of 4`,
+  grade: {
+    soft: "Worth exploring",
+    bands: {
+      exceptional: "Exceptional",
+      great: "Great",
+      good: "Good",
+      decent: "Decent",
+      weak: "Weak",
+    },
+    aria: (value) => `Grade ${value} out of 10`,
+    capped: "Capped for low confidence",
+  },
 };
 
 const basePlace: PlacePreview = {
   id: "1",
   slug: "casa-gri",
   name: "Casa Gri",
-  description:
-    "A modern bistro serving thoughtful European plates with a Mediterranean accent. Open daily until late.",
   open_now: true,
   rating: { rating: 4.6, count: 342 },
-  hours: [{ opens_at: 11, closes_at: 23 }],
-  today_schedule: [{ opens_at: 11, closes_at: 23 }],
-  location: { distance: { meters: 1240 } },
-  price_dishes: { price_range_low: 35, price_range_high: 90 },
-  price_drinks: { price_range_low: 15, price_range_high: 45 },
+  cuisines: ["european", "mediterranean"],
+  areas: [{ name: "Centru" }],
+  price_dishes: { price_range_low: 35, price_range_high: 90, price_score: 2 },
+  reviews_digest: { grade: { overall: 8.4 } },
+  cover_url: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=800&q=80",
 };
 
 const meta = {
@@ -30,91 +42,69 @@ const meta = {
   component: PlaceCard,
   tags: ["autodocs"],
   parameters: { layout: "centered" },
-  args: {
-    labels,
-    place: basePlace,
-    onClick: undefined,
-  },
-} satisfies Meta<typeof PlaceCard>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
+  args: { labels, place: basePlace },
   decorators: [
     (Story) => (
-      <div className="w-[360px]">
+      <div className="w-[280px]">
         <Story />
       </div>
     ),
   ],
-};
+} satisfies Meta<typeof PlaceCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
 
 export const Closed: Story = {
-  args: {
-    place: { ...basePlace, open_now: false },
-  },
-  decorators: [
-    (Story) => (
-      <div className="w-[360px]">
-        <Story />
-      </div>
-    ),
-  ],
+  args: { place: { ...basePlace, open_now: false } },
 };
 
-export const NoRating: Story = {
+/** Ungraded places fall back to the Google star in the metric slot. */
+export const StarFallback: Story = {
+  args: { place: { ...basePlace, reviews_digest: undefined } },
+};
+
+/** Once geolocation is granted, distance replaces the neighbourhood. */
+export const WithDistance: Story = {
+  args: { place: { ...basePlace, location: { distance: { meters: 1240 } } } },
+};
+
+export const NoCover: Story = {
+  args: { place: { ...basePlace, cover_url: undefined } },
+};
+
+/** A crawlable anchor; a plain click calls `onOpen`, a modified click navigates. */
+export const Linked: Story = {
   args: {
-    place: { ...basePlace, rating: undefined, review_count: undefined },
+    href: "/ro/cluj-napoca/places/casa-gri",
+    onOpen: (place) => alert(`Open drawer: ${place.name}`),
   },
-  decorators: [
-    (Story) => (
-      <div className="w-[360px]">
-        <Story />
-      </div>
-    ),
-  ],
 };
 
-export const NoThumbnail: Story = {
+/** The caller's marker in the top-left corner — a sibling of the card's root, so it may be interactive. */
+export const WithPhotoOverlay: Story = {
   args: {
-    place: { ...basePlace, thumbnail_url: undefined },
-  },
-  decorators: [
-    (Story) => (
-      <div className="w-[360px]">
-        <Story />
-      </div>
+    photoOverlay: (
+      <Badge variant="overlay" className={OVERLAY_PILL}>
+        <Flame className={OVERLAY_ICON} aria-hidden />
+        Trending
+      </Badge>
     ),
-  ],
+  },
 };
 
-export const Interactive: Story = {
+export const WithFooter: Story = {
   args: {
-    onClick: (place) => alert(`Clicked: ${place.name}`),
+    footer: <span className="text-xs text-muted-foreground">Served as Margherita · 45 RON · 350g</span>,
   },
-  decorators: [
-    (Story) => (
-      <div className="w-[360px]">
-        <Story />
-      </div>
-    ),
-  ],
 };
 
 export const Minimal: Story = {
-  args: {
-    place: {
-      id: "2",
-      slug: "tiny",
-      name: "The Tiny Spot",
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div className="w-[360px]">
-        <Story />
-      </div>
-    ),
-  ],
+  args: { place: { id: "2", slug: "tiny", name: "The Tiny Spot" } },
+};
+
+export const Skeleton: Story = {
+  render: () => <PlaceCardSkeleton footer={<SkeletonBlock className="h-3 w-1/2" />} />,
 };