@thorprovider/blocks 1.0.0 → 3.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/checkout-forms/checkout-form-types.ts

@@ -1,7 +0,0 @@
-export interface CheckoutFieldError {
-  message?: string
-}
-
-export type CheckoutFieldErrors<T extends string> = Partial<
-  Record<T, CheckoutFieldError[]>
->

package/src/blocks/e-commerce/navigation/back-to-top.test.tsx

@@ -1,27 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-
-import { BackToTop, backToTopPropsSchema, resolveScrollBehavior } from './back-to-top'
-
-describe('BackToTop', () => {
-  it('parses a valid props object', () => {
-    const result = backToTopPropsSchema.parse({ threshold: 300 })
-    expect(result.threshold).toBe(300)
-  })
-
-  it('accepts an empty props object', () => {
-    expect(() => backToTopPropsSchema.parse({})).not.toThrow()
-  })
-
-  it('uses an instant jump under reduced motion', () => {
-    expect(resolveScrollBehavior(true)).toBe('auto')
-  })
-
-  it('uses a smooth scroll when motion is allowed', () => {
-    expect(resolveScrollBehavior(false)).toBe('smooth')
-  })
-
-  it('renders nothing before it becomes visible', () => {
-    expect(renderToStaticMarkup(<BackToTop />)).toBe('')
-  })
-})

package/src/blocks/e-commerce/navigation/back-to-top.tsx

@@ -1,71 +0,0 @@
-'use client'
-
-import { ArrowUp } from 'lucide-react'
-import { useEffect, useState } from 'react'
-import { z } from 'zod'
-
-import { cn } from '../../../lib/utils'
-
-export const backToTopPropsSchema = z.object({
-  threshold: z.number().optional(),
-  label: z.string().optional(),
-  className: z.string().optional(),
-})
-
-export type BackToTopProps = z.infer<typeof backToTopPropsSchema>
-
-const DEFAULT_THRESHOLD = 400
-
-/**
- * Resolve the scroll behavior for a back-to-top activation. Pure so it can be
- * unit-tested without a DOM: reduced motion yields an instant jump.
- */
-export function resolveScrollBehavior(
-  prefersReducedMotion: boolean,
-): 'auto' | 'smooth' {
-  return prefersReducedMotion ? 'auto' : 'smooth'
-}
-
-/**
- * Back-to-top control that appears once the page is scrolled past `threshold`
- * and returns the viewport to the top. Honors `prefers-reduced-motion` (instant
- * jump instead of a smooth scroll). Framework-agnostic; icon-only with an
- * accessible label.
- */
-export function BackToTop({
-  threshold = DEFAULT_THRESHOLD,
-  label = 'Back to top',
-  className,
-}: BackToTopProps) {
-  const [visible, setVisible] = useState(false)
-
-  useEffect(() => {
-    const onScroll = () => setVisible(window.scrollY > threshold)
-    onScroll()
-    window.addEventListener('scroll', onScroll, { passive: true })
-    return () => window.removeEventListener('scroll', onScroll)
-  }, [threshold])
-
-  if (!visible) return null
-
-  const handleClick = () => {
-    const reduce =
-      typeof window !== 'undefined' &&
-      window.matchMedia('(prefers-reduced-motion: reduce)').matches
-    window.scrollTo({ top: 0, behavior: resolveScrollBehavior(reduce) })
-  }
-
-  return (
-    <button
-      type="button"
-      onClick={handleClick}
-      aria-label={label}
-      className={cn(
-        'fixed bottom-4 right-4 z-40 inline-flex size-11 items-center justify-center rounded-full border bg-card text-foreground shadow-lg transition-colors hover:bg-secondary',
-        className,
-      )}
-    >
-      <ArrowUp className="size-5" aria-hidden="true" />
-    </button>
-  )
-}

package/src/blocks/e-commerce/navigation/breadcrumb.test.tsx

@@ -1,174 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-
-import { Breadcrumb, breadcrumbItemSchema, breadcrumbPropsSchema } from './breadcrumb'
-
-function countNestedListItems(html: string): number {
-  const tokens = html.match(/<\/?li\b[^>]*>/g) ?? []
-  let depth = 0
-  let nested = 0
-  for (const token of tokens) {
-    if (token.startsWith('</')) {
-      depth = Math.max(0, depth - 1)
-    } else {
-      if (depth > 0) nested += 1
-      depth += 1
-    }
-  }
-  return nested
-}
-
-describe('Breadcrumb', () => {
-  it('parses a valid props object', () => {
-    const result = breadcrumbPropsSchema.parse({
-      items: [{ label: 'Home', href: '/' }, { label: 'Current' }],
-    })
-    expect(result.items).toHaveLength(2)
-  })
-
-  it('rejects a maxItems below 2', () => {
-    expect(() =>
-      breadcrumbPropsSchema.parse({ items: [], maxItems: 1 }),
-    ).toThrow()
-  })
-
-  it('requires a label on each item', () => {
-    expect(() => breadcrumbItemSchema.parse({ href: '/' })).toThrow()
-  })
-
-  it('renders nothing when there are no items', () => {
-    expect(renderToStaticMarkup(<Breadcrumb items={[]} />)).toBe('')
-  })
-
-  it('renders nothing when every label is blank', () => {
-    const html = renderToStaticMarkup(
-      <Breadcrumb items={[{ label: '  ' }, { label: '' }]} />,
-    )
-    expect(html).toBe('')
-  })
-
-  it('renders a labelled landmark with the current item as a non-link', () => {
-    const html = renderToStaticMarkup(
-      <Breadcrumb
-        items={[
-          { label: 'Home', href: '/' },
-          { label: 'Tools', href: '/categories/tools' },
-          { label: 'Drill' },
-        ]}
-      />,
-    )
-    expect(html).toContain('aria-label="Breadcrumb"')
-    expect(html).toContain('aria-current="page"')
-    expect(html).toContain('href="/categories/tools"')
-    expect(html).not.toContain('href="Drill"')
-    expect(html).toContain('Drill')
-  })
-
-  it('honours a custom landmark label', () => {
-    const html = renderToStaticMarkup(
-      <Breadcrumb
-        ariaLabel="You are here"
-        items={[{ label: 'Home', href: '/' }, { label: 'Current' }]}
-      />,
-    )
-    expect(html).toContain('aria-label="You are here"')
-  })
-
-  it('wraps the trail in the shared page container', () => {
-    const html = renderToStaticMarkup(
-      <Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Current' }]} />,
-    )
-    expect(html).toContain('mx-auto')
-    expect(html).toContain('max-w-7xl')
-    expect(html).toContain('px-4')
-  })
-
-  it('merges a custom className onto the container', () => {
-    const html = renderToStaticMarkup(
-      <Breadcrumb
-        className="bg-primary text-primary-foreground"
-        items={[{ label: 'Home', href: '/' }, { label: 'Current' }]}
-      />,
-    )
-    expect(html).toContain('bg-primary')
-    expect(html).toContain('max-w-7xl')
-  })
-
-  it('lets a custom className override the container utility', () => {
-    const html = renderToStaticMarkup(
-      <Breadcrumb
-        className="px-0"
-        items={[{ label: 'Home', href: '/' }, { label: 'Current' }]}
-      />,
-    )
-    expect(html).toContain('px-0')
-    expect(html).not.toContain('px-4')
-  })
-
-  it('collapses intermediate levels behind an ellipsis past maxItems', () => {
-    const html = renderToStaticMarkup(
-      <Breadcrumb
-        maxItems={3}
-        items={[
-          { label: 'Home', href: '/' },
-          { label: 'A', href: '/a' },
-          { label: 'B', href: '/b' },
-          { label: 'C', href: '/c' },
-          { label: 'Current' },
-        ]}
-      />,
-    )
-    expect(html).toContain('data-slot="breadcrumb-ellipsis"')
-    expect(html).toContain('Current')
-    expect(html).not.toContain('>A<')
-  })
-
-  it('truncates long labels', () => {
-    const html = renderToStaticMarkup(
-      <Breadcrumb
-        items={[
-          { label: 'Home', href: '/' },
-          { label: 'A very long category name that would overflow the trail' },
-        ]}
-      />,
-    )
-    expect(html).toContain('max-w-[24ch]')
-    expect(html).toContain('truncate')
-  })
-
-  it('renders a mobile back link to the parent and hides the full list at base', () => {
-    const html = renderToStaticMarkup(
-      <Breadcrumb
-        items={[
-          { label: 'Home', href: '/' },
-          { label: 'Tools', href: '/categories/tools' },
-          { label: 'Drill' },
-        ]}
-      />,
-    )
-    expect(html).toContain('md:hidden')
-    expect(html).toContain('href="/categories/tools"')
-    expect(html).toContain('hidden md:flex')
-  })
-
-  it('renders no back link for a single-level trail', () => {
-    const html = renderToStaticMarkup(
-      <Breadcrumb items={[{ label: 'Only' }]} />,
-    )
-    expect(html).not.toContain('md:hidden')
-  })
-
-  it('renders separators as siblings of items, never nesting list items', () => {
-    const html = renderToStaticMarkup(
-      <Breadcrumb
-        items={[
-          { label: 'Home', href: '/' },
-          { label: 'Tools', href: '/categories/tools' },
-          { label: 'Drill' },
-        ]}
-      />,
-    )
-    expect(html).toContain('data-slot="breadcrumb-separator"')
-    expect(countNestedListItems(html)).toBe(0)
-  })
-})