@umituz/react-native-design-system 2.6.94 → 2.6.96

package/src/molecules/BaseModal.README.md

@@ -1,23 +1,25 @@
 # BaseModal
 
-BaseModal, React Native için genel amaçlı bir modal bileşenidir. Responsive tasarım ile çalışır ve tüm modal türleri için tutarlı bir taban sağlar.
+BaseModal is a generic fullscreen modal component for React Native. Works with responsive design and provides a consistent base for all modal types.
 
-## Özellikler
+## Features
 
-- 📱 **Responsive**: Cihaz boyutuna göre uyum
-- 🎨 **Tema Bilinci**: Tam tema entegrasyonu
-- ⬛ **Backdrop**: Opak arka plan
-- ❌ **Dismiss**: Backdrop tıklama ile kapatma
-- ♿ **Erişilebilir**: Tam erişilebilirlik desteği
-- 🔄 **Fade Animation**: Yumuşak animasyon
+- 📱 **Responsive**: Adapts to device size
+- 🎨 **Theme-Aware**: Full theme integration
+- ⬛ **Backdrop**: Opaque background
+- ❌ **Dismiss on Backdrop**: Close by tapping backdrop
+- ♿ **Accessible**: Full accessibility support
+- 🔄 **Fade Animation**: Smooth fade animation
+- 📏 **Auto-sizing**: Responsive width and height
+- 🔲 **Bordered**: Styled with border
 
-## Kurulum
+## Installation
 
 ```tsx
 import { BaseModal } from 'react-native-design-system';
 ```
 
-## Temel Kullanım
+## Basic Usage
 
 ```tsx
 import React, { useState } from 'react';
@@ -29,14 +31,14 @@ export const BasicExample = () => {
 
   return (
     <View style={{ padding: 16 }}>
-      <Button title="Modalı Aç" onPress={() => setVisible(true)} />
+      <Button title="Open Modal" onPress={() => setVisible(true)} />
 
       <BaseModal
         visible={visible}
         onClose={() => setVisible(false)}
       >
         <View style={{ padding: 24 }}>
-          <Text>Modal İçeriği</Text>
+          <Text>Modal Content</Text>
         </View>
       </BaseModal>
     </View>
@@ -55,10 +57,10 @@ const [visible, setVisible] = useState(false);
 >
   <View style={{ padding: 24 }}>
     <Text style={{ fontSize: 20, fontWeight: 'bold' }}>
-      Başlık
+      Title
     </Text>
     <Text style={{ marginTop: 16 }}>
-      Modal içeriği buraya gelecek.
+      Modal content goes here.
     </Text>
   </View>
 </BaseModal>
@@ -72,7 +74,8 @@ const [visible, setVisible] = useState(false);
   onClose={() => setVisible(false)}
   dismissOnBackdrop={false}
 >
-  {/* Kullanıcı kapama butonuna basmalı */}
+  {/* User must press close button */}
+  <Button title="Close" onPress={() => setVisible(false)} />
 </BaseModal>
 ```
 
@@ -87,37 +90,46 @@ const [visible, setVisible] = useState(false);
     padding: 32,
   }}
 >
-  <Text>Özel Stil</Text>
+  <Text>Custom Style</Text>
 </BaseModal>
 ```
 
-## Örnek Kullanımlar
+## Example Usages
 
-### Onay Modalı
+### Confirmation Modal
 
 ```tsx
 export const ConfirmationModal = ({ visible, onClose, onConfirm }) => {
   return (
-    <BaseModal visible={visible} onClose={onClose}>
+    <BaseModal
+      visible={visible}
+      onClose={onClose}
+    >
       <View style={{ padding: 24, alignItems: 'center' }}>
-        <AtomicIcon
-          name="warning"
-          size="xl"
-          color="warning"
-          style={{ marginBottom: 16 }}
-        />
+        <AtomicIcon name="warning" size="xl" color="warning" />
 
-        <Text style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 8 }}>
-          Emin misiniz?
+        <Text style={{ fontSize: 20, fontWeight: 'bold', marginTop: 16 }}>
+          Confirm Action
         </Text>
 
-        <Text style={{ textAlign: 'center', color: 'gray', marginBottom: 24 }}>
-          Bu işlem geri alınamaz. Devam etmek istediğinizden emin misiniz?
+        <Text style={{ marginTop: 8, textAlign: 'center' }}>
+          Are you sure you want to proceed?
         </Text>
 
-        <View style={{ flexDirection: 'row', gap: 12 }}>
-          <Button title="İptal" onPress={onClose} />
-          <Button title="Evet, Eminim" onPress={onConfirm} />
+        <View style={{ flexDirection: 'row', marginTop: 24, gap: 12 }}>
+          <Button
+            title="Cancel"
+            variant="ghost"
+            onPress={onClose}
+          />
+          <Button
+            title="Confirm"
+            variant="primary"
+            onPress={() => {
+              onConfirm();
+              onClose();
+            }}
+          />
         </View>
       </View>
     </BaseModal>
@@ -125,212 +137,323 @@ export const ConfirmationModal = ({ visible, onClose, onConfirm }) => {
 };
 ```
 
-### Form Modalı
+### Form Modal
 
 ```tsx
-export const FormModal = ({ visible, onClose }) => {
+export const FormModal = ({ visible, onClose, onSubmit }) => {
   const [formData, setFormData] = useState({
     name: '',
     email: '',
   });
 
-  const handleSubmit = () => {
-    console.log(formData);
-    onClose();
-  };
-
   return (
-    <BaseModal visible={visible} onClose={onClose}>
+    <BaseModal
+      visible={visible}
+      onClose={onClose}
+    >
       <View style={{ padding: 24 }}>
-        <Text style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 24 }}>
-          Yeni Kullanıcı
+        <Text style={{ fontSize: 24, fontWeight: 'bold' }}>
+          Add User
         </Text>
 
         <FormField
-          label="Ad Soyad"
+          label="Name"
           value={formData.name}
           onChangeText={(text) => setFormData({ ...formData, name: text })}
-          placeholder="Adınız ve soyadınız"
-          style={{ marginBottom: 16 }}
+          placeholder="Enter name"
+          style={{ marginTop: 16 }}
         />
 
         <FormField
-          label="E-posta"
+          label="Email"
           value={formData.email}
           onChangeText={(text) => setFormData({ ...formData, email: text })}
-          placeholder="ornek@email.com"
+          placeholder="Enter email"
           keyboardType="email-address"
-          style={{ marginBottom: 24 }}
+          style={{ marginTop: 16 }}
         />
 
-        <Button title="Kaydet" onPress={handleSubmit} />
+        <View style={{ flexDirection: 'row', justifyContent: 'flex-end', marginTop: 24, gap: 12 }}>
+          <Button
+            title="Cancel"
+            variant="ghost"
+            onPress={onClose}
+          />
+          <Button
+            title="Save"
+            onPress={() => {
+              onSubmit(formData);
+              onClose();
+            }}
+          />
+        </View>
       </View>
     </BaseModal>
   );
 };
 ```
 
-### Bilgi Modalı
+### Image Preview Modal
 
 ```tsx
-export const InfoModal = ({ visible, onClose, title, message }) => {
+export const ImagePreviewModal = ({ visible, onClose, imageUri }) => {
   return (
-    <BaseModal visible={visible} onClose={onClose}>
-      <View style={{ padding: 24, alignItems: 'center' }}>
-        <AtomicIcon
-          name="information-circle"
-          size="xl"
-          color="info"
-          style={{ marginBottom: 16 }}
+    <BaseModal
+      visible={visible}
+      onClose={onClose}
+      dismissOnBackdrop={true}
+      contentStyle={{
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+      }}
+    >
+      <TouchableOpacity
+        style={{ flex: 1 }}
+        onPress={onClose}
+        activeOpacity={1}
+      >
+        <Image
+          source={{ uri: imageUri }}
+          style={{ width: '100%', height: '100%' }}
+          resizeMode="contain"
         />
+      </TouchableOpacity>
+    </BaseModal>
+  );
+};
+```
 
-        <Text style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 8 }}>
-          {title}
-        </Text>
+### Settings Modal
 
-        <Text style={{ textAlign: 'center', color: 'gray', marginBottom: 24 }}>
-          {message}
-        </Text>
+```tsx
+export const SettingsModal = ({ visible, onClose }) => {
+  return (
+    <BaseModal
+      visible={visible}
+      onClose={onClose}
+    >
+      <View style={{ padding: 24 }}>
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Text style={{ fontSize: 24, fontWeight: 'bold' }}>
+            Settings
+          </Text>
+          <TouchableOpacity onPress={onClose}>
+            <AtomicIcon name="close-outline" size="lg" />
+          </TouchableOpacity>
+        </View>
+
+        <Divider style={{ marginTop: 16 }} />
+
+        <ListItem
+          title="Dark Mode"
+          subtitle="Enable dark theme"
+          leftIcon="moon-outline"
+          onPress={() => toggleDarkMode()}
+          rightIcon="chevron-forward-outline"
+        />
 
-        <Button title="Tamam" onPress={onClose} />
+        <Divider />
+
+        <ListItem
+          title="Notifications"
+          subtitle="Manage notifications"
+          leftIcon="notifications-outline"
+          onPress={() => navigation.navigate('Notifications')}
+          rightIcon="chevron-forward-outline"
+        />
+
+        <Divider />
+
+        <ListItem
+          title="Privacy"
+          subtitle="Privacy settings"
+          leftIcon="shield-checkmark-outline"
+          onPress={() => navigation.navigate('Privacy')}
+          rightIcon="chevron-forward-outline"
+        />
       </View>
     </BaseModal>
   );
 };
 ```
 
-### Başarı Modalı
+### Info Modal
 
 ```tsx
-export const SuccessModal = ({ visible, onClose, message }) => {
+export const InfoModal = ({ visible, onClose, title, message }) => {
   return (
-    <BaseModal visible={visible} onClose={onClose}>
+    <BaseModal
+      visible={visible}
+      onClose={onClose}
+    >
       <View style={{ padding: 24, alignItems: 'center' }}>
-        <View
-          style={{
-            width: 80,
-            height: 80,
-            borderRadius: 40,
-            backgroundColor: '#d4edda',
-            justifyContent: 'center',
-            alignItems: 'center',
-            marginBottom: 16,
-          }}
-        >
-          <AtomicIcon name="checkmark" size="xl" color="success" />
-        </View>
+        <AtomicIcon name="information-circle" size="xl" color="primary" />
 
-        <Text style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 8 }}>
-          Başarılı!
+        <Text style={{ fontSize: 20, fontWeight: 'bold', marginTop: 16 }}>
+          {title}
         </Text>
 
-        <Text style={{ textAlign: 'center', color: 'gray', marginBottom: 24 }}>
+        <Text style={{ marginTop: 12, textAlign: 'center', color: '#666' }}>
           {message}
         </Text>
 
-        <Button title="Tamam" onPress={onClose} />
+        <Button
+          title="OK"
+          onPress={onClose}
+          style={{ marginTop: 24 }}
+        />
       </View>
     </BaseModal>
   );
 };
 ```
 
-### Hata Modalı
+### Success Modal
 
 ```tsx
-export const ErrorModal = ({ visible, onClose, error }) => {
+export const SuccessModal = ({ visible, onClose, message }) => {
   return (
-    <BaseModal visible={visible} onClose={onClose}>
-      <View style={{ padding: 24, alignItems: 'center' }}>
-        <AtomicIcon
-          name="close-circle"
-          size="xl"
-          color="error"
-          style={{ marginBottom: 16 }}
-        />
+    <BaseModal
+      visible={visible}
+      onClose={onClose}
+    >
+      <View style={{ padding: 32, alignItems: 'center' }}>
+        <View style={{
+          width: 80,
+          height: 80,
+          borderRadius: 40,
+          backgroundColor: '#4caf50',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
+          <AtomicIcon name="checkmark" size="xl" customColor="#fff" />
+        </View>
 
-        <Text style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 8 }}>
-          Hata Oluştu
+        <Text style={{ fontSize: 20, fontWeight: 'bold', marginTop: 24 }}>
+          Success!
         </Text>
 
-        <Text style={{ textAlign: 'center', color: 'gray', marginBottom: 24 }}>
-          {error}
+        <Text style={{ marginTop: 12, textAlign: 'center', color: '#666' }}>
+          {message}
         </Text>
 
-        <Button title="Tamam" onPress={onClose} />
+        <Button
+          title="Continue"
+          onPress={onClose}
+          style={{ marginTop: 32 }}
+        />
       </View>
     </BaseModal>
   );
 };
 ```
 
-### Resim Önizleme Modalı
+### Loading Modal
 
 ```tsx
-export const ImagePreviewModal = ({ visible, onClose, imageUri }) => {
+export const LoadingModal = ({ visible }) => {
   return (
     <BaseModal
       visible={visible}
-      onClose={onClose}
+      onClose={() => {}}
+      dismissOnBackdrop={false}
       contentStyle={{
         backgroundColor: 'transparent',
-        borderWidth: 0,
+        borderColor: 'transparent',
       }}
     >
-      <Pressable onPress={onClose} style={{ flex: 1 }}>
-        <Image
-          source={{ uri: imageUri }}
-          style={{ width: '100%', height: '100%' }}
-          resizeMode="contain"
-        />
-      </Pressable>
+      <View style={{
+        backgroundColor: '#fff',
+        padding: 32,
+        borderRadius: 16,
+        alignItems: 'center',
+      }}>
+        <AtomicSpinner size="lg" />
+        <Text style={{ marginTop: 16 }}>
+          Please wait...
+        </Text>
+      </View>
     </BaseModal>
   );
 };
 ```
 
-### Detay Modalı
+### Alert Modal
 
 ```tsx
-export const DetailModal = ({ visible, onClose, item }) => {
-  if (!item) return null;
-
+export const AlertModal = ({ visible, onClose, title, message, onAction }) => {
   return (
-    <BaseModal visible={visible} onClose={onClose}>
+    <BaseModal
+      visible={visible}
+      onClose={onClose}
+    >
       <View style={{ padding: 24 }}>
-        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-          <Text style={{ fontSize: 20, fontWeight: 'bold' }}>
-            {item.title}
+        <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 16 }}>
+          <AtomicIcon name="warning" size="lg" color="warning" style={{ marginRight: 12 }} />
+          <Text style={{ fontSize: 20, fontWeight: 'bold', flex: 1 }}>
+            {title}
           </Text>
-          <Pressable onPress={onClose}>
-            <AtomicIcon name="close" size="md" />
-          </Pressable>
         </View>
 
-        <View style={{ marginTop: 16 }}>
-          <Text style={{ color: 'gray', marginBottom: 8 }}>
-            Açıklama
-          </Text>
-          <Text>{item.description}</Text>
-        </View>
+        <Text style={{ color: '#666', lineHeight: 22 }}>
+          {message}
+        </Text>
 
-        <View style={{ marginTop: 16 }}>
-          <Text style={{ color: 'gray', marginBottom: 8 }}>
-            Detaylar
-          </Text>
-          {item.details.map((detail, index) => (
-            <View key={index} style={{ flexDirection: 'row', marginBottom: 8 }}>
-              <Text style={{ fontWeight: '600', width: 120 }}>
-                {detail.label}:
-              </Text>
-              <Text style={{ flex: 1 }}>{detail.value}</Text>
-            </View>
-          ))}
+        <View style={{ flexDirection: 'row', justifyContent: 'flex-end', marginTop: 24, gap: 12 }}>
+          <Button
+            title="Cancel"
+            variant="ghost"
+            onPress={onClose}
+          />
+          <Button
+            title="OK"
+            onPress={() => {
+              onAction?.();
+              onClose();
+            }}
+          />
         </View>
+      </View>
+    </BaseModal>
+  );
+};
+```
 
-        <View style={{ marginTop: 24 }}>
-          <Button title="Kapat" onPress={onClose} />
-        </View>
+### Menu Modal
+
+```tsx
+export const MenuModal = ({ visible, onClose, options }) => {
+  return (
+    <BaseModal
+      visible={visible}
+      onClose={onClose}
+      contentStyle={{
+        position: 'absolute',
+        bottom: 0,
+        margin: 16,
+        marginBottom: 32,
+      }}
+    >
+      <View style={{ padding: 8 }}>
+        {options.map((option, index) => (
+          <TouchableOpacity
+            key={index}
+            style={{
+              paddingVertical: 12,
+              paddingHorizontal: 16,
+              borderBottomWidth: 1,
+              borderBottomColor: '#f0f0f0',
+            }}
+            onPress={() => {
+              option.onPress();
+              onClose();
+            }}
+          >
+            <Text style={{ fontSize: 16 }}>
+              {option.label}
+            </Text>
+          </TouchableOpacity>
+        ))}
       </View>
     </BaseModal>
   );
@@ -341,95 +464,96 @@ export const DetailModal = ({ visible, onClose, item }) => {
 
 ### BaseModalProps
 
-| Prop | Tip | Varsayılan | Açıklama |
-|------|-----|------------|----------|
-| `visible` | `boolean` | - **(Zorunlu)** | Modal görünürlüğü |
-| `onClose` | `() => void` | - **(Zorunlu)** | Kapatma callback'i |
-| `children` | `ReactNode` | - **(Zorunlu)** | Modal içeriği |
-| `dismissOnBackdrop` | `boolean` | `true` | Backdrop tıklama ile kapatma |
-| `contentStyle` | `ViewStyle` | - | İçerik stili |
-| `testID` | `string` | `'base-modal'` | Test ID'si |
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `visible` | `boolean` | - **(Required)** | Modal visibility |
+| `onClose` | `() => void` | - **(Required)** | Close callback |
+| `children` | `ReactNode` | - **(Required)** | Modal content |
+| `dismissOnBackdrop` | `boolean` | `true` | Close on backdrop tap |
+| `contentStyle` | `ViewStyle` | - | Custom content style |
+| `testID` | `string` | `'base-modal'` | Test ID for testing |
 
 ## Best Practices
 
-### 1. Kapatma Kontrolü
+### 1. Modal Size
 
 ```tsx
-// Önemli işlemler için backdrop dismiss'i kapatın
-<BaseModal
-  visible={visible}
-  onClose={onClose}
-  dismissOnBackdrop={false}
->
-  <Text>İşlemi tamamlamalısınız</Text>
-  <Button title="Tamam" onPress={onComplete} />
+// BaseModal is responsive by default
+// Content determines height automatically
+<BaseModal visible={visible} onClose={onClose}>
+  {/* Content */}
 </BaseModal>
 ```
 
-### 2. State Yönetimi
+### 2. Dismiss Behavior
 
 ```tsx
-// Modal state'ini parent'ta tutun
-const [modalState, setModalState] = useState({
-  visible: false,
-  data: null,
-});
-
-const openModal = (data) => {
-  setModalState({ visible: true, data });
-};
+// ✅ Good: Allow dismiss for non-critical modals
+<BaseModal dismissOnBackdrop={true} />
 
-const closeModal = () => {
-  setModalState({ visible: false, data: null });
-};
+// ✅ Good: Prevent dismiss for critical modals
+<BaseModal dismissOnBackdrop={false} />
 ```
 
-### 3. İçerik Scroll
+### 3. Close Buttons
 
 ```tsx
-// Uzun içerik için ScrollView kullanın
+// ✅ Good: Always provide close option
 <BaseModal visible={visible} onClose={onClose}>
-  <ScrollView style={{ padding: 24 }}>
-    {/* Uzun içerik */}
-  </ScrollView>
+  <View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
+    <TouchableOpacity onPress={onClose}>
+      <AtomicIcon name="close-outline" size="lg" />
+    </TouchableOpacity>
+  </View>
+
+  {/* Content */}
 </BaseModal>
 ```
 
-### 4. Klavye Desteği
+### 4. Scrollable Content
 
 ```tsx
-// Input'larda klavye sorunlarını önleyin
+// ✅ Good: Use ScrollView for long content
 <BaseModal visible={visible} onClose={onClose}>
-  <KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
-    <View style={{ padding: 24 }}>
-      <FormField label="Ad" />
-      <FormField label="E-posta" />
-    </View>
-  </KeyboardAvoidingView>
+  <ScrollView style={{ padding: 24 }}>
+    {/* Long content */}
+  </ScrollView>
 </BaseModal>
 ```
 
-## Erişilebilirlik
+## Accessibility
 
-BaseModal, tam erişilebilirlik desteği sunar:
+BaseModal provides full accessibility support:
 
-- ✅ Screen reader desteği
+- ✅ Screen reader support
 - ✅ Focus trap
-- ✅ Escape key desteği (web)
-- ✅ Test ID desteği
+- ✅ Keyboard navigation
+- ✅ Semantic roles
+- ✅ Accessibility labels
+- ✅ Escape key support (Android)
+
+## Performance Tips
+
+1. **Lazy Loading**: Load modal content only when visible
+2. **Memoization**: Memo modal content
+3. **Conditional Rendering**: Don't render when not visible
+4. **Cleanup**: Clean up resources on close
+
+## Responsive Behavior
 
-## Performans İpuçları
+BaseModal automatically adjusts its size based on device:
 
-1. **Conditional Rendering**: Modal görünür değilse render etmeyin
-2. **Memoization**: İçerik component'lerini memo edin
-3. **Lazy Loading**: Ağır içerikleri lazy load edin
+- **Mobile**: Full width with margin
+- **Tablet**: Fixed width (e.g., 600px)
+- **Desktop**: Fixed width centered
 
-## İlgili Bileşenler
+## Related Components
 
-- [`ConfirmationModal`](./confirmation-modal/README.md) - Onay modalı
-- [`BottomSheet`](./bottom-sheet/README.md) - Alt sheet modal
-- [`FormField`](./FormField/README.md) - Form alanı
+- [`ConfirmationModal`](./ConfirmationModal.README.md) - Pre-styled confirmation modal
+- [`BottomSheet`](./bottom-sheet/README.md) - Bottom sheet modal
+- [`FormField`](./FormField.README.md) - Form field component
+- [`Button`](../atoms/button/README.md) - Button component
 
-## Lisans
+## License
 
 MIT