Esquema de bloques y tipos de campo

Todos los tipos de campo

Define las props editables de un bloque con el builder fields.*() dentro de defineBlock. Cada builder devuelve una definición de campo; la clave que le das en props se convierte en la clave del contenido.

Builder	Descripción	Tipo de valor
fields.singleLine()	Campo de texto de una línea	string
fields.multiLine()	Área de texto multilínea	string
fields.richText()	Editor WYSIWYG (Tiptap)	string (HTML)
fields.numeric()	Campo numérico	number
fields.boolean()	Interruptor	boolean
fields.date()	Selector de fecha	string (ISO)
fields.color()	Selector de color	string (hex)
fields.media()	Subida de imagen/vídeo	string (URL)
fields.link()	URL interna/externa	string
fields.select()	Desplegable (selección única)	string
fields.multiselect()	Selección múltiple	string[]
fields.repeater()	Array de objetos	Array<object>

---

Definir un bloque

Un bloque se declara con defineBlock. Sus campos editables viven bajo props:

import type { ComponentType } from "react";
import { defineBlock, fields } from "@cmssy/react";
import Component from "./src";

export const heroBlock = defineBlock({
  type: "hero",
  label: "Hero",
  component: Component as unknown as ComponentType<{ content: Record<string, unknown> }>,
  props: {
    heading: fields.singleLine({ label: "Heading", required: true, defaultValue: "Welcome" }),
    description: fields.multiLine({ label: "Description" }),
  },
});

---

Opciones de campo

Todos los builders fields.*() aceptan las mismas opciones base:

fields.singleLine({
  label: "Heading",
  required: true,
  defaultValue: "Welcome",
  placeholder: "Enter text",
  helperText: "Main heading",
})

Claves disponibles: label, required, defaultValue, placeholder, helperText. Los campos select y repeater añaden algunas más (abajo).

---

Select y Multiselect

Las opciones son un simple array de strings:

props: {
  layout: fields.select({
    label: "Layout",
    options: ["grid", "list", "carousel"],
    defaultValue: "grid",
  }),
  tags: fields.multiselect({
    label: "Tags",
    options: ["featured", "new"],
  }),
}

---

Repeater (arrays)

Usa itemSchema — un mapa de fields.*() anidados — para describir cada fila:

props: {
  features: fields.repeater({
    label: "Features",
    maxItems: 6,
    itemSchema: {
      icon: fields.singleLine({ label: "Icon Name", defaultValue: "Star" }),
      title: fields.singleLine({ label: "Title", required: true }),
      description: fields.multiLine({ label: "Description" }),
    },
  }),
}

En tu componente:

export default function Features({ content }) {
  return (
    <div className="grid grid-cols-3 gap-6">
      {(content.features ?? []).map((f, i) => (
        <div key={i}><h3>{f.title}</h3><p>{f.description}</p></div>
      ))}
    </div>
  );
}

El repeater también admite itemLabel, addButtonLabel, minItems, maxItems y collapsible.