Bileşen Yapılandırması

// Yanlış: className kaybolur, düğüm seçilemez
render: (p) => <section className="py-16">{p.title}</section>

// Doğru
render: (p) => <section className={cn("py-16", p.className)}>{p.title}</section>

import { TecofRoot } from "@tecof/theme-editor";

render: (p) => (
  <TecofRoot as="section" className={cn("py-16", p.className)}>
    {p.title}
  </TecofRoot>
)

import { createLanguageField, defineSection } from "@tecof/theme-editor";

export const FAQSection = defineSection({
  label: "Sıkça Sorulan Sorular",
  category: "sections",
  slots: {
    content: { label: "Başlık ve açıklama", layout: "col", gap: "md", default: ["Title", "Paragraph"] },
    items: {
      label: "Sorular",
      layout: "col",
      gap: "sm",
      hideIfEmpty: true,
      className: (p) => p.compact && "max-w-2xl mx-auto",
      default: [{ type: "FAQItem" }, { type: "FAQItem" }],
    },
  },
  fields: {
    compact: { type: "toggle", label: "Dar düzen" },
    eyebrow: createLanguageField({ label: "Üst başlık" }),
  },
  defaultProps: { compact: false },
  render: (p, slots) => (
    <section className="py-16 lg:py-24">
      <div className="mx-auto max-w-4xl px-4">
        {slots.content}
        <div className="mt-10">{slots.items}</div>
      </div>
    </section>
  ),
});

import { Slot } from "@tecof/theme-editor";

render: (p) => (
  <section className={cn("py-16", p.className)}>
    <Slot value={p.itemsSlot} layout="row-wrap" gap="xl" className="justify-center" data-reveal-group />
  </section>
)

ProductCard: {
  fields: {
    source: { type: "select", options: [{ label: "Elle", value: "manual" }, { label: "CMS", value: "cms" }] },
    title: { type: "text" },
    slug: { type: "text" },
  },
  resolveFields: (props, { fields }) => ({
    ...fields,
    ...(props.source === "cms" ? { collection: createCmsCollectionField({ label: "Koleksiyon" }) } : {}),
  }),
  resolveData: (props) => ({
    props: { slug: slugify(props.title ?? "") },
    readOnly: { slug: true },
  }),
  render: (props) => <article className={props.className}>{props.title}</article>,
}

const config: StudioConfig = {
  components: {
    Slider: {
      acceptsChildren: { slides: ["Slide"] },   // slides slotu yalnız Slide alır
      maxItems: { slides: 8 },
      fields: { slides: { type: "slot", orientation: "horizontal" } },
      render: ({ slides, className }) => <section className={className}>{slides}</section>,
    },
    Slide: {
      allowedParents: ["Slider"],                // yalnız Slider içine bırakılabilir
      render: ({ className }) => <figure className={className} />,
    },
  },
};

InlineButton: {
  inline: true,
  fields: { text: { type: "text" } },
  render: ({ puck, text, className }) => (
    <button ref={puck?.dragRef} className={className}>{text}</button>
  ),
}

Button: {
  fields: { text: { type: "text" }, tone: { type: "radio", options: [{ label: "Ana", value: "primary" }, { label: "Çizgili", value: "outline" }] } },
  variants: {
    primary: { label: "Ana buton", props: { tone: "primary" } },
    outline: { label: "Çizgili buton", props: { tone: "outline" } },
  },
  render: (p) => <a className={cn(p.tone === "primary" ? "bg-black text-white" : "border", p.className)}>{p.text}</a>,
}

export const editorConfig: StudioConfig = {
  components,
  categories: {
    sections: { title: "Sayfa bölümleri", components: ["Header", "Hero", "Footer"] },
    elements: { title: "Elementler", components: ["Title", "Paragraph", "Button"] },
  },
  root: {
    fields: {
      enableEcommerce: { type: "radio", label: "E-ticaret özellikleri", options: [{ label: "Aktif", value: "yes" }, { label: "Pasif", value: "no" }] },
    },
  },
};