bnk-components/README.md

Reusable React components for Issaglam UI - Modern, responsive UI components with TypeScript support

# BNK Components

Reusable React components for Issaglam UI - Hem library hem de standalone uygulama olarak kullanılabilir.

## 🚀 Özellikler

- **React 18** desteği
- **TypeScript** ile tip güvenliği
- **Modern UI** bileşenleri
- **Responsive** tasarım
- **Examples** sayfası ile interaktif dokümantasyon
- **Vite** ile hızlı geliştirme

## 📦 Kurulum

```bash
npm install bnk-components
```

## 🎯 Kullanım

### Library Olarak Kullanım

```typescript
import { CheckBox, AutoForm, CrudGrid } from 'bnk-components';

// CheckBox kullanımı
<CheckBox
  checked={checked}
  onChange={setChecked}
  label="Kullanım şartlarını kabul ediyorum"
/>

// AutoForm kullanımı
<AutoForm
  metadata={formMetadata}
  data={formData}
  onChange={handleChange}
  onSubmit={handleSubmit}
/>
```

### Standalone Uygulama Olarak Kullanım

Projeyi klonlayın ve examples sayfasını çalıştırın:

```bash
git clone <repository-url>
cd bnk-components
npm install
npm run start:examples
```

## 🛠️ Geliştirme

### Gerekli Araçlar

- Node.js 18+
- npm veya yarn

### Komutlar

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

# Library build
npm run build

# Examples uygulamasını başlat
npm run start:examples

# Examples uygulamasını build et
npm run build:examples

# Development mode (watch)
npm run dev

# Temizlik
npm run clean
```

## 📋 Bileşenler

### ✅ Mevcut Bileşenler

- **AutoForm** - Otomatik form oluşturma
- **CheckBox** - Onay kutusu
- **CrudGrid** - Veri tablosu ve CRUD işlemleri
- **FileUploader** - Dosya yükleme
- **FormLayout** - Form düzeni
- **ImageViewer** - Resim görüntüleme
- **SearchableComboBox** - Arama yapılabilir açılır liste
- **Sidebar** - Yan menü
- **Stepper** - Adım adım işlem

### 🔄 Gelecek Bileşenler

- Modal/Dialog
- DatePicker
- TimePicker
- RichTextEditor
- DataTable
- Charts

## 🎨 Examples Sayfası

Examples sayfası şu özelliklere sahiptir:

- **Modern UI**: Gradient arka plan ve şeffaf kartlar
- **Responsive**: Mobil, tablet ve masaüstü uyumlu
- **Navigasyon**: Sol menü ile kolay gezinme
- **Kod Örnekleri**: Her bileşen için detaylı kod örnekleri
- **Props Tablosu**: Bileşen props'larının açıklaması

### Examples Sayfasına Erişim

```bash
npm run start:examples
```

Tarayıcıda `http://localhost:3001` adresine gidin.

## 📁 Proje Yapısı

```
bnk-components/
├── src/
│   ├── components/          # Bileşenler
│   │   ├── AutoForm/
│   │   ├── CheckBox/
│   │   ├── CrudGrid/
│   │   └── ...
│   ├── examples/           # Examples uygulaması
│   │   ├── index.tsx
│   │   ├── Examples.css
│   │   └── ...
│   ├── ApiClient/          # API istemcisi
│   ├── types/              # Tip tanımları
│   ├── utils/              # Yardımcı fonksiyonlar
│   ├── index.ts            # Ana export
│   └── main.tsx            # Examples entry point
├── dist/                   # Build çıktısı
├── scripts/                # Build scriptleri
├── package.json
├── vite.config.ts          # Library build
├── vite.examples.config.ts # Examples build
└── index.html              # Examples HTML
```

## 🔧 Konfigürasyon

### TypeScript

`tsconfig.json` dosyası hem library hem de examples için optimize edilmiştir.

### Vite

- `vite.config.ts`: Library build için
- `vite.examples.config.ts`: Examples uygulaması için

## 📦 Build

### Library Build

```bash
npm run build
```

Çıktı: `dist/` klasörü

### Examples Build

```bash
npm run build:examples
```

Çıktı: `dist-examples/` klasörü

## 🚀 Deployment

### Library

```bash
npm publish
```

### Examples

```bash
npm run build:examples
# dist-examples klasörünü bir web sunucusuna yükleyin
```

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

MIT License - Detaylar için [LICENSE](LICENSE) dosyasına bakın.

## 👨‍💻 Geliştirici

**BNK** - [GitHub](https://github.com/bnk)

## 🙏 Teşekkürler

- React ekibi
- Vite ekibi
- TypeScript ekibi
- Tüm katkıda bulunanlar

---

**Not**: Bu proje hem library hem de standalone uygulama olarak kullanılabilir. Examples sayfası ile bileşenleri interaktif olarak test edebilirsiniz.