⚡ mrlib - Modern React UI Library

Modern, hafif ve temiz tasarıma sahip React uygulamaları oluşturmak için tasarlanmış UI komponent kütüphanesi.

✨ Özellikler

• ⚡ Hızlı Geliştirme: Vite ile optimize edilmiş build süreci
• 🎨 Modern Tasarım: Temiz ve minimal tasarım prensiplerinden ilham alan modern arayüz
• 📱 Responsive: Tüm cihazlarda mükemmel görünüm
• 🔧 TypeScript: Tip güvenliği ve gelişmiş geliştirici deneyimi
• 🛡️ Modern Araçlar: ESLint, Prettier ve diğer geliştirme araçları
• 🚀 Hazır Komponentler: Hemen kodlamaya başlayabileceğiniz UI komponentleri ve hook'lar
• 🌙 Dark Mode: Tam Tailwind CSS uyumlu dark mode desteği
• 🌍 Çok Dilli: Türkçe ve İngilizce dil desteği

🚀 Hızlı Başlangıç

Gereksinimler

• Node.js 18+
• npm veya yarn

Kurulum

# Projeyi klonlayın
git clone <repository-url>
cd mrlib

# Bağımlılıkları yükleyin
npm install

# Geliştirme sunucusunu başlatın
npm run dev

Tarayıcınızda http://localhost:3009 adresini açın.

📁 Proje Yapısı

src/
├── components/          # UI componentleri
│   ├── ui/             # Temel UI componentleri
│   │   ├── Button.tsx
│   │   ├── Card.tsx
│   │   ├── Input.tsx
│   │   ├── Modal.tsx
│   │   ├── Toast.tsx
│   │   ├── Tooltip.tsx
│   │   ├── Select.tsx
│   │   ├── Checkbox.tsx
│   │   ├── Radio.tsx
│   │   ├── Switch.tsx
│   │   ├── Slider.tsx
│   │   ├── Progress.tsx
│   │   ├── Badge.tsx
│   │   ├── Avatar.tsx
│   │   ├── Container.tsx
│   │   ├── Divider.tsx
│   │   ├── Spacer.tsx
│   │   ├── Tabs.tsx
│   │   ├── Accordion.tsx
│   │   ├── DatePicker.tsx
│   │   ├── Table.tsx
│   │   ├── List.tsx
│   │   ├── Textarea.tsx
│   │   ├── Alert.tsx
│   │   ├── Skeleton.tsx
│   │   ├── Drawer.tsx
│   │   ├── Breadcrumb.tsx
│   │   ├── FileUpload.tsx
│   │   └── Dropdown.tsx
│   ├── Header.tsx
│   ├── Hero.tsx
│   ├── Features.tsx
│   └── Footer.tsx
├── contexts/            # React Context'ler
│   ├── ThemeContext.tsx
│   ├── ToastContext.tsx
│   └── LanguageContext.tsx
├── hooks/               # Custom hook'lar
│   ├── useToggle.ts
│   ├── useDebounce.ts
│   ├── useLocalStorage.ts
│   ├── useResponsive.ts
│   ├── useClipboard.ts
│   ├── useScrollPosition.ts
│   ├── useMediaQuery.ts
│   └── index.ts
├── utils/               # Yardımcı fonksiyonlar
│   ├── cn.ts
│   ├── format.ts
│   ├── validation.ts
│   └── index.ts
├── types/               # TypeScript tip tanımları
│   └── index.ts
├── pages/               # Sayfa komponentleri
│   ├── Documentation.tsx
│   └── Examples.tsx
├── App.tsx
├── main.tsx
├── index.css
└── index.ts

🎨 Tasarım Sistemi

Renk Paleti

Modern ve temiz tasarım dilinden ilham alan renk paleti:

• Primary: Modern Blue (#007AFF)
• Success: Modern Green (#34C759)
• Warning: Modern Orange (#FF9500)
• Error: Modern Red (#FF3B30)
• Gray Scale: Modern Gray (50-900)
• Dark Mode: Premium dark gray tones for sophisticated dark theme
• Premium Palettes: Gold, Silver, Platinum, Rose Gold, Emerald, Sapphire, Amethyst, Ruby, Topaz, Pearl, Onyx (50-900 shades)

Typography

• Font Family: SF Pro Display/Text (Apple'ın sistem fontu)
• Font Sizes: Responsive ve tutarlı tipografi ölçekleri

Component'ler

Button

import { Button } from '@/components/ui/Button'

// Temel kullanım
<Button variant="primary" size="md">
  Tıkla
</Button>

// Loading state
<Button loading={true}>
  Yükleniyor...
</Button>

// Farklı varyantlar
<Button variant="secondary">İkincil</Button>
<Button variant="ghost">Hayalet</Button>
<Button variant="destructive">Tehlikeli</Button>

Card

import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card'

<Card>
  <CardHeader>
    <CardTitle>Başlık</CardTitle>
  </CardHeader>
  <CardContent>
    İçerik buraya gelir
  </CardContent>
</Card>

Input

import { Input } from '@/components/ui/Input'

<Input
  label="Email"
  type="email"
  placeholder="[email protected]"
  error="Geçerli bir email girin"
/>

Modal

import { Modal } from '@/components/ui/Modal'

<Modal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Modal Başlığı"
>
  Modal içeriği buraya gelir
</Modal>

🪝 Custom Hook'lar

useToggle

Boolean state'i toggle etmek için:

import { useToggle } from '@/hooks'

const [isOpen, toggle, setIsOpen] = useToggle(false)

useDebounce

Değeri belirtilen süre kadar geciktirmek için:

import { useDebounce } from '@/hooks'

const debouncedValue = useDebounce(searchTerm, 300)

useLocalStorage

LocalStorage ile senkronize state için:

import { useLocalStorage } from '@/hooks'

const [theme, setTheme] = useLocalStorage('theme', 'light')

useResponsive

Ekran boyutunu takip etmek için:

import { useResponsive } from '@/hooks'

const { isMobile, isTablet, isDesktop } = useResponsive()

useClipboard

Panoya kopyalama için:

import { useClipboard } from '@/hooks'

const { copy, copied } = useClipboard()

🌙 Dark Mode

Dark mode desteği tamamen Tailwind CSS ile entegre edilmiştir:

import { useTheme } from '@/contexts/ThemeContext'

const { theme, setTheme } = useTheme()

// Tema değiştirme
setTheme('dark') // 'light' | 'dark' | 'system'

🌍 Çok Dilli Destek

Türkçe ve İngilizce dil desteği:

import { useLanguage } from '@/contexts/LanguageContext'

const { language, setLanguage, t } = useLanguage()

// Çeviri kullanımı
const title = t('nav.home') // 'Ana Sayfa' veya 'Home'

🛠️ Geliştirme

Komutlar

# Geliştirme sunucusu
npm run dev

# Production build
npm run build

# Type kontrolü
npm run type-check

# Linting
npm run lint

# Preview
npm run preview

Konfigürasyon

• Vite: Modern build tool ve dev server
• TypeScript: Tip güvenliği
• Tailwind CSS: Utility-first CSS framework
• ESLint: Code linting
• PostCSS: CSS processing
• Framer Motion: Animasyonlar
• Zod: Schema validation

📦 Paketleme

Bu starter kit'i kendi projenizde kullanmak için:

# Build
npm run build

# Dist klasöründe hazır dosyalar oluşur

🤝 Katkıda Bulunma

1. Fork yapın
2. Feature branch oluşturun (git checkout -b feature/amazing-feature)
3. Commit yapın (git commit -m 'Add amazing feature')
4. Push yapın (git push origin feature/amazing-feature)
5. Pull Request oluşturun

📄 Lisans

Bu proje MIT lisansı altında lisanslanmıştır.

🙏 Teşekkürler

• React - UI library
• Vite - Build tool
• Tailwind CSS - CSS framework
• Lucide React - Icon library
• Framer Motion - Animation library
• Zod - Schema validation
• Modern tasarım prensipleri - Tasarım ilhamı

Not: Bu starter kit modern tasarım prensiplerinden ilham alınarak oluşturulmuştur.

📚 Dokümantasyon

Detaylı dokümantasyon için http://localhost:3009/docs adresini ziyaret edin.

🎯 Örnekler

Canlı örnekler için http://localhost:3009/examples adresini ziyaret edin.