@arroyavecommerce/theme-kinetic 0.2.0

package/src/catalog/plp-arreglos.test.tsx

@@ -0,0 +1,235 @@
+import { readFileSync } from "node:fs"
+import { fileURLToPath } from "node:url"
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { ArregloSidebar } from "./plp-sidebar"
+import { ArregloInline } from "./plp-inline"
+import { ArregloPills } from "./plp-pills"
+import { ArregloOverlay, PanelFiltrosOverlay } from "./plp-overlay"
+import { mockCtx, fixtureListado } from "../test/mock-ctx"
+
+const codigoFuenteSidebar = readFileSync(fileURLToPath(new URL("./plp-sidebar.tsx", import.meta.url)), "utf-8")
+const codigoFuenteInline = readFileSync(fileURLToPath(new URL("./plp-inline.tsx", import.meta.url)), "utf-8")
+const codigoFuentePills = readFileSync(fileURLToPath(new URL("./plp-pills.tsx", import.meta.url)), "utf-8")
+const codigoFuenteOverlay = readFileSync(fileURLToPath(new URL("./plp-overlay.tsx", import.meta.url)), "utf-8")
+
+/** Stub de grilla: lo que `PlpLayout` le pasaría como `children` (la grilla real). */
+const gridStub = <div data-grid-stub>grid-stub</div>
+
+describe("ArregloSidebar", () => {
+  it("aside a la izquierda con una seccion por faceta valida + children (la grilla) a la derecha (240px 1fr)", () => {
+    const listado = fixtureListado()
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(
+      <ArregloSidebar listado={listado} ctx={ctx}>
+        {gridStub}
+      </ArregloSidebar>,
+    )
+
+    expect(html).toContain("<aside")
+    // fixtureFiltros: categoria (pill/tag) y precio (range/price), ambas validas
+    expect(html).toContain('data-facet="categoria"')
+    expect(html).toContain('data-facet="precio"')
+    expect(html).toContain("Categoría")
+    expect(html).toContain("Precio")
+    expect(html).toMatch(/240px[_\s]1fr|grid-cols-\[240px_1fr\]/)
+    expect(html).toContain("data-grid-stub")
+  })
+
+  it("el <aside> de filtros es hidden md:flex (desktop-only); children (la grilla) no queda dentro de hidden", () => {
+    const listado = fixtureListado()
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(
+      <ArregloSidebar listado={listado} ctx={ctx}>
+        {gridStub}
+      </ArregloSidebar>,
+    )
+
+    const asideMatch = html.match(/<aside[^>]*>/)
+    expect(asideMatch?.[0]).toContain("hidden")
+    expect(asideMatch?.[0]).toContain("md:flex")
+
+    // El marcador de la grilla no debe caer dentro de ningun contenedor `hidden` sin `md:` que lo re-muestre.
+    const indiceGrid = html.indexOf("data-grid-stub")
+    const indiceAside = html.indexOf("<aside")
+    const indiceCierreAside = html.indexOf("</aside>")
+    expect(indiceGrid).toBeGreaterThan(indiceCierreAside)
+    expect(indiceGrid > indiceAside && indiceGrid < indiceCierreAside).toBe(false)
+  })
+})
+
+describe("ArregloInline", () => {
+  it("fila de filtros integrada sobre children (la grilla): una faceta por celda", () => {
+    const listado = fixtureListado()
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(
+      <ArregloInline listado={listado} ctx={ctx}>
+        {gridStub}
+      </ArregloInline>,
+    )
+
+    expect(html).toContain('data-facet="categoria"')
+    expect(html).toContain('data-facet="precio"')
+    expect(html).toContain("data-grid-stub")
+  })
+
+  it("la fila de filtros es hidden md:grid (desktop-only); children (la grilla) no queda dentro de hidden", () => {
+    const listado = fixtureListado()
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(
+      <ArregloInline listado={listado} ctx={ctx}>
+        {gridStub}
+      </ArregloInline>,
+    )
+
+    expect(html).toContain("hidden")
+    expect(html).toContain("md:grid")
+
+    const indiceGridStub = html.indexOf("data-grid-stub")
+    const indiceFacet = html.indexOf('data-facet="categoria"')
+    expect(indiceGridStub).toBeGreaterThan(indiceFacet)
+  })
+})
+
+describe("ArregloPills", () => {
+  it("barra horizontal con un chip/dropdown por faceta valida + children (la grilla)", () => {
+    const listado = fixtureListado()
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(
+      <ArregloPills listado={listado} ctx={ctx}>
+        {gridStub}
+      </ArregloPills>,
+    )
+
+    // fixtureFiltros: categoria (pill/tag) y precio (range/price), ambas validas
+    expect(html).toContain('data-facet="categoria"')
+    expect(html).toContain('data-facet="precio"')
+    expect(html).toContain("Categoría")
+    expect(html).toContain("Precio")
+    expect(html).toContain("data-grid-stub")
+  })
+
+  it("la barra de chips es hidden md:flex (desktop-only); children (la grilla) no queda dentro de hidden", () => {
+    const listado = fixtureListado()
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(
+      <ArregloPills listado={listado} ctx={ctx}>
+        {gridStub}
+      </ArregloPills>,
+    )
+
+    expect(html).toContain("hidden")
+    expect(html).toContain("md:flex")
+
+    const indiceGridStub = html.indexOf("data-grid-stub")
+    const indiceFacet = html.indexOf('data-facet="categoria"')
+    expect(indiceGridStub).toBeGreaterThan(indiceFacet)
+  })
+})
+
+describe("ArregloOverlay", () => {
+  it('boton "Filtros (n)" con n = cantidad de facetas con seleccion no vacia + children (la grilla)', () => {
+    const listado = fixtureListado({ seleccion: { categoria: ["camisetas"] } })
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(
+      <ArregloOverlay listado={listado} ctx={ctx}>
+        {gridStub}
+      </ArregloOverlay>,
+    )
+
+    expect(html).toMatch(/Filtros\s*\(1\)/)
+    expect(html).toContain("data-grid-stub")
+  })
+
+  it("con ninguna faceta seleccionada el boton muestra Filtros (0)", () => {
+    const listado = fixtureListado()
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(
+      <ArregloOverlay listado={listado} ctx={ctx}>
+        {gridStub}
+      </ArregloOverlay>,
+    )
+
+    expect(html).toMatch(/Filtros\s*\(0\)/)
+  })
+
+  it("cerrado por defecto: el panel no esta en el DOM", () => {
+    const listado = fixtureListado({ total: 128 })
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(
+      <ArregloOverlay listado={listado} ctx={ctx}>
+        {gridStub}
+      </ArregloOverlay>,
+    )
+
+    expect(html).not.toContain("Ver 128 productos")
+    expect(html).not.toContain("Limpiar")
+  })
+
+  it('el boton "Filtros (n)" es hidden md:flex (desktop-only); children (la grilla) no queda dentro de hidden', () => {
+    const listado = fixtureListado()
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(
+      <ArregloOverlay listado={listado} ctx={ctx}>
+        {gridStub}
+      </ArregloOverlay>,
+    )
+
+    expect(html).toContain("hidden")
+    expect(html).toContain("md:flex")
+
+    const indiceGridStub = html.indexOf("data-grid-stub")
+    const indiceBoton = html.indexOf("Filtros (")
+    expect(indiceGridStub).toBeGreaterThan(indiceBoton)
+  })
+
+  it("PanelFiltrosOverlay abierto:true renderiza scrim, una seccion por faceta valida, Limpiar y Ver N productos", () => {
+    const listado = fixtureListado({ total: 128 })
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(
+      <PanelFiltrosOverlay listado={listado} ctx={ctx} abierto={true} onCerrar={() => {}} />,
+    )
+
+    expect(html).toContain('data-facet="categoria"')
+    expect(html).toContain('data-facet="precio"')
+    expect(html).toContain("Limpiar")
+    expect(html).toContain("Ver 128 productos")
+    expect(html).toContain("bg-black/50")
+  })
+
+  it("PanelFiltrosOverlay abierto:false no renderiza el panel", () => {
+    const listado = fixtureListado()
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(
+      <PanelFiltrosOverlay listado={listado} ctx={ctx} abierto={false} onCerrar={() => {}} />,
+    )
+
+    expect(html).toBe("")
+  })
+})
+
+describe("guard de estandar (cero <img>/<a> directos, sin <h1>)", () => {
+  it("plp-sidebar: no emite <img> ni <a> directos, ni <h1>", () => {
+    expect(codigoFuenteSidebar).not.toMatch(/<img[\s>]/)
+    expect(codigoFuenteSidebar).not.toMatch(/<a[\s>]/)
+    expect(codigoFuenteSidebar).not.toMatch(/<h1[\s>]/)
+  })
+
+  it("plp-inline: no emite <img> ni <a> directos, ni <h1>", () => {
+    expect(codigoFuenteInline).not.toMatch(/<img[\s>]/)
+    expect(codigoFuenteInline).not.toMatch(/<a[\s>]/)
+    expect(codigoFuenteInline).not.toMatch(/<h1[\s>]/)
+  })
+
+  it("plp-pills: no emite <img> ni <a> directos, ni <h1>", () => {
+    expect(codigoFuentePills).not.toMatch(/<img[\s>]/)
+    expect(codigoFuentePills).not.toMatch(/<a[\s>]/)
+    expect(codigoFuentePills).not.toMatch(/<h1[\s>]/)
+  })
+
+  it("plp-overlay: no emite <img> ni <a> directos, ni <h1>", () => {
+    expect(codigoFuenteOverlay).not.toMatch(/<img[\s>]/)
+    expect(codigoFuenteOverlay).not.toMatch(/<a[\s>]/)
+    expect(codigoFuenteOverlay).not.toMatch(/<h1[\s>]/)
+  })
+})

package/src/catalog/plp-inline.tsx

@@ -0,0 +1,54 @@
+import type { ReactNode } from "react"
+import type { RenderContext } from "../context"
+import { ControlDeFiltro } from "./filter-controls"
+import { facetsValidas } from "./plp"
+
+type ListadoPlp = NonNullable<NonNullable<RenderContext["catalogo"]>["listado"]>
+
+/**
+ * Arreglo desktop "inline" (mockup PLP l.176-197): fila de filtros integrada
+ * sobre `children` (la grilla, provista por `PlpLayout`), una faceta por
+ * celda con bordes compartidos (estética utility). Solo la fila de filtros
+ * es desktop-only (`hidden md:block`): el filtrado mobile va por el
+ * bottom-sheet. `children` NO queda dentro de ningún contenedor `hidden`.
+ */
+export function ArregloInline({
+  listado,
+  ctx,
+  children,
+}: {
+  listado: ListadoPlp
+  ctx: RenderContext
+  children: ReactNode
+}) {
+  const facets = facetsValidas(listado)
+
+  return (
+    <div data-arreglo="inline" className="flex flex-col gap-5">
+      <div
+        className="hidden [border:var(--cms-grosor-borde)_solid_var(--cms-borde)] md:grid"
+        style={{ gridTemplateColumns: `repeat(${facets.length}, 1fr)` }}
+      >
+        {facets.map((facet, indice) => (
+          <div
+            key={facet.id}
+            data-facet={facet.id}
+            className={`p-4 text-[11px] font-medium uppercase tracking-[0.06em] ${
+              indice === facets.length - 1 ? "" : "[border-right:var(--cms-grosor-borde)_solid_var(--cms-borde)]"
+            }`}
+            style={{ fontFamily: "var(--cms-fuente-mono)" }}
+          >
+            <ControlDeFiltro
+              facet={facet}
+              opciones={listado.opcionesFaceta[facet.id] ?? []}
+              seleccionados={listado.seleccion[facet.id] ?? []}
+              urlFiltro={listado.urlFiltro}
+              ctx={ctx}
+            />
+          </div>
+        ))}
+      </div>
+      {children}
+    </div>
+  )
+}

package/src/catalog/plp-overlay.tsx

@@ -0,0 +1,129 @@
+"use client"
+
+import { useState, type ReactNode } from "react"
+import type { RenderContext } from "../context"
+import { ControlDeFiltro } from "./filter-controls"
+import { facetsValidas } from "./plp"
+
+type ListadoPlp = NonNullable<NonNullable<RenderContext["catalogo"]>["listado"]>
+
+/** Cantidad de facetas con al menos un valor seleccionado (para el badge "Filtros (n)"). */
+function contarFiltrosActivos(listado: ListadoPlp): number {
+  return Object.values(listado.seleccion).filter((valores) => valores.length > 0).length
+}
+
+/**
+ * Panel lateral derecho full-height sobre scrim (mockup PLP l.156-172):
+ * una sección por faceta válida (via ControlDeFiltro) + "Limpiar"/"Ver N productos".
+ * `abierto:false` → no se renderiza nada (patrón de BottomSheetFiltros/DrawerMovil).
+ */
+export function PanelFiltrosOverlay({
+  listado,
+  ctx,
+  abierto,
+  onCerrar,
+}: {
+  listado: ListadoPlp
+  ctx: RenderContext
+  abierto: boolean
+  onCerrar: () => void
+}) {
+  if (!abierto) return null
+
+  const { Enlace } = ctx.componentes
+
+  return (
+    <>
+      <div className="fixed inset-0 z-40 bg-black/50" onClick={onCerrar} />
+      <div
+        className="fixed inset-y-0 right-0 z-50 flex h-full w-[360px] flex-col gap-[18px] overflow-y-auto p-6"
+        style={{
+          background: "var(--cms-superficie)",
+          color: "var(--cms-texto)",
+          borderLeft: "var(--cms-grosor-borde) solid var(--cms-borde)",
+        }}
+      >
+        <div className="flex items-center justify-between">
+          <span className="text-[15px] font-semibold">Filtros</span>
+          <button type="button" onClick={onCerrar} aria-label="Cerrar filtros" className="text-lg leading-none">
+            ×
+          </button>
+        </div>
+        {facetsValidas(listado).map((facet) => (
+          <div
+            key={facet.id}
+            data-facet={facet.id}
+            className="flex flex-col gap-2.5 [border-top:var(--cms-grosor-borde)_solid_var(--cms-borde)] pt-3.5"
+          >
+            <ControlDeFiltro
+              facet={facet}
+              opciones={listado.opcionesFaceta[facet.id] ?? []}
+              seleccionados={listado.seleccion[facet.id] ?? []}
+              urlFiltro={listado.urlFiltro}
+              ctx={ctx}
+            />
+          </div>
+        ))}
+        <div className="mt-auto flex gap-2.5">
+          <Enlace
+            href="?"
+            className="flex-1 py-[13px] text-center text-[12px] font-semibold [border:var(--cms-grosor-borde)_solid_var(--cms-texto)] [border-radius:var(--cms-radio)] [color:var(--cms-texto)] [text-decoration:none]"
+          >
+            Limpiar
+          </Enlace>
+          <button
+            type="button"
+            onClick={onCerrar}
+            className="flex-[1.4] py-[13px] text-center text-[12px] font-semibold uppercase tracking-[0.06em]"
+            style={{
+              background: "var(--cms-primario)",
+              color: "var(--cms-primario-texto)",
+              borderRadius: "var(--cms-radio)",
+              fontFamily: "var(--cms-fuente-texto)",
+            }}
+          >
+            Ver {listado.total} productos
+          </button>
+        </div>
+      </div>
+    </>
+  )
+}
+
+/**
+ * Arreglo desktop "overlay" (mockup PLP l.134-174): un botón "Filtros (n)" en
+ * la toolbar que abre un PanelFiltrosOverlay lateral derecho sobre scrim,
+ * seguido de `children` (la grilla, provista por `PlpLayout`) a todo el
+ * ancho. Panel cerrado por defecto. Solo el botón "Filtros (n)" es
+ * desktop-only (`hidden md:block`): el filtrado mobile va por el
+ * bottom-sheet. `children` NO queda dentro de ningún contenedor `hidden`.
+ */
+export function ArregloOverlay({
+  listado,
+  ctx,
+  children,
+}: {
+  listado: ListadoPlp
+  ctx: RenderContext
+  children: ReactNode
+}) {
+  const [abierto, setAbierto] = useState(false)
+  const cantidad = contarFiltrosActivos(listado)
+
+  return (
+    <div data-arreglo="overlay">
+      <div className="hidden justify-end pb-4 md:flex">
+        <button
+          type="button"
+          onClick={() => setAbierto(true)}
+          aria-expanded={abierto}
+          className="inline-flex items-center gap-2 px-[18px] py-[9px] text-[12px] font-semibold [border:var(--cms-grosor-borde)_solid_var(--cms-texto)] [border-radius:var(--cms-radio)] [color:var(--cms-texto)]"
+        >
+          <span aria-hidden="true">⚌</span> Filtros ({cantidad})
+        </button>
+      </div>
+      {children}
+      <PanelFiltrosOverlay listado={listado} ctx={ctx} abierto={abierto} onCerrar={() => setAbierto(false)} />
+    </div>
+  )
+}

package/src/catalog/plp-parts.test.tsx

@@ -0,0 +1,146 @@
+import { readFileSync } from "node:fs"
+import { fileURLToPath } from "node:url"
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { Breadcrumb, ToolbarPlp, PillsActivas, Paginacion } from "./plp-parts"
+import { mockCtx, fixtureListado } from "../test/mock-ctx"
+
+const codigoFuente = readFileSync(fileURLToPath(new URL("./plp-parts.tsx", import.meta.url)), "utf-8")
+
+describe("fixtureListado (guard MINOR del review de Task 1)", () => {
+  it("devuelve un catalogo.listado completo con las claves esperadas", () => {
+    const listado = fixtureListado()
+
+    expect(listado).toHaveProperty("titulo")
+    expect(listado).toHaveProperty("productos")
+    expect(listado).toHaveProperty("total")
+    expect(listado).toHaveProperty("seleccion")
+    expect(listado).toHaveProperty("paginacion")
+    expect(listado).toHaveProperty("urlFiltro")
+    expect(typeof listado.urlFiltro).toBe("function")
+    expect(Array.isArray(listado.productos)).toBe(true)
+  })
+})
+
+describe("Breadcrumb", () => {
+  it("renderiza los items (textos) dentro de un <nav>; el ultimo item no es enlace", () => {
+    const items = [
+      { texto: "Inicio", href: "/" },
+      { texto: "Ropa", href: "/ropa" },
+      { texto: "Camisetas", href: "/ropa/camisetas" },
+    ]
+    const html = renderToStaticMarkup(<Breadcrumb items={items} ctx={mockCtx()} />)
+
+    expect(html).toContain("<nav")
+    expect(html).toContain('aria-label="Ruta"')
+    expect(html).toContain("Inicio")
+    expect(html).toContain("Ropa")
+    expect(html).toContain("Camisetas")
+    expect(html).toContain('href="/"')
+    expect(html).toContain('href="/ropa"')
+    // el ultimo item (Camisetas) no debe tener su propio href
+    expect(html).not.toContain('href="/ropa/camisetas"')
+  })
+})
+
+describe("ToolbarPlp", () => {
+  it("muestra el contador de productos por defecto (mostrarContador=true)", () => {
+    const listado = fixtureListado({ total: 128 })
+    const html = renderToStaticMarkup(<ToolbarPlp listado={listado} ctx={mockCtx()} />)
+
+    expect(html).toContain("128 productos")
+  })
+
+  it("oculta el contador cuando mostrarContador=false", () => {
+    const listado = fixtureListado({ total: 128 })
+    const html = renderToStaticMarkup(<ToolbarPlp listado={listado} ctx={mockCtx()} mostrarContador={false} />)
+
+    expect(html).not.toContain("128 productos")
+  })
+
+  it('muestra "Ordenar" con el orden actual', () => {
+    const listado = fixtureListado({ orden: "relevancia" })
+    const html = renderToStaticMarkup(<ToolbarPlp listado={listado} ctx={mockCtx()} />)
+
+    expect(html).toMatch(/Ordenar/i)
+    expect(html).toMatch(/Relevancia/i)
+  })
+})
+
+describe("PillsActivas", () => {
+  it('con seleccion:{talla:["S"]} muestra un chip "S" con "x" (Enlace a urlFiltro)', () => {
+    const listado = fixtureListado({ seleccion: { talla: ["S"] } })
+    const html = renderToStaticMarkup(<PillsActivas listado={listado} ctx={mockCtx()} />)
+
+    expect(html).toContain("S")
+    expect(html).toContain("×")
+    expect(html).toContain('href="?talla=S"')
+  })
+
+  it('incluye "Limpiar todo" cuando hay seleccion activa', () => {
+    const listado = fixtureListado({ seleccion: { talla: ["S"] } })
+    const html = renderToStaticMarkup(<PillsActivas listado={listado} ctx={mockCtx()} />)
+
+    expect(html).toContain("Limpiar todo")
+  })
+
+  it("con seleccion:{} devuelve null", () => {
+    const listado = fixtureListado({ seleccion: {} })
+    const resultado = PillsActivas({ listado, ctx: mockCtx() })
+
+    expect(resultado).toBeNull()
+  })
+})
+
+describe("Paginacion", () => {
+  it('modo "numerada" con totalPaginas:3 muestra 1,2,3 (via hrefPara) y aria-current en la pagina actual', () => {
+    const listado = fixtureListado({
+      paginacion: { pagina: 2, totalPaginas: 3, hrefPara: (p: number) => `?page=${p}` },
+    })
+    const html = renderToStaticMarkup(<Paginacion listado={listado} ctx={mockCtx()} />)
+
+    expect(html).toContain("<nav")
+    expect(html).toContain('aria-label="Paginación"')
+    expect(html).toContain('href="?page=1"')
+    expect(html).toContain('href="?page=2"')
+    expect(html).toContain('href="?page=3"')
+    expect(html).toMatch(/<a href="\?page=2"[^>]*aria-current="page"/)
+  })
+
+  it("muestra elipsis cuando totalPaginas > 7", () => {
+    const listado = fixtureListado({
+      paginacion: { pagina: 5, totalPaginas: 12, hrefPara: (p: number) => `?page=${p}` },
+    })
+    const html = renderToStaticMarkup(<Paginacion listado={listado} ctx={mockCtx()} />)
+
+    expect(html).toContain("…")
+  })
+
+  it('modo "load-more" muestra un boton "Cargar más"', () => {
+    const listado = fixtureListado()
+    const html = renderToStaticMarkup(<Paginacion listado={listado} ctx={mockCtx()} modo="load-more" />)
+
+    expect(html).toContain("Cargar más")
+    expect(html).toContain("<button")
+  })
+
+  it("default es modo numerada", () => {
+    const listado = fixtureListado({
+      paginacion: { pagina: 1, totalPaginas: 2, hrefPara: (p: number) => `?page=${p}` },
+    })
+    const html = renderToStaticMarkup(<Paginacion listado={listado} ctx={mockCtx()} />)
+
+    expect(html).toContain('aria-label="Paginación"')
+  })
+})
+
+describe("guard de estandar (cero <img>/<a> directos, sin <h1>)", () => {
+  it("no emite <img> ni <a> directos: todo pasa por ctx.componentes", () => {
+    expect(codigoFuente).not.toMatch(/<img[\s>]/)
+    expect(codigoFuente).not.toMatch(/<a[\s>]/)
+  })
+
+  it("ningun <h1>: son sub-componentes, el h1 de la categoria lo pone el layout PLP", () => {
+    expect(codigoFuente).not.toMatch(/<h1[\s>]/)
+  })
+})