# UI Component Library (fikoyt-ui)

## Önemli Component'ler

### parametreler (Dynamic Form Builder)
**Dosya:** `src/service/fikoyt-ui/src/lib/parametreler/`

**Özellikler:**
- **40+ parametre türü**
- Yetki yönetimi (rol tabanlı)
- Performans optimizasyonu (virtual scrolling)
- API entegrasyonu (MongoDB aggregate)
- Validasyon sistemi

**Parametre Türleri:**
```typescript
"Yazı" | "Sayı" | "Tarih" | "Onay" | "Renk"
"Açılır Kutu" | "Resim" | "Video" | "Dosya"
"XYZ" | "Grup" | "Sekme" | "Rich Text"
```

**Kullanım:**
```typescript
<fikoyt-parametreler
  [parametreler]="formParams"
  [yetkiModu]="'rollerineGore'"
  [performansModu]="true"
  (degisti)="formDegisti($event)"
/>
```

### fiko-filitreci (Advanced Filter)
**Dosya:** `src/service/fikoyt-ui/src/lib/fiko-filitreci/`

**Özellikler:**
- Dinamik filtre ağacı (grup içinde grup)
- SQL ve MongoDB query üretimi
- Field type desteği
- Content projection

**Kullanım:**
```typescript
// SQL query üret
const sql = filitreciRef.toSql();

// MongoDB query üret
const mongoQuery = filitreciRef.toMongo();
```

### fiko-three-js (3D Viewer)
**Dosya:** `src/service/fikoyt-ui/src/lib/fiko-three-js/`

**Özellikler:**
- CAD dosya import (DXF, STL, GLB)
- Custom orbit controls
- Işıklandırma sistemi
- Ölçüm araçları

### paylas-kutusu (Share Box)
**Dosya:** `src/service/fikoyt-ui/src/lib/paylasim-sistemi/`

**Özellikler:**
- Kart tabanlı paylaşım
- Gizlilik ayarları
- Rich text editor
- AI entegrasyonu

## Directive'ler

### zamanliGoster
```typescript
<div *appShowFor; trigger: showNotif; seconds: 3>
  Başarıyla kaydedildi!
</div>
```

### uzunBas
```typescript
<button uzunBas [uzunBasSure]="1000" (uzunBasildi)="sil()">
  Sil
</button>
```

## Pipe'lar

### toDosyaBoyutu
```typescript
{{ 1048576 | toDosyaBoyutu }}  // [1, "MB"]
```

### sanitizeHtml
```typescript
<div [innerHTML]="html | sanitizeHtml"></div>
```

### yuvarla
```typescript
{{ 3.14159 | yuvarla:2 }}  // 3.15
```

## Interface'ler

### IKart
```typescript
interface IKart<T = any> {
  _id?: string;
  turu?: IKartTuru;
  sahip?: string;
  gizlilik?: TurGizlilik;
  etiketler?: IEtiket[];
  icerikler?: IIcerik[];
  parametreler?: IParametre[];
  veri?: T;
}
```

### IAlan, IGrup (Filtre)
```typescript
interface IAlanI {
  alanIsmi?: string;
  baslik?: string;
  tipi?: AlanTipi;
  aktifEsitlikTuru?: EsitlikTuru;
  degeri?: any;
}
```

## Decorator'lar

### @debounce(wait)
```typescript
@debounce(500)
aramaYap(terim: string) { ... }
```

### @throttle(limit)
```typescript
@throttle(1000)
onWindowResize() { ... }
```

### @memoize
```typescript
@memoize
hesapla(a: number, b: number) { ... }
```

## Pattern'ler

**Base Component:**
```typescript
export abstract class FikoYTKokBilesenComponent {
  public readonly CD = inject(ChangeDetectorRef);
  public readonly FikoYT = inject(FikoYTService);
  subsList: Subscription[] = [];
}
```

**Signal-Based:**
```typescript
time = signal<Date>(new Date());
kart: InputSignal<IKart<any>>;
```

**Content Projection:**
```typescript
@ContentChildren(SablonDirective)
sablonListesi!: QueryList<SablonDirective>;
```

## Best Practices

✅ Standalone components
✅ Signal-based reactivity
✅ Generic types
✅ Performance optimizations
⚠️ Storybook eklenmeli
⚠️ Unit test coverage artırılmalı