AI UIKit

Modern, erişilebilir ve özelleştirilebilir React bileşen kütüphanesi. TypeScript ve Sass ile geliştirilmiştir.

🚀 Özellikler

• Modern Tasarım: Güncel UI/UX trendlerine uygun, temiz ve minimal tasarım
• TypeScript Desteği: Tam TypeScript desteği ile tip güvenliği
• Sass ile Stillendirilmiş: Özelleştirilebilir Sass değişkenleri ve mixin'ler
• Erişilebilirlik: WCAG standartlarına uygun erişilebilir bileşenler
• Responsive: Tüm cihazlarda mükemmel görünüm
• Tree Shaking: Optimized bundle boyutu için tree shaking desteği

📦 Kurulum

npm install ai-uikit

veya

yarn add ai-uikit

🎯 Kullanım

Button Bileşeni

import { Button } from 'ai-uikit';

function App() {
  return (
    <div>
      <Button variant="primary" size="md">
        Birincil Buton
      </Button>
      
      <Button variant="outline-secondary" loading>
        Yükleniyor...
      </Button>
      
      <Button 
        variant="danger" 
        startIcon={<DeleteIcon />}
        onClick={() => console.log('Silindi!')}
      >
        Sil
      </Button>
    </div>
  );
}

Button Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | variant | 'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'light' \| 'dark' \| 'outline-*' | 'primary' | Button stili | | size | 'sm' \| 'md' \| 'lg' | 'md' | Button boyutu | | fullWidth | boolean | false | Tam genişlik | | loading | boolean | false | Yükleniyor durumu | | startIcon | ReactNode | - | Sol ikon | | endIcon | ReactNode | - | Sağ ikon |

Input Bileşeni

import { Input } from 'ai-uikit';

function LoginForm() {
  return (
    <form>
      <Input
        label="E-posta"
        type="email"
        placeholder="[email protected]"
        required
      />
      
      <Input
        label="Şifre"
        type="password"
        placeholder="Şifrenizi girin"
        error="Şifre en az 8 karakter olmalıdır"
      />
      
      <Input
        label="Arama"
        placeholder="Ara..."
        startIcon={<SearchIcon />}
        endIcon={<ClearIcon />}
      />
    </form>
  );
}

Input Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | label | string | - | Input etiketi | | error | string | - | Hata mesajı | | helperText | string | - | Yardımcı metin | | variant | 'outlined' \| 'filled' | 'outlined' | Input stili | | size | 'sm' \| 'md' \| 'lg' | 'md' | Input boyutu | | fullWidth | boolean | false | Tam genişlik | | startIcon | ReactNode | - | Sol ikon | | endIcon | ReactNode | - | Sağ ikon | | required | boolean | false | Gerekli alan |

Card Bileşeni

import { Card, CardHeader, CardContent, CardActions, Button } from 'ai-uikit';

function ProfileCard() {
  return (
    <Card variant="elevated" hoverable>
      <CardHeader
        avatar={<Avatar src="/avatar.jpg" />}
        action={<Button variant="outline-primary" size="sm">Takip Et</Button>}
      >
        <div>
          <h4>John Doe</h4>
          <p>Yazılım Geliştirici</p>
        </div>
      </CardHeader>
      
      <CardContent>
        <p>
          React ve TypeScript konularında uzman, 
          modern web teknolojileri ile harika deneyimler yaratıyor.
        </p>
      </CardContent>
      
      <CardActions justify="space-between">
        <Button variant="outline-secondary" size="sm">
          Mesaj
        </Button>
        <Button variant="primary" size="sm">
          Bağlan
        </Button>
      </CardActions>
    </Card>
  );
}

Card Props

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|----------| | variant | 'elevated' \| 'outlined' \| 'filled' | 'elevated' | Card stili | | padding | 'none' \| 'sm' \| 'md' \| 'lg' | 'md' | İç boşluk | | hoverable | boolean | false | Hover efekti |

🎨 Özelleştirme

Sass Değişkenleri

Kendi stilinizi oluşturmak için Sass değişkenlerini özelleştirebilirsiniz:

// Renkler
$primary-color: #007bff;
$secondary-color: #6c757d;
$success-color: #28a745;
$danger-color: #dc3545;

// Boşluklar
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;

// Tipografi
$font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
$font-size-base: 16px;

@import 'ai-uikit/src/styles/global';

CSS Sınıfları

Her bileşen BEM metodolojisi ile adlandırılmış CSS sınıflarına sahiptir:

.ai-button {
  // Button temel stili
  
  &--primary {
    // Birincil button stili
  }
  
  &--lg {
    // Büyük button stili
  }
}

📚 Storybook

Bileşenleri interaktif olarak keşfetmek için Storybook kullanabilirsiniz:

npm run storybook

🛠️ Geliştirme

Projeyi yerel olarak geliştirmek için:

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

# Geliştirme modunda çalıştır
npm run dev

# Test çalıştır
npm test

# Build oluştur
npm run build

# Storybook çalıştır
npm run storybook

📄 Lisans

MIT License - detaylar için LICENSE dosyasına bakın.

🤝 Katkıda Bulunma

Katkılarınızı memnuniyetle karşılıyoruz! Lütfen katkıda bulunmadan önce katkı kurallarımızı okuyun.

📞 Destek

Herhangi bir sorunuz veya geri bildiriminiz için:

• GitHub Issues: GitHub
• Email: [email protected]