@thorprovider/blocks 2.0.0 → 3.0.0

package/src/blocks/e-commerce/navigation/storefront-navbar-search-bar.tsx

@@ -1,52 +0,0 @@
-import { Search } from 'lucide-react'
-
-import { InputGroup, InputGroupAddon, InputGroupInput } from '../../../ui/input-group'
-
-export interface StorefrontNavbarSearchBarProps {
-  value: string
-  onValueChange: (value: string) => void
-  onDismiss?: () => void
-  id?: string
-}
-
-export function StorefrontNavbarSearchBar({
-  value,
-  onValueChange,
-  onDismiss,
-  id = 'store-search',
-}: StorefrontNavbarSearchBarProps) {
-  return (
-    <form
-      role='search'
-      onSubmit={event => event.preventDefault()}
-      className='w-full'
-      onKeyDown={event => {
-        if (event.key === 'Escape') {
-          if (value) {
-            onValueChange('')
-            return
-          }
-          onDismiss?.()
-        }
-      }}
-    >
-      <label htmlFor={id} className='sr-only'>
-        Search products
-      </label>
-      <InputGroup className='bg-muted/40 h-9 w-full rounded-full border-transparent shadow-none has-[[data-slot=input-group-control]:focus-visible]:bg-background'>
-        <InputGroupAddon>
-          <Search aria-hidden='true' className='text-muted-foreground size-4' />
-        </InputGroupAddon>
-        <InputGroupInput
-          id={id}
-          type='search'
-          autoComplete='off'
-          placeholder='Search products'
-          value={value}
-          onChange={event => onValueChange(event.target.value)}
-          className='rounded-full'
-        />
-      </InputGroup>
-    </form>
-  )
-}

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

@@ -1,264 +0,0 @@
-import type { ReactElement } from 'react'
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it, vi } from 'vitest'
-import { StorefrontNavbar, StorefrontNavbarAccountRetry } from './storefront-navbar'
-import { StorefrontNavbarAccountMenu } from './storefront-navbar-account-menu'
-import { storefrontNavbarPropsSchema } from '../../../lib/contracts'
-
-const base = {
-  storeCategories: [],
-  shippingNote: 'Entrega segura',
-  utilityLinks: [],
-  logoText: 'ElectroCuba',
-}
-
-describe('StorefrontNavbar — account affordance', () => {
-  const user = { name: 'Ada Lovelace', email: 'ada@example.test', initials: 'AL' }
-
-  it('offers a visible account destination to anonymous shoppers', () => {
-    const html = renderToStaticMarkup(<StorefrontNavbar {...base} accountHref="/account" />)
-    expect(html).toMatch(/<a[^>]*href="\/account"[^>]*aria-label="Account"/)
-  })
-
-  it('renders the identity trigger without a desktop-only wrapper or empty image', () => {
-    const html = renderToStaticMarkup(<StorefrontNavbar {...base} user={user} />)
-    expect(html).toContain('Account menu for Ada Lovelace')
-    expect(html).not.toMatch(/<div class="hidden lg:block"><button[^>]*aria-label="Account/)
-    expect(html).not.toContain('src=""')
-  })
-
-  it('renders the fallback initials when the identity has no avatar, never an empty image source', () => {
-    const html = renderToStaticMarkup(<StorefrontNavbar {...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(<StorefrontNavbar {...base} />)
-    expect(html).not.toContain('aria-label="Account')
-    expect(renderToStaticMarkup(<StorefrontNavbarAccountMenu />)).toBe('')
-  })
-
-  it('disables the identity trigger while a session operation is pending', () => {
-    const html = renderToStaticMarkup(<StorefrontNavbar {...base} user={user} accountPending />)
-    expect(html).toMatch(/<button[^>]*disabled=""[^>]*aria-label="Account menu for Ada Lovelace"/)
-  })
-
-  it('distinguishes unavailable identity from anonymous and offers retry', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbar {...base} accountHref="/account" accountUnavailable onAccountRetry={() => {}} />,
-    )
-    expect(html).toContain('aria-label="Retry account session"')
-    expect(html).not.toContain('aria-label="Account"')
-  })
-
-  it('keeps serializable identity and feedback while stripping callbacks', () => {
-    const parsed = storefrontNavbarPropsSchema.parse({
-      ...base, user, accountHref: '/account', accountMenuItems: [{ label: 'Account', href: '/account' }],
-      accountPending: true, accountUnavailable: true, onSignOut: () => {},
-    })
-    expect(parsed.user).toEqual(user)
-    expect(parsed.accountPending).toBe(true)
-    expect(parsed.accountUnavailable).toBe(true)
-    expect(parsed).not.toHaveProperty('onSignOut')
-  })
-})
-
-describe('StorefrontNavbar — 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 = StorefrontNavbarAccountRetry({ 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 = StorefrontNavbarAccountRetry({ 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 = StorefrontNavbarAccountRetry({}) as ReactElement<RetryProps>
-    expect(control.props.disabled).toBe(true)
-  })
-})
-
-describe('StorefrontNavbar — optional logo accent', () => {
-  it('renders the wordmark unchanged when no accent is supplied', () => {
-    const html = renderToStaticMarkup(<StorefrontNavbar {...base} />)
-    expect(html).toContain('>ElectroCuba</span>')
-    expect(html).not.toContain('text-brand-promo')
-  })
-
-  it('accents a matched trailing segment without duplicating the wordmark', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbar {...base} logoAccent={{ text: 'Cuba', className: 'text-brand-promo' }} />,
-    )
-    expect(html).toContain('Electro<span class="text-brand-promo">Cuba</span>')
-    expect(html.match(/Electro/g)).toHaveLength(1)
-    expect(html.match(/Cuba/g)).toHaveLength(1)
-  })
-
-  it('accents the full wordmark when the accent covers all of it', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbar {...base} logoAccent={{ text: 'ElectroCuba', className: 'text-brand-promo' }} />,
-    )
-    expect(html).toContain('<span class="text-brand-promo">ElectroCuba</span>')
-  })
-
-  it('does not accent when the segment is not a trailing match', () => {
-    const html = renderToStaticMarkup(<StorefrontNavbar {...base} logoAccent={{ text: 'Electro' }} />)
-    expect(html).toContain('>ElectroCuba</span>')
-    expect(html).not.toContain('<span class="">')
-  })
-
-  it('keeps the wordmark as the accessible text of the logo link', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbar {...base} logoHref='/' logoAccent={{ text: 'Cuba', className: 'text-brand-promo' }} />,
-    )
-    expect(html).toContain('href="/"')
-    expect(html).toContain('Electro<span class="text-brand-promo">Cuba</span>')
-  })
-})
-
-describe('StorefrontNavbar — optional utility strip', () => {
-  // The desktop utility strip is the only element with this inner track class.
-  const strip = (html: string) => html.includes('h-9 w-full max-w-7xl')
-
-  it('renders no utility strip when the note is empty and there are no utility links', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbar storeCategories={[]} shippingNote='' utilityLinks={[]} logoText='ElectroCuba' />,
-    )
-    expect(strip(html)).toBe(false)
-  })
-
-  it('renders no utility strip when the note is omitted', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbar storeCategories={[]} utilityLinks={[]} logoText='ElectroCuba' />,
-    )
-    expect(strip(html)).toBe(false)
-  })
-
-  it('treats a whitespace-only note as empty', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbar storeCategories={[]} shippingNote='   ' utilityLinks={[]} logoText='ElectroCuba' />,
-    )
-    expect(strip(html)).toBe(false)
-  })
-
-  it('renders the utility strip with a non-empty note', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbar storeCategories={[]} shippingNote='Entrega segura' utilityLinks={[]} logoText='ElectroCuba' />,
-    )
-    expect(strip(html)).toBe(true)
-    expect(html).toContain('Entrega segura')
-  })
-
-  it('renders the utility strip when there is a utility link even with an empty note', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbar
-        storeCategories={[]}
-        shippingNote=''
-        utilityLinks={[{ label: 'Ayuda', href: '/help' }]}
-        logoText='ElectroCuba'
-      />,
-    )
-    expect(strip(html)).toBe(true)
-    expect(html).toContain('Ayuda')
-  })
-})
-
-const category = { href: '/herramientas', label: 'Herramientas' }
-
-// The desktop nav link (the mobile drawer also emits an anchor for the same
-// href, but only the desktop nav link carries `hover:bg-muted`).
-const navLinkClass = (html: string) =>
-  html.match(/<a href="\/herramientas" class="([^"]*hover:bg-muted[^"]*)"/)?.[1] ?? ''
-
-describe('StorefrontNavbar — optional outer surface className', () => {
-  it('keeps the default surface (incl. backdrop-filter variant) and nav link color when className is omitted', () => {
-    const html = renderToStaticMarkup(<StorefrontNavbar {...base} storeCategories={[category]} />)
-    expect(html).toContain('bg-background/95')
-    expect(html).toContain('supports-backdrop-filter:bg-background/80')
-    expect(navLinkClass(html)).toContain('text-foreground')
-    expect(navLinkClass(html)).not.toContain('hover:text-foreground')
-  })
-
-  it('gives the consumer full surface ownership when className is supplied (no default background or variant)', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbar {...base} storeCategories={[category]} className='bg-brand-nav text-brand-nav-foreground' />,
-    )
-    expect(html).toContain('bg-brand-nav')
-    expect(html).toContain('text-brand-nav-foreground')
-    expect(html).not.toContain('bg-background/95')
-    expect(html).not.toContain('supports-backdrop-filter:bg-background/80')
-    // Layout/border/sticky/backdrop classes stay internal and present.
-    expect(html).toContain('border-border')
-    expect(html).toContain('sticky')
-    expect(html).toContain('backdrop-blur-md')
-  })
-
-  it('lets nav links inherit the branded surface text color with a correct hover foreground', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbar {...base} storeCategories={[category]} className='bg-brand-nav text-brand-nav-foreground' />,
-    )
-    expect(navLinkClass(html)).toContain('text-inherit')
-    expect(navLinkClass(html)).toContain('hover:text-foreground')
-  })
-})
-
-const cartTrigger = (html: string) =>
-  html.match(/<button[^>]*aria-label="Cart,[^"]*"[^>]*>/)?.[0] ?? ''
-
-describe('StorefrontNavbar — controlled cart sheet visibility', () => {
-  it('keeps the uncontrolled sheet closed by default (legacy consumers unaffected)', () => {
-    const html = renderToStaticMarkup(<StorefrontNavbar {...base} />)
-    expect(cartTrigger(html)).toContain('data-state="closed"')
-  })
-
-  it('reflects a controlled open state on the trigger', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbar {...base} cartOpen={true} onCartOpenChange={() => {}} />,
-    )
-    expect(cartTrigger(html)).toContain('data-state="open"')
-    expect(cartTrigger(html)).toContain('aria-expanded="true"')
-  })
-
-  it('reflects a controlled closed state on the trigger', () => {
-    const html = renderToStaticMarkup(
-      <StorefrontNavbar {...base} cartOpen={false} onCartOpenChange={() => {}} />,
-    )
-    expect(cartTrigger(html)).toContain('data-state="closed"')
-    expect(cartTrigger(html)).toContain('aria-expanded="false"')
-  })
-})
-
-describe('StorefrontNavbar — optional showSearch (E2 task 5.4)', () => {
-  it('renders the search control by default (legacy consumers unaffected)', () => {
-    const html = renderToStaticMarkup(<StorefrontNavbar {...base} />)
-    expect(html).toContain('role="search"')
-    expect(html).toContain('type="search"')
-    expect(html).toContain('aria-label="Search products"')
-  })
-
-  it('renders no search control when showSearch is false, keeping the rest of the chrome', () => {
-    const html = renderToStaticMarkup(<StorefrontNavbar {...base} showSearch={false} />)
-    expect(html).not.toContain('role="search"')
-    expect(html).not.toContain('type="search"')
-    expect(html).not.toContain('aria-label="Search products"')
-    // Non-search chrome is unaffected: the wordmark and cart trigger remain.
-    expect(html).toContain('ElectroCuba')
-    expect(html).toContain('aria-label="Cart, 0 items"')
-  })
-
-  it('renders the search control when showSearch is explicitly true', () => {
-    const html = renderToStaticMarkup(<StorefrontNavbar {...base} showSearch={true} />)
-    expect(html).toContain('role="search"')
-    expect(html).toContain('type="search"')
-  })
-})