@thorprovider/blocks 2.0.0 → 3.0.0

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

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

@@ -1,162 +0,0 @@
-// @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' }))
-  })
-})