@tuturuuu/ui 0.30.2 → 0.32.0

package/src/components/ui/legacy/calendar/calendar-period.ts

@@ -0,0 +1,28 @@
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+/** Endpoints are inclusive days; the event query expands the final day. */
+export function calendarPeriodDates(
+  date: Date,
+  view: 'year' | 'agenda'
+): Date[] {
+  const start = new Date(date);
+  start.setHours(0, 0, 0, 0);
+  if (view === 'year') start.setMonth(0, 1);
+  const end = new Date(start);
+  if (view === 'year') end.setMonth(11, 31);
+  else end.setDate(end.getDate() + 29);
+  return [start, end];
+}
+
+/** Create at 9 AM on the selected calendar day, in its configured zone. */
+export function calendarDraftDate(date: Date, zone?: string): Date {
+  const wallTime = `${dayjs(date).format('YYYY-MM-DD')}T09:00:00`;
+  return (
+    zone && zone !== 'auto' ? dayjs.tz(wallTime, zone) : dayjs(wallTime)
+  ).toDate();
+}

package/src/components/ui/legacy/calendar/calendar-shortcuts.test.tsx

@@ -0,0 +1,107 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useState } from 'react';
+import { describe, expect, it } from 'vitest';
+import type { CalendarView } from '../../../../hooks/use-view-transition';
+import { calendarDraftDate, calendarPeriodDates } from './calendar-period';
+import {
+  calendarShortcutView,
+  useCalendarViewShortcuts,
+} from './use-calendar-view-shortcuts';
+
+function ControlledViews({ disabledWeek = false }: { disabledWeek?: boolean }) {
+  const [view, setView] = useState<CalendarView>('week');
+  useCalendarViewShortcuts({
+    enabled: true,
+    availableViews: disabledWeek
+      ? [
+          { value: 'week', disabled: true },
+          { value: '4-days', disabled: true },
+          { value: 'month' },
+        ]
+      : undefined,
+    day: () => setView('day'),
+    '4-days': () => setView('4-days'),
+    week: () => setView('week'),
+    month: () => setView('month'),
+    year: () => setView('year'),
+    agenda: () => setView('agenda'),
+  });
+  return (
+    <>
+      <output>{view}</output>
+      <input aria-label="Event title" />
+    </>
+  );
+}
+describe('calendar keyboard navigation', () => {
+  it('switches views with M and preserves typing', () => {
+    render(<ControlledViews />);
+    fireEvent.keyDown(window, { key: 'M' });
+    expect(screen.getByText('month')).toBeVisible();
+    fireEvent.keyDown(screen.getByRole('textbox'), { key: 'y' });
+    expect(screen.getByText('month')).toBeVisible();
+    fireEvent.keyDown(window, { key: 'a' });
+    expect(screen.getByText('agenda')).toBeVisible();
+  });
+  it.each([
+    { ctrlKey: true },
+    { metaKey: true },
+    { altKey: true },
+    { shiftKey: true },
+    { isComposing: true },
+    { repeat: true },
+  ])('ignores competing commands %j', (options) => {
+    expect(
+      calendarShortcutView(
+        new KeyboardEvent('keydown', { key: 'm', ...options })
+      )
+    ).toBeNull();
+  });
+  it('does not invoke views disabled for the current screen', () => {
+    render(<ControlledViews disabledWeek />);
+    fireEvent.keyDown(window, { key: 'm' });
+    fireEvent.keyDown(window, { key: 'w' });
+    fireEvent.keyDown(window, { key: '4' });
+    expect(screen.getByText('month')).toBeVisible();
+  });
+  it('does not change views behind a modal', () => {
+    render(
+      <div role="dialog" data-state="open">
+        Settings
+      </div>
+    );
+    expect(
+      calendarShortcutView(new KeyboardEvent('keydown', { key: 'm' }))
+    ).toBeNull();
+  });
+});
+describe('event ranges', () => {
+  it('creates 9 AM drafts in the selected zone without caller plugin setup', () => {
+    expect(
+      calendarDraftDate(new Date(2026, 8, 7), 'Asia/Ho_Chi_Minh').toISOString()
+    ).toBe('2026-09-07T02:00:00.000Z');
+  });
+  it('fetches the entire leap year', () => {
+    const dates = calendarPeriodDates(new Date(2028, 8, 7), 'year');
+    expect(
+      dates.map((date) => [date.getFullYear(), date.getMonth(), date.getDate()])
+    ).toEqual([
+      [2028, 0, 1],
+      [2028, 11, 31],
+    ]);
+  });
+  it('fetches all 30 agenda days across a year boundary', () => {
+    const dates = calendarPeriodDates(new Date(2026, 11, 20, 15), 'agenda');
+    expect(
+      dates.map((date) => [
+        date.getFullYear(),
+        date.getMonth(),
+        date.getDate(),
+        date.getHours(),
+      ])
+    ).toEqual([
+      [2026, 11, 20, 0],
+      [2027, 0, 18, 0],
+    ]);
+  });
+});

package/src/components/ui/legacy/calendar/calendar-views.test.tsx

@@ -0,0 +1,169 @@
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const state = vi.hoisted(() => ({
+  openModal: vi.fn(),
+  addEmptyEvent: vi.fn(),
+  events: [] as CalendarEvent[],
+  weekStartsOn: 0,
+}));
+vi.mock('@tuturuuu/ui/hooks/use-calendar', () => ({
+  useCalendar: () => ({
+    ...state,
+    getCurrentEvents: (day: Date) =>
+      state.events.filter(
+        (event) =>
+          new Date(event.start_at).toDateString() === day.toDateString()
+      ),
+  }),
+}));
+vi.mock('@tuturuuu/ui/hooks/use-calendar-preferences', () => ({
+  useCalendarPreferences: () => ({
+    timeFormat: '24h',
+    weekStartsOn: state.weekStartsOn,
+  }),
+}));
+vi.mock('@tuturuuu/ui/hooks/use-user-config', () => ({
+  useUserBooleanConfig: () => ({ value: false }),
+}));
+vi.mock('./settings/settings-context', () => ({
+  useCalendarSettings: () => ({
+    settings: {
+      appearance: { showWeekends: true },
+      timezone: { timezone: 'America/New_York' },
+    },
+  }),
+}));
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string, values?: Record<string, unknown>) =>
+    `${key}${values ? ` ${Object.values(values).join(' ')}` : ''}`,
+}));
+
+import { AgendaView } from './agenda-view';
+import { MonthCalendar } from './month-calendar';
+import { YearCalendar } from './year-calendar';
+
+const date = new Date(2026, 8, 7);
+beforeEach(() => {
+  state.weekStartsOn = 0;
+  state.openModal.mockClear();
+  state.addEmptyEvent.mockClear();
+  state.events = Array.from(
+    { length: 5 },
+    (_, i) =>
+      ({
+        id: String(i),
+        title: `Event ${i}`,
+        start_at: new Date(2026, 8, 7, 9 + i).toISOString(),
+        end_at: new Date(2026, 8, 7, 10 + i).toISOString(),
+        color: 'BLUE',
+        location: i === 4 ? 'Library' : undefined,
+      }) as CalendarEvent
+  );
+});
+describe('calendar view interactions', () => {
+  it('month overflow opens every event and creates on the chosen calendar date and timezone', () => {
+    render(<MonthCalendar date={date} viewedMonth={date} locale="en" />);
+    const day = screen.getByRole('region', {
+      name: date.toLocaleDateString('en', { dateStyle: 'full' }),
+    });
+    expect(within(day).getAllByRole('button', { name: /Event/ })).toHaveLength(
+      3
+    );
+    fireEvent.click(
+      within(day).getByRole('button', { name: /views.open_day/ })
+    );
+    fireEvent.click(screen.getByRole('button', { name: /Event 4/ }));
+    expect(state.openModal).toHaveBeenCalledWith('4');
+    fireEvent.click(
+      within(day).getByRole('button', { name: /views.create_on_date/ })
+    );
+    expect(state.addEmptyEvent.mock.calls[0]?.[0].toISOString()).toBe(
+      '2026-09-07T13:00:00.000Z'
+    );
+  });
+  it('uses the preferred first weekday unless visible dates specify one', () => {
+    const { rerender } = render(<MonthCalendar date={date} locale="en" />);
+    expect(screen.getAllByRole('region')[0]).toHaveAccessibleName(
+      'Sunday, August 30, 2026'
+    );
+    state.weekStartsOn = 1;
+    rerender(<MonthCalendar date={date} locale="en" />);
+    expect(screen.getAllByRole('region')[0]).toHaveAccessibleName(
+      'Monday, August 31, 2026'
+    );
+    rerender(
+      <MonthCalendar
+        date={date}
+        locale="en"
+        visibleDates={[new Date(2026, 8, 6)]}
+      />
+    );
+    expect(screen.getAllByRole('region')[0]).toHaveAccessibleName(
+      'Sunday, September 6, 2026'
+    );
+  });
+  it('formats month events in the selected timezone', () => {
+    state.events = [
+      {
+        id: 'zoned',
+        title: 'Zoned',
+        start_at: '2026-09-07T13:00:00Z',
+        end_at: '2026-09-07T14:00:00Z',
+      },
+    ];
+    render(<MonthCalendar date={date} locale="en" />);
+    expect(screen.getByRole('button', { name: /Zoned/ })).toHaveTextContent(
+      '09:00'
+    );
+  });
+  it('disables read-only creation and uses 9am calendar time for agenda drafts', () => {
+    const { rerender } = render(<AgendaView startDate={date} readOnly />);
+    const create = screen.getByRole('button', { name: 'views.create_event' });
+    expect(create).toBeDisabled();
+    fireEvent.click(create);
+    expect(state.addEmptyEvent).not.toHaveBeenCalled();
+    rerender(<AgendaView startDate={date} />);
+    fireEvent.click(screen.getByRole('button', { name: 'views.create_event' }));
+    expect(state.addEmptyEvent.mock.calls[0]?.[0].toISOString()).toBe(
+      '2026-09-07T13:00:00.000Z'
+    );
+  });
+  it('agenda filters by location, opens events, and clears a no-match search', () => {
+    render(<AgendaView startDate={date} locale="vi" />);
+    fireEvent.change(screen.getByRole('textbox'), {
+      target: { value: 'Library' },
+    });
+    expect(screen.getByText('Event 4')).toBeVisible();
+    expect(screen.queryByText('Event 0')).toBeNull();
+    fireEvent.click(screen.getByText('Event 4'));
+    expect(state.openModal).toHaveBeenCalledWith('4');
+    fireEvent.change(screen.getByRole('textbox'), {
+      target: { value: 'No match' },
+    });
+    expect(screen.getByText('views.no_matches')).toBeVisible();
+    fireEvent.click(screen.getByRole('button', { name: 'views.clear_search' }));
+    expect(screen.getByText('Event 0')).toBeVisible();
+  });
+  it('year localizes month labels and supports month and day drill-down', () => {
+    const onMonthClick = vi.fn();
+    const onDayClick = vi.fn();
+    render(
+      <YearCalendar
+        year={2026}
+        locale="vi"
+        onMonthClick={onMonthClick}
+        onDayClick={onDayClick}
+      />
+    );
+    fireEvent.click(screen.getByRole('button', { name: /^Tháng 9/i }));
+    expect(onMonthClick.mock.calls[0]?.[0].getMonth()).toBe(8);
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: new RegExp(date.toLocaleDateString('vi', { dateStyle: 'full' })),
+      })
+    );
+    expect(onDayClick.mock.calls[0]?.[0].getDate()).toBe(7);
+  });
+});

package/src/components/ui/legacy/calendar/event-modal-header.tsx

@@ -0,0 +1,52 @@
+import { ExternalLink, Video } from '@tuturuuu/icons';
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { Button } from '@tuturuuu/ui/button';
+import {
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@tuturuuu/ui/dialog';
+import { getCalendarMeetingUrl } from './calendar-meeting-link';
+import {
+  CalendarEventProviderIcon,
+  getCalendarEventProviderDisplay,
+} from './event-provider-display';
+
+export function EventModalHeader({
+  event,
+  isEditing,
+}: {
+  event: Partial<CalendarEvent>;
+  isEditing: boolean;
+}) {
+  const providerDisplay = getCalendarEventProviderDisplay(event);
+  const meetingUrl = getCalendarMeetingUrl(event);
+
+  return (
+    <DialogHeader className="border-b px-6 pt-6 pb-4">
+      <DialogTitle className="flex flex-wrap items-center gap-2 font-semibold text-xl">
+        <span>{isEditing ? 'Edit Event' : 'Create Event'}</span>
+        {providerDisplay && (
+          <span className="ml-3 flex items-center gap-2 rounded-md border bg-muted/40 px-3 py-1 text-sm">
+            <CalendarEventProviderIcon className="h-4.5 w-4.5" event={event} />
+            <span className="font-medium text-xs">{providerDisplay.label}</span>
+          </span>
+        )}
+        {meetingUrl && (
+          <Button asChild className="ml-auto" size="sm" variant="outline">
+            <a href={meetingUrl} rel="noreferrer" target="_blank">
+              <Video className="size-4" />
+              Tuturuuu Meet
+              <ExternalLink className="size-3.5" />
+            </a>
+          </Button>
+        )}
+      </DialogTitle>
+      <DialogDescription>
+        {isEditing
+          ? 'Make changes to your existing event'
+          : 'Add a new event to your calendar'}
+      </DialogDescription>
+    </DialogHeader>
+  );
+}