Bileşen kontrol listesi

Bir bileşen ya da bileşen değişikliği, aşağıdaki maddelerin hepsi aynı değişiklikte geldiğinde tamamdır. Yarım bir bileşen ana dala girmez: süre yetmezse kalan maddeler listelenir ve bileşen bir sonraki değişikliğe kalır.

Kod

• Bileşen packages/ui/src/components/<bileşen-adı>/<BileşenAdı>.tsx dosyasındadır; hikâyeleri yanında <BileşenAdı>.stories.tsx dosyasındadır.
• Görünüm yalnızca Base UI ilkelleri üzerine tailwind-variants (tv()) ile kurulur. Radix ve cva kullanılmaz (D-05, D-06).
• Ham renk, boşluk, süre ya da eğri değeri yoktur; her değer bir token’dan gelir. Bileşene özel bir değer gerekiyorsa yalnızca anlam token’larına bağlanan bir bileşen token’ı eklenir.
• Kök öğe data-component, iç parçalar data-part taşır.
• Kütüphanenin kendi metinleri (yükleniyor, kapat, zorunlu gibi) packages/ui/src/strings.ts içindeki ui.* kataloğundan gelir, Türkçe ve İngilizce; Provider locale ile değişir ve bir özellikle ezilebilir.
• Bileşen packages/ui/src/index.ts dosyasından özellik türüyle birlikte dışa aktarılır.
• Her özelliğin TSDoc açıklaması vardır; varsayılanı @default ile yazılır.

Hareket ve etkileşim

• Fareyle üzerine gelme, basma, odak, devre dışı ve varsa yükleniyor, başarı, açılma ve kapanma durumları tasarlanmıştır. Düz, tepkisiz bir kontrol tamam sayılmaz (D-10).
• Hareket packages/ui/src/motion önayarlarından gelir (motion.press, motion.popover gibi); bileşen kendi transition, duration-* ya da ease-* sınıfını yazmaz.
• Yalnızca opacity, transform ve renk canlandırılır (MOT-02).
• Azaltılmış harekette hareket kaldırılmaz, yerine kısa bir saydamlık geçişi gelir; başarı işaretleri durağan kalır (MOT-03). Provider reducedMotion="reduce" da aynı sonucu verir.

Testler

• Testler koddan önce ya da kodla birlikte yazılır ve pnpm --filter @bigbang/ui test ile geçer.
• Testler rolü ve erişilebilir adı, klavye etkileşimini, durumları (devre dışı, geçersiz, yükleniyor), data-component ve data-part özniteliklerini ve kütüphane metinlerinin iki dilini denetler.
• Hareket önayarının uygulandığı ve azaltılmış harekette değiştiği test edilir.
• Hiçbir test zayıflatılmaz, atlanmaz ya da silinmez.

Storybook

• Playground hikâyesi bütün özellikleri denetimlerle açar.
• Her varyant, boyut ve durum için bir hikâye vardır.
• Hikâyeler araç çubuğundaki marka, açık ve koyu mod ve Türkçe ve İngilizce seçimiyle doğru görünür. Demo metinleri .storybook/messages.ts dosyasından gelir ve nötrdür (“Birincil buton”, “Kart başlığı”).
• Erişilebilirlik eklentisi (axe) hikâyelerde ihlal göstermez.

Doküman

• Altı sekme Türkçe ve İngilizce yazılır: Örnekler, Kullanım, Teknik özellikler, Erişilebilirlik, Kod, Değişiklikler. Zorunlu ara başlıklar scripts/check-docs.mjs tarafından denetlenir.
• Örnekler sekmesi kahraman örneği StoryEmbed ile canlı gösterir; diğer örnekler src/examples/<bileşen>/{tr,en}/ altında statik çizilir.
• Bileşen src/data/components.ts içinde durum, sürüm ve kahraman hikâyesiyle, src/data/categories.ts içinde kategorisiyle kayıtlıdır ve kenar çubuğuna eklenir.
• pnpm props ile props.json yeniden üretilir; özelliklerin Türkçe açıklamaları src/data/props.ts dosyasına yazılır.
• Demo metinleri nötrdür; müşteriye ya da gerçek bir işleme ait veri kullanılmaz.

Sürüm

• Bir değişiklik kaydı (pnpm changeset) eklenir; uyumu bozan değişiklikte geçiş notu yazılır. Bkz. Sürümleme.
• Bileşenin Değişiklikler sekmesi güncellenir.

Kontroller

Değişiklik gönderilmeden önce şu komutlar temiz çıkar:

pnpm install --frozen-lockfile
pnpm check        # token'lar, lint, tip denetimi (astro check dahil), testler
pnpm docs:build   # Storybook derlemesi, doküman denetimi, site derlemesi