@thorprovider/blocks 0.1.3 → 2.0.0

package/src/blocks/e-commerce/shopping-carts/shopping-cart-2-spinning-counter.tsx

@@ -1,146 +0,0 @@
-'use client'
-
-import { useEffect, useRef } from 'react'
-
-import { cn } from '../../../lib/utils'
-
-/**
- * Spinning counter: each digit is a clipped vertical reel of 0-9 cells that
- * spins forward and lands on the target digit. Adapted from Transitions.dev
- * "Spinning counter" (26-spinning-counter.md), re-tuned for cart totals:
- * one loop instead of several, and a snappier duration so rapid +/- clicks
- * don't queue up sluggish animations. The spec's directional SVG blur is
- * approximated here with a CSS `filter: blur()` transition for simplicity.
- *
- * Non-digit characters (currency symbol, decimal point, thousands separator)
- * render as static text so only the digits spin.
- */
-const CELL_SIZE = 20 // px
-const DURATION = 450 // ms
-const STAGGER = 60 // ms per column
-const SPINS = 1 // extra full loops before landing
-const SPIN_BLUR = 2 // px
-
-const REEL_DIGITS = Array.from({ length: (SPINS + 1) * 10 }, (_, i) => i % 10)
-
-type ShoppingCart2SpinningCounterProps = {
-  value: number
-  /** Fixed decimal places to format the value with, e.g. 2 for currency. */
-  decimals?: number
-  /** Static text rendered before the formatted value, e.g. '$'. */
-  prefix?: string
-  className?: string
-  digitClassName?: string
-}
-
-export function ShoppingCart2SpinningCounter({ value, decimals = 0, prefix, className, digitClassName }: ShoppingCart2SpinningCounterProps) {
-  const safeValue = Math.max(0, value)
-  const formatted = safeValue.toFixed(decimals)
-  const chars = formatted.split('')
-  const containerRef = useRef<HTMLSpanElement>(null)
-  const isFirstRender = useRef(true)
-
-  useEffect(() => {
-    const container = containerRef.current
-    if (!container) return
-
-    const strips = Array.from(container.querySelectorAll<HTMLElement>('[data-reel-strip]'))
-    const timeouts: number[] = []
-
-    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
-
-    strips.forEach((strip, index) => {
-      const digit = Number(strip.dataset.digit)
-      const delay = (strips.length - 1 - index) * STAGGER
-
-      if (isFirstRender.current || !strip.dataset.initialized || prefersReducedMotion) {
-        strip.style.transition = 'none'
-        strip.style.transform = `translateY(-${digit * CELL_SIZE}px)`
-        strip.style.filter = 'blur(0px)'
-        strip.dataset.initialized = 'true'
-        void strip.offsetHeight
-        return
-      }
-
-      const landingIndex = SPINS * 10 + digit
-      strip.style.transition = `transform ${DURATION}ms cubic-bezier(0.16, 1, 0.3, 1) ${delay}ms, filter ${DURATION}ms ease-out ${delay}ms`
-      strip.style.transform = `translateY(-${landingIndex * CELL_SIZE}px)`
-      strip.style.filter = `blur(${SPIN_BLUR}px)`
-
-      const settleTimeout = window.setTimeout(() => {
-        strip.style.filter = 'blur(0px)'
-      }, delay + 30)
-
-      const resetTimeout = window.setTimeout(() => {
-        strip.style.transition = 'none'
-        strip.style.transform = `translateY(-${digit * CELL_SIZE}px)`
-        void strip.offsetHeight
-      }, delay + DURATION + 30)
-
-      timeouts.push(settleTimeout, resetTimeout)
-    })
-
-    isFirstRender.current = false
-
-    return () => {
-      timeouts.forEach(window.clearTimeout)
-    }
-  }, [formatted])
-
-  return (
-    <span className='relative inline-flex items-center'>
-      <span className='sr-only'>{prefix}{formatted}</span>
-      <span
-        ref={containerRef}
-        className={cn('inline-flex items-center font-[inherit] tabular-nums', className)}
-        style={{ height: CELL_SIZE }}
-        aria-hidden='true'
-      >
-        {prefix ? (
-          <span className={digitClassName} style={{ display: 'inline-flex', alignItems: 'center', height: CELL_SIZE }}>
-            {prefix}
-          </span>
-        ) : null}
-        {chars.map((char, index) => {
-          if (!/\d/.test(char)) {
-            return (
-              <span
-                key={index}
-                className={digitClassName}
-                style={{ display: 'inline-flex', alignItems: 'center', height: CELL_SIZE }}
-              >
-                {char}
-              </span>
-            )
-          }
-
-          return (
-            <span
-              key={index}
-              className='relative inline-block overflow-hidden'
-              style={{
-                height: CELL_SIZE,
-                maskImage: 'linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%)',
-                WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%)',
-              }}
-            >
-              <span data-reel-strip data-digit={char} className='flex flex-col will-change-[transform,filter]'>
-                {REEL_DIGITS.map((cellDigit, cellIndex) => (
-                  <span
-                    key={cellIndex}
-                    className={cn('flex items-center justify-center', digitClassName)}
-                    style={{ height: CELL_SIZE }}
-                  >
-                    {cellDigit}
-                  </span>
-                ))}
-              </span>
-            </span>
-          )
-        })}
-      </span>
-    </span>
-  )
-}
-
-export default ShoppingCart2SpinningCounter

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

@@ -1,295 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { ArrowLeft, Shield, ShoppingBag, Tag, Truck } from 'lucide-react'
-import { Button } from '../../../ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
-import { Input } from '../../../ui/input'
-import { Separator } from '../../../ui/separator'
-import { ShoppingCart2ItemRow } from './shopping-cart-2-item-row'
-import { ShoppingCart2Recommendations } from './shopping-cart-2-recommendations'
-import { ShoppingCart2SpinningCounter } from './shopping-cart-2-spinning-counter'
-
-export interface ShoppingCart2Item {
-  id: string
-  name: string
-  brand?: string
-  price: number
-  originalPrice?: number
-  quantity: number
-  image: string
-  color?: string
-  size?: string
-}
-
-export interface ShoppingCart2Recommendation {
-  id: string
-  name: string
-  price: number
-  image: string
-}
-
-export interface ShoppingCart2Props {
-  items: ShoppingCart2Item[]
-  recommendations?: ShoppingCart2Recommendation[]
-  taxRate?: number
-  shippingCost?: number
-  freeShippingThreshold?: number
-  validatePromo?: (code: string) => number | null
-  titleLabel?: string
-  itemsCountLabel?: string
-  cartItemsLabel?: string
-  orderSummaryLabel?: string
-  subtotalLabel?: string
-  savingsLabel?: string
-  shippingLabel?: string
-  freeShippingLabel?: string
-  taxLabel?: string
-  totalLabel?: string
-  promoPlaceholder?: string
-  applyPromoLabel?: string
-  promoAppliedLabel?: string
-  continueShoppingLabel?: string
-  emptyCartTitleLabel?: string
-  emptyCartDescriptionLabel?: string
-  checkoutLabel?: string
-  freeShippingNoteLabel?: string
-  freeShippingThresholdNoteLabel?: string
-  secureCheckoutLabel?: string
-  recommendationsLabel?: string
-  onQuantityChange?: (id: string, quantity: number) => void
-  onRemove?: (id: string) => void
-  onAddToWishlist?: (item: ShoppingCart2Item) => void
-  onCheckout?: () => void
-  onContinueShopping?: () => void
-  onRecommendationClick?: (product: ShoppingCart2Recommendation) => void
-}
-
-export function ShoppingCart2({
-  items,
-  recommendations,
-  taxRate = 0.08,
-  shippingCost = 9.99,
-  freeShippingThreshold = 75,
-  validatePromo,
-  titleLabel = 'Carrito de compras',
-  itemsCountLabel = 'artículos en tu carrito',
-  cartItemsLabel = 'Artículos',
-  orderSummaryLabel = 'Resumen del pedido',
-  subtotalLabel = 'Subtotal',
-  savingsLabel = 'Ahorro',
-  shippingLabel = 'Envío',
-  freeShippingLabel = 'Gratis',
-  taxLabel = 'Impuestos',
-  totalLabel = 'Total',
-  promoPlaceholder = 'Código de descuento',
-  applyPromoLabel = 'Aplicar código',
-  promoAppliedLabel = 'Código "{code}" aplicado',
-  continueShoppingLabel = 'Seguir comprando',
-  emptyCartTitleLabel = 'Tu carrito está vacío',
-  emptyCartDescriptionLabel = 'Añade algunos artículos para empezar',
-  checkoutLabel = 'Finalizar compra',
-  freeShippingNoteLabel = 'Envío gratis en este pedido',
-  freeShippingThresholdNoteLabel = 'Envío gratis en pedidos superiores a ${threshold}',
-  secureCheckoutLabel = 'Pago seguro garantizado',
-  recommendationsLabel = 'También te puede gustar',
-  onQuantityChange,
-  onRemove,
-  onAddToWishlist,
-  onCheckout,
-  onContinueShopping,
-  onRecommendationClick,
-}: ShoppingCart2Props) {
-  const [promoCode, setPromoCode] = useState('')
-  const [appliedPromo, setAppliedPromo] = useState<string | null>(null)
-
-  const applyPromoCode = () => {
-    if (!validatePromo) return
-    const code = promoCode.trim()
-    const discount = validatePromo(code)
-    if (discount !== null && discount > 0) {
-      setAppliedPromo(code)
-      setPromoCode('')
-    }
-  }
-
-  const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0)
-  const itemCount = items.reduce((sum, item) => sum + item.quantity, 0)
-  const savings = items.reduce((sum, item) => {
-    const originalPrice = item.originalPrice ?? item.price
-    return sum + (originalPrice - item.price) * item.quantity
-  }, 0)
-  const promoDiscount = appliedPromo && validatePromo ? subtotal * ((validatePromo(appliedPromo) ?? 0) / 100) : 0
-  const shipping = subtotal > freeShippingThreshold ? 0 : shippingCost
-  const tax = (subtotal - promoDiscount) * taxRate
-  const total = subtotal - promoDiscount + shipping + tax
-
-  const formatPrice = (value: number) => `$${value.toFixed(2)}`
-
-  return (
-    <section className='py-8'>
-      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
-        {items.length === 0 ? (
-          <Card>
-            <CardContent className='py-12 text-center'>
-              <ShoppingBag className='text-muted-foreground mx-auto mb-4 size-16' />
-              <h2 className='mb-2 text-2xl font-semibold'>{emptyCartTitleLabel}</h2>
-              <p className='text-muted-foreground mb-6'>{emptyCartDescriptionLabel}</p>
-              <Button size='lg' className='h-10 px-8 cursor-pointer' onClick={onContinueShopping}>
-                {continueShoppingLabel}
-              </Button>
-            </CardContent>
-          </Card>
-        ) : (
-          <>
-            <div className='mb-8'>
-              <Button
-                variant='ghost'
-                size='sm'
-                className='mb-4 h-8 px-3 text-xs cursor-pointer'
-                onClick={onContinueShopping}
-              >
-                <ArrowLeft />
-                {continueShoppingLabel}
-              </Button>
-              <h1 className='text-3xl font-bold tracking-tight text-balance'>{titleLabel}</h1>
-              <p className='text-muted-foreground mt-2'>
-                {items.length} {itemsCountLabel}
-              </p>
-            </div>
-
-            <div className='grid gap-8 lg:grid-cols-3'>
-              <div className='lg:col-span-2'>
-                <Card>
-                  <CardHeader>
-                    <CardTitle>{cartItemsLabel}</CardTitle>
-                  </CardHeader>
-                  <CardContent className='flex flex-col gap-6'>
-                    {items.map((item, index) => (
-                      <ShoppingCart2ItemRow
-                        key={item.id}
-                        item={item}
-                        isLast={index === items.length - 1}
-                        onRemove={onRemove}
-                        onQuantityChange={onQuantityChange}
-                        onAddToWishlist={onAddToWishlist}
-                      />
-                    ))}
-                  </CardContent>
-                </Card>
-              </div>
-
-              <div className='lg:col-span-1'>
-                <Card className='lg:sticky lg:top-6'>
-                  <CardHeader>
-                    <CardTitle>{orderSummaryLabel}</CardTitle>
-                  </CardHeader>
-                  <CardContent className='flex flex-col gap-4'>
-                    <div className='flex flex-col gap-3 text-sm'>
-                      <div className='flex justify-between gap-4 flex-wrap'>
-                        <span className='flex-1'>
-                          {subtotalLabel} ({itemCount} {cartItemsLabel})
-                        </span>
-                        <span className='font-medium shrink-0'>{formatPrice(subtotal)}</span>
-                      </div>
-
-                      {savings > 0 ? (
-                        <div className='flex justify-between gap-4 text-success flex-wrap'>
-                          <span className='flex-1'>{savingsLabel}</span>
-                          <span className='font-medium shrink-0'>-{formatPrice(savings)}</span>
-                        </div>
-                      ) : null}
-
-                      {appliedPromo ? (
-                        <div className='flex justify-between gap-4 text-success flex-wrap'>
-                          <span className='flex-1'>{promoAppliedLabel.replace('{code}', appliedPromo)}</span>
-                          <span className='font-medium shrink-0'>-{formatPrice(promoDiscount)}</span>
-                        </div>
-                      ) : null}
-
-                      <div className='flex justify-between gap-4 flex-wrap'>
-                        <span className='flex-1'>{shippingLabel}</span>
-                        <span className='font-medium shrink-0'>
-                          {shipping === 0 ? freeShippingLabel : formatPrice(shipping)}
-                        </span>
-                      </div>
-
-                      <div className='flex justify-between gap-4 flex-wrap'>
-                        <span className='flex-1'>{taxLabel}</span>
-                        <span className='font-medium shrink-0'>{formatPrice(tax)}</span>
-                      </div>
-                    </div>
-
-                    <Separator />
-
-                    <div className='flex justify-between gap-4 text-lg font-semibold flex-wrap'>
-                      <span>{totalLabel}</span>
-                      <span className='shrink-0'>
-                        <ShoppingCart2SpinningCounter value={total} decimals={2} prefix='$' />
-                      </span>
-                    </div>
-
-                    <div className='flex flex-col gap-3'>
-                      <Input
-                        placeholder={promoPlaceholder}
-                        value={promoCode}
-                        onChange={e => setPromoCode(e.target.value)}
-                        aria-label={promoPlaceholder}
-                        className='h-9 flex-1'
-                      />
-                      <Button
-                        variant='outline'
-                        onClick={applyPromoCode}
-                        className='h-9 cursor-pointer px-4 py-2'
-                        disabled={!promoCode || !validatePromo}
-                        aria-label={applyPromoLabel}
-                      >
-                        <Tag />
-                      </Button>
-                    </div>
-
-                    {appliedPromo ? (
-                      <div className='flex items-center gap-2 text-sm text-success'>
-                        <Tag className='size-4' />
-                        {promoAppliedLabel.replace('{code}', appliedPromo)}
-                      </div>
-                    ) : null}
-
-                    <Button size='lg' className='h-10 w-full px-8 cursor-pointer' onClick={onCheckout}>
-                      {checkoutLabel}
-                    </Button>
-
-                    <div className='flex flex-col gap-3 text-sm'>
-                      <div className='flex items-center gap-2 text-success'>
-                        <Truck className='size-4' />
-                        <span>
-                          {shipping === 0
-                            ? freeShippingNoteLabel
-                            : freeShippingThresholdNoteLabel.replace('${threshold}', String(freeShippingThreshold))}
-                        </span>
-                      </div>
-                      <div className='text-muted-foreground flex items-center gap-2'>
-                        <Shield className='size-4' />
-                        <span>{secureCheckoutLabel}</span>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              </div>
-            </div>
-
-            {recommendations && recommendations.length > 0 ? (
-              <ShoppingCart2Recommendations
-                recommendations={recommendations}
-                title={recommendationsLabel}
-                onRecommendationClick={onRecommendationClick}
-              />
-            ) : null}
-          </>
-        )}
-      </div>
-    </section>
-  )
-}
-
-export default ShoppingCart2

package/src/blocks/e-commerce/shopping-carts/shopping-cart-3-spinning-counter.tsx

@@ -1,142 +0,0 @@
-'use client'
-
-import { useEffect, useRef } from 'react'
-
-import { cn } from '../../../lib/utils'
-
-const CELL_SIZE = 20
-const DURATION = 450
-const STAGGER = 60
-const SPINS = 1
-const SPIN_BLUR = 2
-
-const REEL_DIGITS = Array.from({ length: (SPINS + 1) * 10 }, (_, i) => i % 10)
-
-type ShoppingCart3SpinningCounterProps = {
-  value: number
-  decimals?: number
-  prefix?: string
-  className?: string
-  digitClassName?: string
-}
-
-export function ShoppingCart3SpinningCounter({
-  value,
-  decimals = 0,
-  prefix,
-  className,
-  digitClassName,
-}: ShoppingCart3SpinningCounterProps) {
-  const safeValue = Math.max(0, value)
-  const formatted = safeValue.toFixed(decimals)
-  const chars = formatted.split('')
-  const containerRef = useRef<HTMLSpanElement>(null)
-  const isFirstRender = useRef(true)
-
-  useEffect(() => {
-    const container = containerRef.current
-    if (!container) return
-
-    const strips = Array.from(container.querySelectorAll<HTMLElement>('[data-reel-strip]'))
-    const timeouts: number[] = []
-
-    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
-
-    strips.forEach((strip, index) => {
-      const digit = Number(strip.dataset.digit)
-      const delay = (strips.length - 1 - index) * STAGGER
-
-      if (isFirstRender.current || !strip.dataset.initialized || prefersReducedMotion) {
-        strip.style.transition = 'none'
-        strip.style.transform = `translateY(-${digit * CELL_SIZE}px)`
-        strip.style.filter = 'blur(0px)'
-        strip.dataset.initialized = 'true'
-        void strip.offsetHeight
-        return
-      }
-
-      const landingIndex = SPINS * 10 + digit
-      strip.style.transition = `transform ${DURATION}ms cubic-bezier(0.16, 1, 0.3, 1) ${delay}ms, filter ${DURATION}ms ease-out ${delay}ms`
-      strip.style.transform = `translateY(-${landingIndex * CELL_SIZE}px)`
-      strip.style.filter = `blur(${SPIN_BLUR}px)`
-
-      const settleTimeout = window.setTimeout(() => {
-        strip.style.filter = 'blur(0px)'
-      }, delay + 30)
-
-      const resetTimeout = window.setTimeout(() => {
-        strip.style.transition = 'none'
-        strip.style.transform = `translateY(-${digit * CELL_SIZE}px)`
-        void strip.offsetHeight
-      }, delay + DURATION + 30)
-
-      timeouts.push(settleTimeout, resetTimeout)
-    })
-
-    isFirstRender.current = false
-
-    return () => {
-      timeouts.forEach(window.clearTimeout)
-    }
-  }, [formatted])
-
-  return (
-    <span className='relative inline-flex items-center'>
-      <span className='sr-only'>{prefix}{formatted}</span>
-      <span
-        ref={containerRef}
-        className={cn('inline-flex items-center font-[inherit] tabular-nums', className)}
-        style={{ height: CELL_SIZE }}
-        aria-hidden='true'
-      >
-        {prefix ? (
-          <span
-            className={digitClassName}
-            style={{ display: 'inline-flex', alignItems: 'center', height: CELL_SIZE }}
-          >
-            {prefix}
-          </span>
-        ) : null}
-        {chars.map((char, index) => {
-          if (!/\d/.test(char)) {
-            return (
-              <span
-                key={index}
-                className={digitClassName}
-                style={{ display: 'inline-flex', alignItems: 'center', height: CELL_SIZE }}
-              >
-                {char}
-              </span>
-            )
-          }
-
-          return (
-            <span
-              key={index}
-              className='relative inline-block overflow-hidden'
-              style={{
-                height: CELL_SIZE,
-                maskImage: 'linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%)',
-                WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%)',
-              }}
-            >
-              <span data-reel-strip data-digit={char} className='flex flex-col will-change-[transform,filter]'>
-                {REEL_DIGITS.map((cellDigit, cellIndex) => (
-                  <span
-                    key={cellIndex}
-                    className={cn('flex items-center justify-center', digitClassName)}
-                    style={{ height: CELL_SIZE }}
-                  >
-                    {cellDigit}
-                  </span>
-                ))}
-              </span>
-            </span>
-          )
-        })}
-      </span>
-    </span>
-  )
-}
-
-export default ShoppingCart3SpinningCounter