@tuturuuu/ui 0.16.0 → 0.18.0

package/src/components/ui/tu-do/boards/boardId/task-card/TaskCardMetadata.tsx

@@ -1,152 +0,0 @@
-import {
-  Box,
-  FileText,
-  Image as ImageIcon,
-  Link2,
-  Play,
-} from '@tuturuuu/icons';
-import type { Task } from '@tuturuuu/types/primitives/Task';
-import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
-import { Badge } from '@tuturuuu/ui/badge';
-import { cn } from '@tuturuuu/utils/format';
-import { isTaskBoardResolvedStatus } from '@tuturuuu/utils/task-list-status';
-import { getDescriptionMetadata } from '@tuturuuu/utils/text-helper';
-import { memo } from 'react';
-import { TaskEstimationDisplay } from '../../../shared/task-estimation-display';
-import { TaskLabelsDisplay } from '../../../shared/task-labels-display';
-import { getPriorityIndicator } from '../../../utils/taskPriorityUtils';
-import { sortByDisplayName } from '../board-text-utils';
-
-interface TaskCardMetadataProps {
-  task: Task;
-  taskList?: TaskList;
-  estimationType?: string;
-  /** Localized label for "Hidden Labels" tooltip. Passed to TaskLabelsDisplay. */
-  hiddenLabelsLabel?: string;
-}
-
-export const TaskCardMetadata = memo(function TaskCardMetadata({
-  task,
-  taskList,
-  estimationType,
-  hiddenLabelsLabel,
-}: TaskCardMetadataProps) {
-  const descriptionMeta = getDescriptionMetadata(task.description);
-
-  // Hide metadata when the list itself represents resolved work.
-  if (isTaskBoardResolvedStatus(taskList?.status)) {
-    return null;
-  }
-
-  return (
-    <div className="flex items-center gap-2">
-      <div className="scrollbar-hide flex w-full min-w-0 items-center gap-1 overflow-auto whitespace-nowrap rounded-lg">
-        {/* Priority */}
-        {!task.closed_at && task.priority && (
-          <div className="flex-none overflow-hidden">
-            {getPriorityIndicator(task.priority)}
-          </div>
-        )}
-
-        {/* Project indicator */}
-        {!task.closed_at && task.projects && task.projects.length > 0 && (
-          <div className="min-w-0 shrink-0">
-            <Badge
-              variant="secondary"
-              className={cn(
-                'h-5 border px-2 text-[10px]',
-                'border-dynamic-sky/30 bg-dynamic-sky/10 text-dynamic-sky'
-              )}
-            >
-              <Box className="h-2.5 w-2.5" />
-              {task.projects.length === 1
-                ? task.projects[0]?.name
-                : `${task.projects.length} projects`}
-            </Badge>
-          </div>
-        )}
-
-        {/* Estimation Points */}
-        {!task.closed_at && task.estimation_points && (
-          <div className="min-w-0 shrink-0">
-            <TaskEstimationDisplay
-              points={task.estimation_points}
-              size="sm"
-              estimationType={estimationType}
-              showIcon
-            />
-          </div>
-        )}
-
-        {/* Labels */}
-        {!task.closed_at && task.labels && task.labels.length > 0 && (
-          <div className="flex min-w-0 shrink-0 flex-wrap gap-1">
-            {/* Sort labels for deterministic display order */}
-            <TaskLabelsDisplay
-              labels={sortByDisplayName(task.labels)}
-              size="sm"
-              hiddenLabelsLabel={hiddenLabelsLabel}
-            />
-          </div>
-        )}
-
-        {/* Description indicators */}
-        {!task.closed_at &&
-          (descriptionMeta.hasText ||
-            descriptionMeta.hasImages ||
-            descriptionMeta.hasVideos ||
-            descriptionMeta.hasLinks) && (
-            <div className="flex min-w-0 shrink-0 items-center gap-0.5">
-              {descriptionMeta.hasText && (
-                <div
-                  className="flex items-center gap-0.5 rounded bg-dynamic-surface/50 py-0.5"
-                  title="Has description"
-                >
-                  <FileText className="h-3.5 w-3.5 text-muted-foreground" />
-                </div>
-              )}
-              {descriptionMeta.hasImages && (
-                <div
-                  className="flex items-center gap-0.5 rounded bg-dynamic-surface/50 py-0.5"
-                  title={`${descriptionMeta.imageCount} image${descriptionMeta.imageCount > 1 ? 's' : ''}`}
-                >
-                  <ImageIcon className="h-3.5 w-3.5 text-muted-foreground" />
-                  {descriptionMeta.imageCount > 1 && (
-                    <span className="text-[9px] text-muted-foreground">
-                      {descriptionMeta.imageCount}
-                    </span>
-                  )}
-                </div>
-              )}
-              {descriptionMeta.hasVideos && (
-                <div
-                  className="flex items-center gap-0.5 rounded bg-dynamic-surface/50 py-0.5"
-                  title={`${descriptionMeta.videoCount} video${descriptionMeta.videoCount > 1 ? 's' : ''}`}
-                >
-                  <Play className="h-3.5 w-3.5 text-muted-foreground" />
-                  {descriptionMeta.videoCount > 1 && (
-                    <span className="text-[9px] text-muted-foreground">
-                      {descriptionMeta.videoCount}
-                    </span>
-                  )}
-                </div>
-              )}
-              {descriptionMeta.hasLinks && (
-                <div
-                  className="flex items-center gap-0.5 rounded bg-dynamic-surface/50 px-1 py-0.5"
-                  title={`${descriptionMeta.linkCount} link${descriptionMeta.linkCount > 1 ? 's' : ''}`}
-                >
-                  <Link2 className="h-2.5 w-2.5 text-muted-foreground" />
-                  {descriptionMeta.linkCount > 1 && (
-                    <span className="text-[9px] text-muted-foreground">
-                      {descriptionMeta.linkCount}
-                    </span>
-                  )}
-                </div>
-              )}
-            </div>
-          )}
-      </div>
-    </div>
-  );
-});

package/src/components/ui/tu-do/boards/boardId/task-card/measured-task-card.tsx

@@ -1,118 +0,0 @@
-import type { Task } from '@tuturuuu/types/primitives/Task';
-import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
-import { type MouseEvent, useEffect, useRef } from 'react';
-import { TaskCard, type TaskCardAssigneeMemberSource } from './task-card';
-
-interface MeasuredTaskCardProps {
-  task: Task;
-  taskList: TaskList;
-  boardId: string;
-  workspaceId?: string;
-  availableLists?: TaskList[];
-  onUpdate: () => void;
-  isSelected: boolean;
-  isMultiSelectMode?: boolean;
-  isPersonalWorkspace?: boolean;
-  canUseBoardAssignees?: boolean;
-  assigneeMemberSource?: TaskCardAssigneeMemberSource;
-  onSelect?: (taskId: string, event: MouseEvent) => void;
-  onClearSelection?: () => void;
-  suppressSortableTransform?: boolean;
-  hiddenFromLayout?: boolean;
-  onHeight: (height: number) => void;
-  optimisticUpdateInProgress?: Set<string>;
-  selectedTasks?: Set<string>;
-  bulkUpdateCustomDueDate?: (date: Date | null) => Promise<void>;
-  readOnly?: boolean;
-}
-
-export function MeasuredTaskCard({
-  task,
-  taskList,
-  boardId,
-  workspaceId,
-  availableLists,
-  onUpdate,
-  isSelected,
-  isMultiSelectMode,
-  isPersonalWorkspace,
-  canUseBoardAssignees,
-  assigneeMemberSource,
-  onSelect,
-  onClearSelection,
-  suppressSortableTransform,
-  hiddenFromLayout,
-  onHeight,
-  optimisticUpdateInProgress,
-  selectedTasks,
-  bulkUpdateCustomDueDate,
-  readOnly = false,
-}: MeasuredTaskCardProps) {
-  const ref = useRef<HTMLDivElement | null>(null);
-  const onHeightRef = useRef(onHeight);
-  const hiddenFromLayoutRef = useRef(Boolean(hiddenFromLayout));
-
-  useEffect(() => {
-    onHeightRef.current = onHeight;
-  }, [onHeight]);
-
-  useEffect(() => {
-    hiddenFromLayoutRef.current = Boolean(hiddenFromLayout);
-  }, [hiddenFromLayout]);
-
-  useEffect(() => {
-    if (!ref.current) return;
-    const node = ref.current;
-    const card = node.firstElementChild as HTMLElement;
-    if (!card) return;
-
-    const publishHeight = (height: number) => {
-      if (hiddenFromLayoutRef.current || height <= 0) return;
-      onHeightRef.current(height);
-    };
-
-    publishHeight(card.getBoundingClientRect().height);
-
-    const observer = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        if (entry.target === card) {
-          publishHeight(entry.contentRect.height);
-        }
-      }
-    });
-
-    observer.observe(card);
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <div
-      ref={ref}
-      data-id={task.id}
-      data-task-card-id={task.id}
-      data-task-list-id={taskList.id}
-      hidden={hiddenFromLayout}
-    >
-      <TaskCard
-        task={task}
-        taskList={taskList}
-        boardId={boardId}
-        workspaceId={workspaceId}
-        availableLists={availableLists}
-        onUpdate={onUpdate}
-        isSelected={isSelected}
-        isMultiSelectMode={isMultiSelectMode}
-        isPersonalWorkspace={isPersonalWorkspace}
-        canUseBoardAssignees={canUseBoardAssignees}
-        assigneeMemberSource={assigneeMemberSource}
-        onSelect={onSelect}
-        onClearSelection={onClearSelection}
-        suppressSortableTransform={suppressSortableTransform}
-        optimisticUpdateInProgress={optimisticUpdateInProgress}
-        selectedTasks={selectedTasks}
-        bulkUpdateCustomDueDate={bulkUpdateCustomDueDate}
-        readOnly={readOnly}
-      />
-    </div>
-  );
-}

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-archive-visibility.test.ts

@@ -1,44 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { shouldRenderTaskCardQuickArchive } from './task-card-archive-visibility';
-
-describe('shouldRenderTaskCardQuickArchive', () => {
-  it('shows quick archive for document lists when a closed list exists', () => {
-    expect(
-      shouldRenderTaskCardQuickArchive({
-        hasTargetClosedList: true,
-        isOverlay: false,
-        taskListStatus: 'documents',
-      })
-    ).toBe(true);
-  });
-
-  it('keeps quick archive hidden for document lists without a closed list', () => {
-    expect(
-      shouldRenderTaskCardQuickArchive({
-        hasTargetClosedList: false,
-        isOverlay: false,
-        taskListStatus: 'documents',
-      })
-    ).toBe(false);
-  });
-
-  it('keeps non-done workflow lists unchanged', () => {
-    expect(
-      shouldRenderTaskCardQuickArchive({
-        hasTargetClosedList: true,
-        isOverlay: false,
-        taskListStatus: 'active',
-      })
-    ).toBe(false);
-  });
-
-  it('hides quick archive while rendering a drag overlay', () => {
-    expect(
-      shouldRenderTaskCardQuickArchive({
-        hasTargetClosedList: true,
-        isOverlay: true,
-        taskListStatus: 'documents',
-      })
-    ).toBe(false);
-  });
-});

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-archive-visibility.ts

@@ -1,17 +0,0 @@
-interface TaskCardQuickArchiveVisibilityOptions {
-  hasTargetClosedList: boolean;
-  isOverlay: boolean;
-  taskListStatus?: string | null;
-}
-
-export function shouldRenderTaskCardQuickArchive({
-  hasTargetClosedList,
-  isOverlay,
-  taskListStatus,
-}: TaskCardQuickArchiveVisibilityOptions) {
-  return (
-    !isOverlay &&
-    hasTargetClosedList &&
-    (taskListStatus === 'done' || taskListStatus === 'documents')
-  );
-}

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-checkbox-style.ts

@@ -1,39 +0,0 @@
-import type { SupportedColor } from '@tuturuuu/types/primitives/SupportedColors';
-import { cn } from '@tuturuuu/utils/format';
-import { getListColorClasses } from '../../../utils/taskColorUtils';
-
-const CHECKED_LIST_TONE_CLASSES: Record<SupportedColor, string> = {
-  BLUE: 'data-[state=checked]:border-dynamic-blue/70 data-[state=checked]:bg-dynamic-blue/20 data-[state=checked]:text-dynamic-blue',
-  CYAN: 'data-[state=checked]:border-dynamic-cyan/70 data-[state=checked]:bg-dynamic-cyan/20 data-[state=checked]:text-dynamic-cyan',
-  GRAY: 'data-[state=checked]:border-dynamic-gray/70 data-[state=checked]:bg-dynamic-gray/20 data-[state=checked]:text-foreground',
-  GREEN:
-    'data-[state=checked]:border-dynamic-green/70 data-[state=checked]:bg-dynamic-green/20 data-[state=checked]:text-dynamic-green',
-  INDIGO:
-    'data-[state=checked]:border-dynamic-indigo/70 data-[state=checked]:bg-dynamic-indigo/20 data-[state=checked]:text-dynamic-indigo',
-  ORANGE:
-    'data-[state=checked]:border-dynamic-orange/70 data-[state=checked]:bg-dynamic-orange/20 data-[state=checked]:text-dynamic-orange',
-  PINK: 'data-[state=checked]:border-dynamic-pink/70 data-[state=checked]:bg-dynamic-pink/20 data-[state=checked]:text-dynamic-pink',
-  PURPLE:
-    'data-[state=checked]:border-dynamic-purple/70 data-[state=checked]:bg-dynamic-purple/20 data-[state=checked]:text-dynamic-purple',
-  RED: 'data-[state=checked]:border-dynamic-red/70 data-[state=checked]:bg-dynamic-red/20 data-[state=checked]:text-dynamic-red',
-  YELLOW:
-    'data-[state=checked]:border-dynamic-yellow/70 data-[state=checked]:bg-dynamic-yellow/20 data-[state=checked]:text-dynamic-yellow',
-};
-
-export const TASK_CARD_OVERDUE_CHECKBOX_TONE_CLASSES =
-  'border-dynamic-red/70 bg-dynamic-red/10 ring-1 ring-dynamic-red/20 data-[state=checked]:border-dynamic-red/70 data-[state=checked]:bg-dynamic-red/20 data-[state=checked]:text-dynamic-red';
-
-export function getTaskCardCheckboxToneClasses(color?: SupportedColor | null) {
-  return getListColorClasses(color ?? 'GRAY');
-}
-
-export function getTaskCardSelectionCheckboxToneClasses(
-  color?: SupportedColor | null
-) {
-  const resolvedColor = color ?? 'GRAY';
-
-  return cn(
-    getTaskCardCheckboxToneClasses(resolvedColor),
-    CHECKED_LIST_TONE_CLASSES[resolvedColor]
-  );
-}

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-comparator.test.ts

@@ -1,104 +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 type { TaskCardProps } from './task-card';
-import { areTaskCardPropsEqual } from './task-card-comparator';
-
-const task: Task = {
-  created_at: '2026-05-07T00:00:00.000Z',
-  display_number: 1,
-  id: 'task-1',
-  list_id: 'list-1',
-  name: 'Task',
-};
-
-const taskList: TaskList = {
-  archived: false,
-  board_id: 'board-1',
-  color: 'BLUE',
-  created_at: '2026-05-07T00:00:00.000Z',
-  creator_id: 'user-1',
-  deleted: false,
-  id: 'list-1',
-  name: 'To Do',
-  position: 0,
-  status: 'not_started',
-};
-
-type StaticTaskCardOverrides = Partial<TaskCardProps> & {
-  dragDisabled?: boolean;
-  sortableId?: string;
-};
-
-function taskCardProps(overrides: StaticTaskCardOverrides = {}): TaskCardProps {
-  return {
-    boardId: 'board-1',
-    onUpdate: () => {},
-    task,
-    taskList,
-    ...overrides,
-  } as TaskCardProps;
-}
-
-describe('areTaskCardPropsEqual', () => {
-  it('rerenders when static drag behavior changes', () => {
-    expect(
-      areTaskCardPropsEqual(
-        taskCardProps({ dragDisabled: false }),
-        taskCardProps({ dragDisabled: true })
-      )
-    ).toBe(false);
-  });
-
-  it('rerenders when the sortable id changes', () => {
-    expect(
-      areTaskCardPropsEqual(
-        taskCardProps({ sortableId: 'task-1' }),
-        taskCardProps({ sortableId: 'deadline-upcoming-task-1' })
-      )
-    ).toBe(false);
-  });
-
-  it('rerenders when personal scheduling duration changes', () => {
-    expect(
-      areTaskCardPropsEqual(
-        taskCardProps({ task: { ...task, total_duration: null } }),
-        taskCardProps({ task: { ...task, total_duration: 1.5 } })
-      )
-    ).toBe(false);
-  });
-
-  it('rerenders a selected card when the bulk selection grows', () => {
-    expect(
-      areTaskCardPropsEqual(
-        taskCardProps({
-          isMultiSelectMode: true,
-          isSelected: true,
-          selectedTasks: new Set(['task-1']),
-        }),
-        taskCardProps({
-          isMultiSelectMode: true,
-          isSelected: true,
-          selectedTasks: new Set(['task-1', 'task-2']),
-        })
-      )
-    ).toBe(false);
-  });
-
-  it('rerenders a selected card when the bulk selection changes with the same size', () => {
-    expect(
-      areTaskCardPropsEqual(
-        taskCardProps({
-          isMultiSelectMode: true,
-          isSelected: true,
-          selectedTasks: new Set(['task-1', 'task-2']),
-        }),
-        taskCardProps({
-          isMultiSelectMode: true,
-          isSelected: true,
-          selectedTasks: new Set(['task-1', 'task-3']),
-        })
-      )
-    ).toBe(false);
-  });
-});

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-comparator.ts

@@ -1,123 +0,0 @@
-import type { TaskCardProps } from './task-card';
-
-function areSelectedTaskSetsEqual(
-  previousSelectedTasks?: Set<string>,
-  nextSelectedTasks?: Set<string>
-) {
-  if (previousSelectedTasks === nextSelectedTasks) return true;
-  if (!previousSelectedTasks || !nextSelectedTasks) {
-    return (
-      (previousSelectedTasks?.size ?? 0) === (nextSelectedTasks?.size ?? 0)
-    );
-  }
-
-  if (previousSelectedTasks.size !== nextSelectedTasks.size) return false;
-
-  for (const taskId of previousSelectedTasks) {
-    if (!nextSelectedTasks.has(taskId)) return false;
-  }
-
-  return true;
-}
-
-export function areTaskCardPropsEqual(
-  prev: TaskCardProps,
-  next: TaskCardProps
-) {
-  if (prev.isOverlay !== next.isOverlay) return false;
-  if (prev.readOnly !== next.readOnly) return false;
-  if (prev.isSelected !== next.isSelected) return false;
-  if (prev.isMultiSelectMode !== next.isMultiSelectMode) return false;
-  if (
-    (prev.isSelected || next.isSelected) &&
-    (prev.isMultiSelectMode || next.isMultiSelectMode) &&
-    !areSelectedTaskSetsEqual(prev.selectedTasks, next.selectedTasks)
-  ) {
-    return false;
-  }
-  if (prev.boardId !== next.boardId) return false;
-  if (prev.workspaceId !== next.workspaceId) return false;
-  if (prev.deadlineContext !== next.deadlineContext) return false;
-  if (prev.deadlineNow !== next.deadlineNow) return false;
-  if (prev.dragDisabled !== next.dragDisabled) return false;
-  if (prev.sortableId !== next.sortableId) return false;
-  if (prev.suppressSortableTransform !== next.suppressSortableTransform) {
-    return false;
-  }
-  if (
-    (prev.optimisticUpdateInProgress?.has(prev.task.id) ?? false) !==
-    (next.optimisticUpdateInProgress?.has(next.task.id) ?? false)
-  ) {
-    return false;
-  }
-
-  if (
-    prev.taskList?.color !== next.taskList?.color ||
-    prev.taskList?.status !== next.taskList?.status
-  ) {
-    return false;
-  }
-
-  const previousTask = prev.task;
-  const nextTask = next.task;
-  if (previousTask === nextTask) return true;
-
-  const keys: (keyof typeof previousTask)[] = [
-    'id',
-    'name',
-    'description',
-    'priority',
-    'closed_at',
-    'end_date',
-    'start_date',
-    'completed_at',
-    'estimation_points',
-    'total_duration',
-    'is_splittable',
-    'min_split_duration_minutes',
-    'max_split_duration_minutes',
-    'calendar_hours',
-    'auto_schedule',
-    'relationship_summary',
-    'list_id',
-  ];
-
-  for (const key of keys) {
-    if (previousTask[key] !== nextTask[key]) return false;
-  }
-
-  const previousLabels = (previousTask.labels || [])
-    .map((label) => label.name)
-    .sort()
-    .join('|');
-  const nextLabels = (nextTask.labels || [])
-    .map((label) => label.name)
-    .sort()
-    .join('|');
-  if (previousLabels !== nextLabels) return false;
-
-  const previousAssignees = (previousTask.assignees || [])
-    .map((assignee) => assignee.id)
-    .filter(Boolean)
-    .sort()
-    .join('|');
-  const nextAssignees = (nextTask.assignees || [])
-    .map((assignee) => assignee.id)
-    .filter(Boolean)
-    .sort()
-    .join('|');
-  if (previousAssignees !== nextAssignees) return false;
-
-  const previousProjects = (previousTask.projects || [])
-    .map((project) => project.id)
-    .filter(Boolean)
-    .sort()
-    .join('|');
-  const nextProjects = (nextTask.projects || [])
-    .map((project) => project.id)
-    .filter(Boolean)
-    .sort()
-    .join('|');
-
-  return previousProjects === nextProjects;
-}

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-completion-checkbox-visibility.test.ts

@@ -1,31 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { shouldRenderTaskCardCompletionCheckbox } from './task-card-completion-checkbox-visibility';
-
-describe('shouldRenderTaskCardCompletionCheckbox', () => {
-  it('renders the done checkbox in normal task mode', () => {
-    expect(
-      shouldRenderTaskCardCompletionCheckbox({
-        isMultiSelectMode: false,
-        taskListStatus: 'active',
-      })
-    ).toBe(true);
-  });
-
-  it('hides the done checkbox in multi-select mode', () => {
-    expect(
-      shouldRenderTaskCardCompletionCheckbox({
-        isMultiSelectMode: true,
-        taskListStatus: 'active',
-      })
-    ).toBe(false);
-  });
-
-  it('keeps document-list completion checkboxes hidden', () => {
-    expect(
-      shouldRenderTaskCardCompletionCheckbox({
-        isMultiSelectMode: false,
-        taskListStatus: 'documents',
-      })
-    ).toBe(false);
-  });
-});

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-completion-checkbox-visibility.ts

@@ -1,9 +0,0 @@
-export function shouldRenderTaskCardCompletionCheckbox({
-  isMultiSelectMode,
-  taskListStatus,
-}: {
-  isMultiSelectMode: boolean;
-  taskListStatus?: string | null;
-}) {
-  return taskListStatus !== 'documents' && !isMultiSelectMode;
-}