AGENTS.md 5.3 KB

NCore UI Kit & Global Coding Style Guidelines

Bu doküman, projedeki kodlama alışkanlıkları ve mimari standartların tam bir dökümüdür. Sistem tarafından otomatik analiz edilerek çıkartılmıştır.


1. Mimari ve Klasörleme (Index Pattern & Directory Structure)

  • Klasörleme: Havada uçuşan bağımsız bileşen dosyaları (Örn: Header.tsx, Home.tsx) kullanılmaz. Her yeni özellik, sayfa veya bileşen kendi ismini taşıyan bir klasör içine açılır.
  • Index Pattern: İlgili modülün asıl kod dosyası istisnasız index.tsx (veya index.ts) ismini alır.
  • Stil İzolasyonu (Style Isolation): Bir modüle/sayfaya ait stiller ASLA ana dosyaya veya global bir dosyaya yazılmaz. Doğrudan o modülün klasöründe stylesheet.ts isminde bir dosya açılır ve orada barındırılır.
  • Sayfa İçi Alt Mimariler (Views Architecture): Büyük sayfalar (örneğin Home) alt bölümlere ayrılırken doğrudan aynı dizinde tutulmaz. Bunun yerine ilgili sayfanın içine bir views klasörü açılır (örn. src/pages/home/views) ve içindeki her alt parça (hero, about vs.) yine kendi klasörüne ve kendi index.tsx dosyasına sahip olur.

2. Tip (Type) ve TypeScript Standartları

  • Tekil İsimlendirme: Bir modüle ait TypeScript tür dosyaları oluşturulurken çoğul (types.ts) yerine her zaman tekil olarak type.ts kullanılır.
  • Type Export Syntax (as default): Tipleri dışarı varsayılan (default) olarak aktarırken export default TypeName; KULLANILMAZ. Bunun yerine "multiline" kuralına sadık kalınarak süslü parantezler içinde aktarılır:

    export type {
    TypeName as default
    };
    

3. Girintiler ve ESLint Multiline (Çok Satırlılık) Kuralları

  • Genel Boşluk (Indentation): Her yerde istisnasız 4 boşluk (space) kullanılır. Tab tuşu kullanılmaz.
  • Dosya Sonu ve Semicolon: Dosyaların sonunda her zaman boş bir satır bırakılır (eol-last). Satır sonlarında noktalı virgül (;) zorunludur (semi: always).
  • Imports & Exports: İçe ve dışa aktarmalarda süslü parantez { açıldıktan sonra her bir eleman kesinlikle alt alta yeni satırlara yazılır.
  • Object Properties & Destructuring: Obje tanımlarında ve özellikleri ayrıştırırken (destructuring) her özellik ayrı bir satırda yer almalıdır.
  • Array & Hook Destructuring: Array elemanları da alt alta dizilir. Bu kural React Hook'ları için de SIKI BİR ŞEKİLDE geçerlidir:

    const [
        status,
        setStatus
    ] = useState(false);
    
  • JSX Attributes: Bileşenlere geçirilen property'ler (props) asla tek satıra sıkıştırılmaz, her biri ayrı bir satıra yazılır ve kapanış simgesi (>) hizalı şekilde yeni satıra atılır.

  • Render Props / Callback Parametreleri: Fonksiyonel proplarda (icon={({ color, size }) => ...}) parametreler destructure ediliyorsa onlar da mutlaka alt alta (yeni satırda) yazılır.

4. İmza Kuralı: "Uzundan Kısaya" (Longest to Shortest) Sıralaması

  • Kod içinde yazılan içe aktarmalar (imports), obje özellikleri, değişken tanımlamaları, argümanlar ve props'lar sıralanırken aksi bir iş mantığı gerekmedikçe her zaman karakter uzunluğu en uzun olandan en kısa olana (descending length order) doğru sıralanır.

5. Akış Kontrolü ve Fonksiyonellik (Fail Fast)

  • Fail Fast (Hızlı Dönüş): Bir fonksiyondan olabildiğince erken çıkış yapmak (early return) esastır. Gereksiz yere else blokları uzatılmaz, iç içe (nested) if döngülerinden kaçınılır.
  • if Kullanımı: if ifadesi ile açılış parantezi ( arasında asla boşluk bırakılmaz (if(kosul)).
  • Süslü parantez { hemen aynı satırın sonunda, kendisinden önce sadece bir adet boşluk bırakılarak açılır.

    if(!condition) {
    return;
    }
    
  • Export Default Bitişikliği: Dosya sonlarındaki export default ifadesinden önce boş bir satır (enter) KESİNLİKLE bırakılmaz. Hemen önceki fonksiyonun veya bloğun kapanışına (}) bitişik olarak yazılır.

6. Fonksiyonel Bileşenler ve Local Helpers

  • Arrow Functions: React bileşenleri arrow function ile (const Home = () => { ... }) oluşturulur.
  • Render Fonksiyonlarına Parçalama: İç içe çok uzun JSX ağaçları yazmak yerine; bileşen içerisinde const renderHero = () => { return <Hero/>; }; gibi küçük okuma fonksiyonları yazılıp ana return içinde çağrılır.
  • Local Helper Modülleri: Sadece o dosya içinde kullanılacak küçük yardımcı bileşenlere en üstte Custom... ön eki verilir (Örn: CustomHomeIcon, CustomFooter) ve böylece ana yapı çok daha sadeleştirilir.

7. NCore UI Kit Zorunlulukları

  • Tasarımsal ölçüler ve renkler elle (hardcode) YAZILMAZ.
  • Her zaman NCoreUIKitTheme.useContext() kullanılarak spaces, colors, radiuses ve configs (örn: configs.headerSpace) objeleri çağrılır ve değerler buradan alınır.
  • Metinler (string) UI kısmına asla ham haliyle yazılmaz. NCoreUIKitLocalize.useContext() çağrılarak elde edilen localize("key") fonksiyonu ile kullanılır.
  • CSS-in-JS yazılırken, sadece Web ortamına özel (cross-platform olmayan) stiller uygulanacağı zaman mutlaka kütüphanenin sağladığı webStyle fonksiyonu kullanılır.