bnk-components

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

npm install bnk-components

🎯 Kullanım

Library Olarak Kullanım

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:

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

# 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

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

npm run build

Çıktı: dist/ klasörü

Examples Build

npm run build:examples

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

🚀 Deployment

Library

npm publish

Examples

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

🤝 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

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

👨‍💻 Geliştirici

BNK - GitHub

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