# 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:
```typescript
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:
```typescript
    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.
```typescript
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.