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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.84",
+  "version": "2.6.86",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -60,7 +60,6 @@
     "@umituz/react-native-storage": "*",
     "@umituz/react-native-uuid": "*",
     "expo-application": ">=5.0.0",
-    "expo-blur": ">=13.0.0",
     "expo-clipboard": ">=8.0.0",
     "expo-crypto": ">=13.0.0",
     "expo-device": ">=5.0.0",
@@ -112,7 +111,6 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-native": "^5.0.0",
     "expo-application": "~5.9.1",
-    "expo-blur": "~14.0.0",
     "expo-clipboard": "~8.0.7",
     "expo-crypto": "~14.0.0",
     "expo-device": "~7.0.2",

package/src/atoms/AtomicCard.README.md

@@ -0,0 +1,337 @@
+# AtomicCard
+
+AtomicCard, React Native için basit ve özelleştirilebilir bir kart container bileşenidir. Material Design 3 prensiplerine uygun olarak tasarlanmıştır.
+
+## Özellikler
+
+- 🎨 **3 Variant**: Elevated, Outlined, Filled
+- 📦 **4 Padding Seçeneği**: None, Small, Medium, Large
+- 👆 **Pressable**: Tıklanabilir kart desteği
+- 🎯 **Flexible**: İçerik için esnek yapı
+- ♿ **Erişilebilir**: Tam erişilebilirlik desteği
+
+## Kurulum
+
+```tsx
+import { AtomicCard } from 'react-native-design-system';
+```
+
+## Temel Kullanım
+
+```tsx
+import React from 'react';
+import { View, Text } from 'react-native';
+import { AtomicCard } from 'react-native-design-system';
+
+export const BasicExample = () => {
+  return (
+    <View style={{ padding: 16 }}>
+      <AtomicCard>
+        <Text>Bu bir kart içeriği</Text>
+      </AtomicCard>
+    </View>
+  );
+};
+```
+
+## Variant'lar
+
+```tsx
+<View style={{ gap: 16 }}>
+  {/* Elevated (Varsayılan) */}
+  <AtomicCard variant="elevated">
+    <Text>Elevated Card - Gölge efekti</Text>
+  </AtomicCard>
+
+  {/* Outlined */}
+  <AtomicCard variant="outlined">
+    <Text>Outlined Card - Çerçeve efekti</Text>
+  </AtomicCard>
+
+  {/* Filled */}
+  <AtomicCard variant="filled">
+    <Text>Filled Card - Dolgu efekti</Text>
+  </AtomicCard>
+</View>
+```
+
+## Padding Seçenekleri
+
+```tsx
+<View style={{ gap: 16 }}>
+  {/* No Padding */}
+  <AtomicCard padding="none">
+    <Text>Padding yok</Text>
+  </AtomicCard>
+
+  {/* Small */}
+  <AtomicCard padding="sm">
+    <Text>Small padding</Text>
+  </AtomicCard>
+
+  {/* Medium (Varsayılan) */}
+  <AtomicCard padding="md">
+    <Text>Medium padding</Text>
+  </AtomicCard>
+
+  {/* Large */}
+  <AtomicCard padding="lg">
+    <Text>Large padding</Text>
+  </AtomicCard>
+</View>
+```
+
+## Pressable Card
+
+```tsx
+<AtomicCard
+  onPress={() => console.log('Kart tıklandı!')}
+  padding="md"
+>
+  <Text>Tıklanabilir Kart</Text>
+  <Text>Tıklamayı dene</Text>
+</AtomicCard>
+```
+
+## Örnek Kullanımlar
+
+### Profil Kartı
+
+```tsx
+<AtomicCard variant="elevated" padding="md">
+  <View style={{ alignItems: 'center' }}>
+    <Text style={{ fontSize: 20, fontWeight: 'bold' }}>Ahmet Yılmaz</Text>
+    <Text style={{ color: 'gray' }}>Frontend Developer</Text>
+  </View>
+</AtomicCard>
+```
+
+### Ürün Kartı
+
+```tsx
+<AtomicCard
+  variant="outlined"
+  padding="md"
+  onPress={() => navigate('ProductDetail')}
+>
+  <Text style={{ fontSize: 16, fontWeight: '600' }}>Ürün Adı</Text>
+  <Text style={{ marginTop: 8 }}>Ürün açıklaması</Text>
+  <Text style={{ marginTop: 16, fontSize: 18, fontWeight: 'bold' }}>$99.99</Text>
+</AtomicCard>
+```
+
+### Bilgi Kartı
+
+```tsx
+<AtomicCard variant="filled" padding="lg">
+  <Text style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 8 }}>
+    Önemli Bilgi
+  </Text>
+  <Text style={{ lineHeight: 22 }}>
+    Bu kart önemli bilgileri içermektedir.
+    Lütfen dikkatlice okuyunuz.
+  </Text>
+</AtomicCard>
+```
+
+### Liste Elemanı
+
+```tsx
+{items.map((item) => (
+  <AtomicCard
+    key={item.id}
+    variant="outlined"
+    padding="sm"
+    onPress={() => handleItemPress(item)}
+    style={{ marginBottom: 12 }}
+  >
+    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+      <Text>{item.title}</Text>
+      <Text>{item.date}</Text>
+    </View>
+  </AtomicCard>
+))}
+```
+
+## Props
+
+### AtomicCardProps
+
+| Prop | Tip | Varsayılan | Açıklama |
+|------|-----|------------|----------|
+| `children` | `ReactNode` | - **(Zorunlu)** | Kart içeriği |
+| `variant` | `AtomicCardVariant` | `'elevated'` | Kart görünüm stili |
+| `padding` | `AtomicCardPadding` | `'md'` | İç boşluk miktarı |
+| `onPress` | `(event: GestureResponderEvent) => void` | - | Tıklama olayı |
+| `disabled` | `boolean` | `false` | Devre dışı |
+| `style` | `StyleProp<ViewStyle>` | - | Özel stil |
+| `testID` | `string` | - | Test ID'si |
+
+### AtomicCardVariant
+
+```typescript
+type AtomicCardVariant =
+  | 'elevated'  // Gölge efekti (varsayılan)
+  | 'outlined'  // Çerçeve efekti
+  | 'filled';   // Dolgu efekti
+```
+
+### AtomicCardPadding
+
+```typescript
+type AtomicCardPadding =
+  | 'none'  // İç boşluk yok
+  | 'sm'    // Küçük iç boşluk
+  | 'md'    // Orta iç boşluk (varsayılan)
+  | 'lg';   // Büyük iç boşluk
+```
+
+## Stil Özelleştirme
+
+```tsx
+<AtomicCard
+  variant="elevated"
+  padding="md"
+  style={{
+    backgroundColor: '#f8f9fa',
+    borderRadius: 16,
+    borderWidth: 2,
+    borderColor: '#e9ecef',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  }}
+>
+  <Text>Özel Stilli Kart</Text>
+</AtomicCard>
+```
+
+## Best Practices
+
+### 1. Variant Seçimi
+
+```tsx
+// Ana içerik için elevated
+<AtomicCard variant="elevated">
+  <ImportantContent />
+</AtomicCard>
+
+// Liste elemanları için outlined
+<FlatList
+  data={items}
+  renderItem={({ item }) => (
+    <AtomicCard variant="outlined" padding="sm">
+      {item.content}
+    </AtomicCard>
+  )}
+/>
+
+// Arka plan için filled
+<AtomicCard variant="filled">
+  <BackgroundContent />
+</AtomicCard>
+```
+
+### 2. Padding Kullanımı
+
+```tsx
+// Yoğun içerik için az padding
+<AtomicCard padding="sm">
+  <DenseContent />
+</AtomicCard>
+
+// Boş içerik için fazla padding
+<AtomicCard padding="lg">
+  <SparseContent />
+</AtomicCard>
+```
+
+### 3. Pressable Kullanım
+
+```tsx
+// Tıklanabilir öğeler
+<AtomicCard
+  onPress={handlePress}
+  style={{ marginBottom: 8 }}
+>
+  <CardHeader />
+  <CardContent />
+  <CardFooter />
+</AtomicCard>
+```
+
+## Erişilebilirlik
+
+AtomicCard, tam erişilebilirlik desteği sunar:
+
+- ✅ Touch uygun boyut
+- ✅ Screen reader desteği
+- ✅ Disabled state anonsu
+- ✅ Test ID desteği
+
+## Performans İpuçları
+
+1. **FlatList ile Kullanım**: Listelerde `key` prop'unu kullanın
+2. **Inline Styles**: Mümkün olduğunca theme kullanın
+3. **Re-renders**: Kart içeriğini `React.memo` ile sarın
+
+## İlgili Bileşenler
+
+- [`MediaCard`](../../molecules/media-card/README.md) - Medya kartı
+- [`GlowingCard`](../../molecules/GlowingCard/README.md) - Parlak kart
+- [`FormField`](../../molecules/FormField/README.md) - Form alanı
+
+## Örnek Proje
+
+```tsx
+import React from 'react';
+import { View, ScrollView, Text, Image } from 'react-native';
+import { AtomicCard } from 'react-native-design-system';
+
+export const CardGallery = () => {
+  return (
+    <ScrollView style={{ padding: 16 }}>
+      {/* Basit Kart */}
+      <AtomicCard variant="elevated" padding="md" style={{ marginBottom: 16 }}>
+        <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
+          Basit Kart
+        </Text>
+        <Text style={{ marginTop: 8 }}>
+          Bu basit bir kart örneğidir.
+        </Text>
+      </AtomicCard>
+
+      {/* Tıklanabilir Kart */}
+      <AtomicCard
+        variant="outlined"
+        padding="md"
+        onPress={() => console.log('Tıklandı!')}
+        style={{ marginBottom: 16 }}
+      >
+        <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
+          Tıklanabilir Kart
+        </Text>
+        <Text style={{ marginTop: 8, color: '#6366f1' }}>
+          Tıkla ve gör
+        </Text>
+      </AtomicCard>
+
+      {/* Filled Kart */}
+      <AtomicCard variant="filled" padding="lg" style={{ marginBottom: 16 }}>
+        <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
+          Filled Kart
+        </Text>
+        <Text style={{ marginTop: 8, lineHeight: 22 }}>
+          Bu kartın dolgu efekti vardır.
+        </Text>
+      </AtomicCard>
+    </ScrollView>
+  );
+};
+```
+
+## Lisans
+
+MIT

package/src/atoms/AtomicIcon.README.md

@@ -0,0 +1,349 @@
+# AtomicIcon
+
+AtomicIcon, React Native için tema bilinci yüksek bir ikon bileşenidir. Ionicons kütüphanesini kullanır ve tema ile tam entegre çalışır.
+
+## Özellikler
+
+- 🎨 **Tema Bilinci**: Semantic renkler desteği
+- 📏 **Semantic Size**: xs, sm, md, lg, xl boyutları
+- 🎭 **Background Desteği**: Dairesel arka plan
+- 🖼️ **Custom SVG**: Özel SVG path desteği
+- ✅ **Validation**: Geçersiz ikon kontrolü
+- ♿ **Erişilebilir**: Tam erişilebilirlik desteği
+
+## Kurulum
+
+```tsx
+import { AtomicIcon } from 'react-native-design-system';
+```
+
+## Temel Kullanım
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import { AtomicIcon } from 'react-native-design-system';
+
+export const BasicExample = () => {
+  return (
+    <View style={{ padding: 16, flexDirection: 'row', gap: 16 }}>
+      <AtomicIcon name="heart-outline" />
+      <AtomicIcon name="star" />
+      <AtomicIcon name="settings" />
+    </View>
+  );
+};
+```
+
+## Boyutlar
+
+```tsx
+<View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
+  {/* Extra Small */}
+  <AtomicIcon name="home" size="xs" />
+
+  {/* Small */}
+  <AtomicIcon name="home" size="sm" />
+
+  {/* Medium (Varsayılan) */}
+  <AtomicIcon name="home" size="md" />
+
+  {/* Large */}
+  <AtomicIcon name="home" size="lg" />
+
+  {/* Extra Large */}
+  <AtomicIcon name="home" size="xl" />
+
+  {/* Custom Size */}
+  <AtomicIcon name="home" customSize={32} />
+</View>
+```
+
+## Semantic Renkler
+
+```tsx
+<View style={{ flexDirection: 'row', gap: 16 }}>
+  <AtomicIcon name="checkmark-circle" size="lg" color="success" />
+  <AtomicIcon name="warning" size="lg" color="warning" />
+  <AtomicIcon name="close-circle" size="lg" color="error" />
+  <AtomicIcon name="information-circle" size="lg" color="info" />
+  <AtomicIcon name="heart" size="lg" color="primary" />
+  <AtomicIcon name="star" size="lg" color="secondary" />
+</View>
+```
+
+## Custom Renkler
+
+```tsx
+<AtomicIcon
+  name="favorite"
+  size="lg"
+  customColor="#FF6B6B"
+/>
+```
+
+## Background ile Kullanım
+
+```tsx
+<View style={{ flexDirection: 'row', gap: 16 }}>
+  <AtomicIcon
+    name="home"
+    size="md"
+    withBackground
+  />
+
+  <AtomicIcon
+    name="settings"
+    size="md"
+    withBackground
+    backgroundColor="#E3F2FD"
+  />
+
+  <AtomicIcon
+    name="favorite"
+    size="lg"
+    withBackground
+    color="error"
+  />
+</View>
+```
+
+## Custom SVG
+
+```tsx
+<AtomicIcon
+  size="md"
+  svgPath="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
+  svgViewBox="0 0 24 24"
+  customColor="#6366f1"
+/>
+```
+
+## Örnek Kullanımlar
+
+### Navigation Icons
+
+```tsx
+<TabBar>
+  <TabIcon icon="home-outline" label="Home" />
+  <TabIcon icon="search-outline" label="Search" />
+  <TabIcon icon="person-outline" label="Profile" />
+</TabBar>
+```
+
+### Action Buttons
+
+```tsx
+<View style={{ flexDirection: 'row', gap: 16 }}>
+  <AtomicIcon
+    name="call-outline"
+    size="lg"
+    color="success"
+    withBackground
+  />
+
+  <AtomicIcon
+    name="mail-outline"
+    size="lg"
+    color="primary"
+    withBackground
+  />
+
+  <AtomicIcon
+    name="videocam-outline"
+    size="lg"
+    color="secondary"
+    withBackground
+  />
+</View>
+```
+
+### Status Icons
+
+```tsx
+<View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+  <AtomicIcon name="checkmark-circle" size="sm" color="success" />
+  <AtomicText>Online</AtomicText>
+</View>
+
+<View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+  <AtomicIcon name="time" size="sm" color="warning" />
+  <AtomicText>Away</AtomicText>
+</View>
+
+<View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+  <AtomicIcon name="close-circle" size="sm" color="error" />
+  <AtomicText>Offline</AtomicText>
+</View>
+```
+
+## Props
+
+### AtomicIconProps
+
+| Prop | Tip | Varsayılan | Açıklama |
+|------|-----|------------|----------|
+| `name` | `IconName` | - | İkon ismi (Ionicons) |
+| `size` | `IconSize` | `'md'` | Semantic boyut |
+| `customSize` | `number` | - | Özel boyut (px) |
+| `color` | `IconColor` | - | Semantic renk |
+| `customColor` | `string` | - | Özel renk |
+| `svgPath` | `string` | - | Custom SVG path |
+| `svgViewBox` | `string` | `'0 0 24 24'` | SVG viewBox |
+| `withBackground` | `boolean` | `false` | Dairesel arka plan |
+| `backgroundColor` | `string` | - | Arka plan rengi |
+| `accessibilityLabel` | `string` | - | Erişilebilirlik etiketi |
+| `testID` | `string` | - | Test ID'si |
+| `style` | `StyleProp<ViewStyle>` | - | Özel stil |
+
+### IconSize
+
+```typescript
+type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+```
+
+### IconColor
+
+```typescript
+type IconColor =
+  | 'primary'           // Ana tema rengi
+  | 'secondary'         // İkincil tema rengi
+  | 'success'           // Başarı rengi
+  | 'warning'           // Uyarı rengi
+  | 'error'             // Hata rengi
+  | 'info'              // Bilgi rengi
+  | 'onSurface'         // Yüzey üzerindeki metin
+  | 'surfaceVariant'    // Yüzey variant rengi
+  | 'onPrimary'         // Ana renk üzerindeki metin
+  | 'onSecondary'       // İkincil renk üzerindeki metin
+  | 'textInverse'       // Ters metin rengi
+  | 'textPrimary'       // Birincil metin rengi
+  | 'textSecondary'     // İkincil metin rengi
+  | 'textTertiary'      // Üçüncül metin rengi
+  | 'onSurfaceVariant'; // Yüzey variant üzerindeki metin
+```
+
+## Icon Name Listesi
+
+Ionicons kütüphanesinden popüler ikonlar:
+
+### Navigation
+- `home`, `home-outline`
+- `search`, `search-outline`
+- `settings`, `settings-outline`
+- `menu`, `menu-outline`
+- `arrow-back`, `arrow-forward`
+- `chevron-back`, `chevron-forward`
+
+### Action
+- `add`, `add-outline`
+- `checkmark`, `checkmark-circle`
+- `close`, `close-circle`
+- `trash`, `trash-outline`
+- `create`, `create-outline`
+- `heart`, `heart-outline`
+
+### Communication
+- `mail`, `mail-outline`
+- `call`, `call-outline`
+- `chatbubbles`, `chatbubbles-outline`
+- `videocam`, `videocam-outline`
+
+### Media
+- `image`, `image-outline`
+- `musical-note`, `musical-notes`
+- `camera`, `camera-outline`
+- `mic`, `mic-outline`
+
+### Status
+- `checkmark-circle`, `checkmark-circle-outline`
+- `warning`, `warning-outline`
+- `information-circle`, `information-circle-outline`
+- `close-circle`, `close-circle-outline`
+
+Daha fazla ikon için: [Ionicons Documentation](https://ionic.io/ionicons)
+
+## Best Practices
+
+### 1. Size Kullanımı
+
+```tsx
+// Küçük alanlar için
+<AtomicIcon name="checkmark" size="xs" />
+
+// Normal kullanım
+<AtomicIcon name="checkmark" size="md" />
+
+// Vurgu için
+<AtomicIcon name="checkmark" size="xl" />
+```
+
+### 2. Renk Seçimi
+
+```tsx
+// Ana aksiyon
+<AtomicIcon name="add" color="primary" />
+
+// Başarı durumu
+<AtomicIcon name="checkmark" color="success" />
+
+// Hata durumu
+<AtomicIcon name="warning" color="error" />
+
+// Bilgi durumu
+<AtomicIcon name="info" color="info" />
+```
+
+### 3. Background Kullanımı
+
+```tsx
+// Buton ikonları
+<AtomicIcon
+  name="add"
+  withBackground
+  color="primary"
+/>
+
+// Avatar ikonları
+<AtomicIcon
+  name="person"
+  size="lg"
+  withBackground
+  backgroundColor="#E3F2FD"
+/>
+```
+
+## Erişilebilirlik
+
+AtomicIcon, tam erişilebilirlik desteği sunar:
+
+- ✅ Screen reader desteği
+- ✅ Accessibility label
+- ✅ Semantic anlamlar
+- ✅ Test ID desteği
+
+## Validation
+
+Geçersiz ikon isimleri otomatik olarak fallback'e yönlendirilir:
+
+```tsx
+// Geçersiz ikon - console warning gösterir
+<AtomicIcon name="invalid-icon" />
+// → "help-circle-outline" gösterir
+```
+
+## Performans İpuçları
+
+1. **React.memo**: AtomicIcon zaten `React.memo` ile sarılmış
+2. **Static Names**: İkon isimlerini değişmez olarak tanımlayın
+3. **Avoid Re-renders**: Parent component'te stabilization kullanın
+
+## İlgili Bileşenler
+
+- [`AtomicButton`](../button/README.md) - Buton bileşeni
+- [`AtomicChip`](../chip/README.md) - Chip bileşeni
+- [`AtomicInput`](../input/README.md) - Input bileşeni
+
+## Lisans
+
+MIT