@arroyavecommerce/theme-kinetic 0.2.0

package/src/chrome/mega-menu.test.tsx

@@ -0,0 +1,161 @@
+import { readFileSync } from "node:fs"
+import { fileURLToPath } from "node:url"
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import {
+  MegaMenu,
+  megaMenuSchema,
+  megaMenuDefaults,
+  type MegaMenuData,
+  type MegaMenuVariante,
+} from "./mega-menu"
+import { mockCtx } from "../test/mock-ctx"
+
+const columnas = [
+  {
+    titulo: "Superiores",
+    enlaces: [
+      { texto: "Camisetas", href: "/ropa/camisetas" },
+      { texto: "Hoodies y buzos", href: "/ropa/hoodies" },
+    ],
+  },
+  {
+    titulo: "Inferiores",
+    enlaces: [{ texto: "Jeans", href: "/ropa/jeans" }],
+  },
+  {
+    titulo: "Colecciones",
+    enlaces: [{ texto: "Nuevos drops", href: "/colecciones/nuevos-drops" }],
+  },
+]
+
+const destacado = {
+  imagenUrl: "https://ejemplo.com/drop-07.jpg",
+  titulo: "Drop 07 — En la calle",
+  href: "/colecciones/drop-07",
+}
+const destacado2 = {
+  imagenUrl: "https://ejemplo.com/drop-08.jpg",
+  titulo: "Drop 08 — Neón",
+  href: "/colecciones/drop-08",
+}
+
+const verTodo = { texto: "Ver todo", href: "/novedades" }
+
+const base = (overrides?: Partial<MegaMenuData>): MegaMenuData => ({
+  variante: "columnas",
+  columnas,
+  destacados: [],
+  ...overrides,
+})
+
+const render = (megaMenu: MegaMenuData) =>
+  renderToStaticMarkup(<MegaMenu megaMenu={megaMenu} ctx={mockCtx()} />)
+
+const VARIANTES: MegaMenuVariante[] = ["columnas", "columnas-imagen", "grid-imagenes", "simple"]
+
+describe("MegaMenu", () => {
+  it("los defaults pasan el schema", () => {
+    expect(megaMenuSchema.safeParse(megaMenuDefaults).success).toBe(true)
+  })
+
+  it("el schema declara las 4 variantes como segmented", () => {
+    const variante = megaMenuSchema.shape.variante
+    expect(variante.description).toBe("segmented")
+    expect(Object.keys(variante.def.entries)).toEqual(VARIANTES)
+  })
+
+  for (const variante of VARIANTES) {
+    describe(`variante ${variante}`, () => {
+      it("renderiza sin crash con columnas + destacados + verTodo", () => {
+        const html = render(base({ variante, destacados: [destacado, destacado2], verTodo }))
+        expect(html).toContain("<div")
+      })
+
+      it("está oculto en mobile (hidden md:)", () => {
+        const html = render(base({ variante }))
+        expect(html).toContain("hidden")
+        expect(html).toMatch(/md:(grid|block)/)
+      })
+
+      it("muestra verTodo cuando está presente", () => {
+        const html = render(base({ variante, verTodo }))
+        expect(html).toContain(verTodo.texto)
+        expect(html).toContain(`href="${verTodo.href}"`)
+      })
+
+      it("sin verTodo no lo muestra", () => {
+        const html = render(base({ variante }))
+        expect(html).not.toContain(`href="${verTodo.href}"`)
+      })
+    })
+  }
+
+  it("columnas: pinta títulos y enlaces via ctx.componentes.Enlace", () => {
+    const html = render(base({ variante: "columnas" }))
+    for (const columna of columnas) {
+      expect(html).toContain(columna.titulo)
+      for (const enlace of columna.enlaces) {
+        expect(html).toContain(enlace.texto)
+        expect(html).toContain(`href="${enlace.href}"`)
+      }
+    }
+  })
+
+  it("columnas: NO muestra los destacados aunque se pasen", () => {
+    const html = render(base({ variante: "columnas", destacados: [destacado] }))
+    expect(html).not.toContain(`href="${destacado.href}"`)
+    expect(html).not.toContain(`src="${destacado.imagenUrl}"`)
+  })
+
+  it("columnas-imagen: muestra la imagen destacada y su enlace", () => {
+    const html = render(base({ variante: "columnas-imagen", destacados: [destacado] }))
+    expect(html).toContain(`href="${destacado.href}"`)
+    expect(html).toContain(`src="${destacado.imagenUrl}"`)
+    expect(html).toContain(destacado.titulo)
+  })
+
+  it("columnas-imagen: admite MÁS DE UN destacado", () => {
+    const html = render(base({ variante: "columnas-imagen", destacados: [destacado, destacado2] }))
+    expect(html).toContain(`href="${destacado.href}"`)
+    expect(html).toContain(`href="${destacado2.href}"`)
+    expect(html).toContain(`src="${destacado.imagenUrl}"`)
+    expect(html).toContain(`src="${destacado2.imagenUrl}"`)
+  })
+
+  it("grid-imagenes: renderiza todos los destacados como grid de imágenes", () => {
+    const html = render(base({ variante: "grid-imagenes", destacados: [destacado, destacado2] }))
+    expect(html).toContain(`src="${destacado.imagenUrl}"`)
+    expect(html).toContain(`src="${destacado2.imagenUrl}"`)
+    expect(html).toContain(destacado.titulo)
+    expect(html).toContain(destacado2.titulo)
+  })
+
+  it("simple: pinta las columnas pero NO los destacados", () => {
+    const html = render(base({ variante: "simple", destacados: [destacado] }))
+    expect(html).toContain(columnas[0].titulo)
+    expect(html).not.toContain(`src="${destacado.imagenUrl}"`)
+  })
+
+  it("destacado con imagenUrl vacío usa el placeholder (sin <img src=\"\">)", () => {
+    const html = render(
+      base({ variante: "columnas-imagen", destacados: [{ ...destacado, imagenUrl: "" }] }),
+    )
+    expect(html).not.toContain('<img src=""')
+    expect(html).toContain('role="img"')
+  })
+
+  it("aplica la clase de animación de apertura (cms-mega-panel)", () => {
+    const html = render(base({ variante: "columnas" }))
+    expect(html).toContain("cms-mega-panel")
+    expect(html).toContain("prefers-reduced-motion")
+  })
+
+  it("no emite <a> ni <img> directos: todo pasa por ctx.componentes", () => {
+    const rutaFuente = fileURLToPath(new URL("./mega-menu.tsx", import.meta.url))
+    const fuente = readFileSync(rutaFuente, "utf-8")
+
+    expect(fuente).not.toMatch(/<a[\s>]/)
+    expect(fuente).not.toMatch(/<img[\s>]/)
+  })
+})

package/src/chrome/mega-menu.tsx

@@ -0,0 +1,317 @@
+import { z } from "zod"
+import type { RenderContext } from "../context"
+
+/**
+ * MegaMenu de escritorio — estética "Kinetic Street" (superficie con radio y
+ * sombra suaves, barra de degradado, tokens `--cms-*` CON fallback). Es
+ * PRESENTACIONAL (sin estado): la apertura la controla el header vía
+ * `group-hover`/`group-focus-within` en el `<nav>` que lo envuelve. Oculto en
+ * mobile (`hidden md:block`) — en mobile el mismo contenido va al DrawerMovil.
+ *
+ * 100% editable/combinable desde el CMS: su schema Zod vive acá (co-locado) y
+ * el header lo re-usa anidado en `HeaderProps.megaMenu`, así el ChromeEditor
+ * autogenera los controles sin acoplar el header a la forma del mega-menú.
+ *
+ * Variantes (`variante`, `.describe("segmented")`):
+ *   - `columnas`        → grid de columnas de enlaces.
+ *   - `columnas-imagen` → columnas + celda(s) destacada(s) con imagen al lado.
+ *   - `grid-imagenes`   → grid de tarjetas de imagen (destacados) + enlaces.
+ *   - `simple`          → lista compacta de una sola columna (dropdown liviano).
+ *
+ * Campos editables: `columnas` (lista de `{ titulo, enlaces[] }`), `destacados`
+ * (lista de `{ imagenUrl, titulo, href }`, se permite MÁS DE UNO) y `verTodo`
+ * opcional (`{ texto, href }`). Las imágenes pasan por `ctx.componentes.Imagen`.
+ */
+
+// ── Schema (co-locado; el header lo re-usa) ──────────────────────────────────
+
+export const megaMenuEnlaceSchema = z.object({
+  texto: z.string().min(1),
+  href: z.string().min(1),
+})
+export const megaMenuColumnaSchema = z.object({
+  titulo: z.string().min(1),
+  enlaces: z.array(megaMenuEnlaceSchema),
+})
+export const megaMenuDestacadoSchema = z.object({
+  imagenUrl: z.string(),
+  titulo: z.string().min(1),
+  href: z.string().min(1),
+})
+export const megaMenuVerTodoSchema = z.object({
+  texto: z.string().min(1),
+  href: z.string().min(1),
+})
+export const megaMenuSchema = z.object({
+  variante: z
+    .enum(["columnas", "columnas-imagen", "grid-imagenes", "simple"])
+    .describe("segmented"),
+  columnas: z.array(megaMenuColumnaSchema),
+  destacados: z.array(megaMenuDestacadoSchema),
+  verTodo: megaMenuVerTodoSchema.optional(),
+})
+
+export type MegaMenuEnlace = z.infer<typeof megaMenuEnlaceSchema>
+export type MegaMenuColumna = z.infer<typeof megaMenuColumnaSchema>
+export type MegaMenuDestacado = z.infer<typeof megaMenuDestacadoSchema>
+export type MegaMenuVerTodo = z.infer<typeof megaMenuVerTodoSchema>
+export type MegaMenuData = z.infer<typeof megaMenuSchema>
+export type MegaMenuVariante = MegaMenuData["variante"]
+
+export const megaMenuDefaults: MegaMenuData = {
+  variante: "columnas-imagen",
+  columnas: [
+    {
+      titulo: "Superiores",
+      enlaces: [
+        { texto: "Camisetas", href: "/ropa/camisetas" },
+        { texto: "Hoodies y buzos", href: "/ropa/hoodies" },
+      ],
+    },
+    {
+      titulo: "Inferiores",
+      enlaces: [{ texto: "Jeans", href: "/ropa/jeans" }],
+    },
+    {
+      titulo: "Colecciones",
+      enlaces: [{ texto: "Nuevos drops", href: "/colecciones/nuevos-drops" }],
+    },
+  ],
+  destacados: [
+    { imagenUrl: "", titulo: "Drop 07 — En la calle", href: "/colecciones/drop-07" },
+  ],
+  verTodo: { texto: "Ver todo", href: "/novedades" },
+}
+
+// ── Transición de apertura (respeta prefers-reduced-motion) ──────────────────
+
+/**
+ * El panel pasa de `display:none` a `display:block` (group-hover en el header):
+ * ese cambio RE-DISPARA la animación CSS, así que basta un keyframe en el panel.
+ */
+function EstiloMega() {
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html:
+          "@keyframes cms-mega-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}" +
+          ".cms-mega-panel{animation:cms-mega-in .18s ease-out}" +
+          "@media (prefers-reduced-motion: reduce){.cms-mega-panel{animation:none}}",
+      }}
+    />
+  )
+}
+
+// ── Piezas de render ─────────────────────────────────────────────────────────
+
+const claseTituloColumna = "text-[11px] font-semibold uppercase tracking-[0.1em]"
+
+function Columna({ columna, ctx }: { columna: MegaMenuColumna; ctx: RenderContext }) {
+  const { Enlace } = ctx.componentes
+  return (
+    <div className="flex flex-col gap-2.5 text-[12.5px]">
+      <p className={`m-0 ${claseTituloColumna}`} style={{ color: "var(--cms-texto-suave,#6b675e)" }}>
+        {columna.titulo}
+      </p>
+      {columna.enlaces.map((enlace) => (
+        <Enlace key={enlace.href} href={enlace.href} className="block transition-opacity hover:opacity-70">
+          {enlace.texto}
+        </Enlace>
+      ))}
+    </div>
+  )
+}
+
+function Destacado({
+  destacado,
+  ctx,
+  alto = "h-[180px]",
+}: {
+  destacado: MegaMenuDestacado
+  ctx: RenderContext
+  alto?: string
+}) {
+  const { Imagen, Enlace } = ctx.componentes
+  return (
+    <Enlace
+      href={destacado.href}
+      className={`relative block overflow-hidden ${alto}`}
+    >
+      <span
+        className="absolute inset-0 block"
+        style={{ borderRadius: "var(--cms-radio-md,14px)", overflow: "hidden" }}
+      >
+        <Imagen
+          src={destacado.imagenUrl}
+          alt={destacado.titulo}
+          className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 hover:scale-105"
+        />
+        <span
+          className="absolute inset-x-0 bottom-0 block px-3.5 pb-3 pt-9 text-[13px] font-semibold text-white"
+          style={{ background: "linear-gradient(transparent, rgba(0,0,0,.65))" }}
+        >
+          {destacado.titulo}
+        </span>
+      </span>
+    </Enlace>
+  )
+}
+
+function VerTodo({ verTodo, ctx }: { verTodo: MegaMenuVerTodo; ctx: RenderContext }) {
+  const { Enlace } = ctx.componentes
+  return (
+    <div className="mt-6 pt-4" style={{ borderTop: "var(--cms-grosor-borde,1px) solid var(--cms-borde,#dbd6c9)" }}>
+      <Enlace
+        href={verTodo.href}
+        className="inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-[0.1em] transition-opacity hover:opacity-70"
+      >
+        {verTodo.texto}
+        <span aria-hidden>→</span>
+      </Enlace>
+    </div>
+  )
+}
+
+/** Barra fina de degradado kinético en el borde superior del panel. */
+function BarraKinetic() {
+  return (
+    <div
+      aria-hidden
+      style={{
+        height: "4px",
+        background: "var(--cms-degradado,linear-gradient(120deg,#3b2bff,#ff3b2e))",
+        borderTopLeftRadius: "var(--cms-radio-lg,22px)",
+        borderTopRightRadius: "var(--cms-radio-lg,22px)",
+      }}
+    />
+  )
+}
+
+// ── Cuerpos por variante ─────────────────────────────────────────────────────
+
+function CuerpoColumnas({
+  columnas,
+  destacados,
+  ctx,
+  conImagen,
+}: {
+  columnas: MegaMenuColumna[]
+  destacados: MegaMenuDestacado[]
+  ctx: RenderContext
+  conImagen: boolean
+}) {
+  const n = columnas.length || 1
+  const mostrarDestacados = conImagen && destacados.length > 0
+  return (
+    <div
+      className="grid gap-8"
+      style={{
+        gridTemplateColumns: mostrarDestacados
+          ? `repeat(${n}, minmax(0,1fr)) 1.3fr`
+          : `repeat(${n}, minmax(0,1fr))`,
+      }}
+    >
+      {columnas.map((columna) => (
+        <Columna key={columna.titulo} columna={columna} ctx={ctx} />
+      ))}
+      {mostrarDestacados ? (
+        <div
+          className="grid gap-3"
+          style={{ gridTemplateColumns: destacados.length > 1 ? "1fr 1fr" : "1fr" }}
+        >
+          {destacados.map((d) => (
+            <Destacado key={d.href} destacado={d} ctx={ctx} />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+function CuerpoGridImagenes({
+  columnas,
+  destacados,
+  ctx,
+}: {
+  columnas: MegaMenuColumna[]
+  destacados: MegaMenuDestacado[]
+  ctx: RenderContext
+}) {
+  const cols = Math.min(Math.max(destacados.length, 1), 4)
+  return (
+    <div className="flex flex-col gap-7">
+      {destacados.length > 0 ? (
+        <div
+          className="grid gap-3"
+          style={{ gridTemplateColumns: `repeat(${cols}, minmax(0,1fr))` }}
+        >
+          {destacados.map((d) => (
+            <Destacado key={d.href} destacado={d} ctx={ctx} alto="h-[220px]" />
+          ))}
+        </div>
+      ) : null}
+      {columnas.length > 0 ? (
+        <div
+          className="grid gap-8"
+          style={{ gridTemplateColumns: `repeat(${columnas.length}, minmax(0,1fr))` }}
+        >
+          {columnas.map((columna) => (
+            <Columna key={columna.titulo} columna={columna} ctx={ctx} />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+function CuerpoSimple({ columnas, ctx }: { columnas: MegaMenuColumna[]; ctx: RenderContext }) {
+  return (
+    <div className="flex min-w-[180px] flex-col gap-5">
+      {columnas.map((columna) => (
+        <Columna key={columna.titulo} columna={columna} ctx={ctx} />
+      ))}
+    </div>
+  )
+}
+
+// ── Panel ─────────────────────────────────────────────────────────────────────
+
+export function MegaMenu({ megaMenu, ctx }: { megaMenu: MegaMenuData; ctx: RenderContext }) {
+  const { variante, columnas, destacados, verTodo } = megaMenu
+
+  let cuerpo: React.ReactNode
+  if (variante === "grid-imagenes") {
+    cuerpo = <CuerpoGridImagenes columnas={columnas} destacados={destacados} ctx={ctx} />
+  } else if (variante === "simple") {
+    cuerpo = <CuerpoSimple columnas={columnas} ctx={ctx} />
+  } else {
+    cuerpo = (
+      <CuerpoColumnas
+        columnas={columnas}
+        destacados={destacados}
+        ctx={ctx}
+        conImagen={variante === "columnas-imagen"}
+      />
+    )
+  }
+
+  return (
+    <div
+      className="cms-mega-panel hidden overflow-hidden md:block"
+      style={{
+        background: "var(--cms-superficie,#fff)",
+        color: "var(--cms-texto,#0c0c10)",
+        border: "var(--cms-grosor-borde,1px) solid var(--cms-borde,#dbd6c9)",
+        borderRadius: "var(--cms-radio-lg,22px)",
+        boxShadow: "var(--cms-sombra-lg,0 30px 70px -28px rgba(12,12,16,.4))",
+      }}
+    >
+      <EstiloMega />
+      <BarraKinetic />
+      <div className="p-7">
+        {cuerpo}
+        {verTodo ? <VerTodo verTodo={verTodo} ctx={ctx} /> : null}
+      </div>
+    </div>
+  )
+}

package/src/chrome/mini-cart.test.tsx

@@ -0,0 +1,111 @@
+import { readFileSync } from "node:fs"
+import { fileURLToPath } from "node:url"
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { MiniCart } from "./mini-cart"
+import { mockCtx, fixtureCarrito } from "../test/mock-ctx"
+
+const render = (props: Partial<Parameters<typeof MiniCart>[0]> = {}) =>
+  renderToStaticMarkup(
+    <MiniCart
+      abierto={true}
+      onCerrar={() => {}}
+      carrito={fixtureCarrito()}
+      ctx={mockCtx()}
+      {...props}
+    />,
+  )
+
+describe("MiniCart", () => {
+  it("abierto:false no renderiza nada", () => {
+    expect(render({ abierto: false })).toBe("")
+  })
+
+  it("es un diálogo modal con scrim y botón de cerrar accesible", () => {
+    const html = render()
+    expect(html).toContain('role="dialog"')
+    expect(html).toContain('aria-modal="true"')
+    expect(html).toContain('aria-label="Tu bolsa"')
+    expect(html).toContain("bg-black/50")
+    expect(html).toContain('aria-label="Cerrar bolsa"')
+  })
+
+  it("aplica la animación de entrada (cms-minicart-panel) y respeta reduced-motion", () => {
+    const html = render()
+    expect(html).toContain("cms-minicart-panel")
+    expect(html).toContain("prefers-reduced-motion")
+  })
+
+  it("cabecera muestra el conteo total: 'Tu bolsa (N)'", () => {
+    const html = render({ carrito: fixtureCarrito({ count: 3 }) })
+    expect(html).toContain("Tu bolsa (3)")
+  })
+
+  it("pinta cada línea: título, variante, cantidad y thumbnail via ctx.componentes.Imagen", () => {
+    const html = render()
+    expect(html).toContain("Sneaker Runner Blanco")
+    expect(html).toContain("Blanco / 40")
+    expect(html).toContain("Hoodie Heavy Negro")
+    expect(html).toContain("Negro / M")
+    // href del producto
+    expect(html).toContain('href="/products/sneaker-runner-blanco"')
+    // thumbnail real (Imagen) y placeholder para la línea sin thumbnail
+    expect(html).toContain('src="https://picsum.photos/seed/cart-1/80/100"')
+    // cantidad "N ×"
+    expect(html).toContain("2 ×")
+  })
+
+  it("formatea los montos de línea con Intl.NumberFormat (es-CO / COP, sin decimales)", () => {
+    const html = render()
+    const esperado = new Intl.NumberFormat("es-CO", {
+      style: "currency",
+      currency: "COP",
+      maximumFractionDigits: 0,
+    }).format(289900)
+    expect(html).toContain(esperado)
+  })
+
+  it("muestra el subtotal formateado y las 2 CTAs (Ver bolsa / Ir a pagar)", () => {
+    const html = render()
+    const subtotal = new Intl.NumberFormat("es-CO", {
+      style: "currency",
+      currency: "COP",
+      maximumFractionDigits: 0,
+    }).format(649700)
+    expect(html).toContain("Subtotal")
+    expect(html).toContain(subtotal)
+    expect(html).toContain("Ver bolsa")
+    expect(html).toContain('href="/cart"')
+    expect(html).toContain("Ir a pagar")
+    expect(html).toContain('href="/checkout"')
+  })
+
+  it("carrito null → estado vacío con enlace al catálogo", () => {
+    const html = render({ carrito: null })
+    expect(html).toContain("Tu bolsa está vacía")
+    expect(html).toContain("Seguir comprando")
+    expect(html).toContain('href="/catalogo"')
+    expect(html).toContain("Tu bolsa (0)")
+    // sin CTAs de checkout en estado vacío
+    expect(html).not.toContain("Ir a pagar")
+  })
+
+  it("carrito con items:[] → estado vacío", () => {
+    const html = render({ carrito: fixtureCarrito({ items: [], count: 0 }) })
+    expect(html).toContain("Tu bolsa está vacía")
+    expect(html).not.toContain("Ir a pagar")
+  })
+
+  it("no emite <a> ni <img> directos: todo pasa por ctx.componentes", () => {
+    const rutaFuente = fileURLToPath(new URL("./mini-cart.tsx", import.meta.url))
+    const fuente = readFileSync(rutaFuente, "utf-8")
+    expect(fuente).not.toMatch(/<a[\s>]/)
+    expect(fuente).not.toMatch(/<img[\s>]/)
+  })
+
+  it("no declara 'use client' en context.ts (tipos server-safe)", () => {
+    const rutaCtx = fileURLToPath(new URL("../context.ts", import.meta.url))
+    const fuente = readFileSync(rutaCtx, "utf-8")
+    expect(fuente).not.toContain("use client")
+  })
+})