@tuturuuu/ui 0.0.4 → 0.1.0

package/src/lib/__tests__/lunar-calendar.test.ts

@@ -0,0 +1,137 @@
+import { describe, expect, it } from 'vitest';
+import {
+  formatLunarDay,
+  getLunarDate,
+  getLunarHolidayName,
+  isSpecialLunarDate,
+} from '../lunar-calendar';
+
+describe('getLunarDate', () => {
+  it('converts a solar date to lunar date', () => {
+    // Feb 17, 2026 is Lunar New Year (1/1 Bính Ngọ)
+    const lunar = getLunarDate(new Date(2026, 1, 17));
+    expect(lunar.day).toBe(1);
+    expect(lunar.month).toBe(1);
+    expect(lunar.year).toBe(2026);
+  });
+
+  it('returns correct structure', () => {
+    const lunar = getLunarDate(new Date(2025, 0, 15));
+    expect(lunar).toHaveProperty('day');
+    expect(lunar).toHaveProperty('month');
+    expect(lunar).toHaveProperty('year');
+    expect(lunar).toHaveProperty('isLeapMonth');
+    expect(typeof lunar.day).toBe('number');
+    expect(typeof lunar.isLeapMonth).toBe('boolean');
+  });
+});
+
+describe('formatLunarDay', () => {
+  it('always shows day/month format', () => {
+    const result = formatLunarDay({
+      day: 1,
+      month: 3,
+      year: 2025,
+      isLeapMonth: false,
+    });
+    expect(result).toBe('1/3');
+  });
+
+  it('shows day/month for Rằm', () => {
+    const result = formatLunarDay({
+      day: 15,
+      month: 8,
+      year: 2025,
+      isLeapMonth: false,
+    });
+    expect(result).toBe('15/8');
+  });
+
+  it('shows day/month for regular days', () => {
+    const result = formatLunarDay({
+      day: 7,
+      month: 5,
+      year: 2025,
+      isLeapMonth: false,
+    });
+    expect(result).toBe('7/5');
+  });
+});
+
+describe('isSpecialLunarDate', () => {
+  it('returns true for Mùng 1 (1st)', () => {
+    expect(
+      isSpecialLunarDate({ day: 1, month: 5, year: 2025, isLeapMonth: false })
+    ).toBe(true);
+  });
+
+  it('returns true for Rằm (15th)', () => {
+    expect(
+      isSpecialLunarDate({ day: 15, month: 8, year: 2025, isLeapMonth: false })
+    ).toBe(true);
+  });
+
+  it('returns false for regular days', () => {
+    expect(
+      isSpecialLunarDate({ day: 7, month: 3, year: 2025, isLeapMonth: false })
+    ).toBe(false);
+  });
+});
+
+describe('getLunarHolidayName', () => {
+  it('returns Tết for 1/1 in Vietnamese', () => {
+    const holiday = getLunarHolidayName(
+      { day: 1, month: 1, year: 2025, isLeapMonth: false },
+      'vi'
+    );
+    expect(holiday).toBe('Tết Nguyên Đán');
+  });
+
+  it('returns Lunar New Year for 1/1 in English', () => {
+    const holiday = getLunarHolidayName(
+      { day: 1, month: 1, year: 2025, isLeapMonth: false },
+      'en'
+    );
+    expect(holiday).toBe('Lunar New Year');
+  });
+
+  it('returns Mid-Autumn for 15/8 in English', () => {
+    const holiday = getLunarHolidayName(
+      { day: 15, month: 8, year: 2025, isLeapMonth: false },
+      'en'
+    );
+    expect(holiday).toBe('Mid-Autumn Festival');
+  });
+
+  it('returns Trung Thu for 15/8 in Vietnamese', () => {
+    const holiday = getLunarHolidayName(
+      { day: 15, month: 8, year: 2025, isLeapMonth: false },
+      'vi'
+    );
+    expect(holiday).toBe('Trung Thu');
+  });
+
+  it('returns null for non-holiday dates', () => {
+    const holiday = getLunarHolidayName(
+      { day: 7, month: 3, year: 2025, isLeapMonth: false },
+      'en'
+    );
+    expect(holiday).toBeNull();
+  });
+
+  it('returns Vu Lan for 15/7 in Vietnamese', () => {
+    const holiday = getLunarHolidayName(
+      { day: 15, month: 7, year: 2025, isLeapMonth: false },
+      'vi'
+    );
+    expect(holiday).toBe('Vu Lan');
+  });
+
+  it('returns Hung Kings Day for 10/3 in Vietnamese', () => {
+    const holiday = getLunarHolidayName(
+      { day: 10, month: 3, year: 2025, isLeapMonth: false },
+      'vi'
+    );
+    expect(holiday).toBe('Giỗ Tổ Hùng Vương');
+  });
+});

package/src/lib/calendar/planning-query-client.ts

@@ -0,0 +1,197 @@
+type QueryClientLike = {
+  invalidateQueries: (options: {
+    queryKey: unknown[];
+    exact?: boolean;
+  }) => Promise<unknown> | unknown;
+  setQueriesData: (
+    filters: { queryKey: unknown[]; exact?: boolean },
+    updater: (oldData: unknown) => unknown
+  ) => void;
+};
+
+export type OptimisticPlanningTask = {
+  id: string;
+  name: string;
+  total_duration?: number | null;
+  scheduled_minutes?: number;
+  completed_minutes?: number;
+  auto_schedule?: boolean | null;
+  priority?: string | null;
+  ws_id?: string;
+};
+
+export type OptimisticPlanningHabit = {
+  id: string;
+  name: string;
+  is_active: boolean;
+  auto_schedule?: boolean;
+  is_visible_in_calendar?: boolean;
+  color?: string;
+};
+
+export type OptimisticCalendarEvent = {
+  id: string;
+  title: string;
+  start_at: string;
+  end_at: string;
+  color?: string | null;
+  locked?: boolean;
+};
+
+export async function invalidatePlanningQueries(
+  queryClient: QueryClientLike,
+  wsId: string,
+  options?: {
+    includeCalendarEvents?: boolean;
+  }
+) {
+  const includeCalendarEvents = options?.includeCalendarEvents ?? true;
+
+  const invalidations: Array<Promise<unknown> | unknown> = [
+    queryClient.invalidateQueries({ queryKey: ['schedulable-tasks'] }),
+    queryClient.invalidateQueries({ queryKey: ['scheduled-events-batch'] }),
+    queryClient.invalidateQueries({ queryKey: ['task-schedule-batch'] }),
+    queryClient.invalidateQueries({ queryKey: ['habits', wsId] }),
+    queryClient.invalidateQueries({
+      queryKey: ['task-personal-schedule'],
+      exact: false,
+    }),
+    queryClient.invalidateQueries({
+      queryKey: ['task-schedule-history'],
+      exact: false,
+    }),
+    queryClient.invalidateQueries({
+      queryKey: ['habit-schedule-history'],
+      exact: false,
+    }),
+    queryClient.invalidateQueries({
+      queryKey: ['smart-schedule-preview', wsId],
+      exact: false,
+    }),
+    queryClient.invalidateQueries({
+      queryKey: ['smart-schedule-preview-dialog', wsId],
+      exact: false,
+    }),
+  ];
+
+  if (includeCalendarEvents) {
+    invalidations.unshift(
+      queryClient.invalidateQueries({
+        queryKey: ['databaseCalendarEvents', wsId],
+        exact: false,
+      })
+    );
+  }
+
+  await Promise.all(invalidations);
+}
+
+export function upsertOptimisticSchedulableTask(
+  queryClient: QueryClientLike,
+  task: OptimisticPlanningTask
+) {
+  queryClient.setQueriesData(
+    { queryKey: ['schedulable-tasks'], exact: false },
+    (oldData) => {
+      if (!Array.isArray(oldData)) {
+        return oldData;
+      }
+
+      const existingIndex = oldData.findIndex(
+        (entry: any) => entry?.id === task.id
+      );
+
+      if (existingIndex >= 0) {
+        return oldData.map((entry: any, index) =>
+          index === existingIndex
+            ? {
+                ...entry,
+                ...task,
+              }
+            : entry
+        );
+      }
+
+      return [
+        {
+          ...task,
+          scheduled_minutes: task.scheduled_minutes ?? 0,
+          completed_minutes: task.completed_minutes ?? 0,
+          auto_schedule: task.auto_schedule ?? true,
+        },
+        ...oldData,
+      ];
+    }
+  );
+}
+
+export function upsertOptimisticHabit(
+  queryClient: QueryClientLike,
+  wsId: string,
+  habit: OptimisticPlanningHabit
+) {
+  queryClient.setQueriesData(
+    { queryKey: ['habits', wsId], exact: false },
+    (oldData) => {
+      if (!oldData || typeof oldData !== 'object') {
+        return oldData;
+      }
+
+      const record = oldData as { habits?: unknown[] };
+      if (!Array.isArray(record.habits)) {
+        return oldData;
+      }
+
+      const existingIndex = record.habits.findIndex(
+        (entry: any) => entry?.id === habit.id
+      );
+
+      const nextHabits =
+        existingIndex >= 0
+          ? record.habits.map((entry: any, index) =>
+              index === existingIndex ? { ...entry, ...habit } : entry
+            )
+          : [{ ...habit }, ...record.habits];
+
+      return {
+        ...record,
+        habits: nextHabits,
+      };
+    }
+  );
+}
+
+export function patchCalendarEvents(
+  queryClient: QueryClientLike,
+  wsId: string,
+  events: OptimisticCalendarEvent[],
+  options?: { removeIds?: string[] }
+) {
+  const removeIds = new Set(options?.removeIds ?? []);
+
+  queryClient.setQueriesData(
+    { queryKey: ['databaseCalendarEvents', wsId], exact: false },
+    (oldData) => {
+      const existing = Array.isArray(oldData) ? [...oldData] : [];
+      const withoutRemoved = existing.filter(
+        (entry: any) => !removeIds.has(entry?.id)
+      );
+      const byId = new Map(
+        withoutRemoved.map((entry: any) => [entry.id, entry])
+      );
+
+      for (const event of events) {
+        if (!event.id) continue;
+        byId.set(event.id, {
+          ...(byId.get(event.id) ?? {}),
+          ...event,
+        });
+      }
+
+      return [...byId.values()].sort(
+        (left: any, right: any) =>
+          new Date(left.start_at).getTime() - new Date(right.start_at).getTime()
+      );
+    }
+  );
+}

package/src/lib/calendar/preview-engine.ts

@@ -0,0 +1,14 @@
+export interface PreviewEvent {
+  id: string;
+  title: string;
+  start_at: string;
+  end_at: string;
+  type: 'habit' | 'task' | 'break';
+  source_id: string;
+  color?: string;
+  isPreview: true;
+  step: number;
+  occurrence_date?: string;
+  scheduled_minutes?: number;
+  is_reused?: boolean;
+}

package/src/lib/calendar-settings-resolver.ts

@@ -0,0 +1,200 @@
+/**
+ * Calendar Settings Resolver
+ *
+ * Implements priority system for calendar preferences:
+ * User settings > Workspace settings > Auto-detection
+ */
+
+type FirstDayOfWeek = 'auto' | 'sunday' | 'monday' | 'saturday';
+
+interface CalendarSettings {
+  timezone: string;
+  firstDayOfWeek: FirstDayOfWeek;
+  timeFormat: '12h' | '24h';
+}
+
+export interface CalendarUserSettings {
+  timezone?: string | null;
+  first_day_of_week?: string | null;
+  time_format?: string | null;
+}
+
+export interface CalendarWorkspaceSettings {
+  timezone?: string | null;
+  first_day_of_week?: string | null;
+}
+
+/**
+ * Detects the system timezone using Intl API
+ */
+export function detectSystemTimezone(): string {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone;
+  } catch {
+    // Fallback to UTC if detection fails
+    return 'UTC';
+  }
+}
+
+/**
+ * Detects the first day of week based on locale
+ * Vietnamese: Monday
+ * US/Canada: Sunday
+ * Middle East: Saturday
+ */
+export function detectLocaleFirstDay(locale?: string): FirstDayOfWeek {
+  const userLocale =
+    locale || (typeof navigator !== 'undefined' ? navigator.language : 'en-US');
+
+  // Vietnamese locale uses Monday as first day
+  if (userLocale.startsWith('vi')) {
+    return 'monday';
+  }
+
+  // US, Canada, and some other countries use Sunday
+  if (userLocale.startsWith('en-US') || userLocale.startsWith('en-CA')) {
+    return 'sunday';
+  }
+
+  // Middle Eastern countries typically use Saturday
+  if (userLocale.startsWith('ar') || userLocale.startsWith('he')) {
+    return 'saturday';
+  }
+
+  // Most European and other countries use Monday
+  return 'monday';
+}
+
+/**
+ * Detects the preferred time format based on locale
+ * Uses Intl.DateTimeFormat to determine if the locale uses 12h or 24h format
+ */
+export function detectLocaleTimeFormat(locale?: string): '12h' | '24h' {
+  const userLocale =
+    locale || (typeof navigator !== 'undefined' ? navigator.language : 'en-US');
+
+  try {
+    // Use Intl.DateTimeFormat to detect the locale's preferred format
+    const formatter = new Intl.DateTimeFormat(userLocale, { hour: 'numeric' });
+    const parts = formatter.formatToParts(new Date(2000, 0, 1, 13, 0));
+    const hourPart = parts.find((p) => p.type === 'hour');
+
+    // If hour is "1" instead of "13", it's 12-hour format
+    return hourPart?.value === '1' ? '12h' : '24h';
+  } catch {
+    // Fallback to 12h for English locales, 24h for others
+    return userLocale.startsWith('en') ? '12h' : '24h';
+  }
+}
+
+/**
+ * Resolves the effective time format based on user setting
+ */
+export function resolveTimeFormat(
+  user?: Pick<CalendarUserSettings, 'time_format'> | null,
+  locale?: string
+): '12h' | '24h' {
+  // User setting takes priority
+  if (user?.time_format && user.time_format !== 'auto') {
+    return user.time_format as '12h' | '24h';
+  }
+
+  // Auto-detection based on locale
+  return detectLocaleTimeFormat(locale);
+}
+
+/**
+ * Resolves the effective timezone based on priority system
+ */
+export function resolveTimezone(
+  user?: Pick<CalendarUserSettings, 'timezone'> | null,
+  workspace?: Pick<CalendarWorkspaceSettings, 'timezone'> | null
+): string {
+  // Priority 1: User setting
+  if (user?.timezone && user.timezone !== 'auto') {
+    return user.timezone;
+  }
+
+  // Priority 2: Workspace setting
+  if (workspace?.timezone && workspace.timezone !== 'auto') {
+    return workspace.timezone;
+  }
+
+  // Priority 3: Auto-detection
+  return detectSystemTimezone();
+}
+
+/**
+ * Resolves the effective first day of week based on priority system
+ */
+export function resolveFirstDayOfWeek(
+  user?: Pick<CalendarUserSettings, 'first_day_of_week'> | null,
+  workspace?: Pick<CalendarWorkspaceSettings, 'first_day_of_week'> | null,
+  locale?: string
+): FirstDayOfWeek {
+  // Priority 1: User setting
+  if (user?.first_day_of_week && user.first_day_of_week !== 'auto') {
+    return user.first_day_of_week as FirstDayOfWeek;
+  }
+
+  // Priority 2: Workspace setting
+  if (workspace?.first_day_of_week && workspace.first_day_of_week !== 'auto') {
+    return workspace.first_day_of_week as FirstDayOfWeek;
+  }
+
+  // Priority 3: Auto-detection based on locale
+  return detectLocaleFirstDay(locale);
+}
+
+/**
+ * Resolves all calendar settings at once
+ */
+export function resolveCalendarSettings(
+  user?: CalendarUserSettings | null,
+  workspace?: CalendarWorkspaceSettings | null,
+  locale?: string
+): CalendarSettings {
+  return {
+    timezone: resolveTimezone(user, workspace),
+    firstDayOfWeek: resolveFirstDayOfWeek(user, workspace, locale),
+    timeFormat: resolveTimeFormat(user, locale),
+  };
+}
+
+/**
+ * Converts first day of week string to number (for Date compatibility)
+ * 0 = Sunday, 1 = Monday, 6 = Saturday
+ */
+export function firstDayToNumber(day: FirstDayOfWeek, locale?: string): number {
+  if (day === 'auto') {
+    day = detectLocaleFirstDay(locale);
+  }
+
+  switch (day) {
+    case 'sunday':
+      return 0;
+    case 'monday':
+      return 1;
+    case 'saturday':
+      return 6;
+    default:
+      return 1; // Default to Monday
+  }
+}
+
+/**
+ * Converts number to first day of week string
+ * 0 = Sunday, 1 = Monday, 6 = Saturday
+ */
+export function numberToFirstDay(num: number): FirstDayOfWeek {
+  switch (num) {
+    case 0:
+      return 'sunday';
+    case 1:
+      return 'monday';
+    case 6:
+      return 'saturday';
+    default:
+      return 'monday'; // Default to Monday
+  }
+}

package/src/lib/lunar-calendar.ts

@@ -0,0 +1,71 @@
+import { getLunarDate as vnGetLunarDate } from '@dqcai/vn-lunar';
+
+export interface LunarDateInfo {
+  day: number;
+  month: number;
+  year: number;
+  isLeapMonth: boolean;
+}
+
+/**
+ * Convert a solar (Gregorian) date to Vietnamese lunar date
+ */
+export function getLunarDate(solarDate: Date): LunarDateInfo {
+  const d = solarDate.getDate();
+  const m = solarDate.getMonth() + 1; // JS months are 0-indexed
+  const y = solarDate.getFullYear();
+  const lunar = vnGetLunarDate(d, m, y);
+  return {
+    day: lunar.day,
+    month: lunar.month,
+    year: lunar.year,
+    isLeapMonth: lunar.leap,
+  };
+}
+
+/**
+ * Format a lunar date for compact display in calendar cells.
+ * Always shows "day/month" (e.g., "15/8") so users can tell which
+ * lunar month they're in at a glance.
+ */
+export function formatLunarDay(lunar: LunarDateInfo): string {
+  return `${lunar.day}/${lunar.month}`;
+}
+
+/**
+ * Check if the lunar date is a special date (Mùng 1 or Rằm)
+ */
+export function isSpecialLunarDate(lunar: LunarDateInfo): boolean {
+  return lunar.day === 1 || lunar.day === 15;
+}
+
+interface LunarHoliday {
+  en: string;
+  vi: string;
+}
+
+const LUNAR_HOLIDAYS: Record<string, LunarHoliday> = {
+  '1/1': { en: 'Lunar New Year', vi: 'Tết Nguyên Đán' },
+  '2/1': { en: "New Year's 2nd Day", vi: 'Mùng 2 Tết' },
+  '3/1': { en: "New Year's 3rd Day", vi: 'Mùng 3 Tết' },
+  '15/1': { en: 'Lantern Festival', vi: 'Tết Nguyên Tiêu' },
+  '3/3': { en: 'Cold Food Festival', vi: 'Tết Hàn Thực' },
+  '10/3': { en: "Hung Kings' Day", vi: 'Giỗ Tổ Hùng Vương' },
+  '5/5': { en: 'Dragon Boat Festival', vi: 'Tết Đoan Ngọ' },
+  '15/7': { en: 'Ghost Festival', vi: 'Vu Lan' },
+  '15/8': { en: 'Mid-Autumn Festival', vi: 'Trung Thu' },
+  '23/12': { en: 'Kitchen Gods', vi: 'Ông Táo' },
+};
+
+/**
+ * Get the lunar holiday name for a given lunar date, if any
+ */
+export function getLunarHolidayName(
+  lunar: LunarDateInfo,
+  locale: string
+): string | null {
+  const key = `${lunar.day}/${lunar.month}`;
+  const holiday = LUNAR_HOLIDAYS[key];
+  if (!holiday) return null;
+  return locale.startsWith('vi') ? holiday.vi : holiday.en;
+}