@thorprovider/blocks 0.1.1 → 0.1.3

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

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

@@ -0,0 +1,182 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import ProductOverview1, {
+  galleryImages,
+  resolveAddToCartPayload,
+  variantLabelOf,
+  type ProductDetailProduct,
+} from './product-overview-1'
+
+const product: ProductDetailProduct = {
+  id: 'p1',
+  handle: 'taladro',
+  title: 'Taladro inalámbrico',
+  description: 'Un taladro',
+  vendor: 'Acme',
+  options: [{ id: 'o1', name: 'Color', values: ['Rojo', 'Azul'] }],
+  variants: [
+    {
+      id: 'v-red',
+      title: 'Rojo',
+      availableForSale: true,
+      selectedOptions: [{ name: 'Color', value: 'Rojo' }],
+      price: { amount: '10.00', currencyCode: 'USD' },
+    },
+    {
+      id: 'v-blue',
+      title: 'Azul',
+      availableForSale: true,
+      selectedOptions: [{ name: 'Color', value: 'Azul' }],
+      price: { amount: '25.50', currencyCode: 'USD' },
+    },
+    {
+      id: 'v-sold',
+      title: 'Verde',
+      availableForSale: false,
+      selectedOptions: [{ name: 'Color', value: 'Verde' }],
+      price: { amount: '9.00', currencyCode: 'USD' },
+    },
+    {
+      id: 'v-noprice',
+      title: 'Gris',
+      availableForSale: true,
+      selectedOptions: [{ name: 'Color', value: 'Gris' }],
+      price: null,
+    },
+    {
+      id: 'v-free',
+      title: 'Blanco',
+      availableForSale: true,
+      selectedOptions: [{ name: 'Color', value: 'Blanco' }],
+      price: { amount: '0', currencyCode: 'USD' },
+    },
+  ],
+  images: [],
+}
+
+const formatPrice = (money: { amount: string; currencyCode: string }) =>
+  `${money.currencyCode} ${money.amount}`
+
+describe('ProductOverview1 — explicit, controlled variant selection', () => {
+  it('does not default to the first variant and prompts for an explicit selection', () => {
+    const html = renderToStaticMarkup(
+      <ProductOverview1 product={product} formatPrice={formatPrice} onAddToCart={() => {}} />,
+    )
+    expect(html).toContain('Selecciona una variante')
+    expect(html).not.toContain('USD 10.00')
+  })
+
+  it('shows the selected non-default variant at its current price', () => {
+    const html = renderToStaticMarkup(
+      <ProductOverview1
+        product={product}
+        selectedVariantId='v-blue'
+        formatPrice={formatPrice}
+        onAddToCart={() => {}}
+      />,
+    )
+    expect(html).toContain('USD 25.50')
+    expect(html).not.toContain('USD 10.00')
+  })
+
+  it('reports a missing price as unavailable instead of zero', () => {
+    const html = renderToStaticMarkup(
+      <ProductOverview1 product={product} selectedVariantId='v-noprice' formatPrice={formatPrice} />,
+    )
+    expect(html).toContain('Precio no disponible')
+    expect(html).not.toContain('USD 0')
+  })
+
+  it('preserves a backend-resolved valid zero', () => {
+    const html = renderToStaticMarkup(
+      <ProductOverview1 product={product} selectedVariantId='v-free' formatPrice={formatPrice} />,
+    )
+    expect(html).toContain('USD 0')
+    expect(html).not.toContain('Precio no disponible')
+  })
+
+  it('enables purchase only for an available, priced, explicitly selected variant', () => {
+    const onlyAvailable: ProductDetailProduct = {
+      ...product,
+      variants: [product.variants[0]],
+    }
+    const enabled = renderToStaticMarkup(
+      <ProductOverview1
+        product={onlyAvailable}
+        selectedVariantId='v-red'
+        formatPrice={formatPrice}
+        onAddToCart={() => {}}
+      />,
+    )
+    expect(enabled).not.toContain('disabled=""')
+
+    const noSelection = renderToStaticMarkup(
+      <ProductOverview1 product={onlyAvailable} formatPrice={formatPrice} onAddToCart={() => {}} />,
+    )
+    expect(noSelection).toContain('disabled=""')
+  })
+})
+
+describe('ProductOverview1 — truthful optional data', () => {
+  it('renders no rating, delivery estimate, or shipping when the backend supplies none', () => {
+    const html = renderToStaticMarkup(<ProductOverview1 product={product} formatPrice={formatPrice} />)
+    expect(html).not.toContain('Reseñas')
+    expect(html).not.toContain('Entrega estimada')
+    expect(html).not.toContain('Envío')
+  })
+
+  it('renders rating, delivery estimate, and shipping only when supplied', () => {
+    const html = renderToStaticMarkup(
+      <ProductOverview1
+        product={product}
+        formatPrice={formatPrice}
+        rating={{ value: 4, count: 12 }}
+        deliveryEstimate='3-5 días'
+        shipping={{ amount: '4.99', currencyCode: 'USD' }}
+      />,
+    )
+    expect(html).toContain('Reseñas')
+    expect(html).toContain('3-5 días')
+    expect(html).toContain('USD 4.99')
+  })
+
+  it('never emits an empty image src when the product has no images', () => {
+    const html = renderToStaticMarkup(<ProductOverview1 product={product} formatPrice={formatPrice} />)
+    expect(html).not.toMatch(/src=""/)
+  })
+})
+
+describe('resolveAddToCartPayload', () => {
+  const variant = product.variants[1]
+
+  it('returns null when no variant is selected (no first-variant shortcut)', () => {
+    expect(resolveAddToCartPayload(null, 2)).toBeNull()
+  })
+
+  it('uses the selected backend variant id and defaults the quantity to 1', () => {
+    expect(resolveAddToCartPayload(variant, undefined)).toEqual({ variantId: 'v-blue', quantity: 1 })
+  })
+
+  it('carries the requested quantity', () => {
+    expect(resolveAddToCartPayload(variant, 3)).toEqual({ variantId: 'v-blue', quantity: 3 })
+  })
+})
+
+describe('variant helpers', () => {
+  it('prefers the variant title', () => {
+    expect(variantLabelOf(product.variants[0])).toBe('Rojo')
+  })
+
+  it('falls back to option values when a variant has no title', () => {
+    expect(variantLabelOf({ ...product.variants[0], title: '' })).toBe('Rojo')
+  })
+
+  it('uses the product images when present and never a fabricated URL', () => {
+    const withImages: ProductDetailProduct = {
+      ...product,
+      images: [{ url: 'https://cdn.example/p1.jpg', altText: 'p1' }],
+    }
+    expect(galleryImages(withImages, 'FALLBACK')).toEqual(['https://cdn.example/p1.jpg'])
+    expect(galleryImages(product, 'FALLBACK')).toEqual(['FALLBACK'])
+  })
+})