@thorprovider/blocks 0.1.2 → 1.0.0

package/src/blocks/e-commerce/product-list/product-grid.test.tsx

@@ -0,0 +1,162 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { ProductGrid, type ProductGridProps } from './product-grid'
+import type { ProductPresentation } from '../../../lib/contracts'
+
+;(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true
+
+// jsdom lacks the browser APIs the classic presentation's motion layer touches.
+if (!window.matchMedia) {
+  window.matchMedia = ((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    addListener: () => {},
+    removeListener: () => {},
+    dispatchEvent: () => false,
+  })) as unknown as typeof window.matchMedia
+}
+if (!('IntersectionObserver' in window)) {
+  ;(window as Record<string, unknown>).IntersectionObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+    takeRecords() {
+      return []
+    }
+  }
+}
+
+const baseItem: ProductPresentation = {
+  id: 'p1',
+  title: 'Llave de impacto',
+  image: '/demo/impact.svg',
+  imageAlt: 'Llave de impacto inalámbrica',
+  price: { amount: '129.50', currencyCode: 'EUR' },
+  rating: 4.5,
+}
+
+const items = (count: number): ProductPresentation[] =>
+  Array.from({ length: count }, (_, i) => ({
+    ...baseItem,
+    id: `p${i + 1}`,
+    title: `Producto ${i + 1}`,
+  }))
+
+const renderMarkup = (props: ProductGridProps) => renderToStaticMarkup(<ProductGrid {...props} />)
+
+const countOccurrences = (html: string, needle: string) => html.split(needle).length - 1
+
+describe('ProductGrid — renders a collection of item cells', () => {
+  it('renders one ProductCard cell per item, in the supplied order', () => {
+    const html = renderMarkup({ items: items(3) })
+    expect(html).toContain('>Producto 1<')
+    expect(html).toContain('>Producto 2<')
+    expect(html).toContain('>Producto 3<')
+    expect(countOccurrences(html, 'Agregar al carrito')).toBe(3)
+    expect(html.indexOf('Producto 1')).toBeLessThan(html.indexOf('Producto 2'))
+  })
+
+  it('renders the optional heading as section chrome', () => {
+    const html = renderMarkup({ items: items(1), heading: 'Oferta' })
+    expect(html).toContain('<section')
+    expect(html).toContain('<h2')
+    expect(html).toContain('>Oferta<')
+  })
+
+  it('slices items to maxItems when supplied', () => {
+    const html = renderMarkup({ items: items(8), maxItems: 2 })
+    expect(html).toContain('>Producto 2<')
+    expect(html).not.toContain('>Producto 3<')
+    expect(countOccurrences(html, 'Agregar al carrito')).toBe(2)
+  })
+
+  it('forwards the bounded presentation to every cell', () => {
+    const html = renderMarkup({ items: items(2), presentation: 'minimal' })
+    expect(html).not.toContain('>Agregar al carrito<')
+    expect(countOccurrences(html, 'aria-label="Agregar al carrito"')).toBe(2)
+  })
+})
+
+describe('ProductGrid — owns the listing states', () => {
+  it('renders skeleton placeholders while loading instead of cells', () => {
+    const html = renderMarkup({ items: items(3), loading: true })
+    expect(html).toContain('data-slot="skeleton"')
+    expect(html).toContain('aria-busy="true"')
+    expect(html).not.toContain('Llave de impacto')
+    expect(html).not.toContain('Agregar al carrito')
+  })
+
+  it('defaults to six skeletons and honors skeletonCount', () => {
+    expect(countOccurrences(renderMarkup({ items: [], loading: true }), 'data-slot="skeleton"')).toBe(18)
+    expect(
+      countOccurrences(
+        renderMarkup({ items: [], loading: true, skeletonCount: 1 }),
+        'data-slot="skeleton"',
+      ),
+    ).toBe(3)
+  })
+
+  it('renders an empty state with default copy instead of a blank grid', () => {
+    const html = renderMarkup({ items: [] })
+    expect(html).toContain('No hay productos para mostrar.')
+    expect(html).not.toContain('Agregar al carrito')
+  })
+
+  it('uses the overridable empty label', () => {
+    expect(renderMarkup({ items: [], emptyLabel: 'Sin productos' })).toContain('Sin productos')
+  })
+})
+
+describe('ProductGrid — resolves wishlist membership per cell', () => {
+  it('passes each cell only its own wishlisted boolean', () => {
+    const html = renderMarkup({
+      items: items(2),
+      presentation: 'rich',
+      wishlistedIds: ['p1'],
+    })
+    expect(html).toContain('aria-pressed="true"')
+    expect(html).toContain('aria-pressed="false"')
+  })
+})
+
+describe('ProductGrid — actions bubble from the cells', () => {
+  let container: HTMLDivElement
+  let root: Root
+  let mounted: Root | undefined
+
+  const mount = (props: ProductGridProps) => {
+    root = createRoot(container)
+    mounted = root
+    act(() => root.render(<ProductGrid {...props} />))
+  }
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    const root = mounted
+    if (root) act(() => root.unmount())
+    container.remove()
+  })
+
+  it('reports the identity of the clicked cell item', () => {
+    const onAddToCart = vi.fn()
+    mount({ items: items(2), onAddToCart })
+    const buttons = Array.from(container.querySelectorAll('button')).filter((b) =>
+      b.textContent?.includes('Agregar al carrito'),
+    )
+    act(() => {
+      buttons[1]!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    })
+    expect(onAddToCart).toHaveBeenCalledWith(expect.objectContaining({ id: 'p2' }))
+  })
+})

package/src/blocks/e-commerce/product-list/product-grid.tsx

@@ -0,0 +1,114 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+import { Skeleton } from '../../../ui/skeleton'
+import type { ProductGridSpecProps, ProductPresentation } from '../../../lib/contracts'
+import { ProductCard } from './product-card'
+
+/**
+ * Props for the canonical `ProductGrid` listing. The serializable spec props
+ * (`ProductGridSpecProps`) plus the runtime-only action callbacks and label
+ * strings, which the grid forwards to each cell.
+ */
+export interface ProductGridProps extends ProductGridSpecProps {
+  onAddToCart?: (item: ProductPresentation) => void
+  onProductClick?: (item: ProductPresentation) => void
+  /** Host-owned wishlist toggle; reports the item and the next state. */
+  onToggleWishlist?: (item: ProductPresentation, nextState: boolean) => void
+  onViewSimilar?: (item: ProductPresentation) => void
+  addToCartLabel?: string
+  /** Shown when a price is present but unavailable (never a zero amount). */
+  unavailablePriceLabel?: string
+  addToWishlistLabel?: string
+  removeFromWishlistLabel?: string
+  viewSimilarLabel?: string
+}
+
+const GRID_CLASSES = 'grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:gap-6'
+
+function SkeletonCell() {
+  return (
+    <div className='flex flex-col gap-3'>
+      <Skeleton className='aspect-square w-full rounded-md' />
+      <Skeleton className='h-4 w-3/4' />
+      <Skeleton className='h-4 w-1/3' />
+    </div>
+  )
+}
+
+/**
+ * Canonical product grid — the listing that renders a collection of product
+ * items as a grid of `ProductCard` item cells. It owns the section chrome
+ * (heading), the responsive layout, the item cap, wishlist membership
+ * resolution, and the loading/empty/ready states; the host owns data errors.
+ */
+export function ProductGrid({
+  items,
+  presentation,
+  heading,
+  maxItems,
+  wishlistedIds,
+  loading = false,
+  skeletonCount = 6,
+  emptyLabel = 'No hay productos para mostrar.',
+  onAddToCart,
+  onProductClick,
+  onToggleWishlist,
+  onViewSimilar,
+  addToCartLabel,
+  unavailablePriceLabel,
+  addToWishlistLabel,
+  removeFromWishlistLabel,
+  viewSimilarLabel,
+}: ProductGridProps) {
+  const displayedItems = maxItems !== undefined ? items.slice(0, maxItems) : items
+
+  let body: ReactNode
+  if (loading) {
+    body = (
+      <div role='status' aria-busy='true' className={GRID_CLASSES}>
+        {Array.from({ length: skeletonCount }, (_, index) => (
+          <SkeletonCell key={index} />
+        ))}
+      </div>
+    )
+  } else if (displayedItems.length === 0) {
+    body = <p className='text-muted-foreground text-center'>{emptyLabel}</p>
+  } else {
+    body = (
+      <div className={GRID_CLASSES}>
+        {displayedItems.map((item) => (
+          <ProductCard
+            key={item.id}
+            item={item}
+            presentation={presentation}
+            wishlisted={wishlistedIds ? wishlistedIds.includes(item.id) : undefined}
+            onAddToCart={onAddToCart}
+            onProductClick={onProductClick}
+            onToggleWishlist={onToggleWishlist}
+            onViewSimilar={onViewSimilar}
+            addToCartLabel={addToCartLabel}
+            unavailablePriceLabel={unavailablePriceLabel}
+            addToWishlistLabel={addToWishlistLabel}
+            removeFromWishlistLabel={removeFromWishlistLabel}
+            viewSimilarLabel={viewSimilarLabel}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <section className='py-12'>
+      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+        {heading && (
+          <h2 className='mb-8 text-center text-2xl font-bold text-balance md:text-3xl'>{heading}</h2>
+        )}
+        {body}
+      </div>
+    </section>
+  )
+}
+
+export default ProductGrid

package/src/blocks/e-commerce/product-list/product-showcase-1.test.tsx

@@ -0,0 +1,78 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { ProductShowcase1, type ProductShowcase1Props } from './product-showcase-1'
+import type { ProductPresentation } from '../../../lib/contracts'
+
+const product = (index: number): ProductPresentation => ({
+  id: `sku-${index}`,
+  title: `Producto ${index}`,
+  price: { amount: `${index}.00`, currencyCode: 'EUR' },
+  image: `/demo/${index}.svg`,
+})
+
+const seven = Array.from({ length: 7 }, (_, i) => product(i + 1))
+
+const render = (props: Partial<ProductShowcase1Props> = {}) =>
+  renderToStaticMarkup(<ProductShowcase1 products={seven} pageSize={3} {...props} />)
+
+describe('ProductShowcase1 — manual paging', () => {
+  it('renders only the first page of products', () => {
+    const html = render()
+    expect(html).toContain('Producto 1')
+    expect(html).toContain('Producto 3')
+    expect(html).not.toContain('Producto 4')
+  })
+
+  it('renders visible prev/next controls with accessible labels', () => {
+    const html = render()
+    expect(html).toContain('aria-label="Anterior"')
+    expect(html).toContain('aria-label="Siguiente"')
+    expect(html).toContain('disabled')
+  })
+
+  it('renders one page indicator per page with the current page marked', () => {
+    const html = render()
+    const dots = html.match(/aria-label="Página \d+"/g) ?? []
+    expect(dots).toHaveLength(3)
+    expect(html).toContain('aria-current="true"')
+  })
+
+  it('exposes a polite live region with the current page position', () => {
+    const html = render()
+    expect(html).toContain('aria-live="polite"')
+    expect(html).toContain('Página 1 / 3')
+  })
+
+  it('never autoplays: no timer is scheduled on render', () => {
+    const originalSetInterval = globalThis.setInterval
+    let calls = 0
+    globalThis.setInterval = ((...args: Parameters<typeof setInterval>) => {
+      calls += 1
+      return originalSetInterval(...args)
+    }) as typeof setInterval
+    try {
+      render()
+    } finally {
+      globalThis.setInterval = originalSetInterval
+    }
+    expect(calls).toBe(0)
+  })
+})
+
+describe('ProductShowcase1 — truthful states', () => {
+  it('renders an empty state instead of fabricated products', () => {
+    const html = renderToStaticMarkup(<ProductShowcase1 products={[]} emptyLabel='Sin productos' />)
+    expect(html).toContain('Sin productos')
+    expect(html).not.toContain('Producto 1')
+  })
+
+  it('renders the unavailable price label for an unresolved price', () => {
+    const html = renderToStaticMarkup(
+      <ProductShowcase1
+        products={[{ id: 'x', title: 'X', price: { amount: '', currencyCode: '' } }]}
+      />,
+    )
+    expect(html).toContain('Precio no disponible')
+    expect(html).not.toContain('$0')
+  })
+})

package/src/blocks/e-commerce/product-list/product-showcase-1.tsx

@@ -0,0 +1,277 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { ChevronLeft, ChevronRight, Star } from 'lucide-react'
+import { motion, useReducedMotion } from 'motion/react'
+
+import { Button } from '../../../ui/button'
+import { Card, CardContent, CardFooter } from '../../../ui/card'
+import { formatMoney } from '../../../lib/money'
+import type { ProductPresentation } from '../../../lib/contracts'
+
+export interface ProductShowcase1Props {
+  products: ProductPresentation[]
+  heading?: string
+  description?: string
+  pageSize?: number
+  prevLabel?: string
+  nextLabel?: string
+  /** Label for the current-page status, e.g. "Página". */
+  pageLabel?: string
+  unavailablePriceLabel?: string
+  emptyLabel?: string
+  addToCartLabel?: string
+  onAddToCart?: (product: ProductPresentation) => void
+  onProductClick?: (product: ProductPresentation) => void
+}
+
+const DEFAULT_PAGE_SIZE = 6
+const SWIPE_THRESHOLD = 48
+
+function chunk<T>(items: readonly T[], size: number): T[][] {
+  const pages: T[][] = []
+  for (let index = 0; index < items.length; index += size) {
+    pages.push(items.slice(index, index + size))
+  }
+  return pages
+}
+
+function compareAtText(product: ProductPresentation): string | undefined {
+  const compareAt = product.compareAtPrice
+  if (!compareAt) return undefined
+  const formatted = formatMoney(compareAt)
+  const price = formatMoney(product.price)
+  if (!formatted || !price) return undefined
+  if (Number(compareAt.amount) <= Number(product.price.amount)) return undefined
+  return formatted
+}
+
+/**
+ * Combined grid-and-carousel product presentation: fixed-size grid pages
+ * navigated manually (prev/next) with a visible current-page indication. There
+ * is no autoplay, no auto-advance, and no infinite loop. Controls are real
+ * buttons (keyboard operable and visible at every breakpoint); touch swipe is an
+ * addition, never the only way to navigate. Below-fold images are lazy.
+ *
+ * Data access lives in the host: this block only renders the props it receives
+ * and reports interactions through callbacks (no backend/router/measurement
+ * imports).
+ */
+export function ProductShowcase1({
+  products,
+  heading,
+  description,
+  pageSize = DEFAULT_PAGE_SIZE,
+  prevLabel = 'Anterior',
+  nextLabel = 'Siguiente',
+  pageLabel = 'Página',
+  unavailablePriceLabel = 'Precio no disponible',
+  emptyLabel = 'No hay productos para mostrar.',
+  addToCartLabel = 'Agregar al carrito',
+  onAddToCart,
+  onProductClick,
+}: ProductShowcase1Props) {
+  const reduceMotion = useReducedMotion()
+  const size = Number.isInteger(pageSize) && pageSize > 0 ? pageSize : DEFAULT_PAGE_SIZE
+  const pages = useMemo(() => chunk(products, size), [products, size])
+  const pageCount = pages.length
+  const [page, setPage] = useState(0)
+  const [touchStart, setTouchStart] = useState<number | null>(null)
+  const safePage = pageCount === 0 ? 0 : Math.min(page, pageCount - 1)
+
+  const goTo = (next: number) => {
+    if (pageCount === 0) return
+    if (next < 0 || next >= pageCount) return
+    setPage(next)
+  }
+
+  if (pageCount === 0) {
+    return (
+      <section className='py-12'>
+        <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+          {heading && (
+            <h2 className='mb-4 text-center text-2xl font-bold text-balance md:text-3xl'>
+              {heading}
+            </h2>
+          )}
+          <p className='text-muted-foreground text-center'>{emptyLabel}</p>
+        </div>
+      </section>
+    )
+  }
+
+  const visible = pages[safePage]
+
+  return (
+    <section
+      className='py-12'
+      aria-roledescription='carousel'
+      onKeyDown={(event) => {
+        if (event.key === 'ArrowLeft') {
+          event.preventDefault()
+          goTo(safePage - 1)
+        } else if (event.key === 'ArrowRight') {
+          event.preventDefault()
+          goTo(safePage + 1)
+        }
+      }}
+    >
+      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+        {(heading || description) && (
+          <div className='mb-8 text-center'>
+            {heading && (
+              <h2 className='text-2xl font-bold text-balance md:text-3xl'>{heading}</h2>
+            )}
+            {description && <p className='text-muted-foreground mt-2 text-balance'>{description}</p>}
+          </div>
+        )}
+
+        <div
+          onTouchStart={(event) => setTouchStart(event.touches[0]?.clientX ?? null)}
+          onTouchEnd={(event) => {
+            if (touchStart === null) return
+            const delta = (event.changedTouches[0]?.clientX ?? touchStart) - touchStart
+            if (delta <= -SWIPE_THRESHOLD) goTo(safePage + 1)
+            else if (delta >= SWIPE_THRESHOLD) goTo(safePage - 1)
+            setTouchStart(null)
+          }}
+        >
+          <motion.div
+            key={safePage}
+            initial={reduceMotion ? false : { opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.3, ease: 'easeOut' }}
+            className='grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:gap-6'
+          >
+            {visible.map((product) => {
+              const compareAt = compareAtText(product)
+              return (
+                <Card
+                  key={product.id}
+                  className={`flex h-full flex-col gap-4 overflow-hidden rounded-lg py-4 shadow-none transition-shadow duration-300 hover:shadow-md ${
+                    onProductClick ? 'cursor-pointer' : ''
+                  }`}
+                  onClick={onProductClick ? () => onProductClick(product) : undefined}
+                >
+                  <CardContent className='flex flex-1 flex-col gap-4 px-4'>
+                    <div className='relative aspect-square overflow-hidden rounded-md'>
+                      {product.badge && (
+                        <span className='bg-destructive text-destructive-foreground absolute top-2 left-2 z-10 rounded-full px-2 py-0.5 text-xs font-semibold'>
+                          {product.badge}
+                        </span>
+                      )}
+                      <img
+                        src={product.image || undefined}
+                        alt={product.imageAlt ?? product.title}
+                        className='size-full rounded-md object-contain'
+                        loading='lazy'
+                        width={400}
+                        height={400}
+                      />
+                    </div>
+
+                    <div className='flex flex-1 flex-col'>
+                      <h3 className='mb-1 font-medium text-balance'>
+                        {onProductClick ? (
+                          <button
+                            type='button'
+                            onClick={(event) => {
+                              event.stopPropagation()
+                              onProductClick(product)
+                            }}
+                            className='hover:text-primary cursor-pointer text-left transition-colors'
+                          >
+                            {product.title}
+                          </button>
+                        ) : (
+                          product.title
+                        )}
+                      </h3>
+                      {typeof product.rating === 'number' && Number.isFinite(product.rating) && (
+                        <div className='text-muted-foreground mb-1 flex items-center gap-1 text-xs'>
+                          <Star className='size-3.5 fill-current' aria-hidden='true' />
+                          <span>{product.rating.toFixed(1)}</span>
+                        </div>
+                      )}
+                      <div className='mt-auto flex items-baseline gap-2'>
+                        <p className='font-semibold'>
+                          {formatMoney(product.price) ?? unavailablePriceLabel}
+                        </p>
+                        {compareAt && (
+                          <p className='text-muted-foreground text-sm line-through'>{compareAt}</p>
+                        )}
+                      </div>
+                    </div>
+                  </CardContent>
+
+                  <CardFooter className='bg-transparent border-t-0 px-3 pt-0 md:px-4'>
+                    <Button
+                      variant='outline'
+                      size='sm'
+                      className='h-8 w-full cursor-pointer px-3 text-sm'
+                      onClick={(event) => {
+                        event.stopPropagation()
+                        onAddToCart?.(product)
+                      }}
+                    >
+                      {addToCartLabel}
+                    </Button>
+                  </CardFooter>
+                </Card>
+              )
+            })}
+          </motion.div>
+        </div>
+
+        {pageCount > 1 && (
+          <div className='mt-6 flex items-center justify-center gap-3'>
+            <Button
+              type='button'
+              variant='outline'
+              size='icon-sm'
+              className='cursor-pointer'
+              aria-label={prevLabel}
+              disabled={safePage === 0}
+              onClick={() => goTo(safePage - 1)}
+            >
+              <ChevronLeft className='size-4' aria-hidden='true' />
+            </Button>
+
+            <div className='flex items-center gap-2'>
+              {pages.map((_, index) => (
+                <button
+                  key={index}
+                  type='button'
+                  aria-label={`${pageLabel} ${index + 1}`}
+                  aria-current={index === safePage ? 'true' : undefined}
+                  className={`size-2 rounded-full transition-colors ${
+                    index === safePage ? 'bg-primary' : 'bg-muted-foreground/40'
+                  }`}
+                  onClick={() => goTo(index)}
+                />
+              ))}
+            </div>
+
+            <Button
+              type='button'
+              variant='outline'
+              size='icon-sm'
+              className='cursor-pointer'
+              aria-label={nextLabel}
+              disabled={safePage === pageCount - 1}
+              onClick={() => goTo(safePage + 1)}
+            >
+              <ChevronRight className='size-4' aria-hidden='true' />
+            </Button>
+          </div>
+        )}
+
+        <p aria-live='polite' className='sr-only'>
+          {pageLabel} {safePage + 1} / {pageCount}
+        </p>
+      </div>
+    </section>
+  )
+}
+
+export default ProductShowcase1