@cartbase/storefront 0.18.0 → 0.19.0

package/src/reviews-ui/review-list.tsx

@@ -1,251 +1,191 @@
-"use client"
-
-import { useEffect, useState } from "react"
-import { ShieldCheck, X } from "lucide-react"
-import type { PublicReview } from "../api/reviews"
-import { useLocaleArea } from "../locales/context"
-import { defaultReviewsUiLabels, type ReviewsUiLabels } from "./labels"
-import { formatReviewDate, reviewDisplayName } from "./helpers"
-import { StarRow } from "./star-badge"
-
-/**
- * Review cards (masonry) + lightbox. Ported from the Alenika PDP reviews
- * section (src/components/product/reviews-list.tsx — the card grid +
- * `Lightbox`), presentational half: the fetch/sort/paging orchestration
- * lives in `ReviewWidget`. Data: `api/reviews` `PublicReview[]` (hidden
- * media is filtered out server-side — the client just renders what it
- * gets).
- *
- * Verified-purchaser badge is unconditional — every Cartbase review comes
- * from a tokenized post-purchase email, so the badge is a tautology of
- * the system, not an opt-in flag.
- *
- * Masonry: CSS multi-column so photo reviews (tall) and text-only reviews
- * (short) pack together without empty gaps; `break-inside-avoid` keeps
- * each card whole. Images-first ordering comes from the API's default
- * sort, so photo cards lead the flow. `layout="list"` (the store's
- * widget_layout setting) renders a single column instead.
- */
-export interface ReviewListProps {
-  reviews: PublicReview[]
-  /** Store display option (`getWidget().options.layout`). Default masonry. */
-  layout?: "masonry" | "list"
-  labels?: Partial<ReviewsUiLabels>
-  className?: string
-}
-
-export function ReviewList({
-  reviews,
-  layout = "masonry",
-  labels,
-  className,
-}: ReviewListProps) {
-  const l = { ...useLocaleArea("reviews", defaultReviewsUiLabels), ...labels }
-  // Lightbox: when set, the indicated review's media at the given index
-  // is shown full-bleed.
-  const [lightbox, setLightbox] = useState<{
-    reviewId: string
-    mediaIdx: number
-  } | null>(null)
-
-  return (
-    <>
-      <ul
-        className={
-          className ??
-          (layout === "list"
-            ? "columns-1 [column-gap:1rem]"
-            : "columns-1 sm:columns-2 lg:columns-3 xl:columns-4 [column-gap:1rem]")
-        }
-      >
-        {reviews.map((r) => {
-          const media = (r.media ?? []).filter(Boolean)
-          const hero = media[0]
-          const rest = media.slice(1)
-          return (
-            <li
-              key={r.id}
-              className="break-inside-avoid mb-4 rounded-[2px] border border-border bg-background overflow-hidden"
-            >
-              {/* Hero media on top */}
-              {hero && (
-                <button
-                  type="button"
-                  onClick={() => setLightbox({ reviewId: r.id, mediaIdx: 0 })}
-                  aria-label={hero.type === "image" ? l.showPhoto : l.playVideo}
-                  className="block w-full relative group"
-                >
-                  {hero.type === "image" ? (
-                    <img
-                      src={hero.thumb || hero.url}
-                      alt=""
-                      loading="lazy"
-                      className="block w-full h-auto object-cover transition-transform group-hover:scale-[1.02]"
-                    />
-                  ) : (
-                    <>
-                      <video
-                        src={hero.url}
-                        muted
-                        preload="metadata"
-                        className="block w-full h-auto object-cover bg-black"
-                      />
-                      <span className="absolute inset-0 flex items-center justify-center">
-                        <span className="w-11 h-11 rounded-full bg-background/80 flex items-center justify-center">
-                          <span
-                            aria-hidden
-                            className="w-0 h-0 border-y-[7px] border-y-transparent border-l-[12px] border-l-foreground ml-0.5"
-                          />
-                        </span>
-                      </span>
-                    </>
-                  )}
-                </button>
-              )}
-
-              <div className="p-4 sm:p-5">
-                <StarRow rating={r.rating} />
-
-                <div className="flex items-center flex-wrap gap-x-2 gap-y-0.5 mt-2">
-                  <span className="text-sm font-medium text-foreground">
-                    {reviewDisplayName(r.customer_name)}
-                  </span>
-                  <span
-                    className="inline-flex items-center gap-1 text-xs text-muted-foreground"
-                    title={l.verifiedTitle}
-                  >
-                    <ShieldCheck className="w-3.5 h-3.5" />
-                    {l.verified}
-                  </span>
-                  <span className="text-xs text-muted-foreground ml-auto">
-                    {formatReviewDate(r.created_at, l)}
-                  </span>
-                </div>
-
-                {r.title && (
-                  <h3 className="text-base font-semibold text-foreground leading-snug mt-3">
-                    {r.title}
-                  </h3>
-                )}
-                {r.body && (
-                  <p className="text-sm text-foreground/90 whitespace-pre-wrap leading-relaxed mt-1.5">
-                    {r.body}
-                  </p>
-                )}
-
-                {/* Extra media beyond the hero */}
-                {rest.length > 0 && (
-                  <div className="grid grid-cols-4 gap-2 mt-3">
-                    {rest.map((m, i) => (
-                      <button
-                        key={i}
-                        type="button"
-                        onClick={() =>
-                          setLightbox({ reviewId: r.id, mediaIdx: i + 1 })
-                        }
-                        aria-label={m.type === "image" ? l.showPhoto : l.playVideo}
-                        className="relative aspect-square rounded-[2px] overflow-hidden bg-muted"
-                      >
-                        {m.type === "image" ? (
-                          <img
-                            src={m.thumb || m.url}
-                            alt=""
-                            loading="lazy"
-                            className="absolute inset-0 w-full h-full object-cover"
-                          />
-                        ) : (
-                          <video
-                            src={m.url}
-                            muted
-                            preload="metadata"
-                            className="absolute inset-0 w-full h-full object-cover bg-black"
-                          />
-                        )}
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-            </li>
-          )
-        })}
-      </ul>
-
-      {lightbox && (
-        <ReviewLightbox
-          review={reviews.find((r) => r.id === lightbox.reviewId)}
-          mediaIdx={lightbox.mediaIdx}
-          closeLabel={l.close}
-          onClose={() => setLightbox(null)}
-        />
-      )}
-    </>
-  )
-}
-
-/** Simple full-bleed overlay for the picked media. Closes on Escape/backdrop. */
-export function ReviewLightbox({
-  review,
-  mediaIdx,
-  closeLabel,
-  onClose,
-}: {
-  review: PublicReview | undefined
-  mediaIdx: number
-  closeLabel?: string
-  onClose: () => void
-}) {
-  const fallback = useLocaleArea("reviews", defaultReviewsUiLabels)
-  // Close on Escape
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose()
-    }
-    window.addEventListener("keydown", onKey)
-    return () => window.removeEventListener("keydown", onKey)
-  }, [onClose])
-
-  if (!review) return null
-  // Index into the SAME filtered array the grid used to compute mediaIdx,
-  // so a falsy/hidden entry can't shift which item opens (production fix).
-  const items = (review.media ?? []).filter(Boolean)
-  const item = items[mediaIdx]
-  if (!item) return null
-
-  return (
-    <div
-      role="dialog"
-      aria-modal="true"
-      className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-4"
-      onClick={onClose}
-    >
-      <button
-        type="button"
-        aria-label={closeLabel ?? fallback.close}
-        onClick={onClose}
-        className="absolute top-4 right-4 w-10 h-10 rounded-full bg-background/10 hover:bg-background/20 text-background flex items-center justify-center"
-      >
-        <X className="w-5 h-5" />
-      </button>
-      <div
-        className="max-w-5xl max-h-[90vh] w-full flex items-center justify-center"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {item.type === "image" ? (
-          <img
-            src={item.url}
-            alt=""
-            className="max-w-full max-h-[90vh] object-contain"
-          />
-        ) : (
-          <video
-            src={item.url}
-            controls
-            autoPlay
-            className="max-w-full max-h-[90vh]"
-          />
-        )}
-      </div>
-    </div>
-  )
-}
+"use client"
+
+import { useState } from "react"
+import { ShieldCheck } from "lucide-react"
+import type { PublicReview } from "../api/reviews"
+import { useLocaleArea } from "../locales/context"
+import { defaultReviewsUiLabels, type ReviewsUiLabels } from "./labels"
+import { formatReviewDate, reviewDisplayName } from "./helpers"
+import { lightboxMedia, type LightboxPosition } from "./lightbox-state"
+import { ReviewLightbox } from "./review-lightbox"
+import { StarRow } from "./star-badge"
+
+/**
+ * Review cards (masonry) + the review lightbox. Ported from the Alenika PDP
+ * reviews section (src/components/product/reviews-list.tsx, the card
+ * grid), presentational half: the fetch/sort/paging orchestration lives in
+ * `ReviewWidget`. Data: `api/reviews` `PublicReview[]` (hidden media is
+ * filtered out server-side, the client just renders what it gets).
+ *
+ * A click anywhere on a card opens that review in `ReviewLightbox`; a click
+ * on one of its photos opens it on that photo.
+ *
+ * Verified-purchaser badge is unconditional — every Cartbase review comes
+ * from a tokenized post-purchase email, so the badge is a tautology of
+ * the system, not an opt-in flag.
+ *
+ * Masonry: CSS multi-column so photo reviews (tall) and text-only reviews
+ * (short) pack together without empty gaps; `break-inside-avoid` keeps
+ * each card whole. Images-first ordering comes from the API's default
+ * sort, so photo cards lead the flow. `layout="list"` (the store's
+ * widget_layout setting) renders a single column instead.
+ */
+export interface ReviewListProps {
+  reviews: PublicReview[]
+  /** Store display option (`getWidget().options.layout`). Default masonry. */
+  layout?: "masonry" | "list"
+  labels?: Partial<ReviewsUiLabels>
+  className?: string
+}
+
+export function ReviewList({
+  reviews,
+  layout = "masonry",
+  labels,
+  className,
+}: ReviewListProps) {
+  const l = { ...useLocaleArea("reviews", defaultReviewsUiLabels), ...labels }
+  const [open, setOpen] = useState<LightboxPosition | null>(null)
+
+  return (
+    <>
+      <ul
+        className={
+          className ??
+          (layout === "list"
+            ? "columns-1 [column-gap:1rem]"
+            : "columns-1 sm:columns-2 lg:columns-3 xl:columns-4 [column-gap:1rem]")
+        }
+      >
+        {reviews.map((r, index) => {
+          const media = lightboxMedia(r)
+          const hero = media[0]
+          const rest = media.slice(1)
+          return (
+            <li
+              key={r.id}
+              className="relative break-inside-avoid mb-4 rounded-[2px] border border-border bg-background overflow-hidden"
+            >
+              {/* The whole card is the button; the photos sit above it. */}
+              <button
+                type="button"
+                onClick={() => setOpen({ review: index, media: 0 })}
+                aria-label={`${l.openReview}: ${reviewDisplayName(r.customer_name)}`}
+                className="absolute inset-0 z-0 cursor-pointer"
+              />
+
+              {/* Hero media on top */}
+              {hero && (
+                <button
+                  type="button"
+                  onClick={() => setOpen({ review: index, media: 0 })}
+                  aria-label={hero.type === "image" ? l.showPhoto : l.playVideo}
+                  className="relative z-10 block w-full group"
+                >
+                  {hero.type === "image" ? (
+                    <img
+                      src={hero.thumb || hero.url}
+                      alt=""
+                      loading="lazy"
+                      className="block w-full h-auto object-cover transition-transform group-hover:scale-[1.02]"
+                    />
+                  ) : (
+                    <>
+                      {/* `#t=0.001`: iOS Safari paints no first frame from
+                          `preload="metadata"` alone; the seek makes it. */}
+                      <video
+                        src={`${hero.url}#t=0.001`}
+                        muted
+                        playsInline
+                        preload="metadata"
+                        className="block w-full h-auto object-cover bg-black"
+                      />
+                      <span className="absolute inset-0 flex items-center justify-center">
+                        <span className="w-11 h-11 rounded-full bg-background/80 flex items-center justify-center">
+                          <span
+                            aria-hidden
+                            className="w-0 h-0 border-y-[7px] border-y-transparent border-l-[12px] border-l-foreground ml-0.5"
+                          />
+                        </span>
+                      </span>
+                    </>
+                  )}
+                </button>
+              )}
+
+              <div className="p-4 sm:p-5">
+                <StarRow rating={r.rating} />
+
+                <div className="flex items-center flex-wrap gap-x-2 gap-y-0.5 mt-2">
+                  <span className="text-sm font-medium text-foreground">
+                    {reviewDisplayName(r.customer_name)}
+                  </span>
+                  <span
+                    className="inline-flex items-center gap-1 text-xs text-muted-foreground"
+                    title={l.verifiedTitle}
+                  >
+                    <ShieldCheck className="w-3.5 h-3.5" />
+                    {l.verified}
+                  </span>
+                  <span className="text-xs text-muted-foreground ml-auto">
+                    {formatReviewDate(r.created_at, l)}
+                  </span>
+                </div>
+
+                {r.title && (
+                  <h3 className="text-base font-semibold text-foreground leading-snug mt-3">
+                    {r.title}
+                  </h3>
+                )}
+                {r.body && (
+                  <p className="text-sm text-foreground/90 whitespace-pre-wrap leading-relaxed mt-1.5">
+                    {r.body}
+                  </p>
+                )}
+
+                {/* Extra media beyond the hero */}
+                {rest.length > 0 && (
+                  <div className="relative z-10 grid grid-cols-4 gap-2 mt-3">
+                    {rest.map((m, i) => (
+                      <button
+                        key={i}
+                        type="button"
+                        onClick={() => setOpen({ review: index, media: i + 1 })}
+                        aria-label={m.type === "image" ? l.showPhoto : l.playVideo}
+                        className="relative aspect-square rounded-[2px] overflow-hidden bg-muted"
+                      >
+                        {m.type === "image" ? (
+                          <img
+                            src={m.thumb || m.url}
+                            alt=""
+                            loading="lazy"
+                            className="absolute inset-0 w-full h-full object-cover"
+                          />
+                        ) : (
+                          <video
+                            src={`${m.url}#t=0.001`}
+                            muted
+                            playsInline
+                            preload="metadata"
+                            className="absolute inset-0 w-full h-full object-cover bg-black"
+                          />
+                        )}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </li>
+          )
+        })}
+      </ul>
+
+      <ReviewLightbox
+        reviews={reviews}
+        position={open}
+        onPositionChange={setOpen}
+        labels={labels}
+      />
+    </>
+  )
+}

package/src/reviews-ui/star-badge.tsx

@@ -11,23 +11,33 @@ import { reviewCountLabel } from "./helpers"
  * arrives via props (`api/reviews.getAggregate` / `getWidget().aggregate`).
  */
 
-/** Five-star row, filled to `Math.round(rating)`. */
+/**
+ * Five-star row, filled to `Math.round(rating)` in the theme's `rating`
+ * colour. `lg` is the lightbox's row.
+ */
 export function StarRow({
   rating,
+  size = "sm",
   className,
 }: {
   rating: number
+  size?: "sm" | "lg"
   className?: string
 }) {
   return (
-    <span className={cn("inline-flex items-center gap-0.5", className)}>
+    <span
+      role="img"
+      aria-label={`${Math.round(rating)} / 5`}
+      className={cn("inline-flex items-center", size === "lg" ? "gap-px" : "gap-0.5", className)}
+    >
       {Array.from({ length: 5 }).map((_, i) => (
         <Star
           key={i}
+          aria-hidden
           className={cn(
-            "w-3.5 h-3.5",
+            size === "lg" ? "size-5" : "size-3.5",
             i < Math.round(rating)
-              ? "fill-warning text-warning"
+              ? "fill-rating text-rating"
               : "fill-muted text-muted-foreground"
           )}
           strokeWidth={0}
@@ -53,7 +63,7 @@ export function StarBadge({ aggregate, labels, className }: StarBadgeProps) {
   if (!aggregate.count) return null
   return (
     <div className={cn("flex items-center gap-3 shrink-0", className)}>
-      <Star className="w-10 h-10 fill-warning text-warning" strokeWidth={0} />
+      <Star className="w-10 h-10 fill-rating text-rating" strokeWidth={0} />
       <div>
         <div className="text-3xl font-bold text-foreground leading-none">
           {aggregate.avg_rating.toFixed(1)}

package/src/store/pagination.tsx

@@ -6,7 +6,7 @@
  * the server templates read it back and convert to `offset`. Windowed
  * layout: ≤7 pages inline, otherwise ellipsis around the current window.
  */
-import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { usePathname, useRouter } from "next/navigation"
 import { cn } from "../lib/utils"
 
 export function Pagination({
@@ -20,13 +20,14 @@ export function Pagination({
 }) {
   const router = useRouter()
   const pathname = usePathname()
-  const searchParams = useSearchParams()
 
   const arrayRange = (start: number, stop: number) =>
     Array.from({ length: stop - start + 1 }, (_, index) => start + index)
 
   const handlePageChange = (newPage: number) => {
-    const params = new URLSearchParams(searchParams)
+    // The query as it is at the click: read while rendering, it would make
+    // every listing page request data and stop it from being prerendered.
+    const params = new URLSearchParams(window.location.search)
     params.set("page", newPage.toString())
     router.push(`${pathname}?${params.toString()}`)
   }

package/src/store/sort-select.tsx

@@ -12,7 +12,7 @@
  * from `sortOptionLabelKeys` (labels.ts, pure) so map completeness against
  * `SortOptions` is unit-tested.
  */
-import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { usePathname, useRouter } from "next/navigation"
 import { useCallback } from "react"
 import { cn } from "../lib/utils"
 import type { SortOptions } from "../lib/sort-products"
@@ -35,20 +35,18 @@ export function SortSelect({
   const l = { ...defaultStoreLabels, ...labels }
   const router = useRouter()
   const pathname = usePathname()
-  const searchParams = useSearchParams()
 
   const sortOptions = (
     Object.keys(sortOptionLabelKeys) as SortOptions[]
   ).map((value) => ({ value, label: l[sortOptionLabelKeys[value]] }))
 
-  const createQueryString = useCallback(
-    (name: string, value: string) => {
-      const params = new URLSearchParams(searchParams)
-      params.set(name, value)
-      return params.toString()
-    },
-    [searchParams]
-  )
+  // The query as it is at the click: read while rendering, it would make
+  // every listing page request data and stop it from being prerendered.
+  const createQueryString = useCallback((name: string, value: string) => {
+    const params = new URLSearchParams(window.location.search)
+    params.set(name, value)
+    return params.toString()
+  }, [])
 
   const handleChange = (value: SortOptions) => {
     const query = createQueryString("sortBy", value)

package/theme/theme.css

@@ -40,6 +40,7 @@
   --color-success-foreground: var(--success-foreground);
   --color-warning: var(--warning);
   --color-warning-foreground: var(--warning-foreground);
+  --color-rating: var(--rating);
 
   --color-border: var(--border);
   --color-input: var(--input);

package/theme/tokens.css

@@ -44,6 +44,9 @@
   --warning: oklch(0.828 0.189 84.429);
   --warning-foreground: oklch(0.279 0.077 45.635);
 
+  /* ── Ratings: the filled review star ──────────────────────────────────── */
+  --rating: oklch(0.828 0.189 84.429);
+
   /* ── Lines and focus ──────────────────────────────────────────────────── */
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
@@ -94,6 +97,8 @@
   --warning: oklch(0.828 0.189 84.429);
   --warning-foreground: oklch(0.279 0.077 45.635);
 
+  --rating: oklch(0.828 0.189 84.429);
+
   --border: oklch(1 0 0 / 12%);
   --input: oklch(1 0 0 / 18%);
   --ring: oklch(0.556 0 0);