# LivaKanbanBoard
Package: @dataliva/livalib
Description: @dataliva/livalib sürükle-bırak Kanban panosu bileşeni.

DevExtreme Sortable ve ScrollView üzerine kurulu bir Kanban panosu. Görev
kartları kolonlar arasında sürüklenip bırakılabilir, kolonlar başlıklarından
tutularak yeniden sıralanabilir. Her kartta açıklama, atanan kişi, termin
tarihi ve görsel alanları desteklenir; kart düzenleme ve görev ekleme için
dahili bir form içerir.

```tsx
import { LivaKanbanBoard, type KanbanItem, type KanbanColumn } from "@dataliva/livalib";
```

## Temel kullanım

`columns` kolonları, `items` görev kartlarını tanımlar. Bir kartın hangi
kolonda görüneceğini `status` alanı belirler; bu değer kolonun `id`
değeriyle eşleşmelidir. Kolonun `color` değeri kartların sol kenar
şeridine uygulanır. Kartları kolonlar arasında sürükleyerek deneyin.

**Örnek — Temel kullanım:**

```tsx
const kolonlar: KanbanColumn[] = [
  { id: "yapilacak", title: "Yapılacak", color: "#1e88e5" },
  { id: "devam", title: "Devam Ediyor", color: "#fb8c00" },
  { id: "bitti", title: "Bitti", color: "#43a047" },
];

const gorevler: KanbanItem[] = [
  { id: 1, title: "Bütçe şablonunu hazırla", status: "yapilacak", assignee: "Ayşe Yılmaz", dueDate: "18.06.2026" },
  { id: 3, title: "Maliyet merkezi listesini içe aktar", status: "devam", assignee: "Zeynep Kaya" },
  { id: 5, title: "Kur senaryolarını tanımla", status: "bitti", assignee: "Elif Şahin" },
  // ...
];

<div style={{ height: 460, width: "100%" }}>
  <LivaKanbanBoard items={gorevler} columns={kolonlar} />
</div>
```

Pano kabı yüksekliğini kapsayıcıdan alır; bu yüzden sabit yükseklikli bir
`div` içine yerleştirilmesi önerilir.

## Renkli başlıklar ve kolon taşıma

`columnHeaderColors` ile kolon kimliği başına başlık arka plan rengi
verilebilir. `allowColumnReorder` açıldığında kolonlar, başlıklarından
tutulup sürüklenerek yeniden sıralanabilir.

**Örnek — Renkli başlıklar ve kolon taşıma:**

```tsx
<div style={{ height: 440, width: "100%" }}>
  <LivaKanbanBoard
    items={sprintGorevleri}
    columns={kolonlar}
    columnHeaderColors={{ yapilacak: "#e3f2fd", devam: "#fff3e0", bitti: "#e8f5e9" }}
    allowColumnReorder
  />
</div>
```

## Veri tipleri

```ts
interface KanbanItem {
  id: number;
  title: string;
  status: string;          // kolonun id değeriyle eşleşir
  description?: string;
  dueDate?: Date | string; // string verilirse olduğu gibi gösterilir
  assignee?: string;       // kart üzerinde baş harfiyle gösterilir
  image?: string;
}

interface KanbanColumn {
  id: string;
  title: string;
  color?: string; // kartların sol kenar şeridi rengi
}
```

## Dahili görev formu (LivaKanbanBoardForm)

Her kolonun altındaki **+ Add Task** düğmesi ve kartlardaki kalem simgesi,
panonun içine gömülü `LivaKanbanBoardForm` bileşenini açar. Form; başlık,
açıklama, atanan kişi, termin tarihi ve görsel alanlarını düzenler. Mevcut
sürümde bu form paket kökünden ayrıca dışa aktarılmaz, yalnızca panonun
içinde kullanılır. Formun değer tipi şu şekildedir:

```ts
type KanbanTaskFormValue = {
  id?: number;
  title: string;
  description?: string;
  assignee?: string;
  dueDate?: Date;
  image?: string;
};
```

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `items` | `KanbanItem[]` | — |
| `columns` | `KanbanColumn[]` | — |
| `onAddTask` | `(statusId: string) => void` | — |
| `columnHeaderColors` | `Record<string, string>` | — |
| `sortableDragDirection` | `'vertical' \| 'horizontal'` | `'horizontal'` |
| `sortableAnimationDuration` | `number` | — |
| `sortableAllowDropInsideItem` | `boolean` | — |
| `allowColumnReorder` | `boolean` | `false` |
| `allowCardDropInside` | `boolean` | `false` |
| `enableDragScroll` | `boolean` | `false` |
| `scrollBounce` | `boolean` | `false` |
| `scrollViewHeight` | `number \| string` | — |
| `scrollViewWidth` | `number \| string` | — |
| `scrollViewProps` | `Partial<dxScrollViewOptions>` | — |
| `sortableProps` | `Partial<dxSortableOptions>` | — |

`scrollViewProps` ve `sortableProps`, alttaki DevExtreme ScrollView ve
Sortable bileşenlerine olduğu gibi aktarılır; ince ayar gerektiğinde
kullanılabilir.