|
|
@@ -0,0 +1,59 @@
|
|
|
+# 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.
|
