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

package/src/atoms/chip/README.md

@@ -0,0 +1,376 @@
+# AtomicChip
+
+AtomicChip, React Native için küçük, etiket benzeri bileşenlerdir. Kategorileri, durumları veya seçilebilir öğeleri göstermek için idealdir.
+
+## Özellikler
+
+- 🎨 **3 Variant**: Filled, Outlined, Ghost
+- 📏 **3 Size**: Small, Medium, Large
+- 🌈 **7 Renk**: Primary, Secondary, Success, Warning, Error, Info, Surface
+- 🎭 **İkon Desteği**: Leading ve trailing ikonlar
+- 👆 **Clickble**: Tıklanabilir chip'ler
+- ✅ **Selected**: Seçim durumu
+- ♿ **Erişilebilir**: Tam erişilebilirlik desteği
+
+## Kurulum
+
+```tsx
+import { AtomicChip } from 'react-native-design-system';
+```
+
+## Temel Kullanım
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import { AtomicChip } from 'react-native-design-system';
+
+export const BasicExample = () => {
+  return (
+    <View style={{ padding: 16, flexDirection: 'row', gap: 8 }}>
+      <AtomicChip>React Native</AtomicChip>
+      <AtomicChip>TypeScript</AtomicChip>
+      <AtomicChip>Material Design</AtomicChip>
+    </View>
+  );
+};
+```
+
+## Variant'lar
+
+```tsx
+<View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+  {/* Filled (Varsayılan) */}
+  <AtomicChip variant="filled">Filled</AtomicChip>
+
+  {/* Outlined */}
+  <AtomicChip variant="outlined">Outlined</AtomicChip>
+
+  {/* Ghost */}
+  <AtomicChip variant="ghost">Ghost</AtomicChip>
+</View>
+```
+
+## Renkler
+
+```tsx
+<View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+  <AtomicChip color="primary">Primary</AtomicChip>
+  <AtomicChip color="secondary">Secondary</AtomicChip>
+  <AtomicChip color="success">Success</AtomicChip>
+  <AtomicChip color="warning">Warning</AtomicChip>
+  <AtomicChip color="error">Error</AtomicChip>
+  <AtomicChip color="info">Info</AtomicChip>
+  <AtomicChip color="surface">Surface</AtomicChip>
+</View>
+```
+
+## Boyutlar
+
+```tsx
+<View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+  {/* Small */}
+  <AtomicChip size="sm">Small</AtomicChip>
+
+  {/* Medium (Varsayılan) */}
+  <AtomicChip size="md">Medium</AtomicChip>
+
+  {/* Large */}
+  <AtomicChip size="lg">Large</AtomicChip>
+</View>
+```
+
+## İkonlu Chip'ler
+
+```tsx
+<View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+  {/* Leading Icon */}
+  <AtomicChip
+    leadingIcon="checkmark-circle"
+    color="success"
+  >
+    Onaylandı
+  </AtomicChip>
+
+  {/* Trailing Icon */}
+  <AtomicChip
+    trailingIcon="close-outline"
+    color="error"
+  >
+    İptal
+  </AtomicChip>
+
+  {/* Both Icons */}
+  <AtomicChip
+    leadingIcon="person-outline"
+    trailingIcon="chevron-down"
+  >
+    Kullanıcı
+  </AtomicChip>
+</View>
+```
+
+## Tıklanabilir Chip'ler
+
+```tsx
+const [selected, setSelected] = useState(false);
+
+<AtomicChip
+  clickable
+  selected={selected}
+  onPress={() => setSelected(!selected)}
+>
+  Seçilebilir Chip
+</AtomicChip>
+```
+
+## Custom Renkler
+
+```tsx
+<AtomicChip
+  variant="filled"
+  backgroundColor="#6366f1"
+  textColor="#ffffff"
+  borderColor="#6366f1"
+>
+  Custom Color
+</AtomicChip>
+```
+
+## Örnek Kullanımlar
+
+### Kategori Etiketleri
+
+```tsx
+<View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+  <AtomicChip size="sm" variant="outlined">React Native</AtomicChip>
+  <AtomicChip size="sm" variant="outlined">TypeScript</AtomicChip>
+  <AtomicChip size="sm" variant="outlined">Node.js</AtomicChip>
+  <AtomicChip size="sm" variant="outlined">GraphQL</AtomicChip>
+</View>
+```
+
+### Durum Göstergeleri
+
+```tsx
+<View style={{ flexDirection: 'row', gap: 8 }}>
+  <AtomicChip
+    color="success"
+    leadingIcon="checkmark-circle"
+    size="sm"
+  >
+    Aktif
+  </AtomicChip>
+
+  <AtomicChip
+    color="warning"
+    leadingIcon="time"
+    size="sm"
+  >
+    Beklemede
+  </AtomicChip>
+
+  <AtomicChip
+    color="error"
+    leadingIcon="close-circle"
+    size="sm"
+  >
+    İptal
+  </AtomicChip>
+</View>
+```
+
+### Filtre Seçimi
+
+```tsx
+const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
+
+const filters = ['Tümü', 'Aktif', 'Pasif', 'Beklemede'];
+
+<View style={{ flexDirection: 'row', gap: 8 }}>
+  {filters.map((filter) => (
+    <AtomicChip
+      key={filter}
+      clickable
+      selected={selectedFilters.includes(filter)}
+      onPress={() => {
+        if (selectedFilters.includes(filter)) {
+          setSelectedFilters(selectedFilters.filter(f => f !== filter));
+        } else {
+          setSelectedFilters([...selectedFilters, filter]);
+        }
+      }}
+      color="primary"
+    >
+      {filter}
+    </AtomicChip>
+  ))}
+</View>
+```
+
+### Yetenek Etiketleri
+
+```tsx
+<View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+  <AtomicChip
+    leadingIcon="code-slash"
+    color="info"
+    size="sm"
+  >
+    React
+  </AtomicChip>
+
+  <AtomicChip
+    leadingIcon="logo-javascript"
+    color="warning"
+    size="sm"
+  >
+    JavaScript
+  </AtomicChip>
+
+  <AtomicChip
+    leadingIcon="logo-python"
+    color="success"
+    size="sm"
+  >
+    Python
+  </AtomicChip>
+</View>
+```
+
+### Silinebilir Etiketler
+
+```tsx
+const [tags, setTags] = useState(['React', 'TypeScript', 'Node.js']);
+
+<View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+  {tags.map((tag, index) => (
+    <AtomicChip
+      key={index}
+      trailingIcon="close"
+      clickable
+      onPress={() => setTags(tags.filter((_, i) => i !== index))}
+      variant="outlined"
+    >
+      {tag}
+    </AtomicChip>
+  ))}
+</View>
+```
+
+## Props
+
+### AtomicChipProps
+
+| Prop | Tip | Varsayılan | Açıklama |
+|------|-----|------------|----------|
+| `children` | `ReactNode` | - **(Zorunlu)** | Chip içeriği |
+| `variant` | `ChipVariant` | `'filled'` | Chip görünüm stili |
+| `size` | `ChipSize` | `'md'` | Chip boyutu |
+| `color` | `ChipColor` | `'primary'` | Semantic renk |
+| `backgroundColor` | `string` | - | Custom arka plan rengi |
+| `textColor` | `string` | - | Custom metin rengi |
+| `borderColor` | `string` | - | Custom çerçeve rengi |
+| `leadingIcon` | `string` | - | Sol ikon ismi |
+| `trailingIcon` | `string` | - | Sağ ikon ismi |
+| `clickable` | `boolean` | `false` | Tıklanabilir |
+| `onPress` | `() => void` | - | Tıklama olayı |
+| `selected` | `boolean` | `false` | Seçili durumu |
+| `disabled` | `boolean` | `false` | Devre dışı |
+| `style` | `StyleProp<ViewStyle>` | - | Özel stil |
+| `activeOpacity` | `number` | `0.7` | Tıklama opaklığı |
+| `testID` | `string` | - | Test ID'si |
+
+### ChipVariant
+
+```typescript
+type ChipVariant =
+  | 'filled'   // Dolgu (varsayılan)
+  | 'outlined' // Çerçeveli
+  | 'ghost';   // Hayalet
+```
+
+### ChipSize
+
+```typescript
+type ChipSize = 'sm' | 'md' | 'lg';
+```
+
+### ChipColor
+
+```typescript
+type ChipColor =
+  | 'primary'    // Ana renk
+  | 'secondary'  // İkincil renk
+  | 'success'    // Başarı rengi
+  | 'warning'    // Uyarı rengi
+  | 'error'      // Hata rengi
+  | 'info'       // Bilgi rengi
+  | 'surface';   // Yüzey rengi
+```
+
+## Best Practices
+
+### 1. Variant Seçimi
+
+```tsx
+// Ana etiketler için filled
+<AtomicChip variant="filled">React Native</AtomicChip>
+
+// Liste elemanları için outlined
+<AtomicChip variant="outlined">TypeScript</AtomicChip>
+
+// Arka plan için ghost
+<AtomicChip variant="ghost">Node.js</AtomicChip>
+```
+
+### 2. Renk Kullanımı
+
+```tsx
+// Başarı durumu
+<AtomicChip color="success">Başarılı</AtomicChip>
+
+// Hata durumu
+<AtomicChip color="error">Hatalı</AtomicChip>
+
+// Uyarı durumu
+<AtomicChip color="warning">Uyarı</AtomicChip>
+```
+
+### 3. Boyut Seçimi
+
+```tsx
+// Yoğun içerik için
+<AtomicChip size="sm">Small</AtomicChip>
+
+// Normal kullanım
+<AtomicChip size="md">Medium</AtomicChip>
+
+// Vurgu için
+<AtomicChip size="lg">Large</AtomicChip>
+```
+
+## Erişilebilirlik
+
+AtomicChip, tam erişilebilirlik desteği sunar:
+
+- ✅ Touch uygun boyut
+- ✅ Screen reader desteği
+- ✅ Selected state anonsu
+- ✅ Test ID desteği
+
+## Performans İpuçları
+
+1. **React.memo**: AtomicChip zaten `React.memo` ile sarılmış
+2. **Listelerde Kullanım**: `key` prop'unu kullanmayı unutmayın
+3. **OnPress Stabilization**: `onPress` callback'ini `useCallback` ile sarın
+
+## İlgili Bileşenler
+
+- [`AtomicPicker`](../picker/README.md) - Seçim bileşeni
+- [`AtomicButton`](../button/README.md) - Buton bileşeni
+- [`FormField`](../../molecules/FormField/README.md) - Form alanı
+
+## Lisans
+
+MIT

package/src/atoms/input/README.md

@@ -0,0 +1,342 @@
+# AtomicInput
+
+AtomicInput, React Native için güçlü ve özelleştirilebilir bir metin girişi bileşenidir. Material Design 3 prensiplerine uygun olarak tasarlanmış ve tamamen özelleştirilebilir.
+
+## Özellikler
+
+- ✨ **Pure React Native**: Harici bağımlılık yok (Paper yok)
+- 🎨 **3 Variant**: Outlined, Filled, Flat
+- 📱 **3 Size**: Small, Medium, Large
+- 🎯 **Durumlar**: Default, Error, Success, Disabled, Focused
+- 🔒 **Password Toggle**: Göster/gizle özelliği
+- 🔢 **Character Counter**: Karakter sayacı
+- 🎭 **İkon Desteği**: Leading ve trailing ikonlar
+- ♿ **Erişilebilirlik**: Tam erişilebilirlik desteği
+- ⌨️ **Klavye Türleri**: Farklı klavye türleri desteği
+- 📝 **Multi-line**: Çok satırlı metin girişi
+
+## Kurulum
+
+```tsx
+import { AtomicInput } from 'react-native-design-system';
+```
+
+## Temel Kullanım
+
+```tsx
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { AtomicInput } from 'react-native-design-system';
+
+export const BasicExample = () => {
+  const [value, setValue] = useState('');
+
+  return (
+    <View style={{ padding: 16 }}>
+      <AtomicInput
+        label="E-posta"
+        value={value}
+        onChangeText={setValue}
+        placeholder="ornek@email.com"
+        keyboardType="email-address"
+      />
+    </View>
+  );
+};
+```
+
+## Variant'lar
+
+```tsx
+<View style={{ gap: 16 }}>
+  {/* Outlined (Varsayılan) */}
+  <AtomicInput
+    variant="outlined"
+    label="Outlined Input"
+    placeholder="Outlined variant"
+  />
+
+  {/* Filled */}
+  <AtomicInput
+    variant="filled"
+    label="Filled Input"
+    placeholder="Filled variant"
+  />
+
+  {/* Flat */}
+  <AtomicInput
+    variant="flat"
+    label="Flat Input"
+    placeholder="Flat variant"
+  />
+</View>
+```
+
+## Boyutlar
+
+```tsx
+<View style={{ gap: 16 }}>
+  {/* Small */}
+  <AtomicInput
+    size="sm"
+    label="Small Input"
+    placeholder="Small size"
+  />
+
+  {/* Medium (Varsayılan) */}
+  <AtomicInput
+    size="md"
+    label="Medium Input"
+    placeholder="Medium size"
+  />
+
+  {/* Large */}
+  <AtomicInput
+    size="lg"
+    label="Large Input"
+    placeholder="Large size"
+  />
+</View>
+```
+
+## Durumlar
+
+```tsx
+<View style={{ gap: 16 }}>
+  {/* Default */}
+  <AtomicInput
+    state="default"
+    label="Default"
+    placeholder="Default state"
+  />
+
+  {/* Error */}
+  <AtomicInput
+    state="error"
+    label="Error State"
+    placeholder="Error state"
+    helperText="Bu alan hatalı"
+  />
+
+  {/* Success */}
+  <AtomicInput
+    state="success"
+    label="Success State"
+    placeholder="Success state"
+    helperText="Başarılı"
+  />
+
+  {/* Disabled */}
+  <AtomicInput
+    state="disabled"
+    label="Disabled"
+    placeholder="Disabled state"
+    value="Değer girilemez"
+    disabled
+  />
+</View>
+```
+
+## Password Input
+
+```tsx
+<AtomicInput
+  label="Şifre"
+  placeholder="Şifrenizi girin"
+  secureTextEntry
+  showPasswordToggle
+/>
+```
+
+## İkonlar
+
+```tsx
+<View style={{ gap: 16 }}>
+  {/* Leading Icon */}
+  <AtomicInput
+    label="Kullanıcı Adı"
+    placeholder="Kullanıcı adınız"
+    leadingIcon="person-outline"
+  />
+
+  {/* Trailing Icon */}
+  <AtomicInput
+    label="Arama"
+    placeholder="Arama yapın"
+    trailingIcon="search-outline"
+    onTrailingIconPress={() => console.log('Arama')}
+  />
+
+  {/* Both Icons */}
+  <AtomicInput
+    label="Email"
+    placeholder="Email adresiniz"
+    leadingIcon="mail-outline"
+    trailingIcon="close-circle-outline"
+    onTrailingIconPress={() => console.log('Temizle')}
+  />
+</View>
+```
+
+## Character Counter
+
+```tsx
+<AtomicInput
+  label="Bio"
+  placeholder="Kendinizi tanıtın"
+  maxLength={150}
+  showCharacterCount
+  multiline
+  numberOfLines={4}
+/>
+```
+
+## Form Örneği
+
+```tsx
+import React, { useState } from 'react';
+import { View, Button } from 'react-native';
+import { AtomicInput } from 'react-native-design-system';
+
+export const FormExample = () => {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    password: '',
+    bio: ''
+  });
+
+  const handleInputChange = (field: string) => (value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  return (
+    <View style={{ padding: 16, gap: 16 }}>
+      <AtomicInput
+        label="Ad Soyad"
+        value={formData.name}
+        onChangeText={handleInputChange('name')}
+        placeholder="Adınız ve soyadınız"
+        leadingIcon="person-outline"
+        state="default"
+      />
+
+      <AtomicInput
+        label="E-posta"
+        value={formData.email}
+        onChangeText={handleInputChange('email')}
+        placeholder="ornek@email.com"
+        keyboardType="email-address"
+        leadingIcon="mail-outline"
+        autoCapitalize="none"
+      />
+
+      <AtomicInput
+        label="Şifre"
+        value={formData.password}
+        onChangeText={handleInputChange('password')}
+        placeholder="En az 8 karakter"
+        secureTextEntry
+        showPasswordToggle
+        leadingIcon="lock-closed-outline"
+        maxLength={20}
+        showCharacterCount
+      />
+
+      <AtomicInput
+        label="Hakkınızda"
+        value={formData.bio}
+        onChangeText={handleInputChange('bio')}
+        placeholder="Kendinizden bahsedin"
+        multiline
+        numberOfLines={4}
+        maxLength={200}
+        showCharacterCount
+      />
+
+      <Button title="Gönder" onPress={() => console.log(formData)} />
+    </View>
+  );
+};
+```
+
+## Props
+
+### AtomicInputProps
+
+| Prop | Tip | Varsayılan | Açıklama |
+|------|-----|------------|----------|
+| `variant` | `'outlined' \| 'filled' \| 'flat'` | `'outlined'` | Input görünüm stili |
+| `state` | `'default' \| 'error' \| 'success' \| 'disabled'` | `'default'` | Input durumu |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Input boyutu |
+| `label` | `string` | - | Input etiketi |
+| `value` | `string` | `''` | Input değeri |
+| `onChangeText` | `(text: string) => void` | - | Değişiklik olayı |
+| `placeholder` | `string` | - | Placeholder metni |
+| `helperText` | `string` | - | Yardımcı metin |
+| `leadingIcon` | `string` | - | Sol ikon ismi (Ionicons) |
+| `trailingIcon` | `string` | - | Sağ ikon ismi (Ionicons) |
+| `onTrailingIconPress` | `() => void` | - | Sağ ikon tıklama olayı |
+| `showPasswordToggle` | `boolean` | `false` | Şifre göster/gizle butonu |
+| `secureTextEntry` | `boolean` | `false` | Şifre girişi |
+| `maxLength` | `number` | - | Maksimum karakter sayısı |
+| `showCharacterCount` | `boolean` | `false` | Karakter sayacı göster |
+| `keyboardType` | `KeyboardType` | `'default'` | Klavye türü |
+| `returnKeyType` | `ReturnKeyType` | - | Return tuşu türü |
+| `onSubmitEditing` | `() => void` | - | Submit olayı |
+| `blurOnSubmit` | `boolean` | - | Submit'te blur |
+| `autoFocus` | `boolean` | - | Otomatik odak |
+| `autoCapitalize` | `AutoCapitalize` | `'sentences'` | Otomatik büyük harf |
+| `autoCorrect` | `boolean` | `true` | Otomatik düzeltme |
+| `disabled` | `boolean` | `false` | Devre dışı |
+| `multiline` | `boolean` | `false` | Çok satırlı |
+| `numberOfLines` | `number` | - | Satır sayısı |
+| `style` | `StyleProp<ViewStyle>` | - | Container stil |
+| `inputStyle` | `StyleProp<TextStyle>` | - | Input stil |
+| `testID` | `string` | - | Test ID'si |
+| `onBlur` | `() => void` | - | Blur olayı |
+| `onFocus` | `() => void` | - | Focus olayı |
+
+## Stil Özelleştirme
+
+```tsx
+<AtomicInput
+  label="Özel Stilli Input"
+  placeholder="Özel stil"
+  style={{
+    backgroundColor: '#f0f0f0',
+    borderRadius: 8,
+  }}
+  inputStyle={{
+    fontSize: 16,
+    fontWeight: '600',
+  }}
+/>
+```
+
+## Erişilebilirlik
+
+AtomicInput, tam erişilebilirlik desteği sunar:
+
+- ✅ Screen reader desteği
+- ✅ Focus management
+- ✅ Error state anonsu
+- ✅ Label ilişkilendirmesi
+- ✅ Test ID desteği
+
+## Önemli Notlar
+
+1. **Ionicons Kullanımı**: İkon isimleri Ionicons kütüphanesinden gelir
+2. **State Management**: `value` ve `onChangeText` kullanarak controlled component olarak kullanın
+3. **Form Validasyonu**: `FormField` molecule bileşeni ile birlikte kullanılması önerilir
+4. **Performance**: Uzun listelerde `key` prop'unu kullanmayı unutmayın
+
+## İlgili Bileşenler
+
+- [`FormField`](../../molecules/FormField/README.md) - Form input bileşeni
+- [`AtomicTextArea`](../AtomicTextArea/README.md) - Çok satırlı metin girişi
+- [`AtomicButton`](../button/README.md) - Form butonu
+
+## Lisans
+
+MIT