@umituz/react-native-design-system 2.6.87 → 2.6.88

package/src/atoms/EmptyState.README.md

@@ -0,0 +1,372 @@
+# EmptyState
+
+EmptyState, veri bulunmadığında gösterilen bir bileşendir. Kullanıcıya durumu açıklar ve aksiyon alması için rehberlik eder.
+
+## Özellikler
+
+- 🎭 **İkon veya Illustration**: Görsel destek
+- 📝 **Title & Description**: Açıklama metinleri
+- 👆 **Action Button**: Aksiyon butonu desteği
+- 🎨 **Tema Bilinci**: Otomatik tema uyumu
+- ♿ **Erişilebilir**: Tam erişilebilirlik desteği
+
+## Kurulum
+
+```tsx
+import { EmptyState } from 'react-native-design-system';
+```
+
+## Temel Kullanım
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import { EmptyState } from 'react-native-design-system';
+
+export const BasicExample = () => {
+  return (
+    <View style={{ flex: 1 }}>
+      <EmptyState
+        title="Henüz öğe yok"
+        description="İlk öğeyi oluşturmak için başlayın"
+      />
+    </View>
+  );
+};
+```
+
+## Basic Empty State
+
+```tsx
+<EmptyState
+  title="Veri Bulunamadı"
+/>
+```
+
+## Description ile
+
+```tsx
+<EmptyState
+  title="Henüz mesaj yok"
+  description="İlk mesajı gönderin ve sohbeti başlatın"
+/>
+```
+
+## Custom İkon
+
+```tsx
+<EmptyState
+  icon="mail-outline"
+  title="Mesaj Yok"
+  description="Henüz mesajınız bulunmuyor"
+/>
+```
+
+## Action Button ile
+
+```tsx
+<EmptyState
+  icon="document-text-outline"
+  title="Henüz içerik yok"
+  description="İlk içeriği oluşturmak için butona tıklayın"
+  actionLabel="İçerik Oluştur"
+  onAction={() => console.log('İçerik oluştur')}
+/>
+```
+
+## Custom Illustration
+
+```tsx
+<EmptyState
+  title="Özelleştirilmiş İllüstrasyon"
+  illustration={
+    <Image
+      source={require('./empty-state.png')}
+      style={{ width: 200, height: 200 }}
+    />
+  }
+  description="Açıklama metni"
+/>
+```
+
+## Örnek Kullanımlar
+
+### Boş Liste
+
+```tsx
+export const EmptyList = () => {
+  return (
+    <EmptyState
+      icon="list-outline"
+      title="Henüz liste boş"
+      description="Listeye öğe eklemek için butona tıklayın"
+      actionLabel="Öğe Ekle"
+      onAction={() => console.log('Ekle')}
+    />
+  );
+};
+```
+
+### Boş Arama
+
+```tsx
+export const EmptySearch = ({ query }) => {
+  return (
+    <EmptyState
+      icon="search-outline"
+      title="Sonuç Bulunamadı"
+      description={`"${query}" için sonuç bulunamadı`}
+      actionLabel="Aramayı Temizle"
+      onAction={() => setQuery('')}
+    />
+  );
+};
+```
+
+### Boş Bildirimler
+
+```tsx
+export const EmptyNotifications = () => {
+  return (
+    <EmptyState
+      icon="notifications-off-outline"
+      title="Bildirim Yok"
+      description="Henüz bildiriminiz bulunmuyor"
+    />
+  );
+};
+```
+
+### Boş Favoriler
+
+```tsx
+export const EmptyFavorites = () => {
+  return (
+    <EmptyState
+      icon="heart-outline"
+      title="Favori Yok"
+      description="Beğendiğiniz öğeleri favorilere ekleyin"
+      actionLabel="Keşfet"
+      onAction={() => navigation.navigate('Explore')}
+    />
+  );
+};
+```
+
+### Boş Sepet
+
+```tsx
+export const EmptyCart = () => {
+  return (
+    <EmptyState
+      icon="cart-outline"
+      title="Sepetiniz Boş"
+      description="Sepetinize ürün ekleyin ve alışverişe başlayın"
+      actionLabel="Alışverişe Başla"
+      onAction={() => navigation.navigate('Products')}
+    />
+  );
+};
+```
+
+### Boş İndirmeler
+
+```tsx
+export const EmptyDownloads = () => {
+  return (
+    <EmptyState
+      icon="download-outline"
+      title="İndirme Yok"
+      description="İndirilen içeriğiniz burada görünecek"
+    />
+  );
+};
+```
+
+### Boş Arama Geçmişi
+
+```tsx
+export const EmptySearchHistory = () => {
+  return (
+    <EmptyState
+      icon="time-outline"
+      title="Arama Geçmişi Yok"
+      description="Yaptığınız aramalar burada görünecek"
+    />
+  );
+};
+```
+
+### Bağlantı Hatası
+
+```tsx
+export const ConnectionError = () => {
+  return (
+    <EmptyState
+      icon="wifi-outline"
+      title="İnternet Bağlantısı Yok"
+      description="Lütfen internet bağlantınızı kontrol edin"
+      actionLabel="Tekrar Dene"
+      onAction={() => refetch()}
+    />
+  );
+};
+```
+
+### Hata Durumu
+
+```tsx
+export const ErrorState = ({ error, onRetry }) => {
+  return (
+    <EmptyState
+      icon="alert-circle-outline"
+      title="Bir Hata Oluştu"
+      description={error?.message || 'Beklenmeyen bir hata oluştu'}
+      actionLabel="Tekrar Dene"
+      onAction={onRetry}
+    />
+  );
+};
+```
+
+### İzin Gerekli
+
+```tsx
+export const PermissionRequired = () => {
+  return (
+    <EmptyState
+      icon="lock-closed-outline"
+      title="Kamera İzni Gerekli"
+      description="Fotoğraf çekmek için kamera izni vermeniz gerekiyor"
+      actionLabel="İzin Ver"
+      onAction={() => requestPermission()}
+    />
+  );
+};
+```
+
+### Giriş Gerekli
+
+```tsx
+export const LoginRequired = () => {
+  return (
+    <EmptyState
+      icon="person-outline"
+      title="Giriş Yapmalısınız"
+      description="Bu özelliği kullanmak için giriş yapmalısınız"
+      actionLabel="Giriş Yap"
+      onAction={() => navigation.navigate('Login')}
+    />
+  );
+};
+```
+
+### Özellik Yakında
+
+```tsx
+export const ComingSoon = () => {
+  return (
+    <EmptyState
+      icon="rocket-outline"
+      title="Yakında Burada"
+      description="Bu özellik yakında kullanıma sunulacak"
+    />
+  );
+};
+```
+
+### Bakım Modu
+
+```tsx
+export const MaintenanceMode = () => {
+  return (
+    <EmptyState
+      icon="construct-outline"
+      title="Bakım Modu"
+      description="Sistem bakımında, lütfen daha sonra tekrar deneyin"
+    />
+  );
+};
+```
+
+## Props
+
+### EmptyStateProps
+
+| Prop | Tip | Varsayılan | Açıklama |
+|------|-----|------------|----------|
+| `icon` | `string` | `'file-tray-outline'` | İkon ismi |
+| `title` | `string` | - **(Zorunlu)** | Başlık metni |
+| `subtitle` | `string` | - | Alt başlık (deprecated, description kullanın) |
+| `description` | `string` | - | Açıklama metni |
+| `actionLabel` | `string` | - | Aksiyon butonu metni |
+| `onAction` | `() => void` | - | Aksiyon callback'i |
+| `illustration` | `ReactNode` | - | Custom illüstrasyon |
+| `style` | `ViewStyle` | - | Özel stil |
+| `testID` | `string` | - | Test ID'si |
+
+## Best Practices
+
+### 1. İkon Seçimi
+
+```tsx
+// Genel boş durum
+<EmptyState icon="document-outline" />
+
+// Arama boş
+<EmptyState icon="search-outline" />
+
+// Hata durumu
+<EmptyState icon="alert-circle-outline" />
+
+// Başarı durumu
+<EmptyState icon="checkmark-circle-outline" />
+```
+
+### 2. Açıklama Metni
+
+```tsx
+// Kısa ve açıklayıcı
+<EmptyState
+  title="Boş Başlık"
+  description="Ne yapmanız gerektiğini açıklayın"
+/>
+```
+
+### 3. Action Button
+
+```tsx
+// Aksiyon varsa
+<EmptyState
+  actionLabel="Şimdi Ekle"
+  onAction={handleAction}
+/>
+
+// Sadece bilgilendirme
+<EmptyState title="Bilgilendirme" />
+```
+
+## Erişilebilirlik
+
+EmptyState, tam erişilebilirlik desteği sunar:
+
+- ✅ Screen reader desteği
+- ✅ Semantic anlamlar
+- ✅ Touch uygun boyut
+- ✅ Action button erişilebilirliği
+
+## Performans İpuçları
+
+1. **Lazy Load**: Illustration'ları lazy load edin
+2. **Memoization**: Component'i memo edin
+3. **Simple Icons**: Karmaşık illüstrasyonlar yerine basit ikonlar kullanın
+
+## İlgili Bileşenler
+
+- [`AtomicSkeleton`](./skeleton/AtomicSkeleton/README.md) - Skeleton loading
+- [`AtomicSpinner`](./AtomicSpinner/README.md) - Yükleme göstergesi
+- [`AtomicIcon`](./AtomicIcon/README.md) - İkon bileşeni
+
+## Lisans
+
+MIT

package/src/atoms/skeleton/AtomicSkeleton.README.md

@@ -0,0 +1,339 @@
+# AtomicSkeleton
+
+AtomicSkeleton, içerik yüklenirken gösterilen placeholder bileşenidir. Farklı pattern'ler ile liste, kart veya custom skeleton yüklemeleri sağlar.
+
+## Özellikler
+
+- 📋 **Pattern'ler**: List, Card, Avatar, Text, Custom
+- 🔢 **Çoklu Render**: Count parametresi ile tekrar
+- 🎨 **Tema Bilinci**: Otomatik renk uyumu
+- ⚙️ **Özelleştirilebilir**: Custom skeleton yapılandırması
+- ♿ **Erişilebilir**: Screen reader için gizli
+
+## Kurulum
+
+```tsx
+import { AtomicSkeleton } from 'react-native-design-system';
+```
+
+## Temel Kullanım
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import { AtomicSkeleton } from 'react-native-design-system';
+
+export const BasicExample = () => {
+  return (
+    <View style={{ padding: 16 }}>
+      <AtomicSkeleton pattern="list" count={3} />
+    </View>
+  );
+};
+```
+
+## List Pattern
+
+```tsx
+{/* 3 liste öğesi */}
+<AtomicSkeleton pattern="list" count={3} />
+
+{/* 5 liste öğesi */}
+<AtomicSkeleton pattern="list" count={5} />
+```
+
+## Card Pattern
+
+```tsx
+{/* 1 kart */}
+<AtomicSkeleton pattern="card" />
+
+{/* 3 kart */}
+<AtomicSkeleton pattern="card" count={3} />
+```
+
+## Avatar Pattern
+
+```tsx
+<AtomicSkeleton pattern="avatar" count={5} />
+```
+
+## Text Pattern
+
+```tsx
+<AtomicSkeleton pattern="text" count={3} />
+```
+
+## Custom Pattern
+
+```tsx
+<AtomicSkeleton
+  pattern="custom"
+  custom={[
+    { width: '100%', height: 200, borderRadius: 12 },
+    { width: '80%', height: 20, borderRadius: 4, marginBottom: 12 },
+    { width: '60%', height: 20, borderRadius: 4 },
+  ]}
+/>
+```
+
+## Örnek Kullanımlar
+
+### Liste Yükleniyor
+
+```tsx
+export const ListSkeleton = () => {
+  return (
+    <View style={{ padding: 16 }}>
+      <AtomicSkeleton pattern="list" count={5} />
+    </View>
+  );
+};
+```
+
+### Kart Yükleniyor
+
+```tsx
+export const CardSkeleton = () => {
+  return (
+    <View style={{ padding: 16 }}>
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 16 }}>
+        <AtomicSkeleton pattern="card" count={6} />
+      </View>
+    </View>
+  );
+};
+```
+
+### Profil Yükleniyor
+
+```tsx
+export const ProfileSkeleton = () => {
+  return (
+    <View style={{ padding: 16, alignItems: 'center' }}>
+      <AtomicSkeleton
+        pattern="custom"
+        custom={[
+          { width: 120, height: 120, borderRadius: 60, marginBottom: 16 },
+          { width: 200, height: 24, borderRadius: 4, marginBottom: 8 },
+          { width: 150, height: 16, borderRadius: 4 },
+        ]}
+      />
+    </View>
+  );
+};
+```
+
+### Detay Yükleniyor
+
+```tsx
+export const DetailSkeleton = () => {
+  return (
+    <View style={{ padding: 16 }}>
+      <AtomicSkeleton
+        pattern="custom"
+        custom={[
+          { width: '100%', height: 200, borderRadius: 12, marginBottom: 16 },
+          { width: '60%', height: 28, borderRadius: 4, marginBottom: 12 },
+          { width: '100%', height: 16, borderRadius: 4, marginBottom: 8 },
+          { width: '100%', height: 16, borderRadius: 4, marginBottom: 8 },
+          { width: '80%', height: 16, borderRadius: 4, marginBottom: 24 },
+          { width: 120, height: 40, borderRadius: 8 },
+        ]}
+      />
+    </View>
+  );
+};
+```
+
+### Feed Yükleniyor
+
+```tsx
+export const FeedSkeleton = () => {
+  return (
+    <View style={{ padding: 16 }}>
+      {Array.from({ length: 3 }).map((_, index) => (
+        <View key={index} style={{ marginBottom: 24 }}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 12 }}>
+            <View style={{ width: 40, height: 40, borderRadius: 20, backgroundColor: '#e0e0e0', marginRight: 12 }} />
+            <View>
+              <View style={{ width: 120, height: 16, borderRadius: 4, marginBottom: 4, backgroundColor: '#e0e0e0' }} />
+              <View style={{ width: 80, height: 12, borderRadius: 4, backgroundColor: '#f0f0f0' }} />
+            </View>
+          </View>
+          <View style={{ width: '100%', height: 200, borderRadius: 12, marginBottom: 12, backgroundColor: '#e0e0e0' }} />
+          <View style={{ width: '100%', height: 16, borderRadius: 4, marginBottom: 8, backgroundColor: '#e0e0e0' }} />
+          <View style={{ width: '80%', height: 16, borderRadius: 4, backgroundColor: '#f0f0f0' }} />
+        </View>
+      ))}
+    </View>
+  );
+};
+```
+
+### Tablo Yükleniyor
+
+```tsx
+export const TableSkeleton = ({ rows = 5 }) => {
+  return (
+    <View style={{ padding: 16 }}>
+      {/* Başlık */}
+      <View style={{ flexDirection: 'row', marginBottom: 12 }}>
+        {[1, 2, 3, 4].map((_, index) => (
+          <View key={index} style={{ flex: 1, marginRight: 8 }}>
+            <View style={{ width: '100%', height: 20, borderRadius: 4, backgroundColor: '#e0e0e0' }} />
+          </View>
+        ))}
+      </View>
+
+      {/* Satırlar */}
+      {Array.from({ length: rows }).map((_, rowIndex) => (
+        <View key={rowIndex} style={{ flexDirection: 'row', marginBottom: 8 }}>
+          {[1, 2, 3, 4].map((_, colIndex) => (
+            <View key={colIndex} style={{ flex: 1, marginRight: 8 }}>
+              <View style={{ width: '100%', height: 16, borderRadius: 4, backgroundColor: '#f0f0f0' }} />
+            </View>
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+};
+```
+
+### Arama Sonucu Yükleniyor
+
+```tsx
+export const SearchResultsSkeleton = () => {
+  return (
+    <View style={{ padding: 16 }}>
+      <AtomicSkeleton pattern="list" count={3} />
+
+      <View style={{ alignItems: 'center', marginTop: 24 }}>
+        <AtomicSkeleton
+          pattern="custom"
+          custom={[
+            { width: 80, height: 16, borderRadius: 4, marginBottom: 8 },
+            { width: 120, height: 12, borderRadius: 4 },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+```
+
+### Form Yükleniyor
+
+```tsx
+export const FormSkeleton = () => {
+  return (
+    <View style={{ padding: 16 }}>
+      {Array.from({ length: 4 }).map((_, index) => (
+        <View key={index} style={{ marginBottom: 24 }}>
+          <View style={{ width: 100, height: 16, borderRadius: 4, marginBottom: 8, backgroundColor: '#e0e0e0' }} />
+          <View style={{ width: '100%', height: 48, borderRadius: 8, backgroundColor: '#f0f0f0' }} />
+        </View>
+      ))}
+
+      <View style={{ width: 120, height: 48, borderRadius: 8, backgroundColor: '#e0e0e0' }} />
+    </View>
+  );
+};
+```
+
+## Props
+
+### AtomicSkeletonProps
+
+| Prop | Tip | Varsayılan | Açıklama |
+|------|-----|------------|----------|
+| `pattern` | `SkeletonPattern` | `'list'` | Skeleton pattern'i |
+| `custom` | `SkeletonConfig[]` | - | Custom yapılandırma |
+| `count` | `number` | `1` | Skeleton sayısı |
+| `style` | `StyleProp<ViewStyle>` | - | Özel stil |
+| `testID` | `string` | - | Test ID'si |
+
+### SkeletonPattern
+
+```typescript
+type SkeletonPattern =
+  | 'list'    // Liste öğesi
+  | 'card'    // Kart
+  | 'avatar'  // Avatar
+  | 'text'    // Metin
+  | 'custom'; // Özel
+```
+
+### SkeletonConfig
+
+```typescript
+interface SkeletonConfig {
+  width: number | string;    // Genişlik
+  height?: number;            // Yükseklik
+  borderRadius?: number;      // Köşe yarıçapı
+  marginBottom?: number;      // Alt boşluk
+}
+```
+
+## Best Practices
+
+### 1. Pattern Seçimi
+
+```tsx
+// Liste için
+<AtomicSkeleton pattern="list" />
+
+// Kart için
+<AtomicSkeleton pattern="card" />
+
+// Avatar için
+<AtomicSkeleton pattern="avatar" />
+```
+
+### 2. Count Kullanımı
+
+```tsx
+// Uzun liste
+<AtomicSkeleton pattern="list" count={10} />
+
+// Kısa liste
+<AtomicSkeleton pattern="list" count={3} />
+```
+
+### 3. Custom Skeleton
+
+```tsx
+// Özel tasarım
+<AtomicSkeleton
+  pattern="custom"
+  custom={[
+    { width: '100%', height: 200, borderRadius: 12 },
+    { width: '80%', height: 20, borderRadius: 4 },
+  ]}
+/>
+```
+
+## Erişilebilirlik
+
+AtomicSkeleton, tam erişilebilirlik desteği sunar:
+
+- ✅ Screen reader'da gizli
+- ✅ Loading state anonsu
+- ✅ Accessibility özellikleri
+
+## Performans İpuçları
+
+1. **Minimal Count**: Gerektiği kadar skeleton gösterin
+2. **Simple Patterns**: Basit pattern'ler daha performanslıdır
+3. **Unload**: Veri geldiğinde skeleton'ı kaldırın
+
+## İlgili Bileşenler
+
+- [`AtomicSpinner`](../AtomicSpinner/README.md) - Spinner yükleniyor
+- [`EmptyState`](../EmptyState/README.md) - Boş durum
+- [`AtomicProgress`](../AtomicProgress/README.md) - İlerleme çubuğu
+
+## Lisans
+
+MIT