@arroyavecommerce/theme-kinetic 0.2.0

package/src/catalog/plp.test.tsx

@@ -0,0 +1,319 @@
+import { readFileSync } from "node:fs"
+import { fileURLToPath } from "node:url"
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { FrameProductos, BarraFiltrosMobil, BottomSheetFiltros, PlpLayout, type PlpConfig } from "./plp"
+import { mockCtx, fixtureListado } from "../test/mock-ctx"
+
+const codigoFuente = readFileSync(fileURLToPath(new URL("./plp.tsx", import.meta.url)), "utf-8")
+
+/**
+ * Regresion 4d-ii: `FrameProductos` (la grilla) estaba embebido DENTRO de
+ * cada arreglo de filtros, y los 4 arreglos envolvian TODO su contenido
+ * (chrome + grilla) en `hidden md:*` — en mobile la grilla quedaba
+ * `display:none`. `renderToStaticMarkup` no evalua CSS, asi que esto no lo
+ * detectaban los tests SSR existentes; hace falta inspeccionar la
+ * estructura del HTML (anidamiento de tags) para blindarlo.
+ *
+ * Camina el HTML balanceando aperturas/cierres de `<div>`/`<aside>` y
+ * devuelve `true` si el indice `objetivo` cae DENTRO de un elemento cuya
+ * clase contiene el token exacto "hidden" (desktop-only sin `md:` que lo
+ * reactive dentro del MISMO elemento no importa aqui: lo que nos interesa
+ * es si el propio contenedor tiene `display:none` en mobile).
+ */
+function estaAnidadoEnOculto(html: string, objetivo: number): boolean {
+  const tagRe = /<(div|aside)\b[^>]*?(\/)?>|<\/(div|aside)>/g
+  const pila: { oculto: boolean; inicio: number }[] = []
+  let match: RegExpExecArray | null
+  while ((match = tagRe.exec(html))) {
+    const esCierre = match[0].startsWith("</")
+    if (esCierre) {
+      const marco = pila.pop()
+      if (marco?.oculto && objetivo > marco.inicio && objetivo < match.index) {
+        return true
+      }
+      continue
+    }
+    const esAutoCerrado = match[2] === "/"
+    const claseMatch = match[0].match(/\bclass="([^"]*)"/)
+    const esOculto = claseMatch ? claseMatch[1].split(/\s+/).includes("hidden") : false
+    if (!esAutoCerrado) {
+      pila.push({ oculto: esOculto, inicio: match.index })
+    }
+  }
+  return false
+}
+
+const configBase: PlpConfig = {
+  filtros: "sidebar",
+  columnas: 4,
+  card: "quick-add",
+  paginacion: "numerada",
+  mostrarContador: true,
+  vista: "grilla",
+}
+
+describe("PlpLayout", () => {
+  it("renderiza un solo <h1> con el titulo, el Breadcrumb, el contador, las pills activas y una card por producto", () => {
+    const listado = fixtureListado({ seleccion: { categoria: ["camisetas"] }, total: 128 })
+    const ctx = mockCtx({ catalogo: { listado } })
+    const html = renderToStaticMarkup(<PlpLayout ctx={ctx} config={configBase} />)
+
+    const h1s = html.match(/<h1[\s>]/g) ?? []
+    expect(h1s).toHaveLength(1)
+    expect(html).toContain(listado.titulo)
+    expect(html).toContain("<nav")
+    expect(html).toContain('aria-label="Ruta"')
+    expect(html).toContain("128 productos")
+    expect(html).toContain("Limpiar todo") // PillsActivas
+    for (const producto of listado.productos) {
+      expect(html).toContain(producto.title)
+    }
+  })
+
+  it("con ctx.catalogo undefined devuelve null", () => {
+    const ctx = mockCtx()
+    const resultado = PlpLayout({ ctx, config: configBase })
+
+    expect(resultado).toBeNull()
+  })
+})
+
+describe("PlpLayout despacha el arreglo desktop por config.filtros", () => {
+  const marcadores = ["sidebar", "pills", "overlay", "inline"] as const
+
+  it.each(marcadores)('config.filtros:"%s" renderiza SOLO ese arreglo (data-arreglo)', (filtros) => {
+    const listado = fixtureListado()
+    const ctx = mockCtx({ catalogo: { listado } })
+    const html = renderToStaticMarkup(<PlpLayout ctx={ctx} config={{ ...configBase, filtros }} />)
+
+    expect(html).toContain(`data-arreglo="${filtros}"`)
+    for (const otro of marcadores) {
+      if (otro === filtros) continue
+      expect(html).not.toContain(`data-arreglo="${otro}"`)
+    }
+  })
+
+  it.each(marcadores)('config.filtros:"%s" siempre renderiza la convergencia mobile (BarraFiltrosMobil, md:hidden)', (filtros) => {
+    const listado = fixtureListado()
+    const ctx = mockCtx({ catalogo: { listado } })
+    const html = renderToStaticMarkup(<PlpLayout ctx={ctx} config={{ ...configBase, filtros }} />)
+
+    expect(html).toMatch(/Filtrar\s*\(0\)/)
+    expect(html).toContain("Ordenar")
+    expect(html).toContain("md:hidden")
+  })
+
+  it("con config.filtros inválido degrada a sidebar (no crashea)", () => {
+    const listado = fixtureListado()
+    const ctx = mockCtx({ catalogo: { listado } })
+    const html = renderToStaticMarkup(
+      <PlpLayout ctx={ctx} config={{ ...configBase, filtros: "inexistente" as any }} />,
+    )
+
+    expect(html).toContain(`data-arreglo="sidebar"`)
+  })
+
+  it("la grilla usa config.columnas y config.card", () => {
+    const listado = fixtureListado()
+    const ctx = mockCtx({ catalogo: { listado } })
+    const html = renderToStaticMarkup(
+      <PlpLayout ctx={ctx} config={{ ...configBase, filtros: "sidebar", columnas: 3, card: "minimal" }} />,
+    )
+
+    expect(html).toContain("md:grid-cols-3")
+    expect(html).not.toContain("Añadir") // card "minimal" no tiene boton quick-add
+  })
+
+  it("la paginacion usa config.paginacion (load-more -> Cargar más, sin nav numerada)", () => {
+    const listado = fixtureListado()
+    const ctx = mockCtx({ catalogo: { listado } })
+    const html = renderToStaticMarkup(
+      <PlpLayout ctx={ctx} config={{ ...configBase, filtros: "sidebar", paginacion: "load-more" }} />,
+    )
+
+    expect(html).toContain("Cargar más")
+    expect(html).not.toContain('aria-label="Paginación"')
+  })
+
+  it("la paginacion usa config.paginacion (numerada -> nav aria-label Paginación)", () => {
+    const listado = fixtureListado()
+    const ctx = mockCtx({ catalogo: { listado } })
+    const html = renderToStaticMarkup(
+      <PlpLayout ctx={ctx} config={{ ...configBase, filtros: "sidebar", paginacion: "numerada" }} />,
+    )
+
+    expect(html).toContain('aria-label="Paginación"')
+    expect(html).not.toContain("Cargar más")
+  })
+})
+
+describe("regresion 4d-ii: la grilla (FrameProductos) es siempre visible, tambien en mobile", () => {
+  const marcadores = ["sidebar", "pills", "overlay", "inline"] as const
+
+  it.each(marcadores)(
+    'config.filtros:"%s": el marcador data-grid de la grilla NO esta anidado dentro de un contenedor con clase "hidden" (desktop-only)',
+    (filtros) => {
+      const listado = fixtureListado()
+      const ctx = mockCtx({ catalogo: { listado } })
+      const html = renderToStaticMarkup(<PlpLayout ctx={ctx} config={{ ...configBase, filtros }} />)
+
+      const idxGrid = html.indexOf("data-grid")
+      expect(idxGrid).toBeGreaterThan(-1)
+      expect(estaAnidadoEnOculto(html, idxGrid)).toBe(false)
+    },
+  )
+
+  it("la grilla (data-grid) y la barra mobile (Filtrar/Ordenar, md:hidden) coexisten: ninguna reemplaza a la otra", () => {
+    const listado = fixtureListado()
+    const ctx = mockCtx({ catalogo: { listado } })
+    const html = renderToStaticMarkup(<PlpLayout ctx={ctx} config={configBase} />)
+
+    expect(html).toContain("data-grid")
+    expect(html).toMatch(/Filtrar\s*\(0\)/)
+  })
+
+  it('config.filtros:"sidebar": la grilla viene DESPUES de que cierra el <aside> desktop-only, no anidada dentro de el', () => {
+    const listado = fixtureListado()
+    const ctx = mockCtx({ catalogo: { listado } })
+    const html = renderToStaticMarkup(<PlpLayout ctx={ctx} config={{ ...configBase, filtros: "sidebar" }} />)
+
+    const cierreAside = html.indexOf("</aside>")
+    const idxGrid = html.indexOf("data-grid")
+    expect(cierreAside).toBeGreaterThan(-1)
+    expect(idxGrid).toBeGreaterThan(cierreAside)
+  })
+})
+
+describe("FrameProductos", () => {
+  it("con columnas:4 aplica grid-cols-2 (mobile) y md:grid-cols-4, con una card por producto + Paginacion", () => {
+    const listado = fixtureListado()
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(
+      <FrameProductos listado={listado} columnas={4} card="quick-add" ctx={ctx} />,
+    )
+
+    expect(html).toContain("grid-cols-2")
+    expect(html).toContain("md:grid-cols-4")
+    for (const producto of listado.productos) {
+      expect(html).toContain(producto.title)
+    }
+    expect(html).toContain('aria-label="Paginación"')
+  })
+
+  it("con columnas:3 aplica md:grid-cols-3", () => {
+    const listado = fixtureListado()
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(
+      <FrameProductos listado={listado} columnas={3} card="minimal" ctx={ctx} />,
+    )
+
+    expect(html).toContain("md:grid-cols-3")
+  })
+
+  it('con paginacion:"load-more" renderiza el boton "Cargar más" en vez de la nav numerada', () => {
+    const listado = fixtureListado()
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(
+      <FrameProductos listado={listado} columnas={4} card="quick-add" ctx={ctx} paginacion="load-more" />,
+    )
+
+    expect(html).toContain("Cargar más")
+    expect(html).not.toContain('aria-label="Paginación"')
+  })
+})
+
+describe("vista lista vs grilla (config.vista)", () => {
+  it('config.vista:"lista" renderiza filas (data-lista) y NO la grilla (data-grid)', () => {
+    const listado = fixtureListado()
+    const ctx = mockCtx({ catalogo: { listado } })
+    const html = renderToStaticMarkup(<PlpLayout ctx={ctx} config={{ ...configBase, vista: "lista" }} />)
+
+    expect(html).toContain("data-lista")
+    expect(html).not.toContain("data-grid")
+    // cada producto sigue apareciendo, ahora como fila (data-card="lista")
+    expect(html).toContain('data-card="lista"')
+    for (const producto of listado.productos) {
+      expect(html).toContain(producto.title)
+    }
+  })
+
+  it('config.vista:"grilla" (default) renderiza la grilla (data-grid) y NO filas (data-lista)', () => {
+    const listado = fixtureListado()
+    const ctx = mockCtx({ catalogo: { listado } })
+    const html = renderToStaticMarkup(<PlpLayout ctx={ctx} config={{ ...configBase, vista: "grilla" }} />)
+
+    expect(html).toContain("data-grid")
+    expect(html).not.toContain("data-lista")
+  })
+
+  it("FrameProductos vista:'lista' produce un layout distinto al de grilla", () => {
+    const listado = fixtureListado()
+    const ctx = mockCtx()
+    const grilla = renderToStaticMarkup(
+      <FrameProductos listado={listado} columnas={4} card="quick-add" ctx={ctx} vista="grilla" />,
+    )
+    const lista = renderToStaticMarkup(
+      <FrameProductos listado={listado} columnas={4} card="quick-add" ctx={ctx} vista="lista" />,
+    )
+
+    expect(grilla).toContain("data-grid")
+    expect(grilla).not.toContain("data-lista")
+    expect(lista).toContain("data-lista")
+    expect(lista).not.toContain("data-grid")
+    expect(lista).not.toBe(grilla)
+  })
+})
+
+describe("BarraFiltrosMobil", () => {
+  it('renderiza "Filtrar (n)" y "Ordenar" y es md:hidden', () => {
+    const listado = fixtureListado()
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(
+      <BarraFiltrosMobil listado={listado} ctx={ctx} cantidadFiltros={1} />,
+    )
+
+    expect(html).toMatch(/Filtrar\s*\(1\)/)
+    expect(html).toContain("Ordenar")
+    expect(html).toContain("md:hidden")
+  })
+})
+
+describe("BottomSheetFiltros", () => {
+  it("abierto:true renderiza el panel: grabber, Limpiar todo, una sección por faceta válida, CTA Ver N productos", () => {
+    const listado = fixtureListado({ total: 128 })
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(
+      <BottomSheetFiltros listado={listado} ctx={ctx} abierto={true} onCerrar={() => {}} />,
+    )
+
+    expect(html).toContain("data-grabber")
+    expect(html).toContain("Limpiar todo")
+    // fixtureFiltros: categoria (pill/tag, válida) y precio (range/price, válida)
+    expect(html).toContain('data-facet="categoria"')
+    expect(html).toContain('data-facet="precio"')
+    expect(html).toContain("Ver 128 productos")
+  })
+
+  it("abierto:false no renderiza el panel", () => {
+    const listado = fixtureListado()
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(
+      <BottomSheetFiltros listado={listado} ctx={ctx} abierto={false} onCerrar={() => {}} />,
+    )
+
+    expect(html).toBe("")
+  })
+})
+
+describe("guard de estandar (cero <img>/<a> directos, un solo <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("exactamente un <h1> en el codigo fuente", () => {
+    const h1s = codigoFuente.match(/<h1[\s>]/g) ?? []
+    expect(h1s).toHaveLength(1)
+  })
+})

package/src/catalog/plp.tsx

@@ -0,0 +1,259 @@
+"use client"
+
+import { useState } from "react"
+import { facetControlEsValido } from "@arroyavecommerce/cms-core"
+import type { RenderContext } from "../context"
+import { TarjetaProducto, type CardVariant } from "./product-card"
+import { ControlDeFiltro } from "./filter-controls"
+import { Breadcrumb, ToolbarPlp, PillsActivas, Paginacion } from "./plp-parts"
+import { ArregloSidebar } from "./plp-sidebar"
+import { ArregloInline } from "./plp-inline"
+import { ArregloPills } from "./plp-pills"
+import { ArregloOverlay } from "./plp-overlay"
+
+type ListadoPlp = NonNullable<NonNullable<RenderContext["catalogo"]>["listado"]>
+
+export type PlpConfig = {
+  filtros: "sidebar" | "pills" | "overlay" | "inline"
+  columnas: 3 | 4
+  card: CardVariant
+  paginacion: "numerada" | "load-more"
+  mostrarContador: boolean
+  vista: "grilla" | "lista"
+}
+
+/** Facetas válidas (control×fuente) de listado.filtros, ordenadas por `order`. */
+export function facetsValidas(listado: ListadoPlp) {
+  return [...listado.filtros.facets]
+    .filter((facet) => facetControlEsValido(facet))
+    .sort((a, b) => a.order - b.order)
+}
+
+/**
+ * Productos del PLP + Paginacion debajo. `vista` decide el layout:
+ * - "grilla" (default): grilla responsive (mobile 2 col → md:columnas col).
+ * - "lista": filas horizontales (imagen chica + título/precio/CTA en línea),
+ *   una debajo de otra, en cualquier ancho.
+ * (mockup PLP l.83-100).
+ */
+export function FrameProductos({
+  listado,
+  columnas,
+  card,
+  ctx,
+  paginacion = "numerada",
+  vista = "grilla",
+}: {
+  listado: ListadoPlp
+  columnas: 3 | 4
+  card: CardVariant
+  ctx: RenderContext
+  paginacion?: "numerada" | "load-more"
+  vista?: "grilla" | "lista"
+}) {
+  return (
+    <div className="flex flex-col gap-6">
+      {vista === "lista" ? (
+        <div data-lista className="flex w-full flex-col divide-y" style={{ borderColor: "var(--cms-borde)" }}>
+          {listado.productos.map((product) => (
+            <div key={product.id} className="py-4 first:pt-0">
+              <TarjetaProducto product={product} card={card} ctx={ctx} vista="lista" />
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div
+          data-grid
+          className={`grid w-full grid-cols-2 gap-4 md:gap-5 ${
+            columnas === 3 ? "md:grid-cols-3" : "md:grid-cols-4"
+          }`}
+        >
+          {listado.productos.map((product) => (
+            <TarjetaProducto key={product.id} product={product} card={card} ctx={ctx} />
+          ))}
+        </div>
+      )}
+      <Paginacion listado={listado} ctx={ctx} modo={paginacion} />
+    </div>
+  )
+}
+
+/** Bottom-sheet de filtros (scrim + panel inferior): grabber, "Limpiar todo", una sección por faceta válida, CTA. */
+export function BottomSheetFiltros({
+  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 md:hidden" onClick={onCerrar} />
+      <div
+        className="fixed inset-x-0 bottom-0 z-50 flex max-h-[85vh] flex-col gap-4 overflow-y-auto px-5 pb-5 pt-3.5 md:hidden"
+        style={{
+          background: "var(--cms-superficie)",
+          color: "var(--cms-texto)",
+          borderRadius: "14px 14px 0 0",
+        }}
+      >
+        <div
+          aria-hidden="true"
+          data-grabber
+          className="mx-auto h-1 w-10 rounded-full"
+          style={{ background: "var(--cms-borde)" }}
+        />
+        <div className="flex items-center justify-between">
+          <span className="text-[15px] font-semibold">Filtros</span>
+          <Enlace
+            href="?"
+            className="text-[12px] underline [color:var(--cms-texto-suave)] [text-decoration:underline]"
+          >
+            Limpiar todo
+          </Enlace>
+        </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>
+        ))}
+        <button
+          type="button"
+          onClick={onCerrar}
+          className="mt-2 py-3.5 text-center text-[12.5px] 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>
+    </>
+  )
+}
+
+/** Barra sticky inferior "Filtrar (n)" | "Ordenar" (mockup PLP l.226-229); abre BottomSheetFiltros. */
+export function BarraFiltrosMobil({
+  listado,
+  ctx,
+  cantidadFiltros,
+}: {
+  listado: ListadoPlp
+  ctx: RenderContext
+  cantidadFiltros: number
+}) {
+  const [abierto, setAbierto] = useState(false)
+
+  return (
+    <>
+      <div
+        className="fixed inset-x-0 bottom-0 z-30 grid grid-cols-2 md:hidden"
+        style={{ background: "var(--cms-superficie)", borderTop: "var(--cms-grosor-borde) solid var(--cms-borde)" }}
+      >
+        <button
+          type="button"
+          onClick={() => setAbierto(true)}
+          aria-expanded={abierto}
+          className="py-[15px] text-center text-[12.5px] font-semibold [border-right:var(--cms-grosor-borde)_solid_var(--cms-borde)]"
+        >
+          <span aria-hidden="true">⚌</span> Filtrar ({cantidadFiltros})
+        </button>
+        <button type="button" className="py-[15px] text-center text-[12.5px] font-semibold">
+          <span aria-hidden="true">⇅</span> Ordenar
+        </button>
+      </div>
+      <BottomSheetFiltros listado={listado} ctx={ctx} abierto={abierto} onCerrar={() => setAbierto(false)} />
+    </>
+  )
+}
+
+/** Cantidad de facetas con al menos un valor seleccionado (para el badge "Filtrar (n)"). */
+function contarFiltrosActivos(listado: ListadoPlp): number {
+  return Object.values(listado.seleccion).filter((valores) => valores.length > 0).length
+}
+
+/**
+ * Mapa `config.filtros` → arreglo desktop correspondiente. Cada arreglo solo
+ * oculta su propio CHROME de filtros en mobile (`hidden md:...`); el
+ * `children` que recibe (la grilla) NUNCA queda dentro de ese contenedor
+ * oculto, así la grilla permanece visible en mobile.
+ */
+const ARREGLOS_POR_FILTROS = {
+  sidebar: ArregloSidebar,
+  inline: ArregloInline,
+  pills: ArregloPills,
+  overlay: ArregloOverlay,
+} as const
+
+/**
+ * Frame compartido del PLP: breadcrumb + h1 + toolbar + pills activas + el
+ * arreglo desktop de filtros elegido por `config.filtros` (slot único: un solo
+ * arreglo se renderiza, pero SIEMPRE recibe la grilla `FrameProductos` como
+ * `children` y es responsable de mostrarla — solo su chrome de filtros es
+ * desktop-only) + la convergencia mobile (BarraFiltrosMobil + BottomSheetFiltros),
+ * que se renderiza SIEMPRE sin importar `config.filtros`.
+ */
+export function PlpLayout({ ctx, config }: { ctx: RenderContext; config: PlpConfig }) {
+  const listado = ctx.catalogo?.listado
+  if (!listado) return null
+
+  const ArregloFiltros = ARREGLOS_POR_FILTROS[config.filtros] ?? ArregloSidebar
+
+  return (
+    <section className="flex flex-col gap-5 px-4 py-6 md:px-7 md:py-8">
+      <Breadcrumb items={listado.breadcrumb} ctx={ctx} />
+      <div className="flex items-baseline justify-between gap-4">
+        <h1
+          className="m-0 text-[26px] md:text-[34px]"
+          style={{
+            fontFamily: "var(--cms-fuente-titulo)",
+            fontWeight: "var(--cms-titulo-peso)",
+            textTransform: "var(--cms-titulo-transform)",
+            letterSpacing: "var(--cms-titulo-espaciado)",
+          }}
+        >
+          {listado.titulo}
+        </h1>
+        <ToolbarPlp
+          listado={listado}
+          ctx={ctx}
+          mostrarContador={config.mostrarContador}
+          vista={config.vista}
+        />
+      </div>
+      <PillsActivas listado={listado} ctx={ctx} />
+      <ArregloFiltros listado={listado} ctx={ctx}>
+        <FrameProductos
+          listado={listado}
+          columnas={config.columnas}
+          card={config.card}
+          paginacion={config.paginacion}
+          vista={config.vista}
+          ctx={ctx}
+        />
+      </ArregloFiltros>
+      <BarraFiltrosMobil listado={listado} ctx={ctx} cantidadFiltros={contarFiltrosActivos(listado)} />
+    </section>
+  )
+}