@arroyavecommerce/theme-kinetic 0.2.0

package/src/catalog/config.ts

@@ -0,0 +1,167 @@
+import type { CmsPageConfig, PageConfigSetting } from "@arroyavecommerce/cms-core"
+import { resolvePageConfig } from "@arroyavecommerce/cms-storefront"
+import type { PlpConfig } from "./plp"
+import type { PdpConfig } from "./pdp"
+
+/** Devuelve `valor` si pertenece a `opciones`, si no el `fallback` (mismo criterio defensivo que el dispatcher `?? ArregloSidebar` de 4d-ii). */
+function enOEnum<T extends string>(valor: string, opciones: readonly T[], fallback: T): T {
+  return (opciones as readonly string[]).includes(valor) ? (valor as T) : fallback
+}
+
+/** `"si"` -> true, cualquier otro string -> el `fallback` booleano de esa clave. */
+function enOBooleano(valor: string, fallback: boolean): boolean {
+  return valor === "si" ? true : valor === "no" ? false : fallback
+}
+
+/** `CmsPageConfig` (strings) -> `PlpConfig` (tipado), con coerción + fallback defensivo por clave. */
+export function resolverPlpConfig(pageConfig: CmsPageConfig | null): PlpConfig {
+  const filtros = enOEnum(
+    resolvePageConfig(pageConfig, "plp.filtros", "sidebar"),
+    ["sidebar", "pills", "overlay", "inline"] as const,
+    "sidebar"
+  )
+  const columnasRaw = resolvePageConfig(pageConfig, "plp.columnas", "3")
+  const columnas = columnasRaw === "3" || columnasRaw === "4" ? (Number(columnasRaw) as 3 | 4) : 3
+  const card = enOEnum(
+    resolvePageConfig(pageConfig, "plp.card", "minimal"),
+    ["minimal", "quick-add", "tallas", "quick-view"] as const,
+    "minimal"
+  )
+  const paginacion = enOEnum(
+    resolvePageConfig(pageConfig, "plp.paginacion", "numerada"),
+    ["numerada", "load-more"] as const,
+    "numerada"
+  )
+  const mostrarContador = enOBooleano(resolvePageConfig(pageConfig, "plp.mostrarContador", "si"), true)
+  const vista = enOEnum(
+    resolvePageConfig(pageConfig, "plp.vista", "grilla"),
+    ["grilla", "lista"] as const,
+    "grilla"
+  )
+
+  return { filtros, columnas, card, paginacion, mostrarContador, vista }
+}
+
+/** `CmsPageConfig` (strings) -> `PdpConfig` (tipado), con coerción + fallback defensivo por clave. */
+export function resolverPdpConfig(pageConfig: CmsPageConfig | null): PdpConfig {
+  const galeria = enOEnum(
+    resolvePageConfig(pageConfig, "pdp.galeria", "grid"),
+    ["grid", "carrusel"] as const,
+    "grid"
+  )
+  const stickyBar = enOBooleano(resolvePageConfig(pageConfig, "pdp.stickyBar", "si"), true)
+  const compraRapida = enOBooleano(resolvePageConfig(pageConfig, "pdp.compraRapida", "no"), false)
+  const mostrarFavoritos = enOBooleano(resolvePageConfig(pageConfig, "pdp.mostrarFavoritos", "si"), true)
+  const mostrarReseñas = enOBooleano(resolvePageConfig(pageConfig, "pdp.mostrarReseñas", "no"), false)
+  const mostrarRelacionados = enOBooleano(resolvePageConfig(pageConfig, "pdp.mostrarRelacionados", "si"), true)
+
+  return { galeria, stickyBar, compraRapida, mostrarFavoritos, mostrarReseñas, mostrarRelacionados }
+}
+
+/** Descriptor de settings del PLP (spec §8) para la UI de config de página. */
+export const plpSettings: PageConfigSetting[] = [
+  {
+    key: "plp.filtros",
+    label: "Filtros",
+    opciones: [
+      { value: "sidebar", label: "Sidebar" },
+      { value: "pills", label: "Pills" },
+      { value: "overlay", label: "Overlay" },
+      { value: "inline", label: "Inline" },
+    ],
+  },
+  {
+    key: "plp.columnas",
+    label: "Columnas",
+    opciones: [
+      { value: "3", label: "3 columnas" },
+      { value: "4", label: "4 columnas" },
+    ],
+  },
+  {
+    key: "plp.card",
+    label: "Tarjeta de producto",
+    opciones: [
+      { value: "minimal", label: "Minimal" },
+      { value: "quick-add", label: "Quick add" },
+      { value: "tallas", label: "Tallas" },
+      { value: "quick-view", label: "Quick view" },
+    ],
+  },
+  {
+    key: "plp.paginacion",
+    label: "Paginación",
+    opciones: [
+      { value: "numerada", label: "Numerada" },
+      { value: "load-more", label: "Cargar más" },
+    ],
+  },
+  {
+    key: "plp.mostrarContador",
+    label: "Mostrar contador de resultados",
+    opciones: [
+      { value: "si", label: "Sí" },
+      { value: "no", label: "No" },
+    ],
+  },
+  {
+    key: "plp.vista",
+    label: "Vista del listado",
+    opciones: [
+      { value: "grilla", label: "Grilla" },
+      { value: "lista", label: "Lista" },
+    ],
+  },
+]
+
+/** Descriptor de settings del PDP (spec §8) para la UI de config de página. */
+export const pdpSettings: PageConfigSetting[] = [
+  {
+    key: "pdp.galeria",
+    label: "Galería",
+    opciones: [
+      { value: "grid", label: "Grid" },
+      { value: "carrusel", label: "Carrusel" },
+    ],
+  },
+  {
+    key: "pdp.stickyBar",
+    label: "Barra sticky",
+    opciones: [
+      { value: "si", label: "Sí" },
+      { value: "no", label: "No" },
+    ],
+  },
+  {
+    key: "pdp.compraRapida",
+    label: "Compra rápida",
+    opciones: [
+      { value: "si", label: "Sí" },
+      { value: "no", label: "No" },
+    ],
+  },
+  {
+    key: "pdp.mostrarFavoritos",
+    label: "Mostrar favoritos",
+    opciones: [
+      { value: "si", label: "Sí" },
+      { value: "no", label: "No" },
+    ],
+  },
+  {
+    key: "pdp.mostrarReseñas",
+    label: "Mostrar reseñas",
+    opciones: [
+      { value: "si", label: "Sí" },
+      { value: "no", label: "No" },
+    ],
+  },
+  {
+    key: "pdp.mostrarRelacionados",
+    label: "Mostrar relacionados",
+    opciones: [
+      { value: "si", label: "Sí" },
+      { value: "no", label: "No" },
+    ],
+  },
+]

package/src/catalog/filter-controls.test.tsx

@@ -0,0 +1,149 @@
+import { readFileSync } from "node:fs"
+import { fileURLToPath } from "node:url"
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import type { Facet } from "@arroyavecommerce/cms-core"
+import { ControlDeFiltro } from "./filter-controls"
+import { mockCtx } from "../test/mock-ctx"
+
+const codigoFuente = readFileSync(fileURLToPath(new URL("./filter-controls.tsx", import.meta.url)), "utf-8")
+
+const urlFiltro = (facetId: string, valor: string) => `?${facetId}=${valor}`
+
+describe("ControlDeFiltro", () => {
+  it("checkbox: renderiza una opcion por opciones con etiqueta+conteo, como Enlace a urlFiltro; marca la seleccionada", () => {
+    const facet: Facet = {
+      id: "categoria",
+      label: "Categoría",
+      control: "checkbox",
+      source: { type: "tag", tagIds: ["t1", "t2"] },
+      order: 1,
+    }
+    const html = renderToStaticMarkup(
+      <ControlDeFiltro
+        facet={facet}
+        seleccionados={["camisetas"]}
+        opciones={[
+          { valor: "camisetas", etiqueta: "Camisetas", conteo: 128 },
+          { valor: "hoodies", etiqueta: "Hoodies", conteo: 42 },
+        ]}
+        urlFiltro={urlFiltro}
+        ctx={mockCtx()}
+      />
+    )
+
+    expect(html).toContain("Camisetas (128)")
+    expect(html).toContain("Hoodies (42)")
+    expect(html).toContain('href="?categoria=camisetas"')
+    expect(html).toContain('href="?categoria=hoodies"')
+    // aria-current debe estar en el <a> real (mismo tag que el href), no en el <li>/<span> contenedor.
+    expect(html).toMatch(/<a href="\?categoria=camisetas"[^>]*aria-current="true"/)
+  })
+
+  it("pill: renderiza chips (Enlace) por opcion; el seleccionado queda resaltado", () => {
+    const facet: Facet = {
+      id: "talla",
+      label: "Talla",
+      control: "pill",
+      source: { type: "tag", tagIds: ["t1"] },
+      order: 1,
+    }
+    const html = renderToStaticMarkup(
+      <ControlDeFiltro
+        facet={facet}
+        seleccionados={["S"]}
+        opciones={[
+          { valor: "S", etiqueta: "S" },
+          { valor: "M", etiqueta: "M" },
+        ]}
+        urlFiltro={urlFiltro}
+        ctx={mockCtx()}
+      />
+    )
+
+    expect(html).toContain('href="?talla=S"')
+    expect(html).toContain('href="?talla=M"')
+    // aria-current debe estar en el <a> real (mismo tag que el href), no en el <span> contenedor.
+    expect(html).toMatch(/<a href="\?talla=S"[^>]*aria-current="true"/)
+  })
+
+  it('dropdown: renderiza un boton "label ▾"', () => {
+    const facet: Facet = {
+      id: "color",
+      label: "Color",
+      control: "dropdown",
+      source: { type: "tag", tagIds: ["t1"] },
+      order: 1,
+    }
+    const html = renderToStaticMarkup(
+      <ControlDeFiltro
+        facet={facet}
+        seleccionados={[]}
+        opciones={[{ valor: "negro", etiqueta: "Negro" }]}
+        urlFiltro={urlFiltro}
+        ctx={mockCtx()}
+      />
+    )
+
+    expect(html).toContain("Color")
+    expect(html).toContain("▾")
+  })
+
+  it("range: renderiza dos extremos de precio (min/max) que navegan por urlFiltro", () => {
+    const facet: Facet = {
+      id: "precio",
+      label: "Precio",
+      control: "range",
+      source: { type: "price" },
+      order: 1,
+    }
+    const html = renderToStaticMarkup(
+      <ControlDeFiltro
+        facet={facet}
+        seleccionados={[]}
+        opciones={[
+          { valor: "min", etiqueta: "$ 49.900" },
+          { valor: "max", etiqueta: "$ 189.900" },
+        ]}
+        urlFiltro={urlFiltro}
+        ctx={mockCtx()}
+      />
+    )
+
+    expect(html).toContain("$ 49.900")
+    expect(html).toContain("$ 189.900")
+    expect(html).toContain('href="?precio=min"')
+    expect(html).toContain('href="?precio=max"')
+  })
+
+  it("faceta invalida (control:range + source:tag) devuelve null", () => {
+    const facet: Facet = {
+      id: "x",
+      label: "X",
+      control: "range",
+      source: { type: "tag", tagIds: ["x"] },
+      order: 1,
+    }
+    const resultado = ControlDeFiltro({ facet, seleccionados: [], opciones: [], urlFiltro, ctx: mockCtx() })
+
+    expect(resultado).toBeNull()
+  })
+
+  it("faceta invalida (control:pill + source:price) devuelve null", () => {
+    const facet: Facet = {
+      id: "y",
+      label: "Y",
+      control: "pill",
+      source: { type: "price" },
+      order: 1,
+    }
+    const resultado = ControlDeFiltro({ facet, seleccionados: [], opciones: [], urlFiltro, ctx: mockCtx() })
+
+    expect(resultado).toBeNull()
+  })
+
+  it("no emite <img> ni <a> directos: todo pasa por ctx.componentes", () => {
+    expect(codigoFuente).not.toMatch(/<img[\s>]/)
+    expect(codigoFuente).not.toMatch(/<a[\s>]/)
+  })
+})

package/src/catalog/filter-controls.tsx

@@ -0,0 +1,187 @@
+"use client"
+
+import { useState, type ComponentType } from "react"
+import type { Facet } from "@arroyavecommerce/cms-core"
+import { facetControlEsValido } from "@arroyavecommerce/cms-core"
+import type { RenderContext } from "../context"
+
+export type FilterControlProps = {
+  facet: Facet
+  seleccionados: string[]
+  opciones: { valor: string; etiqueta: string; conteo?: number }[]
+  urlFiltro: (facetId: string, valor: string) => string
+  ctx: RenderContext
+}
+
+function etiquetaOpcion(opcion: FilterControlProps["opciones"][number]): string {
+  return opcion.conteo != null ? `${opcion.etiqueta} (${opcion.conteo})` : opcion.etiqueta
+}
+
+/** <li>+Enlace compartido por CheckboxControl y la lista de DropdownControl: aria-current va en el ancla real. */
+function OpcionEnlace({
+  opcion,
+  activa,
+  href,
+  Enlace,
+}: {
+  opcion: FilterControlProps["opciones"][number]
+  activa: boolean
+  href: string
+  Enlace: RenderContext["componentes"]["Enlace"]
+}) {
+  return (
+    <li>
+      <Enlace
+        href={href}
+        aria-current={activa ? "true" : undefined}
+        className={`inline-block [text-decoration:none] ${
+          activa ? "font-semibold [color:var(--cms-texto)]" : "font-normal [color:var(--cms-texto-suave)]"
+        }`}
+      >
+        {etiquetaOpcion(opcion)}
+      </Enlace>
+    </li>
+  )
+}
+
+/** Lista vertical de sidebar (mockup PLP l.44-55): "Camisetas (128)" con la activa resaltada. */
+function CheckboxControl({ facet, seleccionados, opciones, urlFiltro, ctx }: FilterControlProps) {
+  const { Enlace } = ctx.componentes
+  return (
+    <div className="flex flex-col gap-2.5">
+      <div
+        className="text-[11px] font-semibold uppercase tracking-[0.1em] [color:var(--cms-texto)]"
+        style={{ fontFamily: "var(--cms-fuente-texto)" }}
+      >
+        {facet.label}
+      </div>
+      <ul className="m-0 flex list-none flex-col gap-2 p-0 text-[13px]">
+        {opciones.map((opcion) => (
+          <OpcionEnlace
+            key={opcion.valor}
+            opcion={opcion}
+            activa={seleccionados.includes(opcion.valor)}
+            href={urlFiltro(facet.id, opcion.valor)}
+            Enlace={Enlace}
+          />
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+/** Chips horizontales (mockup PLP l.113-118): seleccionado resaltado en primario. */
+function PillControl({ facet, seleccionados, opciones, urlFiltro, ctx }: FilterControlProps) {
+  const { Enlace } = ctx.componentes
+  return (
+    <div className="flex flex-wrap gap-2" role="group" aria-label={facet.label}>
+      {opciones.map((opcion) => {
+        const activa = seleccionados.includes(opcion.valor)
+        return (
+          <span key={opcion.valor}>
+            <Enlace
+              href={urlFiltro(facet.id, opcion.valor)}
+              aria-current={activa ? "true" : undefined}
+              className={`inline-block rounded-full px-4 py-2 text-[12px] font-semibold [text-decoration:none] ${
+                activa
+                  ? "[background:var(--cms-primario)] [color:var(--cms-primario-texto)]"
+                  : "font-normal [border:var(--cms-grosor-borde)_solid_var(--cms-borde)] [color:var(--cms-texto)]"
+              }`}
+            >
+              {etiquetaOpcion(opcion)}
+            </Enlace>
+          </span>
+        )
+      })}
+    </div>
+  )
+}
+
+/** Extremos de precio min/max (mockup PLP l.68-75); navegan por urlFiltro. */
+function RangeControl({ facet, opciones, urlFiltro, ctx }: FilterControlProps) {
+  const { Enlace } = ctx.componentes
+  const [minOpcion, maxOpcion] = opciones
+  return (
+    <div className="flex flex-col gap-2.5">
+      <div
+        className="text-[11px] font-semibold uppercase tracking-[0.1em] [color:var(--cms-texto)]"
+        style={{ fontFamily: "var(--cms-fuente-texto)" }}
+      >
+        {facet.label}
+      </div>
+      <div
+        className="flex items-center justify-between text-[11px] font-medium [color:var(--cms-texto-suave)]"
+        style={{ fontFamily: "var(--cms-fuente-mono)" }}
+      >
+        {minOpcion ? (
+          <Enlace
+            href={urlFiltro(facet.id, minOpcion.valor)}
+            className="[color:inherit] [text-decoration:none]"
+          >
+            {minOpcion.etiqueta}
+          </Enlace>
+        ) : (
+          <span />
+        )}
+        {maxOpcion ? (
+          <Enlace
+            href={urlFiltro(facet.id, maxOpcion.valor)}
+            className="[color:inherit] [text-decoration:none]"
+          >
+            {maxOpcion.etiqueta}
+          </Enlace>
+        ) : (
+          <span />
+        )}
+      </div>
+    </div>
+  )
+}
+
+/** Botón "label ▾" (mockup PLP l.114) que abre un panel de opciones vía useState. */
+function DropdownControl({ facet, seleccionados, opciones, urlFiltro, ctx }: FilterControlProps) {
+  const [abierto, setAbierto] = useState(false)
+  const { Enlace } = ctx.componentes
+  return (
+    <div className="relative inline-block text-[12px]">
+      <button
+        type="button"
+        onClick={() => setAbierto((valor) => !valor)}
+        aria-expanded={abierto}
+        className="inline-flex items-center gap-1.5 px-4 py-2 font-medium [background:var(--cms-superficie)] [border:var(--cms-grosor-borde)_solid_var(--cms-borde)] [border-radius:var(--cms-radio)] [color:var(--cms-texto)]"
+        style={{ fontFamily: "var(--cms-fuente-texto)" }}
+      >
+        {facet.label} ▾
+      </button>
+      {abierto ? (
+        <ul
+          className="absolute left-0 top-full z-10 m-0 mt-1.5 flex min-w-[160px] list-none flex-col gap-1 p-2 text-[12.5px] [background:var(--cms-superficie)] [border:var(--cms-grosor-borde)_solid_var(--cms-borde)] [border-radius:var(--cms-radio)]"
+        >
+          {opciones.map((opcion) => (
+            <OpcionEnlace
+              key={opcion.valor}
+              opcion={opcion}
+              activa={seleccionados.includes(opcion.valor)}
+              href={urlFiltro(facet.id, opcion.valor)}
+              Enlace={Enlace}
+            />
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  )
+}
+
+export const filterControls: Record<"pill" | "dropdown" | "checkbox" | "range", ComponentType<FilterControlProps>> = {
+  pill: PillControl,
+  dropdown: DropdownControl,
+  checkbox: CheckboxControl,
+  range: RangeControl,
+}
+
+/** Resuelve el widget por `facet.control`; devuelve `null` si la combinación control×fuente no es válida. */
+export function ControlDeFiltro(props: FilterControlProps) {
+  if (!facetControlEsValido(props.facet)) return null
+  const Widget = filterControls[props.facet.control]
+  return <Widget {...props} />
+}