@arroyavecommerce/theme-kinetic 0.2.0

package/src/catalog/plp-parts.tsx

@@ -0,0 +1,292 @@
+"use client"
+
+import { useState } from "react"
+import type { RenderContext } from "../context"
+
+type ListadoPlp = NonNullable<NonNullable<RenderContext["catalogo"]>["listado"]>
+
+/** <nav aria-label="Ruta"> con enlaces via ctx.componentes.Enlace; el ultimo item queda como texto plano. */
+export function Breadcrumb({
+  items,
+  ctx,
+}: {
+  items: { texto: string; href: string }[]
+  ctx: RenderContext
+}) {
+  const { Enlace } = ctx.componentes
+  return (
+    <nav
+      aria-label="Ruta"
+      className="flex flex-wrap items-center gap-1.5 text-[11px] font-medium"
+      style={{ fontFamily: "var(--cms-fuente-mono)", color: "var(--cms-texto-suave)" }}
+    >
+      {items.map((item, index) => {
+        const esUltimo = index === items.length - 1
+        return (
+          <span key={item.href} className="flex items-center gap-1.5">
+            {esUltimo ? (
+              <span style={{ color: "var(--cms-texto)" }}>{item.texto}</span>
+            ) : (
+              <Enlace href={item.href} className="[color:inherit] [text-decoration:none]">
+                {item.texto}
+              </Enlace>
+            )}
+            {esUltimo ? null : <span aria-hidden="true">/</span>}
+          </span>
+        )
+      })}
+    </nav>
+  )
+}
+
+/** Opciones de orden fijas del template (mockup PLP l.37: "Ordenar: Relevancia ▾"). */
+const OPCIONES_ORDEN: { valor: string; etiqueta: string }[] = [
+  { valor: "relevancia", etiqueta: "Relevancia" },
+  { valor: "novedades", etiqueta: "Novedades" },
+  { valor: "precio-asc", etiqueta: "Precio: menor a mayor" },
+  { valor: "precio-desc", etiqueta: "Precio: mayor a menor" },
+]
+
+function etiquetaOrden(valor: string): string {
+  return OPCIONES_ORDEN.find((opcion) => opcion.valor === valor)?.etiqueta ?? valor
+}
+
+/** Boton "Ordenar: <actual> ▾" que abre un panel de opciones (client) que navega por listado.urlOrden. */
+function DropdownOrden({ listado, ctx }: { listado: ListadoPlp; ctx: RenderContext }) {
+  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-3.5 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)" }}
+      >
+        Ordenar: {etiquetaOrden(listado.orden)} ▾
+      </button>
+      {abierto ? (
+        <ul className="absolute right-0 top-full z-10 m-0 mt-1.5 flex min-w-[190px] 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_ORDEN.map((opcion) => {
+            const activa = opcion.valor === listado.orden
+            return (
+              <li key={opcion.valor}>
+                <Enlace
+                  href={listado.urlOrden(opcion.valor)}
+                  aria-current={activa ? "true" : undefined}
+                  className={`inline-block w-full [text-decoration:none] ${
+                    activa ? "font-semibold [color:var(--cms-texto)]" : "font-normal [color:var(--cms-texto-suave)]"
+                  }`}
+                >
+                  {opcion.etiqueta}
+                </Enlace>
+              </li>
+            )
+          })}
+        </ul>
+      ) : null}
+    </div>
+  )
+}
+
+/**
+ * Toggle de vista ▦/☰: indicador presentacional. La FUENTE DE VERDAD del layout
+ * es `config.vista` (resuelto server-side y aplicado por `FrameProductos`); este
+ * toggle solo refleja ese valor inicial (`vistaActual`) y da feedback local. No
+ * re-renderiza la grilla ni cambia la URL.
+ */
+function ToggleVista({ vistaActual = "grilla" }: { vistaActual?: "grilla" | "lista" }) {
+  const [vista, setVista] = useState<"grilla" | "lista">(vistaActual)
+  return (
+    <div
+      className="flex items-center gap-0.5 px-2 py-1.5"
+      style={{ border: "var(--cms-grosor-borde) solid var(--cms-borde)", borderRadius: "var(--cms-radio)" }}
+    >
+      <button
+        type="button"
+        onClick={() => setVista("grilla")}
+        aria-pressed={vista === "grilla"}
+        aria-label="Vista en cuadricula"
+        className="px-1 text-[13px]"
+        style={{ fontWeight: vista === "grilla" ? 700 : 400, color: vista === "grilla" ? "var(--cms-texto)" : "var(--cms-texto-suave)" }}
+      >
+        ▦
+      </button>
+      <button
+        type="button"
+        onClick={() => setVista("lista")}
+        aria-pressed={vista === "lista"}
+        aria-label="Vista en lista"
+        className="px-1 text-[13px]"
+        style={{ fontWeight: vista === "lista" ? 700 : 400, color: vista === "lista" ? "var(--cms-texto)" : "var(--cms-texto-suave)" }}
+      >
+        ☰
+      </button>
+    </div>
+  )
+}
+
+/** Contador de productos + "Ordenar ▾" + toggle de vista (mockup PLP l.35-39). */
+export function ToolbarPlp({
+  listado,
+  ctx,
+  mostrarContador = true,
+  vista = "grilla",
+}: {
+  listado: ListadoPlp
+  ctx: RenderContext
+  mostrarContador?: boolean
+  vista?: "grilla" | "lista"
+}) {
+  return (
+    <div className="flex items-center justify-end gap-3.5">
+      {mostrarContador ? (
+        <span className="text-[12px]" style={{ color: "var(--cms-texto-suave)" }}>
+          {listado.total} productos
+        </span>
+      ) : null}
+      <DropdownOrden listado={listado} ctx={ctx} />
+      <ToggleVista vistaActual={vista} />
+    </div>
+  )
+}
+
+function etiquetaFiltro(listado: ListadoPlp, facetId: string, valor: string): string {
+  return listado.opcionesFaceta[facetId]?.find((opcion) => opcion.valor === valor)?.etiqueta ?? valor
+}
+
+/**
+ * Un chip por cada (facetId, valor) en listado.seleccion, con "×" que navega a
+ * urlFiltro(facetId, valor) (togglea = quita) + "Limpiar todo". `null` si no hay seleccion.
+ *
+ * "Limpiar todo": en 4d-i (aislamiento) navega a "?" (ruta sin query). La cascara real
+ * (sub-proyecto 5) es quien conoce la URL canonica de la pagina y debe reemplazar este
+ * href por la ruta sin ningun parametro de faceta.
+ */
+export function PillsActivas({ listado, ctx }: { listado: ListadoPlp; ctx: RenderContext }) {
+  const entradas = Object.entries(listado.seleccion).flatMap(([facetId, valores]) =>
+    valores.map((valor) => ({ facetId, valor }))
+  )
+  if (entradas.length === 0) return null
+
+  const { Enlace } = ctx.componentes
+  return (
+    <ul role="list" className="m-0 flex flex-wrap items-center gap-2 p-0">
+      {entradas.map(({ facetId, valor }) => {
+        const etiqueta = etiquetaFiltro(listado, facetId, valor)
+        return (
+          <li key={`${facetId}:${valor}`}>
+            <Enlace
+              href={listado.urlFiltro(facetId, valor)}
+              className="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[11.5px] [background:var(--cms-superficie)] [border:var(--cms-grosor-borde)_solid_var(--cms-borde)] [color:var(--cms-texto)] [text-decoration:none]"
+            >
+              <span aria-hidden="true">{etiqueta}</span>
+              <b aria-hidden="true">×</b>
+              <span className="sr-only">Quitar filtro {etiqueta}</span>
+            </Enlace>
+          </li>
+        )
+      })}
+      <li>
+        <Enlace
+          href="?"
+          className="inline-block px-1.5 py-1.5 text-[11.5px] underline [color:var(--cms-texto-suave)] [text-decoration:underline]"
+        >
+          Limpiar todo
+        </Enlace>
+      </li>
+    </ul>
+  )
+}
+
+/** Construye la secuencia de paginas a mostrar, con "…" si totalPaginas > 7. */
+function rangoPaginas(pagina: number, totalPaginas: number): (number | "…")[] {
+  if (totalPaginas <= 7) {
+    return Array.from({ length: totalPaginas }, (_, indice) => indice + 1)
+  }
+  const candidatas = new Set<number>([1, totalPaginas, pagina - 1, pagina, pagina + 1])
+  const ordenadas = [...candidatas].filter((p) => p >= 1 && p <= totalPaginas).sort((a, b) => a - b)
+
+  const resultado: (number | "…")[] = []
+  let anterior = 0
+  for (const p of ordenadas) {
+    if (anterior !== 0 && p - anterior > 1) resultado.push("…")
+    resultado.push(p)
+    anterior = p
+  }
+  return resultado
+}
+
+/** <nav aria-label="Paginación"> numerada con hrefPara + aria-current="page" en la actual; elipsis si >7. */
+function PaginacionNumerada({ listado, ctx }: { listado: ListadoPlp; ctx: RenderContext }) {
+  const { Enlace } = ctx.componentes
+  const { pagina, totalPaginas, hrefPara } = listado.paginacion
+  const paginas = rangoPaginas(pagina, totalPaginas)
+
+  return (
+    <nav
+      aria-label="Paginación"
+      className="flex items-center justify-center gap-1.5 text-[12px] font-medium"
+      style={{ fontFamily: "var(--cms-fuente-mono)" }}
+    >
+      {paginas.map((p, indice) =>
+        p === "…" ? (
+          <span
+            key={`elipsis-${indice}`}
+            aria-hidden="true"
+            className="flex h-[34px] w-[34px] items-center justify-center"
+            style={{ color: "var(--cms-texto-suave)" }}
+          >
+            …
+          </span>
+        ) : (
+          <Enlace
+            key={p}
+            href={hrefPara(p)}
+            aria-current={p === pagina ? "page" : undefined}
+            className={`flex h-[34px] w-[34px] items-center justify-center [text-decoration:none] ${
+              p === pagina
+                ? "[background:var(--cms-primario)] [color:var(--cms-primario-texto)]"
+                : "[border:var(--cms-grosor-borde)_solid_var(--cms-borde)] [color:var(--cms-texto)]"
+            }`}
+          >
+            {p}
+          </Enlace>
+        )
+      )}
+    </nav>
+  )
+}
+
+/** Boton "Cargar más" presentacional (stub en aislamiento; la cascara conecta la carga real). */
+function BotonCargarMas() {
+  return (
+    <button
+      type="button"
+      className="mx-auto block px-6 py-2.5 text-[11.5px] font-semibold uppercase tracking-[0.08em]"
+      style={{
+        background: "var(--cms-primario)",
+        color: "var(--cms-primario-texto)",
+        borderRadius: "var(--cms-radio)",
+        fontFamily: "var(--cms-fuente-texto)",
+      }}
+    >
+      Cargar más
+    </button>
+  )
+}
+
+/** modo "numerada" (default): nav numerada por hrefPara. modo "load-more": boton client presentacional. */
+export function Paginacion({
+  listado,
+  ctx,
+  modo = "numerada",
+}: {
+  listado: ListadoPlp
+  ctx: RenderContext
+  modo?: "numerada" | "load-more"
+}) {
+  if (modo === "load-more") return <BotonCargarMas />
+  return <PaginacionNumerada listado={listado} ctx={ctx} />
+}

package/src/catalog/plp-pills.tsx

@@ -0,0 +1,44 @@
+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 "pills" (mockup PLP l.107-132): barra horizontal de
+ * chips/dropdowns (uno por faceta válida, via ControlDeFiltro) sobre
+ * `children` (la grilla, provista por `PlpLayout`) a todo el ancho. Solo la
+ * barra de chips 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 ArregloPills({
+  listado,
+  ctx,
+  children,
+}: {
+  listado: ListadoPlp
+  ctx: RenderContext
+  children: ReactNode
+}) {
+  return (
+    <div data-arreglo="pills" className="flex flex-col gap-4">
+      <div
+        className="hidden flex-wrap items-center gap-2 py-3 [border-top:var(--cms-grosor-borde)_solid_var(--cms-borde)] [border-bottom:var(--cms-grosor-borde)_solid_var(--cms-borde)] md:flex"
+      >
+        {facetsValidas(listado).map((facet) => (
+          <div key={facet.id} data-facet={facet.id}>
+            <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-sidebar.tsx

@@ -0,0 +1,47 @@
+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 "sidebar" (mockup PLP l.41-105): aside 240px a la izquierda
+ * con una sección por faceta válida + `children` (la grilla, provista por
+ * `PlpLayout`) a la derecha. Solo el `<aside>` es desktop-only
+ * (`hidden md:flex`): el filtrado mobile va por el bottom-sheet. `children`
+ * NO queda dentro de ningún contenedor `hidden`, así la grilla se muestra
+ * full-width en mobile.
+ */
+export function ArregloSidebar({
+  listado,
+  ctx,
+  children,
+}: {
+  listado: ListadoPlp
+  ctx: RenderContext
+  children: ReactNode
+}) {
+  return (
+    <div data-arreglo="sidebar" className="flex flex-col gap-7 md:grid md:grid-cols-[240px_1fr]">
+      <aside className="hidden flex-col gap-5 text-[13px] md:flex">
+        {facetsValidas(listado).map((facet, indice) => (
+          <div
+            key={facet.id}
+            data-facet={facet.id}
+            className={indice === 0 ? "" : "[border-top:var(--cms-grosor-borde)_solid_var(--cms-borde)] pt-4"}
+          >
+            <ControlDeFiltro
+              facet={facet}
+              opciones={listado.opcionesFaceta[facet.id] ?? []}
+              seleccionados={listado.seleccion[facet.id] ?? []}
+              urlFiltro={listado.urlFiltro}
+              ctx={ctx}
+            />
+          </div>
+        ))}
+      </aside>
+      {children}
+    </div>
+  )
+}