@umituz/react-native-design-system 2.6.85 → 2.6.86
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 -3
- package/src/atoms/AtomicCard.README.md +337 -0
- package/src/atoms/AtomicIcon.README.md +349 -0
- package/src/atoms/GlassView/GlassView.tsx +28 -17
- package/src/atoms/GlassView/README.md +521 -0
- package/src/atoms/button/README.md +363 -0
- package/src/atoms/chip/README.md +376 -0
- package/src/atoms/input/README.md +342 -0
- package/src/atoms/picker/README.md +412 -0
- package/src/molecules/BaseModal.README.md +435 -0
- package/src/molecules/FormField.README.md +486 -0
- package/src/molecules/GlowingCard/README.md +448 -0
- package/src/molecules/SearchBar/README.md +533 -0
|
@@ -0,0 +1,448 @@
|
|
|
1
|
+
# GlowingCard
|
|
2
|
+
|
|
3
|
+
GlowingCard, neon benzeri parlama efekti ile özel bir kart bileşenidir. Özellikle vurgulanması gereken öğeler için idealdir.
|
|
4
|
+
|
|
5
|
+
## Özellikler
|
|
6
|
+
|
|
7
|
+
- ✨ **Neon Glow Efekti**: Parlama gölgesi efekti
|
|
8
|
+
- 🎨 **Özelleştirilebilir Renk**: İstediğiniz renk
|
|
9
|
+
- 💡 **Ayarlabilir Yoğunluk**: 0-1 arası yoğunluk
|
|
10
|
+
- 👆 **Pressable**: Tıklanabilir kart desteği
|
|
11
|
+
- 🎯 **Çerçeve**: Renkli çerçeve
|
|
12
|
+
- ♿ **Erişilebilir**: Tam erişilebilirlik desteği
|
|
13
|
+
|
|
14
|
+
## Kurulum
|
|
15
|
+
|
|
16
|
+
```tsx
|
|
17
|
+
import { GlowingCard } from 'react-native-design-system';
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Temel Kullanım
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
import React from 'react';
|
|
24
|
+
import { View, Text } from 'react-native';
|
|
25
|
+
import { GlowingCard } from 'react-native-design-system';
|
|
26
|
+
|
|
27
|
+
export const BasicExample = () => {
|
|
28
|
+
return (
|
|
29
|
+
<View style={{ padding: 16 }}>
|
|
30
|
+
<GlowingCard>
|
|
31
|
+
<Text style={{ padding: 24 }}>Parlak Kart</Text>
|
|
32
|
+
</GlowingCard>
|
|
33
|
+
</View>
|
|
34
|
+
);
|
|
35
|
+
};
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Basic Glow
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
<GlowingCard>
|
|
42
|
+
<View style={{ padding: 24 }}>
|
|
43
|
+
<Text>Varsayılan parlama efekti</Text>
|
|
44
|
+
</View>
|
|
45
|
+
</GlowingCard>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Custom Glow Color
|
|
49
|
+
|
|
50
|
+
```tsx
|
|
51
|
+
<GlowingCard glowColor="#6366f1">
|
|
52
|
+
<View style={{ padding: 24 }}>
|
|
53
|
+
<Text>İndigo parlama</Text>
|
|
54
|
+
</View>
|
|
55
|
+
</GlowingCard>
|
|
56
|
+
|
|
57
|
+
<GlowingCard glowColor="#10b981">
|
|
58
|
+
<View style={{ padding: 24 }}>
|
|
59
|
+
<Text>Yeşil parlama</Text>
|
|
60
|
+
</View>
|
|
61
|
+
</GlowingCard>
|
|
62
|
+
|
|
63
|
+
<GlowingCard glowColor="#f59e0b">
|
|
64
|
+
<View style={{ padding: 24 }}>
|
|
65
|
+
<Text>Turuncu parlama</Text>
|
|
66
|
+
</View>
|
|
67
|
+
</GlowingCard>
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## Intensity
|
|
71
|
+
|
|
72
|
+
```tsx
|
|
73
|
+
<View style={{ gap: 16 }}>
|
|
74
|
+
{/* Hafif parlama */}
|
|
75
|
+
<GlowingCard intensity={0.3}>
|
|
76
|
+
<View style={{ padding: 24 }}>
|
|
77
|
+
<Text>Hafif Parlama</Text>
|
|
78
|
+
</View>
|
|
79
|
+
</GlowingCard>
|
|
80
|
+
|
|
81
|
+
{/* Orta parlama */}
|
|
82
|
+
<GlowingCard intensity={0.6}>
|
|
83
|
+
<View style={{ padding: 24 }}>
|
|
84
|
+
<Text>Orta Parlama</Text>
|
|
85
|
+
</View>
|
|
86
|
+
</GlowingCard>
|
|
87
|
+
|
|
88
|
+
{/* Tam parlama (Varsayılan) */}
|
|
89
|
+
<GlowingCard intensity={1.0}>
|
|
90
|
+
<View style={{ padding: 24 }}>
|
|
91
|
+
<Text>Tam Parlama</Text>
|
|
92
|
+
</View>
|
|
93
|
+
</GlowingCard>
|
|
94
|
+
</View>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
## Pressable
|
|
98
|
+
|
|
99
|
+
```tsx
|
|
100
|
+
<GlowingCard
|
|
101
|
+
glowColor="#6366f1"
|
|
102
|
+
onPress={() => console.log('Tıklandı!')}
|
|
103
|
+
>
|
|
104
|
+
<View style={{ padding: 24 }}>
|
|
105
|
+
<Text>Tıklanabilir Parlak Kart</Text>
|
|
106
|
+
</View>
|
|
107
|
+
</GlowingCard>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## Custom Style
|
|
111
|
+
|
|
112
|
+
```tsx
|
|
113
|
+
<GlowingCard
|
|
114
|
+
glowColor="#ec4899"
|
|
115
|
+
intensity={0.8}
|
|
116
|
+
style={{
|
|
117
|
+
padding: 32,
|
|
118
|
+
backgroundColor: '#1e1e1e',
|
|
119
|
+
}}
|
|
120
|
+
>
|
|
121
|
+
<Text style={{ color: '#ffffff' }}>
|
|
122
|
+
Özel Stilli Parlak Kart
|
|
123
|
+
</Text>
|
|
124
|
+
</GlowingCard>
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
## Örnek Kullanımlar
|
|
128
|
+
|
|
129
|
+
### Öne Çıkan Kart
|
|
130
|
+
|
|
131
|
+
```tsx
|
|
132
|
+
export const FeaturedCard = () => {
|
|
133
|
+
return (
|
|
134
|
+
<GlowingCard glowColor="#6366f1" intensity={0.8}>
|
|
135
|
+
<View style={{ padding: 24 }}>
|
|
136
|
+
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 16 }}>
|
|
137
|
+
<AtomicIcon name="star" size="lg" color="#6366f1" />
|
|
138
|
+
<Text style={{ marginLeft: 8, fontWeight: '600' }}>
|
|
139
|
+
Öne Çıkan
|
|
140
|
+
</Text>
|
|
141
|
+
</View>
|
|
142
|
+
|
|
143
|
+
<Text style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 8 }}>
|
|
144
|
+
Özel İçerik
|
|
145
|
+
</Text>
|
|
146
|
+
|
|
147
|
+
<Text style={{ color: 'gray' }}>
|
|
148
|
+
Bu içerik özellikle vurgulanmıştır.
|
|
149
|
+
</Text>
|
|
150
|
+
</View>
|
|
151
|
+
</GlowingCard>
|
|
152
|
+
);
|
|
153
|
+
};
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
### Premium Ürün Kartı
|
|
157
|
+
|
|
158
|
+
```tsx
|
|
159
|
+
export const PremiumCard = ({ product }) => {
|
|
160
|
+
return (
|
|
161
|
+
<GlowingCard
|
|
162
|
+
glowColor="#f59e0b"
|
|
163
|
+
intensity={0.9}
|
|
164
|
+
onPress={() => navigate('ProductDetail', { id: product.id })}
|
|
165
|
+
>
|
|
166
|
+
<View style={{ padding: 24 }}>
|
|
167
|
+
<View style={{ alignItems: 'center', marginBottom: 16 }}>
|
|
168
|
+
<AtomicIcon name="diamond" size="xl" color="#f59e0b" />
|
|
169
|
+
<Text style={{ marginTop: 8, fontWeight: '600', color: '#f59e0b' }}>
|
|
170
|
+
Premium
|
|
171
|
+
</Text>
|
|
172
|
+
</View>
|
|
173
|
+
|
|
174
|
+
<Text style={{ fontSize: 18, fontWeight: 'bold', textAlign: 'center' }}>
|
|
175
|
+
{product.name}
|
|
176
|
+
</Text>
|
|
177
|
+
|
|
178
|
+
<Text style={{ marginTop: 8, textAlign: 'center', color: 'gray' }}>
|
|
179
|
+
{product.description}
|
|
180
|
+
</Text>
|
|
181
|
+
|
|
182
|
+
<Text style={{ marginTop: 16, fontSize: 24, fontWeight: 'bold', textAlign: 'center' }}>
|
|
183
|
+
${product.price}
|
|
184
|
+
</Text>
|
|
185
|
+
</View>
|
|
186
|
+
</GlowingCard>
|
|
187
|
+
);
|
|
188
|
+
};
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
### Başarı Kartı
|
|
192
|
+
|
|
193
|
+
```tsx
|
|
194
|
+
export const SuccessCard = ({ achievement }) => {
|
|
195
|
+
return (
|
|
196
|
+
<GlowingCard glowColor="#10b981" intensity={0.7}>
|
|
197
|
+
<View style={{ padding: 24, alignItems: 'center' }}>
|
|
198
|
+
<View
|
|
199
|
+
style={{
|
|
200
|
+
width: 80,
|
|
201
|
+
height: 80,
|
|
202
|
+
borderRadius: 40,
|
|
203
|
+
backgroundColor: '#d4edda',
|
|
204
|
+
justifyContent: 'center',
|
|
205
|
+
alignItems: 'center',
|
|
206
|
+
marginBottom: 16,
|
|
207
|
+
}}
|
|
208
|
+
>
|
|
209
|
+
<AtomicIcon name="trophy" size="xl" color="#10b981" />
|
|
210
|
+
</View>
|
|
211
|
+
|
|
212
|
+
<Text style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 8 }}>
|
|
213
|
+
Başarı!
|
|
214
|
+
</Text>
|
|
215
|
+
|
|
216
|
+
<Text style={{ textAlign: 'center', color: 'gray' }}>
|
|
217
|
+
{achievement.title}
|
|
218
|
+
</Text>
|
|
219
|
+
|
|
220
|
+
<Text style={{ marginTop: 8, textAlign: 'center', fontSize: 14 }}>
|
|
221
|
+
{achievement.description}
|
|
222
|
+
</Text>
|
|
223
|
+
</View>
|
|
224
|
+
</GlowingCard>
|
|
225
|
+
);
|
|
226
|
+
};
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
### Uyarı Kartı
|
|
230
|
+
|
|
231
|
+
```tsx
|
|
232
|
+
export const WarningCard = () => {
|
|
233
|
+
return (
|
|
234
|
+
<GlowingCard glowColor="#f59e0b" intensity={0.8}>
|
|
235
|
+
<View style={{ padding: 24 }}>
|
|
236
|
+
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
237
|
+
<AtomicIcon name="warning" size="lg" color="#f59e0b" />
|
|
238
|
+
<View style={{ marginLeft: 12, flex: 1 }}>
|
|
239
|
+
<Text style={{ fontWeight: '600', marginBottom: 4 }}>
|
|
240
|
+
Dikkat
|
|
241
|
+
</Text>
|
|
242
|
+
<Text style={{ fontSize: 14, color: 'gray' }}>
|
|
243
|
+
Bu işlem geri alınamaz. Devam etmek istediğinizden emin misiniz?
|
|
244
|
+
</Text>
|
|
245
|
+
</View>
|
|
246
|
+
</View>
|
|
247
|
+
</View>
|
|
248
|
+
</GlowingCard>
|
|
249
|
+
);
|
|
250
|
+
};
|
|
251
|
+
```
|
|
252
|
+
|
|
253
|
+
### Hata Kartı
|
|
254
|
+
|
|
255
|
+
```tsx
|
|
256
|
+
export const ErrorCard = ({ error }) => {
|
|
257
|
+
return (
|
|
258
|
+
<GlowingCard glowColor="#ef4444" intensity={0.7}>
|
|
259
|
+
<View style={{ padding: 24 }}>
|
|
260
|
+
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
261
|
+
<AtomicIcon name="close-circle" size="lg" color="#ef4444" />
|
|
262
|
+
<View style={{ marginLeft: 12, flex: 1 }}>
|
|
263
|
+
<Text style={{ fontWeight: '600', marginBottom: 4 }}>
|
|
264
|
+
Hata Oluştu
|
|
265
|
+
</Text>
|
|
266
|
+
<Text style={{ fontSize: 14, color: 'gray' }}>
|
|
267
|
+
{error.message}
|
|
268
|
+
</Text>
|
|
269
|
+
</View>
|
|
270
|
+
</View>
|
|
271
|
+
</View>
|
|
272
|
+
</GlowingCard>
|
|
273
|
+
);
|
|
274
|
+
};
|
|
275
|
+
```
|
|
276
|
+
|
|
277
|
+
### Bilgi Kartı
|
|
278
|
+
|
|
279
|
+
```tsx
|
|
280
|
+
export const InfoCard = () => {
|
|
281
|
+
return (
|
|
282
|
+
<GlowingCard glowColor="#3b82f6" intensity={0.6}>
|
|
283
|
+
<View style={{ padding: 24 }}>
|
|
284
|
+
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
285
|
+
<AtomicIcon name="information-circle" size="lg" color="#3b82f6" />
|
|
286
|
+
<View style={{ marginLeft: 12, flex: 1 }}>
|
|
287
|
+
<Text style={{ fontWeight: '600', marginBottom: 4 }}>
|
|
288
|
+
Bilgi
|
|
289
|
+
</Text>
|
|
290
|
+
<Text style={{ fontSize: 14, color: 'gray' }}>
|
|
291
|
+
Bu özellik premium kullanıcılar için geçerlidir.
|
|
292
|
+
</Text>
|
|
293
|
+
</View>
|
|
294
|
+
</View>
|
|
295
|
+
</View>
|
|
296
|
+
</GlowingCard>
|
|
297
|
+
);
|
|
298
|
+
};
|
|
299
|
+
```
|
|
300
|
+
|
|
301
|
+
### Kullanıcı Profil Kartı
|
|
302
|
+
|
|
303
|
+
```tsx
|
|
304
|
+
export const ProfileCard = ({ user }) => {
|
|
305
|
+
return (
|
|
306
|
+
<GlowingCard
|
|
307
|
+
glowColor="#8b5cf6"
|
|
308
|
+
intensity={0.7}
|
|
309
|
+
onPress={() => navigate('Profile', { id: user.id })}
|
|
310
|
+
>
|
|
311
|
+
<View style={{ padding: 24, alignItems: 'center' }}>
|
|
312
|
+
<Image
|
|
313
|
+
source={{ uri: user.avatar }}
|
|
314
|
+
style={{ width: 80, height: 80, borderRadius: 40, marginBottom: 16 }}
|
|
315
|
+
/>
|
|
316
|
+
|
|
317
|
+
<Text style={{ fontSize: 20, fontWeight: 'bold' }}>
|
|
318
|
+
{user.name}
|
|
319
|
+
</Text>
|
|
320
|
+
|
|
321
|
+
<Text style={{ color: 'gray', marginBottom: 16 }}>
|
|
322
|
+
@{user.username}
|
|
323
|
+
</Text>
|
|
324
|
+
|
|
325
|
+
<View style={{ flexDirection: 'row', gap: 24 }}>
|
|
326
|
+
<View style={{ alignItems: 'center' }}>
|
|
327
|
+
<Text style={{ fontSize: 18, fontWeight: 'bold' }}>
|
|
328
|
+
{user.posts}
|
|
329
|
+
</Text>
|
|
330
|
+
<Text style={{ fontSize: 12, color: 'gray' }}>Gönderi</Text>
|
|
331
|
+
</View>
|
|
332
|
+
|
|
333
|
+
<View style={{ alignItems: 'center' }}>
|
|
334
|
+
<Text style={{ fontSize: 18, fontWeight: 'bold' }}>
|
|
335
|
+
{user.followers}
|
|
336
|
+
</Text>
|
|
337
|
+
<Text style={{ fontSize: 12, color: 'gray' }}>Takipçi</Text>
|
|
338
|
+
</View>
|
|
339
|
+
|
|
340
|
+
<View style={{ alignItems: 'center' }}>
|
|
341
|
+
<Text style={{ fontSize: 18, fontWeight: 'bold' }}>
|
|
342
|
+
{user.following}
|
|
343
|
+
</Text>
|
|
344
|
+
<Text style={{ fontSize: 12, color: 'gray' }}>Takip</Text>
|
|
345
|
+
</View>
|
|
346
|
+
</View>
|
|
347
|
+
</View>
|
|
348
|
+
</GlowingCard>
|
|
349
|
+
);
|
|
350
|
+
};
|
|
351
|
+
```
|
|
352
|
+
|
|
353
|
+
## Props
|
|
354
|
+
|
|
355
|
+
### GlowingCardProps
|
|
356
|
+
|
|
357
|
+
| Prop | Tip | Varsayılan | Açıklama |
|
|
358
|
+
|------|-----|------------|----------|
|
|
359
|
+
| `children` | `ReactNode` | - **(Zorunlu)** | Kart içeriği |
|
|
360
|
+
| `glowColor` | `string` | Primary color | Parlama rengi |
|
|
361
|
+
| `intensity` | `number` | `1` | Parlama yoğunluğu (0-1) |
|
|
362
|
+
| `onPress` | `(event: GestureResponderEvent) => void` | - | Tıklama olayı |
|
|
363
|
+
| `style` | `StyleProp<ViewStyle>` | - | Özel stil |
|
|
364
|
+
| `testID` | `string` | - | Test ID'si |
|
|
365
|
+
|
|
366
|
+
## Stil Özelleştirme
|
|
367
|
+
|
|
368
|
+
```tsx
|
|
369
|
+
<GlowingCard
|
|
370
|
+
glowColor="#ec4899"
|
|
371
|
+
intensity={0.8}
|
|
372
|
+
style={{
|
|
373
|
+
padding: 32,
|
|
374
|
+
backgroundColor: '#1e1e1e',
|
|
375
|
+
borderWidth: 2,
|
|
376
|
+
}}
|
|
377
|
+
>
|
|
378
|
+
{/* İçerik */}
|
|
379
|
+
</GlowingCard>
|
|
380
|
+
```
|
|
381
|
+
|
|
382
|
+
## Best Practices
|
|
383
|
+
|
|
384
|
+
### 1. Renk Seçimi
|
|
385
|
+
|
|
386
|
+
```tsx
|
|
387
|
+
// Marka rengi
|
|
388
|
+
<GlowingCard glowColor="#6366f1">
|
|
389
|
+
|
|
390
|
+
// Başarı durumu
|
|
391
|
+
<GlowingCard glowColor="#10b981">
|
|
392
|
+
|
|
393
|
+
// Hata durumu
|
|
394
|
+
<GlowingCard glowColor="#ef4444">
|
|
395
|
+
|
|
396
|
+
// Uyarı durumu
|
|
397
|
+
<GlowingCard glowColor="#f59e0b">
|
|
398
|
+
```
|
|
399
|
+
|
|
400
|
+
### 2. Yoğunluk
|
|
401
|
+
|
|
402
|
+
```tsx
|
|
403
|
+
// Hafif vurgu
|
|
404
|
+
<GlowingCard intensity={0.3}>
|
|
405
|
+
|
|
406
|
+
// Orta vurgu
|
|
407
|
+
<GlowingCard intensity={0.6}>
|
|
408
|
+
|
|
409
|
+
// Güçlü vurgu
|
|
410
|
+
<GlowingCard intensity={1.0}>
|
|
411
|
+
```
|
|
412
|
+
|
|
413
|
+
### 3. Pressable Kullanımı
|
|
414
|
+
|
|
415
|
+
```tsx
|
|
416
|
+
// İnteraktif kart
|
|
417
|
+
<GlowingCard
|
|
418
|
+
glowColor="#6366f1"
|
|
419
|
+
onPress={handlePress}
|
|
420
|
+
>
|
|
421
|
+
{/* Tıklama efekti ile */}
|
|
422
|
+
</GlowingCard>
|
|
423
|
+
```
|
|
424
|
+
|
|
425
|
+
## Erişilebilirlik
|
|
426
|
+
|
|
427
|
+
GlowingCard, tam erişilebilirlik desteği sunar:
|
|
428
|
+
|
|
429
|
+
- ✅ Touch uygun boyut
|
|
430
|
+
- ✅ Screen reader desteği
|
|
431
|
+
- ✅ Test ID desteği
|
|
432
|
+
- ✅ Press state feedback
|
|
433
|
+
|
|
434
|
+
## Performans İpuçları
|
|
435
|
+
|
|
436
|
+
1. **Shadow Performance**: Çok sayıda kart kullanırken dikkatli olun
|
|
437
|
+
2. **Intensity**: Düşük yoğunluk daha performanslıdır
|
|
438
|
+
3. **Re-renders**: Gereksiz re-render'lardan kaçının
|
|
439
|
+
|
|
440
|
+
## İlgili Bileşenler
|
|
441
|
+
|
|
442
|
+
- [`AtomicCard`](../../atoms/AtomicCard.README.md) - Basit kart bileşeni
|
|
443
|
+
- [`GlassView`](../../atoms/GlassView/README.md) - Glassmorphism efekti
|
|
444
|
+
- [`MediaCard`](../media-card/README.md) - Medya kartı
|
|
445
|
+
|
|
446
|
+
## Lisans
|
|
447
|
+
|
|
448
|
+
MIT
|