@thorprovider/blocks 0.1.0

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

@@ -0,0 +1,271 @@
+'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-category-drawer.test.tsx

@@ -0,0 +1,152 @@
+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('href="/colecciones"')
+    expect(html).toContain('Ver todas')
+    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()
+  })
+})

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

@@ -0,0 +1,276 @@
+'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 = '/colecciones',
+  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>
+                <a
+                  href={viewAllHref}
+                  onClick={handleClose}
+                  className="text-xs font-bold text-primary"
+                >
+                  {viewAllLabel}
+                </a>
+              </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>
+    </>
+  )
+}