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.text()	Jednowierszowe pole tekstowe	string
fields.textarea()	Wielowierszowy obszar tekstu	string
fields.richText()	Edytor WYSIWYG (Tiptap)	string (HTML)
fields.markdown()	Edytor Markdown	string (Markdown)
fields.number()	Pole liczbowe	number
fields.date()	Wybór daty	string (ISO date)
fields.datetime()	Wybór daty i godziny	string (ISO)
fields.boolean()	Przełącznik	boolean
fields.color()	Wybór koloru	string (hex)
fields.media()	Przesyłanie obrazu/wideo	string or string[]
fields.link()	Link wewnętrzny/zewnętrzny	string
fields.url()	Pole URL	string
fields.email()	Pole e-mail	string
fields.select()	Lista rozwijana (pojedynczy wybór)	string
fields.radio()	Grupa radiowa (pojedynczy wybór)	string
fields.multiselect()	Wielokrotny wybór	string[]
fields.relation()	Odwołanie do rekordów modelu	record or record[]
fields.repeater()	Tablica zagnieżdżonych grup pól	object[]
fields.table()	Edytowalna siatka tabeli	{ columns, rows }
fields.json()	Edytor surowego JSON	JSON value
fields.form()	Wybór formularza Cmssy	string (form id)
fields.pageSelector()	Wybór strony/stron	PageRef[]

Większość builderów przyjmuje tylko opcje bazowe poniżej. fields.select(), fields.radio() i fields.multiselect() wymagają tablicy options; fields.media() przyjmuje multiple; fields.relation() potrzebuje model (slug wskazywanego modelu), a opcjonalnie mode: "all", multiple, sort i limit. Relacja przechowuje id rekordu(-ów); API dostarczania rozwiązuje je do pełnych rekordów, zanim wyrenderuje się Twój komponent.

---

Definiowanie bloku

Blok deklarujesz za pomocą defineBlock. Jego edytowalne pola znajdują się w props:

import { defineBlock, fields } from "@cmssy/react";
import Hero from "./Hero";

export const heroProps = {
  heading: fields.text({ label: "Heading", required: true, defaultValue: "Welcome" }),
  description: fields.textarea({ label: "Description" }),
};

export const heroBlock = defineBlock({
  type: "hero",
  label: "Hero",
  component: Hero,
  props: heroProps,
});

Wyeksportuj obiekt props osobno i otypuj z niego komponent - BlockProps<typeof heroProps> - dzięki czemu schemat pozostaje jedynym miejscem z nazwą pola, a typy wartości z tabeli powyżej stają się typami, które widzi Twój komponent. Zobacz Tworzenie bloków.

---

Opcje pól

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

fields.text({
  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.text({ label: "Icon Name", defaultValue: "Star" }),
      title: fields.text({ label: "Title", required: true }),
      description: fields.textarea({ 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.