mrlib-ui

v1.1.0

Published

3 months ago

Modern React UI component library with TypeScript, Tailwind CSS, and multi-language support

0High
0Medium
0Low

yasinozdgn

react typescript tailwind ui-components template modern responsive dark-mode multi-language

⚡ mrlib-ui - Modern React UI Library

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

✨ Özellikler

⚡ Hızlı Geliştirme: Vite ile optimize edilmiş build süreci
🎨 Modern Tasarım: Apple benzeri temiz ve minimal tasarım prensipleri
📱 Responsive: Tüm cihazlarda mükemmel görünüm
🔧 TypeScript: %100 tip güvenliği ve gelişmiş IDE desteği
🚀 53+ Komponent: Kapsamlı UI komponent koleksiyonu
🪝 24 Hook: Gelişmiş state yönetimi için custom hook'lar
🌙 Dark Mode: Otomatik sistem tercihi algılama
🌍 Çok Dilli: Türkçe ve İngilizce dil desteği
📦 Optimize Bundle: Sadece 24.8KB (gzip: 5.6KB)
🎯 CLI Tool: Hızlı proje oluşturma

🚀 Hızlı Başlangıç

Gereksinimler

Node.js 16+
npm veya yarn

Kurulum

1. CLI ile Proje Oluşturma (Önerilen)

# Yeni proje oluştur
npx mrlib-ui create my-awesome-project

# Proje klasörüne git
cd my-awesome-project

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

# Geliştirme sunucusunu başlat
npm run dev

2. Manuel Kurulum

# Paketi yükle
npm install mrlib-ui

# Komponentleri import et
import { Button, Input, Card } from 'mrlib-ui'

3. Geliştirme için Klonlama

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

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

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

Tarayıcınızda http://localhost:3000 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 (24 Hook)

State Management

useToggle - Boolean state toggle
usePrevious - Previous value tracking
useLocalStorage - LocalStorage sync
useDebounce - Value debouncing

UI Interactions

useClickOutside - Outside click detection
useHover - Hover state tracking
useFocus - Focus state tracking
useKeyPress - Keyboard event handling

Form Management

useForm - Form state management
useValidation - Form validation logic

Network & Data

useAsync - Async operation handling
useFetch - HTTP request management
useOnline - Online/offline status
useGeolocation - Location tracking

Utilities

useClipboard - Clipboard operations
useCopyToClipboard - Copy to clipboard
useResponsive - Responsive breakpoints
useMediaQuery - Media query matching

Timer & Animation

useInterval - Interval timer
useTimeout - Timeout timer
useAnimation - CSS animations
useIntersectionObserver - Element visibility

Örnek Kullanım

import { useToggle, useAsync, useForm } from 'mrlib-ui'

function MyComponent() {
  const [isOpen, toggle] = useToggle(false)
  const { data, loading, error } = useAsync(fetchData)
  const { values, errors, handleChange } = useForm({
    email: '',
    password: ''
  })
  
  return (
    <div>
      <Button onClick={toggle}>
        {isOpen ? 'Kapat' : 'Aç'}
      </Button>
      {loading ? 'Yükleniyor...' : data}
    </div>
  )
}

🌙 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

Fork yapın
Feature branch oluşturun (git checkout -b feature/amazing-feature)
Commit yapın (git commit -m 'Add amazing feature')
Push yapın (git push origin feature/amazing-feature)
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.

Hazır Template

Doğrudan template oluşturmak için bu komutu kullanabilirsiniz npx mrlib-ui create my-awesome-project

📊 UI Kit Karşılaştırması

| UI Kit | Bundle Size | Gzip | Components | Hooks | TypeScript | |-------------|------------|--------|------------|-------|------------| | mrlib-ui | 24.8 kB | 5.6 kB | 53+ | 24 | 100% | | Ant Design | ~200 kB | ~60 kB | 50+ | 0 | 100% | | Material-UI | ~300 kB | ~90 kB | 100+ | 0 | 100% | | Chakra UI | ~150 kB | ~45 kB | 60+ | 0 | 100% | | Mantine | ~180 kB | ~55 kB | 80+ | 0 | 100% |

🏆 Neden mrlib-ui?

En Küçük Bundle: 5.6KB gzip ile en hafif UI kit
En Kapsamlı: 53 komponent + 24 hook
CLI Desteği: Hızlı proje oluşturma
Apple Tasarımı: Modern ve temiz arayüz
Çok Dilli: Türkçe ve İngilizce destek