nonamecartoon 0.3.0 → 0.3.9

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.
Files changed (5) hide show
  1. package/README.md +408 -84
  2. package/dist/nonamecartoon.css +1 -1
  3. package/dist/nonamecartoon.js +6540 -4313
  4. package/dist/nonamecartoon.umd.cjs +36 -19
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -1,138 +1,462 @@
1
- # nonamecartoon
1
+ # 🎨 nonamecartoon
2
2
 
3
- 🎨 **Manga web siteleri için tasarlanmış, cartoon/comic-book tarzında React UI kütüphanesi.**
3
+ > Cartoon/Comic-book style React UI library for manga & webtoon websites
4
4
 
5
5
  [![npm version](https://img.shields.io/npm/v/nonamecartoon.svg)](https://www.npmjs.com/package/nonamecartoon)
6
- [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
7
- [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
8
6
 
9
- ## ✨ Özellikler
10
-
11
- - 🎭 **68+ Benzersiz Bileşen** - Core, Layout, Manga, Social, Advanced
12
- - 🎨 **76 Cartoon İkon** - Animasyonlu ToonIcon sistemi
13
- - 🖼️ **9 AI Pattern** - Profesyonel profil arka planları (v0.2.0)
14
- - 🌙 **Dark/Light Tema** - Sistem teması desteği
15
- - 📱 **Responsive** - Mobil-first tasarım
16
- - 🔧 **TypeScript** - Tam tip desteği
17
-
18
- ## 📦 Kurulum
7
+ ## 📦 Installation
19
8
 
20
9
  ```bash
21
10
  npm install nonamecartoon
22
11
  ```
23
12
 
24
- ## ⚡ Hızlı Başlangıç
13
+ ## 🚀 Quick Start
25
14
 
26
15
  ```tsx
27
- import { ThemeProvider, Button, MangaCard, AIPattern } from 'nonamecartoon'
28
- import 'nonamecartoon/dist/nonamecartoon.css'
16
+ import { MangaCard, Button, AIPattern } from 'nonamecartoon'
17
+ import 'nonamecartoon/style.css'
29
18
 
30
19
  function App() {
31
20
  return (
32
- <ThemeProvider defaultTheme="system">
33
- <MangaCard
34
- title="Solo Leveling"
35
- cover="/cover.jpg"
36
- rating={4.8}
37
- status="ongoing"
21
+ <AIPattern theme="cyberpunk-manga">
22
+ <MangaCard
23
+ title="One Piece"
24
+ cover="/covers/op.jpg"
25
+ rating={4.9}
38
26
  />
39
- </ThemeProvider>
27
+ <Button variant="primary">Okumaya Başla</Button>
28
+ </AIPattern>
40
29
  )
41
30
  }
42
31
  ```
43
32
 
44
- ## 🖼️ AI Pattern (v0.2.0)
33
+ ---
34
+
35
+ ## 📚 Component Categories
36
+
37
+ | Category | Components | Description |
38
+ |----------|------------|-------------|
39
+ | **Core** | 17 | Button, Input, Card, Text, Select, Textarea, RadioGroup, Dropdown, etc. |
40
+ | **Layout** | 6 | Container, Box, Divider, Spacer, AspectRatio, Sidebar |
41
+ | **Navigation** | 8 | Tabs, Breadcrumb, Pagination, Stepper, Navbar, BottomNavigation, etc. |
42
+ | **Feedback** | 13 | Alert, Modal, Toast, ConfirmDialog, EmptyState, Popover, etc. |
43
+ | **Data** | 6 | Avatar, Tag, Accordion, StatCard, AvatarGroup, Chip |
44
+ | **Manga** | 9 | MangaCard, ChapterList, RatingStars, GenreFilter, etc. |
45
+ | **Social** | 16 | UserCard, PostCard, ThreadedComments, NotificationCenter, etc. |
46
+ | **Reader** | 8 | WebtoonReader, DoublePageReader, PageSlider, ZoomControls, etc. |
47
+ | **Utility** | 14 | ColorPicker, FileUpload, CopyButton, TimeAgo, Countdown, InfiniteScroll, etc. |
48
+ | **Auth** | 3 | LoginForm, RegisterForm, ForgotPassword |
49
+ | **Admin** | 2 | DataTable, DashboardCard |
50
+ | **Commerce** | 1 | PricingCard |
51
+ | **Patterns** | 9 | AIPattern themes for backgrounds |
52
+ | **Decorations** | 6 | AvatarFrame, ProfileBanner, CardPattern, etc. |
45
53
 
46
- Profil arka planları için AI üretimi seamless pattern'ler:
54
+ **Total: 120+ components**
55
+
56
+ ---
57
+
58
+ ## 🎯 Core Components
59
+
60
+ ### Button
61
+ ```tsx
62
+ <Button variant="primary" size="md" loading={false}>
63
+ Click Me
64
+ </Button>
65
+ ```
66
+ | Prop | Type | Default |
67
+ |------|------|---------|
68
+ | `variant` | `'primary' \| 'secondary' \| 'ghost' \| 'danger'` | `'primary'` |
69
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` |
70
+ | `loading` | `boolean` | `false` |
71
+ | `disabled` | `boolean` | `false` |
72
+
73
+ ### Input
74
+ ```tsx
75
+ <Input
76
+ label="Email"
77
+ placeholder="email@example.com"
78
+ isError={hasError}
79
+ helperText="Valid email required"
80
+ />
81
+ ```
47
82
 
83
+ ### Card
48
84
  ```tsx
49
- import { AIPattern } from 'nonamecartoon'
85
+ <Card variant="outlined" padding="lg" hoverable>
86
+ <h3>Title</h3>
87
+ <p>Content</p>
88
+ </Card>
89
+ ```
50
90
 
51
- <AIPattern
52
- theme="cyberpunk-manga"
53
- tileSize={400}
54
- opacity={1}
91
+ ---
92
+
93
+ ## 📖 Manga Components
94
+
95
+ ### MangaCard
96
+ ```tsx
97
+ <MangaCard
98
+ id="1"
99
+ title="One Piece"
100
+ cover="/cover.jpg"
101
+ author="Eiichiro Oda"
102
+ rating={4.9}
103
+ genres={['Action', 'Adventure']}
104
+ status="ongoing"
105
+ onClick={(id) => navigate(`/manga/${id}`)}
55
106
  />
56
107
  ```
57
108
 
58
- ### Mevcut Temalar
109
+ ### ChapterList
110
+ ```tsx
111
+ <ChapterList
112
+ chapters={[
113
+ { id: '1', number: 1, title: 'Romance Dawn', date: new Date() }
114
+ ]}
115
+ onChapterClick={(id) => navigate(`/read/${id}`)}
116
+ />
117
+ ```
59
118
 
60
- | Tema | Kategori | Açıklama |
61
- |------|----------|----------|
62
- | `boho-celestial` | Estetik | Güneş, ay, kaktüs, mistik semboller |
63
- | `retro-scifi` | Estetik | 50s UFO, uzaylılar, roketler |
64
- | `cyberpunk-manga` | Anime | Neon glitch, anime gözleri |
65
- | `winter-nordic` | Mevsimsel | Geyik, çam ağacı, İskandinav desenleri |
66
- | `gothic-apothecary` | Estetik | Güveler, kafatasları, vintage ilaç şişeleri |
67
- | `kawaii-food` | Anime | Sevimli sushi, ramen, boba çay |
68
- | `ocean-waves` | Doğa | Kanagawa tarzı Japon dalgaları |
69
- | `gaming-retro` | Gaming | Pixel art, arcade, 8-bit nostalji |
70
- | `tropical-paradise` | Doğa | Tropikal kuşlar, çiçekler |
119
+ ### RatingStars
120
+ ```tsx
121
+ <RatingStars value={4.5} onChange={setRating} />
122
+ ```
71
123
 
72
- ### AIPattern Props
124
+ ---
73
125
 
74
- | Prop | Type | Default | Açıklama |
75
- |------|------|---------|----------|
76
- | `theme` | PatternTheme | required | Tema seçimi |
77
- | `tileSize` | number | 400 | Tile boyutu (px) |
78
- | `opacity` | number | 1 | Opaklık (0-1) |
79
- | `colorFilter` | string | 'none' | 'sepia' \| 'grayscale' \| 'saturate' |
80
- | `blur` | number | 0 | Blur efekti (px) |
81
- | `overlayColor` | string | - | Overlay rengi (rgba) |
82
- | `parallax` | boolean | false | Parallax efekti |
126
+ ## 📱 Reader Components
83
127
 
84
- ## 📚 Bileşenler
128
+ ### WebtoonReader
129
+ ```tsx
130
+ <WebtoonReader
131
+ pages={[
132
+ { id: '1', src: '/page1.jpg' },
133
+ { id: '2', src: '/page2.jpg' }
134
+ ]}
135
+ gap="none"
136
+ pageWidth="fit"
137
+ onPageChange={(index) => console.log(index)}
138
+ />
139
+ ```
85
140
 
86
- ### Core (12)
87
- Button • Text • Input • Card • Checkbox • Radio • Switch • Select • Slider • Link
141
+ ### ChapterTransition
142
+ ```tsx
143
+ <ChapterTransition
144
+ currentChapter={{ id: '1', number: 5, title: 'The Battle' }}
145
+ nextChapter={{ id: '2', number: 6, title: 'Victory' }}
146
+ onNavigate={(id) => loadChapter(id)}
147
+ autoNavigateDelay={5}
148
+ />
149
+ ```
88
150
 
89
- ### Layout (5)
90
- Box • Divider • Spacer • AspectRatio • Container
151
+ ### BookmarkPanel
152
+ ```tsx
153
+ <BookmarkPanel
154
+ bookmarks={bookmarks}
155
+ currentPage={15}
156
+ totalPages={50}
157
+ onAddBookmark={(page, note) => addBookmark(page, note)}
158
+ onNavigate={(page) => goToPage(page)}
159
+ />
160
+ ```
91
161
 
92
- ### Navigation (3)
93
- Tabs • Breadcrumb • Pagination
162
+ ---
94
163
 
95
- ### Feedback (8)
96
- Alert • Modal • Spinner • Progress • Skeleton • Tooltip • Badge • Tag
164
+ ## 👥 Social Components
97
165
 
98
- ### Data Display (5)
99
- Avatar • Accordion • StatCard • List • DataGrid
166
+ ### ThreadedComments
167
+ ```tsx
168
+ <ThreadedComments
169
+ comments={commentsWithReplies}
170
+ currentUser={{ name: 'User' }}
171
+ onReply={(parentId, content) => postReply(parentId, content)}
172
+ onLike={(id) => likeComment(id)}
173
+ maxDepth={3}
174
+ />
175
+ ```
100
176
 
101
- ### Manga Specific (10)
102
- MangaCard • ChapterList • ReadingProgress • RatingStars • CommentBubble • MangaGrid • GenreFilter • ReaderPanel • PageNavigator • SearchBar
177
+ ### NotificationCenter
178
+ ```tsx
179
+ <NotificationCenter
180
+ notifications={notifications}
181
+ onMarkRead={(id) => markAsRead(id)}
182
+ onMarkAllRead={() => markAllAsRead()}
183
+ onNotificationClick={(n) => navigate(n.link)}
184
+ />
185
+ ```
103
186
 
104
- ### Social (14)
105
- UserCard • FollowButton • NotificationBadge • ActivityFeed • AvatarFrame • ProfileBanner • ShareButton • ReactionBar • EmojiPicker • PostCard • CommentCard • ReportModal
187
+ ### PollCard
188
+ ```tsx
189
+ <PollCard
190
+ question="Favorite genre?"
191
+ options={[
192
+ { id: '1', text: 'Action', votes: 45 },
193
+ { id: '2', text: 'Romance', votes: 32 }
194
+ ]}
195
+ onVote={(id) => submitVote(id)}
196
+ />
197
+ ```
106
198
 
107
- ### Advanced (8)
108
- Lightbox • InfiniteScroll • ImageGallery • ColorPicker • SearchSuggestions • DatePicker • Carousel • CommandPalette
199
+ ---
109
200
 
110
- ### Patterns (1)
111
- AIPattern
201
+ ## 🛠️ Utility Components
112
202
 
113
- ## 🎭 ToonIcon
203
+ ### MangaUploader
204
+ ```tsx
205
+ <MangaUploader
206
+ availableGenres={['Action', 'Comedy', 'Drama']}
207
+ onSubmit={async (data) => {
208
+ await uploadManga(data)
209
+ }}
210
+ />
211
+ ```
114
212
 
213
+ ### ChapterUploader
115
214
  ```tsx
116
- import { ToonIcon } from 'nonamecartoon'
215
+ <ChapterUploader
216
+ onFilesChange={(files) => setPages(files)}
217
+ onUpload={async (files) => uploadChapter(files)}
218
+ maxFiles={100}
219
+ />
220
+ ```
117
221
 
118
- <ToonIcon name="manga" size="lg" animation="bounce" />
222
+ ### ImageCropper
223
+ ```tsx
224
+ <ImageCropper
225
+ src="/image.jpg"
226
+ aspectRatio="cover"
227
+ onCrop={(url, area) => setCroppedImage(url)}
228
+ />
119
229
  ```
120
230
 
121
- 76 ikon: home, search, manga, chapter, heart, star, bookmark, comment, share, download, user, settings, bell, eye, clock, edit, trash, plus, check, x, arrow-*, chevron-*
231
+ ### FileUpload
232
+ ```tsx
233
+ <FileUpload
234
+ onFilesChange={(files) => console.log(files)}
235
+ accept="image/*"
236
+ maxSize={10 * 1024 * 1024}
237
+ maxFiles={5}
238
+ />
239
+ ```
240
+
241
+ ### CopyButton
242
+ ```tsx
243
+ <CopyButton text="https://manga.app/share/123" />
244
+ ```
122
245
 
123
- ## 🎨 Tema
246
+ ### TimeAgo
247
+ ```tsx
248
+ <TimeAgo date={new Date(Date.now() - 5 * 60000)} locale="tr" />
249
+ // Output: "5 dakika önce"
250
+ ```
124
251
 
252
+ ### Countdown
125
253
  ```tsx
126
- const { theme, toggleTheme, resolvedTheme } = useTheme()
254
+ <Countdown
255
+ targetDate={new Date('2024-12-31')}
256
+ format="full"
257
+ onComplete={() => alert('Happy New Year!')}
258
+ />
259
+ ```
260
+
261
+ ---
262
+
263
+ ## 💬 Feedback Components
264
+
265
+ ### Toast
266
+ ```tsx
267
+ <ToastContainer
268
+ toasts={[
269
+ { id: '1', type: 'success', message: 'Başarılı!' },
270
+ { id: '2', type: 'error', message: 'Hata oluştu' }
271
+ ]}
272
+ position="top-right"
273
+ onClose={(id) => removeToast(id)}
274
+ />
127
275
  ```
128
276
 
129
- CSS değişkenleri ile özelleştirme:
277
+ ### ConfirmDialog
278
+ ```tsx
279
+ <ConfirmDialog
280
+ isOpen={showDialog}
281
+ title="Silmek istediğinize emin misiniz?"
282
+ message="Bu işlem geri alınamaz."
283
+ isDanger
284
+ onConfirm={() => deleteItem()}
285
+ onCancel={() => setShowDialog(false)}
286
+ />
287
+ ```
288
+
289
+ ### Popover
290
+ ```tsx
291
+ <Popover
292
+ trigger={<button>Bilgi</button>}
293
+ position="top"
294
+ triggerMode="hover"
295
+ >
296
+ <p>Ek bilgiler burada gösterilir.</p>
297
+ </Popover>
298
+ ```
299
+
300
+ ### EmptyState
301
+ ```tsx
302
+ <EmptyState
303
+ title="Manga bulunamadı"
304
+ description="Aradığınız kriterlere uygun manga yok."
305
+ icon="🔍"
306
+ actionText="Filtreleri Temizle"
307
+ onAction={() => clearFilters()}
308
+ />
309
+ ```
310
+
311
+ ---
312
+
313
+ ## 🏆 Gamification Components
314
+
315
+ ### AchievementBadge
316
+ ```tsx
317
+ <AchievementBadge
318
+ name="Night Owl"
319
+ icon="🦉"
320
+ description="Read 10 chapters after midnight"
321
+ rarity="rare"
322
+ unlocked={true}
323
+ progress={100}
324
+ />
325
+ ```
326
+
327
+ ### LevelProgress
328
+ ```tsx
329
+ <LevelProgress
330
+ level={15}
331
+ currentXP={2500}
332
+ requiredXP={5000}
333
+ username="MangaFan"
334
+ rankName="Expert Reader"
335
+ />
336
+ ```
337
+
338
+ ---
339
+
340
+ ## 🎨 AI Pattern Backgrounds
341
+
342
+ ```tsx
343
+ <AIPattern
344
+ theme="cyberpunk-manga"
345
+ animated={true}
346
+ blur="light"
347
+ >
348
+ {children}
349
+ </AIPattern>
350
+ ```
351
+
352
+ ### Available Themes
353
+
354
+ | Theme | Description |
355
+ |-------|-------------|
356
+ | `cyberpunk-manga` | Neon city, futuristic |
357
+ | `kawaii-food` | Cute food patterns |
358
+ | `gaming-retro` | Retro gaming vibes |
359
+ | `retro-scifi` | Vintage sci-fi |
360
+ | `boho-celestial` | Mystical celestial |
361
+ | `ocean-waves` | Calming ocean |
362
+ | `winter-nordic` | Nordic winter |
363
+ | `gothic-apothecary` | Dark gothic |
364
+ | `tropical-paradise` | Tropical vibes |
365
+
366
+ ---
367
+
368
+ ## 🎭 Visual Components
369
+
370
+ ### CharacterCard
371
+ ```tsx
372
+ <CharacterCard
373
+ name="Luffy"
374
+ image="/luffy.jpg"
375
+ role="protagonist"
376
+ series="One Piece"
377
+ abilities={['Gomu Gomu', 'Haki']}
378
+ flippable={true}
379
+ />
380
+ ```
381
+
382
+ ### MangaQuote
383
+ ```tsx
384
+ <MangaQuote
385
+ quote="I'm gonna be King of the Pirates!"
386
+ character="Monkey D. Luffy"
387
+ series="One Piece"
388
+ variant="dramatic"
389
+ />
390
+ ```
391
+
392
+ ### PanelGrid
393
+ ```tsx
394
+ <PanelGrid template="2x2" gap="md">
395
+ <Panel><Content /></Panel>
396
+ <Panel><Content /></Panel>
397
+ <Panel><Content /></Panel>
398
+ <Panel><Content /></Panel>
399
+ </PanelGrid>
400
+ ```
401
+
402
+ ---
403
+
404
+ ## 🌍 Fansub Components
405
+
406
+ ### FansubCard
407
+ ```tsx
408
+ <FansubCard
409
+ name="TurkManga"
410
+ members={45}
411
+ projects={12}
412
+ completed={156}
413
+ onFollow={() => followGroup()}
414
+ />
415
+ ```
416
+
417
+ ### TranslationProgress
418
+ ```tsx
419
+ <TranslationProgress
420
+ chapterNumber={150}
421
+ stages={[
422
+ { stage: 'raw', completed: true },
423
+ { stage: 'translation', completed: true },
424
+ { stage: 'editing', current: true },
425
+ { stage: 'qc', completed: false },
426
+ { stage: 'release', completed: false }
427
+ ]}
428
+ />
429
+ ```
430
+
431
+ ---
432
+
433
+ ## 🎨 Theming
434
+
435
+ CSS variables for customization:
436
+
130
437
  ```css
131
- --cartoon-yellow: #FFE500;
132
- --cartoon-cyan: #00D4FF;
133
- --cartoon-font-heading: 'Bangers', cursive;
438
+ :root {
439
+ --cartoon-surface: #ffffff;
440
+ --cartoon-border: #222222;
441
+ --cartoon-yellow: #FFE500;
442
+ --cartoon-cyan: #00D4FF;
443
+ --cartoon-magenta: #FF2D95;
444
+ --cartoon-text: #222222;
445
+ --cartoon-text-secondary: #666666;
446
+ }
134
447
  ```
135
448
 
136
- ## 📄 Lisans
449
+ ### Dark Mode
450
+ ```css
451
+ [data-theme="dark"] {
452
+ --cartoon-surface: #1a1a1a;
453
+ --cartoon-border: #333333;
454
+ --cartoon-text: #ffffff;
455
+ }
456
+ ```
457
+
458
+ ---
459
+
460
+ ## 📄 License
137
461
 
138
- MIT © 2026
462
+ MIT © 2024