@umituz/react-native-design-system 2.6.86 → 2.6.87
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/atoms/AtomicAvatar.README.md +483 -0
- package/src/atoms/AtomicBadge.README.md +423 -0
- package/src/atoms/AtomicDatePicker.README.md +399 -0
- package/src/atoms/AtomicFab.README.md +421 -0
- package/src/atoms/AtomicSpinner.README.md +433 -0
- package/src/atoms/AtomicText.README.md +470 -0
- package/src/atoms/AtomicTextArea.README.md +352 -0
- package/src/molecules/ListItem.README.md +402 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umituz/react-native-design-system",
|
|
3
|
-
"version": "2.6.
|
|
3
|
+
"version": "2.6.87",
|
|
4
4
|
"description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
|
|
5
5
|
"main": "./src/index.ts",
|
|
6
6
|
"types": "./src/index.ts",
|
|
@@ -0,0 +1,483 @@
|
|
|
1
|
+
# AtomicAvatar
|
|
2
|
+
|
|
3
|
+
AtomicAvatar, kullanıcı profil resimlerini göstermek için tasarlanmış çok yönlü bir avatar bileşenidir. Resim yoksa ismin baş harflerini gösterir.
|
|
4
|
+
|
|
5
|
+
## Özellikler
|
|
6
|
+
|
|
7
|
+
- 🖼️ **Image Support**: URI veya require ile resim yükleme
|
|
8
|
+
- 🔤 **Initials Fallback**: Resim yoksa baş harfler
|
|
9
|
+
- 📏 **6 Size**: xs, sm, md, lg, xl, xxl
|
|
10
|
+
- 🎨 **Özelleştirilebilir**: Renk, border, stil
|
|
11
|
+
- ♿ **Erişilebilir**: Tam erişilebilirlik desteği
|
|
12
|
+
- 🌐 **Responsive**: Otomatik boyutlandırma
|
|
13
|
+
|
|
14
|
+
## Kurulum
|
|
15
|
+
|
|
16
|
+
```tsx
|
|
17
|
+
import { AtomicAvatar } from 'react-native-design-system';
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Temel Kullanım
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
import React from 'react';
|
|
24
|
+
import { View } from 'react-native';
|
|
25
|
+
import { AtomicAvatar } from 'react-native-design-system';
|
|
26
|
+
|
|
27
|
+
export const BasicExample = () => {
|
|
28
|
+
return (
|
|
29
|
+
<View style={{ padding: 16 }}>
|
|
30
|
+
{/* Resim ile */}
|
|
31
|
+
<AtomicAvatar
|
|
32
|
+
source={{ uri: 'https://example.com/avatar.jpg' }}
|
|
33
|
+
/>
|
|
34
|
+
|
|
35
|
+
{/* İsim ile (baş harfler) */}
|
|
36
|
+
<AtomicAvatar
|
|
37
|
+
name="Ahmet Yılmaz"
|
|
38
|
+
/>
|
|
39
|
+
</View>
|
|
40
|
+
);
|
|
41
|
+
};
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Boyutlar
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
<View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
|
|
48
|
+
{/* Extra Small */}
|
|
49
|
+
<AtomicAvatar
|
|
50
|
+
name="AY"
|
|
51
|
+
size="xs"
|
|
52
|
+
/>
|
|
53
|
+
|
|
54
|
+
{/* Small */}
|
|
55
|
+
<AtomicAvatar
|
|
56
|
+
name="Ahmet"
|
|
57
|
+
size="sm"
|
|
58
|
+
/>
|
|
59
|
+
|
|
60
|
+
{/* Medium (Varsayılan) */}
|
|
61
|
+
<AtomicAvatar
|
|
62
|
+
name="Ahmet"
|
|
63
|
+
size="md"
|
|
64
|
+
/>
|
|
65
|
+
|
|
66
|
+
{/* Large */}
|
|
67
|
+
<AtomicAvatar
|
|
68
|
+
name="Ahmet"
|
|
69
|
+
size="lg"
|
|
70
|
+
/>
|
|
71
|
+
|
|
72
|
+
{/* Extra Large */}
|
|
73
|
+
<AtomicAvatar
|
|
74
|
+
name="Ahmet"
|
|
75
|
+
size="xl"
|
|
76
|
+
/>
|
|
77
|
+
|
|
78
|
+
{/* Extra Extra Large */}
|
|
79
|
+
<AtomicAvatar
|
|
80
|
+
name="Ahmet"
|
|
81
|
+
size="xxl"
|
|
82
|
+
/>
|
|
83
|
+
</View>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## Resim ile
|
|
87
|
+
|
|
88
|
+
```tsx
|
|
89
|
+
{/* URI ile */}
|
|
90
|
+
<AtomicAvatar
|
|
91
|
+
source={{ uri: 'https://example.com/avatar.jpg' }}
|
|
92
|
+
/>
|
|
93
|
+
|
|
94
|
+
{/* Local resim */}
|
|
95
|
+
<AtomicAvatar
|
|
96
|
+
source={require('./assets/avatar.png')}
|
|
97
|
+
/>
|
|
98
|
+
|
|
99
|
+
{/* Custom size */}
|
|
100
|
+
<AtomicAvatar
|
|
101
|
+
source={{ uri: 'https://example.com/avatar.jpg' }}
|
|
102
|
+
customSize={80}
|
|
103
|
+
/>
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
## Baş Harfler ile
|
|
107
|
+
|
|
108
|
+
```tsx
|
|
109
|
+
{/* Tek isim */}
|
|
110
|
+
<AtomicAvatar name="Ahmet" /> {/* A */}
|
|
111
|
+
|
|
112
|
+
{/* İki isim */}
|
|
113
|
+
<AtomicAvatar name="Ahmet Yılmaz" /> {/* AY */}
|
|
114
|
+
|
|
115
|
+
{/* Üç isim */}
|
|
116
|
+
<AtomicAvatar name="Ahmet Can Yılmaz" /> {/* AC */}
|
|
117
|
+
|
|
118
|
+
{/* Boş isim */}
|
|
119
|
+
<AtomicAvatar /> {/* ? */}
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
## Custom Renkler
|
|
123
|
+
|
|
124
|
+
```tsx
|
|
125
|
+
<View style={{ flexDirection: 'row', gap: 8 }}>
|
|
126
|
+
{/* Custom background */}
|
|
127
|
+
<AtomicAvatar
|
|
128
|
+
name="Ahmet"
|
|
129
|
+
backgroundColor="#6366f1"
|
|
130
|
+
textColor="#ffffff"
|
|
131
|
+
/>
|
|
132
|
+
|
|
133
|
+
{/* Custom text */}
|
|
134
|
+
<AtomicAvatar
|
|
135
|
+
name="Ayşe"
|
|
136
|
+
backgroundColor="#ec4899"
|
|
137
|
+
textColor="#ffffff"
|
|
138
|
+
/>
|
|
139
|
+
</View>
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
## Border
|
|
143
|
+
|
|
144
|
+
```tsx
|
|
145
|
+
<View style={{ flexDirection: 'row', gap: 8 }}>
|
|
146
|
+
{/* Border width */}
|
|
147
|
+
<AtomicAvatar
|
|
148
|
+
name="Ahmet"
|
|
149
|
+
borderWidth={2}
|
|
150
|
+
borderColor="#6366f1"
|
|
151
|
+
/>
|
|
152
|
+
|
|
153
|
+
{/* Custom border */}
|
|
154
|
+
<AtomicAvatar
|
|
155
|
+
name="Ayşe"
|
|
156
|
+
borderWidth={3}
|
|
157
|
+
borderColor="#ec4899"
|
|
158
|
+
/>
|
|
159
|
+
</View>
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
## Custom Border Radius
|
|
163
|
+
|
|
164
|
+
```tsx
|
|
165
|
+
{/* Yuvarlak (varsayılan) */}
|
|
166
|
+
<AtomicAvatar
|
|
167
|
+
name="Ahmet"
|
|
168
|
+
size="lg"
|
|
169
|
+
/>
|
|
170
|
+
|
|
171
|
+
{/* Kare */}
|
|
172
|
+
<AtomicAvatar
|
|
173
|
+
name="Ahmet"
|
|
174
|
+
size="lg"
|
|
175
|
+
borderRadius={8}
|
|
176
|
+
/>
|
|
177
|
+
|
|
178
|
+
<!-- Köşeli yuvarlatılmış -->
|
|
179
|
+
<AtomicAvatar
|
|
180
|
+
name="Ahmet"
|
|
181
|
+
size="lg"
|
|
182
|
+
borderRadius={16}
|
|
183
|
+
/>
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
## Örnek Kullanımlar
|
|
187
|
+
|
|
188
|
+
### Kullanıcı Listesi
|
|
189
|
+
|
|
190
|
+
```tsx
|
|
191
|
+
export const UserList = ({ users }) => {
|
|
192
|
+
return (
|
|
193
|
+
<FlatList
|
|
194
|
+
data={users}
|
|
195
|
+
keyExtractor={(item) => item.id}
|
|
196
|
+
renderItem={({ item }) => (
|
|
197
|
+
<View style={{ flexDirection: 'row', alignItems: 'center', padding: 16 }}>
|
|
198
|
+
<AtomicAvatar
|
|
199
|
+
source={item.avatar ? { uri: item.avatar } : undefined}
|
|
200
|
+
name={item.name}
|
|
201
|
+
size="md"
|
|
202
|
+
style={{ marginRight: 12 }}
|
|
203
|
+
/>
|
|
204
|
+
|
|
205
|
+
<View>
|
|
206
|
+
<AtomicText type="bodyLarge" fontWeight="600">
|
|
207
|
+
{item.name}
|
|
208
|
+
</AtomicText>
|
|
209
|
+
<AtomicText type="bodySmall" color="textSecondary">
|
|
210
|
+
{item.email}
|
|
211
|
+
</AtomicText>
|
|
212
|
+
</View>
|
|
213
|
+
</View>
|
|
214
|
+
)}
|
|
215
|
+
/>
|
|
216
|
+
);
|
|
217
|
+
};
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
### Profil Başlığı
|
|
221
|
+
|
|
222
|
+
```tsx
|
|
223
|
+
export const ProfileHeader = ({ user }) => {
|
|
224
|
+
return (
|
|
225
|
+
<View style={{ alignItems: 'center', padding: 24 }}>
|
|
226
|
+
<AtomicAvatar
|
|
227
|
+
source={user.avatar ? { uri: user.avatar } : undefined}
|
|
228
|
+
name={user.name}
|
|
229
|
+
size="xxl"
|
|
230
|
+
borderWidth={3}
|
|
231
|
+
borderColor={tokens.colors.primary}
|
|
232
|
+
style={{ marginBottom: 16 }}
|
|
233
|
+
/>
|
|
234
|
+
|
|
235
|
+
<AtomicText type="headlineSmall">
|
|
236
|
+
{user.name}
|
|
237
|
+
</AtomicText>
|
|
238
|
+
|
|
239
|
+
<AtomicText type="bodyMedium" color="textSecondary">
|
|
240
|
+
@{user.username}
|
|
241
|
+
</AtomicText>
|
|
242
|
+
</View>
|
|
243
|
+
);
|
|
244
|
+
};
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
### Avatar Grubu
|
|
248
|
+
|
|
249
|
+
```tsx
|
|
250
|
+
export const AvatarGroup = ({ users, max = 3 }) => {
|
|
251
|
+
const visibleUsers = users.slice(0, max);
|
|
252
|
+
const remainingCount = users.length - max;
|
|
253
|
+
|
|
254
|
+
return (
|
|
255
|
+
<View style={{ flexDirection: 'row' }}>
|
|
256
|
+
{visibleUsers.map((user, index) => (
|
|
257
|
+
<AtomicAvatar
|
|
258
|
+
key={user.id}
|
|
259
|
+
source={user.avatar ? { uri: user.avatar } : undefined}
|
|
260
|
+
name={user.name}
|
|
261
|
+
size="sm"
|
|
262
|
+
style={{
|
|
263
|
+
marginLeft: index > 0 ? -8 : 0,
|
|
264
|
+
borderWidth: 2,
|
|
265
|
+
borderColor: tokens.colors.backgroundPrimary,
|
|
266
|
+
}}
|
|
267
|
+
/>
|
|
268
|
+
))}
|
|
269
|
+
|
|
270
|
+
{remainingCount > 0 && (
|
|
271
|
+
<View
|
|
272
|
+
style={{
|
|
273
|
+
width: tokens.avatarSizes.sm,
|
|
274
|
+
height: tokens.avatarSizes.sm,
|
|
275
|
+
borderRadius: tokens.avatarSizes.sm / 2,
|
|
276
|
+
backgroundColor: tokens.colors.surfaceVariant,
|
|
277
|
+
justifyContent: 'center',
|
|
278
|
+
alignItems: 'center',
|
|
279
|
+
marginLeft: -8,
|
|
280
|
+
borderWidth: 2,
|
|
281
|
+
borderColor: tokens.colors.backgroundPrimary,
|
|
282
|
+
}}
|
|
283
|
+
>
|
|
284
|
+
<AtomicText type="labelSmall">
|
|
285
|
+
+{remainingCount}
|
|
286
|
+
</AtomicText>
|
|
287
|
+
</View>
|
|
288
|
+
)}
|
|
289
|
+
</View>
|
|
290
|
+
);
|
|
291
|
+
};
|
|
292
|
+
```
|
|
293
|
+
|
|
294
|
+
### Yorum Bileşeni
|
|
295
|
+
|
|
296
|
+
```tsx
|
|
297
|
+
export const Comment = ({ comment }) => {
|
|
298
|
+
return (
|
|
299
|
+
<View style={{ flexDirection: 'row', padding: 16 }}>
|
|
300
|
+
<AtomicAvatar
|
|
301
|
+
source={comment.author.avatar ? { uri: comment.author.avatar } : undefined}
|
|
302
|
+
name={comment.author.name}
|
|
303
|
+
size="sm"
|
|
304
|
+
style={{ marginRight: 12 }}
|
|
305
|
+
/>
|
|
306
|
+
|
|
307
|
+
<View style={{ flex: 1 }}>
|
|
308
|
+
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 4 }}>
|
|
309
|
+
<AtomicText type="bodyMedium" fontWeight="600">
|
|
310
|
+
{comment.author.name}
|
|
311
|
+
</AtomicText>
|
|
312
|
+
<AtomicText type="bodySmall" color="textTertiary" style={{ marginLeft: 8 }}>
|
|
313
|
+
{comment.timestamp}
|
|
314
|
+
</AtomicText>
|
|
315
|
+
</View>
|
|
316
|
+
|
|
317
|
+
<AtomicText type="bodyMedium">
|
|
318
|
+
{comment.text}
|
|
319
|
+
</AtomicText>
|
|
320
|
+
</View>
|
|
321
|
+
</View>
|
|
322
|
+
);
|
|
323
|
+
};
|
|
324
|
+
```
|
|
325
|
+
|
|
326
|
+
### Navigasyon
|
|
327
|
+
|
|
328
|
+
```tsx
|
|
329
|
+
export const ProfileTab = ({ user }) => {
|
|
330
|
+
return (
|
|
331
|
+
<Pressable
|
|
332
|
+
style={{ flexDirection: 'row', alignItems: 'center', padding: 16 }}
|
|
333
|
+
onPress={() => navigation.navigate('Profile', { userId: user.id })}
|
|
334
|
+
>
|
|
335
|
+
<AtomicAvatar
|
|
336
|
+
source={user.avatar ? { uri: user.avatar } : undefined}
|
|
337
|
+
name={user.name}
|
|
338
|
+
size="md"
|
|
339
|
+
/>
|
|
340
|
+
|
|
341
|
+
<View style={{ marginLeft: 12, flex: 1 }}>
|
|
342
|
+
<AtomicText type="bodyLarge" fontWeight="600">
|
|
343
|
+
{user.name}
|
|
344
|
+
</AtomicText>
|
|
345
|
+
<AtomicText type="bodySmall" color="textSecondary">
|
|
346
|
+
Profili görüntüle
|
|
347
|
+
</AtomicText>
|
|
348
|
+
</View>
|
|
349
|
+
|
|
350
|
+
<AtomicIcon name="chevron-forward" size="sm" />
|
|
351
|
+
</Pressable>
|
|
352
|
+
);
|
|
353
|
+
};
|
|
354
|
+
```
|
|
355
|
+
|
|
356
|
+
### Online Durumu
|
|
357
|
+
|
|
358
|
+
```tsx
|
|
359
|
+
export const AvatarWithStatus = ({ user, isOnline }) => {
|
|
360
|
+
return (
|
|
361
|
+
<View style={{ position: 'relative' }}>
|
|
362
|
+
<AtomicAvatar
|
|
363
|
+
source={user.avatar ? { uri: user.avatar } : undefined}
|
|
364
|
+
name={user.name}
|
|
365
|
+
size="lg"
|
|
366
|
+
/>
|
|
367
|
+
|
|
368
|
+
{isOnline && (
|
|
369
|
+
<View
|
|
370
|
+
style={{
|
|
371
|
+
position: 'absolute',
|
|
372
|
+
bottom: 0,
|
|
373
|
+
right: 0,
|
|
374
|
+
width: 16,
|
|
375
|
+
height: 16,
|
|
376
|
+
borderRadius: 8,
|
|
377
|
+
backgroundColor: tokens.colors.success,
|
|
378
|
+
borderWidth: 2,
|
|
379
|
+
borderColor: tokens.colors.backgroundPrimary,
|
|
380
|
+
}}
|
|
381
|
+
/>
|
|
382
|
+
)}
|
|
383
|
+
</View>
|
|
384
|
+
);
|
|
385
|
+
};
|
|
386
|
+
```
|
|
387
|
+
|
|
388
|
+
## Props
|
|
389
|
+
|
|
390
|
+
### AtomicAvatarProps
|
|
391
|
+
|
|
392
|
+
| Prop | Tip | Varsayılan | Açıklama |
|
|
393
|
+
|------|-----|------------|----------|
|
|
394
|
+
| `source` | `ImageSourcePropType` | - | Resim kaynağı |
|
|
395
|
+
| `name` | `string` | - | Kullanıcı ismi (baş harfler için) |
|
|
396
|
+
| `size` | `AvatarSize` | `'md'` | Avatar boyutu |
|
|
397
|
+
| `customSize` | `number` | - | Özel boyut (px) |
|
|
398
|
+
| `backgroundColor` | `string` | - | Arka plan rengi |
|
|
399
|
+
| `textColor` | `string` | - | Metin rengi |
|
|
400
|
+
| `borderRadius` | `number` | - | Köşe yarıçapı |
|
|
401
|
+
| `borderWidth` | `number` | `0` | Çerçeve kalınlığı |
|
|
402
|
+
| `borderColor` | `string` | - | Çerçeve rengi |
|
|
403
|
+
| `style` | `StyleProp<ViewStyle>` | - | Özel stil |
|
|
404
|
+
| `imageStyle` | `StyleProp<ImageStyle>` | - | Resim stili |
|
|
405
|
+
| `testID` | `string` | - | Test ID'si |
|
|
406
|
+
|
|
407
|
+
### AvatarSize
|
|
408
|
+
|
|
409
|
+
```typescript
|
|
410
|
+
type AvatarSize =
|
|
411
|
+
| 'xs' // Extra small
|
|
412
|
+
| 'sm' // Small
|
|
413
|
+
| 'md' // Medium (varsayılan)
|
|
414
|
+
| 'lg' // Large
|
|
415
|
+
| 'xl' // Extra large
|
|
416
|
+
| 'xxl'; // Extra extra large
|
|
417
|
+
```
|
|
418
|
+
|
|
419
|
+
## Best Practices
|
|
420
|
+
|
|
421
|
+
### 1. Boyut Seçimi
|
|
422
|
+
|
|
423
|
+
```tsx
|
|
424
|
+
// Küçük alanlar için
|
|
425
|
+
<AtomicAvatar size="xs" />
|
|
426
|
+
|
|
427
|
+
// Liste elemanları için
|
|
428
|
+
<AtomicAvatar size="sm" />
|
|
429
|
+
|
|
430
|
+
// Normal kullanım
|
|
431
|
+
<AtomicAvatar size="md" />
|
|
432
|
+
|
|
433
|
+
// Vurgu için
|
|
434
|
+
<AtomicAvatar size="lg" />
|
|
435
|
+
|
|
436
|
+
// Profil sayfası için
|
|
437
|
+
<AtomicAvatar size="xxl" />
|
|
438
|
+
```
|
|
439
|
+
|
|
440
|
+
### 2. Initials Kullanımı
|
|
441
|
+
|
|
442
|
+
```tsx
|
|
443
|
+
// İsim varsa
|
|
444
|
+
<AtomicAvatar name="Ahmet Yılmaz" /> {/* AY */}
|
|
445
|
+
|
|
446
|
+
// İsim yoksa
|
|
447
|
+
<AtomicAvatar /> {/* ? */}
|
|
448
|
+
```
|
|
449
|
+
|
|
450
|
+
### 3. Resim Yükleme
|
|
451
|
+
|
|
452
|
+
```tsx
|
|
453
|
+
// URI ile
|
|
454
|
+
<AtomicAvatar source={{ uri: avatarUrl }} />
|
|
455
|
+
|
|
456
|
+
// Local resim
|
|
457
|
+
<AtomicAvatar source={require('./avatar.png')} />
|
|
458
|
+
```
|
|
459
|
+
|
|
460
|
+
## Erişilebilirlik
|
|
461
|
+
|
|
462
|
+
AtomicAvatar, tam erişilebilirlik desteği sunar:
|
|
463
|
+
|
|
464
|
+
- ✅ Screen reader desteği
|
|
465
|
+
- ✅ Accessibility label
|
|
466
|
+
- ✅ Semantic role (image)
|
|
467
|
+
- ✅ Test ID desteği
|
|
468
|
+
|
|
469
|
+
## Performans İpuçları
|
|
470
|
+
|
|
471
|
+
1. **Image Caching**: Resimleri cache'leyin
|
|
472
|
+
2. **Lazy Loading**: Uzun listelerde lazy load kullanın
|
|
473
|
+
3. **Resize**: Resimleri doğru boyutta yükleyin
|
|
474
|
+
|
|
475
|
+
## İlgili Bileşenler
|
|
476
|
+
|
|
477
|
+
- [`AvatarGroup`](../../molecules/avatar/AvatarGroup/README.md) - Avatar grubu
|
|
478
|
+
- [`AtomicCard`](./AtomicCard.README.md) - Kart bileşeni
|
|
479
|
+
- [`AtomicIcon`](./AtomicIcon/README.md) - İkon bileşeni
|
|
480
|
+
|
|
481
|
+
## Lisans
|
|
482
|
+
|
|
483
|
+
MIT
|