Schema bloków i typy pól

Wszystkie typy pól

Edytowalne właściwości bloku definiujesz budowniczym fields.*() wewnątrz defineBlock. Każdy builder zwraca definicję pola; klucz nadany w props staje się kluczem treści.

Builder	Opis	Typ wartości
`fields.singleLine()`	Jednowierszowe pole tekstowe	`string`
`fields.multiLine()`	Wielowierszowy obszar tekstu	`string`
`fields.richText()`	Edytor WYSIWYG (Tiptap)	`string` (HTML)
`fields.numeric()`	Pole liczbowe	`number`
`fields.boolean()`	Przełącznik	`boolean`
`fields.date()`	Wybór daty	`string` (ISO)
`fields.color()`	Wybór koloru	`string` (hex)
`fields.media()`	Przesyłanie obrazu/wideo	`string` (URL)
`fields.link()`	Adres URL wewnętrzny/zewnętrzny	`string`
`fields.select()`	Lista rozwijana (pojedynczy wybór)	`string`
`fields.multiselect()`	Wielokrotny wybór	`string[]`
`fields.repeater()`	Tablica obiektów	`Array<object>`

Definiowanie bloku

Blok deklarujesz za pomocą defineBlock. Jego edytowalne pola znajdują się w 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" }),
  },
});

Opcje pól

Każdy builder fields.*() przyjmuje te same opcje bazowe:

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

Dostępne klucze: label, required, defaultValue, placeholder, helperText. Pola select i repeater dodają jeszcze kilka (poniżej).

Select i Multiselect

Opcje to zwykła tablica łańcuchów znaków:

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

Repeater (tablice)

Użyj itemSchema — mapy zagnieżdżonych fields.*() — aby opisać każdy wiersz:

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" }),
    },
  }),
}

W komponencie:

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>
  );
}

Repeater obsługuje też itemLabel, addButtonLabel, minItems, maxItems oraz collapsible.