@tuturuuu/ui 0.0.4 → 0.2.0

package/src/components/ui/tu-do/boards/boardId/timeline/timeline-utils.test.ts

@@ -0,0 +1,134 @@
+import type { Task } from '@tuturuuu/types/primitives/Task';
+import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { buildTimelineModel, computeTimelineSpans } from './timeline-utils';
+
+const lists: TaskList[] = [
+  {
+    id: 'todo',
+    name: 'To Do',
+    status: 'not_started',
+    color: 'GRAY',
+    position: 0,
+    board_id: 'board-1',
+    created_at: '2026-05-01T00:00:00.000Z',
+    creator_id: 'user-1',
+    deleted: false,
+    archived: false,
+  },
+  {
+    id: 'doing',
+    name: 'Doing',
+    status: 'active',
+    color: 'BLUE',
+    position: 1,
+    board_id: 'board-1',
+    created_at: '2026-05-01T00:00:00.000Z',
+    creator_id: 'user-1',
+    deleted: false,
+    archived: false,
+  },
+];
+
+function task(overrides: Partial<Task> & Pick<Task, 'id' | 'name'>): Task {
+  return {
+    display_number: 1,
+    created_at: '2026-05-01T00:00:00.000Z',
+    list_id: 'todo',
+    ...overrides,
+  } as Task;
+}
+
+describe('timeline row model', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('keeps every scheduled task on a readable row within its list group', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2026-05-07T12:00:00.000Z'));
+
+    const model = buildTimelineModel(
+      [
+        task({
+          id: 'task-a',
+          name: 'First readable task',
+          start_date: '2026-05-08T00:00:00.000Z',
+          end_date: '2026-05-10T23:59:59.999Z',
+        }),
+        task({
+          id: 'task-b',
+          name: 'Second overlapping task',
+          start_date: '2026-05-08T00:00:00.000Z',
+          end_date: '2026-05-08T23:59:59.999Z',
+        }),
+      ],
+      lists
+    );
+
+    const todo = model.groups.find((group) => group.id === 'todo');
+
+    expect(todo?.rowCount).toBe(2);
+    expect(todo?.items.map((item) => item.task.name)).toEqual([
+      'First readable task',
+      'Second overlapping task',
+    ]);
+    expect(todo?.items.map((item) => item.rowIndex)).toEqual([0, 1]);
+  });
+
+  it('preserves unscheduled and unknown-list tasks', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2026-05-07T12:00:00.000Z'));
+
+    const model = buildTimelineModel(
+      [
+        task({ id: 'unscheduled', name: 'No date task' }),
+        task({
+          id: 'external',
+          name: 'External task with source metadata',
+          list_id: 'external-list',
+          source_workspace_name: 'External workspace',
+          source_list_name: 'Source To Do',
+          start_date: '2026-05-12T00:00:00.000Z',
+          end_date: '2026-05-12T23:59:59.999Z',
+        } as Partial<Task> & Pick<Task, 'id' | 'name'>),
+      ],
+      lists
+    );
+
+    expect(model.unscheduled.map((item) => item.id)).toEqual(['unscheduled']);
+    expect(model.groups.at(-1)).toEqual(
+      expect.objectContaining({
+        id: 'unknown-list',
+        rowCount: 1,
+      })
+    );
+    expect(model.groups.at(-1)?.items[0]?.task.source_workspace_name).toBe(
+      'External workspace'
+    );
+  });
+
+  it('keeps span computation stable for existing analytics exports', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2026-05-07T12:00:00.000Z'));
+
+    const spans = computeTimelineSpans(
+      [
+        task({
+          id: 'task-a',
+          name: 'Timed task',
+          start_date: '2026-05-07T00:00:00.000Z',
+          end_date: '2026-05-09T23:59:59.999Z',
+        }),
+      ],
+      lists
+    );
+
+    expect(spans.spans[0]).toEqual(
+      expect.objectContaining({
+        isOngoing: true,
+      })
+    );
+    expect(spans.spans[0]?.durationDays).toBeGreaterThan(0);
+  });
+});

package/src/components/ui/tu-do/boards/boardId/timeline/timeline-utils.ts

@@ -0,0 +1,468 @@
+import type { Task } from '@tuturuuu/types/primitives/Task';
+import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
+import dayjs from 'dayjs';
+
+export type TimelineInteractionMode = 'move' | 'resize-start' | 'resize-end';
+
+export interface TimelineItem {
+  task: Task;
+  list: TaskList | null;
+  start: Date;
+  end: Date;
+  durationDays: number;
+  offsetDays: number;
+  isPast: boolean;
+  isOngoing: boolean;
+  isFuture: boolean;
+}
+
+export interface TimelineLaneItem extends TimelineItem {
+  rowIndex: number;
+}
+
+export interface TimelineGroup {
+  id: string;
+  list: TaskList | null;
+  items: TimelineLaneItem[];
+  rowCount: number;
+}
+
+export interface MonthSegment {
+  key: string;
+  start: Date;
+  startIndex: number;
+  days: number;
+}
+
+export interface TimelineSpansResult {
+  spans: Array<
+    TimelineItem & {
+      rowIndex: number;
+    }
+  >;
+  unscheduled: Task[];
+  minDate: Date;
+  maxDate: Date;
+  rowCount: number;
+}
+
+export interface TimelineModel {
+  groups: TimelineGroup[];
+  unscheduled: Task[];
+  days: Date[];
+  monthSegments: MonthSegment[];
+  rangeStart: Date;
+  rangeEnd: Date;
+  scheduledCount: number;
+  todayIndex: number;
+}
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+const DEFAULT_PAST_PADDING_DAYS = 3;
+const DEFAULT_FUTURE_PADDING_DAYS = 6;
+const EMPTY_PAST_PADDING_DAYS = 7;
+const EMPTY_FUTURE_PADDING_DAYS = 14;
+const TIMELINE_LIST_STATUS_ORDER: Record<string, number> = {
+  not_started: 0,
+  active: 1,
+  done: 2,
+  closed: 3,
+};
+
+function normalizeTaskRange(task: Task, todayMid: dayjs.Dayjs) {
+  if (!task.start_date && !task.end_date) {
+    return null;
+  }
+
+  const first = dayjs(task.start_date || task.end_date || todayMid.toDate());
+  const second = dayjs(task.end_date || task.start_date || first.toDate());
+  const start = first.isAfter(second)
+    ? second.startOf('day')
+    : first.startOf('day');
+  const end = second.isBefore(first)
+    ? first.startOf('day')
+    : second.startOf('day');
+
+  return {
+    start: start.toDate(),
+    end: end.toDate(),
+    durationDays: Math.max(1, end.diff(start, 'day') + 1),
+  };
+}
+
+export function enumerateDays(start: Date, end: Date) {
+  const days: Date[] = [];
+  let cursor = dayjs(start).startOf('day');
+  const endDate = dayjs(end).startOf('day');
+
+  while (cursor.isBefore(endDate) || cursor.isSame(endDate, 'day')) {
+    days.push(cursor.toDate());
+    cursor = cursor.add(1, 'day');
+  }
+
+  return days;
+}
+
+export function buildMonthSegments(days: Date[]) {
+  const segments: MonthSegment[] = [];
+
+  for (const [index, day] of days.entries()) {
+    const key = dayjs(day).format('YYYY-MM');
+    const last = segments[segments.length - 1];
+
+    if (last?.key === key) {
+      last.days += 1;
+      continue;
+    }
+
+    segments.push({
+      key,
+      start: day,
+      startIndex: index,
+      days: 1,
+    });
+  }
+
+  return segments;
+}
+
+function withTaskRows(
+  items: Array<Omit<TimelineItem, 'offsetDays'>>,
+  rangeStart: Date
+): { items: TimelineLaneItem[]; rowCount: number } {
+  const rowItems = items.map((item, rowIndex) => {
+    return {
+      ...item,
+      rowIndex,
+      offsetDays: Math.floor(
+        (item.start.getTime() - rangeStart.getTime()) / DAY_MS
+      ),
+    };
+  });
+
+  return {
+    items: rowItems,
+    rowCount: Math.max(1, rowItems.length),
+  };
+}
+
+export function computeTimelineSpans(
+  tasks: Task[],
+  lists: TaskList[]
+): TimelineSpansResult {
+  const listById = new Map(
+    lists.map((list) => [String(list.id), list] as const)
+  );
+  const todayMid = dayjs().startOf('day');
+  const scheduled: TimelineSpansResult['spans'] = [];
+  const unscheduled: Task[] = [];
+
+  for (const task of tasks) {
+    const range = normalizeTaskRange(task, todayMid);
+
+    if (!range) {
+      unscheduled.push(task);
+      continue;
+    }
+
+    const startDay = dayjs(range.start);
+    const endDay = dayjs(range.end);
+
+    scheduled.push({
+      task,
+      list: listById.get(String(task.list_id)) ?? null,
+      start: range.start,
+      end: range.end,
+      durationDays: range.durationDays,
+      rowIndex: 0,
+      offsetDays: 0,
+      isPast: endDay.isBefore(todayMid),
+      isOngoing: !startDay.isAfter(todayMid) && !endDay.isBefore(todayMid),
+      isFuture: startDay.isAfter(todayMid),
+    });
+  }
+
+  scheduled.sort((left, right) => {
+    const startDiff = left.start.getTime() - right.start.getTime();
+    if (startDiff !== 0) return startDiff;
+
+    const endDiff = left.end.getTime() - right.end.getTime();
+    if (endDiff !== 0) return endDiff;
+
+    return left.task.name.localeCompare(right.task.name);
+  });
+
+  const rowEnds: Date[] = [];
+  for (const span of scheduled) {
+    let rowIndex = rowEnds.findIndex(
+      (rowEnd) => rowEnd.getTime() < span.start.getTime()
+    );
+    if (rowIndex === -1) {
+      rowIndex = rowEnds.length;
+      rowEnds.push(span.end);
+    } else {
+      rowEnds[rowIndex] = span.end;
+    }
+    span.rowIndex = rowIndex;
+  }
+
+  const minDate = scheduled.length
+    ? scheduled.reduce(
+        (min, span) => (span.start < min ? span.start : min),
+        scheduled[0]!.start
+      )
+    : todayMid.toDate();
+  const maxDate = scheduled.length
+    ? scheduled.reduce(
+        (max, span) => (span.end > max ? span.end : max),
+        scheduled[0]!.end
+      )
+    : todayMid.toDate();
+
+  return {
+    spans: scheduled,
+    unscheduled,
+    minDate,
+    maxDate,
+    rowCount: Math.max(1, rowEnds.length),
+  };
+}
+
+export function buildTimelineModel(
+  tasks: Task[],
+  lists: TaskList[]
+): TimelineModel {
+  const sortedLists = lists
+    .map((list, index) => ({ list, index }))
+    .sort((left, right) => {
+      const leftRank =
+        TIMELINE_LIST_STATUS_ORDER[left.list.status ?? ''] ??
+        Number.MAX_SAFE_INTEGER;
+      const rightRank =
+        TIMELINE_LIST_STATUS_ORDER[right.list.status ?? ''] ??
+        Number.MAX_SAFE_INTEGER;
+
+      if (leftRank !== rightRank) {
+        return leftRank - rightRank;
+      }
+
+      return left.index - right.index;
+    })
+    .map(({ list }) => list);
+
+  const listById = new Map(
+    sortedLists.map((list) => [String(list.id), list] as const)
+  );
+  const todayMid = dayjs().startOf('day');
+  const scheduled: Array<Omit<TimelineItem, 'offsetDays'>> = [];
+  const unscheduled: Task[] = [];
+
+  for (const task of tasks) {
+    const range = normalizeTaskRange(task, todayMid);
+
+    if (!range) {
+      unscheduled.push(task);
+      continue;
+    }
+
+    const startDay = dayjs(range.start);
+    const endDay = dayjs(range.end);
+
+    scheduled.push({
+      task,
+      list: listById.get(String(task.list_id)) ?? null,
+      start: range.start,
+      end: range.end,
+      durationDays: range.durationDays,
+      isPast: endDay.isBefore(todayMid),
+      isOngoing: !startDay.isAfter(todayMid) && !endDay.isBefore(todayMid),
+      isFuture: startDay.isAfter(todayMid),
+    });
+  }
+
+  const rangeStart = scheduled.length
+    ? dayjs(
+        scheduled.reduce(
+          (min, item) => (item.start < min ? item.start : min),
+          scheduled[0]!.start
+        )
+      )
+        .subtract(DEFAULT_PAST_PADDING_DAYS, 'day')
+        .startOf('day')
+        .toDate()
+    : todayMid.subtract(EMPTY_PAST_PADDING_DAYS, 'day').toDate();
+
+  const rangeEnd = scheduled.length
+    ? dayjs(
+        scheduled.reduce(
+          (max, item) => (item.end > max ? item.end : max),
+          scheduled[0]!.end
+        )
+      )
+        .add(DEFAULT_FUTURE_PADDING_DAYS, 'day')
+        .startOf('day')
+        .toDate()
+    : todayMid.add(EMPTY_FUTURE_PADDING_DAYS, 'day').toDate();
+
+  const days = enumerateDays(rangeStart, rangeEnd);
+  const monthSegments = buildMonthSegments(days);
+  const todayIndex = Math.round(
+    (todayMid.toDate().getTime() - rangeStart.getTime()) / DAY_MS
+  );
+
+  const groups: TimelineGroup[] = sortedLists.map((list) => {
+    const scheduledItems = scheduled
+      .filter((item) => item.task.list_id === list.id)
+      .sort((left, right) => {
+        const startDiff = left.start.getTime() - right.start.getTime();
+        if (startDiff !== 0) return startDiff;
+
+        const durationDiff = right.durationDays - left.durationDays;
+        if (durationDiff !== 0) return durationDiff;
+
+        return left.task.name.localeCompare(right.task.name);
+      });
+
+    const { items, rowCount } = withTaskRows(scheduledItems, rangeStart);
+
+    return {
+      id: String(list.id),
+      list,
+      items,
+      rowCount,
+    };
+  });
+
+  const orphanScheduledItems = scheduled
+    .filter((item) => !listById.has(String(item.task.list_id)))
+    .sort((left, right) => left.start.getTime() - right.start.getTime());
+
+  const { items: orphanItems, rowCount: orphanRowCount } = withTaskRows(
+    orphanScheduledItems,
+    rangeStart
+  );
+
+  if (orphanItems.length > 0) {
+    groups.push({
+      id: 'unknown-list',
+      list: null,
+      items: orphanItems,
+      rowCount: orphanRowCount,
+    });
+  }
+
+  return {
+    groups,
+    unscheduled,
+    days,
+    monthSegments,
+    rangeStart,
+    rangeEnd,
+    scheduledCount: scheduled.length,
+    todayIndex,
+  };
+}
+
+function applyOriginalTime(
+  draft: dayjs.Dayjs,
+  original: dayjs.Dayjs | null,
+  fallback: 'start' | 'end'
+) {
+  if (!original) {
+    return fallback === 'start' ? draft.startOf('day') : draft.endOf('day');
+  }
+
+  const originalIsStartBoundary =
+    original.valueOf() === original.startOf('day').valueOf();
+  const originalIsEndBoundary =
+    original.valueOf() === original.endOf('day').valueOf();
+
+  if (originalIsStartBoundary) {
+    return draft.startOf('day');
+  }
+
+  if (originalIsEndBoundary) {
+    return draft.endOf('day');
+  }
+
+  return draft
+    .hour(original.hour())
+    .minute(original.minute())
+    .second(original.second())
+    .millisecond(original.millisecond());
+}
+
+export function deriveDraftRange({
+  task,
+  mode,
+  dayDelta,
+  originalStart,
+  originalEnd,
+}: {
+  task: Task;
+  mode: TimelineInteractionMode;
+  dayDelta: number;
+  originalStart: Date;
+  originalEnd: Date;
+}) {
+  const originalTaskStart = task.start_date ? dayjs(task.start_date) : null;
+  const originalTaskEnd = task.end_date ? dayjs(task.end_date) : null;
+  let nextStart = dayjs(originalStart);
+  let nextEnd = dayjs(originalEnd);
+
+  switch (mode) {
+    case 'move':
+      nextStart = applyOriginalTime(
+        nextStart.add(dayDelta, 'day'),
+        originalTaskStart,
+        'start'
+      );
+      nextEnd = applyOriginalTime(
+        nextEnd.add(dayDelta, 'day'),
+        originalTaskEnd,
+        'end'
+      );
+      break;
+    case 'resize-start':
+      nextStart = applyOriginalTime(
+        nextStart.add(dayDelta, 'day'),
+        originalTaskStart,
+        'start'
+      );
+      if (nextStart.isAfter(nextEnd)) {
+        nextStart = applyOriginalTime(nextEnd, originalTaskStart, 'start');
+      }
+      break;
+    case 'resize-end':
+      nextEnd = applyOriginalTime(
+        nextEnd.add(dayDelta, 'day'),
+        originalTaskEnd,
+        'end'
+      );
+      if (nextEnd.isBefore(nextStart)) {
+        nextEnd = applyOriginalTime(nextStart, originalTaskEnd, 'end');
+      }
+      break;
+  }
+
+  return {
+    start: nextStart.toDate(),
+    end: nextEnd.toDate(),
+  };
+}
+
+export function pixelToDayDelta(px: number, dayWidth: number) {
+  if (dayWidth <= 0) return 0;
+  const ratio = px / dayWidth;
+  if (Math.abs(ratio) < 0.35) return 0;
+  return Math.round(ratio);
+}
+
+export function getWeekNumber(date: Date) {
+  const temp = new Date(
+    Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())
+  );
+  temp.setUTCDate(temp.getUTCDate() + 4 - (temp.getUTCDay() || 7));
+  const yearStart = new Date(Date.UTC(temp.getUTCFullYear(), 0, 1));
+  return Math.ceil(((temp.getTime() - yearStart.getTime()) / DAY_MS + 1) / 7);
+}