@thorprovider/blocks 0.1.3 → 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

@@ -1,5 +1,6 @@
 import { Children, isValidElement, type ReactNode } from 'react'
-import { describe, expect, it } from 'vitest'
+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'
 
@@ -16,23 +17,40 @@ function menuItems(node: ReactNode): Record<string, unknown>[] {
 
 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', () => {
-    let calls = 0
-    const [item] = menuItems(Navbar4AccountMenu({ user, onSignOut: () => { calls++ } }))
+    const onSignOut = vi.fn()
+    const [item] = menuItems(Navbar4AccountMenu({ user, onSignOut }))
     ;(item.onSelect as () => void)()
-    expect(calls).toBe(1)
+    expect(onSignOut).toHaveBeenCalledTimes(1)
   })
 
-  it('rejects further sign-out selection while the consumer is pending', () => {
-    let calls = 0
-    const [item] = menuItems(Navbar4AccountMenu({ user, pending: true, onSignOut: () => { calls++ } }))
+  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)
-    ;(item.onSelect as () => void)()
-    expect(calls).toBe(0)
+    const select = item.onSelect as () => void
+    select()
+    select()
+    expect(onSignOut).not.toHaveBeenCalled()
   })
 })

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

@@ -1,6 +1,7 @@
+import type { ReactElement } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-import { Navbar4 } from './navbar-4'
+import { describe, expect, it, vi } from 'vitest'
+import { Navbar4, Navbar4AccountRetry } from './navbar-4'
 import { Navbar4AccountMenu } from './navbar-4-account-menu'
 import { navbar4PropsSchema } from '../../../lib/contracts'
 
@@ -26,6 +27,13 @@ describe('Navbar4 — account affordance', () => {
     expect(html).not.toContain('src=""')
   })
 
+  it('renders the fallback initials when the identity has no avatar, never an empty image source', () => {
+    const html = renderToStaticMarkup(<Navbar4 {...base} user={user} />)
+    expect(html).toContain('>AL<')
+    expect(html).not.toContain('src=""')
+    expect(html).not.toContain('<img')
+  })
+
   it('renders no account control without identity or destination', () => {
     const html = renderToStaticMarkup(<Navbar4 {...base} />)
     expect(html).not.toContain('aria-label="Account')
@@ -57,6 +65,29 @@ describe('Navbar4 — account affordance', () => {
   })
 })
 
+describe('Navbar4 — consumer-controlled session retry', () => {
+  type RetryProps = { onClick?: () => void; disabled?: boolean }
+
+  it('dispatches the consumer retry action from the unavailable affordance', () => {
+    const onRetry = vi.fn()
+    const control = Navbar4AccountRetry({ onRetry }) as ReactElement<RetryProps>
+    expect(control.props.disabled).toBe(false)
+    control.props.onClick?.()
+    expect(onRetry).toHaveBeenCalledTimes(1)
+  })
+
+  it('holds retry inert while reconciliation is pending', () => {
+    const onRetry = vi.fn()
+    const control = Navbar4AccountRetry({ pending: true, onRetry }) as ReactElement<RetryProps>
+    expect(control.props.disabled).toBe(true)
+  })
+
+  it('holds retry inert when no consumer callback is bound (no empty affordance)', () => {
+    const control = Navbar4AccountRetry({}) as ReactElement<RetryProps>
+    expect(control.props.disabled).toBe(true)
+  })
+})
+
 describe('Navbar4 — optional logo accent', () => {
   it('renders the wordmark unchanged when no accent is supplied', () => {
     const html = renderToStaticMarkup(<Navbar4 {...base} />)

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

@@ -161,6 +161,34 @@ function CartBadge({ count }: CartBadgeProps) {
   )
 }
 
+export interface Navbar4AccountRetryProps {
+  /** Consumer-owned reconciliation in flight; holds the affordance inert. */
+  pending?: boolean
+  /** Consumer-owned recovery action. Without it the affordance is inert. */
+  onRetry?: () => void
+}
+
+/**
+ * Recovery affordance for an unavailable session. The block never resolves the
+ * session itself: it surfaces the state and dispatches the consumer's retry.
+ * Extracted (hooks-free) so the dispatch is testable without a DOM.
+ */
+export function Navbar4AccountRetry({ pending = false, onRetry }: Navbar4AccountRetryProps) {
+  return (
+    <Button
+      variant='ghost'
+      size='icon'
+      className='size-11'
+      disabled={pending || !onRetry}
+      aria-label='Retry account session'
+      title='Account session unavailable'
+      onClick={onRetry}
+    >
+      <RotateCcw aria-hidden='true' />
+    </Button>
+  )
+}
+
 export interface Navbar4Props {
   storeCategories: StoreCategory[]
   /**
@@ -489,17 +517,7 @@ export function Navbar4({
           ) : null}
 
           {accountUnavailable ? (
-            <Button
-              variant='ghost'
-              size='icon'
-              className='size-11'
-              disabled={accountPending || !onAccountRetry}
-              aria-label='Retry account session'
-              title='Account session unavailable'
-              onClick={onAccountRetry}
-            >
-              <RotateCcw aria-hidden='true' />
-            </Button>
+            <Navbar4AccountRetry pending={accountPending} onRetry={onAccountRetry} />
           ) : user ? (
             <Navbar4AccountMenu
               user={user}