@thorprovider/blocks 0.1.3 → 2.0.0

package/src/blocks/e-commerce/shopping-carts/shopping-cart-4.test.tsx

@@ -1,229 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-import { ShoppingCart4, type ShoppingCart4Item, type ShoppingCart4Totals } from './shopping-cart-4'
-
-const items: ShoppingCart4Item[] = [
-  {
-    id: 'line_1',
-    name: 'Taladro',
-    price: 45,
-    quantity: 2,
-    image: 'https://cdn.example/taladro.jpg',
-    lineTotal: { amount: '90.00', currencyCode: 'USD' },
-  },
-  { id: 'line_2', name: 'Batería', price: 20, quantity: 1 },
-]
-
-const totals: ShoppingCart4Totals = {
-  subtotal: { amount: '110.00', currencyCode: 'USD' },
-  discount: { amount: '10.00', currencyCode: 'USD' },
-  tax: { amount: '8.00', currencyCode: 'USD' },
-  shipping: { amount: '0', currencyCode: 'USD' },
-  total: { amount: '108.00', currencyCode: 'USD' },
-}
-
-const formatMoney = (money: { amount: string; currencyCode: string }) =>
-  `${money.currencyCode} ${money.amount}`
-
-describe('ShoppingCart4 — backend-authoritative totals', () => {
-  it('renders supplied backend totals verbatim (no local arithmetic)', () => {
-    const html = renderToStaticMarkup(
-      <ShoppingCart4 items={items} promotions={[]} totals={totals} formatMoney={formatMoney} />,
-    )
-    expect(html).toContain('USD 110.00')
-    expect(html).toContain('USD 10.00')
-    expect(html).toContain('USD 8.00')
-    expect(html).toContain('Gratis')
-    expect(html).toContain('USD 108.00')
-  })
-
-  it('does not invent subtotal or total when none are supplied', () => {
-    const html = renderToStaticMarkup(
-      <ShoppingCart4 items={items} promotions={[]} formatMoney={formatMoney} />,
-    )
-    expect(html).not.toContain('Subtotal')
-    expect(html).not.toContain('Total')
-  })
-
-  it('renders a controlled pending state', () => {
-    const html = renderToStaticMarkup(
-      <ShoppingCart4 items={items} promotions={[]} totalsState='pending' />,
-    )
-    expect(html).toContain('Actualizando totales')
-  })
-
-  it('renders a controlled error state with a recovery action', () => {
-    const html = renderToStaticMarkup(
-      <ShoppingCart4
-        items={items}
-        promotions={[]}
-        totalsState='error'
-        onRetryTotals={() => {}}
-      />,
-    )
-    expect(html).toContain('No se pudieron actualizar los totales')
-    expect(html).toContain('Reintentar')
-  })
-
-  it('omits an absent line image without emitting an empty src', () => {
-    const html = renderToStaticMarkup(
-      <ShoppingCart4 items={items} promotions={[]} totals={totals} formatMoney={formatMoney} />,
-    )
-    expect(html).not.toMatch(/src=""/)
-  })
-
-  it('does not fabricate a delivery estimate or express payment controls', () => {
-    const html = renderToStaticMarkup(
-      <ShoppingCart4 items={items} promotions={[]} totals={totals} formatMoney={formatMoney} />,
-    )
-    expect(html).not.toContain('Entrega estimada')
-    expect(html).not.toContain('Apple Pay')
-    expect(html).not.toContain('Google Pay')
-    expect(html).not.toContain('Compra rápida')
-  })
-
-  it('never renders a fake zero for absent or malformed required totals', () => {
-    const html = renderToStaticMarkup(
-      <ShoppingCart4
-        items={items}
-        promotions={[]}
-        totals={{
-          subtotal: { amount: '', currencyCode: 'USD' },
-          total: { amount: 'abc', currencyCode: 'USD' },
-        }}
-        formatMoney={formatMoney}
-      />,
-    )
-    expect(html).not.toContain('USD 0')
-    expect(html).toContain('Totales no disponibles')
-  })
-
-  it('preserves a legitimate zero total', () => {
-    const html = renderToStaticMarkup(
-      <ShoppingCart4
-        items={items}
-        promotions={[]}
-        totals={{
-          subtotal: { amount: '0', currencyCode: 'USD' },
-          total: { amount: '0', currencyCode: 'USD' },
-        }}
-        formatMoney={formatMoney}
-      />,
-    )
-    expect(html).toContain('USD 0')
-    expect(html).not.toContain('Totales no disponibles')
-  })
-
-  it('shows an unavailable marker (not zero) for a supplied but malformed line total', () => {
-    const html = renderToStaticMarkup(
-      <ShoppingCart4
-        items={[{ id: 'line_x', name: 'Pieza', price: 10, quantity: 1, lineTotal: { amount: '', currencyCode: 'USD' } }]}
-        promotions={[]}
-        totals={totals}
-        formatMoney={formatMoney}
-      />,
-    )
-    expect(html).toContain('—')
-    expect(html).not.toContain('USD 0')
-  })
-
-  it('renders absolute quantities from props (cart contract, not a delta)', () => {
-    const html = renderToStaticMarkup(
-      <ShoppingCart4 items={items} promotions={[]} totals={totals} formatMoney={formatMoney} />,
-    )
-    expect(html).toContain('>2<')
-    expect(html).toContain('>1<')
-  })
-})
-
-describe('ShoppingCart4 — presentation and action availability', () => {
-  it('defaults to the compact collapsible card', () => {
-    const html = renderToStaticMarkup(
-      <ShoppingCart4 items={items} promotions={[]} totals={totals} formatMoney={formatMoney} />,
-    )
-    expect(html).toContain('max-w-md')
-    expect(html).toContain('Contraer carrito')
-    expect(html).toContain('max-h-64')
-  })
-
-  it('renders page presentation as a wide, always-expanded review with a heading', () => {
-    const html = renderToStaticMarkup(
-      <ShoppingCart4
-        items={items}
-        promotions={[]}
-        totals={totals}
-        formatMoney={formatMoney}
-        presentation='page'
-      />,
-    )
-    expect(html).toContain('max-w-3xl')
-    expect(html).toContain('<h1')
-    expect(html).not.toContain('Contraer carrito')
-    expect(html).not.toContain('max-h-64')
-  })
-
-  it('offers a continue-shopping action in page presentation', () => {
-    const html = renderToStaticMarkup(
-      <ShoppingCart4
-        items={items}
-        promotions={[]}
-        totals={totals}
-        formatMoney={formatMoney}
-        presentation='page'
-        onContinueShopping={() => {}}
-      />,
-    )
-    expect(html).toContain('Seguir comprando')
-  })
-
-  it('suppresses checkout when the checkout feature is unavailable', () => {
-    const html = renderToStaticMarkup(
-      <ShoppingCart4
-        items={items}
-        promotions={[]}
-        totals={totals}
-        formatMoney={formatMoney}
-        presentation='page'
-        checkoutUnavailable
-      />,
-    )
-    expect(html).not.toContain('Ver carrito y finalizar')
-  })
-
-  it('disables checkout while the cart is not ready', () => {
-    const html = renderToStaticMarkup(
-      <ShoppingCart4
-        items={items}
-        promotions={[]}
-        totals={totals}
-        formatMoney={formatMoney}
-        presentation='page'
-        checkoutDisabled
-      />,
-    )
-    expect(html).toMatch(/<button[^>]*disabled[^>]*>[^<]*Ver carrito y finalizar/)
-  })
-})
-
-describe('ShoppingCart4 — accessibility', () => {
-  it('names every line mutation control', () => {
-    const html = renderToStaticMarkup(
-      <ShoppingCart4 items={items} promotions={[]} totals={totals} formatMoney={formatMoney} />,
-    )
-    expect(html).toContain('aria-label="Disminuir cantidad, Taladro"')
-    expect(html).toContain('aria-label="Aumentar cantidad, Taladro"')
-    expect(html).toContain('aria-label="Quitar Taladro"')
-  })
-
-  it('announces pending totals politely and errors as an alert', () => {
-    const pending = renderToStaticMarkup(
-      <ShoppingCart4 items={items} promotions={[]} totalsState='pending' />,
-    )
-    expect(pending).toContain('aria-live="polite"')
-    expect(pending).toContain('Actualizando totales')
-    const error = renderToStaticMarkup(
-      <ShoppingCart4 items={items} promotions={[]} totalsState='error' />,
-    )
-    expect(error).toMatch(/role="alert"/)
-  })
-})

package/src/blocks/e-commerce/storefront-hero/storefront-hero-1.test.tsx

@@ -1,72 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-import StorefrontHero1, { type FeaturedProduct } from './storefront-hero-1'
-
-const product: FeaturedProduct = {
-  id: 'p1',
-  name: 'Taladro percutor',
-  brand: 'INGCO',
-  price: 69.99,
-  originalPrice: 99.99,
-  rating: 4.8,
-  reviewCount: 236,
-  inStock: true,
-  isNew: false,
-  isOnSale: true,
-  image: '/products/drill.png',
-  colors: ['#111111'],
-}
-
-const base = {
-  title: 'Potencia para cada proyecto',
-  description: 'Herramientas profesionales',
-  products: [],
-}
-
-describe('StorefrontHero1 — optional editorial image', () => {
-  it('renders no editorial image when none is supplied', () => {
-    const html = renderToStaticMarkup(<StorefrontHero1 {...base} />)
-    expect(html).not.toContain('<img')
-  })
-
-  it('renders a native editorial image with its src and alt text', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontHero1 {...base} heroImage={{ src: '/hero-tools.png', alt: 'Taladro inalámbrico y accesorios' }} />,
-    )
-    expect(html).toContain('src="/hero-tools.png"')
-    expect(html).toContain('alt="Taladro inalámbrico y accesorios"')
-  })
-
-  it('never renders an empty image src', () => {
-    const blank = renderToStaticMarkup(
-      <StorefrontHero1 {...base} heroImage={{ src: '   ', alt: 'Vacío' }} />,
-    )
-    expect(blank).not.toContain('<img')
-  })
-
-  it('preserves the product grid when the editorial image is omitted', () => {
-    const html = renderToStaticMarkup(<StorefrontHero1 {...base} products={[product]} />)
-    expect(html).toContain('Taladro percutor')
-    expect(html).toContain('src="/products/drill.png"')
-    expect(html).not.toContain('/hero-tools.png')
-  })
-
-  it('keeps the product grid when the editorial image is supplied', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontHero1
-        {...base}
-        products={[product]}
-        heroImage={{ src: '/hero-tools.png', alt: 'Taladro inalámbrico' }}
-      />,
-    )
-    expect(html).toContain('src="/hero-tools.png"')
-    expect(html).toContain('Taladro percutor')
-  })
-})
-
-describe('StorefrontHero1 — product card secondary action label', () => {
-  it('defaults the second product-card action to "Ver producto"', () => {
-    const html = renderToStaticMarkup(<StorefrontHero1 {...base} products={[product]} />)
-    expect(html).toContain('Ver producto')
-  })
-})

package/src/blocks/e-commerce/storefront-hero/storefront-hero-1.tsx

@@ -1,263 +0,0 @@
-'use client'
-
-import { motion, useReducedMotion } from 'motion/react'
-
-import { Badge } from '../../../ui/badge'
-import { Button } from '../../../ui/button'
-import { ShoppingBag, Star, ArrowRight } from 'lucide-react'
-import type { ComponentProps, ReactNode } from 'react'
-import type { CTA } from '../../../lib/types'
-
-export interface FeaturedProduct {
-  id: string
-  name: string
-  brand: string
-  price: number
-  originalPrice: number
-  rating: number
-  reviewCount: number
-  inStock: boolean
-  isNew: boolean
-  isOnSale: boolean
-  image: string
-  colors: string[]
-}
-
-export interface HeroImage {
-  src: string
-  alt: string
-}
-
-export interface StorefrontHero1Props {
-  title: string
-  description: string
-  products: FeaturedProduct[]
-  titleAccent?: string
-  badge?: string
-  primaryCta?: CTA
-  secondaryCta?: CTA
-  /**
-   * Optional editorial image. Rendered as a native `<img>` when `src` is a
-   * non-empty string; omitted entirely when absent or blank (never an empty
-   * `src`). The product grid is unaffected.
-   */
-  heroImage?: HeroImage
-  onAddToCart?: (product: FeaturedProduct) => void
-  onBuyNow?: (product: FeaturedProduct) => void
-  onSelectColor?: (product: FeaturedProduct, index: number, color: string) => void
-  addToCartLabel?: string
-  buyNowLabel?: string
-  newLabel?: string
-  outOfStockLabel?: string
-  colorsLabel?: string
-}
-
-function CtaButton({
-  cta,
-  variant,
-  children,
-}: {
-  cta: CTA
-  variant?: ComponentProps<typeof Button>['variant']
-  children: ReactNode
-}) {
-  if (cta.href) {
-    return (
-      <Button
-        variant={variant}
-        size='lg'
-        className='group relative cursor-pointer overflow-hidden px-8 py-6 text-base font-medium'
-        asChild
-      >
-        <a href={cta.href}>{children}</a>
-      </Button>
-    )
-  }
-
-  return (
-    <Button
-      variant={variant}
-      size='lg'
-      className='group relative cursor-pointer overflow-hidden px-8 py-6 text-base font-medium'
-    >
-      {children}
-    </Button>
-  )
-}
-
-function StorefrontHero1({
-  title,
-  description,
-  products,
-  titleAccent,
-  badge,
-  primaryCta,
-  secondaryCta,
-  heroImage,
-  onAddToCart,
-  onBuyNow,
-  onSelectColor,
-  addToCartLabel = 'Agregar al carrito',
-  buyNowLabel = 'Ver producto',
-  newLabel = 'Nuevo',
-  outOfStockLabel = 'Agotado',
-  colorsLabel = 'Colores:',
-}: StorefrontHero1Props) {
-  const reduceMotion = useReducedMotion()
-
-  return (
-    <div className='from-primary/5 to-background relative overflow-hidden bg-gradient-to-br'>
-      <div className='relative z-10 mx-auto w-full max-w-7xl flex flex-col items-center justify-between gap-12 px-4 sm:px-6 lg:px-8 py-16 lg:py-20 xl:flex-row xl:items-start'>
-        <motion.div
-          initial={reduceMotion ? false : { opacity: 0, y: 24 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5, ease: 'easeOut' }}
-          className='mx-auto max-w-xl text-center lg:mx-0 xl:text-left'
-        >
-          {badge && (
-            <div className='border-primary/20 bg-primary/5 text-primary inline-flex items-center rounded-full border px-4 py-1.5 text-sm font-medium backdrop-blur-sm'>
-              {badge}
-            </div>
-          )}
-          <h1 className='text-foreground mt-8 text-4xl font-bold tracking-tight sm:text-5xl md:text-7xl'>
-            {title}{' '}
-            {titleAccent && (
-              <span className='from-primary to-primary/70 bg-gradient-to-r bg-clip-text text-transparent'>
-                {titleAccent}
-              </span>
-            )}
-          </h1>
-          <p className='text-muted-foreground mt-8 text-lg'>{description}</p>
-          {(primaryCta || secondaryCta) && (
-            <div className='mt-10 flex flex-col gap-4 sm:flex-row sm:justify-center xl:justify-start'>
-              {primaryCta && (
-                <CtaButton cta={primaryCta}>
-                  <span className='relative z-10 flex items-center gap-2'>
-                    {primaryCta.label}
-                    <ArrowRight className='transition-transform group-hover:translate-x-1' />
-                  </span>
-                  <span className='bg-primary/5 absolute inset-0 -z-0 opacity-0 transition-opacity group-hover:opacity-100'></span>
-                </CtaButton>
-              )}
-              {secondaryCta && (
-                <CtaButton cta={secondaryCta} variant='outline'>
-                  <span className='relative z-10 flex items-center gap-2'>
-                    <ShoppingBag />
-                    {secondaryCta.label}
-                  </span>
-                </CtaButton>
-              )}
-            </div>
-          )}
-          {heroImage && heroImage.src.trim().length > 0 ? (
-            <img
-              src={heroImage.src}
-              alt={heroImage.alt}
-              className='mt-10 aspect-video w-full rounded-lg object-cover'
-            />
-          ) : null}
-        </motion.div>
-
-        <div className='w-full max-w-2xl lg:mt-0'>
-          <div className='grid gap-6 sm:grid-cols-2'>
-            {products.map((product, index) => (
-              <motion.div
-                key={product.id}
-                initial={reduceMotion ? false : { opacity: 0, y: 24 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, margin: '-40px' }}
-                transition={{
-                  duration: 0.45,
-                  delay: reduceMotion ? 0 : index * 0.1,
-                  ease: 'easeOut',
-                }}
-                className='bg-card relative h-full overflow-hidden rounded-lg border shadow-sm transition-shadow hover:shadow-md'
-              >
-                <div className='absolute top-4 left-4 z-10 flex flex-col gap-2'>
-                  {product.isNew && (
-                    <Badge variant='secondary' className='rounded-full'>{newLabel}</Badge>
-                  )}
-                  {product.isOnSale && (
-                    <Badge variant='destructive' className='rounded-full'>
-                      {Math.round(((product.originalPrice - product.price) / product.originalPrice) * 100)}% OFF
-                    </Badge>
-                  )}
-                </div>
-
-                <div className='relative aspect-square overflow-hidden'>
-                  <img
-                    src={product.image || undefined}
-                    alt={`${product.brand} ${product.name}`}
-                    className='size-full object-cover'
-                    loading='lazy'
-                  />
-                  {!product.inStock && (
-                    <div className='absolute inset-0 flex items-center justify-center bg-black/50'>
-                      <span className='rounded bg-white/90 px-3 py-1 text-sm font-medium'>{outOfStockLabel}</span>
-                    </div>
-                  )}
-                </div>
-
-                <div className='p-4'>
-                  <div className='text-muted-foreground mb-1 text-sm font-medium'>{product.brand}</div>
-                  <h3 className='mb-2 font-medium'>{product.name}</h3>
-
-                  <div className='mb-3'>
-                    <span className='text-lg font-bold'>${product.price.toFixed(2)}</span>
-                    {product.isOnSale && (
-                      <span className='text-muted-foreground ms-2 text-sm line-through'>
-                        ${product.originalPrice.toFixed(2)}
-                      </span>
-                    )}
-                  </div>
-
-                  <div className='mb-4 flex items-center'>
-                    <span className='text-muted-foreground me-2 text-sm'>{colorsLabel}</span>
-                    <div className='flex gap-1'>
-                      {product.colors.map((color, i) => (
-                        <button
-                          key={i}
-                          className='size-5 rounded-full border'
-                          style={{ backgroundColor: color }}
-                          aria-label={`Opción de color ${i + 1}`}
-                          onClick={onSelectColor ? () => onSelectColor(product, i, product.colors[i]) : undefined}
-                        />
-                      ))}
-                    </div>
-                  </div>
-
-                  <div className='mb-4 flex items-center'>
-                    <div className='flex'>
-                      {[...Array(5)].map((_, i) => (
-                        <Star
-                          key={i}
-                          className={`size-4 ${i < Math.floor(product.rating) ? 'fill-foreground text-foreground' : 'text-muted-foreground'}`}
-                        />
-                      ))}
-                    </div>
-                    <span className='text-muted-foreground ms-2 text-sm'>({product.reviewCount.toLocaleString()})</span>
-                  </div>
-
-                  <div className='flex flex-col gap-2'>
-                    <Button variant='outline' className="h-9 px-4 py-2 cursor-pointer" disabled={!product.inStock} onClick={onAddToCart ? () => onAddToCart(product) : undefined}>
-                      <ShoppingBag />
-                      {addToCartLabel}
-                    </Button>
-                    <Button className="h-9 px-4 py-2 cursor-pointer" disabled={!product.inStock} onClick={onBuyNow ? () => onBuyNow(product) : undefined}>
-                      {buyNowLabel}
-                    </Button>
-                  </div>
-                </div>
-              </motion.div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      <div className='bg-primary/10 absolute -top-32 -right-32 size-96 rounded-full blur-3xl' />
-      <div className='bg-secondary/30 absolute -bottom-32 -left-32 size-96 rounded-full blur-3xl' />
-    </div>
-  )
-}
-
-export default StorefrontHero1