@semantic-components/ui-lab 0.63.0 → 0.65.0

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

@@ -1,281 +0,0 @@
-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

@@ -1,241 +0,0 @@
-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());
-    }
-  }
-}