@thorprovider/blocks 0.1.3 → 1.0.0

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 }

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

@@ -1,272 +0,0 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-import { Button } from '../../../ui/button'
-import { cn } from '../../../lib/utils'
-import { Heart, ShoppingBag, Truck, Star, Check } from 'lucide-react'
-import { Carousel, CarouselContent, CarouselItem, type CarouselApi } from '../../../ui/carousel'
-import { ReactionToggle } from '../../shared/reaction-toggle'
-
-export interface ProductOverview2ProductImage {
-  src: string
-  alt: string
-}
-
-export interface ProductOverview2ProductColor {
-  name: string
-  value: string
-}
-
-export interface ProductOverview2ProductSize {
-  eu: number
-  uk: number
-  us: number
-}
-
-export interface ProductOverview2Product {
-  id: string
-  brand: string
-  name: string
-  sku: string
-  price: number
-  currency: string
-  rating: number
-  reviews: number
-  images: ProductOverview2ProductImage[]
-  sizes: ProductOverview2ProductSize[]
-  colors: ProductOverview2ProductColor[]
-}
-
-export interface ProductOverview2Props {
-  product: ProductOverview2Product
-  sizesLabel?: string
-  colorLabel?: string
-  reviewsLabel?: string
-  addToCartLabel?: string
-  removeFromWishlistLabel?: string
-  addToWishlistLabel?: string
-  sizeGuideLabel?: string
-  freeDeliveryLabel?: string
-  onAddToCart?: (product: ProductOverview2Product) => void
-  onToggleWishlist?: (product: ProductOverview2Product, isWishlisted: boolean) => void
-}
-
-export default function ProductOverview2({
-  product,
-  sizesLabel = 'Tallas',
-  colorLabel = 'Color',
-  reviewsLabel = 'Reseñas',
-  addToCartLabel = 'Agregar al carrito',
-  removeFromWishlistLabel = 'Quitar de favoritos',
-  addToWishlistLabel = 'Agregar a favoritos',
-  sizeGuideLabel = 'Guía de tallas',
-  freeDeliveryLabel = 'Envío gratis en pedidos superiores a $30.00',
-  onAddToCart,
-  onToggleWishlist,
-}: ProductOverview2Props) {
-  const [selectedImage, setSelectedImage] = useState(0)
-  const [selectedSize, setSelectedSize] = useState<number | null>(product.sizes[1]?.eu ?? null)
-  const [selectedColor, setSelectedColor] = useState(product.colors[0])
-  const [isWishlisted, setIsWishlisted] = useState(false)
-  const [sizeType, setSizeType] = useState<'eu' | 'uk' | 'us'>('eu')
-  const [carouselApi, setCarouselApi] = useState<CarouselApi>()
-
-  useEffect(() => {
-    if (!carouselApi) return
-
-    // Set carousel to the selected image
-    carouselApi.scrollTo(selectedImage)
-
-    // Update selected image when carousel changes
-    const handleSelect = () => {
-      const currentIndex = carouselApi.selectedScrollSnap()
-      setSelectedImage(currentIndex)
-    }
-
-    carouselApi.on('select', handleSelect)
-    return () => {
-      carouselApi.off('select', handleSelect)
-    }
-  }, [carouselApi, selectedImage])
-
-  return (
-    <section className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
-      <div className='grid grid-cols-1 gap-8 py-4 md:py-6 lg:grid-cols-2 lg:py-12'>
-        {/* Product Gallery */}
-        <div className='flex flex-col gap-4'>
-          {/* Main Image - Carousel */}
-          <Carousel setApi={setCarouselApi} className='w-full'>
-            <CarouselContent>
-              {product.images.map((image, index) => (
-                <CarouselItem key={index}>
-                  <div className='flex h-130 w-full items-center justify-center overflow-hidden rounded-lg bg-muted'>
-                    <img src={image.src || undefined} alt={image.alt} className='h-full w-full object-cover' />
-                  </div>
-                </CarouselItem>
-              ))}
-            </CarouselContent>
-          </Carousel>
-
-          {/* Thumbnails */}
-          <div className='flex flex-wrap gap-4'>
-            {product.images.map((image, index) => (
-              <button
-                type='button'
-                key={index}
-                onClick={() => setSelectedImage(index)}
-                aria-label={`Mostrar imagen ${index + 1} de ${product.name}`}
-                className='aspect-square size-16 cursor-pointer'
-              >
-                <img
-                  src={image.src || undefined}
-                  alt={image.alt}
-                  className={cn(
-                    'size-full cursor-pointer rounded-md object-cover ring-offset-2 transition-all',
-                    selectedImage === index ? 'ring-foreground ring-2' : '',
-                  )}
-                />
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Product Details */}
-        <div className='flex flex-col gap-6'>
-          {/* Product Header */}
-          <header className='flex flex-col gap-4'>
-            <div className='flex items-center'>
-              <Button variant='ghost' size='icon' className='bg-primary size-6 scale-75 cursor-pointer rounded-full'>
-                <Check className='text-primary-foreground size-4' />
-              </Button>
-              <span className='ms-2 font-medium'>{product.brand}</span>
-              <span className='text-muted-foreground ms-auto'>{product.sku}</span>
-            </div>
-            <h1 className='text-xl font-bold text-balance xl:text-3xl'>{product.name}</h1>
-
-            {/* Ratings */}
-            <div className='flex items-center gap-2'>
-              <div className='flex'>
-                {[...Array(5)].map((_, i) => (
-                  <Star
-                    key={i}
-                    className={cn(
-                      'size-5',
-                      i < product.rating ? 'fill-foreground text-foreground' : 'text-muted-foreground',
-                    )}
-                  />
-                ))}
-              </div>
-              <span className='text-muted-foreground text-sm'>
-                {product.reviews} {reviewsLabel}
-              </span>
-            </div>
-          </header>
-
-          {/* Price */}
-          <p className='text-4xl font-bold'>
-            {product.currency}
-            {product.price.toFixed(2)}
-          </p>
-          {/* Color Selection */}
-          <div>
-            <div className='mb-4 flex items-center text-sm'>
-              <span className='font-medium'>{colorLabel}:</span>
-              <span className='text-muted-foreground ms-1'>{selectedColor.name}</span>
-            </div>
-            <div className='flex gap-3'>
-              {product.colors.map(color => (
-                <Button
-                  key={color.name}
-                  onClick={() => setSelectedColor(color)}
-                  className={cn(
-                    'h-9 px-4 py-2',
-                    'ring-offset-background size-8 cursor-pointer rounded-sm ring-offset-2 transition-all',
-                    selectedColor.name === color.name && 'ring-foreground ring-2',
-                    selectedColor.name !== color.name &&
-                      ['Black', 'White'].includes(color.name) &&
-                      'outline-muted outline-solid',
-                  )}
-                  style={{ backgroundColor: color.value }}
-                  aria-label={`Seleccionar color ${color.name}`}
-                  aria-selected={selectedColor.name === color.name}
-                />
-              ))}
-            </div>
-          </div>
-
-          {/* Size Selection */}
-          <div>
-            <div className='mb-4 flex items-center justify-between'>
-              <div className='flex items-center'>
-                <span className='me-4 text-sm font-medium'>{sizesLabel}</span>
-                <div className='border-input flex rounded-sm border p-1'>
-                  {['eu', 'uk', 'us'].map(type => (
-                    <Button
-                      key={type}
-                      variant='ghost'
-                      size='sm'
-                      onClick={() => setSizeType(type as 'eu' | 'uk' | 'us')}
-                      className={cn(
-                        'cursor-pointer rounded-sm px-2 text-xs',
-                        sizeType === type && 'bg-secondary text-secondary-foreground',
-                      )}
-                      aria-label={`Seleccionar talla ${type.toUpperCase()}`}
-                      aria-selected={sizeType === type}
-                    >
-                      {type.toUpperCase()}
-                    </Button>
-                  ))}
-                </div>
-              </div>
-              <Button variant='ghost' className='h-9 px-4 py-2 text-primary cursor-pointer text-sm hover:underline'>
-                {sizeGuideLabel}
-              </Button>
-            </div>
-            <div className='grid grid-cols-4 gap-2 xl:grid-cols-5'>
-              {product.sizes.map(size => (
-                <Button
-                  key={size.eu}
-                  variant={selectedSize === size.eu ? 'secondary' : 'outline'}
-                  onClick={() => setSelectedSize(size.eu)}
-                  className='h-12 cursor-pointer rounded-full shadow-none'
-                >
-                  {sizeType === 'eu' ? size.eu : sizeType === 'uk' ? size.uk : size.us}
-                </Button>
-              ))}
-            </div>
-          </div>
-          {/* Add to Cart */}
-          <div>
-            <div className='mb-4 flex gap-4'>
-              <Button
-                className='h-12 flex-1 cursor-pointer rounded-md'
-                size='lg'
-                onClick={onAddToCart ? () => onAddToCart(product) : undefined}
-              >
-                <ShoppingBag />
-                {addToCartLabel}
-              </Button>
-              <Button
-                variant='outline'
-                size='icon'
-                className='border-input size-12 cursor-pointer rounded-md transition-colors'
-                onClick={() => {
-                  const next = !isWishlisted
-                  setIsWishlisted(next)
-                  onToggleWishlist?.(product, next)
-                }}
-                aria-label={isWishlisted ? removeFromWishlistLabel : addToWishlistLabel}
-              >
-                <ReactionToggle active={isWishlisted} icon={Heart} iconClassName='size-5' activeColorClassName='text-primary' />
-              </Button>
-            </div>
-            <div className='text-muted-foreground flex items-center justify-center gap-2 text-sm'>
-              <Truck className='size-4' />
-              <span>{freeDeliveryLabel}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  )
-}