@thorprovider/blocks 0.1.3 → 2.0.0

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

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

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

@@ -1,370 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { Heart, Minus, Plus, Star } from 'lucide-react'
-import type { Image, Money, ProductOption, SelectedOption } from '@thorprovider/types'
-import { Button } from '../../../ui/button'
-import { cn } from '../../../lib/utils'
-import { PRODUCT_IMAGE_FALLBACK } from '../../../lib/contracts'
-import { formatMoney, isAvailableMoney } from '../../../lib/money'
-import { ReactionToggle } from '../../shared/reaction-toggle'
-
-/**
- * Canonical product-detail projection.
- *
- * The block consumes the canonical `@thorprovider/types` shapes (`Money`,
- * `ProductOption`, `SelectedOption`, `Image`) so adapter output maps without a
- * second, drifting product type. The only deviation is `price`: the canon marks
- * it required, but a missing/unresolved backend price is a real, distinct state
- * that must disable purchase — so the projection allows `price` to be absent
- * and the block treats absence as "unavailable", never as zero.
- */
-export interface ProductDetailVariant {
-  id: string
-  title: string
-  sku?: string
-  availableForSale: boolean
-  selectedOptions: SelectedOption[]
-  /** Canonical Money; omit/null when the backend has no resolved price. */
-  price?: Money | null
-  compareAtPrice?: Money
-  image?: Image
-}
-
-export interface ProductDetailProduct {
-  id: string
-  handle?: string
-  title: string
-  description?: string
-  vendor?: string
-  options: ProductOption[]
-  variants: ProductDetailVariant[]
-  images: Image[]
-  featuredImage?: Image
-}
-
-export interface ProductOverview1Rating {
-  value: number
-  count: number
-}
-
-export interface ProductOverview1Props {
-  product: ProductDetailProduct
-  /** Controlled selection: the backend variant id, or null/undefined when nothing is explicitly selected. */
-  selectedVariantId?: string | null
-  onSelectVariant?: (variantId: string) => void
-  /** Controlled quantity for the add-to-cart action; defaults to 1 when omitted. */
-  quantity?: number
-  onQuantityChange?: (quantity: number) => void
-  /** Add-to-cart identity is the selected backend variant id, with the requested quantity. */
-  onAddToCart?: (variantId: string, quantity: number) => void
-  isWishlisted?: boolean
-  onToggleWishlist?: (variantId: string, isWishlisted: boolean) => void
-  /** Rendered only when the backend supplies it. */
-  rating?: ProductOverview1Rating
-  /** Rendered only when the backend supplies it. */
-  deliveryEstimate?: string
-  /** Rendered only when the backend supplies it. */
-  shipping?: Money
-  formatPrice?: (money: Money) => string
-  sizesLabel?: string
-  variantLabel?: string
-  reviewsLabel?: string
-  addToCartLabel?: string
-  outOfStockLabel?: string
-  unavailablePriceLabel?: string
-  selectVariantLabel?: string
-  quantityLabel?: string
-  deliveryEstimateLabel?: string
-  shippingLabel?: string
-  removeFromWishlistLabel?: string
-  addToWishlistLabel?: string
-  imageFallback?: string
-}
-
-function variantLabelOf(variant: ProductDetailVariant): string {
-  if (variant.title.trim() !== '') return variant.title
-  return variant.selectedOptions.map(option => option.value).join(' / ')
-}
-
-/**
- * The add-to-cart payload contract: the explicitly selected backend variant id
- * and a positive quantity (defaults to 1). Returns `null` when no variant has
- * been selected — the block never substitutes the first variant.
- */
-export function resolveAddToCartPayload(
-  variant: ProductDetailVariant | null,
-  quantity: number | undefined,
-): { variantId: string; quantity: number } | null {
-  if (!variant) return null
-  return {
-    variantId: variant.id,
-    quantity: typeof quantity === 'number' && quantity > 0 ? quantity : 1,
-  }
-}
-
-function galleryImages(product: ProductDetailProduct, fallback: string): string[] {
-  const images = product.images
-    .map(image => image.url)
-    .filter((url): url is string => typeof url === 'string' && url.trim() !== '')
-  if (images.length > 0) return images
-  const featured = product.featuredImage?.url
-  if (typeof featured === 'string' && featured.trim() !== '') return [featured]
-  return [fallback]
-}
-
-export default function ProductOverview1({
-  product,
-  selectedVariantId,
-  onSelectVariant,
-  quantity,
-  onQuantityChange,
-  onAddToCart,
-  isWishlisted = false,
-  onToggleWishlist,
-  rating,
-  deliveryEstimate,
-  shipping,
-  formatPrice,
-  sizesLabel = 'Variantes',
-  variantLabel = 'Variante',
-  reviewsLabel = 'Reseñas',
-  addToCartLabel = 'Agregar al carrito',
-  outOfStockLabel = 'Agotado',
-  unavailablePriceLabel = 'Precio no disponible',
-  selectVariantLabel = 'Selecciona una variante',
-  quantityLabel = 'Cantidad',
-  deliveryEstimateLabel = 'Entrega estimada',
-  shippingLabel = 'Envío',
-  removeFromWishlistLabel = 'Quitar de favoritos',
-  addToWishlistLabel = 'Agregar a favoritos',
-  imageFallback = PRODUCT_IMAGE_FALLBACK,
-}: ProductOverview1Props) {
-  const [selectedImage, setSelectedImage] = useState(0)
-
-  const selectedVariant =
-    selectedVariantId != null
-      ? product.variants.find(variant => variant.id === selectedVariantId) ?? null
-      : null
-
-  const selectedPrice = selectedVariant?.price
-  const selectedCompareAt = selectedVariant?.compareAtPrice
-  const priceAvailable = isAvailableMoney(selectedPrice)
-  const compareAtAvailable = isAvailableMoney(selectedCompareAt)
-  const canPurchase = Boolean(selectedVariant?.availableForSale) && priceAvailable
-  const quantityValue = quantity ?? 1
-  const addPayload = resolveAddToCartPayload(selectedVariant, quantityValue)
-
-  const images = galleryImages(product, imageFallback)
-  const hasRealImages = images[0] !== imageFallback || product.featuredImage != null
-  const activeImage = images[Math.min(selectedImage, images.length - 1)]
-
-  const toggleWishlist = () => {
-    if (!selectedVariant || !onToggleWishlist) return
-    onToggleWishlist(selectedVariant.id, !isWishlisted)
-  }
-
-  return (
-    <div>
-      <section className='@container mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
-        <div className='grid grid-cols-1 gap-6 py-4 lg:grid-cols-2 lg:gap-8 lg:py-6 xl:grid-cols-3 xl:gap-12 xl:py-12'>
-          <div className='flex flex-col justify-between gap-6 lg:gap-8'>
-            <div className='flex flex-col gap-2 lg:gap-4'>
-              {product.vendor ? (
-                <span className='text-sm font-semibold tracking-wide uppercase'>{product.vendor}</span>
-              ) : null}
-              <h2 className='text-xl font-bold tracking-tight text-balance lg:text-3xl'>{product.title}</h2>
-              {product.description ? (
-                <p className='text-muted-foreground text-balance'>{product.description}</p>
-              ) : null}
-
-              {selectedVariant ? (
-                priceAvailable ? (
-                  <p className='text-2xl font-bold tracking-tight'>
-                    {formatMoney(selectedPrice, formatPrice)}
-                    {compareAtAvailable ? (
-                      <span className='text-muted-foreground ms-2 text-base font-normal line-through'>
-                        {formatMoney(selectedCompareAt, formatPrice)}
-                      </span>
-                    ) : null}
-                  </p>
-                ) : (
-                  <p className='text-muted-foreground text-sm'>{unavailablePriceLabel}</p>
-                )
-              ) : (
-                <p className='text-muted-foreground text-sm'>{selectVariantLabel}</p>
-              )}
-            </div>
-
-            {hasRealImages ? (
-              <div className='flex flex-wrap gap-4'>
-                {images.map((url, index) => (
-                  <button
-                    key={`${product.id}:image:${index}`}
-                    type='button'
-                    onClick={() => setSelectedImage(index)}
-                    aria-label={`${product.title} ${index + 1}`}
-                    aria-pressed={selectedImage === index}
-                    className={cn(
-                      'ring-offset-background size-16 cursor-pointer overflow-hidden rounded-sm ring-offset-2 transition-all lg:size-18',
-                      selectedImage === index && 'ring-foreground ring-2',
-                    )}
-                  >
-                    <img src={url || undefined} alt='' className='size-full object-cover' />
-                  </button>
-                ))}
-              </div>
-            ) : null}
-          </div>
-
-          <div className='row-span-2 row-start-1 lg:col-start-2'>
-            <div className='bg-muted aspect-square w-full overflow-hidden rounded-lg'>
-              <img
-                src={activeImage || undefined}
-                alt={product.title}
-                className='h-90 w-full object-cover'
-              />
-            </div>
-          </div>
-
-          <div className='flex flex-col gap-6 lg:gap-10'>
-            {product.variants.length > 0 ? (
-              <div className='flex flex-col gap-2'>
-                <h3 className='font-bold'>{sizesLabel}</h3>
-                <div className='flex flex-wrap gap-3'>
-                  {product.variants.map(variant => {
-                    const isSelected = variant.id === selectedVariantId
-                    return (
-                      <Button
-                        key={variant.id}
-                        variant={isSelected ? 'default' : 'outline'}
-                        onClick={onSelectVariant ? () => onSelectVariant(variant.id) : undefined}
-                        disabled={!variant.availableForSale}
-                        aria-pressed={isSelected}
-                        className='h-9 cursor-pointer rounded-full px-4'
-                      >
-                        {variantLabelOf(variant)}
-                        {!variant.availableForSale ? (
-                          <span className='text-muted-foreground ms-2 text-xs font-normal'>
-                            {outOfStockLabel}
-                          </span>
-                        ) : null}
-                      </Button>
-                    )
-                  })}
-                </div>
-                {selectedVariant && selectedVariant.selectedOptions.length > 0 ? (
-                  <p className='text-muted-foreground text-sm'>
-                    {selectedVariant.selectedOptions
-                      .map((option: SelectedOption) => `${option.name}: ${option.value}`)
-                      .join(' · ')}
-                  </p>
-                ) : null}
-              </div>
-            ) : null}
-
-            {rating ? (
-              <div className='flex flex-col gap-2'>
-                <h3 className='font-bold'>{reviewsLabel}</h3>
-                <div className='flex items-center gap-2'>
-                  <div className='flex gap-1' aria-hidden='true'>
-                    {[0, 1, 2, 3, 4].map(index => (
-                      <Star
-                        key={index}
-                        className='text-foreground size-5'
-                        fill={index < rating.value ? 'currentColor' : 'none'}
-                      />
-                    ))}
-                  </div>
-                  <span className='text-muted-foreground text-sm tabular-nums'>
-                    {`${rating.value} (${rating.count})`}
-                  </span>
-                </div>
-              </div>
-            ) : null}
-
-            {onQuantityChange ? (
-              <div className='flex flex-col gap-2'>
-                <h3 className='font-bold'>{quantityLabel}</h3>
-                <div className='border-border flex w-fit items-center rounded-md border'>
-                  <Button
-                    type='button'
-                    variant='ghost'
-                    size='icon'
-                    className='size-9 rounded-r-none'
-                    aria-label={`${quantityLabel} -1`}
-                    onClick={() => onQuantityChange(Math.max(1, quantityValue - 1))}
-                    disabled={quantityValue <= 1}
-                  >
-                    <Minus />
-                  </Button>
-                  <span className='w-10 text-center text-sm tabular-nums'>{quantityValue}</span>
-                  <Button
-                    type='button'
-                    variant='ghost'
-                    size='icon'
-                    className='size-9 rounded-l-none'
-                    aria-label={`${quantityLabel} +1`}
-                    onClick={() => onQuantityChange(quantityValue + 1)}
-                  >
-                    <Plus />
-                  </Button>
-                </div>
-              </div>
-            ) : null}
-
-            {deliveryEstimate || shipping ? (
-              <dl className='text-muted-foreground flex flex-col gap-1 text-sm'>
-                {deliveryEstimate ? (
-                  <div className='flex gap-2'>
-                    <dt>{deliveryEstimateLabel}</dt>
-                    <dd className='text-foreground'>{deliveryEstimate}</dd>
-                  </div>
-                ) : null}
-                {isAvailableMoney(shipping) ? (
-                  <div className='flex gap-2'>
-                    <dt>{shippingLabel}</dt>
-                    <dd className='text-foreground'>{formatMoney(shipping, formatPrice)}</dd>
-                  </div>
-                ) : null}
-              </dl>
-            ) : null}
-
-            <div className='flex gap-4'>
-              <Button
-                className='h-10 flex-1 cursor-pointer rounded-full px-8'
-                size='lg'
-                disabled={!canPurchase}
-                onClick={
-                  onAddToCart && addPayload
-                    ? () => onAddToCart(addPayload.variantId, addPayload.quantity)
-                    : undefined
-                }
-              >
-                {addToCartLabel}
-              </Button>
-              <Button
-                variant='outline'
-                size='icon'
-                className='size-9 cursor-pointer rounded-full'
-                disabled={!selectedVariant}
-                onClick={onToggleWishlist ? toggleWishlist : undefined}
-                aria-pressed={isWishlisted}
-                aria-label={isWishlisted ? removeFromWishlistLabel : addToWishlistLabel}
-              >
-                <ReactionToggle
-                  active={isWishlisted}
-                  icon={Heart}
-                  iconClassName='size-5'
-                  activeColorClassName='text-primary'
-                />
-              </Button>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}
-
-export { variantLabelOf, galleryImages }