@thorprovider/blocks 0.1.3 → 2.0.0

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

@@ -0,0 +1,447 @@
+'use client'
+
+import { GalleryHorizontalEnd, Heart, ShoppingCart, Star } from 'lucide-react'
+import { motion, useReducedMotion } from 'motion/react'
+
+import { Badge } from '../../../ui/badge'
+import { Button } from '../../../ui/button'
+import { Card, CardContent, CardFooter } from '../../../ui/card'
+import { cn } from '../../../lib/utils'
+import { formatMoney, isAvailableMoney } from '../../../lib/money'
+import type { ProductCardSpecProps, ProductPresentation } from '../../../lib/contracts'
+
+/**
+ * The bounded presentation surface. `classic` is the boxed card with an
+ * add-to-cart footer, `minimal` is a lean image-forward tile, and `rich` adds
+ * overlay actions (wishlist heart, view similar). The value changes structure,
+ * never the data contract or the callbacks.
+ */
+export type ProductCardPresentation = NonNullable<ProductCardSpecProps['presentation']>
+
+export interface ProductCardProps {
+  /** The single canonical product presentation item (canonical `Money`). */
+  item: ProductPresentation
+  /** Bounded presentation option; defaults to `classic`. */
+  presentation?: ProductCardPresentation
+  /** Host-resolved wishlist membership; reflects the rich presentation heart. */
+  wishlisted?: boolean
+  onAddToCart?: (item: ProductPresentation) => void
+  /**
+   * Hides the add-to-cart control for listings whose only action is opening the
+   * product. Without this a host with no cart callback would render an inert
+   * button.
+   */
+  hideAddToCart?: boolean
+  onProductClick?: (item: ProductPresentation) => void
+  /**
+   * Host-owned wishlist toggle; reports the item and the next state from the
+   * click handler (never from an effect).
+   */
+  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
+}
+
+/** What the presentations receive: every label already resolved by `ProductCard`. */
+type PresentationProps = ProductCardProps & {
+  addToCartLabel: string
+  unavailablePriceLabel: string
+  addToWishlistLabel: string
+  removeFromWishlistLabel: string
+  viewSimilarLabel: string
+}
+
+/** Comparison price only when both values are valid and the compare is higher. */
+function compareAtText(item: ProductPresentation): string | undefined {
+  const compareAt = item.compareAtPrice
+  if (!compareAt) return undefined
+  const formatted = formatMoney(compareAt)
+  const price = formatMoney(item.price)
+  if (!formatted || !price) return undefined
+  if (Number(compareAt.amount) <= Number(item.price.amount)) return undefined
+  return formatted
+}
+
+function ratingValue(item: ProductPresentation): number | undefined {
+  return typeof item.rating === 'number' && Number.isFinite(item.rating) ? item.rating : undefined
+}
+
+function PriceRow({
+  item,
+  unavailablePriceLabel,
+}: {
+  item: ProductPresentation
+  unavailablePriceLabel: string
+}) {
+  const available = isAvailableMoney(item.price)
+  const compareAt = compareAtText(item)
+  return (
+    <div className='mt-auto flex items-baseline gap-2'>
+      <p className='font-semibold'>
+        {available ? formatMoney(item.price) : unavailablePriceLabel}
+      </p>
+      {compareAt && (
+        <p className='text-muted-foreground text-sm line-through md:text-base xl:text-sm 2xl:text-base'>
+          {compareAt}
+        </p>
+      )}
+    </div>
+  )
+}
+
+function RatingRow({ value }: { value: number }) {
+  return (
+    <div className='text-muted-foreground flex items-center gap-1 text-xs'>
+      <Star className='size-3.5 fill-current' aria-hidden='true' />
+      <span>{value.toFixed(1)}</span>
+    </div>
+  )
+}
+
+function ClassicPresentation({
+  item,
+  hideAddToCart = false,
+  onAddToCart,
+  onProductClick,
+  addToCartLabel,
+  unavailablePriceLabel,
+}: PresentationProps) {
+  const reduceMotion = useReducedMotion()
+  const available = isAvailableMoney(item.price)
+  const rating = ratingValue(item)
+
+  return (
+    <motion.div
+      initial={reduceMotion ? false : { opacity: 0, y: 16 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: '-40px' }}
+      whileHover={reduceMotion ? undefined : { y: -4 }}
+      transition={{ duration: 0.35, ease: 'easeOut' }}
+    >
+      <Card
+        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(item) : undefined}
+      >
+        <CardContent className='flex flex-1 flex-col gap-4 px-4 '>
+          <div className='relative aspect-square overflow-hidden rounded-md'>
+            {item.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'>
+                {item.badge}
+              </span>
+            )}
+            {item.image ? (
+              <img
+                src={item.image}
+                alt={item.imageAlt ?? item.title}
+                className='size-full rounded-md object-contain'
+                loading='lazy'
+                width={400}
+                height={400}
+              />
+            ) : (
+              <div data-slot='product-image-placeholder' aria-hidden='true' className='bg-muted size-full rounded-md' />
+            )}
+          </div>
+
+          <div className='flex flex-1 flex-col'>
+            <h3 className='mb-1 font-medium text-balance'>
+              {onProductClick ? (
+                <button
+                  type='button'
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onProductClick(item)
+                  }}
+                  className='hover:text-primary cursor-pointer text-left transition-colors'
+                >
+                  {item.title}
+                </button>
+              ) : (
+                item.title
+              )}
+            </h3>
+            {rating !== undefined && <RatingRow value={rating} />}
+            <PriceRow item={item} unavailablePriceLabel={unavailablePriceLabel} />
+          </div>
+        </CardContent>
+
+        <CardFooter className='bg-transparent px-3 pt-0 border-t-0 md:px-4'>
+          {hideAddToCart ? null : (
+            <Button
+              variant='outline'
+              size='sm'
+              className='h-8 w-full cursor-pointer px-3 text-sm text-xs'
+              disabled={!available}
+              onClick={(e) => {
+                e.stopPropagation()
+                onAddToCart?.(item)
+              }}
+            >
+              {addToCartLabel}
+            </Button>
+          )}
+        </CardFooter>
+      </Card>
+    </motion.div>
+  )
+}
+
+function MinimalPresentation({
+  item,
+  hideAddToCart = false,
+  onAddToCart,
+  onProductClick,
+  addToCartLabel,
+  unavailablePriceLabel,
+}: PresentationProps) {
+  const available = isAvailableMoney(item.price)
+  const rating = ratingValue(item)
+
+  return (
+    <Card
+      className={cn(
+        'group overflow-hidden py-4 shadow-none transition-all hover:shadow-lg',
+        onProductClick && 'cursor-pointer',
+      )}
+      onClick={onProductClick ? () => onProductClick(item) : undefined}
+    >
+      <CardContent className='flex flex-col gap-4 px-4'>
+        <div className='relative aspect-square overflow-hidden rounded-md'>
+          {item.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'>
+              {item.badge}
+            </span>
+          )}
+          {item.image ? (
+            <img
+              src={item.image}
+              alt={item.imageAlt ?? item.title}
+              width={400}
+              height={400}
+              className='size-full object-cover transition-transform duration-300 group-hover:scale-105'
+              loading='lazy'
+            />
+          ) : (
+            <div data-slot='product-image-placeholder' aria-hidden='true' className='bg-muted size-full' />
+          )}
+        </div>
+
+        <div className='flex flex-col gap-2'>
+          <h3 className='line-clamp-1 text-lg font-semibold text-balance'>{item.title}</h3>
+          {rating !== undefined && <RatingRow value={rating} />}
+          <div className='flex items-center justify-between gap-2'>
+            <PriceRow item={item} unavailablePriceLabel={unavailablePriceLabel} />
+            {hideAddToCart ? null : (
+              <Button
+                variant='ghost'
+                size='icon'
+                className='size-8 shrink-0 cursor-pointer'
+                aria-label={addToCartLabel}
+                disabled={!available}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onAddToCart?.(item)
+                }}
+              >
+                <ShoppingCart className='size-4' aria-hidden='true' />
+              </Button>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+function WishlistHeart({
+  item,
+  wishlisted,
+  onToggleWishlist,
+  addToWishlistLabel,
+  removeFromWishlistLabel,
+}: {
+  item: ProductPresentation
+  wishlisted: boolean
+  onToggleWishlist?: (item: ProductPresentation, nextState: boolean) => void
+  addToWishlistLabel: string
+  removeFromWishlistLabel: string
+}) {
+  return (
+    <Button
+      variant='ghost'
+      size='icon'
+      className='bg-background/80 absolute end-2 top-2 z-20 size-8 cursor-pointer rounded-full p-0 backdrop-blur-xs disabled:cursor-not-allowed'
+      aria-label={wishlisted ? removeFromWishlistLabel : addToWishlistLabel}
+      aria-pressed={wishlisted}
+      disabled={!onToggleWishlist}
+      onClick={(e) => {
+        e.stopPropagation()
+        onToggleWishlist?.(item, !wishlisted)
+      }}
+    >
+      <Heart
+        className={cn(
+          'size-4 transition-colors',
+          wishlisted ? 'fill-destructive text-destructive' : 'fill-transparent text-muted-foreground',
+        )}
+        aria-hidden='true'
+      />
+    </Button>
+  )
+}
+
+function RichPresentation({
+  item,
+  hideAddToCart = false,
+  wishlisted = false,
+  onAddToCart,
+  onProductClick,
+  onToggleWishlist,
+  onViewSimilar,
+  addToCartLabel,
+  unavailablePriceLabel,
+  addToWishlistLabel,
+  removeFromWishlistLabel,
+  viewSimilarLabel,
+}: PresentationProps) {
+  const available = isAvailableMoney(item.price)
+  const rating = ratingValue(item)
+
+  return (
+    <Card
+      className={cn(
+        'relative overflow-hidden rounded-md py-0 shadow-none transition-all hover:shadow-md',
+        onProductClick && 'cursor-pointer',
+      )}
+      onClick={onProductClick ? () => onProductClick(item) : undefined}
+    >
+      <CardContent className='px-0'>
+        <div className='relative aspect-square w-full overflow-hidden'>
+          {item.image ? (
+            <img
+              src={item.image}
+              alt={item.imageAlt ?? item.title}
+              className='size-full object-cover'
+              loading='lazy'
+            />
+          ) : (
+            <div data-slot='product-image-placeholder' aria-hidden='true' className='bg-muted size-full' />
+          )}
+
+          {item.badge && (
+            <Badge className='absolute start-2 top-2 z-20 flex items-center gap-1 px-2 py-1 font-semibold text-white backdrop-blur-xs'>
+              {item.badge}
+            </Badge>
+          )}
+
+          {rating !== undefined && (
+            <div className='bg-background/80 absolute start-2 bottom-2 z-10 flex items-center gap-1 rounded-md border px-2 py-1 text-sm backdrop-blur-xs'>
+              <Star className='fill-foreground text-foreground size-4' aria-hidden='true' />
+              <span>{rating.toFixed(1)}</span>
+            </div>
+          )}
+
+          {onViewSimilar && (
+            <div className='group absolute end-2 bottom-2 z-10'>
+              <Button
+                variant='ghost'
+                size='sm'
+                className='group bg-background/80 hover:bg-background h-8 cursor-pointer overflow-hidden rounded-full p-0 px-3 text-xs shadow-xs backdrop-blur-xs transition-all duration-200'
+                aria-label={viewSimilarLabel}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onViewSimilar(item)
+                }}
+              >
+                <GalleryHorizontalEnd className='absolute start-2 size-4 shrink-0' aria-hidden='true' />
+                <span className='ms-6 whitespace-nowrap text-xs opacity-0 group-hover:opacity-100'>
+                  {viewSimilarLabel}
+                </span>
+              </Button>
+            </div>
+          )}
+
+          <WishlistHeart
+            item={item}
+            wishlisted={wishlisted}
+            onToggleWishlist={onToggleWishlist}
+            addToWishlistLabel={addToWishlistLabel}
+            removeFromWishlistLabel={removeFromWishlistLabel}
+          />
+        </div>
+
+        <div className='flex flex-col gap-2 p-4'>
+          <h3 className='font-medium text-balance'>{item.title}</h3>
+          <PriceRow item={item} unavailablePriceLabel={unavailablePriceLabel} />
+          {hideAddToCart ? null : (
+            <Button
+              variant='outline'
+              size='sm'
+              className='mt-2 w-full cursor-pointer text-xs'
+              disabled={!available}
+              onClick={(e) => {
+                e.stopPropagation()
+                onAddToCart?.(item)
+              }}
+            >
+              {addToCartLabel}
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+/**
+ * Canonical product card — the item cell of a product listing. Renders only
+ * the canonical `ProductPresentation` contract (canonical `Money`) with
+ * host-supplied evidence (rating, badge, compare-at); it owns no listing state
+ * and reports every action through its callbacks. Prices render through the
+ * canonical `formatMoney` path, so a missing price is an unavailable state,
+ * never a zero amount.
+ */
+export function ProductCard({
+  item,
+  presentation = 'classic',
+  wishlisted,
+  hideAddToCart,
+  onAddToCart,
+  onProductClick,
+  onToggleWishlist,
+  onViewSimilar,
+  addToCartLabel = 'Agregar al carrito',
+  unavailablePriceLabel = 'Precio no disponible',
+  addToWishlistLabel = 'Añadir a favoritos',
+  removeFromWishlistLabel = 'Quitar de favoritos',
+  viewSimilarLabel = 'Ver similares',
+}: ProductCardProps) {
+  const shared: PresentationProps = {
+    item,
+    presentation,
+    wishlisted,
+    hideAddToCart,
+    onAddToCart,
+    onProductClick,
+    onToggleWishlist,
+    onViewSimilar,
+    addToCartLabel,
+    unavailablePriceLabel,
+    addToWishlistLabel,
+    removeFromWishlistLabel,
+    viewSimilarLabel,
+  }
+
+  if (presentation === 'minimal') return <MinimalPresentation {...shared} />
+  if (presentation === 'rich') return <RichPresentation {...shared} />
+  return <ClassicPresentation {...shared} />
+}
+
+export default ProductCard

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' }))
+  })
+})