@tuturuuu/ui 0.17.0 → 0.18.0

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

@@ -1,169 +0,0 @@
-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,
-  MAX_TIMELINE_DAYS,
-} 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('caps the rendered day window for extreme scheduled task ranges', () => {
-    vi.useFakeTimers();
-    vi.setSystemTime(new Date('2026-05-07T12:00:00.000Z'));
-
-    const model = buildTimelineModel(
-      [
-        task({
-          id: 'old-task',
-          name: 'Very old task',
-          start_date: '2020-01-01T00:00:00.000Z',
-          end_date: '2020-01-02T23:59:59.999Z',
-        }),
-        task({
-          id: 'future-task',
-          name: 'Very future task',
-          start_date: '2035-01-01T00:00:00.000Z',
-          end_date: '2035-01-02T23:59:59.999Z',
-        }),
-      ],
-      lists
-    );
-
-    expect(model.days).toHaveLength(MAX_TIMELINE_DAYS);
-    expect(model.rangeStart.getTime()).toBeLessThanOrEqual(
-      new Date('2026-05-07T00:00:00.000Z').getTime()
-    );
-    expect(model.rangeEnd.getTime()).toBeGreaterThanOrEqual(
-      new Date('2026-05-07T00:00:00.000Z').getTime()
-    );
-  });
-
-  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

@@ -1,517 +0,0 @@
-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;
-export const MAX_TIMELINE_DAYS = 180;
-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 capTimelineRange(
-  rangeStart: Date,
-  rangeEnd: Date,
-  todayMid: dayjs.Dayjs
-) {
-  const start = dayjs(rangeStart).startOf('day');
-  const end = dayjs(rangeEnd).startOf('day');
-  const totalDays = end.diff(start, 'day') + 1;
-
-  if (totalDays <= MAX_TIMELINE_DAYS) {
-    return {
-      rangeStart: start.toDate(),
-      rangeEnd: end.toDate(),
-    };
-  }
-
-  const latestStart = end.subtract(MAX_TIMELINE_DAYS - 1, 'day');
-  let cappedStart = start;
-
-  if (
-    (todayMid.isAfter(start) || todayMid.isSame(start, 'day')) &&
-    (todayMid.isBefore(end) || todayMid.isSame(end, 'day'))
-  ) {
-    cappedStart = todayMid.subtract(Math.floor(MAX_TIMELINE_DAYS / 2), 'day');
-  } else if (todayMid.isAfter(end)) {
-    cappedStart = latestStart;
-  }
-
-  if (cappedStart.isBefore(start)) {
-    cappedStart = start;
-  }
-
-  if (cappedStart.isAfter(latestStart)) {
-    cappedStart = latestStart;
-  }
-
-  return {
-    rangeStart: cappedStart.toDate(),
-    rangeEnd: cappedStart.add(MAX_TIMELINE_DAYS - 1, 'day').toDate(),
-  };
-}
-
-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 rawRangeStart = 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 rawRangeEnd = 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 { rangeStart, rangeEnd } = capTimelineRange(
-    rawRangeStart,
-    rawRangeEnd,
-    todayMid
-  );
-
-  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);
-}