@arroyavecommerce/theme-kinetic 0.2.0

package/src/puck-config.tsx

@@ -0,0 +1,404 @@
+import type { Config } from "@puckeditor/core"
+import { StudioBlock } from "@arroyavecommerce/cms-studio"
+import { heroBlock } from "./blocks/hero"
+import { categoryTilesBlock } from "./blocks/category-tiles"
+import { productGridBlock } from "./blocks/product-grid"
+import { editorialBannerBlock } from "./blocks/editorial-banner"
+import { newsletterBlock } from "./blocks/newsletter"
+import { featuresBlock, ICONOS_FEATURE } from "./blocks/features"
+import { marqueeBlock } from "./blocks/marquee"
+import { featuredCollectionBlock } from "./blocks/featured-collection"
+import { testimonialsBlock } from "./blocks/testimonials"
+import { lookbookBlock } from "./blocks/lookbook"
+import { faqBlock } from "./blocks/faq"
+import { richTextBlock } from "./blocks/rich-text"
+import { spacerBlock, TAMANOS_SPACER } from "./blocks/spacer"
+import { promoBlock, PROMO_FONDOS } from "./blocks/promo"
+import { videoBlock } from "./blocks/video"
+import { FONDO_OPCIONES } from "./blocks/_shared"
+
+/** Campo Puck reutilizable para los enlaces editables (`{ texto, href }`). */
+const campoEnlace = {
+  type: "object" as const,
+  objectFields: {
+    texto: { type: "text" as const, label: "Texto" },
+    href: { type: "text" as const, label: "Enlace" },
+  },
+}
+
+/** Campo Puck reutilizable para el `fondo` por bloque (claro/oscuro/acento/superficie). */
+const campoFondo = {
+  type: "select" as const,
+  label: "Fondo",
+  options: FONDO_OPCIONES.map((o) => ({ label: o.label, value: o.value })),
+}
+
+/** `fondo` de la banda promocional: los 4 comunes + `degradado`. */
+const ETIQUETA_FONDO: Record<string, string> = {
+  claro: "Claro",
+  oscuro: "Oscuro",
+  acento: "Acento",
+  superficie: "Superficie",
+  degradado: "Degradado",
+}
+const campoFondoPromo = {
+  type: "select" as const,
+  label: "Fondo",
+  options: PROMO_FONDOS.map((v) => ({ label: ETIQUETA_FONDO[v] ?? v, value: v })),
+}
+
+/** Config de Puck para los bloques de Home de `theme-kinetic`. */
+export const puckConfig: Config = {
+  categories: {
+    contenido: {
+      title: "Contenido",
+      components: ["hero", "editorialBanner", "lookbook", "video", "richText", "marquee", "promo", "newsletter"],
+    },
+    catalogo: {
+      title: "Catálogo",
+      components: ["categoryTiles", "productGrid", "featuredCollection"],
+    },
+    social: {
+      title: "Social y confianza",
+      components: ["features", "testimonials", "faq"],
+    },
+    estructura: {
+      title: "Estructura",
+      components: ["spacer"],
+    },
+  },
+  components: {
+    hero: {
+      label: heroBlock.label,
+      defaultProps: heroBlock.defaults,
+      fields: {
+        layout: {
+          type: "select",
+          label: "Diseño",
+          options: [
+            { label: "Full-bleed", value: "full-bleed" },
+            { label: "Split", value: "split" },
+            { label: "Centrado", value: "centered" },
+            { label: "Grid", value: "grid" },
+          ],
+        },
+        alineacion: {
+          type: "select",
+          label: "Alineación",
+          options: [
+            { label: "Izquierda", value: "izquierda" },
+            { label: "Centro", value: "centro" },
+          ],
+        },
+        fondo: campoFondo,
+        etiqueta: { type: "text", label: "Etiqueta" },
+        titulo: { type: "text", label: "Título" },
+        subtitulo: { type: "textarea", label: "Subtítulo" },
+        imagenUrl: { type: "text", label: "Imagen (URL)" },
+        enlacePrimario: { ...campoEnlace, label: "Enlace primario" },
+        enlaceSecundario: { ...campoEnlace, label: "Enlace secundario" },
+      },
+      render: (props) => <StudioBlock definition={heroBlock} props={props} />,
+    },
+    categoryTiles: {
+      label: categoryTilesBlock.label,
+      defaultProps: categoryTilesBlock.defaults,
+      fields: {
+        columnas: {
+          type: "select",
+          label: "Columnas",
+          options: [
+            { label: "3", value: 3 },
+            { label: "4", value: 4 },
+          ],
+        },
+        items: {
+          type: "array",
+          label: "Mosaicos",
+          arrayFields: {
+            titulo: { type: "text", label: "Título" },
+            imagenUrl: { type: "text", label: "Imagen (URL)" },
+            href: { type: "text", label: "Enlace" },
+          },
+          defaultItemProps: { titulo: "", imagenUrl: "", href: "" },
+          getItemSummary: (item) => item.titulo || "Mosaico",
+        },
+      },
+      render: (props) => <StudioBlock definition={categoryTilesBlock} props={props} />,
+    },
+    productGrid: {
+      label: productGridBlock.label,
+      defaultProps: productGridBlock.defaults,
+      fields: {
+        titulo: { type: "text", label: "Título" },
+        coleccionId: { type: "text", label: "ID de colección" },
+        columnas: {
+          type: "select",
+          label: "Columnas",
+          options: [
+            { label: "3", value: 3 },
+            { label: "4", value: 4 },
+          ],
+        },
+        card: {
+          type: "select",
+          label: "Tarjeta de producto",
+          options: [
+            { label: "Minimal", value: "minimal" },
+            { label: "Agregar rápido", value: "quick-add" },
+            { label: "Tallas", value: "tallas" },
+            { label: "Vista rápida", value: "quick-view" },
+          ],
+        },
+      },
+      render: (props) => <StudioBlock definition={productGridBlock} props={props} />,
+    },
+    editorialBanner: {
+      label: editorialBannerBlock.label,
+      defaultProps: editorialBannerBlock.defaults,
+      fields: {
+        posicionImagen: {
+          type: "select",
+          label: "Posición de la imagen",
+          options: [
+            { label: "Derecha", value: "derecha" },
+            { label: "Izquierda", value: "izquierda" },
+            { label: "Fondo", value: "fondo" },
+          ],
+        },
+        fondo: campoFondo,
+        titulo: { type: "text", label: "Título" },
+        texto: { type: "textarea", label: "Texto" },
+        imagenUrl: { type: "text", label: "Imagen (URL)" },
+        enlace: { ...campoEnlace, label: "Enlace" },
+      },
+      render: (props) => <StudioBlock definition={editorialBannerBlock} props={props} />,
+    },
+    newsletter: {
+      label: newsletterBlock.label,
+      defaultProps: newsletterBlock.defaults,
+      fields: {
+        fondo: {
+          type: "select",
+          label: "Fondo",
+          options: [
+            { label: "Fondo", value: "fondo" },
+            { label: "Acento", value: "acento" },
+          ],
+        },
+        titulo: { type: "text", label: "Título" },
+        texto: { type: "textarea", label: "Texto" },
+        placeholder: { type: "text", label: "Placeholder" },
+        textoBoton: { type: "text", label: "Texto del botón" },
+        notaLegal: { type: "textarea", label: "Nota legal" },
+      },
+      render: (props) => <StudioBlock definition={newsletterBlock} props={props} />,
+    },
+    features: {
+      label: featuresBlock.label,
+      defaultProps: featuresBlock.defaults,
+      fields: {
+        fondo: campoFondo,
+        items: {
+          type: "array",
+          label: "Items",
+          arrayFields: {
+            icono: {
+              type: "select",
+              label: "Icono",
+              options: ICONOS_FEATURE.map((v) => ({ label: v, value: v })),
+            },
+            titulo: { type: "text", label: "Título" },
+            texto: { type: "textarea", label: "Texto" },
+          },
+          defaultItemProps: { icono: "envio", titulo: "", texto: "" },
+          getItemSummary: (item) => item.titulo || "Item",
+        },
+      },
+      render: (props) => <StudioBlock definition={featuresBlock} props={props} />,
+    },
+    marquee: {
+      label: marqueeBlock.label,
+      defaultProps: marqueeBlock.defaults,
+      fields: {
+        mensajes: {
+          type: "array",
+          label: "Mensajes",
+          arrayFields: { texto: { type: "text", label: "Mensaje" } },
+          defaultItemProps: { texto: "" },
+          getItemSummary: (item) => item.texto || "Mensaje",
+        },
+        velocidad: {
+          type: "select",
+          label: "Velocidad",
+          options: [
+            { label: "Lenta", value: "lenta" },
+            { label: "Media", value: "media" },
+            { label: "Rápida", value: "rapida" },
+          ],
+        },
+        color: {
+          type: "select",
+          label: "Color",
+          options: [
+            { label: "Acento", value: "acento" },
+            { label: "Tinta", value: "tinta" },
+            { label: "Degradado", value: "degradado" },
+          ],
+        },
+      },
+      render: (props) => <StudioBlock definition={marqueeBlock} props={props} />,
+    },
+    featuredCollection: {
+      label: featuredCollectionBlock.label,
+      defaultProps: featuredCollectionBlock.defaults,
+      fields: {
+        fondo: campoFondo,
+        titulo: { type: "text", label: "Título" },
+        coleccionId: { type: "text", label: "ID de colección" },
+        card: {
+          type: "select",
+          label: "Tarjeta de producto",
+          options: [
+            { label: "Minimal", value: "minimal" },
+            { label: "Agregar rápido", value: "quick-add" },
+            { label: "Tallas", value: "tallas" },
+            { label: "Vista rápida", value: "quick-view" },
+          ],
+        },
+        verTodos: { ...campoEnlace, label: "Ver todos" },
+      },
+      render: (props) => <StudioBlock definition={featuredCollectionBlock} props={props} />,
+    },
+    testimonials: {
+      label: testimonialsBlock.label,
+      defaultProps: testimonialsBlock.defaults,
+      fields: {
+        fondo: campoFondo,
+        titulo: { type: "text", label: "Título" },
+        items: {
+          type: "array",
+          label: "Testimonios",
+          arrayFields: {
+            cita: { type: "textarea", label: "Cita" },
+            autor: { type: "text", label: "Autor" },
+            rating: { type: "number", label: "Rating (1–5)", min: 1, max: 5 },
+          },
+          defaultItemProps: { cita: "", autor: "", rating: 5 },
+          getItemSummary: (item) => item.autor || "Testimonio",
+        },
+      },
+      render: (props) => <StudioBlock definition={testimonialsBlock} props={props} />,
+    },
+    lookbook: {
+      label: lookbookBlock.label,
+      defaultProps: lookbookBlock.defaults,
+      fields: {
+        fondo: campoFondo,
+        titulo: { type: "text", label: "Título" },
+        items: {
+          type: "array",
+          label: "Piezas",
+          arrayFields: {
+            imagenUrl: { type: "text", label: "Imagen (URL)" },
+            titulo: { type: "text", label: "Título" },
+            href: { type: "text", label: "Enlace" },
+          },
+          defaultItemProps: { imagenUrl: "", titulo: "", href: "" },
+          getItemSummary: (item) => item.titulo || "Pieza",
+        },
+      },
+      render: (props) => <StudioBlock definition={lookbookBlock} props={props} />,
+    },
+    faq: {
+      label: faqBlock.label,
+      defaultProps: faqBlock.defaults,
+      fields: {
+        fondo: campoFondo,
+        titulo: { type: "text", label: "Título" },
+        items: {
+          type: "array",
+          label: "Preguntas",
+          arrayFields: {
+            pregunta: { type: "text", label: "Pregunta" },
+            respuesta: { type: "textarea", label: "Respuesta" },
+          },
+          defaultItemProps: { pregunta: "", respuesta: "" },
+          getItemSummary: (item) => item.pregunta || "Pregunta",
+        },
+      },
+      render: (props) => <StudioBlock definition={faqBlock} props={props} />,
+    },
+    richText: {
+      label: richTextBlock.label,
+      defaultProps: richTextBlock.defaults,
+      fields: {
+        fondo: campoFondo,
+        alineacion: {
+          type: "select",
+          label: "Alineación",
+          options: [
+            { label: "Izquierda", value: "izquierda" },
+            { label: "Centro", value: "centro" },
+          ],
+        },
+        titulo: { type: "text", label: "Título" },
+        cuerpo: { type: "textarea", label: "Cuerpo" },
+      },
+      render: (props) => <StudioBlock definition={richTextBlock} props={props} />,
+    },
+    spacer: {
+      label: spacerBlock.label,
+      defaultProps: spacerBlock.defaults,
+      fields: {
+        tamano: {
+          type: "select",
+          label: "Tamaño",
+          options: TAMANOS_SPACER.map((v) => ({ label: v.toUpperCase(), value: v })),
+        },
+        divisor: {
+          type: "radio",
+          label: "Divisor",
+          options: [
+            { label: "Sí", value: true },
+            { label: "No", value: false },
+          ],
+        },
+      },
+      render: (props) => <StudioBlock definition={spacerBlock} props={props} />,
+    },
+    promo: {
+      label: promoBlock.label,
+      defaultProps: promoBlock.defaults,
+      fields: {
+        fondo: campoFondoPromo,
+        titulo: { type: "text", label: "Título" },
+        texto: { type: "textarea", label: "Texto" },
+        enlace: { ...campoEnlace, label: "Enlace" },
+        cuentaRegresiva: { type: "text", label: "Cuenta regresiva (fecha ISO, opcional)" },
+      },
+      render: (props) => <StudioBlock definition={promoBlock} props={props} />,
+    },
+    video: {
+      label: videoBlock.label,
+      defaultProps: videoBlock.defaults,
+      fields: {
+        fondo: campoFondo,
+        titulo: { type: "text", label: "Título" },
+        texto: { type: "textarea", label: "Texto" },
+        videoUrl: { type: "text", label: "Video (MP4/webm o URL de YouTube/Vimeo)" },
+        poster: { type: "text", label: "Portada (URL)" },
+        autoplay: {
+          type: "radio",
+          label: "Reproducción automática (silenciada)",
+          options: [
+            { label: "Sí", value: true },
+            { label: "No", value: false },
+          ],
+        },
+        enlace: { ...campoEnlace, label: "Enlace" },
+      },
+      render: (props) => <StudioBlock definition={videoBlock} props={props} />,
+    },
+  },
+}

package/src/smoke.test.ts

@@ -0,0 +1,8 @@
+import { describe, it, expect } from "vitest";
+import * as t from "./index";
+
+describe("smoke test", () => {
+  it("should export an object", () => {
+    expect(typeof t).toBe("object");
+  });
+});

package/src/template.test.tsx

@@ -0,0 +1,88 @@
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { cmsPageDataSchema, resolveChrome } from "@arroyavecommerce/cms-core"
+import { assertTemplateDefaults } from "@arroyavecommerce/cms-storefront"
+import { themeKinetic } from "./index"
+import { mockCtx, fixtureListado, fixtureDetalle } from "./test/mock-ctx"
+
+describe("themeKinetic", () => {
+  it("no tiene bloques con defaults inválidos", () => {
+    expect(assertTemplateDefaults(themeKinetic)).toEqual([])
+  })
+
+  it("registra los bloques de Home", () => {
+    expect(Object.keys(themeKinetic.blocks)).toEqual([
+      "hero",
+      "categoryTiles",
+      "productGrid",
+      "editorialBanner",
+      "newsletter",
+      "features",
+      "marquee",
+      "featuredCollection",
+      "testimonials",
+      "lookbook",
+      "faq",
+      "richText",
+      "spacer",
+      "promo",
+      "video",
+    ])
+  })
+
+  it("defaultHomePage cumple el schema cmsPageDataSchema", () => {
+    expect(cmsPageDataSchema.safeParse(themeKinetic.defaultHomePage).success).toBe(true)
+  })
+
+  it("tiene chrome registrado con los headers y footers esperados", () => {
+    expect(themeKinetic.chrome).toBeDefined()
+    expect(Object.keys(themeKinetic.chrome!.headers)).toEqual(["inline", "centrado", "split", "minimal"])
+    expect(Object.keys(themeKinetic.chrome!.footers)).toEqual(["moda", "minimal", "newsletter"])
+  })
+
+  it("resolveChrome resuelve el header inline y el footer moda", () => {
+    const config = {
+      version: 1 as const,
+      header: { variante: "inline", props: {} },
+      footer: { variante: "moda", props: {} },
+      menu: { items: [] },
+    }
+    expect(resolveChrome(themeKinetic.chrome!, config, "header").def).toBeDefined()
+    expect(resolveChrome(themeKinetic.chrome!, config, "footer").def).toBeDefined()
+  })
+
+  it("tiene catalogo registrado con pageConfigSettings de plp y pdp", () => {
+    expect(themeKinetic.catalogo).toBeDefined()
+    const settings = themeKinetic.catalogo!.pageConfigSettings
+    expect(settings.plp.map((s) => s.key)).toEqual([
+      "plp.filtros",
+      "plp.columnas",
+      "plp.card",
+      "plp.paginacion",
+      "plp.mostrarContador",
+      "plp.vista",
+    ])
+    expect(settings.pdp.map((s) => s.key)).toEqual([
+      "pdp.galeria",
+      "pdp.stickyBar",
+      "pdp.compraRapida",
+      "pdp.mostrarFavoritos",
+      "pdp.mostrarReseñas",
+      "pdp.mostrarRelacionados",
+    ])
+  })
+
+  it("catalogo.plp renderiza el PLP sin crashear e incluye el titulo del listado", () => {
+    const Plp = themeKinetic.catalogo!.plp
+    const ctx = mockCtx({ catalogo: { listado: fixtureListado() } })
+    const html = renderToStaticMarkup(<Plp ctx={ctx} pageConfig={null} />)
+    expect(html).toContain("Todos los productos")
+  })
+
+  it("catalogo.pdp renderiza el PDP sin crashear e incluye el titulo del producto", () => {
+    const Pdp = themeKinetic.catalogo!.pdp
+    const ctx = mockCtx({ catalogo: { detalle: fixtureDetalle() } })
+    const html = renderToStaticMarkup(<Pdp ctx={ctx} pageConfig={null} />)
+    expect(html).toContain("Sneaker Runner Blanco")
+  })
+})

package/src/test/mock-ctx.test.tsx

@@ -0,0 +1,77 @@
+import { describe, it, expect } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { mockCtx } from "./mock-ctx"
+
+describe("mockCtx", () => {
+  describe("componentes.Imagen", () => {
+    it("debería renderizar img con src y alt cuando src tiene valor", () => {
+      const ctx = mockCtx()
+      const Imagen = ctx.componentes.Imagen
+      const html = renderToStaticMarkup(
+        <Imagen src="/x.jpg" alt="Foto" />
+      )
+      expect(html).toContain('src="/x.jpg"')
+      expect(html).toContain('alt="Foto"')
+      expect(html).toMatch(/<img/)
+    })
+
+    it("debería renderizar placeholder sin src cuando src está vacío", () => {
+      const ctx = mockCtx()
+      const Imagen = ctx.componentes.Imagen
+      const html = renderToStaticMarkup(
+        <Imagen src="" alt="Vacío" />
+      )
+      expect(html).not.toContain('src=')
+      expect(html).toContain('role="img"')
+      expect(html).toContain('aria-label="Vacío"')
+      expect(html).toContain("var(--cms-superficie)")
+    })
+
+    it("debería respetar className", () => {
+      const ctx = mockCtx()
+      const Imagen = ctx.componentes.Imagen
+      const html = renderToStaticMarkup(
+        <Imagen src="/x.jpg" alt="Foto" className="custom-class" />
+      )
+      expect(html).toContain('class="custom-class"')
+    })
+  })
+
+  describe("componentes.Enlace", () => {
+    it("debería renderizar a con href y children", () => {
+      const ctx = mockCtx()
+      const Enlace = ctx.componentes.Enlace
+      const html = renderToStaticMarkup(
+        <Enlace href="/store">Ver</Enlace>
+      )
+      expect(html).toContain('href="/store"')
+      expect(html).toContain("Ver")
+      expect(html).toMatch(/<a/)
+    })
+
+    it("debería respetar className", () => {
+      const ctx = mockCtx()
+      const Enlace = ctx.componentes.Enlace
+      const html = renderToStaticMarkup(
+        <Enlace href="/store" className="link-class">Ver</Enlace>
+      )
+      expect(html).toContain('class="link-class"')
+    })
+  })
+
+  describe("sesion", () => {
+    it("debería ser null por defecto", () => {
+      const ctx = mockCtx()
+      expect(ctx.sesion).toBeNull()
+    })
+  })
+
+  describe("overrides", () => {
+    it("debería permitir override de sesion", () => {
+      const ctx = mockCtx({
+        sesion: { autenticado: true, nombre: "Juan" }
+      })
+      expect(ctx.sesion).toEqual({ autenticado: true, nombre: "Juan" })
+    })
+  })
+})