@thorprovider/blocks 2.0.0 → 3.0.1

package/src/blocks/e-commerce/navigation/mobile-category-drawer.tsx

@@ -1,278 +0,0 @@
-'use client'
-
-import { ChevronLeft, ChevronRight, X } from 'lucide-react'
-import { useEffect, useState } from 'react'
-import { z } from 'zod'
-
-import {
-  collectionItemSchema,
-  menuItemSchema,
-  type CollectionItem,
-  type MenuItem,
-} from '../../../lib/types/menu'
-import { cn } from '../../../lib/utils'
-import { type CategoryIconName, CategoryIcon } from './category-icon'
-
-type Level = {
-  items: MenuItem[]
-  title: string
-  image?: string
-  href?: string
-}
-
-/**
- * Slide-in drill-down category drawer: a stack-based menu where selecting a
- * category with children pushes a new level, and a back control pops it.
- *
- * Framework-agnostic: plain anchors (no router), `<img>` (no image
- * optimization), copy + hrefs as optional props with ES defaults. The drawer
- * stays MOUNTED while closed and slides in/out with a 200ms transform
- * (reproducing the original behavior); the backdrop renders only while open.
- * Locks body scroll while open. No focus trap (out of scope).
- *
- * Ported from the legacy `@thorprovider/components` navigation library
- * (source: branch `feat/storefronts`).
- */
-export const mobileCategoryDrawerPropsSchema = z.object({
-  categories: z.array(menuItemSchema),
-  collections: z.array(collectionItemSchema),
-  open: z.boolean(),
-  onClose: z.function().returns(z.void()),
-  rootTitle: z.string().optional(),
-  collectionsTitle: z.string().optional(),
-  viewAllLabel: z.string().optional(),
-  viewAllHref: z.string().optional(),
-  closeAriaLabel: z.string().optional(),
-  backAriaLabel: z.string().optional(),
-  menuAriaLabel: z.string().optional(),
-})
-
-export type MobileCategoryDrawerProps = z.infer<
-  typeof mobileCategoryDrawerPropsSchema
->
-
-export function MobileCategoryDrawer({
-  categories,
-  collections,
-  open,
-  onClose,
-  rootTitle = 'Categorías',
-  collectionsTitle = 'Colecciones',
-  viewAllLabel = 'Ver todas',
-  viewAllHref,
-  closeAriaLabel = 'Cerrar menú',
-  backAriaLabel = 'Volver',
-  menuAriaLabel = 'Menú de categorías',
-}: MobileCategoryDrawerProps) {
-  const root: Level = { items: categories, title: rootTitle }
-  const [stack, setStack] = useState<Level[]>([root])
-  const current = stack[stack.length - 1]
-
-  useEffect(() => {
-    if (!open) return
-    const previous = document.body.style.overflow
-    document.body.style.overflow = 'hidden'
-    return () => {
-      document.body.style.overflow = previous
-    }
-  }, [open])
-
-  const push = (item: MenuItem) => {
-    if (item.children?.length) {
-      setStack((levels) => [
-        ...levels,
-        {
-          items: item.children!,
-          title: item.label,
-          image: item.image ?? current.image,
-          href: item.href,
-        },
-      ])
-    }
-  }
-
-  const handleClose = () => {
-    setStack([root])
-    onClose()
-  }
-
-  return (
-    <>
-      {open ? (
-        <button
-          type="button"
-          className="fixed inset-0 z-40 bg-foreground/50 backdrop-blur-sm"
-          aria-label={closeAriaLabel}
-          onClick={handleClose}
-        />
-      ) : null}
-      <div
-        role="dialog"
-        aria-label={menuAriaLabel}
-        aria-modal="true"
-        aria-hidden={!open}
-        className={cn(
-          'fixed inset-y-0 left-0 z-50 flex w-full max-w-sm flex-col overflow-hidden bg-card text-foreground shadow-2xl transition-transform duration-200',
-          open ? 'translate-x-0' : '-translate-x-full',
-        )}
-      >
-        <div className="flex min-h-14 shrink-0 items-center gap-2 border-b bg-primary px-3 text-primary-foreground">
-          {stack.length > 1 && (
-            <button
-              onClick={() => setStack((levels) => levels.slice(0, -1))}
-              aria-label={backAriaLabel}
-              className="rounded-md p-2 hover:bg-primary-foreground/10"
-            >
-              <ChevronLeft className="size-5" />
-            </button>
-          )}
-          <span className="flex-1 truncate text-sm font-bold">
-            {current.title}
-          </span>
-          <button
-            onClick={handleClose}
-            aria-label={closeAriaLabel}
-            className="rounded-md p-2 hover:bg-primary-foreground/10"
-          >
-            <X className="size-5" />
-          </button>
-        </div>
-
-        {current.image && (
-          <div className="relative h-28 shrink-0">
-            <img
-              src={current.image || undefined}
-              alt=""
-              loading="lazy"
-              className="absolute inset-0 h-full w-full object-cover"
-            />
-            <div className="absolute inset-0 bg-foreground/35" />
-            <p className="absolute inset-x-4 bottom-3 text-base font-black text-primary-foreground">
-              {current.title}
-            </p>
-          </div>
-        )}
-
-        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
-          {current.href && (
-            <a
-              href={current.href}
-              onClick={handleClose}
-              className="mx-4 mt-3 flex h-11 items-center justify-between rounded-md bg-primary px-4 text-sm font-bold text-primary-foreground"
-            >
-              Ver todos en {current.title}
-              <ChevronRight className="size-4" aria-hidden="true" />
-            </a>
-          )}
-          <ul className="py-2" role="list">
-            {current.items.map((item) => {
-              const hasChildren = Boolean(item.children?.length)
-              const image = item.image ?? current.image
-              const content = (
-                <>
-                  {image ? (
-                    <span className="relative size-12 shrink-0 overflow-hidden rounded-md">
-                      <img
-                        src={image || undefined}
-                        alt=""
-                        loading="lazy"
-                        className="absolute inset-0 h-full w-full object-cover"
-                      />
-                    </span>
-                  ) : (
-                    <span className="flex size-12 shrink-0 items-center justify-center rounded-md bg-secondary">
-                      <CategoryIcon
-                        name={item.icon as CategoryIconName}
-                        className="size-5 text-muted-foreground"
-                      />
-                    </span>
-                  )}
-                  <span className="min-w-0 flex-1 text-pretty font-semibold leading-snug">
-                    {item.label}
-                  </span>
-                  {item.badge && (
-                    <span className="rounded bg-primary px-1.5 py-0.5 text-[10px] font-bold text-primary-foreground">
-                      {item.badge}
-                    </span>
-                  )}
-                  {hasChildren && (
-                    <ChevronRight className="size-4 shrink-0 text-muted-foreground" />
-                  )}
-                </>
-              )
-              return (
-                <li key={`${item.id}:${item.label}`}>
-                  {hasChildren ? (
-                    <button
-                      onClick={() => push(item)}
-                      className="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm hover:bg-secondary"
-                    >
-                      {content}
-                    </button>
-                  ) : (
-                    <a
-                      href={item.href ?? '#'}
-                      onClick={handleClose}
-                      className="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-secondary"
-                    >
-                      {content}
-                    </a>
-                  )}
-                </li>
-              )
-            })}
-          </ul>
-
-          {stack.length === 1 && (
-            <section
-              className="border-t px-4 py-4"
-              aria-labelledby="mobile-collections-title"
-            >
-              <div className="mb-3 flex items-center justify-between gap-3">
-                <h2
-                  id="mobile-collections-title"
-                  className="text-xs font-black uppercase tracking-wider text-muted-foreground"
-                >
-                  {collectionsTitle}
-                </h2>
-                {viewAllHref && viewAllHref.trim() ? (
-                  <a
-                    href={viewAllHref}
-                    onClick={handleClose}
-                    className="text-xs font-bold text-primary"
-                  >
-                    {viewAllLabel}
-                  </a>
-                ) : null}
-              </div>
-              <div className="grid grid-cols-2 gap-3">
-                {collections.map((collection) => (
-                  <a
-                    key={`${collection.id}:${collection.label}`}
-                    href={collection.href}
-                    onClick={handleClose}
-                    className="group overflow-hidden rounded-lg border bg-background"
-                  >
-                    <div className="relative aspect-square">
-                      <img
-                        src={collection.image || undefined}
-                        alt=""
-                        loading="lazy"
-                        className="absolute inset-0 h-full w-full object-cover transition-transform group-hover:scale-105"
-                      />
-                    </div>
-                    <div className="p-2">
-                      <p className="text-pretty text-xs font-bold leading-snug">
-                        {collection.label}
-                      </p>
-                    </div>
-                  </a>
-                ))}
-              </div>
-            </section>
-          )}
-        </div>
-      </div>
-    </>
-  )
-}

package/src/blocks/e-commerce/navigation/skip-to-content.test.tsx

@@ -1,35 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-
-import { SkipToContent, skipToContentPropsSchema } from './skip-to-content'
-
-describe('SkipToContent', () => {
-  it('parses a valid props object', () => {
-    const result = skipToContentPropsSchema.parse({ targetId: 'main' })
-    expect(result.targetId).toBe('main')
-  })
-
-  it('requires a targetId', () => {
-    expect(() => skipToContentPropsSchema.parse({})).toThrow()
-  })
-
-  it('renders a hidden anchor targeting the content id', () => {
-    const html = renderToStaticMarkup(<SkipToContent targetId="main" />)
-    expect(html).toContain('href="#main"')
-    expect(html).toContain('sr-only')
-    expect(html).toContain('Skip to content')
-  })
-
-  it('honours a custom label', () => {
-    const html = renderToStaticMarkup(
-      <SkipToContent targetId="content" label="Saltar al contenido" />,
-    )
-    expect(html).toContain('Saltar al contenido')
-    expect(html).toContain('href="#content"')
-  })
-
-  it('becomes visible on focus', () => {
-    const html = renderToStaticMarkup(<SkipToContent targetId="main" />)
-    expect(html).toContain('focus:not-sr-only')
-  })
-})

package/src/blocks/e-commerce/navigation/skip-to-content.tsx

@@ -1,37 +0,0 @@
-import { z } from 'zod'
-
-import { cn } from '../../../lib/utils'
-
-export const skipToContentPropsSchema = z.object({
-  targetId: z.string(),
-  label: z.string().optional(),
-  className: z.string().optional(),
-})
-
-export type SkipToContentProps = z.infer<typeof skipToContentPropsSchema>
-
-/**
- * Skip-to-content link (WCAG 2.4.1 Bypass Blocks).
- *
- * Framework-agnostic and prop-driven: a plain anchor to the main content id,
- * visually hidden until it receives focus, then pinned at the top-left with
- * visible contrast. The target element is responsible for carrying the id (and
- * being focusable); this block only renders the bypass affordance.
- */
-export function SkipToContent({
-  targetId,
-  label = 'Skip to content',
-  className,
-}: SkipToContentProps) {
-  return (
-    <a
-      href={`#${targetId}`}
-      className={cn(
-        'sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-[100] focus:rounded-md focus:bg-primary focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-primary-foreground focus:shadow-lg',
-        className,
-      )}
-    >
-      {label}
-    </a>
-  )
-}

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

@@ -1,56 +0,0 @@
-import { Children, isValidElement, type ReactNode } from 'react'
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it, vi } from 'vitest'
-import { StorefrontNavbarAccountMenu } from './storefront-navbar-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('StorefrontNavbarAccountMenu absent avatar', () => {
-  it('renders the fallback initials, never an empty image source, when avatar is absent', () => {
-    const html = renderToStaticMarkup(<StorefrontNavbarAccountMenu 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(<StorefrontNavbarAccountMenu user={{ ...user, avatar: '' }} />)
-    expect(html).toContain('>A<')
-    expect(html).not.toContain('src=""')
-  })
-})
-
-describe('StorefrontNavbarAccountMenu consumer actions', () => {
-  it('omits help and sign-out when no consumer actions exist', () => {
-    expect(menuItems(StorefrontNavbarAccountMenu({ user }))).toEqual([])
-  })
-
-  it('dispatches sign-out to its consumer', () => {
-    const onSignOut = vi.fn()
-    const [item] = menuItems(StorefrontNavbarAccountMenu({ 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(StorefrontNavbarAccountMenu({ user, pending: true, onSignOut }))
-    expect(item.disabled).toBe(true)
-    const select = item.onSelect as () => void
-    select()
-    select()
-    expect(onSignOut).not.toHaveBeenCalled()
-  })
-})

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

@@ -1,134 +0,0 @@
-import { Heart, HelpCircle, LogOut, MapPin, Package, Settings } from 'lucide-react'
-
-import { Avatar, AvatarFallback, AvatarImage } from '../../../ui/avatar'
-import { Button } from '../../../ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '../../../ui/dropdown-menu'
-
-export interface StoreUser {
-  name: string
-  email: string
-  avatar?: string
-  initials: string
-}
-
-export interface AccountMenuItem {
-  label: string
-  href: string
-  description?: string
-  icon?: 'orders' | 'wishlist' | 'addresses' | 'settings'
-}
-
-export interface StorefrontNavbarAccountMenuProps {
-  /** Signed-in user. When omitted, the menu is not rendered. */
-  user?: StoreUser
-  /** Account links shown below the user header. Defaults to `[]`. */
-  items?: AccountMenuItem[]
-  onHelp?: () => void
-  onSignOut?: () => void
-  pending?: boolean
-}
-
-const accountIcons = {
-  orders: Package,
-  wishlist: Heart,
-  addresses: MapPin,
-  settings: Settings,
-} as const
-
-export function StorefrontNavbarAccountMenu({
-  user,
-  items = [],
-  onHelp,
-  onSignOut,
-  pending = false,
-}: StorefrontNavbarAccountMenuProps) {
-  if (!user) {
-    return null
-  }
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant='ghost'
-          size='icon'
-          className='size-11 rounded-full'
-          disabled={pending}
-          aria-label={`Account menu for ${user.name}`}
-        >
-          <Avatar size='sm' className='pointer-events-none size-8'>
-            <AvatarImage src={user.avatar || undefined} alt='' />
-            <AvatarFallback>{user.initials}</AvatarFallback>
-          </Avatar>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        align='end'
-        sideOffset={8}
-        className='w-64 origin-(--transform-origin) p-1.5 duration-[250ms] data-closed:duration-150'
-      >
-        <DropdownMenuGroup>
-          <DropdownMenuLabel className='px-2 py-2 font-normal'>
-            <div className='flex items-center gap-3'>
-              <Avatar size='sm' className='pointer-events-none'>
-                <AvatarImage src={user.avatar || undefined} alt='' />
-                <AvatarFallback>{user.initials}</AvatarFallback>
-              </Avatar>
-              <div className='min-w-0'>
-                <p className='text-foreground truncate text-sm font-medium'>{user.name}</p>
-                <p className='text-muted-foreground truncate text-xs'>{user.email}</p>
-              </div>
-            </div>
-          </DropdownMenuLabel>
-          {items.length > 0 ? <DropdownMenuSeparator /> : null}
-          {items.map(item => {
-            const Icon = item.icon ? accountIcons[item.icon] : Package
-            return (
-              <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'>
-                    <span className='text-sm'>{item.label}</span>
-                    {item.description ? (
-                      <span className='text-muted-foreground text-xs font-normal'>{item.description}</span>
-                    ) : null}
-                  </span>
-                </a>
-              </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>
-  )
-}