🎨 nonamecartoon

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

📦 Installation

npm install nonamecartoon

🚀 Quick Start

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

function App() {
  return (
    <AIPattern theme="cyberpunk-manga">
      <MangaCard 
        title="One Piece"
        cover="/covers/op.jpg"
        rating={4.9}
      />
      <Button variant="primary">Okumaya Başla</Button>
    </AIPattern>
  )
}

📚 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

Button

<Button variant="primary" size="md" isLoading={false}>
  Click Me
</Button>

| 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 |

Input

<Input 
  label="Email"
  placeholder="[email protected]"
  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 |

Card

<Card variant="comic" title="Title" subtitle="Subtitle" isClickable>
  <p>Content</p>
</Card>

| 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 |

Modal

<Modal isOpen={isOpen} onClose={handleClose} title="Modal Title">
  <p>Modal content</p>
</Modal>

| 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 |

Alert

<Alert variant="success" title="Success!" closable>
  Operation completed successfully.
</Alert>

| 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 |

Tabs

<Tabs
  items={[
    { id: 'tab1', label: 'Tab 1', content: <Content1 /> },
    { id: 'tab2', label: 'Tab 2', content: <Content2 /> },
  ]}
  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

MangaCard

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

ChapterList

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

RatingStars

<RatingStars value={4.5} onChange={setRating} />

📱 Reader Components

WebtoonReader

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

ChapterTransition

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

BookmarkPanel

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

👥 Social Components

ThreadedComments

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

NotificationCenter

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

PollCard

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

🛠️ Utility Components

MangaUploader

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

ChapterUploader

<ChapterUploader
  onFilesChange={(files) => setPages(files)}
  onUpload={async (files) => uploadChapter(files)}
  maxFiles={100}
/>

ImageCropper

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

FileUpload

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

CopyButton

<CopyButton text="https://manga.app/share/123" />

TimeAgo

<TimeAgo date={new Date(Date.now() - 5 * 60000)} locale="tr" />
// Output: "5 dakika önce"

Countdown

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

💬 Feedback Components

Toast

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

ConfirmDialog

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

Popover

<Popover
  trigger={<button>Bilgi</button>}
  position="top"
  triggerMode="hover"
>
  <p>Ek bilgiler burada gösterilir.</p>
</Popover>

EmptyState

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

🏆 Gamification Components

AchievementBadge

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

LevelProgress

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

🎨 AI Pattern Backgrounds

<AIPattern 
  theme="cyberpunk-manga"
  animated={true}
  blur="light"
>
  {children}
</AIPattern>

Available Themes

| 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

CharacterCard

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

MangaQuote

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

PanelGrid

<PanelGrid template="2x2" gap="md">
  <Panel><Content /></Panel>
  <Panel><Content /></Panel>
  <Panel><Content /></Panel>
  <Panel><Content /></Panel>
</PanelGrid>

🌍 Fansub Components

FansubCard

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

TranslationProgress

<TranslationProgress
  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:

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

Dark Mode

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

📄 License

MIT © 2024