{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "review-summary", "title": "Review Summary", "author": "ecomcn ", "description": "The reviews section: the average set large, a star histogram whose rows are buttons that filter the list (and read out as \"5 stars, 226 reviews, 72%\"), a fit scale with its reading in words, and reviews with a Verified buyer badge. The active row's rule slides between rows, bars grow to their share, and the list grows to its measured height as it filters — Motion, a fade under reduced motion. Takes a page of reviews plus overall counts, and reports the filter so you can fetch server-side. Compound, through useReviewSummary().", "dependencies": [ "motion", "lucide-react" ], "registryDependencies": [ "button", "badge" ], "files": [ { "path": "src/registry/ecomcn/review-summary/review-summary.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, Star } from \"lucide-react\"\nimport { AnimatePresence, MotionConfig, motion, useReducedMotion } from \"motion/react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\n/*\n * The reviews section of a product page: the average, a star histogram that\n * filters the list, a fit scale, and the reviews themselves.\n *\n * \n *\n * or composed\n * \n * \n * \n * \n * \n *\n * Every histogram row is a button: it filters the list to that rating, and\n * says so in words. The fit scale has a text equivalent (\"Runs a little\n * small\") on screen, not only a marker. Motion does the moving: the active\n * row's rule slides between rows, the list grows and shrinks to its measured\n * height as it filters, and reviews fade in and out — a fade alone under\n * reduced motion. `useReviewSummary()` reads the shared state.\n */\n\nexport interface Review {\n id: string\n /** 1 to 5. */\n rating: number\n title?: string\n body: React.ReactNode\n author: string\n /** ISO date, \"2026-09-14\". Shown as a calendar date, the same in every time zone. */\n date: string\n /** Bought it: shown as a \"Verified buyer\" badge. */\n verified?: boolean\n /** -1 runs small, 0 true to size, 1 runs large. */\n fit?: number\n /** What they bought: \"Tan · EU 41\". */\n variant?: string\n}\n\n/** Review counts per rating, 1 star first: `[4, 3, 18, 61, 226]`. */\nexport type ReviewDistribution = [number, number, number, number, number]\n\n/** The same settle curve as the other ecomcn morphs: no bounce, an editorial ease. */\nconst MORPH = { duration: 0.45, ease: [0.2, 0, 0, 1] } as const\n\n/** The words for a fit score, from -1 (small) to 1 (large). */\nfunction defaultFitLabel(fit: number) {\n if (fit <= -0.6) return \"Runs small\"\n if (fit <= -0.2) return \"Runs a little small\"\n if (fit < 0.2) return \"True to size\"\n if (fit < 0.6) return \"Runs a little large\"\n return \"Runs large\"\n}\n\nconst subscribeNothing = () => () => {}\n\n/**\n * The locale to format with. Yours when you pass one. Otherwise the\n * visitor's — but only once hydrated: the server cannot know it, and its HTML\n * (\"Sep 21, 2026\") must match the first client render, not the browser's\n * \"21 Sept 2026\". Until then, en-US.\n */\nfunction useFormatLocale(locale?: string) {\n const hydrated = React.useSyncExternalStore(subscribeNothing, () => true, () => false)\n return locale ?? (hydrated ? undefined : \"en-US\")\n}\n\nfunction useControllableState(\n value: T | undefined,\n defaultValue: T,\n onChange?: (next: T) => void\n) {\n const [uncontrolled, setUncontrolled] = React.useState(defaultValue)\n const controlled = value !== undefined\n const set = React.useCallback(\n (next: T) => {\n if (!controlled) setUncontrolled(next)\n onChange?.(next)\n },\n [controlled, onChange]\n )\n return [controlled ? value : uncontrolled, set] as const\n}\n\n/* ─── context ──────────────────────────────────────────────────────────── */\n\nexport interface ReviewSummaryContextValue {\n reviews: Review[]\n /** The reviews under the current filter. */\n filtered: Review[]\n distribution: ReviewDistribution\n total: number\n /** 0 when there are no reviews. */\n average: number\n /** Mean fit, -1 to 1; undefined when no review rated the fit. */\n fit?: number\n fitCount: number\n fitLabel: (fit: number) => string\n /** The rating the list is filtered to, or null for all. */\n rating: number | null\n setRating: (rating: number | null) => void\n /** How many of `filtered` are on show; \"Show more\" raises it. */\n visible: number\n showMore: () => void\n /** The locale formatting uses: yours, or the visitor's once hydrated. */\n locale?: string\n /** Formats a 0–5 score for the locale: \"4.6\". */\n formatScore: (score: number) => string\n formatDate: (iso: string) => string\n loading: boolean\n}\n\nconst ReviewSummaryContext = React.createContext(null)\n\nexport function useReviewSummary() {\n const context = React.useContext(ReviewSummaryContext)\n if (!context) {\n throw new Error(\"useReviewSummary must be used within .\")\n }\n return context\n}\n\n/* ─── root ─────────────────────────────────────────────────────────────── */\n\nexport interface ReviewSummaryProps\n extends Omit, \"title\"> {\n reviews: Review[]\n /**\n * Counts per rating across every review, when `reviews` is one page of\n * many. Defaults to counting `reviews`.\n */\n distribution?: ReviewDistribution\n /** Defaults to the mean of `distribution`. */\n average?: number\n /** Overall fit, -1 to 1. Defaults to the mean of the reviews' `fit`. */\n fit?: number\n /** \"Runs a little small\" for a score — your words, or another language. */\n fitLabel?: (fit: number) => string\n /** The rating to filter to, or null for all. */\n rating?: number | null\n defaultRating?: number | null\n /** Fetch that rating's reviews here when they are paginated server-side. */\n onRatingChange?: (rating: number | null) => void\n /** Reviews shown before \"Show more\". Defaults to 4. */\n pageSize?: number\n title?: React.ReactNode\n /** Under the score: a \"Write a review\" link, say. */\n action?: React.ReactNode\n locale?: string\n loading?: boolean\n}\n\nexport function ReviewSummary({\n reviews,\n distribution: distributionProp,\n average: averageProp,\n fit: fitProp,\n fitLabel = defaultFitLabel,\n rating: ratingProp,\n defaultRating = null,\n onRatingChange,\n pageSize = 4,\n title = \"Reviews\",\n action,\n locale: localeProp,\n loading = false,\n className,\n children,\n ...props\n}: ReviewSummaryProps) {\n const locale = useFormatLocale(localeProp)\n const [rating, setRatingState] = useControllableState(ratingProp, defaultRating, onRatingChange)\n const [visible, setVisible] = React.useState(pageSize)\n const headingId = React.useId()\n\n // A new filter starts from the first page again.\n const setRating = React.useCallback(\n (next: number | null) => {\n setVisible(pageSize)\n setRatingState(next)\n },\n [pageSize, setRatingState]\n )\n\n const context = React.useMemo(() => {\n const distribution =\n distributionProp ??\n reviews.reduce(\n (counts, review) => {\n const star = Math.min(5, Math.max(1, Math.round(review.rating)))\n counts[star - 1] += 1\n return counts\n },\n [0, 0, 0, 0, 0]\n )\n const total = distribution.reduce((sum, n) => sum + n, 0)\n const average =\n averageProp ??\n (total ? distribution.reduce((sum, n, i) => sum + n * (i + 1), 0) / total : 0)\n const fits = reviews.map((r) => r.fit).filter((f): f is number => typeof f === \"number\")\n const fit = fitProp ?? (fits.length ? fits.reduce((a, b) => a + b, 0) / fits.length : undefined)\n const score = new Intl.NumberFormat(locale, { minimumFractionDigits: 1, maximumFractionDigits: 1 })\n // UTC: \"2026-09-14\" is a calendar date, and must not become the 13th\n // west of Greenwich — or differ between the server and the browser.\n const date = new Intl.DateTimeFormat(locale, { dateStyle: \"medium\", timeZone: \"UTC\" })\n\n return {\n reviews,\n filtered: rating === null ? reviews : reviews.filter((r) => Math.round(r.rating) === rating),\n distribution,\n total,\n average,\n fit,\n fitCount: fits.length,\n fitLabel,\n rating,\n setRating,\n visible,\n showMore: () => setVisible((v) => v + pageSize),\n locale,\n formatScore: (n) => score.format(n),\n formatDate: (iso) => {\n const parsed = new Date(iso)\n return Number.isNaN(parsed.getTime()) ? iso : date.format(parsed)\n },\n loading,\n }\n }, [reviews, distributionProp, averageProp, fitProp, fitLabel, rating, setRating, visible, pageSize, locale, loading])\n\n return (\n \n \n \n

\n {title}\n

\n {children ?? (\n
\n
\n \n \n \n {action}\n
\n \n
\n )}\n \n \n \n )\n}\n\n/* ─── parts ────────────────────────────────────────────────────────────── */\n\n/** Five stars, filled to the score; partial stars are clipped, not rounded. */\nfunction Stars({ score, className }: { score: number; className?: string }) {\n return (\n \n \n {Array.from({ length: 5 }, (_, i) => (\n \n ))}\n \n \n {Array.from({ length: 5 }, (_, i) => (\n \n ))}\n \n \n )\n}\n\n/** The average, large — the number is the headline — and what it is based on. */\nexport function ReviewSummaryScore({ className, ...props }: React.HTMLAttributes) {\n const { average, total, formatScore, locale, loading } = useReviewSummary()\n if (loading) {\n return (\n
\n \n \n
\n )\n }\n const count = new Intl.NumberFormat(locale).format(total)\n return (\n
\n {total ? (\n <>\n

\n {formatScore(average)}\n out of 5\n

\n
\n \n \n {count} {total === 1 ? \"review\" : \"reviews\"}\n \n
\n \n ) : (\n <>\n

No reviews yet.

\n

\n Bought one? Yours would be the first — and the one the next buyer reads.\n

\n \n )}\n
\n )\n}\n\n/**\n * One row per rating, 5 to 1. Each row is a button that filters the list\n * and reads out as \"5 stars, 226 reviews, 72%\". The active row carries a\n * rule that slides from row to row.\n */\nexport function ReviewSummaryHistogram({ className, ...props }: React.HTMLAttributes) {\n const { distribution, total, rating, setRating, locale, loading } = useReviewSummary()\n const reduce = useReducedMotion()\n const scope = React.useId()\n if (!total && !loading) return null\n const count = new Intl.NumberFormat(locale)\n const percent = new Intl.NumberFormat(locale, { style: \"percent\" })\n\n return (\n \n {[5, 4, 3, 2, 1].map((star) => {\n const n = distribution[star - 1]\n const share = total ? n / total : 0\n const active = rating === star\n return (\n setRating(active ? null : star)}\n className=\"relative h-9 w-full justify-start gap-3 rounded-none px-2 font-normal text-foreground hover:bg-secondary disabled:opacity-40\"\n >\n {active ? (\n \n ) : null}\n \n {star}\n \n \n \n \n \n \n {loading ? \"\" : count.format(n)}\n \n \n {`${star} ${star === 1 ? \"star\" : \"stars\"}, ${count.format(n)} ${n === 1 ? \"review\" : \"reviews\"}, ${percent.format(share)}`}\n \n \n )\n })}\n \n )\n}\n\n/** Which of the five steps, small to large, a fit score falls in — as the words do. */\nfunction fitStep(fit: number) {\n if (fit <= -0.6) return 0\n if (fit <= -0.2) return 1\n if (fit < 0.2) return 2\n if (fit < 0.6) return 3\n return 4\n}\n\n/**\n * How the fit runs, as reviewers reported it: five fixed steps from small to\n * large with the one it lands on filled, and the reading in words above.\n * A gauge, not a control — no handle to grab, nothing to drag. Screen\n * readers get it as a meter with the words as its value.\n */\nexport function ReviewSummaryFit({ className, ...props }: React.HTMLAttributes) {\n const { fit, fitCount, fitLabel, locale, loading } = useReviewSummary()\n const reduce = useReducedMotion()\n const scope = React.useId()\n if (fit === undefined || loading) return null\n const clamped = Math.min(1, Math.max(-1, fit))\n const label = fitLabel(clamped)\n const step = fitStep(clamped)\n const ratings = `${new Intl.NumberFormat(locale).format(fitCount)} ${fitCount === 1 ? \"rating\" : \"ratings\"}`\n\n return (\n
\n

\n Fit\n \n {label}\n · {ratings}\n \n

\n \n {[0, 1, 2, 3, 4].map((i) => (\n \n {i === step ? (\n \n ) : null}\n \n ))}\n
\n

\n Small\n True to size\n Large\n

\n \n )\n}\n\n/** Follows its content's height, so the panel grows and shrinks rather than jumps. */\nfunction useMeasuredHeight() {\n const ref = React.useRef(null)\n const [height, setHeight] = React.useState(\"auto\")\n React.useLayoutEffect(() => {\n const node = ref.current\n if (!node) return\n const observer = new ResizeObserver(([entry]) => setHeight(entry.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight))\n observer.observe(node)\n return () => observer.disconnect()\n }, [])\n return [ref, height] as const\n}\n\n/**\n * The reviews, filtered by the histogram. Filtering says what is showing and\n * offers the way back; the list grows to its new height with Motion.\n */\nexport function ReviewSummaryList({ className, ...props }: React.HTMLAttributes) {\n const { filtered, total, rating, setRating, visible, showMore, loading } = useReviewSummary()\n const reduce = useReducedMotion()\n const [inner, height] = useMeasuredHeight()\n const shown = filtered.slice(0, visible)\n\n if (!total && !loading) return null\n\n return (\n
\n
\n

\n {loading\n ? \"Loading reviews…\"\n : rating === null\n ? `Showing ${shown.length} of ${filtered.length}`\n : `${filtered.length} ${filtered.length === 1 ? \"review\" : \"reviews\"} with ${rating} ${rating === 1 ? \"star\" : \"stars\"}`}\n

\n {rating !== null ? (\n setRating(null)}\n className=\"h-auto rounded-none p-0 text-sm text-foreground\"\n >\n Show all reviews\n \n ) : null}\n
\n\n \n
\n {loading ? (\n
    \n {Array.from({ length: 3 }, (_, i) => (\n
  • \n \n \n \n \n
    • \n ))}\n
\n ) : (\n
    \n \n {shown.map((review) => (\n \n \n \n ))}\n \n
\n )}\n
\n \n\n {!loading && shown.length < filtered.length ? (\n \n Show more reviews\n \n ) : null}\n
\n )\n}\n\n/** One review: rating, title, body, then who and when — and whether they bought it. */\nexport function ReviewSummaryItem({\n review,\n className,\n ...props\n}: { review: Review } & React.HTMLAttributes) {\n const { formatDate, formatScore } = useReviewSummary()\n return (\n
\n
\n \n Rated {formatScore(review.rating)} out of 5\n {review.variant ? {review.variant} : null}\n
\n {review.title ?

{review.title}

: null}\n
{review.body}
\n

\n {review.author}\n \n {review.verified ? (\n \n \n Verified buyer\n \n ) : null}\n

\n
\n )\n}\n", "type": "registry:component", "target": "components/ecomcn/review-summary.tsx" } ], "categories": [ "ecommerce", "product", "pdp", "reviews" ], "type": "registry:block" }