@thorprovider/blocks 2.0.0 → 3.0.0

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

@@ -1,114 +0,0 @@
-'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

@@ -1,78 +0,0 @@
-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

@@ -1,277 +0,0 @@
-'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

package/src/blocks/e-commerce/product-overview/product-overview-gallery.tsx

@@ -1,71 +0,0 @@
-import { Camera } from 'lucide-react'
-import { Badge } from '../../../ui/badge'
-import { cn } from '../../../lib/utils'
-
-export interface ProductOverviewGalleryProps {
-  /** Resolved image URLs for the product (never empty strings; a fallback is allowed). */
-  images: string[]
-  /** Product title, used for alt text. */
-  title: string
-  /** Optional badge label; omitted when absent. */
-  badgeLabel?: string
-  selectedImage: number
-  onSelectImage: (index: number) => void
-  photosLabel?: string
-}
-
-/**
- * Image-forward gallery used by the canonical ProductOverview `rich` presentation: a large
- * primary image with an optional badge and a photo count, plus a thumbnail strip. Operates on
- * already-resolved URLs so it carries no product-shape assumption (no `mainImages`/`galleryImages`
- * split, no sector fields).
- */
-export function ProductOverviewGallery({
-  images,
-  title,
-  badgeLabel,
-  selectedImage,
-  onSelectImage,
-  photosLabel = 'fotos',
-}: ProductOverviewGalleryProps) {
-  const activeImage = images[Math.min(selectedImage, images.length - 1)]
-
-  return (
-    <div>
-      <div className='bg-muted relative aspect-square overflow-hidden rounded-xl'>
-        <img src={activeImage || undefined} alt={title} className='size-full object-cover' />
-        {badgeLabel ? (
-          <Badge className='absolute top-4 left-4 px-2.5 py-0.5 font-semibold'>{badgeLabel}</Badge>
-        ) : null}
-        <div className='absolute right-4 bottom-4 rounded-full bg-black/60 px-3 py-1.5 text-sm text-white backdrop-blur-sm'>
-          <Camera className='mr-1 inline size-4' />
-          {images.length} {photosLabel}
-        </div>
-      </div>
-
-      {images.length > 1 ? (
-        <div className='mt-4 flex gap-3 overflow-x-auto pb-2'>
-          {images.map((image, index) => (
-            <button
-              type='button'
-              key={`${title}:gallery:${index}`}
-              onClick={() => onSelectImage(index)}
-              className={cn(
-                'relative aspect-square size-20 flex-shrink-0 cursor-pointer overflow-hidden rounded-lg border-2 transition-all',
-                selectedImage === index
-                  ? 'border-primary ring-primary/20 shadow-md ring-2'
-                  : 'border-muted hover:border-muted-foreground/50',
-              )}
-              aria-label={`Mostrar imagen ${index + 1} de ${title}`}
-              aria-pressed={selectedImage === index}
-            >
-              <img src={image || undefined} alt={`${title} ${index + 1}`} className='size-full object-cover' />
-            </button>
-          ))}
-        </div>
-      ) : null}
-    </div>
-  )
-}
-
-export default ProductOverviewGallery

package/src/blocks/e-commerce/product-overview/product-overview-lightbox-tab.tsx

@@ -1,116 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { ChevronLeft, ChevronRight, X } from 'lucide-react'
-import { Button } from '../../../ui/button'
-import { Card, CardContent } from '../../../ui/card'
-import { Dialog, DialogClose, DialogContent, DialogTitle, DialogTrigger } from '../../../ui/dialog'
-import { cn } from '../../../lib/utils'
-
-export interface ProductOverviewLightboxTabProps {
-  /** Resolved image URLs for the product. */
-  images: string[]
-  /** Product title, used for alt text. */
-  title: string
-  galleryLabel?: string
-  ofCounterLabel?: string
-}
-
-/**
- * Gallery panel for the `rich` presentation: a thumbnail grid that opens a lightbox with
- * prev/next navigation. Operates on already-resolved URLs so it carries no sector assumption.
- */
-export function ProductOverviewLightboxTab({
-  images,
-  title,
-  galleryLabel = 'Galería',
-  ofCounterLabel = '{current} de {total}',
-}: ProductOverviewLightboxTabProps) {
-  const [modalImageIndex, setModalImageIndex] = useState(0)
-
-  const nextImage = () => setModalImageIndex(prev => (prev + 1) % images.length)
-  const prevImage = () => setModalImageIndex(prev => (prev - 1 + images.length) % images.length)
-
-  return (
-    <Card className='border shadow-none'>
-      <CardContent className='p-8 py-0'>
-        <h3 className='mb-6 text-xl font-semibold text-balance'>{galleryLabel}</h3>
-        <div className='grid gap-4 sm:grid-cols-2 lg:grid-cols-3'>
-          {images.map((image, index) => (
-            <Dialog key={`${title}:lightbox:${index}`}>
-              <DialogTrigger asChild>
-                <button
-                  type='button'
-                  className='block aspect-square cursor-pointer overflow-hidden rounded-xl'
-                  onClick={() => setModalImageIndex(index)}
-                  aria-label={`Abrir imagen ${index + 1} de ${title}`}
-                >
-                  <img src={image || undefined} alt={`${title} ${index + 1}`} className='size-full object-cover' />
-                </button>
-              </DialogTrigger>
-              <DialogContent className='max-w-4xl border-0 bg-transparent p-0' showCloseButton={false}>
-                <DialogTitle className='sr-only'>Imagen de galería {modalImageIndex + 1}</DialogTitle>
-                <div className='relative'>
-                  <img
-                    src={images[modalImageIndex] || undefined}
-                    alt={`${title} ${modalImageIndex + 1}`}
-                    className='max-h-[80vh] w-full object-contain'
-                  />
-                  <DialogClose className='absolute top-4 right-4 rounded-full bg-black/20 p-2 text-white transition-colors hover:bg-black/30'>
-                    <X className='size-4' />
-                  </DialogClose>
-
-                  {images.length > 1 ? (
-                    <>
-                      <Button
-                        variant='ghost'
-                        size='icon'
-                        className='absolute top-1/2 left-4 size-9 -translate-y-1/2 cursor-pointer rounded-full bg-black/20 text-white hover:bg-black/30'
-                        onClick={prevImage}
-                        aria-label='Imagen anterior'
-                      >
-                        <ChevronLeft className='size-4' />
-                      </Button>
-                      <Button
-                        variant='ghost'
-                        size='icon'
-                        className='absolute top-1/2 right-4 size-9 -translate-y-1/2 cursor-pointer rounded-full bg-black/20 text-white hover:bg-black/30'
-                        onClick={nextImage}
-                        aria-label='Imagen siguiente'
-                      >
-                        <ChevronRight className='size-4' />
-                      </Button>
-                    </>
-                  ) : null}
-
-                  <div className='absolute bottom-4 left-1/2 flex -translate-x-1/2 gap-2'>
-                    {images.map((_, idx) => (
-                      <button
-                        type='button'
-                        key={`${title}:dot:${idx}`}
-                        aria-label={`Mostrar imagen ${idx + 1}`}
-                        className={cn(
-                          'size-2 rounded-full transition-colors',
-                          idx === modalImageIndex ? 'bg-white' : 'bg-white/50',
-                        )}
-                        onClick={() => setModalImageIndex(idx)}
-                      />
-                    ))}
-                  </div>
-
-                  <div className='absolute right-4 bottom-4 rounded-full bg-black/20 px-3 py-1 text-sm text-white'>
-                    {ofCounterLabel
-                      .replace('{current}', String(modalImageIndex + 1))
-                      .replace('{total}', String(images.length))}
-                  </div>
-                </div>
-              </DialogContent>
-            </Dialog>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default ProductOverviewLightboxTab