@thorprovider/blocks 2.0.0 → 3.0.0

package/src/blocks/e-commerce/navigation/mega-menu.tsx

@@ -1,271 +0,0 @@
-'use client'
-
-import { ChevronRight } from 'lucide-react'
-import { useState } from 'react'
-import { z } from 'zod'
-
-import {
-  collectionItemSchema,
-  menuItemSchema,
-  type MenuItem,
-} from '../../../lib/types/menu'
-import { cn } from '../../../lib/utils'
-import { CategoryIcon, categoryIconNameSchema } from './category-icon'
-
-/**
- * Three-level category flyout: L1 categories, L2 subcategories, L3 sub-sub
- * categories, plus a right panel with a featured image and collection links.
- *
- * Framework-agnostic and prop-driven: plain anchors replace router links,
- * `loading="lazy"` images replace next/image, and Spanish copy/hrefs are
- * optional props with ES defaults. `onNavigate` lets the tenant close the
- * flyout on navigation; `collectionsHref` controls the "view all" link
- * (pass `''` to hide it).
- *
- * Ported from the legacy `@thorprovider/components` navigation library
- * (source: branch `feat/storefronts`).
- */
-
-export const megaMenuPropsSchema = z.object({
-  categories: z.array(menuItemSchema),
-  collections: z.array(collectionItemSchema),
-  onNavigate: z.custom<() => void>().optional(),
-  categoryColumnTitle: z.string().optional(),
-  collectionsTitle: z.string().optional(),
-  viewAllLabel: z.string().optional(),
-  collectionsHref: z.string().optional(),
-  ariaLabel: z.string().optional(),
-})
-
-export type MegaMenuProps = z.infer<typeof megaMenuPropsSchema>
-
-function MegaMenuColumn({
-  title,
-  items,
-  activeId,
-  onHover,
-  onNavigate,
-  level,
-  scrollable = false,
-}: {
-  title?: string
-  items: MenuItem[]
-  activeId?: string
-  onHover?: (item: MenuItem) => void
-  onNavigate?: () => void
-  level: 1 | 2 | 3
-  scrollable?: boolean
-}) {
-  return (
-    <div className="flex min-h-0 flex-1 flex-col">
-      {title ? (
-        <p className="shrink-0 px-3 pb-1 pt-3 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
-          {title}
-        </p>
-      ) : null}
-      <ul
-        className={cn('flex-1 py-1', scrollable ? 'overflow-y-auto' : '')}
-        role="list"
-      >
-        {items.map((item) => {
-          const isActive = item.id === activeId
-          const hasChildren = Boolean(item.children && item.children.length > 0)
-          const parsedIcon = categoryIconNameSchema.safeParse(item.icon)
-          const iconName = parsedIcon.success ? parsedIcon.data : undefined
-          return (
-            <li key={item.id}>
-              <a
-                href={item.href ?? '#'}
-                className={cn(
-                  'group/item flex items-center gap-2.5 px-3 py-2 text-sm transition-colors',
-                  isActive
-                    ? 'bg-secondary font-semibold text-primary'
-                    : 'text-foreground hover:bg-secondary/60',
-                )}
-                onMouseEnter={() => onHover?.(item)}
-                onClick={() => {
-                  onHover?.(item)
-                  onNavigate?.()
-                }}
-                aria-current={isActive ? 'true' : undefined}
-              >
-                {level === 1 ? (
-                  item.image ? (
-                    <img
-                      src={item.image || undefined}
-                      alt=""
-                      loading="lazy"
-                      className="size-7 shrink-0 rounded object-cover"
-                    />
-                  ) : (
-                    <CategoryIcon
-                      name={iconName}
-                      className="size-4 shrink-0 text-muted-foreground group-hover/item:text-primary"
-                    />
-                  )
-                ) : null}
-                {level === 2 && item.image ? (
-                  <img
-                    src={item.image || undefined}
-                    alt=""
-                    loading="lazy"
-                    className="size-6 shrink-0 rounded object-cover"
-                  />
-                ) : null}
-                <span className="flex-1 leading-tight">{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>
-                ) : null}
-                {hasChildren ? (
-                  <ChevronRight
-                    className={cn(
-                      'size-3.5 shrink-0 transition-transform',
-                      isActive ? 'text-primary' : 'text-muted-foreground',
-                    )}
-                  />
-                ) : null}
-              </a>
-            </li>
-          )
-        })}
-      </ul>
-    </div>
-  )
-}
-
-export function MegaMenu({
-  categories,
-  collections,
-  onNavigate,
-  categoryColumnTitle = 'Comprar por categorías',
-  collectionsTitle = 'Colecciones',
-  viewAllLabel = 'Ver todas las colecciones',
-  collectionsHref = '/colecciones',
-  ariaLabel = 'Menú de categorías',
-}: MegaMenuProps) {
-  const [activeL1, setActiveL1] = useState<MenuItem>(categories[0])
-  const [activeL2, setActiveL2] = useState<MenuItem | undefined>(
-    categories[0]?.children?.[0],
-  )
-
-  const handleL1Hover = (item: MenuItem) => {
-    setActiveL1(item)
-    setActiveL2(item.children?.[0])
-  }
-
-  const l2Items = activeL1?.children ?? []
-  const l3Items = activeL2?.children ?? []
-
-  const featuredImage = activeL2?.image ?? activeL1?.image
-
-  return (
-    <div
-      className="flex h-[520px] overflow-hidden rounded-b-lg border border-t-0 bg-card shadow-xl"
-      role="dialog"
-      aria-label={ariaLabel}
-    >
-      <div className="flex w-56 min-w-0 shrink-0 flex-col overflow-hidden border-r">
-        <MegaMenuColumn
-          title={categoryColumnTitle}
-          items={categories}
-          activeId={activeL1?.id}
-          onHover={handleL1Hover}
-          onNavigate={onNavigate}
-          level={1}
-          scrollable
-        />
-      </div>
-
-      {l2Items.length > 0 ? (
-        <div className="flex w-56 min-w-0 shrink-0 flex-col overflow-hidden border-r">
-          <MegaMenuColumn
-            title={activeL1?.label}
-            items={l2Items}
-            activeId={activeL2?.id}
-            onHover={(item) => setActiveL2(item)}
-            onNavigate={onNavigate}
-            level={2}
-            scrollable
-          />
-        </div>
-      ) : null}
-
-      {l3Items.length > 0 ? (
-        <div className="flex w-52 min-w-0 shrink-0 flex-col overflow-hidden border-r">
-          <MegaMenuColumn
-            title={activeL2?.label}
-            items={l3Items}
-            onNavigate={onNavigate}
-            level={3}
-            scrollable
-          />
-        </div>
-      ) : null}
-
-      <div className="flex min-w-0 flex-1 flex-col">
-        {featuredImage ? (
-          <a
-            href={activeL2?.href ?? activeL1?.href ?? '#'}
-            onClick={onNavigate}
-            className="group relative block h-44 shrink-0 overflow-hidden"
-          >
-            <img
-              src={featuredImage || undefined}
-              alt={activeL2?.label ?? activeL1?.label ?? ''}
-              loading="lazy"
-              className="size-full object-cover transition-transform duration-300 group-hover:scale-105"
-            />
-            <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent" />
-            <p className="absolute bottom-2 left-3 right-3 text-xs font-bold leading-tight text-white">
-              {activeL2?.label ?? activeL1?.label}
-            </p>
-          </a>
-        ) : null}
-
-        <div className="flex flex-1 flex-col overflow-y-auto">
-          <p className="shrink-0 px-3 pb-2 pt-3 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
-            {collectionsTitle}
-          </p>
-          <div className="flex flex-col gap-1 px-3 pb-3">
-            {collections.map((col) => (
-              <a
-                key={col.id}
-                href={col.href}
-                className="group flex items-center gap-3 rounded-md p-1.5 transition-colors hover:bg-secondary/60"
-              >
-                <img
-                  src={col.image || undefined}
-                  alt=""
-                  loading="lazy"
-                  className="size-12 shrink-0 rounded-md object-cover transition-transform duration-300 group-hover:scale-105"
-                />
-                <div className="min-w-0">
-                  <p className="truncate text-xs font-semibold leading-tight text-foreground">
-                    {col.label}
-                  </p>
-                  {col.description ? (
-                    <p className="truncate text-[11px] text-muted-foreground">
-                      {col.description}
-                    </p>
-                  ) : null}
-                </div>
-              </a>
-            ))}
-          </div>
-        </div>
-        {collectionsHref ? (
-          <div className="border-t p-3">
-            <a
-              href={collectionsHref}
-              className="block rounded-md bg-secondary px-3 py-2.5 text-center text-xs font-bold text-foreground hover:bg-secondary/70"
-            >
-              {viewAllLabel}
-            </a>
-          </div>
-        ) : null}
-      </div>
-    </div>
-  )
-}

package/src/blocks/e-commerce/navigation/mobile-bottom-nav.test.tsx

@@ -1,74 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-
-import {
-  MobileBottomNav,
-  mobileBottomNavItemSchema,
-  mobileBottomNavPropsSchema,
-} from './mobile-bottom-nav'
-
-describe('MobileBottomNav', () => {
-  it('parses a valid props object', () => {
-    const result = mobileBottomNavPropsSchema.parse({
-      items: [{ label: 'Home', href: '/', icon: 'home' }],
-    })
-    expect(result.items).toHaveLength(1)
-  })
-
-  it('requires a label and href on each item', () => {
-    expect(() => mobileBottomNavItemSchema.parse({ label: 'Home' })).toThrow()
-  })
-
-  it('rejects an unknown icon name at the boundary', () => {
-    expect(() =>
-      mobileBottomNavItemSchema.parse({
-        label: 'Home',
-        href: '/',
-        icon: 'not-an-icon',
-      }),
-    ).toThrow()
-  })
-
-  it('renders nothing when there are no destinations', () => {
-    expect(renderToStaticMarkup(<MobileBottomNav items={[]} />)).toBe('')
-  })
-
-  it('renders a labelled, mobile-only landmark offset by the safe area', () => {
-    const html = renderToStaticMarkup(
-      <MobileBottomNav
-        items={[
-          { label: 'Home', href: '/', icon: 'home' },
-          { label: 'Store', href: '/categories/all', icon: 'store' },
-        ]}
-      />,
-    )
-    expect(html).toContain('aria-label="Primary"')
-    expect(html).toContain('md:hidden')
-    expect(html).toContain('env(safe-area-inset-bottom)')
-    expect(html).toContain('h-14')
-  })
-
-  it('marks the current destination accessibly and with a non-colour cue', () => {
-    const html = renderToStaticMarkup(
-      <MobileBottomNav
-        currentHref="/categories/all"
-        items={[
-          { label: 'Home', href: '/', icon: 'home' },
-          { label: 'Store', href: '/categories/all', icon: 'store' },
-        ]}
-      />,
-    )
-    expect(html).toContain('aria-current="page"')
-    expect(html).toContain('font-semibold')
-  })
-
-  it('marks no destination when the current href matches none', () => {
-    const html = renderToStaticMarkup(
-      <MobileBottomNav
-        currentHref="/unknown"
-        items={[{ label: 'Home', href: '/', icon: 'home' }]}
-      />,
-    )
-    expect(html).not.toContain('aria-current')
-  })
-})

package/src/blocks/e-commerce/navigation/mobile-bottom-nav.tsx

@@ -1,78 +0,0 @@
-import { z } from 'zod'
-
-import { cn } from '../../../lib/utils'
-import { type CategoryIconName, CategoryIcon, categoryIconNameSchema } from './category-icon'
-
-export const mobileBottomNavItemSchema = z.object({
-  id: z.string().optional(),
-  label: z.string(),
-  href: z.string(),
-  icon: categoryIconNameSchema.optional(),
-})
-
-export type MobileBottomNavItem = z.infer<typeof mobileBottomNavItemSchema>
-
-export const mobileBottomNavPropsSchema = z.object({
-  items: z.array(mobileBottomNavItemSchema),
-  currentHref: z.string().optional(),
-  ariaLabel: z.string().optional(),
-  className: z.string().optional(),
-})
-
-export type MobileBottomNavProps = z.infer<typeof mobileBottomNavPropsSchema>
-
-/**
- * Mobile-only bottom navigation offering the primary destinations.
- *
- * Framework-agnostic and prop-driven: plain anchors (no router). Hidden at
- * `md` and up; offsets the iOS home indicator via `env(safe-area-inset-bottom)`;
- * each destination meets the 44px minimum touch target. The current
- * destination is marked with `aria-current="page"` and a non-colour cue (weight
- * + indicator bar), never colour alone.
- */
-export function MobileBottomNav({
-  items,
-  currentHref,
-  ariaLabel = 'Primary',
-  className,
-}: MobileBottomNavProps) {
-  if (items.length === 0) return null
-
-  return (
-    <nav
-      aria-label={ariaLabel}
-      className={cn(
-        'fixed inset-x-0 bottom-0 z-40 border-t bg-card text-foreground md:hidden',
-        className,
-      )}
-      style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
-    >
-      <ul className="flex">
-        {items.map((item) => {
-          const active = currentHref !== undefined && item.href === currentHref
-          return (
-            <li key={item.id ?? item.href} className="relative flex-1">
-              {active ? (
-                <span
-                  aria-hidden="true"
-                  className="absolute inset-x-0 top-0 mx-auto h-0.5 w-8 rounded-full bg-primary"
-                />
-              ) : null}
-              <a
-                href={item.href}
-                aria-current={active ? 'page' : undefined}
-                className={cn(
-                  'flex h-14 flex-col items-center justify-center gap-0.5 text-xs text-muted-foreground',
-                  active && 'font-semibold text-primary',
-                )}
-              >
-                <CategoryIcon name={item.icon} className="size-5" />
-                <span className="truncate">{item.label}</span>
-              </a>
-            </li>
-          )
-        })}
-      </ul>
-    </nav>
-  )
-}

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

@@ -1,192 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-
-import type { CollectionItem, MenuItem } from '../../../lib/types/menu'
-import {
-  MobileCategoryDrawer,
-  mobileCategoryDrawerPropsSchema,
-} from './mobile-category-drawer'
-
-const categories: MenuItem[] = [
-  {
-    id: 'cat-1',
-    label: 'Electrodomésticos',
-    icon: 'refrigerator',
-    children: [
-      { id: 'sub-1', label: 'Neveras', href: '/neveras' },
-      { id: 'sub-2', label: 'Lavadoras', href: '/lavadoras' },
-    ],
-  },
-  { id: 'cat-2', label: 'Herramientas', icon: 'wrench', href: '/herramientas' },
-]
-
-const collections: CollectionItem[] = [
-  {
-    id: 'col-1',
-    label: 'Ofertas',
-    image: '/ofertas.jpg',
-    href: '/colecciones/ofertas',
-  },
-  {
-    id: 'col-2',
-    label: 'Novedades',
-    image: '/novedades.jpg',
-    href: '/colecciones/novedades',
-  },
-]
-
-describe('MobileCategoryDrawer', () => {
-  it('keeps the drawer mounted off-screen with aria-hidden when closed', () => {
-    const html = renderToStaticMarkup(
-      <MobileCategoryDrawer
-        categories={categories}
-        collections={collections}
-        open={false}
-        onClose={() => {}}
-      />,
-    )
-    // Drawer stays mounted so it can slide in; hidden + translated off-screen.
-    expect(html).toContain('role="dialog"')
-    expect(html).toContain('aria-hidden="true"')
-    expect(html).toContain('-translate-x-full')
-    // No backdrop when closed.
-    expect(html).not.toContain('backdrop-blur-sm')
-  })
-
-  it('renders the category drill-down when open=true', () => {
-    const html = renderToStaticMarkup(
-      <MobileCategoryDrawer
-        categories={categories}
-        collections={collections}
-        open
-        onClose={() => {}}
-      />,
-    )
-    expect(html).toContain('role="dialog"')
-    expect(html).toContain('aria-modal="true"')
-    expect(html).toContain('aria-label="Menú de categorías"')
-    expect(html).toContain('translate-x-0')
-    expect(html).toContain('Electrodomésticos')
-    expect(html).toContain('Herramientas')
-    expect(html).toContain('role="list"')
-    expect(html).toContain('href="/herramientas"')
-    // Category with children renders as a push button (drill-down affordance)
-    expect(html).toContain('<button')
-  })
-
-  it('renders close control with aria-label and no back control at root level', () => {
-    const html = renderToStaticMarkup(
-      <MobileCategoryDrawer
-        categories={categories}
-        collections={collections}
-        open
-        onClose={() => {}}
-      />,
-    )
-    expect(html).toContain('aria-label="Cerrar menú"')
-    // Back control only appears after drilling in (stack.length > 1), which
-    // requires interaction not reachable via renderToStaticMarkup.
-    expect(html).not.toContain('aria-label="Volver"')
-  })
-
-  it('renders the collections grid', () => {
-    const html = renderToStaticMarkup(
-      <MobileCategoryDrawer
-        categories={categories}
-        collections={collections}
-        open
-        onClose={() => {}}
-      />,
-    )
-    expect(html).toContain('Colecciones')
-    expect(html).toContain('Ofertas')
-    expect(html).toContain('Novedades')
-    expect(html).toContain('href="/colecciones/ofertas"')
-    expect(html).toContain('grid grid-cols-2')
-  })
-
-  it('applies copy overrides', () => {
-    const html = renderToStaticMarkup(
-      <MobileCategoryDrawer
-        categories={categories}
-        collections={collections}
-        open
-        onClose={() => {}}
-        rootTitle="Mis Categorías"
-        collectionsTitle="Mis Colecciones"
-        viewAllLabel="Explorar todo"
-        viewAllHref="/tienda/todas"
-        closeAriaLabel="Cerrar"
-        menuAriaLabel="Navegación"
-      />,
-    )
-    expect(html).toContain('Mis Categorías')
-    expect(html).toContain('Mis Colecciones')
-    expect(html).toContain('Explorar todo')
-    expect(html).toContain('href="/tienda/todas"')
-    expect(html).toContain('aria-label="Cerrar"')
-    expect(html).toContain('aria-label="Navegación"')
-  })
-
-  it('parses a valid props object', () => {
-    const result = mobileCategoryDrawerPropsSchema.parse({
-      categories,
-      collections,
-      open: true,
-      onClose: () => {},
-    })
-    expect(result.categories).toHaveLength(2)
-  })
-
-  it('rejects props missing categories at the schema boundary', () => {
-    expect(() =>
-      mobileCategoryDrawerPropsSchema.parse({
-        collections,
-        open: true,
-        onClose: () => {},
-      }),
-    ).toThrow()
-  })
-})
-
-describe('MobileCategoryDrawer — view-all link requires a served href', () => {
-  const base = { categories, collections, open: true, onClose: () => {} }
-
-  it('omits the link and never emits an empty href when viewAllHref is omitted', () => {
-    const html = renderToStaticMarkup(<MobileCategoryDrawer {...base} />)
-    expect(html).not.toContain('Ver todas')
-    expect(html).not.toContain('href=""')
-  })
-
-  it('omits the link when viewAllHref is an empty string', () => {
-    const html = renderToStaticMarkup(<MobileCategoryDrawer {...base} viewAllHref="" />)
-    expect(html).not.toContain('Ver todas')
-    expect(html).not.toContain('href=""')
-  })
-
-  it('omits the link when viewAllHref is whitespace only', () => {
-    const html = renderToStaticMarkup(<MobileCategoryDrawer {...base} viewAllHref="   " />)
-    expect(html).not.toContain('Ver todas')
-    expect(html).not.toContain('href=""')
-  })
-
-  it('renders the link when a served path is supplied', () => {
-    const html = renderToStaticMarkup(
-      <MobileCategoryDrawer {...base} viewAllHref="/tienda/todas" />,
-    )
-    expect(html).toContain('href="/tienda/todas"')
-    expect(html).toContain('Ver todas')
-  })
-
-  it('renders a custom label with the served path', () => {
-    const html = renderToStaticMarkup(
-      <MobileCategoryDrawer
-        {...base}
-        viewAllHref="/tienda/todas"
-        viewAllLabel="Explorar todo"
-      />,
-    )
-    expect(html).toContain('href="/tienda/todas"')
-    expect(html).toContain('Explorar todo')
-  })
-})