@umituz/react-native-design-system 2.6.93 → 2.6.95

package/src/atoms/AtomicBadge.README.md

@@ -1,423 +1,188 @@
 # AtomicBadge
 
-AtomicBadge, etiketler, durum göstergeleri ve küçük bilgi etiketleri için kullanılan bir rozet bileşenidir.
+A small badge component for status indicators, labels, and tags.
 
-## Özellikler
+## Import & Usage
 
-- 🏷️ **6 Variant**: Primary, Secondary, Success, Warning, Error, Info
-- 📏 **3 Size**: Small, Medium, Large
-- 🎭 **İkon Desteği**: Sol veya sağ ikon
-- 🎨 **Semantic Colors**: Anlamlı renkler
-- ♿ **Erişilebilir**: Tam erişilebilirlik desteği
-- 💪 **React.memo**: Optimize edilmiş render
-
-## Kurulum
-
-```tsx
-import { AtomicBadge } from 'react-native-design-system';
+```typescript
+import { AtomicBadge } from 'react-native-design-system/src/atoms/AtomicBadge';
 ```
 
-## Temel Kullanım
-
-```tsx
-import React from 'react';
-import { View } from 'react-native';
-import { AtomicBadge } from 'react-native-design-system';
-
-export const BasicExample = () => {
-  return (
-    <View style={{ padding: 16 }}>
-      <AtomicBadge text="Badge" />
-    </View>
-  );
-};
-```
+**Location:** `src/atoms/AtomicBadge.tsx`
 
-## Variant'lar
+## Basic Usage
 
 ```tsx
-<View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-  <AtomicBadge text="Primary" variant="primary" />
-  <AtomicBadge text="Secondary" variant="secondary" />
-  <AtomicBadge text="Success" variant="success" />
-  <AtomicBadge text="Warning" variant="warning" />
-  <AtomicBadge text="Error" variant="error" />
-  <AtomicBadge text="Info" variant="info" />
-</View>
+<AtomicBadge text="New" variant="success" />
 ```
 
-## Boyutlar
+## Strategy
 
-```tsx
-<View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
-  {/* Small */}
-  <AtomicBadge text="Small" size="sm" variant="primary" />
+**Purpose**: Display status information, categories, or labels in compact form.
 
-  {/* Medium (Varsayılan) */}
-  <AtomicBadge text="Medium" size="md" variant="primary" />
+**When to Use**:
+- Status indicators (active, pending, verified)
+- Category tags (product types, topics)
+- Count badges (notifications, messages)
+- Labels (new, featured, beta)
+- Priority indicators (high, low, urgent)
 
-  {/* Large */}
-  <AtomicBadge text="Large" size="lg" variant="primary" />
-</View>
-```
+**When NOT to Use**:
+- For large content blocks
+- As buttons (use button with badge instead)
+- For complex interactions
 
-## İkonlu Badge
+## Rules
 
-```tsx
-<View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-  {/* Sol İkon */}
-  <AtomicBadge
-    text="New"
-    variant="success"
-    icon="checkmark-circle"
-    iconPosition="left"
-  />
-
-  {/* Sağ İkon */}
-  <AtomicBadge
-    text="Error"
-    variant="error"
-    icon="warning"
-    iconPosition="right"
-  />
-</View>
-```
+### Required
 
-## Örnek Kullanımlar
+1. **MUST** provide `text` prop
+2. **ALWAYS** use appropriate variant for meaning
+3. **SHOULD** use appropriate size for context
+4. **MUST** have accessible labeling
+5. **ALWAYS** use semantic colors meaningfully
+6. **SHOULD** include icons when helpful
 
-### Durum Rozetleri
+### Variant Selection
 
-```tsx
-export const StatusBadges = () => {
-  return (
-    <View style={{ flexDirection: 'row', gap: 8 }}>
-      <AtomicBadge text="Aktif" variant="success" icon="checkmark-circle" />
-      <AtomicBadge text="Beklemede" variant="warning" icon="time" />
-      <AtomicBadge text="İptal" variant="error" icon="close-circle" />
-      <AtomicBadge text="Taslak" variant="secondary" icon="document" />
-    </View>
-  );
-};
-```
-
-### Kategori Etiketleri
+1. **primary**: General labels, categories
+2. **success**: Positive status (active, verified, complete)
+3. **warning**: Caution status (pending, review)
+4. **error**: Negative status (inactive, failed, error)
+5. **info**: Informational labels
+6. **secondary**: Neutral labels
 
-```tsx
-export const CategoryBadges = ({ categories }) => {
-  return (
-    <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-      {categories.map((category) => (
-        <AtomicBadge
-          key={category.id}
-          text={category.name}
-          variant="primary"
-          size="sm"
-        />
-      ))}
-    </View>
-  );
-};
-```
+### Size Guidelines
 
-### Sürüm Etiketi
+1. **sm**: Inline text, compact lists
+2. **md**: Default, most use cases
+3. **lg**: Emphasis, featured badges
 
-```tsx
-export const VersionBadge = ({ version }) => {
-  return (
-    <AtomicBadge
-      text={`v${version}`}
-      variant="info"
-      icon="code-slash"
-      size="sm"
-    />
-  );
-};
-```
+## Forbidden
 
-### Bildirim Sayısı
+❌ **NEVER** do these:
 
 ```tsx
-export const NotificationBadge = ({ count }) => {
-  return (
-    <View style={{ position: 'relative' }}>
-      <AtomicIcon name="notifications-outline" size="lg" />
-
-      {count > 0 && (
-        <View style={{ position: 'absolute', top: -4, right: -4 }}>
-          <AtomicBadge
-            text={count > 99 ? '99+' : count.toString()}
-            variant="error"
-            size="sm"
-          />
-        </View>
-      )}
-    </View>
-  );
-};
-```
+// ❌ No text
+<AtomicBadge /> {/* ❌ Missing required prop */}
 
-### Ürün Durumu
+// ❌ Wrong variant for meaning
+<AtomicBadge
+  text="Error"
+  variant="success" {/* ❌ Confusing */}
+/>
 
-```tsx
-export const ProductBadges = ({ product }) => {
-  return (
-    <View style={{ flexDirection: 'row', gap: 8 }}>
-      {product.isNew && (
-        <AtomicBadge
-          text="Yeni"
-          variant="success"
-          icon="sparkles"
-          size="sm"
-        />
-      )}
-
-      {product.isOnSale && (
-        <AtomicBadge
-          text="İndirim"
-          variant="error"
-          icon="pricetag"
-          size="sm"
-        />
-      )}
-
-      {product.isLimited && (
-        <AtomicBadge
-          text="Sınırlı"
-          variant="warning"
-          icon="time"
-          size="sm"
-        />
-      )}
-    </View>
-  );
-};
-```
+// ❌ Too large for context
+<AtomicText>
+  This is <AtomicBadge text="NEW" size="lg" /> item {/* ❌ Too large */}
+</AtomicText>
 
-### Kullanıcı Rolü
-
-```tsx
-export const RoleBadge = ({ role }) => {
-  const variants = {
-    admin: 'error',
-    moderator: 'warning',
-    user: 'primary',
-    guest: 'secondary',
-  };
-
-  return (
-    <AtomicBadge
-      text={role.toUpperCase()}
-      variant={variants[role]}
-      size="sm"
-    />
-  );
-};
+// ❌ Generic text
+<AtomicBadge text="Label" /> {/* ❌ Not helpful */}
 ```
 
-### Öncelik
-
-```tsx
-export const PriorityBadge = ({ priority }) => {
-  const config = {
-    low: { variant: 'secondary', icon: 'arrow-down' },
-    medium: { variant: 'info', icon: 'remove' },
-    high: { variant: 'warning', icon: 'arrow-up' },
-    urgent: { variant: 'error', icon: 'warning' },
-  };
-
-  const { variant, icon } = config[priority];
-
-  return (
-    <AtomicBadge
-      text={priority.toUpperCase()}
-      variant={variant}
-      icon={icon}
-      size="sm"
-    />
-  );
-};
-```
+## Best Practices
 
-### Fiyat Etiketi
+### Variant Selection
 
+✅ **DO**:
 ```tsx
-export const PriceBadge = ({ price, originalPrice }) => {
-  const discount = originalPrice
-    ? Math.round((1 - price / originalPrice) * 100)
-    : 0;
-
-  return (
-    <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
-      <AtomicText type="titleLarge" fontWeight="700">
-        ${price}
-      </AtomicText>
-
-      {discount > 0 && (
-        <AtomicBadge
-          text={`%${discount} İndirim`}
-          variant="error"
-          icon="pricetag"
-          size="sm"
-        />
-      )}
-    </View>
-  );
-};
+<AtomicBadge text="Active" variant="success" />
+<AtomicBadge text="Pending" variant="warning" />
+<AtomicBadge text="Inactive" variant="error" />
+<AtomicBadge text="Beta" variant="info" />
 ```
 
-### Listede Rozetler
-
+❌ **DON'T**:
 ```tsx
-export const ListItemWithBadges = ({ item }) => {
-  return (
-    <View style={{ padding: 16 }}>
-      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-        <View>
-          <AtomicText type="bodyLarge" fontWeight="600">
-            {item.title}
-          </AtomicText>
-          <AtomicText type="bodySmall" color="textSecondary">
-            {item.description}
-          </AtomicText>
-        </View>
-
-        <View style={{ flexDirection: 'row', gap: 4 }}>
-          {item.badges.map((badge) => (
-            <AtomicBadge
-              key={badge.id}
-              text={badge.text}
-              variant={badge.variant}
-              size="sm"
-            />
-          ))}
-        </View>
-      </View>
-    </View>
-  );
-};
+// ❌ Confusing variants
+<AtomicBadge text="Success" variant="error" />
 ```
 
-### Özellik Rozetleri
+### With Icons
 
+✅ **DO**:
 ```tsx
-export const FeatureBadges = ({ features }) => {
-  return (
-    <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-      {features.map((feature) => (
-        <AtomicBadge
-          key={feature.id}
-          text={feature.name}
-          variant="info"
-          icon={feature.icon}
-          size="sm"
-        />
-      ))}
-    </View>
-  );
-};
+<AtomicBadge
+  text="Verified"
+  variant="success"
+  icon="checkmark-circle"
+/>
 ```
 
-## Props
+## AI Coding Guidelines
 
-### AtomicBadgeProps
+### For AI Agents
 
-| Prop | Tip | Varsayılan | Açıklama |
-|------|-----|------------|----------|
-| `text` | `string` | - **(Zorunlu)** | Rozet metni |
-| `variant` | `BadgeVariant` | `'primary'` | Rozet variant'ı |
-| `size` | `BadgeSize` | `'md'` | Rozet boyutu |
-| `icon` | `IconName` | - | İkon ismi |
-| `iconPosition` | `'left' \| 'right'` | `'left'` | İkon konumu |
-| `style` | `StyleProp<ViewStyle>` | - | Özel stil |
-| `textStyle` | `StyleProp<TextStyle>` | - | Metin stili |
-| `testID` | `string` | - | Test ID'si |
+1. **Always provide text**:
+   ```tsx
+   // ✅ Good
+   <AtomicBadge text="New" />
 
-### BadgeVariant
+   // ❌ Bad
+   <AtomicBadge />
+   ```
 
-```typescript
-type BadgeVariant =
-  | 'primary'    // Ana renk
-  | 'secondary'  // İkincil renk
-  | 'success'    // Başarı rengi
-  | 'warning'    // Uyarı rengi
-  | 'error'      // Hata rengi
-  | 'info';      // Bilgi rengi
-```
+2. **Always use appropriate variant**:
+   ```tsx
+   // ✅ Good - meaningful variants
+   <AtomicBadge text="Active" variant="success" />
+   <AtomicBadge text="Failed" variant="error" />
 
-### BadgeSize
+   // ❌ Bad - confusing variants
+   <AtomicBadge text="Error" variant="success" />
+   ```
 
-```typescript
-type BadgeSize =
-  | 'sm'  // Small
-  | 'md'  // Medium (varsayılan)
-  | 'lg'; // Large
-```
+3. **Always use appropriate size**:
+   ```tsx
+   // ✅ Good - size matches context
+   <AtomicText>
+     <AtomicBadge text="New" size="sm" /> Item
+   </AtomicText>
 
-## Best Practices
+   // ❌ Bad - too large
+   <AtomicText>
+     <AtomicBadge text="New" size="lg" /> Item
+   </AtomicText>
+   ```
 
-### 1. Variant Seçimi
+### Common Patterns
 
+#### Status Badge
 ```tsx
-// Başarı durumu
-<AtomicBadge variant="success" />
-
-// Hata durumu
-<AtomicBadge variant="error" />
-
-// Uyarı durumu
-<AtomicBadge variant="warning" />
-
-// Bilgi durumu
-<AtomicBadge variant="info" />
+<AtomicBadge text="Active" variant="success" />
 ```
 
-### 2. Boyut Seçimi
-
+#### With Icon
 ```tsx
-// Yoğun içerik için
-<AtomicBadge size="sm" />
-
-// Normal kullanım
-<AtomicBadge size="md" />
-
-// Vurgu için
-<AtomicBadge size="lg" />
+<AtomicBadge
+  text="Verified"
+  variant="success"
+  icon="checkmark-circle"
+/>
 ```
 
-### 3. İkon Kullanımı
-
-```tsx
-// Durum göstergeleri
-<AtomicBadge icon="checkmark-circle" variant="success" />
-
-// Kategoriler
-<AtomicBadge icon="pricetag" variant="primary" />
-
-// Uyarılar
-<AtomicBadge icon="warning" variant="warning" />
-```
-
-## Erişilebilirlik
-
-AtomicBadge, tam erişilebilirlik desteği sunar:
+## Props Reference
 
-- ✅ Screen reader desteği
-- ✅ Semantic renkler
-- ✅ Touch uygun boyut
-- ✅ Test ID desteği
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `text` | `string` | Yes | - | Badge text |
+| `variant` | `BadgeVariant` | No | `'primary'` | Badge variant |
+| `size` | `'sm' \| 'md' \| 'lg'` | No | `'md'` | Badge size |
+| `icon` | `string` | No | - | Icon name |
 
-## Performans İpuçları
+## Accessibility
 
-1. **React.memo**: AtomicBadge zaten optimize edilmiş
-2. **Static Props**: Prop'ları sabit tutun
-3. **Listelerde**: `key` prop'unu kullanmayı unutmayın
+- ✅ Screen reader support
+- ✅ Semantic colors
+- ✅ Touch target size
 
-## İlgili Bileşenler
+## Related Components
 
-- [`AtomicChip`](./chip/README.md) - Chip bileşeni
-- [`AtomicIcon`](./AtomicIcon/README.md) - İkon bileşeni
-- [`AtomicText`](./AtomicText/README.md) - Metin bileşeni
+- [`AtomicChip`](./AtomicChip.README.md) - Interactive chips
+- [`AtomicIcon`](./AtomicIcon.README.md) - Icon component
+- [`AtomicText`](./AtomicText.README.md) - Text component
 
-## Lisans
+## License
 
 MIT