@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/kanban-board/kanban-board.ts

@@ -0,0 +1,281 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  model,
+  output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScKanbanColumn } from './kanban-column';
+import type {
+  KanbanCard,
+  KanbanCardAddEvent,
+  KanbanCardDeleteEvent,
+  KanbanColumn,
+  KanbanDragEvent,
+} from './kanban-types';
+
+@Component({
+  selector: 'sc-kanban-board',
+  imports: [ScKanbanColumn],
+  template: `
+    <div [class]="containerClass()" role="region" aria-label="Kanban board">
+      @for (column of sortedColumns(); track column.id) {
+        <sc-kanban-column
+          [column]="column"
+          [cards]="getCardsForColumn(column.id)"
+          [disabled]="disabled()"
+          [showAddButton]="showAddCard()"
+          [showDeleteCard]="showDeleteCard()"
+          (cardMoved)="onCardMoved($event)"
+          (addCard)="onAddCard(column.id, $event)"
+          (deleteCard)="onDeleteCard(column.id, $event)"
+          (cardClick)="cardClick.emit($event)"
+          (collapseChange)="onColumnCollapse(column.id, $event)"
+        />
+      }
+
+      @if (showAddColumn()) {
+        <div class="flex-shrink-0 min-w-[280px] max-w-[320px]">
+          @if (isAddingColumn()) {
+            <div class="p-3 bg-muted/30 border rounded-lg">
+              <input
+                #columnInput
+                type="text"
+                class="w-full p-2 text-sm border rounded focus:outline-none focus:ring-2 focus:ring-ring"
+                placeholder="Enter column title..."
+                (keydown.enter)="submitNewColumn($event)"
+                (keydown.escape)="cancelAddingColumn()"
+                (blur)="onColumnInputBlur()"
+              />
+              <div class="flex items-center gap-2 mt-2">
+                <button
+                  type="button"
+                  class="px-3 py-1.5 text-xs font-medium bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors"
+                  (mousedown)="submitNewColumnFromButton()"
+                >
+                  Add Column
+                </button>
+                <button
+                  type="button"
+                  class="px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
+                  (mousedown)="cancelAddingColumn()"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          } @else {
+            <button
+              type="button"
+              class="w-full p-3 border-2 border-dashed rounded-lg text-sm text-muted-foreground hover:text-foreground hover:border-primary/50 hover:bg-muted/30 transition-colors flex items-center justify-center gap-2"
+              (click)="startAddingColumn()"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M5 12h14" />
+                <path d="M12 5v14" />
+              </svg>
+              Add Column
+            </button>
+          }
+        </div>
+      }
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScKanbanBoard {
+  readonly columns = model<KanbanColumn[]>([]);
+  readonly cards = model<KanbanCard[]>([]);
+  readonly disabled = input(false);
+  readonly showAddCard = input(true);
+  readonly showDeleteCard = input(true);
+  readonly showAddColumn = input(true);
+  readonly class = input<string>('');
+
+  readonly cardMoved = output<KanbanDragEvent>();
+  readonly cardAdded = output<KanbanCardAddEvent>();
+  readonly cardDeleted = output<KanbanCardDeleteEvent>();
+  readonly cardClick = output<KanbanCard>();
+  readonly columnAdded = output<string>();
+  readonly columnCollapsed = output<{ columnId: string; collapsed: boolean }>();
+
+  private isAddingColumnState = false;
+
+  protected readonly containerClass = computed(() =>
+    cn('flex gap-4 p-4 overflow-x-auto h-full', this.class()),
+  );
+
+  protected readonly sortedColumns = computed(() =>
+    [...this.columns()].sort((a, b) => a.order - b.order),
+  );
+
+  protected getCardsForColumn(columnId: string): KanbanCard[] {
+    return this.cards()
+      .filter((card) => card.columnId === columnId)
+      .sort((a, b) => a.order - b.order);
+  }
+
+  protected onCardMoved(event: KanbanDragEvent): void {
+    const cards = [...this.cards()];
+    const cardIndex = cards.findIndex((c) => c.id === event.card.id);
+
+    if (cardIndex === -1) return;
+
+    // Remove card from old position
+    const [movedCard] = cards.splice(cardIndex, 1);
+
+    // Update card's column
+    movedCard.columnId = event.targetColumnId;
+
+    // Get cards in target column (excluding the moved card)
+    const targetColumnCards = cards
+      .filter((c) => c.columnId === event.targetColumnId)
+      .sort((a, b) => a.order - b.order);
+
+    // Insert at new position
+    targetColumnCards.splice(event.targetIndex, 0, movedCard);
+
+    // Update order for all cards in target column
+    targetColumnCards.forEach((card, index) => {
+      card.order = index;
+    });
+
+    // If moving to different column, update source column orders
+    if (event.sourceColumnId !== event.targetColumnId) {
+      const sourceColumnCards = cards
+        .filter((c) => c.columnId === event.sourceColumnId)
+        .sort((a, b) => a.order - b.order);
+
+      sourceColumnCards.forEach((card, index) => {
+        card.order = index;
+      });
+    }
+
+    // Rebuild full cards array
+    const otherCards = cards.filter(
+      (c) =>
+        c.columnId !== event.targetColumnId &&
+        c.columnId !== event.sourceColumnId,
+    );
+
+    const sourceColumnCards =
+      event.sourceColumnId !== event.targetColumnId
+        ? cards.filter((c) => c.columnId === event.sourceColumnId)
+        : [];
+
+    this.cards.set([...otherCards, ...sourceColumnCards, ...targetColumnCards]);
+    this.cardMoved.emit(event);
+  }
+
+  protected onAddCard(columnId: string, title: string): void {
+    const newCard: KanbanCard = {
+      id: this.generateId(),
+      title,
+      columnId,
+      order: this.getCardsForColumn(columnId).length,
+    };
+
+    this.cards.update((cards) => [...cards, newCard]);
+    this.cardAdded.emit({ columnId, title });
+  }
+
+  protected onDeleteCard(columnId: string, card: KanbanCard): void {
+    this.cards.update((cards) => cards.filter((c) => c.id !== card.id));
+
+    // Reorder remaining cards in column
+    const columnCards = this.getCardsForColumn(columnId);
+    columnCards.forEach((c, index) => {
+      c.order = index;
+    });
+
+    this.cardDeleted.emit({ card, columnId });
+  }
+
+  protected onColumnCollapse(columnId: string, collapsed: boolean): void {
+    this.columns.update((columns) =>
+      columns.map((col) => (col.id === columnId ? { ...col, collapsed } : col)),
+    );
+    this.columnCollapsed.emit({ columnId, collapsed });
+  }
+
+  protected isAddingColumn(): boolean {
+    return this.isAddingColumnState;
+  }
+
+  protected startAddingColumn(): void {
+    this.isAddingColumnState = true;
+    requestAnimationFrame(() => {
+      const input = document.querySelector(
+        'sc-kanban-board input[type="text"]',
+      ) as HTMLInputElement;
+      input?.focus();
+    });
+  }
+
+  protected cancelAddingColumn(): void {
+    this.isAddingColumnState = false;
+  }
+
+  protected submitNewColumn(event: Event): void {
+    event.preventDefault();
+    const input = event.target as HTMLInputElement;
+    const title = input.value.trim();
+
+    if (title) {
+      this.addColumn(title);
+      input.value = '';
+    }
+
+    this.isAddingColumnState = false;
+  }
+
+  protected submitNewColumnFromButton(): void {
+    const input = document.querySelector(
+      'sc-kanban-board input[type="text"]',
+    ) as HTMLInputElement;
+    const title = input?.value.trim();
+
+    if (title) {
+      this.addColumn(title);
+    }
+
+    this.isAddingColumnState = false;
+  }
+
+  protected onColumnInputBlur(): void {
+    setTimeout(() => {
+      if (this.isAddingColumnState) {
+        this.isAddingColumnState = false;
+      }
+    }, 150);
+  }
+
+  private addColumn(title: string): void {
+    const newColumn: KanbanColumn = {
+      id: this.generateId(),
+      title,
+      order: this.columns().length,
+    };
+
+    this.columns.update((columns) => [...columns, newColumn]);
+    this.columnAdded.emit(title);
+  }
+
+  private generateId(): string {
+    return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
+}

package/src/lib/components/kanban-board/kanban-card.ts

@@ -0,0 +1,241 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import type { KanbanCard } from './kanban-types';
+
+@Component({
+  selector: 'sc-kanban-card',
+  template: `
+    <div
+      [class]="cardClass()"
+      [attr.draggable]="!disabled()"
+      (dragstart)="onDragStart($event)"
+      (dragend)="onDragEnd($event)"
+      role="listitem"
+      [attr.aria-label]="card().title"
+      tabindex="0"
+      (keydown)="onKeyDown($event)"
+    >
+      <!-- Labels -->
+      @if (card().labels?.length) {
+        <div class="flex flex-wrap gap-1 mb-2">
+          @for (label of card().labels; track label.id) {
+            <span
+              class="px-1.5 py-0.5 text-xs font-medium rounded"
+              [style.background-color]="label.color + '20'"
+              [style.color]="label.color"
+            >
+              {{ label.text }}
+            </span>
+          }
+        </div>
+      }
+
+      <!-- Title -->
+      <h4 class="font-medium text-sm text-foreground leading-tight">
+        {{ card().title }}
+      </h4>
+
+      <!-- Description -->
+      @if (card().description) {
+        <p class="mt-1 text-xs text-muted-foreground line-clamp-2">
+          {{ card().description }}
+        </p>
+      }
+
+      <!-- Footer -->
+      @if (card().assignee || card().dueDate || card().priority) {
+        <div class="flex items-center justify-between mt-3 pt-2 border-t">
+          <div class="flex items-center gap-2">
+            <!-- Priority -->
+            @if (card().priority) {
+              <span [class]="priorityClass()">
+                {{ priorityIcon() }}
+              </span>
+            }
+
+            <!-- Due date -->
+            @if (card().dueDate) {
+              <span class="text-xs" [class]="dueDateClass()">
+                {{ formatDate(card().dueDate!) }}
+              </span>
+            }
+          </div>
+
+          <!-- Assignee -->
+          @if (card().assignee) {
+            <div
+              class="w-6 h-6 rounded-full bg-primary/10 text-primary text-xs font-medium flex items-center justify-center"
+              [attr.title]="card().assignee!.name"
+            >
+              @if (card().assignee!.avatar) {
+                <img
+                  [src]="card().assignee!.avatar"
+                  [alt]="card().assignee!.name"
+                  class="w-full h-full rounded-full object-cover"
+                />
+              } @else {
+                {{
+                  card().assignee!.initials ||
+                    card().assignee!.name.charAt(0).toUpperCase()
+                }}
+              }
+            </div>
+          }
+        </div>
+      }
+
+      <!-- Delete button -->
+      @if (showDelete()) {
+        <button
+          type="button"
+          class="absolute top-2 right-2 p-1 rounded opacity-0 group-hover:opacity-100 hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-opacity"
+          (click)="onDelete($event)"
+          aria-label="Delete card"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M18 6 6 18" />
+            <path d="m6 6 12 12" />
+          </svg>
+        </button>
+      }
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScKanbanCard {
+  readonly card = input.required<KanbanCard>();
+  readonly disabled = input(false);
+  readonly showDelete = input(true);
+  readonly class = input<string>('');
+
+  readonly dragStart = output<DragEvent>();
+  readonly dragEnd = output<DragEvent>();
+  readonly delete = output<void>();
+  readonly cardClick = output<KanbanCard>();
+
+  protected readonly cardClass = computed(() =>
+    cn(
+      'group relative p-3 bg-card border rounded-lg shadow-sm cursor-grab active:cursor-grabbing',
+      'hover:border-primary/50 hover:shadow-md transition-all',
+      'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+      this.disabled() && 'opacity-50 cursor-not-allowed',
+      this.class(),
+    ),
+  );
+
+  protected readonly priorityClass = computed(() => {
+    const priority = this.card().priority;
+    const base = 'text-xs font-medium';
+
+    switch (priority) {
+      case 'urgent':
+        return cn(base, 'text-red-600 dark:text-red-400');
+      case 'high':
+        return cn(base, 'text-orange-600 dark:text-orange-400');
+      case 'medium':
+        return cn(base, 'text-yellow-600 dark:text-yellow-400');
+      case 'low':
+        return cn(base, 'text-green-600 dark:text-green-400');
+      default:
+        return base;
+    }
+  });
+
+  protected priorityIcon(): string {
+    const priority = this.card().priority;
+    switch (priority) {
+      case 'urgent':
+        return '!!!';
+      case 'high':
+        return '!!';
+      case 'medium':
+        return '!';
+      case 'low':
+        return '-';
+      default:
+        return '';
+    }
+  }
+
+  protected readonly dueDateClass = computed(() => {
+    const dueDate = this.card().dueDate;
+    if (!dueDate) return 'text-muted-foreground';
+
+    const now = new Date();
+    const due = new Date(dueDate);
+    const diffDays = Math.ceil(
+      (due.getTime() - now.getTime()) / (1000 * 60 * 60 * 24),
+    );
+
+    if (diffDays < 0) {
+      return 'text-red-600 dark:text-red-400';
+    } else if (diffDays <= 2) {
+      return 'text-orange-600 dark:text-orange-400';
+    }
+    return 'text-muted-foreground';
+  });
+
+  protected formatDate(date: Date): string {
+    const d = new Date(date);
+    const month = d.toLocaleString('default', { month: 'short' });
+    const day = d.getDate();
+    return `${month} ${day}`;
+  }
+
+  protected onDragStart(event: DragEvent): void {
+    if (this.disabled()) {
+      event.preventDefault();
+      return;
+    }
+
+    event.dataTransfer?.setData(
+      'application/json',
+      JSON.stringify(this.card()),
+    );
+    event.dataTransfer!.effectAllowed = 'move';
+
+    // Add dragging class after a brief delay
+    const target = event.target as HTMLElement;
+    requestAnimationFrame(() => {
+      target.classList.add('opacity-50');
+    });
+
+    this.dragStart.emit(event);
+  }
+
+  protected onDragEnd(event: DragEvent): void {
+    const target = event.target as HTMLElement;
+    target.classList.remove('opacity-50');
+    this.dragEnd.emit(event);
+  }
+
+  protected onDelete(event: MouseEvent): void {
+    event.stopPropagation();
+    this.delete.emit();
+  }
+
+  protected onKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.cardClick.emit(this.card());
+    }
+  }
+}