🎨 nonamecartoon

> Cartoon/Comic-book style React UI library for manga & webtoon websites


📦 Installation

``bash
npm install nonamecartoon
`

🚀 Quick Start

`tsx
import { MangaCard, Button, AIPattern } from 'nonamecartoon'
import 'nonamecartoon/style.css'

function App() {
return (

title="One Piece"
cover="/covers/op.jpg"
rating={4.9}
/>
Okumaya Başla

)
}
`

---

📚 Component Categories

| Category | Components | Description |
|----------|------------|-------------|
| Core | 17 | Button, Input, Card, Text, Select, Textarea, RadioGroup, Dropdown, etc. |
| Layout | 6 | Container, Box, Divider, Spacer, AspectRatio, Sidebar |
| Navigation | 8 | Tabs, Breadcrumb, Pagination, Stepper, Navbar, BottomNavigation, etc. |
| Feedback | 13 | Alert, Modal, Toast, ConfirmDialog, EmptyState, Popover, etc. |
| Data | 6 | Avatar, Tag, Accordion, StatCard, AvatarGroup, Chip |
| Manga | 17 | MangaCard, ChapterList, Carousel, TrendingList, ScheduleCalendar, AdvancedFilter, MangaStats, ReadingListButton, SpoilerBlock, RelatedManga, etc. |
| Social | 16 | UserCard, PostCard, ThreadedComments, NotificationCenter, etc. |
| Reader | 11 | WebtoonReader, DoublePageReader, PageSlider, ZoomControls, QuickChapterJump, ReaderSettings, PageThumbnails, etc. |
| Utility | 14 | ColorPicker, FileUpload, CopyButton, TimeAgo, Countdown, InfiniteScroll, etc. |
| Auth | 3 | LoginForm, RegisterForm, ForgotPassword |
| Admin | 2 | DataTable, DashboardCard |
| Commerce | 1 | PricingCard |
| Profile | 5 | ReadingStats, FavoritesList, ReadingHistory, MangaListTabs, FollowingList |
| Patterns | 9 | AIPattern themes for backgrounds |
| Decorations | 6 | AvatarFrame, ProfileBanner, CardPattern, etc. |

Total: 133+ components

---

🎯 Core Components

$3


`tsx

Click Me

`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| variant | 'primary' \| 'secondary' \| 'ghost' \| 'danger' \| 'comic' | 'primary' | Button style variant |
| size | 'sm' \| 'md' \| 'lg' | 'md' | Button size |
| isLoading | boolean | false | Shows loading spinner |
| isDisabled | boolean | false | Disables the button |
| fullWidth | boolean | false | Makes button full width |
| leftIcon | ReactNode | - | Icon on the left |
| rightIcon | ReactNode | - | Icon on the right |

$3

`tsx
label="Email"
placeholder="email@example.com"
isError={hasError}
errorMessage="Invalid email"
/>
`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| label | string | - | Label text |
| placeholder | string | - | Placeholder text |
| helperText | string | - | Helper text below input |
| errorMessage | string | - | Error message (overrides helperText) |
| isError | boolean | false | Error state |
| isSuccess | boolean | false | Success state |
| size | 'sm' \| 'md' \| 'lg' | 'md' | Input size |
| leftIcon | ReactNode | - | Icon on the left |

$3

`tsx

Content

`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| variant | 'default' \| 'outlined' \| 'comic' \| 'elevated' | 'default' | Card style |
| size | 'sm' \| 'md' \| 'lg' | 'md' | Card size |
| title | string | - | Header title |
| subtitle | string | - | Header subtitle |
| isClickable | boolean | false | Makes card clickable with keyboard support |
| footer | ReactNode | - | Footer content |

$3

`tsx

Modal content

`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| isOpen | boolean | - | Modal visibility |
| onClose | () => void | - | Close handler |
| title | string | - | Modal title |
| size | 'sm' \| 'md' \| 'lg' \| 'full' | 'md' | Modal size |
| closeOnOverlay | boolean | true | Close when clicking overlay |
| closeOnEsc | boolean | true | Close on ESC key |

$3

`tsx

Operation completed successfully.

`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| variant | 'info' \| 'success' \| 'warning' \| 'error' | 'info' | Alert type |
| title | string | - | Alert title |
| icon | ReactNode | (auto) | Custom icon |
| showIcon | boolean | true | Show/hide icon |
| closable | boolean | false | Show close button |
| onClose | () => void | - | Close handler |

$3

`tsx
items={[
{ id: 'tab1', label: 'Tab 1', content: },
{ id: 'tab2', label: 'Tab 2', content: },
]}
onChange={(id) => console.log(id)}
/>
`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| items | TabItem[] | - | Tab items array |
| activeId | string | - | Controlled active tab |
| defaultActiveId | string | - | Default active tab |
| onChange | (id: string) => void | - | Tab change handler |
| variant | 'default' \| 'comic' \| 'pills' | 'default' | Tab style |
| fullWidth | boolean | false | Full width tabs |

---

📖 Manga Components

$3

`tsx
id="1"
title="One Piece"
cover="/cover.jpg"
author="Eiichiro Oda"
rating={4.9}
genres={['Action', 'Adventure']}
status="ongoing"
onClick={(id) => navigate(/manga/${id})}
/>
`

$3

`tsx
chapters={[
{ id: '1', number: 1, title: 'Romance Dawn', date: new Date() }
]}
onChapterClick={(id) => navigate(/read/${id})}
/>
`

$3

`tsx

`

---

📱 Reader Components

$3

`tsx
pages={[
{ id: '1', src: '/page1.jpg' },
{ id: '2', src: '/page2.jpg' }
]}
gap="none"
pageWidth="fit"
onPageChange={(index) => console.log(index)}
/>
`

$3

`tsx
currentChapter={{ id: '1', number: 5, title: 'The Battle' }}
nextChapter={{ id: '2', number: 6, title: 'Victory' }}
onNavigate={(id) => loadChapter(id)}
autoNavigateDelay={5}
/>
`

$3

`tsx
bookmarks={bookmarks}
currentPage={15}
totalPages={50}
onAddBookmark={(page, note) => addBookmark(page, note)}
onNavigate={(page) => goToPage(page)}
/>
`

---

👥 Social Components

$3

`tsx
comments={commentsWithReplies}
currentUser={{ name: 'User' }}
onReply={(parentId, content) => postReply(parentId, content)}
onLike={(id) => likeComment(id)}
maxDepth={3}
/>
`

$3

`tsx
notifications={notifications}
onMarkRead={(id) => markAsRead(id)}
onMarkAllRead={() => markAllAsRead()}
onNotificationClick={(n) => navigate(n.link)}
/>
`

$3

`tsx
question="Favorite genre?"
options={[
{ id: '1', text: 'Action', votes: 45 },
{ id: '2', text: 'Romance', votes: 32 }
]}
onVote={(id) => submitVote(id)}
/>
`

---

🛠️ Utility Components

$3

`tsx
availableGenres={['Action', 'Comedy', 'Drama']}
onSubmit={async (data) => {
await uploadManga(data)
}}
/>
`

$3

`tsx
onFilesChange={(files) => setPages(files)}
onUpload={async (files) => uploadChapter(files)}
maxFiles={100}
/>
`

$3

`tsx
src="/image.jpg"
aspectRatio="cover"
onCrop={(url, area) => setCroppedImage(url)}
/>
`

$3

`tsx
onFilesChange={(files) => console.log(files)}
accept="image/*"
maxSize={10 1024 1024}
maxFiles={5}
/>
`

$3

`tsx

`

$3

`tsx

// Output: "5 dakika önce"
`

$3

`tsx
targetDate={new Date('2024-12-31')}
format="full"
onComplete={() => alert('Happy New Year!')}
/>
`

---

💬 Feedback Components

$3

`tsx
toasts={[
{ id: '1', type: 'success', message: 'Başarılı!' },
{ id: '2', type: 'error', message: 'Hata oluştu' }
]}
position="top-right"
onClose={(id) => removeToast(id)}
/>
`

$3

`tsx
isOpen={showDialog}
title="Silmek istediğinize emin misiniz?"
message="Bu işlem geri alınamaz."
isDanger
onConfirm={() => deleteItem()}
onCancel={() => setShowDialog(false)}
/>
`

$3

`tsx
trigger={Bilgi}
position="top"
triggerMode="hover"
>

Ek bilgiler burada gösterilir.

`

$3

`tsx
title="Manga bulunamadı"
description="Aradığınız kriterlere uygun manga yok."
icon="🔍"
actionText="Filtreleri Temizle"
onAction={() => clearFilters()}
/>
`

---

🏆 Gamification Components

$3

`tsx
name="Night Owl"
icon="🦉"
description="Read 10 chapters after midnight"
rarity="rare"
unlocked={true}
progress={100}
/>
`

$3

`tsx
level={15}
currentXP={2500}
requiredXP={5000}
username="MangaFan"
rankName="Expert Reader"
/>
`

---

🎨 AI Pattern Backgrounds

`tsx
theme="cyberpunk-manga"
animated={true}
blur="light"
>
{children}

`

$3

| Theme | Description |
|-------|-------------|
| cyberpunk-manga | Neon city, futuristic |
| kawaii-food | Cute food patterns |
| gaming-retro | Retro gaming vibes |
| retro-scifi | Vintage sci-fi |
| boho-celestial | Mystical celestial |
| ocean-waves | Calming ocean |
| winter-nordic | Nordic winter |
| gothic-apothecary | Dark gothic |
| tropical-paradise | Tropical vibes |

---

🎭 Visual Components

$3


`tsx
name="Luffy"
image="/luffy.jpg"
role="protagonist"
series="One Piece"
abilities={['Gomu Gomu', 'Haki']}
flippable={true}
/>
`

$3

`tsx
quote="I'm gonna be King of the Pirates!"
character="Monkey D. Luffy"
series="One Piece"
variant="dramatic"
/>
`

$3

`tsx






`

---

🌍 Fansub Components

$3

`tsx
name="TurkManga"
members={45}
projects={12}
completed={156}
onFollow={() => followGroup()}
/>
`

$3

`tsx
chapterNumber={150}
stages={[
{ stage: 'raw', completed: true },
{ stage: 'translation', completed: true },
{ stage: 'editing', current: true },
{ stage: 'qc', completed: false },
{ stage: 'release', completed: false }
]}
/>
`

---

🎨 Theming

CSS variables for customization:

`css
:root {
--cartoon-surface: #ffffff;
--cartoon-border: #222222;
--cartoon-yellow: #FFE500;
--cartoon-cyan: #00D4FF;
--cartoon-magenta: #FF2D95;
--cartoon-text: #222222;
--cartoon-text-secondary: #666666;
}
`

$3


`css
[data-theme="dark"] {
--cartoon-surface: #1a1a1a;
--cartoon-border: #333333;
--cartoon-text: #ffffff;
}
``

---

📄 License

MIT © 2024