@tuturuuu/ui 0.17.0 → 0.19.0

package/src/components/ui/tu-do/boards/boardId/kanban/rendering/kanban-deadline-tasks.test.ts

@@ -1,267 +0,0 @@
-import type { Task } from '@tuturuuu/types/primitives/Task';
-import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
-import { describe, expect, it } from 'vitest';
-import { buildKanbanDeadlineSections } from './kanban-deadline-tasks';
-
-type TestTask = Task & {
-  completed?: boolean | null;
-};
-
-const NOW = new Date('2026-05-31T12:00:00.000Z');
-
-const lists: TaskList[] = [
-  {
-    archived: false,
-    board_id: 'board-1',
-    color: 'BLUE',
-    created_at: '2026-05-01T00:00:00.000Z',
-    creator_id: 'user-1',
-    deleted: false,
-    id: 'active-list',
-    name: 'Active',
-    position: 0,
-    status: 'active',
-  },
-  {
-    archived: false,
-    board_id: 'board-1',
-    color: 'GRAY',
-    created_at: '2026-05-01T00:00:00.000Z',
-    creator_id: 'user-1',
-    deleted: false,
-    id: 'todo-list',
-    name: 'To Do',
-    position: 1,
-    status: 'not_started',
-  },
-  {
-    archived: false,
-    board_id: 'board-1',
-    color: 'ORANGE',
-    created_at: '2026-05-01T00:00:00.000Z',
-    creator_id: 'user-1',
-    deleted: false,
-    id: 'review-list',
-    name: 'Review',
-    position: 2,
-    status: 'review',
-  },
-  {
-    archived: false,
-    board_id: 'board-1',
-    color: 'GREEN',
-    created_at: '2026-05-01T00:00:00.000Z',
-    creator_id: 'user-1',
-    deleted: false,
-    id: 'done-list',
-    name: 'Done',
-    position: 3,
-    status: 'done',
-  },
-  {
-    archived: false,
-    board_id: 'board-1',
-    color: 'PURPLE',
-    created_at: '2026-05-01T00:00:00.000Z',
-    creator_id: 'user-1',
-    deleted: false,
-    id: 'closed-list',
-    name: 'Closed',
-    position: 4,
-    status: 'closed',
-  },
-  {
-    archived: false,
-    board_id: 'board-1',
-    color: 'CYAN',
-    created_at: '2026-05-01T00:00:00.000Z',
-    creator_id: 'user-1',
-    deleted: false,
-    id: 'external-list',
-    is_external_staging: true,
-    name: 'External',
-    position: 5,
-    status: 'active',
-  },
-];
-
-function task(overrides: Partial<TestTask>): TestTask {
-  return {
-    created_at: '2026-05-01T00:00:00.000Z',
-    display_number: 1,
-    id: 'task-1',
-    list_id: 'active-list',
-    name: 'Task',
-    ...overrides,
-  };
-}
-
-describe('buildKanbanDeadlineSections', () => {
-  it('partitions overdue and upcoming tasks and sorts each section by due date', () => {
-    const sections = buildKanbanDeadlineSections({
-      deadlineTasks: [
-        task({
-          id: 'future-late',
-          end_date: '2026-07-01T00:00:00.000Z',
-        }),
-        task({
-          id: 'overdue-late',
-          end_date: '2026-05-30T00:00:00.000Z',
-        }),
-        task({
-          id: 'future-near',
-          end_date: '2026-05-31T12:00:01.000Z',
-        }),
-        task({
-          id: 'overdue-early',
-          end_date: '2026-05-29T00:00:00.000Z',
-        }),
-      ],
-      lists,
-      now: NOW,
-      visibleTasks: [],
-    });
-
-    expect(sections.overdue.map((item) => item.id)).toEqual([
-      'overdue-early',
-      'overdue-late',
-    ]);
-    expect(sections.upcoming.map((item) => item.id)).toEqual([
-      'future-near',
-      'future-late',
-    ]);
-  });
-
-  it('keeps every future due-dated task in upcoming', () => {
-    const sections = buildKanbanDeadlineSections({
-      deadlineTasks: [
-        task({ id: 'tomorrow', end_date: '2026-06-01T00:00:00.000Z' }),
-        task({ id: 'next-quarter', end_date: '2026-08-31T00:00:00.000Z' }),
-      ],
-      lists,
-      now: NOW,
-      visibleTasks: [],
-    });
-
-    expect(sections.overdue).toEqual([]);
-    expect(sections.upcoming.map((item) => item.id)).toEqual([
-      'tomorrow',
-      'next-quarter',
-    ]);
-  });
-
-  it('excludes tasks without a valid due date', () => {
-    const sections = buildKanbanDeadlineSections({
-      deadlineTasks: [
-        task({ id: 'missing-date' }),
-        task({ id: 'invalid-date', end_date: 'not-a-date' }),
-        task({ id: 'valid-date', end_date: '2026-06-01T00:00:00.000Z' }),
-      ],
-      lists,
-      now: NOW,
-      visibleTasks: [],
-    });
-
-    expect(sections.upcoming.map((item) => item.id)).toEqual(['valid-date']);
-  });
-
-  it('excludes deleted, resolved, completed, closed, and missing-list tasks', () => {
-    const sections = buildKanbanDeadlineSections({
-      deadlineTasks: [
-        task({ id: 'kept', end_date: '2026-06-01T00:00:00.000Z' }),
-        task({
-          id: 'deleted',
-          deleted_at: '2026-05-31T00:00:00.000Z',
-          end_date: '2026-06-01T00:00:00.000Z',
-        }),
-        task({
-          id: 'completed-at',
-          completed_at: '2026-05-31T00:00:00.000Z',
-          end_date: '2026-06-01T00:00:00.000Z',
-        }),
-        task({
-          id: 'completed-flag',
-          completed: true,
-          end_date: '2026-06-01T00:00:00.000Z',
-        }),
-        task({
-          id: 'closed-at',
-          closed_at: '2026-05-31T00:00:00.000Z',
-          end_date: '2026-06-01T00:00:00.000Z',
-        }),
-        task({
-          id: 'review-list-task',
-          end_date: '2026-06-01T00:00:00.000Z',
-          list_id: 'review-list',
-        }),
-        task({
-          id: 'done-list-task',
-          end_date: '2026-06-01T00:00:00.000Z',
-          list_id: 'done-list',
-        }),
-        task({
-          id: 'closed-list-task',
-          end_date: '2026-06-01T00:00:00.000Z',
-          list_id: 'closed-list',
-        }),
-        task({
-          id: 'missing-list-task',
-          end_date: '2026-06-01T00:00:00.000Z',
-          list_id: 'missing-list',
-        }),
-      ],
-      lists,
-      now: NOW,
-      visibleTasks: [],
-    });
-
-    expect(sections.upcoming.map((item) => item.id)).toEqual(['kept']);
-  });
-
-  it('includes due-dated open external staging tasks', () => {
-    const sections = buildKanbanDeadlineSections({
-      deadlineTasks: [
-        task({
-          id: 'external-overdue',
-          end_date: '2026-05-30T00:00:00.000Z',
-          list_id: 'external-list',
-        }),
-        task({
-          id: 'external-upcoming',
-          end_date: '2026-06-01T00:00:00.000Z',
-          list_id: 'external-list',
-        }),
-      ],
-      lists,
-      now: NOW,
-      visibleTasks: [],
-    });
-
-    expect(sections.overdue.map((item) => item.id)).toEqual([
-      'external-overdue',
-    ]);
-    expect(sections.upcoming.map((item) => item.id)).toEqual([
-      'external-upcoming',
-    ]);
-  });
-
-  it('lets currently visible optimistic tasks override fetched deadline tasks', () => {
-    const sections = buildKanbanDeadlineSections({
-      deadlineTasks: [
-        task({ id: 'same-task', end_date: '2026-06-01T00:00:00.000Z' }),
-        task({ id: 'fetched-only', end_date: '2026-06-02T00:00:00.000Z' }),
-      ],
-      lists,
-      now: NOW,
-      visibleTasks: [
-        task({
-          id: 'same-task',
-          completed_at: '2026-05-31T00:00:00.000Z',
-          end_date: '2026-06-01T00:00:00.000Z',
-        }),
-      ],
-    });
-
-    expect(sections.upcoming.map((item) => item.id)).toEqual(['fetched-only']);
-  });
-});

package/src/components/ui/tu-do/boards/boardId/kanban/rendering/kanban-deadline-tasks.ts

@@ -1,112 +0,0 @@
-import type { Task } from '@tuturuuu/types/primitives/Task';
-import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
-
-export interface KanbanDeadlineSections {
-  overdue: Task[];
-  upcoming: Task[];
-}
-
-interface DeadlineTask extends Task {
-  completed?: boolean | null;
-}
-
-interface BuildKanbanDeadlineSectionsOptions {
-  deadlineTasks: Task[];
-  visibleTasks: Task[];
-  lists: TaskList[];
-  now?: Date;
-}
-
-const OPEN_DEADLINE_LIST_STATUSES = new Set(['not_started', 'active']);
-
-function getValidDateTime(value: string | null | undefined) {
-  if (!value) return null;
-
-  const time = new Date(value).getTime();
-  return Number.isFinite(time) ? time : null;
-}
-
-function compareDeadlineTasks(a: Task, b: Task) {
-  const aDueTime = getValidDateTime(a.end_date);
-  const bDueTime = getValidDateTime(b.end_date);
-
-  if (aDueTime !== null && bDueTime !== null && aDueTime !== bDueTime) {
-    return aDueTime - bDueTime;
-  }
-
-  const aCreatedTime = getValidDateTime(a.created_at);
-  const bCreatedTime = getValidDateTime(b.created_at);
-
-  if (
-    aCreatedTime !== null &&
-    bCreatedTime !== null &&
-    aCreatedTime !== bCreatedTime
-  ) {
-    return aCreatedTime - bCreatedTime;
-  }
-
-  return a.name.localeCompare(b.name) || a.id.localeCompare(b.id);
-}
-
-function isEligibleDeadlineTask(
-  task: DeadlineTask,
-  eligibleListIds: Set<string>
-) {
-  return (
-    eligibleListIds.has(task.list_id) &&
-    !task.deleted_at &&
-    !task.completed_at &&
-    task.completed !== true &&
-    !task.closed_at &&
-    getValidDateTime(task.end_date) !== null
-  );
-}
-
-export function buildKanbanDeadlineSections({
-  deadlineTasks,
-  visibleTasks,
-  lists,
-  now = new Date(),
-}: BuildKanbanDeadlineSectionsOptions): KanbanDeadlineSections {
-  const eligibleListIds = new Set(
-    lists
-      .filter(
-        (list) =>
-          !list.deleted &&
-          !list.archived &&
-          OPEN_DEADLINE_LIST_STATUSES.has(list.status)
-      )
-      .map((list) => list.id)
-  );
-  const mergedTasks = new Map<string, DeadlineTask>();
-
-  for (const task of deadlineTasks as DeadlineTask[]) {
-    mergedTasks.set(task.id, task);
-  }
-
-  for (const task of visibleTasks as DeadlineTask[]) {
-    mergedTasks.set(task.id, task);
-  }
-
-  const nowTime = now.getTime();
-  const overdue: Task[] = [];
-  const upcoming: Task[] = [];
-
-  for (const task of mergedTasks.values()) {
-    if (!isEligibleDeadlineTask(task, eligibleListIds)) continue;
-
-    const dueTime = getValidDateTime(task.end_date);
-    if (dueTime === null) continue;
-
-    if (dueTime < nowTime) {
-      overdue.push(task);
-    } else {
-      upcoming.push(task);
-    }
-  }
-
-  overdue.sort(compareDeadlineTasks);
-  upcoming.sort(compareDeadlineTasks);
-
-  return { overdue, upcoming };
-}

package/src/components/ui/tu-do/boards/boardId/kanban/rendering/kanban-skeleton.tsx

@@ -1,113 +0,0 @@
-'use client';
-
-import { Skeleton } from '@tuturuuu/ui/skeleton';
-import { cn } from '@tuturuuu/utils/format';
-
-const RAILS = ['upcoming', 'external'];
-const COLUMNS = [
-  { id: 'documents', cards: 3, width: 'w-[21rem] sm:w-[23rem]' },
-  { id: 'inactive', cards: 1, width: 'w-[20rem] sm:w-[22rem]' },
-  { id: 'todo', cards: 2, width: 'w-[21rem] sm:w-[23rem]' },
-  { id: 'blocked', cards: 1, width: 'w-[20rem] sm:w-[22rem]' },
-] as const;
-
-function KanbanCardSkeleton({ compact = false }: { compact?: boolean }) {
-  return (
-    <div className="rounded-lg border bg-card/80 p-3 shadow-xs">
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0 flex-1 space-y-2">
-          <Skeleton className="h-4 w-4/5" />
-          {!compact && <Skeleton className="h-4 w-3/5" />}
-        </div>
-        <Skeleton className="h-4 w-4 rounded" />
-      </div>
-      <div className="mt-3 flex items-center gap-2">
-        <Skeleton className="h-4 w-20 rounded-full" />
-        <Skeleton className="h-4 w-14 rounded-full" />
-        {!compact && <Skeleton className="h-4 w-16 rounded-full" />}
-      </div>
-      <div className="mt-3 flex items-center gap-2">
-        <Skeleton className="h-3 w-24" />
-        <Skeleton className="h-3 w-16" />
-      </div>
-    </div>
-  );
-}
-
-function KanbanColumnSkeleton({
-  cards,
-  className,
-}: {
-  cards: number;
-  className?: string;
-}) {
-  return (
-    <div
-      className={cn(
-        'flex h-full shrink-0 flex-col overflow-hidden rounded-xl border bg-muted/20',
-        className
-      )}
-    >
-      <div className="flex h-14 shrink-0 items-center justify-between border-b px-3">
-        <div className="flex min-w-0 items-center gap-2">
-          <Skeleton className="h-4 w-4 rounded" />
-          <Skeleton className="h-4 w-28" />
-          <Skeleton className="h-5 w-7 rounded-full" />
-        </div>
-        <Skeleton className="h-6 w-6 rounded-md" />
-      </div>
-      <div className="min-h-0 flex-1 space-y-3 overflow-hidden p-3">
-        {Array.from({ length: cards }).map((_, index) => (
-          <KanbanCardSkeleton
-            compact={index === cards - 1 && cards > 1}
-            key={`${cards}-${index}`}
-          />
-        ))}
-        <div className="mt-auto pt-3">
-          <Skeleton className="h-9 w-full rounded-lg border border-dashed bg-transparent" />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function KanbanSkeleton({ root = false }: { root?: boolean }) {
-  return (
-    <div
-      aria-hidden="true"
-      className="h-full overflow-hidden bg-transparent"
-      data-testid="kanban-skeleton"
-    >
-      <div
-        className={cn(
-          'flex h-full min-w-0 gap-2 overflow-hidden sm:gap-3',
-          root ? 'py-2 pr-0 pl-2' : 'p-2'
-        )}
-        data-testid="kanban-skeleton-frame"
-      >
-        <div className="hidden shrink-0 gap-2 sm:flex">
-          {RAILS.map((rail) => (
-            <div
-              className="flex h-full w-10 flex-col items-center rounded-xl border border-dashed bg-muted/10 p-2"
-              key={rail}
-            >
-              <Skeleton className="h-4 w-4 rounded" />
-              <Skeleton className="mt-5 h-5 w-5 rounded-full" />
-              <Skeleton className="mt-6 h-28 w-3 rounded-full" />
-            </div>
-          ))}
-        </div>
-
-        <div className="flex min-w-0 flex-1 gap-3 overflow-hidden">
-          {COLUMNS.map((column) => (
-            <KanbanColumnSkeleton
-              cards={column.cards}
-              className={column.width}
-              key={column.id}
-            />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/ui/tu-do/boards/boardId/kanban/selection/use-keyboard-shortcuts.ts

@@ -1,137 +0,0 @@
-'use client';
-
-import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
-import { useEffect } from 'react';
-import type { TaskFilters } from '../../task-filter';
-
-interface UseKeyboardShortcutsProps {
-  columns: TaskList[];
-  boardId: string | null;
-  filters?: TaskFilters;
-  selectedTasks: Set<string>;
-  isMultiSelectMode: boolean;
-  setIsMultiSelectMode: (enabled: boolean) => void;
-  createTask: (
-    boardId: string,
-    listId: string,
-    columns: TaskList[],
-    filters?: TaskFilters
-  ) => void;
-  clearSelection: () => void;
-  handleCrossBoardMove: () => void;
-}
-
-export function useKeyboardShortcuts({
-  columns,
-  boardId,
-  filters,
-  selectedTasks,
-  isMultiSelectMode,
-  setIsMultiSelectMode,
-  createTask,
-  clearSelection,
-  handleCrossBoardMove,
-}: UseKeyboardShortcutsProps) {
-  // General keyboard shortcuts
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      // Ignore shortcuts when typing in input fields
-      const target = event.target as HTMLElement;
-      const isInputField =
-        target.tagName === 'INPUT' ||
-        target.tagName === 'TEXTAREA' ||
-        target.isContentEditable;
-
-      if (event.key === 'Escape') {
-        clearSelection();
-      }
-
-      // C to create a new task (in the first list)
-      if (
-        event.key.toLowerCase() === 'c' &&
-        !event.ctrlKey &&
-        !event.metaKey &&
-        !event.shiftKey &&
-        !event.altKey &&
-        !isInputField
-      ) {
-        event.preventDefault();
-        event.stopPropagation();
-        // Open create dialog with the first list
-        const firstList = columns[0];
-        if (firstList && boardId) {
-          createTask(boardId, firstList.id, columns, filters);
-        }
-      }
-
-      // Ctrl/Cmd + M to move selected tasks to another board
-      if (
-        (event.ctrlKey || event.metaKey) &&
-        event.key.toLowerCase() === 'm' &&
-        selectedTasks.size > 0
-      ) {
-        event.preventDefault();
-        event.stopPropagation();
-        handleCrossBoardMove();
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [
-    clearSelection,
-    handleCrossBoardMove,
-    selectedTasks,
-    columns,
-    boardId,
-    createTask,
-    filters,
-  ]);
-
-  // Multi-select specific shortcuts (Shift key handling)
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      // Ignore if user is typing in an input field
-      const target = e.target as HTMLElement;
-      if (
-        target.tagName === 'INPUT' ||
-        target.tagName === 'TEXTAREA' ||
-        target.isContentEditable
-      ) {
-        return;
-      }
-
-      // Only Shift key (without other modifiers) enables multiselect mode
-      if (e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey) {
-        if (!isMultiSelectMode) {
-          setIsMultiSelectMode(true);
-        }
-      }
-
-      // Turn OFF if any forbidden modifier is pressed
-      if (e.metaKey || e.ctrlKey || e.altKey) {
-        if (isMultiSelectMode) {
-          setIsMultiSelectMode(false);
-        }
-      }
-    };
-
-    const handleKeyUp = (e: KeyboardEvent) => {
-      // Exit multiselect mode when all modifier keys are released
-      if (!e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey) {
-        // Only exit if we have no selected tasks
-        if (isMultiSelectMode && selectedTasks.size === 0) {
-          setIsMultiSelectMode(false);
-        }
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    window.addEventListener('keyup', handleKeyUp);
-
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-      window.removeEventListener('keyup', handleKeyUp);
-    };
-  }, [isMultiSelectMode, selectedTasks.size, setIsMultiSelectMode]);
-}