@arroyavecommerce/theme-kinetic 0.2.0

package/src/blocks/_shared.tsx

@@ -0,0 +1,174 @@
+import type { CSSProperties, ReactNode } from "react"
+
+/**
+ * Utilidades compartidas por los bloques de home de la Fase 2 (features,
+ * marquee, featuredCollection, testimonials).
+ *
+ * ── `fondo` por bloque ───────────────────────────────────────────────────────
+ * Hoy el color de la home es global. Para poder alternar secciones claras y
+ * oscuras en la MISMA página, cada bloque expone un enum `fondo`. Se resuelve
+ * SIEMPRE con tokens del tema (`--cms-*`) + fallback, así el contraste es
+ * correcto en cualquier preset:
+ *   - `claro`      → fondo del tema sobre texto del tema.
+ *   - `superficie` → superficie del tema (paneles) sobre texto del tema.
+ *   - `oscuro`     → invierte: usa el color de TEXTO como fondo y el de FONDO
+ *                    como texto (contraste garantizado en todos los presets).
+ *   - `acento`     → acento del tema sobre "texto sobre primario".
+ *
+ * ── Motion sutil ─────────────────────────────────────────────────────────────
+ * Reveal-on-scroll 100% CSS (sin JS, SSR-safe): el contenido es visible por
+ * defecto y sólo se anima cuando el navegador soporta scroll-driven animations
+ * y el usuario NO pidió `prefers-reduced-motion: reduce`. Progresivo: si no hay
+ * soporte, el contenido simplemente aparece sin animación.
+ */
+
+// ── Fondo ────────────────────────────────────────────────────────────────────
+
+export const FONDOS = ["claro", "oscuro", "acento", "superficie"] as const
+export type Fondo = (typeof FONDOS)[number]
+
+/** Opciones para el campo `select` de Puck (reutilizable en puck-config). */
+export const FONDO_OPCIONES = [
+  { label: "Claro", value: "claro" },
+  { label: "Oscuro", value: "oscuro" },
+  { label: "Acento", value: "acento" },
+  { label: "Superficie", value: "superficie" },
+] as const
+
+export type EstiloFondo = {
+  background: string
+  color: string
+  /** Color de texto secundario/apagado, legible sobre `background`. */
+  colorSuave: string
+  /** Borde legible sobre `background`. */
+  borde: string
+  /** Color de acento/eyebrow legible sobre `background`. */
+  acento: string
+  /** `true` cuando el fondo es oscuro y el texto va claro. */
+  invertido: boolean
+}
+
+export function resolverFondo(fondo: Fondo): EstiloFondo {
+  switch (fondo) {
+    case "oscuro":
+      return {
+        background: "var(--cms-texto,#151515)",
+        color: "var(--cms-fondo,#fafaf8)",
+        colorSuave: "color-mix(in srgb, var(--cms-fondo,#fafaf8) 68%, transparent)",
+        borde: "color-mix(in srgb, var(--cms-fondo,#fafaf8) 22%, transparent)",
+        acento: "currentColor",
+        invertido: true,
+      }
+    case "acento":
+      return {
+        background: "var(--cms-acento,#3b2bff)",
+        color: "var(--cms-primario-texto,#ffffff)",
+        colorSuave: "color-mix(in srgb, var(--cms-primario-texto,#ffffff) 78%, transparent)",
+        borde: "color-mix(in srgb, var(--cms-primario-texto,#ffffff) 28%, transparent)",
+        acento: "currentColor",
+        invertido: true,
+      }
+    case "superficie":
+      return {
+        background: "var(--cms-superficie,#ffffff)",
+        color: "var(--cms-texto,#151515)",
+        colorSuave: "var(--cms-texto-suave,#666666)",
+        borde: "var(--cms-borde,#e6e4df)",
+        acento: "var(--cms-acento,#3b2bff)",
+        invertido: false,
+      }
+    case "claro":
+    default:
+      return {
+        background: "var(--cms-fondo,#fafaf8)",
+        color: "var(--cms-texto,#151515)",
+        colorSuave: "var(--cms-texto-suave,#666666)",
+        borde: "var(--cms-borde,#e6e4df)",
+        acento: "var(--cms-acento,#3b2bff)",
+        invertido: false,
+      }
+  }
+}
+
+// ── Motion ───────────────────────────────────────────────────────────────────
+
+/** Clase que dispara el reveal-on-scroll (ver `EstiloMotion`). */
+export const CLASE_REVEAL = "cms-reveal"
+
+const CSS_MOTION =
+  "@media (prefers-reduced-motion: no-preference){" +
+  "@supports (animation-timeline: view()){" +
+  ".cms-reveal{animation:cms-reveal-in linear both;animation-timeline:view();animation-range:entry 0% cover 32%}" +
+  "@keyframes cms-reveal-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}" +
+  "}}"
+
+/**
+ * Emite (una vez por bloque) las reglas CSS del reveal-on-scroll. Se puede
+ * repetir sin daño si hay varios bloques en la página.
+ */
+export function EstiloMotion() {
+  return <style dangerouslySetInnerHTML={{ __html: CSS_MOTION }} />
+}
+
+// ── Piezas compartidas ───────────────────────────────────────────────────────
+
+/** Etiqueta/eyebrow monoespaciada; toma el acento del fondo activo. */
+export function Eyebrow({ children, color }: { children: string; color: string }) {
+  if (!children) return null
+  return (
+    <div
+      className="text-[11px] font-semibold tracking-[0.16em]"
+      style={{ fontFamily: "var(--cms-fuente-mono)", color }}
+    >
+      {children}
+    </div>
+  )
+}
+
+/** Único heading de sección de los bloques nuevos: `<h2>` (el `<h1>` es del hero). */
+export function TituloSeccion({ children, className }: { children: string; className?: string }) {
+  return (
+    <h2
+      className={`m-0 text-2xl leading-[1.15] md:text-[30px] ${className ?? ""}`}
+      style={{
+        fontFamily: "var(--cms-fuente-titulo)",
+        fontWeight: "var(--cms-titulo-peso)",
+        textTransform: "var(--cms-titulo-transform)",
+        letterSpacing: "var(--cms-titulo-espaciado)",
+      }}
+    >
+      {children}
+    </h2>
+  )
+}
+
+/**
+ * Contenedor de sección: aplica el `fondo` resuelto + espaciado vertical
+ * coherente (`--cms-espaciado-seccion` con fallback) + radio del tema.
+ */
+export function Seccion({
+  fondo,
+  children,
+  className,
+  ariaLabel,
+}: {
+  fondo: Fondo
+  children: ReactNode
+  className?: string
+  ariaLabel?: string
+}) {
+  const f = resolverFondo(fondo)
+  const style: CSSProperties = {
+    background: f.background,
+    color: f.color,
+    borderRadius: "var(--cms-radio)",
+    paddingTop: "var(--cms-espaciado-seccion, 3.5rem)",
+    paddingBottom: "var(--cms-espaciado-seccion, 3.5rem)",
+  }
+  return (
+    <section aria-label={ariaLabel} className={`w-full px-5 md:px-8 ${className ?? ""}`} style={style}>
+      <EstiloMotion />
+      {children}
+    </section>
+  )
+}

package/src/blocks/carrusel.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react"
+
+/**
+ * Slider horizontal con flechas prev/next, scrollbar OCULTO y snap. Sustituye
+ * al `overflow-x-auto` con barra visible (poco elegante) por un carrusel
+ * moderno: en desktop se navega con las flechas, en touch se desliza con el
+ * dedo. Recibe los `<li>` ya renderizados como `children` (patrón RSC: un
+ * server component pasa hijos a este client component).
+ *
+ * Los colores de las flechas se pasan desde el bloque (según su `fondo`
+ * resuelto) para que sean legibles sobre cualquier superficie.
+ */
+export function Carrusel({
+  children,
+  ariaLabel,
+  colorFlecha,
+  bordeFlecha,
+  fondoFlecha,
+}: {
+  children: ReactNode
+  ariaLabel?: string
+  colorFlecha: string
+  bordeFlecha: string
+  fondoFlecha: string
+}) {
+  const ref = useRef<HTMLUListElement>(null)
+  const [puedeIzq, setPuedeIzq] = useState(false)
+  const [puedeDer, setPuedeDer] = useState(false)
+
+  const actualizar = useCallback(() => {
+    const el = ref.current
+    if (!el) return
+    setPuedeIzq(el.scrollLeft > 4)
+    setPuedeDer(el.scrollLeft + el.clientWidth < el.scrollWidth - 4)
+  }, [])
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    actualizar()
+    el.addEventListener("scroll", actualizar, { passive: true })
+    window.addEventListener("resize", actualizar)
+    return () => {
+      el.removeEventListener("scroll", actualizar)
+      window.removeEventListener("resize", actualizar)
+    }
+  }, [actualizar])
+
+  const desplazar = (dir: -1 | 1) => {
+    const el = ref.current
+    if (!el) return
+    const suave =
+      typeof window !== "undefined" && typeof window.matchMedia === "function"
+        ? !window.matchMedia("(prefers-reduced-motion: reduce)").matches
+        : true
+    const paso = Math.max(el.clientWidth * 0.9, 240)
+    el.scrollBy({ left: dir * paso, behavior: suave ? "smooth" : "auto" })
+  }
+
+  const estiloFlecha = {
+    color: colorFlecha,
+    borderColor: bordeFlecha,
+    background: fondoFlecha,
+  }
+  const claseFlecha =
+    "absolute top-1/2 z-10 hidden h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full border shadow-sm transition-opacity duration-200 md:flex"
+
+  return (
+    <div className="relative">
+      <ul
+        ref={ref}
+        aria-label={ariaLabel}
+        className="flex snap-x snap-mandatory gap-4 overflow-x-auto pb-1 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      >
+        {children}
+      </ul>
+
+      <button
+        type="button"
+        aria-label="Anterior"
+        onClick={() => desplazar(-1)}
+        disabled={!puedeIzq}
+        aria-hidden={!puedeIzq}
+        className={`${claseFlecha} left-1 ${puedeIzq ? "opacity-100" : "pointer-events-none opacity-0"}`}
+        style={estiloFlecha}
+      >
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+          <path d="M15 5l-7 7 7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </button>
+
+      <button
+        type="button"
+        aria-label="Siguiente"
+        onClick={() => desplazar(1)}
+        disabled={!puedeDer}
+        aria-hidden={!puedeDer}
+        className={`${claseFlecha} right-1 ${puedeDer ? "opacity-100" : "pointer-events-none opacity-0"}`}
+        style={estiloFlecha}
+      >
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+          <path d="M9 5l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </button>
+    </div>
+  )
+}

package/src/blocks/category-tiles.test.tsx

@@ -0,0 +1,59 @@
+import { readFileSync } from "node:fs"
+import { fileURLToPath } from "node:url"
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { categoryTilesBlock } from "./category-tiles"
+import { mockCtx } from "../test/mock-ctx"
+
+describe("categoryTilesBlock", () => {
+  it("defaults pasan el schema", () => {
+    expect(categoryTilesBlock.schema.safeParse(categoryTilesBlock.defaults).success).toBe(true)
+  })
+
+  it("renderiza un enlace por item con su titulo", () => {
+    const html = renderToStaticMarkup(
+      <categoryTilesBlock.Component props={categoryTilesBlock.defaults} ctx={mockCtx()} />
+    )
+
+    for (const item of categoryTilesBlock.defaults.items) {
+      expect(html).toContain(`href="${item.href}"`)
+      expect(html).toContain(item.titulo)
+    }
+  })
+
+  it.each([3, 4] as const)("renderiza sin crash con columnas: %i (md:grid-cols-%i)", (columnas) => {
+    const props = { ...categoryTilesBlock.defaults, columnas }
+    expect(categoryTilesBlock.schema.safeParse(props).success).toBe(true)
+
+    const html = renderToStaticMarkup(<categoryTilesBlock.Component props={props} ctx={mockCtx()} />)
+
+    expect(html).toContain(`md:grid-cols-${columnas}`)
+    expect(html).toContain("grid-cols-2")
+  })
+
+  it("con imagenUrl vacío usa el fallback del mock Imagen en vez de <img src=\"\">", () => {
+    const props = {
+      ...categoryTilesBlock.defaults,
+      items: [{ titulo: "Sin imagen", imagenUrl: "", href: "/categories/sin-imagen" }],
+    }
+    const html = renderToStaticMarkup(<categoryTilesBlock.Component props={props} ctx={mockCtx()} />)
+
+    expect(html).not.toContain('src=""')
+    expect(html).toContain('role="img"')
+  })
+
+  it("no usa <h1> (ese heading es exclusivo del hero)", () => {
+    const html = renderToStaticMarkup(
+      <categoryTilesBlock.Component props={categoryTilesBlock.defaults} ctx={mockCtx()} />
+    )
+    expect(html).not.toMatch(/<h1[ >]/)
+  })
+
+  it("no emite <img> ni <a> directos: todo pasa por ctx.componentes", () => {
+    const rutaFuente = fileURLToPath(new URL("./category-tiles.tsx", import.meta.url))
+    const fuente = readFileSync(rutaFuente, "utf-8")
+
+    expect(fuente).not.toMatch(/<img[\s>]/)
+    expect(fuente).not.toMatch(/<a[\s>]/)
+  })
+})

package/src/blocks/category-tiles.tsx

@@ -0,0 +1,70 @@
+import { z } from "zod"
+import type { BlockDefinition } from "@arroyavecommerce/cms-core"
+import type { RenderContext } from "../context"
+
+export type CategoryTileItem = {
+  titulo: string
+  imagenUrl: string
+  href: string
+}
+
+export type CategoryTilesProps = {
+  columnas: 3 | 4
+  items: CategoryTileItem[]
+}
+
+const categoryTileItemSchema: z.ZodType<CategoryTileItem> = z.object({
+  titulo: z.string().min(1),
+  imagenUrl: z.string(),
+  href: z.string().min(1),
+})
+
+const categoryTilesSchema: z.ZodType<CategoryTilesProps> = z.object({
+  columnas: z.union([z.literal(3), z.literal(4)]),
+  items: z.array(categoryTileItemSchema),
+})
+
+const categoryTilesDefaults: CategoryTilesProps = {
+  columnas: 3,
+  items: [
+    { titulo: "Mujer", imagenUrl: "", href: "/categories/mujer" },
+    { titulo: "Hombre", imagenUrl: "", href: "/categories/hombre" },
+    { titulo: "Accesorios", imagenUrl: "", href: "/categories/accesorios" },
+  ],
+}
+
+/** Mosaico individual: la imagen reserva alto fijo (CLS 0), el título va superpuesto. */
+function Tile({ item, ctx }: { item: CategoryTileItem; ctx: RenderContext }) {
+  const { Imagen, Enlace } = ctx.componentes
+  return (
+    <Enlace
+      href={item.href}
+      className="relative block h-[180px] overflow-hidden [border-radius:var(--cms-radio)] md:h-[230px]"
+    >
+      <Imagen
+        src={item.imagenUrl}
+        alt={item.titulo}
+        className="absolute inset-0 h-full w-full object-cover"
+      />
+      <span className="absolute inset-x-0 bottom-0 px-3.5 pb-3 pt-8 text-xs font-semibold uppercase tracking-[0.06em] text-white [background:linear-gradient(transparent,rgba(0,0,0,.6))] [font-family:var(--cms-fuente-texto)] md:px-4 md:pb-3.5 md:pt-10 md:text-sm">
+        {item.titulo}
+      </span>
+    </Enlace>
+  )
+}
+
+export const categoryTilesBlock: BlockDefinition<CategoryTilesProps, RenderContext> = {
+  label: "Mosaicos de categoría",
+  schema: categoryTilesSchema,
+  defaults: categoryTilesDefaults,
+  Component: ({ props, ctx }) => {
+    const colsMdClass = props.columnas === 4 ? "md:grid-cols-4" : "md:grid-cols-3"
+    return (
+      <div className={`grid w-full grid-cols-2 gap-3 md:gap-3.5 ${colsMdClass}`}>
+        {props.items.map((item) => (
+          <Tile key={item.href} item={item} ctx={ctx} />
+        ))}
+      </div>
+    )
+  },
+}

package/src/blocks/editorial-banner.test.tsx

@@ -0,0 +1,96 @@
+import { readFileSync } from "node:fs"
+import { fileURLToPath } from "node:url"
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { editorialBannerBlock } from "./editorial-banner"
+import { FONDOS, resolverFondo } from "./_shared"
+import { mockCtx } from "../test/mock-ctx"
+
+const posiciones = ["derecha", "izquierda", "fondo"] as const
+
+describe("editorialBannerBlock", () => {
+  it.each(posiciones)(
+    "renderiza sin crash la posicionImagen %s con titulo, texto y enlace",
+    (posicionImagen) => {
+      const props = { ...editorialBannerBlock.defaults, posicionImagen }
+      expect(editorialBannerBlock.schema.safeParse(props).success).toBe(true)
+
+      const html = renderToStaticMarkup(
+        <editorialBannerBlock.Component props={props} ctx={mockCtx()} />
+      )
+
+      expect(html).toContain(editorialBannerBlock.defaults.titulo)
+      expect(html).toContain(editorialBannerBlock.defaults.texto)
+      expect(html).toContain(editorialBannerBlock.defaults.enlace.texto)
+      expect(html).toContain(`href="${editorialBannerBlock.defaults.enlace.href}"`)
+    }
+  )
+
+  it("con imagenUrl vacío usa el fallback del mock Imagen en vez de <img src=\"\">", () => {
+    const props = { ...editorialBannerBlock.defaults, imagenUrl: "" }
+    const html = renderToStaticMarkup(
+      <editorialBannerBlock.Component props={props} ctx={mockCtx()} />
+    )
+
+    expect(html).not.toContain('src=""')
+    expect(html).toContain('role="img"')
+  })
+
+  it("defaults pasan el schema", () => {
+    expect(editorialBannerBlock.schema.safeParse(editorialBannerBlock.defaults).success).toBe(true)
+  })
+
+  it("el fondo por defecto es 'superficie' (preserva el look actual)", () => {
+    expect(editorialBannerBlock.defaults.fondo).toBe("superficie")
+  })
+
+  it.each(FONDOS)("cualquier fondo (%s) pasa el schema", (fondo) => {
+    expect(editorialBannerBlock.schema.safeParse({ ...editorialBannerBlock.defaults, fondo }).success).toBe(true)
+  })
+
+  it.each(["derecha", "izquierda"] as const)(
+    "la posición %s aplica el fondo elegido al panel",
+    (posicionImagen) => {
+      const oscuro = resolverFondo("oscuro")
+      const html = renderToStaticMarkup(
+        <editorialBannerBlock.Component
+          props={{ ...editorialBannerBlock.defaults, posicionImagen, fondo: "oscuro" }}
+          ctx={mockCtx()}
+        />
+      )
+      expect(html).toContain(oscuro.background)
+    }
+  )
+
+  it("posición 'fondo' la manda la imagen: el fondo no altera su markup", () => {
+    const superficie = renderToStaticMarkup(
+      <editorialBannerBlock.Component
+        props={{ ...editorialBannerBlock.defaults, posicionImagen: "fondo", fondo: "superficie" }}
+        ctx={mockCtx()}
+      />
+    )
+    const oscuro = renderToStaticMarkup(
+      <editorialBannerBlock.Component
+        props={{ ...editorialBannerBlock.defaults, posicionImagen: "fondo", fondo: "oscuro" }}
+        ctx={mockCtx()}
+      />
+    )
+    expect(oscuro).toBe(superficie)
+  })
+
+  it("usa un único <h2> como título de sección (nunca <h1>)", () => {
+    const html = renderToStaticMarkup(
+      <editorialBannerBlock.Component props={editorialBannerBlock.defaults} ctx={mockCtx()} />
+    )
+    expect((html.match(/<h2[ >]/g) ?? []).length).toBe(1)
+    expect(html).not.toMatch(/<h1[ >]/)
+  })
+
+  it("no emite <img> ni <a> directos: todo pasa por ctx.componentes", () => {
+    const rutaFuente = fileURLToPath(new URL("./editorial-banner.tsx", import.meta.url))
+    const fuente = readFileSync(rutaFuente, "utf-8")
+
+    expect(fuente).not.toMatch(/<img[\s>]/)
+    expect(fuente).not.toMatch(/<a[\s>]/)
+  })
+})