@thorprovider/blocks 2.0.0 → 3.0.1

package/src/blocks/e-commerce/navigation/storefront-navbar-cart-sheet.test.tsx

@@ -1,204 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-import { StorefrontNavbarCartSheet, type CartItem } from './storefront-navbar-cart-sheet'
-
-const items: CartItem[] = [
-  { id: 'line_1', name: 'Taladro', variant: 'Rojo', price: 45, qty: 2, image: 'https://cdn.example/t.jpg' },
-]
-
-const formatMoney = (money: { amount: string; currencyCode: string }) =>
-  `${money.currencyCode} ${money.amount}`
-
-const noop = () => {}
-
-describe('StorefrontNavbarCartSheet — authoritative subtotal', () => {
-  it('never renders a fake zero for a supplied but absent/malformed subtotal', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbarCartSheet
-        items={items}
-        onQtyChange={noop}
-        onRemove={noop}
-        subtotal={{ amount: '', currencyCode: 'USD' }}
-        formatMoney={formatMoney}
-      />,
-    )
-    expect(html).not.toContain('USD 0')
-    expect(html).toContain('—')
-  })
-
-  it('preserves a legitimate zero subtotal', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbarCartSheet
-        items={items}
-        onQtyChange={noop}
-        onRemove={noop}
-        subtotal={{ amount: '0', currencyCode: 'USD' }}
-        formatMoney={formatMoney}
-      />,
-    )
-    expect(html).toContain('USD 0')
-    expect(html).not.toContain('—')
-  })
-
-  it('falls back to the legacy local subtotal only when none is supplied', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbarCartSheet
-        items={items}
-        onQtyChange={noop}
-        onRemove={noop}
-        formatPrice={value => `$${value.toFixed(2)}`}
-      />,
-    )
-    expect(html).toContain('$90.00')
-  })
-})
-
-describe('StorefrontNavbarCartSheet — canonical line amounts', () => {
-  it('renders the canonical backend line amount in its currency, not price times qty', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbarCartSheet
-        items={[{ ...items[0], price: 0, lineTotal: { amount: '90.00', currencyCode: 'EUR' } }]}
-        onQtyChange={noop}
-        onRemove={noop}
-        canonical
-        formatMoney={formatMoney}
-      />,
-    )
-    expect(html).toContain('EUR 90.00')
-    expect(html).not.toContain('USD 0')
-  })
-
-  it('never falls back to a numeric amount when a canonical line amount is missing', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbarCartSheet
-        items={[{ ...items[0], price: 45, lineTotal: undefined }]}
-        onQtyChange={noop}
-        onRemove={noop}
-        canonical
-        formatPrice={value => `$${value.toFixed(2)}`}
-      />,
-    )
-    expect(html).not.toContain('$90.00')
-    expect(html).toContain('—')
-  })
-
-  it('shows the unavailable label for a malformed canonical line amount', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbarCartSheet
-        items={[{ ...items[0], lineTotal: { amount: '', currencyCode: 'USD' } }]}
-        onQtyChange={noop}
-        onRemove={noop}
-        canonical
-        formatMoney={formatMoney}
-      />,
-    )
-    expect(html).not.toContain('USD 0')
-    expect(html).toContain('—')
-  })
-
-  it('preserves legacy numeric rendering when canonical mode is omitted', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbarCartSheet
-        items={[{ ...items[0], lineTotal: { amount: '90.00', currencyCode: 'EUR' } }]}
-        onQtyChange={noop}
-        onRemove={noop}
-        formatPrice={value => `$${value.toFixed(2)}`}
-      />,
-    )
-    expect(html).toContain('$90.00')
-    expect(html).not.toContain('EUR 90.00')
-  })
-})
-
-describe('StorefrontNavbarCartSheet — read/mutation lifecycle', () => {
-  it('shows a pending state instead of claiming an empty cart', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbarCartSheet items={[]} onQtyChange={noop} onRemove={noop} state='pending' />,
-    )
-    expect(html).toContain('Actualizando el carrito')
-    expect(html).not.toContain('Your cart is empty')
-  })
-
-  it('shows a recoverable error state with its retry action', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbarCartSheet
-        items={items}
-        onQtyChange={noop}
-        onRemove={noop}
-        state='error'
-        errorLabel='No se pudo leer el carrito.'
-        retryLabel='Reintentar'
-        onRetry={noop}
-      />,
-    )
-    expect(html).toContain('No se pudo leer el carrito.')
-    expect(html).toContain('Reintentar')
-    expect(html).toContain('role="alert"')
-  })
-
-  it('disables mutation controls while pending', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbarCartSheet items={items} onQtyChange={noop} onRemove={noop} state='pending' />,
-    )
-    expect(html).toContain('aria-label="Increase quantity, Taladro"')
-    expect(html).toContain('disabled')
-  })
-})
-
-describe('StorefrontNavbarCartSheet — action availability', () => {
-  it('suppresses the checkout action when checkout is not installed', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbarCartSheet
-        items={items}
-        onQtyChange={noop}
-        onRemove={noop}
-        checkoutUnavailable
-        onCheckout={noop}
-      />,
-    )
-    expect(html).not.toContain('>Checkout</button>')
-    expect(html).toContain('View cart')
-  })
-
-  it('disables the checkout action while the cart is not ready', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbarCartSheet items={items} onQtyChange={noop} onRemove={noop} checkoutDisabled onCheckout={noop} />,
-    )
-    expect(html).toContain('>Checkout</button>')
-    expect(html).toMatch(/disabled[^>]*>Checkout<\/button>/)
-  })
-
-  it('suppresses the review action when the cart view is not installed', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbarCartSheet
-        items={items}
-        onQtyChange={noop}
-        onRemove={noop}
-        viewCartUnavailable
-        onViewCart={noop}
-      />,
-    )
-    expect(html).not.toContain('View cart')
-  })
-})
-
-describe('StorefrontNavbarCartSheet — accessibility', () => {
-  it('names the line mutation controls', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbarCartSheet items={items} onQtyChange={noop} onRemove={noop} />,
-    )
-    expect(html).toMatch(/aria-label="[^"]*(Increase|Decrease|Aumentar|Disminuir)[^"]*"/)
-    expect(html).toMatch(/aria-label="[^"]*(Remove|Quitar)[^"]*"/)
-  })
-
-  it('announces pending reads politely and errors as an alert', () => {
-    const pending = renderToStaticMarkup(
-      <StorefrontNavbarCartSheet items={[]} onQtyChange={noop} onRemove={noop} state='pending' />,
-    )
-    expect(pending).toMatch(/role="status"[^>]*aria-live="polite"/)
-    const error = renderToStaticMarkup(
-      <StorefrontNavbarCartSheet items={items} onQtyChange={noop} onRemove={noop} state='error' />,
-    )
-    expect(error).toMatch(/role="alert"/)
-  })
-})

package/src/blocks/e-commerce/navigation/storefront-navbar-cart-sheet.tsx

@@ -1,371 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
-import { Minus, Plus, ShoppingBag } from 'lucide-react'
-
-import { Button } from '../../../ui/button'
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from '../../../ui/empty'
-import { Separator } from '../../../ui/separator'
-import { SheetClose } from '../../../ui/sheet'
-import type { Money } from '@thorprovider/types'
-import { formatMoney } from '../../../lib/money'
-
-export interface CartItem {
-  /** Backend cart line-item id — the stable identity for update/removal. */
-  id: string
-  name: string
-  variant?: string
-  price: number
-  qty: number
-  /** Optional; an absent image is omitted rather than serialized as `""`. */
-  image?: string
-  /**
-   * Canonical backend line amount. Required for truthful rendering in
-   * `canonical` mode; when absent/invalid the line shows the unavailable
-   * label rather than a numeric fallback.
-   */
-  lineTotal?: Money
-}
-
-export type CartSheetState = 'idle' | 'pending' | 'error'
-
-export interface StorefrontNavbarCartSheetProps {
-  items: CartItem[]
-  /**
-   * Quantity DELTA for a backend cart line-item id. The boundary converts the
-   * delta into an absolute quantity against the authoritative current line
-   * quantity before mutating the cart.
-   */
-  onQtyChange: (id: string, delta: number) => void
-  /** Remove the backend cart line-item id. */
-  onRemove: (id: string) => void
-  /** Authoritative backend subtotal. Preferred over any local line math. */
-  subtotal?: Money
-  /** Shown when an authoritative subtotal is supplied but absent/malformed. */
-  subtotalUnavailableLabel?: string
-  /** Override money formatting (locale, currency). Defaults to `Money.currencyCode`. */
-  formatMoney?: (money: Money) => string
-  /** @deprecated legacy numeric formatter; ignored when `subtotal` is supplied. */
-  formatPrice?: (value: number) => string
-  onCheckout?: () => void
-  onViewCart?: () => void
-  /**
-   * Backend-authoritative rendering. When `true`, each line amount comes from
-   * the item's canonical `lineTotal` Money and the sheet never recomputes
-   * `price * qty`. When omitted/false, legacy numeric rendering is preserved
-   * for standalone consumers.
-   */
-  canonical?: boolean
-  /** Shown in `canonical` mode when a line amount is missing or malformed. */
-  lineUnavailableLabel?: string
-  /** Cart read/mutation lifecycle. Pending retains confirmed lines; error is recoverable. */
-  state?: CartSheetState
-  /** Message shown when `state` is `error`. */
-  errorLabel?: string
-  /** Label for the recovery action in the error state. */
-  retryLabel?: string
-  /** Recovery action invoked from the error state. */
-  onRetry?: () => void
-  /** Label shown while `state` is `pending`. */
-  pendingLabel?: string
-  /** When `true`, the checkout action is suppressed (checkout not installed). */
-  checkoutUnavailable?: boolean
-  /** When `true`, the checkout action is disabled (cart not ready / invalid amounts). */
-  checkoutDisabled?: boolean
-  /** When `true`, the review action is suppressed (cart view not installed). */
-  viewCartUnavailable?: boolean
-}
-
-const usdFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
-
-/** Approximate Transitions.dev `delete-with-smoky-dissolve` for list rows (Pro effect). */
-const smokyExit = {
-  opacity: 0,
-  y: 10,
-  scale: 0.96,
-  filter: 'blur(8px)',
-  transition: { duration: 0.35, ease: [0.4, 0, 0.2, 1] as const },
-}
-
-/**
- * Transitions.dev `texts-reveal`: lines rise from below with blur, staggered.
- * Exit is a quiet in-place fade — no Y return, no reverse stagger.
- */
-const revealEase = [0.22, 1, 0.36, 1] as const
-const revealHidden = { opacity: 0, y: 12, filter: 'blur(3px)' }
-const revealShown = { opacity: 1, y: 0, filter: 'blur(0px)' }
-const revealExit = { opacity: 0, y: 0, filter: 'blur(0px)', transition: { duration: 0.2, ease: 'easeOut' as const } }
-
-export function StorefrontNavbarCartSheet({
-  items,
-  onQtyChange,
-  onRemove,
-  subtotal: subtotalProp,
-  subtotalUnavailableLabel = '—',
-  formatMoney: formatMoneyProp,
-  formatPrice,
-  onCheckout,
-  onViewCart,
-  canonical = false,
-  lineUnavailableLabel = '—',
-  state = 'idle',
-  errorLabel = 'No se pudo actualizar el carrito.',
-  retryLabel = 'Reintentar',
-  onRetry,
-  pendingLabel = 'Actualizando el carrito…',
-  checkoutUnavailable = false,
-  checkoutDisabled = false,
-  viewCartUnavailable = false,
-}: StorefrontNavbarCartSheetProps) {
-  const reduceMotion = useReducedMotion()
-  const format = formatPrice ?? (value => usdFormatter.format(value))
-  const localSubtotal = items.reduce((total, item) => total + item.price * item.qty, 0)
-  const authoritativeSubtotal = subtotalProp !== undefined ? formatMoney(subtotalProp, formatMoneyProp) : null
-  const isEmpty = items.length === 0
-  const isPending = state === 'pending'
-  const isError = state === 'error'
-  /** Wait for the last cart row's exit before revealing empty copy. */
-  const [showEmpty, setShowEmpty] = useState(isEmpty)
-
-  useEffect(() => {
-    if (!isEmpty) {
-      setShowEmpty(false)
-    }
-  }, [isEmpty])
-
-  const lineAmount = (item: CartItem): string => {
-    if (canonical) {
-      if (item.lineTotal === undefined) {
-        return lineUnavailableLabel
-      }
-      return formatMoney(item.lineTotal, formatMoneyProp) ?? lineUnavailableLabel
-    }
-    return format(item.price * item.qty)
-  }
-
-  // A confirmed empty cart is only claimed when no read/mutation is in flight
-  // and no read error is outstanding; otherwise the sheet shows loading/error.
-  const showConfirmedEmpty = showEmpty && !isPending && !isError
-  const mutationsDisabled = isPending
-
-  return (
-    <>
-      <div className='relative flex min-h-0 flex-1 flex-col overflow-hidden'>
-        {isPending ? (
-          <p
-            role='status'
-            aria-live='polite'
-            className='border-border text-muted-foreground border-b px-4 py-2 text-sm'
-          >
-            {pendingLabel}
-          </p>
-        ) : null}
-        {isError ? (
-          <div
-            role='alert'
-            className='border-border flex items-center justify-between gap-2 border-b px-4 py-2 text-sm'
-          >
-            <span className='text-destructive'>{errorLabel}</span>
-            {onRetry ? (
-              <Button variant='ghost' size='sm' onClick={onRetry}>
-                {retryLabel}
-              </Button>
-            ) : null}
-          </div>
-        ) : null}
-        <ul className='flex-1 overflow-y-auto px-4'>
-          <AnimatePresence
-            initial={false}
-            mode='popLayout'
-            onExitComplete={() => {
-              if (items.length === 0) {
-                setShowEmpty(true)
-              }
-            }}
-          >
-            {items.map(item => (
-              <motion.li
-                key={item.id}
-                layout={!reduceMotion}
-                initial={reduceMotion ? false : { opacity: 0, y: 8, filter: 'blur(4px)' }}
-                animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
-                exit={reduceMotion ? { opacity: 0 } : smokyExit}
-                transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }}
-                className='border-border flex gap-4 border-b py-4 last:border-b-0'
-                style={{ willChange: 'transform, opacity, filter' }}
-              >
-                {item.image ? (
-                  <img
-                    src={item.image || undefined}
-                    alt=''
-                    width={80}
-                    height={96}
-                    className='bg-muted size-20 shrink-0 rounded-md object-cover'
-                  />
-                ) : (
-                  <div aria-hidden='true' className='bg-muted size-20 shrink-0 rounded-md' />
-                )}
-                <div className='flex min-w-0 flex-1 flex-col'>
-                  <div className='flex items-start justify-between gap-2'>
-                    <div className='min-w-0'>
-                      <p className='truncate text-sm font-medium'>{item.name}</p>
-                      {item.variant ? (
-                        <p className='text-muted-foreground text-sm'>{item.variant}</p>
-                      ) : null}
-                    </div>
-                    <p className='text-sm font-medium'>{lineAmount(item)}</p>
-                  </div>
-
-                  <div className='mt-auto flex items-center justify-between pt-2'>
-                    <div className='border-border flex items-center rounded-md border'>
-                      <Button
-                        variant='ghost'
-                        size='icon'
-                        className='size-8 rounded-r-none'
-                        aria-label={`Decrease quantity, ${item.name}`}
-                        disabled={mutationsDisabled}
-                        onClick={() => onQtyChange(item.id, -1)}
-                      >
-                        <Minus />
-                      </Button>
-                      <span className='w-8 text-center text-sm tabular-nums'>{item.qty}</span>
-                      <Button
-                        variant='ghost'
-                        size='icon'
-                        className='size-8 rounded-l-none'
-                        aria-label={`Increase quantity, ${item.name}`}
-                        disabled={mutationsDisabled}
-                        onClick={() => onQtyChange(item.id, 1)}
-                      >
-                        <Plus />
-                      </Button>
-                    </div>
-                    <Button
-                      variant='ghost'
-                      size='sm'
-                      className='text-muted-foreground hover:text-foreground'
-                      aria-label={`Remove ${item.name} from cart`}
-                      disabled={mutationsDisabled}
-                      onClick={() => onRemove(item.id)}
-                    >
-                      Remove
-                    </Button>
-                  </div>
-                </div>
-              </motion.li>
-            ))}
-          </AnimatePresence>
-        </ul>
-
-        <AnimatePresence>
-          {showConfirmedEmpty ? (
-            <motion.div
-              key='empty'
-              initial={false}
-              exit={reduceMotion ? { opacity: 0 } : revealExit}
-              className='absolute inset-0'
-            >
-              <Empty className='h-full border-0'>
-                <EmptyHeader>
-                  <motion.div
-                    initial={reduceMotion ? false : revealHidden}
-                    animate={revealShown}
-                    transition={
-                      reduceMotion
-                        ? { duration: 0 }
-                        : { duration: 0.5, ease: revealEase, delay: 0 }
-                    }
-                    style={{ willChange: 'transform, opacity, filter' }}
-                  >
-                    <EmptyMedia variant='icon'>
-                      <ShoppingBag aria-hidden='true' />
-                    </EmptyMedia>
-                  </motion.div>
-                  <motion.div
-                    initial={reduceMotion ? false : revealHidden}
-                    animate={revealShown}
-                    transition={
-                      reduceMotion
-                        ? { duration: 0 }
-                        : { duration: 0.5, ease: revealEase, delay: 0.04 }
-                    }
-                    style={{ willChange: 'transform, opacity, filter' }}
-                  >
-                    <EmptyTitle>Your cart is empty</EmptyTitle>
-                  </motion.div>
-                  <motion.div
-                    initial={reduceMotion ? false : revealHidden}
-                    animate={revealShown}
-                    transition={
-                      reduceMotion
-                        ? { duration: 0 }
-                        : { duration: 0.5, ease: revealEase, delay: 0.08 }
-                    }
-                    style={{ willChange: 'transform, opacity, filter' }}
-                  >
-                    <EmptyDescription>Once you add something it will show up here.</EmptyDescription>
-                  </motion.div>
-                </EmptyHeader>
-                <motion.div
-                  initial={reduceMotion ? false : revealHidden}
-                  animate={revealShown}
-                  transition={
-                    reduceMotion
-                      ? { duration: 0 }
-                      : { duration: 0.5, ease: revealEase, delay: 0.12 }
-                  }
-                  style={{ willChange: 'transform, opacity, filter' }}
-                >
-                  <EmptyContent>
-                    <SheetClose asChild>
-                      <Button>Continue shopping</Button>
-                    </SheetClose>
-                  </EmptyContent>
-                </motion.div>
-              </Empty>
-            </motion.div>
-          ) : null}
-        </AnimatePresence>
-      </div>
-
-      {!isEmpty ? (
-        <div className='flex flex-col gap-4 p-4'>
-          <Separator />
-          <div className='flex items-center justify-between text-sm'>
-            <span className='text-muted-foreground'>Subtotal</span>
-            <span className='font-medium tabular-nums'>
-              {canonical || subtotalProp !== undefined
-                ? authoritativeSubtotal ?? subtotalUnavailableLabel
-                : format(localSubtotal)}
-            </span>
-          </div>
-          <p className='text-muted-foreground text-xs'>Shipping and taxes are calculated at checkout.</p>
-          <div className='flex flex-col gap-2'>
-            {checkoutUnavailable ? null : (
-              <Button
-                className='w-full'
-                disabled={checkoutDisabled || isPending}
-                onClick={onCheckout}
-              >
-                Checkout
-              </Button>
-            )}
-            {viewCartUnavailable ? null : (
-              <Button variant='ghost' className='w-full' onClick={onViewCart}>
-                View cart
-              </Button>
-            )}
-          </div>
-        </div>
-      ) : null}
-    </>
-  )
-}

package/src/blocks/e-commerce/navigation/storefront-navbar-mobile-nav.tsx

@@ -1,96 +0,0 @@
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../../../ui/accordion'
-import { Separator } from '../../../ui/separator'
-import { SheetClose } from '../../../ui/sheet'
-import { cn } from '../../../lib/utils'
-import type { StoreCategory } from '../../../lib/contracts'
-
-export interface UtilityLink {
-  label: string
-  href: string
-}
-
-export interface StorefrontNavbarMobileNavProps {
-  storeCategories: StoreCategory[]
-  utilityLinks: UtilityLink[]
-  /** When provided, an extra "Account" link is appended after the utility links. */
-  accountHref?: string
-}
-
-export function StorefrontNavbarMobileNav({
-  storeCategories,
-  utilityLinks,
-  accountHref,
-}: StorefrontNavbarMobileNavProps) {
-  return (
-    <nav aria-label='Store' className='px-2 py-2'>
-      <Accordion type='multiple'>
-        {storeCategories.map(category =>
-          category.children ? (
-            <AccordionItem key={category.href} value={category.href} className='border-none'>
-              <AccordionTrigger className='px-3 py-3 text-base font-medium hover:no-underline'>
-                {category.label}
-              </AccordionTrigger>
-              <AccordionContent className='pb-1'>
-                <ul className='flex flex-col'>
-                  {category.children.map(child => (
-                    <li key={child.href}>
-                      <SheetClose asChild>
-                        <a
-                          href={child.href}
-                          className='text-muted-foreground hover:bg-accent hover:text-accent-foreground block rounded-md px-3 py-3 text-sm transition-colors duration-150'
-                        >
-                          {child.label}
-                        </a>
-                      </SheetClose>
-                    </li>
-                  ))}
-                </ul>
-              </AccordionContent>
-            </AccordionItem>
-          ) : (
-            <SheetClose key={category.href} asChild>
-              <a
-                href={category.href}
-                className={cn(
-                  'hover:bg-accent block rounded-md px-3 py-3 text-base font-medium transition-colors duration-150',
-                  category.emphasis && 'text-destructive',
-                )}
-              >
-                {category.label}
-              </a>
-            </SheetClose>
-          ),
-        )}
-      </Accordion>
-
-      <Separator className='my-2' />
-
-      <ul className='flex flex-col'>
-        {utilityLinks.map(link => (
-          <li key={link.href}>
-            <SheetClose asChild>
-              <a
-                href={link.href}
-                className='text-muted-foreground hover:bg-accent hover:text-accent-foreground block rounded-md px-3 py-3 text-sm transition-colors duration-150'
-              >
-                {link.label}
-              </a>
-            </SheetClose>
-          </li>
-        ))}
-        {accountHref ? (
-          <li>
-            <SheetClose asChild>
-              <a
-                href={accountHref}
-                className='text-muted-foreground hover:bg-accent hover:text-accent-foreground block rounded-md px-3 py-3 text-sm transition-colors duration-150'
-              >
-                Account
-              </a>
-            </SheetClose>
-          </li>
-        ) : null}
-      </ul>
-    </nav>
-  )
-}