@thorprovider/blocks 0.1.0

package/src/blocks/e-commerce/product-overview/product-quick-view-dialog.tsx

@@ -0,0 +1,393 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
+import { Check, Minus, Plus, Star } from 'lucide-react'
+
+import { Badge } from '../../../ui/badge'
+import { Button } from '../../../ui/button'
+import { ButtonGroup, ButtonGroupText } from '../../../ui/button-group'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '../../../ui/dialog'
+import { Separator } from '../../../ui/separator'
+import { ToggleGroup, ToggleGroupItem } from '../../../ui/toggle-group'
+
+import type { QuickViewProduct } from './product-quick-view'
+
+const money = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 })
+
+/** How long the added-to-cart confirmation stays up before the button returns to its label. */
+const confirmationMs = 2400
+
+/**
+ * What a product opens on: its stated default where it has one, and otherwise the first option
+ * that is actually in stock — never a sold-out one, which would put the panel in a state whose
+ * add-to-cart button cannot honestly be pressed.
+ */
+function defaultSelection(product: QuickViewProduct): Record<string, string> {
+  return Object.fromEntries(
+    product.variants.map(variant => {
+      const stated = variant.options.find(
+        option => option.value === variant.defaultValue && option.available
+      )
+      const fallback = variant.options.find(option => option.available) ?? variant.options[0]
+
+      return [variant.key, (stated ?? fallback).value]
+    })
+  )
+}
+
+/**
+ * The panel a quick view opens, and the reason the pattern exists.
+ *
+ * A quick view is not a small product page. It is a promise that the reader will not lose the
+ * grid, so this one keeps the whole catalogue reachable from inside: the strip under the picture
+ * is the other products, not other angles of this one. Choosing from it re-dresses the panel
+ * around a new product, the grid behind marks where the reader has got to, and closing returns
+ * them to a grid they never actually left.
+ */
+export function ProductQuickViewDialog({
+  products,
+  activeIndex,
+  onActiveIndexChange,
+  onClose,
+  onAddToCart,
+}: {
+  products: QuickViewProduct[]
+  /** Which product is open, or `null` when the dialog is closed. */
+  activeIndex: number | null
+  onActiveIndexChange: (index: number) => void
+  onClose: () => void
+  onAddToCart?: (
+    product: QuickViewProduct,
+    quantity: number,
+    selection: Record<string, string>
+  ) => void
+}) {
+  const reduceMotion = useReducedMotion()
+  const product = activeIndex === null ? null : products[activeIndex]
+
+  const [selection, setSelection] = useState<Record<string, string>>({})
+  const [quantity, setQuantity] = useState(1)
+  const [addedCount, setAddedCount] = useState(0)
+
+  /*
+    One effect keyed on the product's identity rather than three scattered resets. Carrying a
+    "brushed brass" across from a pendant to a sofa is worse than starting again, and a quantity
+    of four floor lamps should not become four sofas because the reader stepped sideways.
+  */
+  useEffect(() => {
+    if (!product) {
+      return
+    }
+
+    setSelection(defaultSelection(product))
+    setQuantity(1)
+    setAddedCount(0)
+  }, [product?.id]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    if (addedCount === 0) {
+      return
+    }
+
+    const timer = setTimeout(() => setAddedCount(0), confirmationMs)
+
+    return () => clearTimeout(timer)
+  }, [addedCount])
+
+  /*
+    The chosen options in words, for the live region and the stock line. Built from the variant
+    order rather than from the selection object, so it reads the way the controls are stacked
+    instead of in whatever order the keys happen to sit in.
+  */
+  const selectionSummary = useMemo(() => {
+    if (!product) {
+      return ''
+    }
+
+    return product.variants
+      .map(variant => variant.options.find(option => option.value === selection[variant.key])?.label)
+      .filter(Boolean)
+      .join(' · ')
+  }, [product, selection])
+
+  if (!product || activeIndex === null) {
+    return null
+  }
+
+  const discount = product.compareAt ? Math.round((1 - product.price / product.compareAt) * 100) : null
+
+  return (
+    <Dialog open onOpenChange={next => !next && onClose()}>
+      {/*
+        `max-h` plus `overflow-y-auto` is what makes this usable below a laptop. The popup is
+        fixed and centred with a translate, so without a bound it grew past both edges of a phone
+        and the add-to-cart button ended up off the bottom of the screen with no way to reach it
+        — the page behind a fixed element cannot scroll to it either.
+      */}
+      <DialogContent className='max-h-[92dvh] w-full overflow-y-auto p-0 sm:max-w-4xl md:h-[38rem] md:max-h-[92dvh] md:overflow-hidden'>
+        <DialogHeader className='sr-only'>
+          <DialogTitle>{product.name}</DialogTitle>
+          <DialogDescription>{product.description}</DialogDescription>
+        </DialogHeader>
+
+        {/*
+          A fixed height from `md`, and the detail column scrolls inside it.
+
+          The popup is centred with a -50% translate, so its height decides where its top edge
+          lands. Every product carries a different length of description and a different number
+          of variant rows, so stepping through the strip re-measured the panel and slid the whole
+          dialog up and down under the reader's cursor - the thumbnail they wanted next was no
+          longer where they were pointing. Holding the height still makes the strip a control
+          rather than a moving target. Below `md` the columns stack and the whole popup scrolls,
+          where a fixed height would be the wrong answer.
+        */}
+        <div className='grid gap-0 md:h-full md:min-h-0 md:grid-cols-[minmax(0,0.95fr)_minmax(0,1fr)]'>
+          <div className='bg-muted/40 flex flex-col gap-3 p-4 sm:p-5 md:min-h-0 md:justify-center md:overflow-y-auto'>
+            {/*
+              The picture cross-fades rather than cutting. At this size a hard swap reads as a
+              flicker, and the fade is what ties the thumbnail that was pressed to the picture
+              that arrives.
+            */}
+            <div className='bg-muted relative aspect-square w-full overflow-hidden rounded-lg'>
+              <AnimatePresence initial={false} mode='popLayout'>
+                <motion.img
+                  key={product.id}
+                  src={product.image || undefined}
+                  alt={product.imageAlt}
+                  className='absolute inset-0 size-full object-cover'
+                  initial={reduceMotion ? false : { opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={reduceMotion ? undefined : { opacity: 0 }}
+                  transition={{ duration: 0.24, ease: 'easeOut' }}
+                  decoding='async'
+                />
+              </AnimatePresence>
+
+              <Badge variant='secondary' className='absolute top-3 left-3 rounded-full'>
+                {product.category}
+              </Badge>
+            </div>
+
+            {/*
+              `spacing={2}` rather than a `gap-2` class. A ToggleGroup at the default spacing of
+              zero is a segmented control: it strips the item radii, collapses the shared borders
+              and adds `px-2` to every item through a `group-data-[spacing=0]` selector that no
+              plain `p-0` utility can outrank. That padding around a small thumbnail was the odd
+              width and the odd gaps; asking for real spacing turns the whole rule off.
+
+              A ToggleGroup rather than a row of buttons for the same reason it is used for the
+              variants: single selection, roving focus and arrow-key movement, none of which a
+              loop of buttons gets without being told.
+            */}
+            <ToggleGroup
+              type='multiple'
+              spacing={2}
+              value={[String(activeIndex)]}
+              onValueChange={value => value[0] && onActiveIndexChange(Number(value[0]))}
+              aria-label='Elegir producto'
+              className='grid w-full grid-cols-4'
+            >
+              {products.map((entry, index) => (
+                <ToggleGroupItem
+                  key={entry.id}
+                  value={String(index)}
+                  aria-label={entry.name}
+                  className='data-[state=on]:ring-primary size-auto min-w-0 overflow-hidden rounded-md p-0 ring-2 ring-transparent transition-shadow data-[state=on]:bg-transparent'
+                >
+                  <img
+                    src={entry.image || undefined}
+                    alt=''
+                    className='bg-muted aspect-square w-full object-cover'
+                    loading='lazy'
+                    decoding='async'
+                  />
+                </ToggleGroupItem>
+              ))}
+            </ToggleGroup>
+
+            <p className='text-muted-foreground text-center font-mono text-xs tabular-nums'>
+              {`${activeIndex + 1} / ${products.length}`}
+            </p>
+          </div>
+
+          <div className='flex flex-col p-4 pt-5 sm:p-6 md:min-h-0 md:overflow-y-auto'>
+            <p className='text-muted-foreground text-xs tracking-[0.16em] uppercase'>{product.tagline}</p>
+
+            <h2 className='mt-2 text-2xl font-semibold tracking-tight text-balance'>{product.name}</h2>
+
+            <div className='mt-3 flex flex-wrap items-center gap-x-3 gap-y-2'>
+              <p className='text-xl font-semibold tabular-nums'>{money.format(product.price)}</p>
+              {product.compareAt ? (
+                <p className='text-muted-foreground text-sm line-through tabular-nums'>
+                  {money.format(product.compareAt)}
+                </p>
+              ) : null}
+              {discount ? (
+                <Badge variant='secondary' className='rounded-full font-normal'>{`${discount}% de descuento`}</Badge>
+              ) : null}
+              <p className='text-muted-foreground flex items-center gap-1.5 text-sm'>
+                {/*
+                  Rating stars use the foreground token so they inherit theme contrast,
+                  matching storefront-hero-1 and review-rating-1. The rating number sits
+                  right beside the star, so the star is never the only carrier.
+                */}
+                <Star className='size-3.5 fill-foreground text-foreground' aria-hidden='true' />
+                <span className='text-foreground font-medium tabular-nums'>{product.rating}</span>
+                <span className='tabular-nums'>({product.reviewCount})</span>
+              </p>
+            </div>
+
+            <p className='text-muted-foreground mt-4 text-sm leading-6 text-pretty'>{product.description}</p>
+
+            <div className='mt-5 flex flex-col gap-5'>
+              {product.variants.map(variant => (
+                /*
+                  A fieldset per variant, and a ToggleGroup inside it rather than a row of
+                  Buttons with a hand-rolled `aria-pressed`. A loop of buttons has to fake single
+                  selection and roving focus, and gets the focus order wrong the moment one of
+                  them is disabled — which, with a sold-out finish, is most of them.
+                */
+                <fieldset key={variant.key}>
+                  <legend className='flex w-full items-baseline gap-2 text-sm font-medium'>
+                    {variant.label}
+                    <span className='text-muted-foreground font-normal'>
+                      {variant.options.find(option => option.value === selection[variant.key])?.label}
+                    </span>
+                  </legend>
+
+                  <ToggleGroup
+                    type='multiple'
+                    spacing={2}
+                    variant='outline'
+                    value={[selection[variant.key] ?? '']}
+                    onValueChange={value =>
+                      value[0] && setSelection(current => ({ ...current, [variant.key]: value[0] }))
+                    }
+                    aria-label={variant.label}
+                    className='mt-2 flex-wrap'
+                  >
+                    {variant.options.map(option => (
+                      <ToggleGroupItem
+                        key={option.value}
+                        value={option.value}
+                        disabled={!option.available}
+                        // Sold out is a word, not just a dimmed control.
+                        aria-label={option.available ? option.label : `${option.label}, agotado`}
+                        className='data-[state=on]:border-primary data-[state=on]:ring-primary/30 gap-2 data-[state=on]:ring-2'
+                      >
+                        {option.swatch ? (
+                          <span
+                            aria-hidden='true'
+                            className='ring-border size-3 rounded-full ring-1'
+                            style={{ backgroundColor: option.swatch }}
+                          />
+                        ) : null}
+                        {option.label}
+                      </ToggleGroupItem>
+                    ))}
+                  </ToggleGroup>
+                </fieldset>
+              ))}
+            </div>
+
+            <div className='mt-6 flex flex-wrap items-center gap-3'>
+              {/*
+                A ButtonGroup, so the stepper's shared border, its corner radii and its focus
+                stacking come from the component rather than from `rounded-r-none` by hand.
+
+                The readout is a `ButtonGroupText`, not a bare div. The group styles its children
+                through `[&>[data-slot]…]` selectors, so an element without a `data-slot` is
+                invisible to every one of them: it kept its own radius, lost no border where the
+                group expected a seam, and threw off which child counted as last - which is the
+                detached middle box with a stray rule under it.
+              */}
+              <ButtonGroup aria-label='Cantidad'>
+                <Button
+                  variant='outline'
+                  size='icon'
+                  aria-label='Reducir cantidad'
+                  disabled={quantity <= 1}
+                  onClick={() => setQuantity(current => Math.max(1, current - 1))}
+                >
+                  <Minus />
+                </Button>
+                {/*
+                  `aria-live` rather than a label: the number changes under the reader's own
+                  button presses, and announcing it is the only way they hear the result.
+                */}
+                <ButtonGroupText aria-live='polite' className='bg-background min-w-10 justify-center tabular-nums'>
+                  {quantity}
+                </ButtonGroupText>
+                <Button
+                  variant='outline'
+                  size='icon'
+                  aria-label='Aumentar cantidad'
+                  onClick={() => setQuantity(current => current + 1)}
+                >
+                  <Plus />
+                </Button>
+              </ButtonGroup>
+
+              <Button
+                className='flex-1'
+                onClick={() => {
+                  setAddedCount(quantity)
+                  onAddToCart?.(product, quantity, selection)
+                }}
+              >
+                {addedCount > 0 ? (
+                  <>
+                    <Check aria-hidden='true' />
+                    Añadido al carrito
+                  </>
+                ) : (
+                  `Añadir al carrito · ${money.format(product.price * quantity)}`
+                )}
+              </Button>
+            </div>
+
+            {product.unitsLeft ? (
+              <p className='text-muted-foreground mt-3 text-xs'>
+                {`Solo quedan ${product.unitsLeft} en ${selectionSummary || 'esta opción'}.`}
+              </p>
+            ) : null}
+
+            {/* The one announcement, off-screen, that the visible confirmation stands in for. */}
+            <p role='status' aria-live='polite' className='sr-only'>
+              {addedCount > 0 ? `${addedCount} × ${product.name}, ${selectionSummary}, añadido a tu carrito` : ''}
+            </p>
+
+            <Separator className='mt-6' />
+
+            <ul className='text-muted-foreground mt-4 grid gap-1.5 text-sm sm:grid-cols-2'>
+              {product.details.map(detail => (
+                <li key={detail} className='flex items-start gap-2'>
+                  <Check className='text-primary mt-0.5 size-3.5 shrink-0' aria-hidden='true' />
+                  {detail}
+                </li>
+              ))}
+            </ul>
+
+            {product.href ? (
+              <a
+                href={product.href}
+                className='text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 mt-5 w-fit rounded-sm text-sm underline underline-offset-4 outline-none focus-visible:ring-[3px]'
+              >
+                Ver la página completa del producto
+              </a>
+            ) : null}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default ProductQuickViewDialog

package/src/blocks/e-commerce/product-overview/product-quick-view.tsx

@@ -0,0 +1,136 @@
+'use client'
+
+import { useId, useState } from 'react'
+
+import { Badge } from '../../../ui/badge'
+
+import { ProductQuickViewCard } from './product-quick-view-card'
+import { ProductQuickViewDialog } from './product-quick-view-dialog'
+
+export interface QuickViewOption {
+  value: string
+  label: string
+  available: boolean
+  /**
+   * A literal colour for a swatch, when the option is one.
+   *
+   * Finish colours are product data, not theme data: brass has to stay brass whatever preset the
+   * customizer is on. It is the one place in the block that is not a token, and the option's
+   * label always carries the same information in words.
+   */
+  swatch?: string
+}
+
+export interface QuickViewVariant {
+  key: string
+  label: string
+  /**
+   * Which option a product opens on.
+   *
+   * Not simply the first available one: sizes are listed smallest first, and the sofa is sold as
+   * the size its name promises, so the panel would otherwise open on an option that disagrees
+   * with the card the reader just pressed.
+   */
+  defaultValue?: string
+  options: QuickViewOption[]
+}
+
+export interface QuickViewProduct {
+  id: string
+  name: string
+  /** The one line that says what it is, under the name on the card and in the panel. */
+  tagline: string
+  category: string
+  price: number
+  compareAt?: number
+  rating: number
+  reviewCount: number
+  /** In stock, and low enough to be worth saying. Omitted when there is plenty. */
+  unitsLeft?: number
+  image: string
+  imageAlt: string
+  description: string
+  /** The panel shows these as a list, not as a specification table. */
+  details: string[]
+  variants: QuickViewVariant[]
+  /** Where the full product page lives. The panel only links to it when set. */
+  href?: string
+}
+
+export interface ProductQuickViewProps {
+  products: QuickViewProduct[]
+  eyebrow?: string
+  heading?: string
+  lede?: string
+  /**
+   * Called with the chosen options when the reader adds to cart. When absent the button still
+   * shows and keeps its added-to-cart confirmation; it just has nowhere to report to.
+   */
+  onAddToCart?: (
+    product: QuickViewProduct,
+    quantity: number,
+    selection: Record<string, string>
+  ) => void
+}
+
+/**
+ * A product grid whose point is the panel that opens over it.
+ *
+ * One dialog serves the whole catalogue rather than one per card: the panel steps between
+ * products from inside, the card it is showing stays lit underneath, and closing puts the reader
+ * back exactly where the grid says they are.
+ */
+export function ProductQuickView({
+  products,
+  eyebrow = 'Novedades de la temporada',
+  heading = 'Todo lo que vale la pena saber, sin salir de la rejilla',
+  lede = 'Abre cualquier pieza para ver sus acabados, sus medidas y la respuesta a la pregunta que, de otro modo, te enviaría a la página del producto. Recorre el resto de la habitación desde dentro.',
+  onAddToCart,
+}: ProductQuickViewProps) {
+  const [activeIndex, setActiveIndex] = useState<number | null>(null)
+  // A reusable block cannot carry a fixed heading id: two instances on a page would both claim it.
+  const headingId = useId()
+
+  return (
+    <section aria-labelledby={headingId} className='bg-background w-full py-16 sm:py-24'>
+      <div className='mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8'>
+        <div className='flex max-w-2xl flex-col items-start'>
+          <Badge variant='outline' className='gap-2 rounded-full px-3'>
+            <span aria-hidden='true' className='bg-primary size-1.5 rounded-full' />
+            {eyebrow}
+          </Badge>
+
+          <h2
+            id={headingId}
+            className='mt-5 text-3xl font-semibold tracking-tight text-balance sm:text-4xl'
+          >
+            {heading}
+          </h2>
+
+          <p className='text-muted-foreground mt-4 text-base text-pretty'>{lede}</p>
+        </div>
+
+        <div className='mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2 md:grid-cols-3 lg:mt-12'>
+          {products.map((product, index) => (
+            <ProductQuickViewCard
+              key={product.id}
+              product={product}
+              isActive={activeIndex === index}
+              onOpen={() => setActiveIndex(index)}
+            />
+          ))}
+        </div>
+      </div>
+
+      <ProductQuickViewDialog
+        products={products}
+        activeIndex={activeIndex}
+        onActiveIndexChange={setActiveIndex}
+        onClose={() => setActiveIndex(null)}
+        onAddToCart={onAddToCart}
+      />
+    </section>
+  )
+}
+
+export default ProductQuickView

package/src/blocks/e-commerce/reviews/review-rating-1-review-form.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import { useState, type FormEvent } from 'react'
+import { Send, Star } from 'lucide-react'
+import { Button } from '../../../ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../../ui/card'
+import { Input } from '../../../ui/input'
+import { Label } from '../../../ui/label'
+import { Textarea } from '../../../ui/textarea'
+import { cn } from '../../../lib/utils'
+
+export interface ReviewRating1ReviewFormProps {
+  title: string
+  description?: string
+  nameLabel: string
+  emailLabel: string
+  reviewLabel: string
+  namePlaceholder: string
+  emailPlaceholder: string
+  reviewPlaceholder: string
+  submitButtonText: string
+  submittingButtonText: string
+}
+
+export interface ReviewRating1ReviewFormData {
+  name: string
+  email: string
+  review: string
+  rating: number
+}
+
+interface ReviewRating1ReviewFormPropsInput {
+  form: ReviewRating1ReviewFormProps
+  onSubmitReview?: (data: ReviewRating1ReviewFormData) => void
+}
+
+export function ReviewRating1ReviewForm({ form, onSubmitReview }: ReviewRating1ReviewFormPropsInput) {
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [rating, setRating] = useState<number>(0)
+  const [hoveredStar, setHoveredStar] = useState<number>(0)
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    review: '',
+  })
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setIsSubmitting(true)
+    onSubmitReview?.({ ...formData, rating })
+    setRating(0)
+    setFormData({ name: '', email: '', review: '' })
+    setIsSubmitting(false)
+  }
+
+  return (
+    <div className='lg:sticky lg:top-8 lg:h-fit'>
+      <Card>
+        <CardHeader>
+          <CardTitle id='review-form-heading'>{form.title}</CardTitle>
+          {form.description ? <CardDescription>{form.description}</CardDescription> : null}
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className='flex flex-col gap-6'>
+            <div className='flex flex-col gap-2'>
+              <div className='flex gap-1' role='radiogroup' aria-label='Rating'>
+                {[1, 2, 3, 4, 5].map(star => (
+                  <Button
+                    variant='ghost'
+                    key={star}
+                    type='button'
+                    onClick={() => setRating(star)}
+                    onMouseEnter={() => setHoveredStar(star)}
+                    onMouseLeave={() => setHoveredStar(0)}
+                    className='h-9 px-4 py-2 focus-visible:ring-ring cursor-pointer rounded-full !p-1 hover:bg-transparent focus:outline-hidden focus-visible:ring-2'
+                    aria-pressed={rating === star}
+                    aria-label={`Rate ${star} ${star === 1 ? 'star' : 'stars'}`}
+                  >
+                    <Star className={cn('size-6', (hoveredStar || rating) >= star ? 'fill-foreground' : '')} />
+                  </Button>
+                ))}
+              </div>
+            </div>
+
+            <div className='flex flex-col gap-2'>
+              <Label htmlFor='name'>{form.nameLabel}</Label>
+              <Input
+                id='name'
+                value={formData.name}
+                onChange={e => setFormData({ ...formData, name: e.target.value })}
+                placeholder={form.namePlaceholder}
+                required
+                aria-required='true'
+                className='h-9'
+              />
+            </div>
+
+            <div className='flex flex-col gap-2'>
+              <Label htmlFor='email'>{form.emailLabel}</Label>
+              <Input
+                id='email'
+                type='email'
+                value={formData.email}
+                onChange={e => setFormData({ ...formData, email: e.target.value })}
+                placeholder={form.emailPlaceholder}
+                required
+                aria-required='true'
+                className='h-9'
+              />
+            </div>
+
+            <div className='flex flex-col gap-2'>
+              <Label htmlFor='review'>{form.reviewLabel}</Label>
+              <Textarea
+                id='review'
+                value={formData.review}
+                onChange={e => setFormData({ ...formData, review: e.target.value })}
+                placeholder={form.reviewPlaceholder}
+                required
+                aria-required='true'
+              />
+            </div>
+
+            <Button type='submit' className='h-9 px-4 py-2 w-full cursor-pointer' disabled={isSubmitting}>
+              {isSubmitting ? form.submittingButtonText : form.submitButtonText}
+              {!isSubmitting && <Send className='size-4' />}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}