nonamecartoon 0.3.0 → 0.4.0

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