@thorprovider/blocks 0.1.3 → 2.0.0

package/src/blocks/e-commerce/checkout-forms/checkout-form-3.tsx

@@ -1,392 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { ChevronLeft, ChevronRight, Lock } from 'lucide-react'
-
-import type { PaymentMethod } from '@thorprovider/types'
-
-import { Button } from '../../../ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
-
-import { CheckoutForm3InformationStep } from './checkout-form-3-information-step'
-import { CheckoutForm3OrderSummary } from './checkout-form-3-order-summary'
-import { CheckoutForm3PaymentStep } from './checkout-form-3-payment-step'
-import { CheckoutForm3Progress, CHECKOUT_FORM_3_STEP_ICONS } from './checkout-form-3-progress'
-import { CheckoutForm3ReviewStep } from './checkout-form-3-review-step'
-import { CheckoutForm3ShippingStep } from './checkout-form-3-shipping-step'
-
-export interface CheckoutForm3CartItem {
-  id: number
-  name: string
-  price: number
-  quantity: number
-  image: string
-}
-
-export interface CheckoutForm3ShippingMethod {
-  id: string
-  name: string
-  description: string
-  cost: number
-}
-
-export interface CheckoutForm3CountryOption {
-  value: string
-  label: string
-}
-
-export interface CheckoutForm3Step {
-  id: number
-  name: string
-}
-
-export interface CheckoutForm3FormData {
-  email: string
-  firstName: string
-  lastName: string
-  phone: string
-  address: string
-  apartment: string
-  city: string
-  state: string
-  zipCode: string
-  country: string
-  shippingMethod: string
-  paymentMethod: string
-  cardNumber: string
-  expiryDate: string
-  cvv: string
-  cardName: string
-  billingAddress: string
-  newsletter: boolean
-  saveInfo: boolean
-}
-
-export type CheckoutForm3ChangeHandler = (
-  field: keyof CheckoutForm3FormData,
-  value: string | boolean
-) => void
-
-export interface CheckoutForm3Props {
-  cartItems: CheckoutForm3CartItem[]
-  shippingMethods: CheckoutForm3ShippingMethod[]
-  paymentMethods?: PaymentMethod[]
-  taxRate?: number
-  countryOptions?: CheckoutForm3CountryOption[]
-  steps?: CheckoutForm3Step[]
-  currencySymbol?: string
-  titleLabel?: string
-  subtitleLabel?: string
-  backLabel?: string
-  continueLabel?: string
-  placeOrderLabel?: string
-  shippingAddressLabel?: string
-  shippingMethodLabel?: string
-  paymentLabel?: string
-  noMethodsLabel?: string
-  securePaymentLabel?: string
-  emailLabel?: string
-  firstNameLabel?: string
-  lastNameLabel?: string
-  phoneLabel?: string
-  addressLabel?: string
-  apartmentLabel?: string
-  cityLabel?: string
-  stateLabel?: string
-  zipCodeLabel?: string
-  countryLabel?: string
-  cardNumberLabel?: string
-  expiryLabel?: string
-  cvvLabel?: string
-  cardNameLabel?: string
-  newsletterLabel?: string
-  saveInfoLabel?: string
-  orderSummaryLabel?: string
-  subtotalLabel?: string
-  shippingLabel?: string
-  taxLabel?: string
-  totalLabel?: string
-  freeLabel?: string
-  orderReviewLabel?: string
-  contactReviewLabel?: string
-  shipToReviewLabel?: string
-  paymentReviewLabel?: string
-  shippingReviewLabel?: string
-  onComplete?: (data: CheckoutForm3FormData) => void
-  onNextStep?: (step: number) => void
-  onPreviousStep?: (step: number) => void
-  onFieldChange?: CheckoutForm3ChangeHandler
-}
-
-const DEFAULT_COUNTRY_OPTIONS: CheckoutForm3CountryOption[] = [
-  { value: 'US', label: 'Estados Unidos' },
-  { value: 'CA', label: 'Canadá' },
-  { value: 'UK', label: 'Reino Unido' },
-  { value: 'AU', label: 'Australia' },
-]
-
-const DEFAULT_STEPS: CheckoutForm3Step[] = [
-  { id: 1, name: 'Información' },
-  { id: 2, name: 'Envío' },
-  { id: 3, name: 'Pago' },
-  { id: 4, name: 'Revisión' },
-]
-
-export default function CheckoutForm3({
-  cartItems,
-  shippingMethods,
-  paymentMethods = [],
-  taxRate = 0,
-  countryOptions = DEFAULT_COUNTRY_OPTIONS,
-  steps = DEFAULT_STEPS,
-  currencySymbol = '$',
-  titleLabel = 'Checkout seguro',
-  subtitleLabel,
-  backLabel = 'Anterior',
-  continueLabel = 'Continuar',
-  placeOrderLabel = 'Realizar pedido',
-  shippingAddressLabel = 'Dirección de envío',
-  shippingMethodLabel = 'Método de envío',
-  paymentLabel = 'Método de pago',
-  noMethodsLabel = 'No hay métodos de pago disponibles para esta región.',
-  securePaymentLabel = 'Tu información de pago está cifrada y es segura',
-  emailLabel = 'Correo electrónico',
-  firstNameLabel = 'Nombre',
-  lastNameLabel = 'Apellidos',
-  phoneLabel = 'Teléfono',
-  addressLabel = 'Dirección',
-  apartmentLabel = 'Apartamento, suite, etc.',
-  cityLabel = 'Ciudad',
-  stateLabel = 'Estado/Provincia',
-  zipCodeLabel = 'Código postal',
-  countryLabel = 'País',
-  cardNumberLabel = 'Número de tarjeta',
-  expiryLabel = 'Fecha de vencimiento',
-  cvvLabel = 'CVV',
-  cardNameLabel = 'Nombre en la tarjeta',
-  newsletterLabel = 'Quiero recibir novedades y ofertas',
-  saveInfoLabel = 'Guardar esta información para la próxima vez',
-  orderSummaryLabel = 'Resumen del pedido',
-  subtotalLabel = 'Subtotal',
-  shippingLabel = 'Envío',
-  taxLabel = 'Impuestos',
-  totalLabel = 'Total',
-  freeLabel = 'Gratis',
-  orderReviewLabel = 'Revisión del pedido',
-  contactReviewLabel = 'Contacto',
-  shipToReviewLabel = 'Enviar a',
-  paymentReviewLabel = 'Pago',
-  shippingReviewLabel = 'Envío',
-  onComplete,
-  onNextStep,
-  onPreviousStep,
-  onFieldChange,
-}: CheckoutForm3Props) {
-  const [currentStep, setCurrentStep] = useState(1)
-  const [formData, setFormData] = useState<CheckoutForm3FormData>(() => ({
-    email: '',
-    firstName: '',
-    lastName: '',
-    phone: '',
-    address: '',
-    apartment: '',
-    city: '',
-    state: '',
-    zipCode: '',
-    country: countryOptions[0]?.value ?? '',
-    shippingMethod: shippingMethods[0]?.id ?? '',
-    paymentMethod: paymentMethods[0]?.id ?? '',
-    cardNumber: '',
-    expiryDate: '',
-    cvv: '',
-    cardName: '',
-    billingAddress: 'same',
-    newsletter: false,
-    saveInfo: false,
-  }))
-
-  const subtotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0)
-  const shippingCosts = Object.fromEntries(
-    shippingMethods.map(method => [method.id, method.cost]),
-  ) as Record<string, number>
-  const shipping = shippingCosts[formData.shippingMethod] ?? 0
-  const tax = subtotal * taxRate
-  const total = subtotal + shipping + tax
-
-  const handleInputChange: CheckoutForm3ChangeHandler = (field, value) => {
-    setFormData(prev => ({ ...prev, [field]: value }))
-    onFieldChange?.(field, value)
-  }
-
-  const handleNextStep = () => {
-    const next = Math.min(currentStep + 1, steps.length)
-    setCurrentStep(next)
-    onNextStep?.(next)
-  }
-
-  const handlePreviousStep = () => {
-    const next = Math.max(currentStep - 1, 1)
-    setCurrentStep(next)
-    onPreviousStep?.(next)
-  }
-
-  /** Continue stays disabled until the fields this step is responsible for are filled in. */
-  const isStepComplete = (stepNumber: number) => {
-    if (stepNumber < currentStep) return true
-    if (stepNumber === 1) return Boolean(formData.email && formData.firstName && formData.lastName)
-    if (stepNumber === 2) return Boolean(formData.address && formData.city && formData.zipCode)
-    if (stepNumber === 3) {
-      const selectedMethod = paymentMethods.find(method => method.id === formData.paymentMethod)
-      if (!formData.paymentMethod) return false
-      return selectedMethod?.type === 'card' ? Boolean(formData.cardNumber) : true
-    }
-    return false
-  }
-
-  const CurrentStepIcon = CHECKOUT_FORM_3_STEP_ICONS[currentStep - 1]
-
-  return (
-    <section className='py-8'>
-      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
-        <div className='mb-8'>
-          <h1 className='text-3xl font-bold tracking-tight text-balance'>{titleLabel}</h1>
-          <p className='text-muted-foreground mt-2'>
-            {subtitleLabel ?? `Completa tu compra en ${steps.length} sencillos pasos`}
-          </p>
-        </div>
-
-        <div className='grid gap-8 lg:grid-cols-3'>
-          <div className='lg:col-span-2'>
-            <CheckoutForm3Progress
-              steps={steps}
-              currentStep={currentStep}
-              isStepComplete={isStepComplete}
-            />
-
-            <Card>
-              <CardHeader>
-                <CardTitle className='flex items-center gap-2'>
-                  {CurrentStepIcon ? <CurrentStepIcon className='size-5' aria-hidden='true' /> : null}
-                  {steps[currentStep - 1].name}
-                </CardTitle>
-              </CardHeader>
-              <CardContent className='flex flex-col gap-6'>
-                {currentStep === 1 ? (
-                  <CheckoutForm3InformationStep
-                    formData={formData}
-                    onChange={handleInputChange}
-                    emailLabel={emailLabel}
-                    firstNameLabel={firstNameLabel}
-                    lastNameLabel={lastNameLabel}
-                    phoneLabel={phoneLabel}
-                    newsletterLabel={newsletterLabel}
-                  />
-                ) : null}
-
-                {currentStep === 2 ? (
-                  <CheckoutForm3ShippingStep
-                    formData={formData}
-                    onChange={handleInputChange}
-                    countryOptions={countryOptions}
-                    shippingMethods={shippingMethods}
-                    shippingAddressLabel={shippingAddressLabel}
-                    shippingMethodLabel={shippingMethodLabel}
-                    addressLabel={addressLabel}
-                    apartmentLabel={apartmentLabel}
-                    cityLabel={cityLabel}
-                    stateLabel={stateLabel}
-                    zipCodeLabel={zipCodeLabel}
-                    countryLabel={countryLabel}
-                    freeLabel={freeLabel}
-                    currencySymbol={currencySymbol}
-                  />
-                ) : null}
-
-                {currentStep === 3 ? (
-                  <CheckoutForm3PaymentStep
-                    formData={formData}
-                    onChange={handleInputChange}
-                    paymentMethods={paymentMethods}
-                    paymentLabel={paymentLabel}
-                    noMethodsLabel={noMethodsLabel}
-                    cardNumberLabel={cardNumberLabel}
-                    expiryLabel={expiryLabel}
-                    cvvLabel={cvvLabel}
-                    cardNameLabel={cardNameLabel}
-                    securePaymentLabel={securePaymentLabel}
-                  />
-                ) : null}
-
-                {currentStep === 4 ? (
-                  <CheckoutForm3ReviewStep
-                    formData={formData}
-                    onChange={handleInputChange}
-                    shippingMethods={shippingMethods}
-                    paymentMethods={paymentMethods}
-                    orderReviewLabel={orderReviewLabel}
-                    contactReviewLabel={contactReviewLabel}
-                    shipToReviewLabel={shipToReviewLabel}
-                    paymentReviewLabel={paymentReviewLabel}
-                    shippingReviewLabel={shippingReviewLabel}
-                    saveInfoLabel={saveInfoLabel}
-                  />
-                ) : null}
-
-                <div className='flex justify-between pt-6'>
-                  <Button
-                    type='button'
-                    variant='outline'
-                    className='h-9 px-4 py-2 cursor-pointer'
-                    onClick={handlePreviousStep}
-                    disabled={currentStep === 1}
-                  >
-                    <ChevronLeft data-icon='inline-start' />
-                    {backLabel}
-                  </Button>
-
-                  {currentStep < steps.length ? (
-                    <Button
-                      type='button'
-                      onClick={handleNextStep}
-                      className='h-9 px-4 py-2 cursor-pointer'
-                      disabled={!isStepComplete(currentStep)}
-                    >
-                      {continueLabel}
-                      <ChevronRight data-icon='inline-end' />
-                    </Button>
-                  ) : (
-                    <Button
-                      type='button'
-                      className='h-9 px-4 py-2 min-w-32 cursor-pointer'
-                      onClick={() => onComplete?.(formData)}
-                    >
-                      <Lock data-icon='inline-start' />
-                      {placeOrderLabel}
-                    </Button>
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-
-          <div className='lg:col-span-1'>
-            <CheckoutForm3OrderSummary
-              items={cartItems}
-              subtotal={subtotal}
-              shipping={shipping}
-              tax={tax}
-              total={total}
-              currencySymbol={currencySymbol}
-              orderSummaryLabel={orderSummaryLabel}
-              subtotalLabel={subtotalLabel}
-              shippingLabel={shippingLabel}
-              taxLabel={taxLabel}
-              totalLabel={totalLabel}
-              freeLabel={freeLabel}
-            />
-          </div>
-        </div>
-      </div>
-    </section>
-  )
-}

package/src/blocks/e-commerce/product-categories/avatar-group.tsx

@@ -1,86 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { useEffect, useState } from 'react'
-
-import { cn } from '../../../lib/utils'
-
-/**
- * @title Avatar group
- * @description Overlapping avatar stack whose neighbours lift with a distance falloff on hover.
- *
- * Adapted from Transitions.dev "Avatar group hover".
- *
- * A dock, not a switch. Lifting only the hovered item makes the row twitch — one element jumps
- * while the rest sit rigid — so the response falls off with distance: the neighbour rises about
- * half as far, the next barely at all. The falloff is what makes the row read as one soft object.
- *
- * The return is deliberately springier than the approach: a strong overshoot curve on the way back
- * reads as elastic rather than mechanical.
- */
-const LIFT = -4
-const FALLOFF = 0.45
-const ACTIVE_SCALE = 1.05
-const DURATION = 320
-const EASE_IN = 'cubic-bezier(0.22, 1, 0.36, 1)'
-const EASE_OUT = 'cubic-bezier(0.34, 3.85, 0.64, 1)'
-
-export function AvatarGroup({
-  children,
-  className,
-  overlap = '-ml-2',
-}: {
-  children: React.ReactNode
-  className?: string
-  /** Negative margin applied to every item but the first. Set to `''` for a non-overlapping row. */
-  overlap?: string
-}) {
-  const items = React.Children.toArray(children)
-  const [activeIndex, setActiveIndex] = useState<number | null>(null)
-  const [reducedMotion, setReducedMotion] = useState(false)
-
-  useEffect(() => {
-    const query = window.matchMedia('(prefers-reduced-motion: reduce)')
-    const sync = () => setReducedMotion(query.matches)
-
-    sync()
-    query.addEventListener('change', sync)
-    return () => query.removeEventListener('change', sync)
-  }, [])
-
-  const itemStyle = (index: number): React.CSSProperties | undefined => {
-    if (reducedMotion) {
-      return undefined
-    }
-
-    const isActive = index === activeIndex
-    const shift = activeIndex === null ? 0 : LIFT * FALLOFF ** Math.abs(index - activeIndex)
-
-    return {
-      // translateY before scale, so scaling never amplifies the lift distance.
-      transform: `translateY(${shift.toFixed(3)}px) scale(${isActive ? ACTIVE_SCALE : 1})`,
-      transition: `transform ${DURATION}ms ${activeIndex === null ? EASE_OUT : EASE_IN}`,
-      willChange: 'transform',
-      // A lifted item has to sit above the neighbour overlapping it, or the lift happens underneath.
-      zIndex: isActive ? 1 : undefined,
-    }
-  }
-
-  return (
-    <div className={cn('flex', className)} onMouseLeave={() => setActiveIndex(null)}>
-      {items.map((child, index) => (
-        <div
-          // eslint-disable-next-line react/no-array-index-key -- position is the identity here
-          key={index}
-          className={cn('relative', index > 0 && overlap)}
-          style={itemStyle(index)}
-          onMouseEnter={() => setActiveIndex(index)}
-        >
-          {child}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-export default AvatarGroup

package/src/blocks/e-commerce/product-categories/product-category-1.tsx

@@ -1,126 +0,0 @@
-import { Button } from '../../../ui/button'
-import { Card, CardContent } from '../../../ui/card'
-import { cn } from '../../../lib/utils'
-import {
-  ArrowRight,
-  BatteryCharging,
-  Cable,
-  Camera,
-  Lightbulb,
-  ShieldCheck,
-  Smartphone,
-  Sparkles,
-  Wrench,
-  X,
-} from 'lucide-react'
-import type { CTA } from '../../../lib/types'
-
-const categoryIcons = {
-  Smartphone,
-  BatteryCharging,
-  Wrench,
-  Camera,
-  Cable,
-  ShieldCheck,
-  Sparkles,
-  Lightbulb,
-} as const
-
-export type ProductCategory1CategoryIcon =
-  | 'Smartphone'
-  | 'BatteryCharging'
-  | 'Wrench'
-  | 'Camera'
-  | 'Cable'
-  | 'ShieldCheck'
-  | 'Sparkles'
-  | 'Lightbulb'
-
-export interface ProductCategory1Category {
-  id: string
-  name: string
-  subtitle: string
-  icon: ProductCategory1CategoryIcon
-}
-
-export interface ProductCategory1Props {
-  badge?: string
-  title: string
-  description?: string
-  cta?: CTA
-  categories: ProductCategory1Category[]
-  className?: string
-}
-
-export function ProductCategory1({
-  badge,
-  title,
-  description,
-  cta,
-  categories,
-  className,
-}: ProductCategory1Props) {
-  return (
-    <section className={cn('relative w-full py-12 md:py-16 lg:py-20', className)}>
-      <div className='relative z-10 mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
-        <header className='mx-auto mb-12 max-w-5xl'>
-          <div className='flex flex-col items-center justify-between gap-6 md:flex-row md:items-start md:text-start'>
-            <div className='flex flex-col items-center gap-4 text-center md:items-start md:text-start'>
-              {badge ? (
-                <div className='inline-flex'>
-                  <span className='bg-secondary/80 text-secondary-foreground rounded-full px-4 py-1.5 text-sm font-medium'>
-                    {badge}
-                  </span>
-                </div>
-              ) : null}
-              <div className='flex flex-col gap-2'>
-                <h2 className='text-foreground text-3xl font-bold tracking-tight md:text-4xl'>{title}</h2>
-                {description ? (
-                  <p className='text-muted-foreground max-w-2xl'>{description}</p>
-                ) : null}
-              </div>
-            </div>
-            {cta ? (
-              <Button
-                className='h-10 cursor-pointer whitespace-nowrap px-4'
-                size='lg'
-                asChild
-              >
-                <a href={cta.href}>
-                  {cta.label}
-                  <ArrowRight />
-                </a>
-              </Button>
-            ) : null}
-          </div>
-        </header>
-
-        <div className='mx-auto grid max-w-5xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4'>
-          {categories.map(category => {
-            const Icon = categoryIcons[category.icon] ?? X
-            return (
-              <Card
-                key={category.id}
-                className='group relative overflow-hidden py-6 px-2 shadow-xs transition-all hover:shadow-md'
-              >
-                <CardContent>
-                  <div className='flex flex-col gap-4'>
-                    <div className='bg-secondary/80 text-secondary-foreground flex size-12 items-center justify-center rounded-lg'>
-                      <Icon className='size-5' strokeWidth={1.5} />
-                    </div>
-                    <div>
-                      <h3 className='text-foreground text-lg font-semibold'>{category.name}</h3>
-                      <p className='text-muted-foreground text-sm'>{category.subtitle}</p>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            )
-          })}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-export default ProductCategory1

package/src/blocks/e-commerce/product-categories/product-category-2.test.tsx

@@ -1,51 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-import {
-  ProductCategory2,
-  type ProductCategory2Category,
-} from './product-category-2'
-
-const base: ProductCategory2Category = {
-  id: 'cat-1',
-  name: 'Herramientas',
-  description: 'Taladros y accesorios',
-  image: '/products/drill.png',
-  trending: false,
-}
-
-const render = (category: ProductCategory2Category) =>
-  renderToStaticMarkup(<ProductCategory2 categories={[category]} />)
-
-// The count is the only text node that ends in "items" inside a span (the
-// `items-center` utility lives in a class attribute and is never followed by
-// `</span>`).
-const hasItemCount = (html: string) => html.includes('items</span>')
-
-describe('ProductCategory2 — optional itemCount', () => {
-  it('renders no count when itemCount is omitted (unknown projection)', () => {
-    const html = render(base)
-    expect(hasItemCount(html)).toBe(false)
-    // The tile itself still renders.
-    expect(html).toContain('Herramientas')
-    expect(html).toContain('Browse')
-  })
-
-  it('preserves a real zero count', () => {
-    const html = render({ ...base, itemCount: 0 })
-    expect(html).toContain('0 items</span>')
-  })
-
-  it('renders a positive count', () => {
-    const html = render({ ...base, itemCount: 7 })
-    expect(html).toContain('7 items</span>')
-  })
-
-  it('omits a negative count', () => {
-    expect(hasItemCount(render({ ...base, itemCount: -1 }))).toBe(false)
-  })
-
-  it('omits a non-finite count', () => {
-    expect(hasItemCount(render({ ...base, itemCount: Number.NaN }))).toBe(false)
-    expect(hasItemCount(render({ ...base, itemCount: Number.POSITIVE_INFINITY }))).toBe(false)
-  })
-})