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

package/src/molecules/emoji/README.md

@@ -1,580 +1,347 @@
 # EmojiPicker
 
-EmojiPicker, emoji seçimi için kullanılan bileşendir. `rn-emoji-keyboard` kütüphanesini wrapper'layarak temiz bir arayüz sunar. Kategori bazlı seçim, arama ve son kullanılan emoji'leri destekler.
+EmojiPicker is a component for emoji selection that wraps `rn-emoji-keyboard` library. It provides category-based selection, search, and recently used emojis.
 
-## Özellikler
+## Import & Usage
 
-- 😀 **Emoji Seçimi**: Geniş emoji koleksiyonu
-- 📁 **Kategoriler**: Kategori bazlı navigasyon
-- 🔍 **Arama**: Emoji arama özelliği
-- ⏰ **Son Kullanılanlar**: Son kullanılan emoji'ler
-- 🌍 **Lokalizasyon**: Çoklu dil desteği
-- 🎨 **Özelleştirilebilir**: Konfigürasyon seçenekleri
-- ✨ **Animasyonlar**: Smooth animasyonlar
+```typescript
+import { EmojiPicker } from 'react-native-design-system/src/molecules/emoji';
+```
+
+**Location:** `src/molecules/emoji/EmojiPicker.tsx`
 
-## Kurulum
+## Basic Usage
 
 ```tsx
-import { EmojiPicker } from 'react-native-design-system';
+<EmojiPicker
+  open={isOpen}
+  onClose={() => setIsOpen(false)}
+  onEmojiSelected={(emoji) => setEmoji(emoji.emoji)}
+/>
 ```
 
-## Temel Kullanım
+## Strategy
 
-```tsx
-import React, { useState } from 'react';
-import { View, TouchableOpacity, Text } from 'react-native';
-import { EmojiPicker } from 'react-native-design-system';
-
-export const BasicExample = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [emoji, setEmoji] = useState('');
-
-  const handleEmojiSelect = (emojiObject) => {
-    setEmoji(emojiObject.emoji);
-    setIsOpen(false);
-  };
-
-  return (
-    <View>
-      <TouchableOpacity onPress={() => setIsOpen(true)}>
-        <Text>{emoji || 'Emoji Seç'}</Text>
-      </TouchableOpacity>
-
-      <EmojiPicker
-        open={isOpen}
-        onClose={() => setIsOpen(false)}
-        onEmojiSelected={handleEmojiSelect}
-      />
-    </View>
-  );
-};
-```
+**Purpose**: Provide a clean, user-friendly emoji selection interface for adding emojis to text content.
+
+**When to Use**:
+- Message composers and chat interfaces
+- Comment input fields
+- Post/reaction creators
+- Profile or group name editors
+- Emoji reactions and filters
+
+**When NOT to Use**:
+- For simple emoji display - use text directly
+- For custom emoji systems - build custom solution
+- For limited emoji sets - use simple picker
+
+## Rules
 
-## Basit Emoji Seçimi
+### Required
+
+1. **ALWAYS** control open state with parent component
+2. **MUST** provide `onClose` callback
+3. **MUST** provide `onEmojiSelected` handler
+4. **ALWAYS** close picker after selection (usually)
+5. **MUST** provide trigger button for opening
+
+### State Management
+
+1. **MUST** manage open state in parent component
+2. **SHOULD** reset state after selection
+3. **ALWAYS** handle close callback properly
+4. **NEVER** leave picker open indefinitely
+
+### User Experience
+
+1. **ALWAYS** provide clear trigger button
+2. **SHOULD** show selected emoji in UI
+3. **MUST** close picker after selection (usually)
+4. **NEVER** open picker automatically without user action
+
+## Forbidden
+
+❌ **NEVER** do these:
 
 ```tsx
-export const SimpleEmojiPicker = () => {
-  const [open, setOpen] = useState(false);
-  const [selectedEmoji, setSelectedEmoji] = useState('');
-
-  return (
-    <View>
-      <Button
-        title={selectedEmoji || 'Emoji Seç'}
-        onPress={() => setOpen(true)}
-      />
-
-      <EmojiPicker
-        open={open}
-        onClose={() => setOpen(false)}
-        onEmojiSelected={(emoji) => {
-          setSelectedEmoji(emoji.emoji);
-          setOpen(false);
-        }}
-      />
-    </View>
-  );
-};
+// ❌ Missing required props
+<EmojiPicker />
+
+// ❌ Not controlled
+<EmojiPicker open={true} /> {/* Always open */}
+
+// ❌ No close handler
+<EmojiPicker
+  open={isOpen}
+  onEmojiSelected={handleSelect}
+  // Missing onClose ❌
+/>
+
+// ❌ Not handling selection
+<EmojiPicker
+  open={isOpen}
+  onClose={() => setIsOpen(false)}
+  // Missing onEmojiSelected ❌
+/>
+
+// ❌ Auto-opening
+useEffect(() => {
+  setOpen(true); // ❌ Don't auto-open
+}, []);
+
+// ❌ Not showing selected emoji
+const [emoji, setEmoji] = useState('');
+<EmojiPicker
+  onEmojiSelected={(emojiObject) => {
+    // Not updating state ❌
+  }}
+/>
 ```
 
-## Mesajlaşma
+## Best Practices
+
+### State Management
 
+✅ **DO**:
 ```tsx
-export const MessageComposer = () => {
-  const [message, setMessage] = useState('');
-  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
-
-  const handleEmojiSelect = (emojiObject) => {
-    setMessage(message + emojiObject.emoji);
-  };
-
-  return (
-    <View>
-      <View style={{ flexDirection: 'row', alignItems: 'center', padding: 16 }}>
-        <TouchableOpacity onPress={() => setEmojiPickerOpen(true)}>
-          <AtomicIcon name="happy-outline" size="lg" />
-        </TouchableOpacity>
-
-        <TextInput
-          style={{ flex: 1, marginLeft: 8 }}
-          value={message}
-          onChangeText={setMessage}
-          placeholder="Mesaj yazın..."
-        />
-
-        <Button
-          title="Gönder"
-          onPress={() => sendMessage(message)}
-        />
-      </View>
-
-      <EmojiPicker
-        open={emojiPickerOpen}
-        onClose={() => setEmojiPickerOpen(false)}
-        onEmojiSelected={handleEmojiSelect}
-      />
-    </View>
-  );
-};
-```
+const [isOpen, setIsOpen] = useState(false);
+const [selectedEmoji, setSelectedEmoji] = useState('');
 
-## Yorum Ekleme
+<EmojiPicker
+  open={isOpen}
+  onClose={() => setIsOpen(false)}
+  onEmojiSelected={(emoji) => {
+    setSelectedEmoji(emoji.emoji);
+    setIsOpen(false); // Close after selection
+  }}
+/>
+```
 
+❌ **DON'T**:
 ```tsx
-export const CommentInput = () => {
-  const [comment, setComment] = useState('');
-  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
-
-  const insertEmoji = (emojiObject) => {
-    setComment(comment + emojiObject.emoji);
-  };
-
-  return (
-    <View>
-      <View style={{ padding: 16 }}>
-        <View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
-          <Avatar
-            uri={currentUser.avatar}
-            name={currentUser.name}
-            size="sm"
-          />
-
-          <View style={{ flex: 1, marginLeft: 12 }}>
-            <TextInput
-              style={{
-                borderWidth: 1,
-                borderColor: '#e0e0e0',
-                borderRadius: 8,
-                padding: 12,
-                minHeight: 80,
-              }}
-              value={comment}
-              onChangeText={setComment}
-              placeholder="Yorumunuzu yazın..."
-              multiline
-            />
-
-            <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 8 }}>
-              <TouchableOpacity onPress={() => setShowEmojiPicker(true)}>
-                <AtomicIcon name="happy-outline" size="md" />
-              </TouchableOpacity>
-
-              <Button
-                title="Yorum Yap"
-                onPress={() => postComment(comment)}
-              />
-            </View>
-          </View>
-        </View>
-      </View>
-
-      <EmojiPicker
-        open={showEmojiPicker}
-        onClose={() => setShowEmojiPicker(false)}
-        onEmojiSelected={insertEmoji}
-      />
-    </View>
-  );
-};
+// Don't leave open
+<EmojiPicker
+  open={isOpen}
+  onEmojiSelected={(emoji) => {
+    setSelectedEmoji(emoji.emoji);
+    // Not closing ❌
+  }}
+/>
 ```
 
-## Profil Reaksiyonları
+### Trigger Button
 
+✅ **DO**:
 ```tsx
-export const ProfileReactions = () => {
-  const [reactions, setReactions] = useState([]);
-  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
+<TouchableOpacity onPress={() => setIsOpen(true)}>
+  <AtomicIcon name="happy-outline" size="lg" />
+</TouchableOpacity>
+```
 
-  const addReaction = (emojiObject) => {
-    setReactions([...reactions, emojiObject.emoji]);
-    setEmojiPickerOpen(false);
-  };
-
-  return (
-    <View>
-      <View style={{ flexDirection: 'row', alignItems: 'center', padding: 16 }}>
-        <Avatar
-          uri={user.avatar}
-          name={user.name}
-          size="lg"
-        />
-
-        <View style={{ flex: 1, marginLeft: 12 }}>
-          <AtomicText type="titleMedium">{user.name}</AtomicText>
-          <AtomicText type="bodyMedium" color="secondary">
-            {user.bio}
-          </AtomicText>
-        </View>
-
-        <TouchableOpacity onPress={() => setEmojiPickerOpen(true)}>
-          <AtomicIcon name="heart-outline" size="lg" />
-        </TouchableOpacity>
-      </View>
-
-      {reactions.length > 0 && (
-        <View style={{ flexDirection: 'row', flexWrap: 'wrap', paddingHorizontal: 16, paddingBottom: 16 }}>
-          {reactions.map((emoji, index) => (
-            <View
-              key={index}
-              style={{
-                backgroundColor: '#f0f0f0',
-                paddingHorizontal: 12,
-                paddingVertical: 6,
-                borderRadius: 16,
-                marginRight: 8,
-                marginBottom: 8,
-              }}
-            >
-              <AtomicText style={{ fontSize: 18 }}>{emoji}</AtomicText>
-            </View>
-          ))}
-        </View>
-      )}
-
-      <EmojiPicker
-        open={emojiPickerOpen}
-        onClose={() => setEmojiPickerOpen(false)}
-        onEmojiSelected={addReaction}
-      />
-    </View>
-  );
-};
+❌ **DON'T**:
+```tsx
+// Don't use unclear trigger
+<TouchableOpacity onPress={() => setIsOpen(true)}>
+  <Text>Click here</Text> {/* ❌ Unclear */}
+</TouchableOpacity>
 ```
 
-## Post Oluşturma
+### Inserting Emoji
 
+✅ **DO**:
 ```tsx
-export const PostCreator = () => {
-  const [content, setContent] = useState('');
-  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
-
-  const handleEmojiSelect = (emojiObject) => {
-    setContent(content + emojiObject.emoji);
-  };
-
-  const createPost = () => {
-    if (content.trim()) {
-      publishPost(content);
-      setContent('');
-    }
-  };
-
-  return (
-    <AtomicCard variant="outlined" style={{ margin: 16 }}>
-      <View style={{ padding: 16 }}>
-        <View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
-          <Avatar
-            uri={currentUser.avatar}
-            name={currentUser.name}
-            size="md"
-          />
-
-          <View style={{ flex: 1, marginLeft: 12 }}>
-            <TextInput
-              style={{ minHeight: 100 }}
-              value={content}
-              onChangeText={setContent}
-              placeholder="Neler oluyor?"
-              multiline
-            />
-
-            <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 12 }}>
-              <View style={{ flexDirection: 'row', gap: 16 }}>
-                <TouchableOpacity onPress={() => setEmojiPickerOpen(true)}>
-                  <AtomicIcon name="happy-outline" size="md" color="primary" />
-                </TouchableOpacity>
-                <TouchableOpacity>
-                  <AtomicIcon name="image-outline" size="md" color="primary" />
-                </TouchableOpacity>
-              </View>
-
-              <Button
-                title="Paylaş"
-                onPress={createPost}
-                disabled={!content.trim()}
-              />
-            </View>
-          </View>
-        </View>
-      </View>
-
-      <EmojiPicker
-        open={emojiPickerOpen}
-        onClose={() => setEmojiPickerOpen(false)}
-        onEmojiSelected={handleEmojiSelect}
-      />
-    </AtomicCard>
-  );
+const insertEmoji = (emojiObject) => {
+  setMessage(message + emojiObject.emoji);
 };
 ```
 
-## Grup İsmi
-
+❌ **DON'T**:
 ```tsx
-export const GroupNameEditor = () => {
-  const [groupName, setGroupName] = useState('');
-  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
-
-  return (
-    <View style={{ padding: 16 }}>
-      <AtomicText type="titleMedium" style={{ marginBottom: 8 }}>
-        Grup İsmi
-      </AtomicText>
-
-      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-        <TouchableOpacity
-          style={{
-            width: 60,
-            height: 60,
-            borderRadius: 30,
-            backgroundColor: '#f0f0f0',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-          onPress={() => setEmojiPickerOpen(true)}
-        >
-          <AtomicText style={{ fontSize: 32 }}>
-            {groupName.slice(0, 1) || '📝'}
-          </AtomicText>
-        </TouchableOpacity>
-
-        <TextInput
-          style={{ flex: 1, marginLeft: 12 }}
-          value={groupName}
-          onChangeText={setGroupName}
-          placeholder="Grup adı..."
-        />
-      </View>
-
-      <EmojiPicker
-        open={emojiPickerOpen}
-        onClose={() => setEmojiPickerOpen(false)}
-        onEmojiSelected={(emoji) => {
-          setGroupName(emoji.emoji + ' ' + groupName);
-          setEmojiPickerOpen(false);
-        }}
-      />
-    </View>
-  );
+// Don't replace entire message
+const insertEmoji = (emojiObject) => {
+  setMessage(emojiObject.emoji); // ❌ Lost previous text
 };
 ```
 
-## Emoji Reaksiyonları
-
+## AI Coding Guidelines
+
+### For AI Agents
+
+When generating EmojiPicker components, follow these rules:
+
+1. **Always import from correct path**:
+   ```typescript
+   import { EmojiPicker } from 'react-native-design-system/src/molecules/emoji';
+   ```
+
+2. **Always manage state properly**:
+   ```tsx
+   const [isOpen, setIsOpen] = useState(false);
+   const [selectedEmoji, setSelectedEmoji] = useState('');
+   ```
+
+3. **Always handle all callbacks**:
+   ```tsx
+   <EmojiPicker
+     open={isOpen}
+     onClose={() => setIsOpen(false)}
+     onEmojiSelected={(emoji) => {
+       setSelectedEmoji(emoji.emoji);
+       setIsOpen(false);
+     }}
+   />
+   ```
+
+4. **Always provide clear trigger**:
+   ```tsx
+   <TouchableOpacity onPress={() => setIsOpen(true)}>
+     <AtomicIcon name="happy-outline" />
+   </TouchableOpacity>
+   ```
+
+5. **Never leave picker open**:
+   ```tsx
+   // ❌ Bad
+   onEmojiSelected={(emoji) => {
+     setSelectedEmoji(emoji.emoji);
+     // Not closing
+   }}
+
+   // ✅ Good
+   onEmojiSelected={(emoji) => {
+     setSelectedEmoji(emoji.emoji);
+     setIsOpen(false); // Always close
+   }}
+   ```
+
+### Common Patterns
+
+#### Message Composer
 ```tsx
-export const MessageReactions = ({ message }) => {
-  const [reactions, setReactions] = useState(message.reactions || []);
-  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
-
-  const addReaction = (emojiObject) => {
-    const existing = reactions.find(r => r.emoji === emojiObject.emoji);
-
-    if (existing) {
-      // Remove reaction if already exists
-      setReactions(reactions.filter(r => r.emoji !== emojiObject.emoji));
-    } else {
-      // Add new reaction
-      setReactions([...reactions, {
-        emoji: emojiObject.emoji,
-        users: [currentUser.id],
-        count: 1,
-      }]);
-    }
+const [message, setMessage] = useState('');
+const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
 
-    setEmojiPickerOpen(false);
-  };
-
-  return (
-    <View>
-      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 4 }}>
-        {reactions.map((reaction, index) => (
-          <TouchableOpacity
-            key={index}
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              backgroundColor: reaction.users.includes(currentUser.id)
-                ? `${tokens.colors.primary}20`
-                : '#f0f0f0',
-              paddingHorizontal: 8,
-              paddingVertical: 4,
-              borderRadius: 16,
-              borderWidth: reaction.users.includes(currentUser.id) ? 1 : 0,
-              borderColor: tokens.colors.primary,
-            }}
-            onPress={() => addReaction({ emoji: reaction.emoji })}
-          >
-            <AtomicText style={{ fontSize: 16, marginRight: 4 }}>
-              {reaction.emoji}
-            </AtomicText>
-            <AtomicText type="labelSmall">
-              {reaction.count}
-            </AtomicText>
-          </TouchableOpacity>
-        ))}
-
-        <TouchableOpacity
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            backgroundColor: '#f0f0f0',
-            paddingHorizontal: 8,
-            paddingVertical: 4,
-            borderRadius: 16,
-          }}
-          onPress={() => setEmojiPickerOpen(true)}
-        >
-          <AtomicIcon name="add-outline" size="sm" />
-        </TouchableOpacity>
-      </View>
-
-      <EmojiPicker
-        open={emojiPickerOpen}
-        onClose={() => setEmojiPickerOpen(false)}
-        onEmojiSelected={addReaction}
-      />
-    </View>
-  );
-};
+<View>
+  <TextInput
+    value={message}
+    onChangeText={setMessage}
+    placeholder="Type a message..."
+  />
+
+  <TouchableOpacity onPress={() => setEmojiPickerOpen(true)}>
+    <AtomicIcon name="happy-outline" />
+  </TouchableOpacity>
+
+  <EmojiPicker
+    open={emojiPickerOpen}
+    onClose={() => setEmojiPickerOpen(false)}
+    onEmojiSelected={(emoji) => {
+      setMessage(message + emoji.emoji);
+    }}
+  />
+</View>
 ```
 
-## Emoji Filtreleme
+#### Comment Input
+```tsx
+const [comment, setComment] = useState('');
+const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+
+<View>
+  <TextInput
+    value={comment}
+    onChangeText={setComment}
+    placeholder="Add a comment..."
+    multiline
+  />
+
+  <TouchableOpacity onPress={() => setShowEmojiPicker(true)}>
+    <AtomicIcon name="happy-outline" />
+  </TouchableOpacity>
+
+  <EmojiPicker
+    open={showEmojiPicker}
+    onClose={() => setShowEmojiPicker(false)}
+    onEmojiSelected={(emoji) => {
+      setComment(comment + emoji.emoji);
+    }}
+  />
+</View>
+```
 
+#### Emoji Selector
 ```tsx
-export const EmojiFilter = () => {
-  const [selectedEmoji, setSelectedEmoji] = useState('');
-  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
-  const [filteredContent, setFilteredContent] = useState([]);
+const [selectedEmoji, setSelectedEmoji] = useState('');
+const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
 
-  const handleEmojiSelect = (emojiObject) => {
-    setSelectedEmoji(emojiObject.emoji);
-    setEmojiPickerOpen(false);
+<Button
+  title={selectedEmoji || 'Select Emoji'}
+  onPress={() => setEmojiPickerOpen(true)}
+/>
 
-    // Filter content by emoji reaction
-    const filtered = content.filter(item =>
-      item.reactions?.some(r => r.emoji === emojiObject.emoji)
-    );
-    setFilteredContent(filtered);
-  };
-
-  return (
-    <View>
-      <View style={{ flexDirection: 'row', alignItems: 'center', padding: 16, gap: 8 }}>
-        <TouchableOpacity onPress={() => {
-          setSelectedEmoji('');
-          setFilteredContent(content);
-        }}>
-          <AtomicText type="labelLarge">Tümü</AtomicText>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          style={{
-            paddingHorizontal: 12,
-            paddingVertical: 6,
-            backgroundColor: selectedEmoji ? `${tokens.colors.primary}20` : '#f0f0f0',
-            borderRadius: 16,
-          }}
-          onPress={() => setEmojiPickerOpen(true)}
-        >
-          <AtomicText style={{ fontSize: 18 }}>
-            {selectedEmoji || '😀'}
-          </AtomicText>
-        </TouchableOpacity>
-      </View>
-
-      <EmojiPicker
-        open={emojiPickerOpen}
-        onClose={() => setEmojiPickerOpen(false)}
-        onEmojiSelected={handleEmojiSelect}
-      />
-    </View>
-  );
-};
+<EmojiPicker
+  open={emojiPickerOpen}
+  onClose={() => setEmojiPickerOpen(false)}
+  onEmojiSelected={(emoji) => {
+    setSelectedEmoji(emoji.emoji);
+    setEmojiPickerOpen(false);
+  }}
+/>
 ```
 
-## Props
-
-### EmojiPickerProps
+## Props Reference
 
-| Prop | Tip | Varsayılan | Açıklama |
-|------|-----|------------|----------|
-| `open` | `boolean` | - **(Zorunlu)** | Picker açık mı |
-| `onClose` | `() => void` | - **(Zorunlu)** | Kapanma callback'i |
-| `onEmojiSelected` | `(emoji) => void` | - **(Zorunlu)** | Emoji seçildiğinde |
-| `config` | `EmojiPickerConfig` | `{}` | Konfigürasyon |
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `open` | `boolean` | Yes | - | Picker open state |
+| `onClose` | `() => void` | Yes | - | Close callback |
+| `onEmojiSelected` | `(emoji) => void` | Yes | - | Emoji selected callback |
+| `config` | `EmojiPickerConfig` | No | `{}` | Picker configuration |
 
 ### EmojiPickerConfig
 
-| Prop | Tip | Varsayılan | Açıklama |
-|------|-----|------------|----------|
-| `enableRecentlyUsed` | `boolean` | `true` | Son kullanılanlar |
-| `enableSearch` | `boolean` | `true` | Arama çubuğu |
-| `enableCategoryTabs` | `boolean` | `true` | Kategori sekmeleri |
-| `categoryOrder` | `string[]` | - | Kategori sırası |
-| `translation` | `object` | - | Lokalizasyon |
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `enableRecentlyUsed` | `boolean` | `true` | Show recently used |
+| `enableSearch` | `boolean` | `true` | Enable search |
+| `enableCategoryTabs` | `boolean` | `true` | Show categories |
+| `categoryOrder` | `string[]` | - | Category order |
+| `translation` | `object` | - | Localization |
 
 ### EmojiObject
 
-| Prop | Tip | Açıklama |
-|------|-----|----------|
-| `emoji` | `string` | Emoji karakteri |
-| `name` | `string` | Emoji adı |
+| Prop | Type | Description |
+|------|------|-------------|
+| `emoji` | `string` | Emoji character |
+| `name` | `string` | Emoji name |
 | `slug` | `string` | URL slug |
-| `unicode_version` | `string` | Unicode versiyonu |
-
-## Best Practices
-
-### 1. Kullanıcı Deneyimi
-
-```tsx
-// ✅ İyi - Hemen kapanır
-onEmojiSelected={(emoji) => {
-  onEmojiSelect(emoji);
-  onClose(); // Hemen kapat
-}}
-```
-
-### 2. State Yönetimi
-
-```tsx
-// ✅ İyi - Ayrı state
-const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
-const [selectedEmoji, setSelectedEmoji] = useState('');
-```
-
-### 3. Trigger Butonu
-
-```tsx
-// ✅ İyi - İkonlu buton
-<TouchableOpacity onPress={() => setEmojiPickerOpen(true)}>
-  <AtomicIcon name="happy-outline" size="lg" />
-</TouchableOpacity>
-```
-
-## Erişilebilirlik
+| `unicode_version` | `string` | Unicode version |
 
-EmojiPicker, erişilebilirlik desteği sunar:
+## Accessibility
 
-- ✅ Screen reader desteği
-- ✅ Touch uygun boyut
-- ✅ Semantic anlamlar
+- ✅ Screen reader support
+- ✅ Touch target size: minimum 44x44pt
+- ✅ Semantic emojis announced
+- ✅ Keyboard navigation support
 
-## Performans İpuçları
+## Performance
 
-1. **Lazy Load**: Lazy loading kullanın
-2. **Cache**: Emoji'leri cache'leyin
-3. **Unmount**: Kullanılmadığında unmount edin
+1. **Lazy loading**: Load picker on demand
+2. **Cache**: Cache recently used emojis
+3. **Unmount**: Unmount when closed
+4. **Optimization**: Debounce search input
 
-## İlgili Bileşenler
+## Related Components
 
-- [`AtomicIcon`](../../atoms/AtomicIcon/README.md) - İkon bileşeni
-- [`FormField`](../FormField/README.md) - Form alanı
-- [`BaseModal`](../BaseModal/README.md) - Modal bileşeni
+- [`AtomicIcon`](../../atoms/AtomicIcon/README.md) - Icon component
+- [`FormField`](../FormField/README.md) - Form field component
+- [`BaseModal`](../BaseModal/README.md) - Modal component
 
-## Bağımlılıklar
+## Dependencies
 
 - `rn-emoji-keyboard` - Emoji picker UI library
 
-## Lisans
+## License
 
 MIT