@arroyavecommerce/theme-kinetic 0.2.0

package/src/catalog/related.test.tsx

@@ -0,0 +1,52 @@
+import { readFileSync } from "node:fs"
+import { fileURLToPath } from "node:url"
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { Relacionados } from "./related"
+import { mockCtx, fixtureDetalle } from "../test/mock-ctx"
+
+const codigoFuente = readFileSync(fileURLToPath(new URL("./related.tsx", import.meta.url)), "utf-8")
+
+describe("Relacionados", () => {
+  it("renderiza una TarjetaProducto por producto (titulo presente) + h3 del titulo (default)", () => {
+    const detalle = fixtureDetalle()
+    const productos = detalle.relacionados!
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(<Relacionados productos={productos} ctx={ctx} />)
+
+    for (const producto of productos) {
+      expect(html).toContain(producto.title)
+    }
+    expect(html).toContain("Combínalo con")
+    const h3s = html.match(/<h3[\s>]/g) ?? []
+    expect(h3s).toHaveLength(1)
+    expect(html).not.toMatch(/<h1[\s>]/)
+  })
+
+  it("acepta un titulo custom", () => {
+    const detalle = fixtureDetalle()
+    const productos = detalle.relacionados!
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(<Relacionados productos={productos} ctx={ctx} titulo="Te puede interesar" />)
+
+    expect(html).toContain("Te puede interesar")
+    expect(html).not.toContain("Combínalo con")
+  })
+
+  it("grid 2-col mobile -> 4-col desktop", () => {
+    const detalle = fixtureDetalle()
+    const productos = detalle.relacionados!
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(<Relacionados productos={productos} ctx={ctx} />)
+
+    expect(html).toContain("grid-cols-2")
+    expect(html).toContain("md:grid-cols-4")
+  })
+})
+
+describe("guard de estandar (cero <img>/<a> directos)", () => {
+  it("no emite <img> ni <a> directos", () => {
+    expect(codigoFuente).not.toMatch(/<img[\s>]/)
+    expect(codigoFuente).not.toMatch(/<a[\s>]/)
+  })
+})

package/src/catalog/related.tsx

@@ -0,0 +1,40 @@
+import type { HttpTypes } from "@medusajs/types"
+import type { RenderContext } from "../context"
+import { TarjetaProducto } from "./product-card"
+
+/**
+ * Slider/grid de productos relacionados del PDP (mockup PDP l.168-179): `<h3>`
+ * (default "Combínalo con") + grid 2-col mobile → 4-col desktop de
+ * `TarjetaProducto` (`card:"minimal"`). Presentacional. Gated por
+ * `config.mostrarRelacionados` en `PdpLayout`.
+ */
+export function Relacionados({
+  productos,
+  ctx,
+  titulo = "Combínalo con",
+}: {
+  productos: HttpTypes.StoreProduct[]
+  ctx: RenderContext
+  titulo?: string
+}) {
+  return (
+    <div className="flex flex-col gap-4">
+      <h3
+        className="text-[22px]"
+        style={{
+          fontFamily: "var(--cms-fuente-titulo)",
+          fontWeight: "var(--cms-titulo-peso)" as unknown as number,
+          textTransform: "var(--cms-titulo-transform)" as unknown as "none",
+          letterSpacing: "var(--cms-titulo-espaciado)",
+        }}
+      >
+        {titulo}
+      </h3>
+      <div className="grid grid-cols-2 gap-4 md:grid-cols-4 md:gap-5">
+        {productos.map((producto) => (
+          <TarjetaProducto key={producto.id} product={producto} card="minimal" ctx={ctx} />
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/catalog/reviews.test.tsx

@@ -0,0 +1,56 @@
+import { readFileSync } from "node:fs"
+import { fileURLToPath } from "node:url"
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { ReviewsSummary } from "./reviews"
+import { mockCtx, fixtureDetalle } from "../test/mock-ctx"
+
+const codigoFuente = readFileSync(fileURLToPath(new URL("./reviews.tsx", import.meta.url)), "utf-8")
+
+describe("ReviewsSummary", () => {
+  it("renderiza el promedio, el total, las barras del histograma y las cards de la muestra; un h2, sin h1", () => {
+    const detalle = fixtureDetalle()
+    const reseñas = detalle.reseñas!
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(<ReviewsSummary reseñas={reseñas} ctx={ctx} />)
+
+    expect(html).toContain("4.6")
+    expect(html).toContain("213")
+    for (const fila of reseñas.histograma) {
+      expect(html).toContain(`${fila.porcentaje}%`)
+    }
+    for (const reseña of reseñas.muestra) {
+      expect(html).toContain(reseña.autor)
+      expect(html).toContain(reseña.texto)
+    }
+
+    const h2s = html.match(/<h2[\s>]/g) ?? []
+    expect(h2s).toHaveLength(1)
+    expect(html).not.toMatch(/<h1[\s>]/)
+  })
+
+  it('renderiza "Compra verificada · Talla N" para reseñas verificadas con talla', () => {
+    const detalle = fixtureDetalle()
+    const reseñas = detalle.reseñas!
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(<ReviewsSummary reseñas={reseñas} ctx={ctx} />)
+
+    expect(html).toContain("Compra verificada · Talla 38")
+  })
+
+  it('renderiza el enlace "Ver las N reseñas" con el total', () => {
+    const detalle = fixtureDetalle()
+    const reseñas = detalle.reseñas!
+    const ctx = mockCtx()
+    const html = renderToStaticMarkup(<ReviewsSummary reseñas={reseñas} ctx={ctx} />)
+
+    expect(html).toContain(`Ver las ${reseñas.total} reseñas`)
+  })
+})
+
+describe("guard de estandar (cero <img>/<a> directos)", () => {
+  it("no emite <img> ni <a> directos", () => {
+    expect(codigoFuente).not.toMatch(/<img[\s>]/)
+    expect(codigoFuente).not.toMatch(/<a[\s>]/)
+  })
+})

package/src/catalog/reviews.tsx

@@ -0,0 +1,116 @@
+import type { RenderContext } from "../context"
+
+export type Reseñas = NonNullable<NonNullable<NonNullable<RenderContext["catalogo"]>["detalle"]>["reseñas"]>
+
+function Estrellas({ estrellas }: { estrellas: number }) {
+  const llenas = Math.round(estrellas)
+  return (
+    <span aria-hidden="true">
+      {"★".repeat(Math.max(0, Math.min(5, llenas)))}
+      {"☆".repeat(Math.max(0, 5 - llenas))}
+    </span>
+  )
+}
+
+/** Barra del histograma (mockup l.149-153): etiqueta "N★" + barra proporcional + porcentaje. */
+function FilaHistograma({ estrellas, porcentaje }: { estrellas: number; porcentaje: number }) {
+  return (
+    <div className="flex items-center gap-2 text-[10.5px] font-medium" style={{ fontFamily: "var(--cms-fuente-mono)" }}>
+      <span className="w-4">{estrellas}★</span>
+      <span
+        className="h-[5px] flex-1 overflow-hidden rounded-[3px]"
+        style={{ background: "var(--cms-borde)" }}
+      >
+        <span
+          className="block h-full"
+          style={{ width: `${porcentaje}%`, background: "var(--cms-texto)" }}
+        />
+      </span>
+      <span>{porcentaje}%</span>
+    </div>
+  )
+}
+
+/** Card de una reseña individual (mockup l.157-164): estrellas+autor, "Compra verificada · Talla N", texto. */
+function CardReseña({ reseña }: { reseña: Reseñas["muestra"][number] }) {
+  return (
+    <div
+      className="p-4"
+      style={{
+        background: "var(--cms-superficie)",
+        border: "var(--cms-grosor-borde) solid var(--cms-borde)",
+        borderRadius: "var(--cms-radio)",
+      }}
+    >
+      <div className="flex justify-between text-[12px]">
+        <span className="font-semibold">
+          <Estrellas estrellas={reseña.estrellas} /> · {reseña.autor}
+        </span>
+        <span style={{ color: "var(--cms-texto-suave)" }}>
+          {reseña.verificada ? "Compra verificada" : null}
+          {reseña.verificada && reseña.talla ? ` · Talla ${reseña.talla}` : null}
+        </span>
+      </div>
+      <p className="mt-2 text-[12.5px] leading-[1.6]" style={{ color: "var(--cms-texto-suave)" }}>
+        {reseña.texto}
+      </p>
+    </div>
+  )
+}
+
+/**
+ * Resumen de reseñas del PDP (mockup PDP l.143-166): rating grande + histograma
+ * de barras (izq) y cards de la muestra + "Ver las N reseñas" (der). Presentacional
+ * (sin backend). Gated por `config.mostrarReseñas` en `PdpLayout`.
+ */
+export function ReviewsSummary({ reseñas, ctx: _ctx }: { reseñas: Reseñas; ctx: RenderContext }) {
+  return (
+    <div className="flex flex-col gap-4">
+      <h2
+        className="text-[22px]"
+        style={{
+          fontFamily: "var(--cms-fuente-titulo)",
+          fontWeight: "var(--cms-titulo-peso)" as unknown as number,
+          textTransform: "var(--cms-titulo-transform)" as unknown as "none",
+          letterSpacing: "var(--cms-titulo-espaciado)",
+        }}
+      >
+        Reseñas
+      </h2>
+      <div
+        className="grid grid-cols-1 gap-9 pb-6 md:grid-cols-[280px_1fr]"
+        style={{ borderBottom: "var(--cms-grosor-borde) solid var(--cms-borde)" }}
+      >
+        <div>
+          <div className="text-[44px] font-bold" style={{ fontFamily: "var(--cms-fuente-mono)" }}>
+            {reseñas.promedio}
+          </div>
+          <div className="text-[14px]">
+            <Estrellas estrellas={reseñas.promedio} />
+          </div>
+          <div className="mt-1 text-[12px]" style={{ color: "var(--cms-texto-suave)" }}>
+            {reseñas.total} reseñas verificadas
+          </div>
+          <div className="mt-3.5 flex flex-col gap-1.5">
+            {reseñas.histograma.map((fila) => (
+              <FilaHistograma key={fila.estrellas} estrellas={fila.estrellas} porcentaje={fila.porcentaje} />
+            ))}
+          </div>
+        </div>
+        <div className="flex flex-col gap-4">
+          {reseñas.muestra.map((reseña, i) => (
+            <CardReseña key={`${reseña.autor}-${i}`} reseña={reseña} />
+          ))}
+          {/* Stub presentacional: la cascara/backend de reseñas cablea la navegacion (sub-proyecto 5) */}
+          <button
+            type="button"
+            className="self-start text-[12px] underline"
+            style={{ background: "transparent", border: "none", color: "var(--cms-texto)", padding: 0 }}
+          >
+            Ver las {reseñas.total} reseñas
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/catalog/skeletons.test.tsx

@@ -0,0 +1,61 @@
+import { readFileSync } from "node:fs"
+import { fileURLToPath } from "node:url"
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { SkeletonPlp, SkeletonPdp } from "./skeletons"
+import * as barrel from "../index"
+
+const codigoFuente = readFileSync(fileURLToPath(new URL("./skeletons.tsx", import.meta.url)), "utf-8")
+
+describe("SkeletonPlp", () => {
+  it("renderiza status accesible + grilla de tarjetas placeholder", () => {
+    const html = renderToStaticMarkup(<SkeletonPlp columnas={4} cantidad={8} />)
+    expect(html).toContain('data-skeleton="plp"')
+    expect(html).toContain('role="status"')
+    expect(html).toContain('aria-busy="true"')
+    expect(html).toContain("data-skeleton-grid")
+    expect(html).toContain("md:grid-cols-4")
+    // 8 tarjetas placeholder → 8 bloques con aspect-ratio de imagen.
+    const bloquesImg = html.match(/aspect-ratio:3 \/ 4/g) ?? html.match(/aspect-ratio:3\/4/g) ?? []
+    expect(bloquesImg.length).toBe(8)
+  })
+
+  it("columnas:3 aplica md:grid-cols-3", () => {
+    const html = renderToStaticMarkup(<SkeletonPlp columnas={3} />)
+    expect(html).toContain("md:grid-cols-3")
+  })
+
+  it("shimmer respeta prefers-reduced-motion (animate-pulse + motion-reduce:animate-none)", () => {
+    const html = renderToStaticMarkup(<SkeletonPlp />)
+    expect(html).toContain("animate-pulse")
+    expect(html).toContain("motion-reduce:animate-none")
+  })
+})
+
+describe("SkeletonPdp", () => {
+  it("renderiza galeria + buy-box placeholder con layout 2-col desktop", () => {
+    const html = renderToStaticMarkup(<SkeletonPdp />)
+    expect(html).toContain('data-skeleton="pdp"')
+    expect(html).toContain('role="status"')
+    expect(html).toContain("md:grid-cols-[1.5fr_1fr]")
+    expect(html).toContain("animate-pulse")
+  })
+})
+
+describe("barrel", () => {
+  it("SkeletonPlp y SkeletonPdp se exportan desde el índice del template", () => {
+    expect(barrel.SkeletonPlp).toBe(SkeletonPlp)
+    expect(barrel.SkeletonPdp).toBe(SkeletonPdp)
+  })
+})
+
+describe("guard de estandar (server-safe, cero <img>/<a> directos, sin use client)", () => {
+  it("no emite <img> ni <a> directos", () => {
+    expect(codigoFuente).not.toMatch(/<img[\s>]/)
+    expect(codigoFuente).not.toMatch(/<a[\s>]/)
+  })
+
+  it('es server-safe: NO declara "use client" (presentacional, sin hooks)', () => {
+    expect(codigoFuente).not.toMatch(/^\s*["']use client["']/)
+  })
+})

package/src/catalog/skeletons.tsx

@@ -0,0 +1,103 @@
+import type { CSSProperties } from "react"
+
+/**
+ * Skeletons de carga presentacionales (server-safe: sin hooks, sin `"use
+ * client"`) para que el host los use en sus `loading.tsx`. El shimmer sutil se
+ * hace con `animate-pulse` de Tailwind, gateado por `motion-reduce:animate-none`
+ * ≡ solo anima con `@media (prefers-reduced-motion: no-preference)`. Todos los
+ * colores salen de tokens `var(--cms-*, fallback)`.
+ */
+
+/** Bloque placeholder base (superficie + radio + pulse respetando reduced-motion). */
+function Bloque({ className = "", style }: { className?: string; style?: CSSProperties }) {
+  return (
+    <div
+      aria-hidden="true"
+      className={`animate-pulse motion-reduce:animate-none ${className}`}
+      style={{ background: "var(--cms-superficie, #eee)", borderRadius: "var(--cms-radio, 8px)", ...style }}
+    />
+  )
+}
+
+/** Tarjeta placeholder: imagen (aspect 3/4) + dos líneas de texto. */
+function CardSkeleton() {
+  return (
+    <div className="flex flex-col gap-2">
+      <Bloque className="w-full" style={{ aspectRatio: "3 / 4" }} />
+      <Bloque className="h-3 w-3/4" />
+      <Bloque className="h-3 w-2/5" />
+    </div>
+  )
+}
+
+/**
+ * Skeleton del PLP: cabecera (título + toolbar) + grilla de tarjetas
+ * placeholder. `columnas` y `cantidad` son ajustables para casar con la config
+ * real de la página. `role="status"` + `aria-busy` para lectores de pantalla.
+ */
+export function SkeletonPlp({
+  columnas = 4,
+  cantidad = 8,
+}: {
+  columnas?: 3 | 4
+  cantidad?: number
+}) {
+  return (
+    <section
+      data-skeleton="plp"
+      role="status"
+      aria-busy="true"
+      aria-label="Cargando productos"
+      className="flex flex-col gap-5 px-4 py-6 md:px-7 md:py-8"
+    >
+      <span className="sr-only">Cargando productos…</span>
+      <div className="flex items-center justify-between gap-4">
+        <Bloque className="h-7 w-40 md:h-9 md:w-64" />
+        <Bloque className="h-8 w-28" />
+      </div>
+      <div
+        data-skeleton-grid
+        className={`grid w-full grid-cols-2 gap-4 md:gap-5 ${
+          columnas === 3 ? "md:grid-cols-3" : "md:grid-cols-4"
+        }`}
+      >
+        {Array.from({ length: cantidad }, (_, i) => (
+          <CardSkeleton key={i} />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+/**
+ * Skeleton del PDP: galería (imagen grande) + buy-box placeholder (eyebrow,
+ * título, precio, chips de talla y CTA). Mismo layout 2-col desktop que el PDP
+ * real (`md:grid md:grid-cols-[1.5fr_1fr]`).
+ */
+export function SkeletonPdp() {
+  return (
+    <section
+      data-skeleton="pdp"
+      role="status"
+      aria-busy="true"
+      aria-label="Cargando producto"
+      className="flex flex-col gap-6 px-4 py-6 md:px-7 md:py-8"
+    >
+      <span className="sr-only">Cargando producto…</span>
+      <div className="flex flex-col gap-6 md:grid md:grid-cols-[1.5fr_1fr] md:items-start md:gap-9">
+        <Bloque className="w-full" style={{ aspectRatio: "1200 / 1500" }} />
+        <div className="flex flex-col gap-4">
+          <Bloque className="h-3 w-24" />
+          <Bloque className="h-7 w-3/4" />
+          <Bloque className="h-5 w-32" />
+          <div className="flex flex-wrap gap-2 pt-2">
+            {Array.from({ length: 5 }, (_, i) => (
+              <Bloque key={i} className="h-10 w-12" />
+            ))}
+          </div>
+          <Bloque className="mt-2 h-12 w-full" />
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/chrome/announcement-bar.test.tsx

@@ -0,0 +1,86 @@
+import { readFileSync } from "node:fs"
+import { fileURLToPath } from "node:url"
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { AnnouncementBar, anuncioSchema, anuncioDefaults, type Anuncio } from "./announcement-bar"
+import { mockCtx } from "../test/mock-ctx"
+
+const mensajes = [
+  { texto: "Envío gratis desde $150.000" },
+  { texto: "Cambios sin costo en 30 días" },
+  { texto: "Nueva colección disponible" },
+]
+
+function anuncio(overrides?: Partial<Anuncio>): Anuncio {
+  return { ...anuncioDefaults, mensajes, ...overrides }
+}
+
+const render = (a: Anuncio) => renderToStaticMarkup(<AnnouncementBar anuncio={a} ctx={mockCtx()} />)
+
+describe("AnnouncementBar", () => {
+  it("los defaults pasan el schema", () => {
+    expect(anuncioSchema.safeParse(anuncioDefaults).success).toBe(true)
+  })
+
+  it("activo:false no muestra la barra", () => {
+    expect(render(anuncio({ activo: false }))).toBe("")
+  })
+
+  it("sin mensajes no muestra la barra", () => {
+    expect(render(anuncio({ mensajes: [] }))).toBe("")
+  })
+
+  describe("variantes", () => {
+    it("estatica muestra todos los mensajes", () => {
+      const html = render(anuncio({ variante: "estatica" }))
+      for (const m of mensajes) expect(html).toContain(m.texto)
+    })
+
+    it("rotativa muestra el primer mensaje en el render inicial", () => {
+      const html = render(anuncio({ variante: "rotativa" }))
+      expect(html).toContain(mensajes[0]!.texto)
+    })
+
+    it("marquesina duplica el track para el loop y respeta prefers-reduced-motion", () => {
+      const html = render(anuncio({ variante: "marquesina" }))
+      expect(html).toContain("cms-marq-track")
+      expect(html).toContain("prefers-reduced-motion")
+      // El primer mensaje aparece dos veces (track duplicado).
+      const ocurrencias = html.split(mensajes[0]!.texto).length - 1
+      expect(ocurrencias).toBe(2)
+    })
+  })
+
+  describe("color", () => {
+    it("acento usa var(--cms-acento) con fallback", () => {
+      expect(render(anuncio({ color: "acento" }))).toContain("var(--cms-acento,#3b2bff)")
+    })
+    it("degradado usa var(--cms-degradado) con fallback", () => {
+      expect(render(anuncio({ color: "degradado" }))).toContain("var(--cms-degradado,")
+    })
+    it("tinta usa var(--cms-texto) de fondo", () => {
+      expect(render(anuncio({ color: "tinta" }))).toContain("var(--cms-texto,#0c0c10)")
+    })
+  })
+
+  it("un mensaje con href se envuelve en ctx.componentes.Enlace", () => {
+    const html = render(anuncio({ variante: "estatica", mensajes: [{ texto: "Ver oferta", href: "/store" }] }))
+    expect(html).toContain('href="/store"')
+  })
+
+  describe("dismissible", () => {
+    it("true muestra el botón de cierre", () => {
+      expect(render(anuncio({ dismissible: true }))).toContain('aria-label="Cerrar anuncio"')
+    })
+    it("false no muestra el botón de cierre", () => {
+      expect(render(anuncio({ dismissible: false }))).not.toContain('aria-label="Cerrar anuncio"')
+    })
+  })
+
+  it("no emite <img>/<a> directos: todo pasa por ctx.componentes", () => {
+    const rutaFuente = fileURLToPath(new URL("./announcement-bar.tsx", import.meta.url))
+    const codigoFuente = readFileSync(rutaFuente, "utf-8")
+    expect(codigoFuente).not.toMatch(/<img[\s>]/)
+    expect(codigoFuente).not.toMatch(/<a[\s>]/)
+  })
+})