@thorprovider/blocks 2.0.0 → 3.0.0

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

@@ -1,604 +0,0 @@
-'use client'
-
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
-import { Menu, Search, ShoppingBag, UserRound, RotateCcw, X } from 'lucide-react'
-
-import { Button } from '../../../ui/button'
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '../../../ui/sheet'
-import { cn } from '../../../lib/utils'
-
-import { StorefrontNavbarAccountMenu, type AccountMenuItem, type StoreUser } from './storefront-navbar-account-menu'
-import { StorefrontNavbarCartSheet, type CartItem, type CartSheetState } from './storefront-navbar-cart-sheet'
-import type { UtilityLink } from './storefront-navbar-mobile-nav'
-import { StorefrontNavbarSearchBar } from './storefront-navbar-search-bar'
-import { MegaMenu } from './mega-menu'
-import { MobileCategoryDrawer } from './mobile-category-drawer'
-import type { MenuItem } from '../../../lib/types/menu'
-import type { Money } from '@thorprovider/types'
-import type { StoreCategory } from '../../../lib/contracts'
-
-function toMenuItem(category: StoreCategory): MenuItem {
-  return {
-    id: category.href,
-    label: category.label,
-    href: category.href,
-    children: category.children?.map(toMenuItem),
-  }
-}
-
-/**
- * Drawer entries come from three sources (categories, utility links, account
- * link). Hosts may reuse the same href across sources (e.g. a placeholder
- * href), which would produce duplicate React keys if passed through as-is.
- * Dedupe by href so every rendered item gets a unique id.
- */
-function uniqueById<T extends { id: string }>(items: T[]): T[] {
-  const seen = new Set<string>()
-  return items.filter((item) => {
-    if (seen.has(item.id)) return false
-    seen.add(item.id)
-    return true
-  })
-}
-
-export interface LogoAccent {
-  /** Trailing segment of `logoText` to render with the accent styling. */
-  text: string
-  /** Consumer-supplied classes for the accent span (e.g. a brand color token). */
-  className?: string
-}
-
-function Logo({ text, href, accent }: { text: string; href?: string; accent?: LogoAccent }) {
-  const className =
-    'focus-visible:ring-ring flex items-center gap-2 rounded-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none'
-
-  const accentText = accent?.text ?? ''
-  const hasAccent = accentText.length > 0 && text.endsWith(accentText)
-  const baseText = hasAccent ? text.slice(0, text.length - accentText.length) : text
-
-  const content = (
-    <>
-      <svg viewBox='0 0 32 32' aria-hidden='true' className='text-primary size-7' fill='none' xmlns='http://www.w3.org/2000/svg'>
-        <path
-          d='M26 24.75C26.4142 24.75 26.75 24.4142 26.75 24C26.75 23.5858 26.4142 23.25 26 23.25V24.75ZM26 23.25H11V24.75H26V23.25ZM8.75 21V15H7.25V21H8.75ZM11 23.25C9.75736 23.25 8.75 22.2426 8.75 21H7.25C7.25 23.0711 8.92893 24.75 11 24.75V23.25Z'
-          fill='currentColor'
-        />
-        <path
-          d='M1.5 3.25C1.08579 3.25 0.75 3.58579 0.75 4C0.75 4.41421 1.08579 4.75 1.5 4.75V3.25ZM1.5 4.75H6V3.25H1.5V4.75ZM7.25 6V21H8.75V6H7.25ZM6 4.75C6.69036 4.75 7.25 5.30964 7.25 6H8.75C8.75 4.48122 7.51878 3.25 6 3.25V4.75Z'
-          fill='currentColor'
-        />
-        <path
-          d='M22 21.75C22.4142 21.75 22.75 21.4142 22.75 21C22.75 20.5858 22.4142 20.25 22 20.25V21.75ZM22 20.25H11V21.75H22V20.25ZM8.75 18V12H7.25V18H8.75ZM11 20.25C9.75736 20.25 8.75 19.2426 8.75 18H7.25C7.25 20.0711 8.92893 21.75 11 21.75V20.25Z'
-          fill='currentColor'
-        />
-        <path
-          d='M27.2057 19.754C27.0654 20.1438 26.6357 20.346 26.246 20.2057C25.8562 20.0654 25.654 19.6357 25.7943 19.246L27.2057 19.754ZM30.0361 9.67744L29.3305 9.4234L29.3305 9.4234L30.0361 9.67744ZM25.7943 19.246L29.3305 9.4234L30.7418 9.93148L27.2057 19.754L25.7943 19.246ZM28.1543 7.75L8 7.75V6.25L28.1543 6.25V7.75ZM29.3305 9.4234C29.6237 8.60882 29.0201 7.75 28.1543 7.75V6.25C30.059 6.25 31.3869 8.13941 30.7418 9.93148L29.3305 9.4234Z'
-          fill='currentColor'
-        />
-        <path
-          d='M13.5 21.75C13.0858 21.75 12.75 21.4142 12.75 21C12.75 20.5858 13.0858 20.25 13.5 20.25V21.75ZM26.7111 19.009L27.4174 19.2613L27.4174 19.2613L26.7111 19.009ZM13.5 20.25H23.8858V21.75H13.5V20.25ZM26.0048 18.7568L27.7937 13.7477L29.2063 14.2523L27.4174 19.2613L26.0048 18.7568ZM23.8858 20.25C24.8367 20.25 25.6849 19.6522 26.0048 18.7568L27.4174 19.2613C26.8843 20.7537 25.4706 21.75 23.8858 21.75V20.25Z'
-          fill='currentColor'
-        />
-        <path d='M21.1694 10.5806L14.5651 17.1849' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' />
-        <path d='M22.1694 14.5806L18.5632 18.1868' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' />
-        <circle cx='13.1' cy='26.1' r='1.7' stroke='currentColor' strokeWidth='1.2' />
-        <circle cx='22.1' cy='26.1' r='1.7' stroke='currentColor' strokeWidth='1.2' />
-      </svg>
-      <span className='text-base font-semibold tracking-tight'>
-        {baseText}
-        {hasAccent ? <span className={accent?.className}>{accentText}</span> : null}
-      </span>
-    </>
-  )
-
-  if (!href) {
-    return <span className={className}>{content}</span>
-  }
-
-  return (
-    <a href={href} className={className}>
-      {content}
-    </a>
-  )
-}
-
-type CartBadgeProps = {
-  count: number
-}
-
-/**
- * Transitions.dev `notification-badge`: diagonal slide + spring pop when the
- * count appears or changes. Positioned outside the bag so it never covers the icon.
- */
-function CartBadge({ count }: CartBadgeProps) {
-  const reduceMotion = useReducedMotion()
-
-  return (
-    <AnimatePresence>
-      {count > 0 ? (
-        <motion.span
-          key='badge-shell'
-          className='bg-foreground text-background pointer-events-none absolute -top-2.5 -end-3.5 flex size-[1.125rem] items-center justify-center overflow-hidden rounded-full text-[10px] font-medium tabular-nums shadow-sm ring-2 ring-background'
-          initial={
-            reduceMotion
-              ? false
-              : { scale: 0, x: -8.2, y: 12.4, opacity: 0, filter: 'blur(2px)' }
-          }
-          animate={{ scale: 1, x: 0, y: 0, opacity: 1, filter: 'blur(0px)' }}
-          exit={
-            reduceMotion
-              ? { opacity: 0 }
-              : {
-                  scale: 0,
-                  opacity: 0,
-                  filter: 'blur(2px)',
-                  transition: { duration: 0.18, ease: [0.4, 0, 0.2, 1] },
-                }
-          }
-          transition={
-            reduceMotion
-              ? { duration: 0 }
-              : { type: 'spring', stiffness: 520, damping: 18, mass: 0.6 }
-          }
-          style={{ willChange: 'transform, opacity, filter' }}
-        >
-          <AnimatePresence mode='popLayout' initial={false}>
-            <motion.span
-              key={count}
-              className='block'
-              initial={reduceMotion ? false : { y: 8, opacity: 0, filter: 'blur(2px)' }}
-              animate={{ y: 0, opacity: 1, filter: 'blur(0px)' }}
-              exit={reduceMotion ? undefined : { y: -8, opacity: 0, filter: 'blur(2px)' }}
-              transition={{ duration: 0.22, ease: [0.22, 1, 0.36, 1] }}
-            >
-              {count > 99 ? '99+' : count}
-            </motion.span>
-          </AnimatePresence>
-        </motion.span>
-      ) : null}
-    </AnimatePresence>
-  )
-}
-
-export interface StorefrontNavbarAccountRetryProps {
-  /** 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 StorefrontNavbarAccountRetry({ pending = false, onRetry }: StorefrontNavbarAccountRetryProps) {
-  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 StorefrontNavbarProps {
-  storeCategories: StoreCategory[]
-  /**
-   * Optional note shown in the desktop utility strip. When omitted (or empty)
-   * and there are no `utilityLinks`, the strip is not rendered at all, so a
-   * block with no optional content paints no empty decorative chrome.
-   */
-  shippingNote?: string
-  utilityLinks: UtilityLink[]
-  logoText: string
-  logoHref?: string
-  /**
-   * Optional accent for a trailing segment of `logoText` (e.g. the "Cuba" in
-   * "ElectroCuba"). When omitted, or when `text` is not a trailing segment of
-   * `logoText`, the wordmark renders unchanged.
-   */
-  logoAccent?: LogoAccent
-  /** Account destination for anonymous shoppers on every viewport. */
-  accountHref?: string
-  /**
-   * When `false`, no search control is rendered at all — neither the desktop
-   * input, the mobile trigger, nor the mobile panel. Defaults to `true` so
-   * legacy consumers keep the existing self-contained search. The generated
-   * storefront passes `false` while no verified global search contract exists
-   * (E2 task 5.4), so no global search is presented as working.
-   */
-  /**
-   * The storefront's current route path. When it matches a destination the link
-   * is marked as the current page (accessibly, beyond color alone).
-   */
-  currentPath?: string
-  showSearch?: boolean
-  searchQuery?: string
-  onSearchChange?: (value: string) => void
-  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 for the mini-cart. */
-  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
-  user?: StoreUser
-  accountMenuItems?: AccountMenuItem[]
-  onHelp?: () => void
-  onSignOut?: () => void
-  accountPending?: boolean
-  accountUnavailable?: boolean
-  onAccountRetry?: () => void
-  onCheckout?: () => void
-  onViewCart?: () => void
-  /**
-   * Controlled visibility for the cart sheet. When provided, the sheet opens
-   * and closes from this value and `onCartOpenChange` instead of internal
-   * state, so a host can share one cart surface across the navbar trigger and
-   * successful add-to-cart. Omit both to keep the legacy uncontrolled sheet.
-   */
-  cartOpen?: boolean
-  /** Change handler paired with `cartOpen` for a controlled sheet. */
-  onCartOpenChange?: (open: boolean) => void
-  /**
-   * Backend-authoritative cart rendering for the sheet. When `true`, line
-   * amounts use each item's canonical `lineTotal` Money and never fall back to
-   * numeric `price * qty`. Omit for the legacy numeric rendering.
-   */
-  canonicalCart?: boolean
-  /** Cart read/mutation lifecycle for the sheet. */
-  cartState?: CartSheetState
-  /** Message shown when `cartState` is `error`. */
-  cartErrorLabel?: string
-  /** Recovery action label for the error state. */
-  cartRetryLabel?: string
-  /** Recovery action invoked from the error state. */
-  onCartRetry?: () => void
-  /** When `true`, the sheet's checkout action is suppressed (checkout not installed). */
-  checkoutUnavailable?: boolean
-  /** When `true`, the sheet's checkout action is disabled (cart not ready). */
-  checkoutDisabled?: boolean
-  /** When `true`, the sheet's review action is suppressed (cart view not installed). */
-  viewCartUnavailable?: boolean
-  /**
-   * Consumer-supplied classes merged onto the outer `<header>` as the final
-   * argument, so a semantic surface such as `bg-brand-nav
-   * text-brand-nav-foreground` overrides the default `bg-background`. Purely
-   * presentational: no layout, structure, or behavior changes.
-   */
-  className?: string
-}
-
-export function StorefrontNavbar({
-  storeCategories,
-  shippingNote = '',
-  utilityLinks,
-  logoText,
-  logoHref,
-  logoAccent,
-  accountHref,
-  currentPath,
-  showSearch = true,
-  searchQuery: searchQueryProp,
-  onSearchChange,
-  items: itemsProp,
-  onQtyChange: onQtyChangeProp,
-  onRemove: onRemoveProp,
-  subtotal,
-  subtotalUnavailableLabel,
-  formatMoney,
-  user,
-  accountMenuItems,
-  onHelp,
-  onSignOut,
-  accountPending = false,
-  accountUnavailable = false,
-  onAccountRetry,
-  onCheckout,
-  onViewCart,
-  cartOpen,
-  onCartOpenChange,
-  canonicalCart,
-  cartState,
-  cartErrorLabel,
-  cartRetryLabel,
-  onCartRetry,
-  checkoutUnavailable,
-  checkoutDisabled,
-  viewCartUnavailable,
-  className,
-}: StorefrontNavbarProps) {
-  /**
-   * Integration seam
-   * ----------------
-   * Pass cart + search from your storefront, or leave uncontrolled for a
-   * self-contained demo. Controlled props win when provided.
-   */
-  const [internalItems, setInternalItems] = useState<CartItem[]>([])
-  const [internalSearch, setInternalSearch] = useState('')
-  const [searchOpen, setSearchOpen] = useState(false)
-  const [menuOpen, setMenuOpen] = useState(false)
-  const searchTriggerRef = useRef<HTMLButtonElement>(null)
-
-  const items = itemsProp ?? internalItems
-  const searchQuery = searchQueryProp ?? internalSearch
-
-  const setSearchQuery = (value: string) => {
-    onSearchChange?.(value)
-    if (searchQueryProp === undefined) {
-      setInternalSearch(value)
-    }
-  }
-
-  const changeQty =
-    onQtyChangeProp ??
-    ((id: string, delta: number) =>
-      setInternalItems(current =>
-        current.flatMap(item => {
-          if (item.id !== id) {
-            return item
-          }
-
-          const qty = item.qty + delta
-          return qty <= 0 ? [] : [{ ...item, qty }]
-        }),
-      ))
-
-  const removeItem =
-    onRemoveProp ?? ((id: string) => setInternalItems(current => current.filter(item => item.id !== id)))
-
-  const count = useMemo(() => items.reduce((total, item) => total + item.qty, 0), [items])
-
-  useEffect(() => {
-    if (!showSearch || !searchOpen) {
-      return
-    }
-
-    document.getElementById('store-search-mobile')?.focus()
-  }, [searchOpen, showSearch])
-
-  const dismissSearch = () => {
-    setSearchOpen(false)
-    searchTriggerRef.current?.focus()
-  }
-
-  // When the consumer overrides the header surface via `className`, the nav
-  // links inherit its text color and need an explicit hover foreground so
-  // `hover:bg-muted` never paints white-on-light; otherwise they keep the
-  // default foreground (and the default hover surface).
-  const navLinkColor =
-    className !== undefined ? 'text-inherit hover:text-foreground' : 'text-foreground'
-  // The current page is marked beyond color: an accessible current state plus a
-  // visible weight/underline, and nothing when no destination matches.
-  const isCurrent = (href?: string) => href !== undefined && href === currentPath
-
-  // The desktop utility strip is decorative chrome: it is painted only when it
-  // has content (a non-empty note or at least one utility link), never empty.
-  const hasUtilityContent = shippingNote.trim().length > 0 || utilityLinks.length > 0
-
-  return (
-    <header
-      className={cn(
-        'border-border sticky top-0 z-40 w-full border-b backdrop-blur-md',
-        className ?? 'bg-background/95 supports-backdrop-filter:bg-background/80',
-      )}
-    >
-      {hasUtilityContent ? (
-        <div className='bg-foreground text-background hidden lg:block'>
-          <div className='mx-auto flex h-9 w-full max-w-7xl items-center justify-between px-4 text-xs tracking-wide sm:px-6 lg:px-8'>
-            <p className='text-background/80'>{shippingNote}</p>
-            <ul className='flex items-center gap-5'>
-              {utilityLinks.map(link => (
-                <li key={`${link.href}:${link.label}`}>
-                  <a
-                    href={link.href}
-                    className='text-background/80 hover:text-background transition-colors duration-150'
-                  >
-                    {link.label}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </div>
-      ) : null}
-
-      <div className='mx-auto flex h-16 w-full max-w-7xl items-center gap-3 px-4 sm:px-6 lg:px-8'>
-        <Button
-          variant='ghost'
-          size='icon'
-          className='lg:hidden'
-          aria-label='Open menu'
-          aria-expanded={menuOpen}
-          onClick={() => setMenuOpen(open => !open)}
-        >
-          <Menu />
-        </Button>
-
-        <MobileCategoryDrawer
-          categories={uniqueById([
-            ...storeCategories.map(toMenuItem),
-            ...utilityLinks.map(link => ({ id: link.href, label: link.label, href: link.href })),
-            ...(accountHref ? [{ id: accountHref, label: 'Account', href: accountHref }] : []),
-          ])}
-          collections={[]}
-          open={menuOpen}
-          onClose={() => setMenuOpen(false)}
-          viewAllHref=''
-        />
-
-        <div className='flex-1 lg:flex-none'>
-          <Logo text={logoText} href={logoHref} accent={logoAccent} />
-        </div>
-
-        <nav aria-label='Store' className='hidden flex-1 lg:block'>
-          <ul className='flex items-center gap-0.5'>
-            {storeCategories.map(category =>
-              category.children && category.children.length > 0 ? (
-                <li key={category.href} className='group relative'>
-                  <a
-                    href={category.href}
-                    aria-current={isCurrent(category.href) ? 'page' : undefined}
-                    className={cn(
-                      'hover:bg-muted focus-visible:ring-ring rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150 focus-visible:ring-2 focus-visible:outline-none',
-                      category.emphasis ? 'text-destructive' : navLinkColor,
-                      isCurrent(category.href) && 'font-semibold underline underline-offset-4',
-                    )}
-                  >
-                    {category.label}
-                  </a>
-                  <div className='invisible absolute left-0 top-full z-50 pt-2 opacity-0 transition-opacity duration-150 group-hover:visible group-hover:opacity-100'>
-                    <MegaMenu
-                      categories={[toMenuItem(category)]}
-                      collections={[]}
-                      collectionsHref=''
-                      categoryColumnTitle={category.label}
-                    />
-                  </div>
-                </li>
-              ) : (
-                <li key={category.href}>
-                  <a
-                    href={category.href}
-                    aria-current={isCurrent(category.href) ? 'page' : undefined}
-                    className={cn(
-                      'hover:bg-muted focus-visible:ring-ring rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150 focus-visible:ring-2 focus-visible:outline-none',
-                      category.emphasis ? 'text-destructive' : navLinkColor,
-                      isCurrent(category.href) && 'font-semibold underline underline-offset-4',
-                    )}
-                  >
-                    {category.label}
-                  </a>
-                </li>
-              ),
-            )}
-          </ul>
-        </nav>
-
-        <div className='flex items-center gap-1.5'>
-          {showSearch ? (
-            <>
-              <div className='hidden lg:block lg:w-64'>
-                <StorefrontNavbarSearchBar
-                  id='store-search'
-                  value={searchQuery}
-                  onValueChange={setSearchQuery}
-                />
-              </div>
-
-              <Button
-                ref={searchTriggerRef}
-                variant='ghost'
-                size='icon'
-                className='lg:hidden'
-                aria-label='Search products'
-                aria-expanded={searchOpen}
-                onClick={() => setSearchOpen(open => !open)}
-              >
-                {searchOpen ? <X /> : <Search />}
-              </Button>
-            </>
-          ) : null}
-
-          {accountUnavailable ? (
-            <StorefrontNavbarAccountRetry pending={accountPending} onRetry={onAccountRetry} />
-          ) : user ? (
-            <StorefrontNavbarAccountMenu
-              user={user}
-              items={accountMenuItems}
-              onHelp={onHelp}
-              onSignOut={onSignOut}
-              pending={accountPending}
-            />
-          ) : accountHref ? (
-            accountPending ? (
-              <Button variant='ghost' size='icon' className='size-11' disabled aria-label='Loading account session'>
-                <UserRound aria-hidden='true' />
-              </Button>
-            ) : (
-              <Button variant='ghost' size='icon' className='size-11' asChild>
-                <a href={accountHref} aria-label='Account' aria-current={isCurrent(accountHref) ? 'page' : undefined}>
-                  <UserRound aria-hidden='true' />
-                </a>
-              </Button>
-            )
-          ) : null}
-
-          <Sheet
-            {...(cartOpen !== undefined ? { open: cartOpen, onOpenChange: onCartOpenChange } : {})}
-          >
-            <SheetTrigger asChild>
-              <Button
-                variant='ghost'
-                size='icon'
-                className='relative overflow-visible'
-                aria-label={`Cart, ${count} ${count === 1 ? 'item' : 'items'}`}
-              >
-                <ShoppingBag className='size-5' />
-                <CartBadge count={count} />
-              </Button>
-            </SheetTrigger>
-            <SheetContent side='right' className='flex w-full max-w-sm flex-col gap-0 p-0'>
-              <SheetHeader className='border-border border-b'>
-                <SheetTitle className='text-left text-base'>
-                  Cart{count > 0 ? ` (${count})` : ''}
-                </SheetTitle>
-              </SheetHeader>
-              <StorefrontNavbarCartSheet
-                items={items}
-                onQtyChange={changeQty}
-                onRemove={removeItem}
-                subtotal={subtotal}
-                subtotalUnavailableLabel={subtotalUnavailableLabel}
-                formatMoney={formatMoney}
-                onCheckout={onCheckout}
-                onViewCart={onViewCart}
-                canonical={canonicalCart}
-                state={cartState}
-                errorLabel={cartErrorLabel}
-                retryLabel={cartRetryLabel}
-                onRetry={onCartRetry}
-                checkoutUnavailable={checkoutUnavailable}
-                checkoutDisabled={checkoutDisabled}
-                viewCartUnavailable={viewCartUnavailable}
-              />
-            </SheetContent>
-          </Sheet>
-        </div>
-      </div>
-
-      <p aria-live='polite' className='sr-only'>
-        {`Cart contains ${count} ${count === 1 ? 'item' : 'items'}`}
-      </p>
-
-      {showSearch && searchOpen ? (
-        <div className='border-border flex flex-col gap-0 border-t p-4 lg:hidden'>
-          <StorefrontNavbarSearchBar
-            id='store-search-mobile'
-            value={searchQuery}
-            onValueChange={setSearchQuery}
-            onDismiss={dismissSearch}
-          />
-        </div>
-      ) : null}
-    </header>
-  )
-}
-
-export default StorefrontNavbar