🛠 Vidjet muharriri

Muharrir ikkiga bo‘lingan: chapda kod, o‘ngda jonli ko‘rinish. Yuqorida esa vidjet nomi, Eksport qilish va Saqlash tugmalari turadi.

🗂 Uch yorliq

• Code — vidjet ko‘rinishi va uning ma’lumot kontrakti.
• Functions — foydalanuvchi harakatlariga javob beruvchi funksiyalar.
• States — shartli ko‘rinish qoidalari.

💻 Code yorlig‘i

Kod maydonining o‘ng yuqori burchagida ikki ko‘rinish o‘rtasida almashtirgich bor:

• JSX — asosiy yozish usuli. Komponentlar va ularning xossalari avtomatik to‘ldiriladi, xato yozilgan xossa tagiga chiziladi.
• JSON tree — saqlanadigan shakl. JSX shu daraxtdan qayta chop etiladi, shuning uchun ikki ko‘rinish hech qachon bir-biridan uzoqlashmaydi.

JSX oxirgi tugmachadan ~300 ms keyin tahlil qilinadi. Xato bo‘lsa pastki qatorda Line 7: … ko‘rinishida chiqadi va ko‘rinish oxirgi to‘g‘ri holatida qoladi.

📐 Pastki panel: Schema va ma’lumot

Kod maydonining tagida ma’lumot paneli turadi: Schema · Default · Example 1 · +.

• Schema — vidjet kutayotgan ma’lumot tuzilmasi (JSON Schema). O‘ng tarafdagi almashtirgich uni Zod va d.ts ko‘rinishida ham ko‘rsatadi (faqat o‘qish uchun).
• Default — muharrirdagi ko‘rinish uchun namuna ma’lumot.
• + — joriy ma’lumotni nomlangan misol sifatida saqlaydi; misol yorlig‘idagi ✕ uni o‘chiradi.
• Infer from data — ma’lumotdan sxema tuzadi. Fill from schema — sxemadan bo‘sh ma’lumot yasaydi.

Ma’lumot sxemaga mos kelmasa (majburiy maydon yo‘q, tur noto‘g‘ri), pastki qatorda ogohlantirish chiqadi.

✨ Avtomatik to‘ldirish

Kodda {{ yozganingizda sxemadagi barcha yo‘llar turlari bilan taklif qilinadi: orders object[], orders.length, orders[0].status. JSX ichida esa bu oddiy ifoda: value={order.total}.

👀 Ko‘rinish sahnasi

O‘ng tarafdagi sahna vidjetni mehmon ko‘radigan holatda ko‘rsatadi. Pastdagi almashtirgich uch rejimni beradi:

• Vidjet — faqat vidjetning o‘zi.
• Chat oynasi — 380px kenglikdagi chat oynasi: sarlavha, ikkita xabar, vidjet va yozish maydoni.
• Agent sahifasi — keng oynadagi o‘sha suhbat.

O‘ng yuqoridagi quyosh/oy tugmasi faqat sahnani qorong‘i rejimga o‘tkazadi — vidjetni ikkala mavzuda ham tekshirish uchun.

💾 Saqlash, eksport, import

• Saqlash — yangi vidjetni yaratadi yoki mavjudini yangilaydi. Panellardan birida noto‘g‘ri JSON bo‘lsa, tugma o‘chiq turadi.
• Eksport qilish — .widget fayl yuklab beradi.
• Vidjetlar sahifasidagi Import qilish faylni yangi vidjet sifatida ochadi.

🌐 Til haqida

Muharrirning Code, Schema, Default kabi yorliqlari ataylab inglizcha qoldirilgan — ular dasturchi atamalari va vidjet kodida ham shunday yoziladi.