@thorprovider/blocks 0.1.2 → 1.0.0

package/src/blocks/marketing/features/feature.test.tsx

@@ -0,0 +1,153 @@
+import { Zap } from 'lucide-react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import {
+  featureCardsSpecSchema,
+  featurePropsSchema,
+  featureSplitSpecSchema,
+} from '../../../lib/contracts'
+import Feature, { type FeatureItem, type FeatureProps } from './feature'
+
+const items: FeatureItem[] = [
+  { id: 'f1', title: 'Fast', description: 'Ships quickly.', icon: Zap },
+  { id: 'f2', title: 'Safe', description: 'Built to last.', icon: Zap },
+]
+
+const specItems = [
+  { id: 'f1', title: 'Fast', description: 'Ships quickly.', icon: 'Zap' },
+  { id: 'f2', title: 'Safe', description: 'Built to last.', icon: 'Zap' },
+]
+
+const render = (props: FeatureProps) => renderToStaticMarkup(<Feature {...props} />)
+
+describe('Feature — canonical render', () => {
+  it('renders the cards structure by default (former Feature1)', () => {
+    const html = render({
+      items,
+      badge: 'Why us',
+      title: 'Benefits',
+      description: 'Everything you need',
+      learnMoreLabel: 'Learn more',
+      ctaLabel: 'See all',
+      onCtaClick: () => {},
+      onLearnMore: () => {},
+    })
+    expect(html).toContain('Why us')
+    expect(html).toContain('Benefits')
+    expect(html).toContain('Fast')
+    expect(html).toContain('Learn more')
+    expect(html).toContain('See all')
+  })
+
+  it('renders the split structure with presentation: split (former Feature2)', () => {
+    const html = render({
+      items,
+      presentation: 'split',
+      title: 'Benefits',
+      description: 'Everything you need',
+      image: { src: 'https://cdn.example/img.jpg', alt: 'Workshop' },
+      className: 'bg-background',
+    })
+    expect(html).toContain('Benefits')
+    expect(html).toContain('Fast')
+    expect(html).toContain('https://cdn.example/img.jpg')
+    expect(html).toContain('grayscale')
+    expect(html).toContain('bg-background')
+  })
+
+  it('omits the badge and per-item learn-more in the split presentation', () => {
+    const html = render({
+      items,
+      presentation: 'split',
+      badge: 'Why us',
+      title: 'Benefits',
+      learnMoreLabel: 'Learn more',
+      onLearnMore: () => {},
+      image: { src: 'https://cdn.example/img.jpg', alt: 'Workshop' },
+    } as unknown as FeatureProps)
+    expect(html).not.toContain('Why us')
+    expect(html).not.toContain('Learn more')
+  })
+
+  it('renders no empty chrome when optional content is absent (cards)', () => {
+    const html = render({ items })
+    expect(html).not.toContain('badge')
+    expect(html).not.toContain('Learn more')
+    expect(html).not.toContain('See all')
+  })
+
+  it('rejects split without an image at the serialized boundary', () => {
+    expect(() =>
+      featureSplitSpecSchema.parse({ items: specItems, presentation: 'split' }),
+    ).toThrow()
+    expect(() =>
+      featurePropsSchema.parse({ items: specItems, presentation: 'split' }),
+    ).toThrow()
+  })
+
+  it('rejects split with a blank image source', () => {
+    expect(() =>
+      featureSplitSpecSchema.parse({
+        items: specItems,
+        presentation: 'split',
+        image: { src: '   ', alt: 'Workshop' },
+      }),
+    ).toThrow()
+  })
+
+  it('accepts cards without an image at the serialized boundary', () => {
+    expect(() => featurePropsSchema.parse({ items: specItems })).not.toThrow()
+    expect(() =>
+      featurePropsSchema.parse({ items: specItems, presentation: 'cards' }),
+    ).not.toThrow()
+    expect(() =>
+      featureCardsSpecSchema.parse({ items: specItems }),
+    ).not.toThrow()
+  })
+
+  it('throws a configuration error for untyped split callers without an image', () => {
+    expect(() =>
+      render({ items, presentation: 'split' } as unknown as FeatureProps),
+    ).toThrow(/presentation="split".*image/)
+    expect(() =>
+      render({
+        items,
+        presentation: 'split',
+        image: { src: '   ', alt: 'Workshop' },
+      } as unknown as FeatureProps),
+    ).toThrow(/presentation="split".*image/)
+  })
+
+  it('renders one image with the supplied src and alt and never emits an empty src', () => {
+    const html = render({
+      items,
+      presentation: 'split',
+      image: { src: 'https://cdn.example/img.jpg', alt: 'Workshop' },
+    })
+    expect(html).toContain('<img')
+    expect(html).toContain('src="https://cdn.example/img.jpg"')
+    expect(html).toContain('alt="Workshop"')
+    expect(html.match(/<img/g)).toHaveLength(1)
+    expect(html).not.toContain('src=""')
+  })
+
+  it('renders an empty items list without item chrome or errors', () => {
+    const html = render({ items: [], title: 'Benefits' })
+    expect(html).toContain('Benefits')
+    expect(html).not.toContain('<article')
+    expect(html).not.toContain('<h3')
+  })
+
+  it('validates a serialized props object against featurePropsSchema', () => {
+    const spec = {
+      items: [
+        { id: 'f1', title: 'Fast', description: 'Ships quickly.', icon: 'Zap' },
+      ],
+      presentation: 'split',
+      title: 'Benefits',
+      image: { src: 'https://cdn.example/img.jpg', alt: 'Workshop' },
+    }
+    const parsed = featurePropsSchema.parse(spec)
+    expect(parsed.items[0]?.icon).toBe('Zap')
+  })
+})

package/src/blocks/marketing/features/feature.tsx

@@ -0,0 +1,195 @@
+import { Badge } from '../../../ui/badge'
+import { Button } from '../../../ui/button'
+import { Card, CardContent } from '../../../ui/card'
+import { ArrowRight } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import { cn } from '../../../lib/utils'
+
+export interface FeatureItem {
+  id: string
+  title: string
+  description: string
+  icon: LucideIcon
+}
+
+/**
+ * The bounded presentation surface. `cards` is the card grid with a centered
+ * header, per-item learn-more and a section CTA; `split` is the editorial
+ * split layout with a required image column and deliberately ignores the
+ * badge and per-item learn-more. The value changes structure, never the item
+ * contract.
+ */
+export type FeaturePresentation = 'cards' | 'split'
+
+interface FeatureBaseProps {
+  items: FeatureItem[]
+  title?: string
+  description?: string
+  className?: string
+}
+
+export interface FeatureCardsProps extends FeatureBaseProps {
+  /** Bounded presentation option; defaults to `cards`. */
+  presentation?: 'cards'
+  /** `cards`-only header chrome. */
+  badge?: string
+  /** Section CTA (`cards` only). */
+  ctaLabel?: string
+  onCtaClick?: () => void
+  /** Per-item link (`cards` only). */
+  learnMoreLabel?: string
+  onLearnMore?: (item: FeatureItem) => void
+}
+
+export interface FeatureSplitProps extends FeatureBaseProps {
+  presentation: 'split'
+  /** Required editorial image; a non-empty `src` is part of the contract. */
+  image: { src: string; alt: string }
+}
+
+export type FeatureProps = FeatureCardsProps | FeatureSplitProps
+
+function SplitFeature({ items, title, description, image, className }: FeatureSplitProps) {
+  if (!image?.src || image.src.trim() === '') {
+    throw new Error(
+      'Feature: presentation="split" requires a non-empty image.src. Pass { image: { src, alt } } or use presentation="cards".',
+    )
+  }
+
+  return (
+    <section
+      className={cn('mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 md:py-16 lg:px-8', className)}
+    >
+      <div className='grid gap-12 lg:grid-cols-2 lg:gap-16'>
+        <div className='flex flex-col gap-10'>
+          {(title || description) && (
+            <header className='flex flex-col gap-4'>
+              {title && (
+                <h2 className='text-3xl font-bold tracking-tight text-balance sm:text-4xl lg:text-5xl'>
+                  {title}
+                </h2>
+              )}
+              {description && (
+                <p className='text-muted-foreground text-base text-pretty md:text-lg'>
+                  {description}
+                </p>
+              )}
+            </header>
+          )}
+
+          <div className='grid gap-6 sm:grid-cols-2 sm:gap-8'>
+            {items.map(item => (
+              <div key={item.id} className='group flex flex-col items-start gap-3 rounded-lg'>
+                <div className='bg-secondary text-secondary-foreground inline-flex size-10 items-center justify-center rounded-full'>
+                  <item.icon className='size-5' aria-hidden='true' />
+                </div>
+                <div className='flex flex-col gap-1.5'>
+                  <h3 className='text-foreground text-base font-semibold md:text-lg'>{item.title}</h3>
+                  <p className='text-muted-foreground text-sm text-balance'>{item.description}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className='relative'>
+          <div className='bg-muted relative z-10 overflow-hidden rounded-lg shadow-sm transition-all duration-300 hover:shadow-md'>
+            <div className='aspect-[4/3] w-full'>
+              <img
+                src={image.src}
+                alt={image.alt}
+                className='size-full object-cover grayscale'
+                loading='lazy'
+                decoding='async'
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function CardsFeature({
+  items,
+  badge,
+  title,
+  description,
+  ctaLabel,
+  onCtaClick,
+  learnMoreLabel,
+  onLearnMore,
+  className,
+}: FeatureCardsProps) {
+  return (
+    <section
+      className={cn('mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 md:py-16 lg:px-8', className)}
+    >
+      {(badge || title || description) && (
+        <header className='mx-auto mb-12 max-w-2xl text-center'>
+          {badge && (
+            <Badge variant='secondary' className='h-auto mb-4 rounded-full px-4 py-1 font-medium'>
+              {badge}
+            </Badge>
+          )}
+          {title && (
+            <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>{title}</h2>
+          )}
+          {description && (
+            <p className='text-muted-foreground text-pretty'>{description}</p>
+          )}
+        </header>
+      )}
+
+      <div className='grid gap-4 sm:grid-cols-2 sm:gap-6 md:grid-cols-3'>
+        {items.map(feature => (
+          <article key={feature.id} className='group'>
+            <Card className='relative h-full overflow-hidden transition-all hover:shadow-md'>
+              <CardContent className='px-6'>
+                <div className='bg-secondary text-secondary-foreground mb-4 inline-flex size-12 items-center justify-center rounded-xl'>
+                  <feature.icon className='size-5' aria-hidden='true' />
+                </div>
+                <h3 className='mb-2 text-lg font-semibold'>{feature.title}</h3>
+                <p className='text-muted-foreground mb-4 text-sm'>{feature.description}</p>
+
+                {learnMoreLabel && (
+                  <Button
+                    variant='link'
+                    size='sm'
+                    className='h-8 px-3 text-xs text-muted-foreground hover:text-foreground h-auto cursor-pointer !p-0 text-sm'
+                    onClick={onLearnMore ? () => onLearnMore(feature) : undefined}
+                  >
+                    {learnMoreLabel}
+                    <ArrowRight />
+                  </Button>
+                )}
+              </CardContent>
+            </Card>
+          </article>
+        ))}
+      </div>
+
+      {ctaLabel && (
+        <div className='mt-12 text-center'>
+          <Button
+            size='lg'
+            className='h-10 cursor-pointer rounded-lg !px-8'
+            onClick={onCtaClick}
+          >
+            {ctaLabel}
+            <ArrowRight />
+          </Button>
+        </div>
+      )}
+    </section>
+  )
+}
+
+export function Feature(props: FeatureProps) {
+  if (props.presentation === 'split') {
+    return <SplitFeature {...props} />
+  }
+  return <CardsFeature {...props} />
+}
+
+export default Feature

package/src/blocks/marketing/navbars/navbar-4-account-menu.test.tsx

@@ -0,0 +1,56 @@
+import { Children, isValidElement, type ReactNode } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+import { Navbar4AccountMenu } from './navbar-4-account-menu'
+import { DropdownMenuItem } from '../../../ui/dropdown-menu'
+
+// Inspect the block-owned menu items without mounting Radix's browser portal.
+function menuItems(node: ReactNode): Record<string, unknown>[] {
+  return Children.toArray(node).flatMap(child => {
+    if (!isValidElement<{ children?: ReactNode }>(child)) return []
+    return [
+      ...(child.type === DropdownMenuItem ? [child.props as Record<string, unknown>] : []),
+      ...menuItems(child.props.children),
+    ]
+  })
+}
+
+const user = { name: 'Ada', email: 'ada@example.test', initials: 'A' }
+
+describe('Navbar4AccountMenu absent avatar', () => {
+  it('renders the fallback initials, never an empty image source, when avatar is absent', () => {
+    const html = renderToStaticMarkup(<Navbar4AccountMenu user={user} />)
+    expect(html).toContain('>A<')
+    expect(html).not.toContain('src=""')
+    expect(html).not.toContain('<img')
+  })
+
+  it('treats an empty avatar string as absent rather than an empty source', () => {
+    const html = renderToStaticMarkup(<Navbar4AccountMenu user={{ ...user, avatar: '' }} />)
+    expect(html).toContain('>A<')
+    expect(html).not.toContain('src=""')
+  })
+})
+
+describe('Navbar4AccountMenu consumer actions', () => {
+  it('omits help and sign-out when no consumer actions exist', () => {
+    expect(menuItems(Navbar4AccountMenu({ user }))).toEqual([])
+  })
+
+  it('dispatches sign-out to its consumer', () => {
+    const onSignOut = vi.fn()
+    const [item] = menuItems(Navbar4AccountMenu({ user, onSignOut }))
+    ;(item.onSelect as () => void)()
+    expect(onSignOut).toHaveBeenCalledTimes(1)
+  })
+
+  it('prevents duplicate sign-out while the consumer reports the logout pending', () => {
+    const onSignOut = vi.fn()
+    const [item] = menuItems(Navbar4AccountMenu({ user, pending: true, onSignOut }))
+    expect(item.disabled).toBe(true)
+    const select = item.onSelect as () => void
+    select()
+    select()
+    expect(onSignOut).not.toHaveBeenCalled()
+  })
+})

package/src/blocks/marketing/navbars/navbar-4-account-menu.tsx

@@ -15,7 +15,7 @@ import {
 export interface StoreUser {
   name: string
   email: string
-  avatar: string
+  avatar?: string
   initials: string
 }
 
@@ -33,6 +33,7 @@ export interface Navbar4AccountMenuProps {
   items?: AccountMenuItem[]
   onHelp?: () => void
   onSignOut?: () => void
+  pending?: boolean
 }
 
 const accountIcons = {
@@ -47,6 +48,7 @@ export function Navbar4AccountMenu({
   items = [],
   onHelp,
   onSignOut,
+  pending = false,
 }: Navbar4AccountMenuProps) {
   if (!user) {
     return null
@@ -58,7 +60,8 @@ export function Navbar4AccountMenu({
         <Button
           variant='ghost'
           size='icon'
-          className='rounded-full'
+          className='size-11 rounded-full'
+          disabled={pending}
           aria-label={`Account menu for ${user.name}`}
         >
           <Avatar size='sm' className='pointer-events-none size-8'>
@@ -85,11 +88,11 @@ export function Navbar4AccountMenu({
               </div>
             </div>
           </DropdownMenuLabel>
-          <DropdownMenuSeparator />
+          {items.length > 0 ? <DropdownMenuSeparator /> : null}
           {items.map(item => {
             const Icon = item.icon ? accountIcons[item.icon] : Package
             return (
-              <DropdownMenuItem key={item.href} asChild className='gap-2.5 px-2 py-2'>
+              <DropdownMenuItem key={item.href} asChild disabled={pending} className='gap-2.5 px-2 py-2'>
                 <a href={item.href}>
                   <Icon className='text-muted-foreground size-4' />
                   <span className='flex min-w-0 flex-col'>
@@ -102,17 +105,30 @@ export function Navbar4AccountMenu({
               </DropdownMenuItem>
             )
           })}
-          <DropdownMenuSeparator />
-          <DropdownMenuItem className='gap-2.5 px-2 py-2' onSelect={onHelp}>
-            <HelpCircle className='text-muted-foreground size-4' />
-            Help & support
-          </DropdownMenuItem>
-          <DropdownMenuItem variant='destructive' className='gap-2.5 px-2 py-2' onSelect={onSignOut}>
-            <LogOut className='size-4' />
-            Sign out
-          </DropdownMenuItem>
+          {onHelp || onSignOut ? <DropdownMenuSeparator /> : null}
+          {onHelp ? (
+            <DropdownMenuItem
+              disabled={pending}
+              className='gap-2.5 px-2 py-2'
+              onSelect={() => { if (!pending) onHelp() }}
+            >
+              <HelpCircle className='text-muted-foreground size-4' />
+              Help & support
+            </DropdownMenuItem>
+          ) : null}
+          {onSignOut ? (
+            <DropdownMenuItem
+              disabled={pending}
+              variant='destructive'
+              className='gap-2.5 px-2 py-2'
+              onSelect={() => { if (!pending) onSignOut() }}
+            >
+              <LogOut className='size-4' />
+              Sign out
+            </DropdownMenuItem>
+          ) : null}
         </DropdownMenuGroup>
       </DropdownMenuContent>
     </DropdownMenu>
   )
-}
+}

package/src/blocks/marketing/navbars/navbar-4-cart-sheet.test.tsx

@@ -52,3 +52,153 @@ describe('Navbar4CartSheet — authoritative subtotal', () => {
     expect(html).toContain('$90.00')
   })
 })
+
+describe('Navbar4CartSheet — canonical line amounts', () => {
+  it('renders the canonical backend line amount in its currency, not price times qty', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet
+        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(
+      <Navbar4CartSheet
+        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(
+      <Navbar4CartSheet
+        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(
+      <Navbar4CartSheet
+        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('Navbar4CartSheet — read/mutation lifecycle', () => {
+  it('shows a pending state instead of claiming an empty cart', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet 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(
+      <Navbar4CartSheet
+        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(
+      <Navbar4CartSheet items={items} onQtyChange={noop} onRemove={noop} state='pending' />,
+    )
+    expect(html).toContain('aria-label="Increase quantity, Taladro"')
+    expect(html).toContain('disabled')
+  })
+})
+
+describe('Navbar4CartSheet — action availability', () => {
+  it('suppresses the checkout action when checkout is not installed', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet
+        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(
+      <Navbar4CartSheet 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(
+      <Navbar4CartSheet
+        items={items}
+        onQtyChange={noop}
+        onRemove={noop}
+        viewCartUnavailable
+        onViewCart={noop}
+      />,
+    )
+    expect(html).not.toContain('View cart')
+  })
+})
+
+describe('Navbar4CartSheet — accessibility', () => {
+  it('names the line mutation controls', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet 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(
+      <Navbar4CartSheet items={[]} onQtyChange={noop} onRemove={noop} state='pending' />,
+    )
+    expect(pending).toMatch(/role="status"[^>]*aria-live="polite"/)
+    const error = renderToStaticMarkup(
+      <Navbar4CartSheet items={items} onQtyChange={noop} onRemove={noop} state='error' />,
+    )
+    expect(error).toMatch(/role="alert"/)
+  })
+})