Nasıl Yapılır: Basit ve Detaylı Schema Oluşturma

Bu doküman, OpsGridForm bileşeninde kullanılabilecek basit ve detaylı bir schema nasıl oluşturulacağını örneklerle açıklar. OpsGridForm bileşeni, form öğelerini schema özelliğiyle tanımlar ve otomatik olarak render eder.

---

Basit Bir Schema Nasıl Oluşturulur?

Basit bir schema, form öğelerinin temel özelliklerini içerir. Aşağıdaki örnek, bir ürün formu için basit bir schema oluşturmayı gösterir.

Örnek

const schema: IOpsGridFormItem[] = [
  {
    name: "Image",
    visibility: FormItemVisibilityEnum.Both,
    type: FormItemTypeEnum.Image,
    label: "Ürün Görseli",
    gridSize: { xs: 12 },
  },
  {
    name: "Name",
    visibility: FormItemVisibilityEnum.Both,
    type: FormItemTypeEnum.TEXT,
    label: "Ürün Adı",
    placeholder: "Ad giriniz",
    gridSize: { xs: 12, sm: 6 },
  },
  {
    name: "Price",
    visibility: FormItemVisibilityEnum.Both,
    type: FormItemTypeEnum.NUMBER,
    label: "Fiyat",
    placeholder: "Fiyat giriniz",
    gridSize: { xs: 12, sm: 6 },
  },
];

Açıklama

• name: Form öğesinin benzersiz adı.
• type: Öğenin türü (FormItemTypeEnum ile tanımlanır, örn. TEXT, NUMBER).
• label: Görüntülenecek etiket metni.
• placeholder: Kullanıcıya rehberlik eden metin.
• visibility: Alanın görünürlük durumu (FormItemVisibilityEnum.Both, FormItemVisibilityEnum.Edit, FormItemVisibilityEnum.New).
• gridSize: Ekran boyutlarına göre öğenin genişliği.

---

Detaylı Bir Schema Nasıl Oluşturulur?

Daha karmaşık ihtiyaçlar için, schema öğelerine validasyon kuralları, özel bileşenler ve alt gruplar eklenebilir.

Örnek: Detaylı Schema

const schema: IOpsGridFormItem[] = [
  {
    name: "Image",
    type: FormItemTypeEnum.Image,
    label: "Ürün Görseli",
    visibility: FormItemVisibilityEnum.Both,
    gridSize: { xs: 12 },
  },
  {
    name: "Details",
    schema: [
      {
        name: "Description",
        type: FormItemTypeEnum.TEXT,
        label: "Açıklama",
        multiLine: true,
        rows: 4,
        visibility: FormItemVisibilityEnum.Both,
        registerOptions: {
          required: "Bu alan zorunludur",
          maxLength: {
            value: 200,
            message: "En fazla 200 karakter olabilir",
          },
        },
      },
      {
        name: "Stock",
        type: FormItemTypeEnum.NUMBER,
        label: "Stok Miktarı",
        visibility: FormItemVisibilityEnum.Both,
      },
    ],
  },
];

Açıklama

• multiLine: Metin girişini çok satırlı yapar.
• rows: Çok satırlı metin için satır sayısını belirler.
• registerOptions: Validasyon kurallarını içerir.
  • required: Alanın zorunlu olup olmadığını belirtir.
  • maxLength: Maksimum karakter uzunluğunu sınırlar.

---

Özel Bileşenleri ve Alt Grupları Kullanma

Schema, özel bileşenler (renderComponent) ve birden fazla alt grup (multiSchema) içerebilir.

Örnek: Özel Bileşen

const schema: IOpsGridFormItem[] = [
  {
    name: "Custom Info",
    renderComponent: (apiData) => (
      <OpsGridInfo
        title="Ek Bilgiler"
        infoList={[
          { title: "Favori Sayısı", value: "10" },
          { title: "Sipariş Sayısı", value: "5" },
        ]}
      />
    ),
  },
];

Örnek: Alt Gruplar

const schema: IOpsGridFormItem[] = [
  {
    name: "Price Details",
    multiSchema: [
      {
        schema: [
          {
            name: "Base Price",
            type: FormItemTypeEnum.NUMBER,
            label: "Matrah",
            visibility: FormItemVisibilityEnum.Both,
          },
          {
            name: "Tax",
            type: FormItemTypeEnum.NUMBER,
            label: "Vergi",
            visibility: FormItemVisibilityEnum.Both,
          },
        ],
      },
      {
        schema: [
          {
            name: "Total Price",
            type: FormItemTypeEnum.NUMBER,
            label: "Toplam Fiyat",
            visibility: FormItemVisibilityEnum.Both,
          },
        ],
      },
    ],
  },
];

Açıklama

• renderComponent: API verilerini kullanarak özel bileşen oluşturur.
• multiSchema: Alt gruplar tanımlamak için kullanılır. Her alt grup, kendi schema yapısını içerir.

---

İpuçları ve En İyi Uygulamalar

• Modülerlik: Schema öğelerini gruplandırarak modüler ve okunabilir hale getirin.
• Validasyon Kullanımı: Kullanıcı hatalarını azaltmak için registerOptions ile validasyon kuralları tanımlayın.
• Esneklik: renderComponent ile dinamik içerikler oluşturabilirsiniz.

---

Bu doküman, basit ve detaylı schema oluşturma sürecini anlamanıza yardımcı olmayı hedefler. Daha fazla bilgi için diğer dokümanlara göz atabilirsiniz.