@tuturuuu/ui 0.16.0 → 0.18.0

package/src/components/ui/tu-do/boards/boardId/kanban/dnd/auto-scroll.ts

@@ -1,160 +0,0 @@
-'use client';
-
-import type {
-  DragMoveEvent,
-  DragOverEvent,
-  DragStartEvent,
-} from '@dnd-kit/core';
-import { useCallback, useEffect, useRef } from 'react';
-
-export const KANBAN_EDGE_AUTO_SCROLL_THRESHOLD = 100;
-const KANBAN_EDGE_AUTO_SCROLL_SPEED = 10;
-const KANBAN_EDGE_AUTO_SCROLL_MAX_SPEED = 30;
-
-type KanbanDragAutoScrollEvent = DragMoveEvent | DragOverEvent | DragStartEvent;
-
-interface HorizontalRect {
-  left: number;
-  right: number;
-}
-
-function getTouchListClientX(touches: unknown) {
-  if (!touches || typeof touches !== 'object') return null;
-
-  const list = touches as ArrayLike<{ clientX?: unknown }> & {
-    item?: (index: number) => { clientX?: unknown } | null;
-  };
-  const touch = list.item?.(0) ?? list[0];
-
-  return typeof touch?.clientX === 'number' ? touch.clientX : null;
-}
-
-function getPointerEventClientX(event: Event) {
-  if ('clientX' in event && typeof event.clientX === 'number') {
-    return event.clientX;
-  }
-
-  if ('touches' in event) {
-    const touchX = getTouchListClientX(event.touches);
-    if (touchX !== null) return touchX;
-  }
-
-  if ('changedTouches' in event) {
-    return getTouchListClientX(event.changedTouches);
-  }
-
-  return null;
-}
-
-function getDragEventDeltaX(event: KanbanDragAutoScrollEvent) {
-  return 'delta' in event && typeof event.delta?.x === 'number'
-    ? event.delta.x
-    : 0;
-}
-
-function getDragActiveCenterX(event: KanbanDragAutoScrollEvent) {
-  const activeRect =
-    event.active.rect.current.translated ?? event.active.rect.current.initial;
-
-  return activeRect ? activeRect.left + activeRect.width / 2 : null;
-}
-
-export function getKanbanDragAutoScrollPointerX(
-  event: KanbanDragAutoScrollEvent
-) {
-  const pointerStartX = getPointerEventClientX(event.activatorEvent);
-
-  if (pointerStartX !== null) {
-    return pointerStartX + getDragEventDeltaX(event);
-  }
-
-  return getDragActiveCenterX(event);
-}
-
-export function getKanbanEdgeAutoScrollAmount(
-  pointerX: number | null,
-  rect: HorizontalRect,
-  options: {
-    maxSpeed?: number;
-    speed?: number;
-    threshold?: number;
-  } = {}
-) {
-  if (pointerX === null) return 0;
-
-  const threshold = options.threshold ?? KANBAN_EDGE_AUTO_SCROLL_THRESHOLD;
-  const speed = options.speed ?? KANBAN_EDGE_AUTO_SCROLL_SPEED;
-  const maxSpeed = options.maxSpeed ?? KANBAN_EDGE_AUTO_SCROLL_MAX_SPEED;
-
-  if (pointerX <= rect.left + threshold) {
-    const distanceFromLeft = Math.max(0, pointerX - rect.left);
-    const intensity = 1 - distanceFromLeft / threshold;
-    return -Math.min(speed + intensity * (maxSpeed - speed), maxSpeed);
-  }
-
-  if (pointerX >= rect.right - threshold) {
-    const distanceFromRight = Math.max(0, rect.right - pointerX);
-    const intensity = 1 - distanceFromRight / threshold;
-    return Math.min(speed + intensity * (maxSpeed - speed), maxSpeed);
-  }
-
-  return 0;
-}
-
-export function useAutoScroll(
-  scrollContainerRef: React.RefObject<HTMLDivElement | null>
-) {
-  const autoScrollRafRef = useRef<number | null>(null);
-  const isAutoScrollActiveRef = useRef(false);
-  const pointerXRef = useRef<number | null>(null);
-
-  const stopAutoScroll = useCallback(() => {
-    isAutoScrollActiveRef.current = false;
-    pointerXRef.current = null;
-
-    if (autoScrollRafRef.current !== null) {
-      cancelAnimationFrame(autoScrollRafRef.current);
-      autoScrollRafRef.current = null;
-    }
-  }, []);
-
-  const autoScroll = useCallback(() => {
-    if (!isAutoScrollActiveRef.current || !scrollContainerRef.current) {
-      autoScrollRafRef.current = null;
-      return;
-    }
-
-    const container = scrollContainerRef.current;
-    const scrollAmount = getKanbanEdgeAutoScrollAmount(
-      pointerXRef.current,
-      container.getBoundingClientRect()
-    );
-
-    if (scrollAmount !== 0) {
-      container.scrollLeft += scrollAmount;
-    }
-
-    autoScrollRafRef.current = requestAnimationFrame(autoScroll);
-  }, [scrollContainerRef]);
-
-  const startAutoScroll = useCallback(() => {
-    isAutoScrollActiveRef.current = true;
-
-    if (autoScrollRafRef.current === null) {
-      autoScrollRafRef.current = requestAnimationFrame(autoScroll);
-    }
-  }, [autoScroll]);
-
-  const updateAutoScrollPointerX = useCallback((pointerX: number | null) => {
-    pointerXRef.current = pointerX;
-  }, []);
-
-  useEffect(() => stopAutoScroll, [stopAutoScroll]);
-
-  return {
-    autoScrollRafRef,
-    startAutoScroll,
-    stopAutoScroll,
-    updateAutoScrollPointerX,
-  };
-}

package/src/components/ui/tu-do/boards/boardId/kanban/dnd/column-reorder.ts

@@ -1,65 +0,0 @@
-import { arrayMove } from '@dnd-kit/sortable';
-import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
-import { getStatusOrder } from '../kanban-constants';
-
-export interface ColumnPositionUpdate {
-  listId: string;
-  newPosition: number;
-}
-
-export function sortKanbanColumns(columns: TaskList[]): TaskList[] {
-  return [...columns].sort((a, b) => {
-    const statusDelta = getStatusOrder(a.status) - getStatusOrder(b.status);
-    if (statusDelta !== 0) return statusDelta;
-
-    const positionDelta = (a.position ?? 0) - (b.position ?? 0);
-    if (positionDelta !== 0) return positionDelta;
-
-    return (
-      new Date(a.created_at ?? 0).getTime() -
-      new Date(b.created_at ?? 0).getTime()
-    );
-  });
-}
-
-export function getColumnReorderUpdates(
-  columns: TaskList[],
-  activeColumnId: string,
-  overColumnId: string
-): ColumnPositionUpdate[] | null {
-  const activeColumn = columns.find((column) => column.id === activeColumnId);
-  const overColumn = columns.find((column) => column.id === overColumnId);
-
-  if (!activeColumn || !overColumn) {
-    return null;
-  }
-
-  if (activeColumn.status !== overColumn.status) {
-    return null;
-  }
-
-  const statusColumns = [...columns]
-    .filter(
-      (column) =>
-        column.status === activeColumn.status && !column.is_external_staging
-    )
-    .sort((a, b) => (a.position ?? 0) - (b.position ?? 0));
-
-  const activeIndex = statusColumns.findIndex(
-    (column) => column.id === activeColumnId
-  );
-  const overIndex = statusColumns.findIndex(
-    (column) => column.id === overColumnId
-  );
-
-  if (activeIndex === -1 || overIndex === -1 || activeIndex === overIndex) {
-    return null;
-  }
-
-  return arrayMove(statusColumns, activeIndex, overIndex).map(
-    (column, index) => ({
-      listId: column.id,
-      newPosition: index,
-    })
-  );
-}

package/src/components/ui/tu-do/boards/boardId/kanban/dnd/drag-preview.tsx

@@ -1,117 +0,0 @@
-'use client';
-
-import type { Task } from '@tuturuuu/types/primitives/Task';
-import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
-import { useMemo } from 'react';
-import { BoardColumn } from '../../board-column';
-import { TaskCard } from '../../task';
-
-interface DragPreviewProps {
-  activeTask: Task | null;
-  activeColumn: TaskList | null;
-  tasks: Task[];
-  columns: TaskList[];
-  boardId: string;
-  isPersonalWorkspace: boolean;
-  canUseBoardAssignees?: boolean;
-  assigneeMemberSource?: 'workspace' | 'board' | 'workspace-and-board';
-  isMultiSelectMode: boolean;
-  selectedTasks: Set<string>;
-  onUpdate: () => void;
-  wsId: string;
-}
-
-export function DragPreview({
-  activeTask,
-  activeColumn,
-  tasks,
-  columns,
-  boardId,
-  isPersonalWorkspace,
-  canUseBoardAssignees,
-  assigneeMemberSource,
-  isMultiSelectMode,
-  selectedTasks,
-  onUpdate,
-  wsId,
-}: DragPreviewProps) {
-  const MemoizedTaskOverlay = useMemo(() => {
-    if (!activeTask) return null;
-
-    const taskList = columns.find(
-      (col) => String(col.id) === String(activeTask.list_id)
-    );
-
-    const isMultiCardDrag =
-      isMultiSelectMode &&
-      selectedTasks.size > 1 &&
-      selectedTasks.has(activeTask.id);
-
-    return (
-      <div className="relative">
-        <TaskCard
-          task={activeTask}
-          taskList={taskList}
-          boardId={boardId ?? ''}
-          isOverlay
-          onUpdate={onUpdate}
-          isPersonalWorkspace={isPersonalWorkspace}
-          canUseBoardAssignees={canUseBoardAssignees}
-          assigneeMemberSource={assigneeMemberSource}
-        />
-        {isMultiCardDrag && (
-          <>
-            {/* Stacked card effect - show up to 2 additional card shadows */}
-            <div className="pointer-events-none absolute top-1 left-1 -z-10 h-full w-full rounded-lg border border-dynamic-blue/25 bg-dynamic-blue/5" />
-            {selectedTasks.size > 2 && (
-              <div className="pointer-events-none absolute top-2 left-2 -z-20 h-full w-full rounded-lg border border-dynamic-blue/15 bg-dynamic-blue/3" />
-            )}
-            {/* Badge showing count */}
-            <div className="absolute -top-2 -right-2 flex h-7 w-7 items-center justify-center rounded-full bg-dynamic-blue text-white ring-2 ring-background">
-              <span className="font-bold text-xs">{selectedTasks.size}</span>
-            </div>
-          </>
-        )}
-      </div>
-    );
-  }, [
-    activeTask,
-    columns,
-    boardId,
-    onUpdate,
-    isPersonalWorkspace,
-    canUseBoardAssignees,
-    assigneeMemberSource,
-    isMultiSelectMode,
-    selectedTasks,
-  ]);
-
-  const MemoizedColumnOverlay = useMemo(
-    () =>
-      activeColumn ? (
-        <BoardColumn
-          column={activeColumn}
-          boardId={boardId ?? ''}
-          tasks={tasks.filter((task) => task.list_id === activeColumn.id)}
-          isOverlay
-          isPersonalWorkspace={isPersonalWorkspace}
-          canUseBoardAssignees={canUseBoardAssignees}
-          assigneeMemberSource={assigneeMemberSource}
-          onUpdate={onUpdate}
-          wsId={wsId}
-        />
-      ) : null,
-    [
-      activeColumn,
-      tasks,
-      boardId,
-      isPersonalWorkspace,
-      canUseBoardAssignees,
-      assigneeMemberSource,
-      onUpdate,
-      wsId,
-    ]
-  );
-
-  return <>{MemoizedTaskOverlay || MemoizedColumnOverlay}</>;
-}

package/src/components/ui/tu-do/boards/boardId/kanban/dnd/kanban-sort-helpers.ts

@@ -1,76 +0,0 @@
-/**
- * Sort key helper functions for kanban board
- * Handles sort key calculation with automatic retry on gap exhaustion
- */
-
-import type { Task } from '@tuturuuu/types/primitives/Task';
-import { toast } from '@tuturuuu/ui/sonner';
-import {
-  calculateSortKey,
-  normalizeListSortKeys,
-  SortKeyGapExhaustedError,
-} from '@tuturuuu/utils/task-helper';
-
-/**
- * Calculate sort key with automatic retry on gap exhaustion or inverted keys
- * If SortKeyGapExhaustedError is thrown (including for inverted keys), normalizes the list and retries once
- *
- * @param prevSortKey - Sort key of the previous task (null if inserting at beginning)
- * @param nextSortKey - Sort key of the next task (null if inserting at end)
- * @param listId - ID of the list where the task is being inserted
- * @param visualOrderTasks - Optional array of tasks in their current visual order (respects filters/sorting)
- * @returns Promise resolving to the calculated sort key
- * @throws Error if calculation fails even after normalization
- */
-export async function calculateSortKeyWithRetry(
-  wsId: string,
-  prevSortKey: number | null | undefined,
-  nextSortKey: number | null | undefined,
-  listId: string,
-  visualOrderTasks?: Pick<Task, 'id' | 'sort_key' | 'created_at'>[]
-): Promise<number> {
-  try {
-    return calculateSortKey(prevSortKey, nextSortKey);
-  } catch (error) {
-    if (error instanceof SortKeyGapExhaustedError) {
-      console.warn(
-        '⚠️ Sort key gap exhausted or inverted keys detected, normalizing list and retrying...',
-        {
-          listId,
-          prevSortKey,
-          nextSortKey,
-          error: error.message,
-        }
-      );
-
-      try {
-        // Normalize the list sort keys to match visual order
-        // If visual order is provided, use it; otherwise normalize by database order
-        await normalizeListSortKeys(wsId, listId, visualOrderTasks);
-        console.log('✅ List sort keys normalized, refetching...');
-
-        // After normalization, we can't reuse the old prev/next values
-        // Show a toast asking user to retry
-        toast.info(
-          'Task order has been normalized. Please try the drag operation again.',
-          { duration: 3000 }
-        );
-
-        // Return a safe default to avoid crashes
-        // The next drag operation will use properly normalized keys
-        return calculateSortKey(prevSortKey, null);
-      } catch (retryError) {
-        console.error(
-          '❌ Failed to calculate sort key after normalization:',
-          retryError
-        );
-        toast.error(
-          'Failed to reorder task. Please try again or refresh the page.'
-        );
-        throw retryError;
-      }
-    }
-    // Re-throw non-SortKeyGapExhaustedError errors
-    throw error;
-  }
-}