@thorprovider/blocks 0.1.3 → 2.0.0

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

@@ -1,192 +0,0 @@
-'use client'
-
-import { 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 Product {
-  id: string | number
-  title: string
-  price: number
-  originalPrice?: number
-  image: string
-  badge?: string
-}
-
-/**
- * A card entry is either the legacy numeric-price product or the canonical
- * `Money`-price presentation. The block renders both without breaking legacy
- * consumers: a numeric `price` keeps the legacy `$` output unchanged, while a
- * canonical `Money` price is formatted in its own currency and locale.
- */
-export type ProductCard1Product = Product | ProductPresentation
-
-export interface ProductCard1Props {
-  products: ProductCard1Product[]
-  heading?: string
-  maxItems?: number
-  onAddToCart?: (product: ProductCard1Product) => void
-  onProductClick?: (product: ProductCard1Product) => void
-  addToCartLabel?: string
-  /** Shown when a canonical price is present but unavailable (never `$0`). */
-  unavailablePriceLabel?: string
-}
-
-function isPresentation(product: ProductCard1Product): product is ProductPresentation {
-  return typeof product.price === 'object'
-}
-
-function priceText(product: ProductCard1Product, unavailablePriceLabel: string): string {
-  if (isPresentation(product)) {
-    return formatMoney(product.price) ?? unavailablePriceLabel
-  }
-  return `$${product.price.toFixed(2)}`
-}
-
-function compareAtText(product: ProductCard1Product): string | undefined {
-  if (isPresentation(product)) {
-    const compareAt = product.compareAtPrice
-    if (!compareAt) return undefined
-    const formatted = formatMoney(compareAt)
-    const price = formatMoney(product.price)
-    // Render the comparison price only when both are valid and it is higher.
-    if (!formatted || !price) return undefined
-    if (Number(compareAt.amount) <= Number(product.price.amount)) return undefined
-    return formatted
-  }
-  // Legacy behavior is unchanged: truthiness only.
-  return product.originalPrice ? `$${product.originalPrice.toFixed(2)}` : undefined
-}
-
-function imageAlt(product: ProductCard1Product): string {
-  return isPresentation(product) ? (product.imageAlt ?? product.title) : product.title
-}
-
-function rating(product: ProductCard1Product): number | undefined {
-  if (!isPresentation(product)) return undefined
-  return typeof product.rating === 'number' && Number.isFinite(product.rating)
-    ? product.rating
-    : undefined
-}
-
-export function ProductCard1({
-  products,
-  heading,
-  maxItems = 6,
-  onAddToCart,
-  onProductClick,
-  addToCartLabel = 'Agregar al carrito',
-  unavailablePriceLabel = 'Precio no disponible',
-}: ProductCard1Props) {
-  const reduceMotion = useReducedMotion()
-  const displayedProducts = products.slice(0, maxItems)
-
-  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-8 text-center text-2xl font-bold text-balance md:text-3xl'>{heading}</h2>
-        )}
-
-        <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:gap-6'>
-          {displayedProducts.map((product, index) => {
-            const compareAt = compareAtText(product)
-            const ratingValue = rating(product)
-            return (
-              <motion.div
-                key={product.id}
-                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,
-                  delay: reduceMotion ? 0 : index * 0.05,
-                  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(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={imageAlt(product)}
-                        className='size-full rounded-md object-contain'
-                        loading='lazy'
-                        width={400}
-                        height={400}
-                      />
-                    </div>
-
-                    <div className='flex flex-1 flex-col'>
-                      <h2 className='mb-1 font-medium text-balance'>
-                        {onProductClick ? (
-                          <button
-                            type='button'
-                            onClick={(e) => {
-                              e.stopPropagation()
-                              onProductClick(product)
-                            }}
-                            className='hover:text-primary cursor-pointer text-left transition-colors'
-                          >
-                            {product.title}
-                          </button>
-                        ) : (
-                          product.title
-                        )}
-                      </h2>
-                      {ratingValue !== undefined && (
-                        <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>{ratingValue.toFixed(1)}</span>
-                        </div>
-                      )}
-                      <div className='mt-auto flex items-baseline gap-2'>
-                        <p className='font-semibold'>{priceText(product, unavailablePriceLabel)}</p>
-                        {compareAt && (
-                          <p className='text-muted-foreground text-sm line-through md:text-base xl:text-sm 2xl:text-base'>
-                            {compareAt}
-                          </p>
-                        )}
-                      </div>
-                    </div>
-                  </CardContent>
-
-                  <CardFooter className='bg-transparent px-3 pt-0 border-t-0 md:px-4'>
-                    <Button
-                      variant='outline'
-                      size='sm'
-                      className='h-8 w-full cursor-pointer px-3 text-sm text-xs'
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        onAddToCart?.(product)
-                      }}
-                    >
-                      {addToCartLabel}
-                    </Button>
-                  </CardFooter>
-                </Card>
-              </motion.div>
-            )
-          })}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-export default ProductCard1

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

@@ -1,71 +0,0 @@
-import { Star } from 'lucide-react'
-import { Card, CardContent, CardTitle } from '../../../ui/card'
-
-export interface ProductCard2Product {
-  id: string | number
-  title: string
-  image: string
-  price: number
-  rating: number
-}
-
-export interface ProductCard2Props {
-  products: ProductCard2Product[]
-  heading?: string
-  description?: string
-}
-
-export function ProductCard2({ products, heading, description }: ProductCard2Props) {
-  return (
-    <section className='py-12'>
-      <div className='mx-auto flex w-full max-w-7xl flex-col gap-8 px-4 sm:px-6 lg:px-8'>
-        {heading || description ? (
-          <header className='flex flex-col gap-2'>
-            {heading && <h2 className='text-3xl font-bold text-balance sm:text-4xl'>{heading}</h2>}
-            {description && (
-              <p className='text-muted-foreground max-w-[60ch] text-balance'>{description}</p>
-            )}
-          </header>
-        ) : null}
-
-        <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3'>
-          {products.map(product => (
-            <Card key={product.id} className='group overflow-hidden transition-all hover:shadow-lg'>
-              <CardContent className='flex flex-col gap-4'>
-                <div className='overflow-hidden rounded-md'>
-                  <img
-                    src={product.image || undefined}
-                    alt={product.title}
-                    width={400}
-                    height={400}
-                    className='aspect-square w-full object-cover transition-transform duration-300 group-hover:scale-105'
-                  />
-                </div>
-
-                <div className='flex flex-col gap-2'>
-                  <CardTitle className='line-clamp-1 text-lg font-semibold text-balance sm:text-xl'>
-                    {product.title}
-                  </CardTitle>
-
-                  <div
-                    className='flex items-center gap-0.5'
-                    aria-label={`${product.rating} out of 5 stars`}
-                    role='img'
-                  >
-                    {Array.from({ length: product.rating }).map((_, i) => (
-                      <Star key={i} className='fill-foreground text-foreground size-4 sm:size-5' />
-                    ))}
-                  </div>
-
-                  <p className='text-lg font-semibold sm:text-xl'>${product.price.toFixed(2)}</p>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-export default ProductCard2

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

@@ -1,166 +0,0 @@
-'use client'
-
-import { useEffect, useRef, useState, type ComponentType } from 'react'
-
-import { cn } from '../../../lib/utils'
-
-const PARTICLE_COUNT = 8
-
-/**
- * The pop/burst keyframes travel with the component instead of living in the
- * app's stylesheet, so this file is self-contained: drop it in and the
- * animation works with no Tailwind config or global CSS to copy over.
- * Injected once per page, guarded by the marker attribute.
- */
-const STYLE_MARKER = 'data-reaction-toggle-keyframes'
-const STYLES = `
-@keyframes reaction-toggle-pop {
-  0% { transform: scale(1); }
-  30% { transform: scale(0.82); }
-  100% { transform: scale(1); }
-}
-@keyframes reaction-toggle-burst {
-  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
-  20% { opacity: 1; transform: translate(calc(var(--rx) * 0.25), calc(var(--ry) * 0.25)) scale(1); }
-  100% { opacity: 0; transform: translate(var(--rx), var(--ry)) scale(0.6); }
-}
-.reaction-toggle-pop {
-  animation: reaction-toggle-pop 350ms cubic-bezier(0.34, 1.96, 0.64, 1);
-}
-.reaction-toggle-burst {
-  animation-name: reaction-toggle-burst;
-  animation-timing-function: ease-out;
-  animation-fill-mode: forwards;
-}
-@media (prefers-reduced-motion: reduce) {
-  .reaction-toggle-pop,
-  .reaction-toggle-burst { animation: none !important; }
-}
-`
-
-function useReactionToggleStyles() {
-  useEffect(() => {
-    if (document.head.querySelector(`[${STYLE_MARKER}]`)) return
-
-    const style = document.createElement('style')
-    style.setAttribute(STYLE_MARKER, '')
-    style.textContent = STYLES
-    document.head.append(style)
-  }, [])
-}
-
-type ReactionIconProps = {
-  className?: string
-}
-
-type Particle = {
-  rx: number
-  ry: number
-  duration: number
-  delay: number
-  size: number
-}
-
-function buildParticles(): Particle[] {
-  return Array.from({ length: PARTICLE_COUNT }, (_, i) => {
-    const angle = (Math.PI * 2 * i) / PARTICLE_COUNT + (Math.random() - 0.5) * 0.4
-    const dist = 16 + Math.random() * 10
-
-    return {
-      rx: Math.round(Math.cos(angle) * dist * 10) / 10,
-      ry: Math.round(Math.sin(angle) * dist * 10) / 10,
-      duration: Math.round(500 + Math.random() * 200),
-      delay: Math.round(Math.random() * 60),
-      size: Math.round((0.7 + Math.random() * 0.8) * 100) / 100,
-    }
-  })
-}
-
-type ReactionToggleProps = {
-  /** Whether the reaction is currently active (liked/helpful/etc). */
-  active: boolean
-  /** Icon component to render, e.g. `Heart` or `ThumbsUp` from lucide-react. */
-  icon: ComponentType<ReactionIconProps>
-  /** Wrapper class - sizing/positioning of the whole control. */
-  className?: string
-  /** Class applied to the icon itself (e.g. `size-5`). */
-  iconClassName?: string
-  /**
-   * Tailwind color class (e.g. `text-primary`, `text-destructive`) applied to the
-   * icon and particles while active. Drives `fill-current`/`bg-current`, so it
-   * stays in sync with the design system instead of a hardcoded brand color.
-   */
-  activeColorClassName?: string
-}
-
-/**
- * Heart/thumbs-up style reaction control: the icon pops with an overshoot scale
- * and sprinkles 8 particles outward the moment it becomes active.
- */
-export function ProductCard3ReactionToggle({
-  active,
-  icon: Icon,
-  className,
-  iconClassName,
-  activeColorClassName = 'text-primary',
-}: ReactionToggleProps) {
-  const [isBursting, setIsBursting] = useState(false)
-  const wasActive = useRef(active)
-  const particlesRef = useRef<Particle[]>(buildParticles())
-
-  useReactionToggleStyles()
-
-  useEffect(() => {
-    if (active && !wasActive.current) {
-      particlesRef.current = buildParticles()
-      setIsBursting(true)
-      const timeout = setTimeout(() => setIsBursting(false), 700)
-      wasActive.current = active
-      return () => clearTimeout(timeout)
-    }
-
-    wasActive.current = active
-  }, [active])
-
-  return (
-    <span className={cn('relative inline-flex', className)}>
-      <span className={cn('inline-flex', active && 'reaction-toggle-pop')}>
-        <Icon
-          className={cn(
-            'transition-[fill,stroke,color] duration-150 ease-[cubic-bezier(0.22,1,0.36,1)]',
-            active ? cn('fill-current', activeColorClassName) : 'fill-transparent',
-            iconClassName
-          )}
-        />
-      </span>
-
-      {isBursting && (
-        <span
-          aria-hidden='true'
-          className={cn('pointer-events-none absolute top-1/2 left-1/2 size-0', activeColorClassName)}
-        >
-          {particlesRef.current.map((particle, index) => (
-            <i
-              key={index}
-              className='reaction-toggle-burst absolute rounded-full bg-current opacity-0'
-              style={
-                {
-                  '--rx': `${particle.rx}px`,
-                  '--ry': `${particle.ry}px`,
-                  animationDuration: `${particle.duration}ms`,
-                  animationDelay: `${particle.delay}ms`,
-                  width: `${2.5 * particle.size}px`,
-                  height: `${2.5 * particle.size}px`,
-                  left: `${-1.25 * particle.size}px`,
-                  top: `${-1.25 * particle.size}px`,
-                } as React.CSSProperties
-              }
-            />
-          ))}
-        </span>
-      )}
-    </span>
-  )
-}
-
-export default ProductCard3ReactionToggle

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

@@ -1,215 +0,0 @@
-'use client'
-
-import { useState, type JSX } from 'react'
-import { Heart, Star, Sparkles, Flame, Trophy, GalleryHorizontalEnd } from 'lucide-react'
-
-import { cn } from '../../../lib/utils'
-import { Badge } from '../../../ui/badge'
-import { Button } from '../../../ui/button'
-import { Card, CardContent } from '../../../ui/card'
-import { ProductCard3ReactionToggle } from './product-card-3-reaction-toggle'
-
-export interface ProductCard3Product {
-  id: string | number
-  title: string
-  subtitle: string
-  image: string
-  price: number
-  originalPrice: number
-  rating: number
-  reviewCount: number
-  discountPercentage: number
-  isLowStock?: boolean
-  badge?: {
-    text: string
-    variant: 'trending' | 'bestseller' | 'new'
-  }
-}
-
-export interface ProductCard3Props {
-  products: ProductCard3Product[]
-  currencySymbol?: string
-  onViewSimilar?: (product: ProductCard3Product) => void
-  onToggleWishlist?: (product: ProductCard3Product) => void
-  onProductClick?: (product: ProductCard3Product) => void
-}
-
-interface BadgeStyle {
-  bg: string
-  icon: JSX.Element | null
-}
-
-const badgeStyles: Record<string, BadgeStyle> = {
-  trending: {
-    bg: 'bg-black',
-    icon: <Flame className='size-3' />,
-  },
-  bestseller: {
-    bg: 'bg-black',
-    icon: <Trophy className='size-3' />,
-  },
-  new: {
-    bg: 'bg-black',
-    icon: <Sparkles className='size-3' />,
-  },
-}
-
-interface ProductCardProps {
-  product: ProductCard3Product
-  className?: string
-  currencySymbol?: string
-  onViewSimilar?: (product: ProductCard3Product) => void
-  onToggleWishlist?: (product: ProductCard3Product) => void
-  onProductClick?: (product: ProductCard3Product) => void
-}
-
-function ProductCard({
-  product,
-  className,
-  currencySymbol = '$',
-  onViewSimilar,
-  onToggleWishlist,
-  onProductClick,
-}: ProductCardProps) {
-  const [isWishlisted, setIsWishlisted] = useState(false)
-
-  const badgeStyle = product.badge ? badgeStyles[product.badge.variant] || badgeStyles.new : null
-
-  /**
-   * The heart stays in uncontrolled per-card state only when no callback is
-   * given; with onToggleWishlist the parent owns the wishlist state.
-   */
-  const handleToggleWishlist = () => {
-    if (onToggleWishlist) {
-      onToggleWishlist(product)
-      return
-    }
-    setIsWishlisted(prev => !prev)
-  }
-
-  return (
-    <Card
-      className={cn(
-        'relative overflow-hidden rounded-md py-0 shadow-none transition-all hover:shadow-md',
-        onProductClick && 'cursor-pointer',
-        className,
-      )}
-      onClick={onProductClick ? () => onProductClick(product) : undefined}
-    >
-      <CardContent className='px-0'>
-        <div className='relative aspect-square w-full overflow-hidden'>
-          <img src={product.image || undefined} alt={product.title} className='size-full object-cover' loading='lazy' />
-
-          {product.badge && badgeStyle && (
-            <div className='absolute start-2 top-2 z-20'>
-              <Badge className={cn('h-auto font-semibold flex items-center gap-1 px-2 py-1 text-white backdrop-blur-xs', badgeStyle.bg)}>
-                {badgeStyle.icon}
-                <span className='text-xs font-medium'>{product.badge.text}</span>
-              </Badge>
-            </div>
-          )}
-
-          {product.rating > 0 && (
-            <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' />
-              <span>{product.rating}</span>
-              {product.reviewCount > 0 && (
-                <span className='text-muted-foreground'>
-                  | {product.reviewCount >= 1000 ? `${(product.reviewCount / 1000).toFixed(1)}k` : product.reviewCount}
-                </span>
-              )}
-            </div>
-          )}
-
-          <div className='absolute end-2 bottom-2 z-10'>
-            <Button
-              variant='ghost'
-              size='sm'
-              className="h-8 px-3 text-xs group bg-background/80 hover:bg-background size-8 cursor-pointer overflow-hidden rounded-full p-0 shadow-xs backdrop-blur-xs transition-all duration-200 hover:w-[130px]"
-              aria-label='Ver productos similares'
-              onClick={
-                onViewSimilar
-                  ? (e) => {
-                      e.stopPropagation()
-                      onViewSimilar(product)
-                    }
-                  : undefined
-              }
-            >
-              <GalleryHorizontalEnd className='absolute start-2 size-4 shrink-0' />
-              <span className='ms-6 text-xs whitespace-nowrap opacity-0 group-hover:opacity-100'>Ver similares</span>
-            </Button>
-          </div>
-
-          <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"
-            onClick={(e) => {
-              e.stopPropagation()
-              handleToggleWishlist()
-            }}
-            aria-label={isWishlisted ? 'Quitar de favoritos' : 'Añadir a favoritos'}
-          >
-            <ProductCard3ReactionToggle
-              active={isWishlisted}
-              icon={Heart}
-              iconClassName={cn('size-4', !isWishlisted && 'text-muted-foreground hover:text-destructive')}
-              activeColorClassName='text-destructive'
-            />
-          </Button>
-        </div>
-
-        <div className='p-4'>
-          <div className='flex flex-col gap-2'>
-            <h3 className='font-medium text-balance'>{product.title}</h3>
-            <p className='text-muted-foreground text-sm text-balance'>{product.subtitle}</p>
-          </div>
-
-          <div className='flex items-center gap-2'>
-            <span className='font-semibold'>
-              {currencySymbol}
-              {product.price}
-            </span>
-            <span className='text-muted-foreground text-sm line-through'>
-              {currencySymbol}
-              {product.originalPrice}
-            </span>
-            <span className='text-sm'>({product.discountPercentage}% OFF)</span>
-          </div>
-
-          {product.isLowStock && <p className='text-sm text-destructive'>¡Solo quedan pocas unidades!</p>}
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-export function ProductCard3({
-  products,
-  currencySymbol = '$',
-  onViewSimilar,
-  onToggleWishlist,
-  onProductClick,
-}: ProductCard3Props) {
-  return (
-    <section className='py-12'>
-      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
-        <div className='grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3'>
-          {products.map(product => (
-            <ProductCard
-              key={product.id}
-              product={product}
-              currencySymbol={currencySymbol}
-              onViewSimilar={onViewSimilar}
-              onToggleWishlist={onToggleWishlist}
-              onProductClick={onProductClick}
-            />
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-export default ProductCard3