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

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

package/src/molecules/ConfirmationModal.README.md

@@ -0,0 +1,370 @@
+# ConfirmationModal
+
+ConfirmationModal, kritik işlemlerden önce kullanıcı onayı almak için kullanılan modal bileşenidir. Silme, kaydetme veya önemli değişiklikler için idealdir.
+
+## Özellikler
+
+- ✅ **Onay Dialog'u**: Kritik işlemler için onay
+- 🎨 **Variant'lar**: Default, Danger, Warning, Info
+- 🎭 **İkon Desteği**: Görsel ikon gösterimi
+- ⬛ **Backdrop**: Opsiyonel backdrop
+- 🎯 **Customizable**: Buton metinleri ve stil
+- ♿ **Erişilebilir**: Tam erişilebilirlik desteği
+
+## Kurulum
+
+```tsx
+import { ConfirmationModal } from 'react-native-design-system';
+```
+
+## Temel Kullanım
+
+```tsx
+import React, { useState } from 'react';
+import { View, Button } from 'react-native';
+import { ConfirmationModal } from 'react-native-design-system';
+
+export const BasicExample = () => {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center' }}>
+      <Button title="Modalı Aç" onPress={() => setVisible(true)} />
+
+      <ConfirmationModal
+        visible={visible}
+        title="Emin misiniz?"
+        message="Bu işlem geri alınamaz"
+        confirmText="Onayla"
+        cancelText="İptal"
+        onConfirm={() => {
+          console.log('Onaylandı');
+          setVisible(false);
+        }}
+        onCancel={() => setVisible(false)}
+      />
+    </View>
+  );
+};
+```
+
+## Variant'lar
+
+```tsx
+{/* Default (Info) */}
+<ConfirmationModal
+  visible={visible}
+  variant="default"
+  title="Bilgilendirme"
+  message="Devam etmek istiyor musunuz?"
+  onConfirm={handleConfirm}
+  onCancel={handleCancel}
+/>
+
+{/* Danger */}
+<ConfirmationModal
+  visible={visible}
+  variant="danger"
+  title="Öğeyi Sil"
+  message="Bu öğeyi silmek istediğinizden emin misiniz?"
+  confirmText="Sil"
+  cancelText="İptal"
+  onConfirm={handleDelete}
+  onCancel={handleCancel}
+/>
+
+{/* Warning */}
+<ConfirmationModal
+  visible={visible}
+  variant="warning"
+  title="Uyarı"
+  message="Bu işlem veri kaybına neden olabilir"
+  confirmText="Devam Et"
+  cancelText="Geri Dön"
+  onConfirm={handleProceed}
+  onCancel={handleCancel}
+/>
+```
+
+## İkonlu
+
+```tsx
+<ConfirmationModal
+  visible={visible}
+  variant="danger"
+  icon="warning"
+  title="Dikkat"
+  message="Bu işlem geri alınamaz"
+  onConfirm={handleConfirm}
+  onCancel={handleCancel}
+/>
+```
+
+## Backdrop Gizle
+
+```tsx
+<ConfirmationModal
+  visible={visible}
+  showBackdrop={false}
+  title="Modal"
+  message="Backdrop yok"
+  onConfirm={handleConfirm}
+  onCancel={handleCancel}
+/>
+```
+
+## Backdrop Dismissible Değil
+
+```tsx
+<ConfirmationModal
+  visible={visible}
+  backdropDismissible={false}
+  title="Onay Gerekli"
+  message="Lütfen onaylayın"
+  onConfirm={handleConfirm}
+  onCancel={handleCancel}
+/>
+```
+
+## Örnek Kullanımlar
+
+### Silme Onayı
+
+```tsx
+export const DeleteConfirmation = ({ item, onDelete }) => {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button title="Sil" onPress={() => setVisible(true)} />
+
+      <ConfirmationModal
+        visible={visible}
+        variant="danger"
+        icon="trash-outline"
+        title="Öğeyi Sil"
+        message={`${item.title} öğesini silmek istediğinizden emin misiniz? Bu işlem geri alınamaz.`}
+        confirmText="Sil"
+        cancelText="İptal"
+        onConfirm={() => {
+          onDelete(item.id);
+          setVisible(false);
+        }}
+        onCancel={() => setVisible(false)}
+      />
+    </>
+  );
+};
+```
+
+### Çıkış Onayı
+
+```tsx
+export const LogoutConfirmation = () => {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button title="Çıkış Yap" onPress={() => setVisible(true)} />
+
+      <ConfirmationModal
+        visible={visible}
+        variant="warning"
+        icon="log-out-outline"
+        title="Çıkış Yap"
+        message="Oturumunuzu sonlandırmak istediğinizden emin misiniz?"
+        confirmText="Çıkış"
+        cancelText="İptal"
+        onConfirm={() => {
+          logout();
+          setVisible(false);
+        }}
+        onCancel={() => setVisible(false)}
+      />
+    </>
+  );
+};
+```
+
+### Değişiklik Kaydetme
+
+```tsx
+export const UnsavedChangesModal = ({ onSave, onDiscard }) => {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <ConfirmationModal
+      visible={visible}
+      variant="warning"
+      icon="save-outline"
+      title="Kaydedilmemiş Değişiklikler"
+      message="Yaptığınız değişiklikleri kaydetmediniz. Ne yapmak istersiniz?"
+      confirmText="Kaydet"
+      cancelText="İptal"
+      onConfirm={() => {
+        onSave();
+        setVisible(false);
+      }}
+      onCancel={() => {
+        onDiscard();
+        setVisible(false);
+      }}
+    />
+  );
+};
+```
+
+### Formu Terk Etme
+
+```tsx
+export const LeaveFormModal = () => {
+  return (
+    <ConfirmationModal
+      visible={visible}
+      icon="warning"
+      title="Formu Terk Et"
+      message="Girdiğiniz bilgiler kaybolacak. Emin misiniz?"
+      confirmText="Terk Et"
+      cancelText="Formda Kal"
+      onConfirm={() => navigation.goBack()}
+      onCancel={() => setVisible(false)}
+    />
+  );
+};
+```
+
+### İptal Edilebilir İşlem
+
+```tsx
+export const CancelOperationModal = ({ operation }) => {
+  return (
+    <ConfirmationModal
+      visible={visible}
+      variant="warning"
+      icon="close-circle-outline"
+      title="İşlem İptal Edilsin"
+      message="Bu işlemi iptal etmek istediğinizden emin misiniz?"
+      confirmText="İptal Et"
+      cancelText="Devam Et"
+      onConfirm={() => {
+        cancelOperation();
+        setVisible(false);
+      }}
+      onCancel={() => setVisible(false)}
+    />
+  );
+};
+```
+
+### Abonelik İptali
+
+```tsx
+export const CancelSubscriptionModal = () => {
+  return (
+    <ConfirmationModal
+      visible={visible}
+      variant="danger"
+      icon="alert-circle-outline"
+      title="Aboneliği İptal Et"
+      message="Aboneliğinizi iptal ederseniz tüm özelliklere erişimi kaybedeceksiniz. Devam etmek istiyor musunuz?"
+      confirmText="İptal Et"
+      cancelText="Geri Dön"
+      onConfirm={handleCancelSubscription}
+      onCancel={() => setVisible(false)}
+    />
+  );
+};
+```
+
+### Kullanıcı Silme
+
+```tsx
+export const DeleteAccountModal = () => {
+  return (
+    <ConfirmationModal
+      visible={visible}
+      variant="danger"
+      icon="person-remove-outline"
+      title="Hesabı Sil"
+      message="Hesabınızı silmek istediğinizden emin misiniz? Tüm verileriniz kalıcı olarak silinecek ve bu işlem geri alınamaz."
+      confirmText="Hesabı Sil"
+      cancelText="Vazgeç"
+      onConfirm={handleDeleteAccount}
+      onCancel={() => setVisible(false)}
+    />
+  );
+};
+```
+
+## Props
+
+### ConfirmationModalProps
+
+| Prop | Tip | Varsayılan | Açıklama |
+|------|-----|------------|----------|
+| `visible` | `boolean` | - **(Zorunlu)** | Modal görünürlüğü |
+| `title` | `string` | - | Modal başlığı |
+| `message` | `string` | - | Modal mesajı |
+| `variant` | `'default' \| 'danger' \| 'warning' \| 'info'` | `'default'` | Modal variant'ı |
+| `confirmText` | `string` | `'Confirm'` | Onay butonu metni |
+| `cancelText` | `string` | `'Cancel'` | İptal butonu metni |
+| `icon` | `string` | - | İkon ismi |
+| `onConfirm` | `() => void` | - | Onay callback'i |
+| `onCancel` | `() => void` | - | İptal callback'i |
+| `showBackdrop` | `boolean` | `true` | Backdrop göster |
+| `backdropDismissible` | `boolean` | `true` | Backdrop tıklama ile kapat |
+| `style` | `ViewStyle` | - | Özel stil |
+| `testID` | `string` | - | Test ID'si |
+
+## Best Practices
+
+### 1. Variant Seçimi
+
+```tsx
+// Kritik/Silme işlemleri
+variant="danger"
+
+// Uyarılar
+variant="warning"
+
+// Bilgilendirme
+variant="default" veya "info"
+```
+
+### 2. Açık Mesaj
+
+```tsx
+// İyi
+message="Bu öğeyi silmek istediğinizden emin misiniz? Bu işlem geri alınamaz."
+
+// Kötü
+message="Emin misiniz?"
+```
+
+### 3. Buton Metinleri
+
+```tsx
+// Açık ve eylem odaklı
+confirmText="Öğeyi Sil"
+cancelText="İptal"
+```
+
+## Erişilebilirlik
+
+ConfirmationModal, tam erişilebilirlik desteği sunar:
+
+- ✅ Screen reader desteği
+- ✅ Focus trap
+- ✅ Keyboard navigation
+- ✅ Semantic role
+- ✅ Escape key desteği
+
+## İlgili Bileşenler
+
+- [`BaseModal`](../BaseModal/README.md) - Base modal
+- [`AlertModal`](./alerts/README.md) - Alert modal
+- [`AtomicButton`](../../atoms/button/README.md) - Buton bileşeni
+
+## Lisans
+
+MIT