@tuturuuu/ui 0.38.0 → 0.39.0

package/src/components/ui/legacy/calendar/native-recurrence-model.ts

@@ -0,0 +1,245 @@
+import type {
+  CreateNativeCalendarSeriesPayload,
+  MutateNativeCalendarSeriesPayload,
+  NativeCalendarSeries,
+} from '@tuturuuu/internal-api/calendar-series';
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import type {
+  CalendarRecurrenceRule,
+  CalendarWeekday,
+} from '@tuturuuu/types/primitives/calendar-recurrence';
+import {
+  CalendarRecurrenceAnchorSchema,
+  inspectCalendarRecurrenceSlot,
+  validateCalendarRecurrence,
+} from '@tuturuuu/utils/calendar-recurrence';
+import {
+  recurrenceInitialTimes,
+  recurrenceInstantLocal,
+  recurrenceLocalAnchor,
+  recurrenceLocalParts,
+  recurrenceMidnightRange,
+} from '@tuturuuu/utils/calendar-recurrence-local';
+export type RecurrenceScope = 'this' | 'all' | 'future';
+export interface RecurrenceDraft {
+  title: string;
+  description: string;
+  location: string;
+  startLocal: string;
+  endLocal: string;
+  timeZone: string;
+  allDay: boolean;
+  frequency: CalendarRecurrenceRule['frequency'];
+  interval: string;
+  weekdays: CalendarWeekday[];
+  retainedRule?: CalendarRecurrenceRule;
+  monthDay: string;
+  monthPattern: 'day' | 'weekday';
+  weekIndex: string;
+  month: string;
+  weekStartsOn?: CalendarWeekday;
+  monthDayOverflow?: CalendarRecurrenceRule['monthDayOverflow'];
+  endType: CalendarRecurrenceRule['end']['type'];
+  endValue: string;
+}
+const weekdays: CalendarWeekday[] = ['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU'];
+export function newRecurrenceDraft(
+  timeZone: string,
+  now = new Date()
+): RecurrenceDraft {
+  const start = recurrenceInitialTimes(timeZone, now);
+  return {
+    title: '',
+    description: '',
+    location: '',
+    startLocal: start.startLocal,
+    endLocal: start.endLocal,
+    timeZone,
+    allDay: false,
+    frequency: 'weekly',
+    interval: '1',
+    weekdays: [weekdays[start.dayOfWeek - 1]!],
+    monthDay: String(start.day),
+    monthPattern: 'day',
+    weekIndex: String(
+      Math.ceil(start.day / 7) > 4 ? -1 : Math.ceil(start.day / 7)
+    ),
+    month: '',
+    monthDayOverflow: 'skip',
+    endType: 'never',
+    endValue: '',
+  };
+}
+export function recurrenceEditDraft(
+  series: NativeCalendarSeries,
+  event: CalendarEvent,
+  scope: RecurrenceScope
+): RecurrenceDraft {
+  if (!event.originalStartLocal || event.seriesId !== series.id)
+    throw new Error('Invalid recurrence identity');
+  const rule =
+    scope === 'future'
+      ? inspectCalendarRecurrenceSlot({
+          rule: series.rule,
+          anchor: series.anchor,
+          originalStartLocal: event.originalStartLocal,
+        }).remainingRule
+      : series.rule;
+  const local = (instant: string) =>
+    recurrenceInstantLocal(instant, rule.timeZone);
+  const anchor =
+    scope === 'all'
+      ? series.anchor
+      : {
+          startLocal: local(event.start_at),
+          endLocal: local(event.end_at),
+          allDay: series.anchor.allDay,
+        };
+  const payload = scope === 'all' ? series.payload : event;
+  return {
+    monthPattern: rule.weekIndex ? 'weekday' : 'day',
+    weekIndex: String(
+      rule.weekIndex ??
+        (Math.ceil(recurrenceLocalParts(anchor.startLocal).day / 7) > 4
+          ? -1
+          : Math.ceil(recurrenceLocalParts(anchor.startLocal).day / 7))
+    ),
+    month: rule.month === undefined ? '' : String(rule.month),
+    weekStartsOn: rule.weekStartsOn,
+    monthDayOverflow: rule.monthDayOverflow,
+    title: payload.title ?? '',
+    description: payload.description ?? '',
+    location: payload.location ?? '',
+    startLocal: anchor.startLocal.slice(0, 16),
+    endLocal: anchor.endLocal.slice(0, 16),
+    timeZone: rule.timeZone,
+    allDay: anchor.allDay,
+    frequency: rule.frequency,
+    interval: String(rule.interval),
+    weekdays: rule.weekdays ?? [
+      weekdays[recurrenceLocalParts(anchor.startLocal).dayOfWeek - 1]!,
+    ],
+    monthDay: String(
+      rule.monthDay ?? recurrenceLocalParts(anchor.startLocal).day
+    ),
+    endType: rule.end.type,
+    endValue:
+      rule.end.type === 'count'
+        ? String(rule.end.count)
+        : rule.end.type === 'until'
+          ? rule.end.date
+          : '',
+  };
+}
+export function recurrenceDraftPayload(
+  draft: RecurrenceDraft,
+  occurrenceOnly = false
+) {
+  if (!draft.title.trim() || draft.title.length > 1000)
+    throw new Error('Invalid title');
+  const start = recurrenceLocalParts(draft.startLocal);
+  const rule: CalendarRecurrenceRule = {
+    version: 1,
+    frequency: draft.frequency,
+    interval: Number(draft.interval),
+    timeZone: draft.timeZone,
+    end:
+      draft.endType === 'count'
+        ? { type: 'count', count: Number(draft.endValue) }
+        : draft.endType === 'until'
+          ? { type: 'until', date: draft.endValue }
+          : { type: 'never' },
+  };
+  if (rule.frequency === 'weekly') {
+    rule.weekdays = draft.weekdays;
+    if (draft.weekStartsOn !== undefined)
+      rule.weekStartsOn = draft.weekStartsOn;
+  }
+  if (rule.frequency === 'monthly' || rule.frequency === 'yearly') {
+    if (draft.monthPattern === 'weekday') {
+      rule.weekdays = draft.weekdays;
+      rule.weekIndex = Number(
+        draft.weekIndex
+      ) as CalendarRecurrenceRule['weekIndex'];
+    } else {
+      rule.monthDay = Number(draft.monthDay);
+      if (draft.monthDayOverflow !== undefined)
+        rule.monthDayOverflow = draft.monthDayOverflow;
+    }
+  }
+  if (rule.frequency === 'yearly')
+    rule.month = draft.month ? Number(draft.month) : start.month;
+  const anchor = recurrenceLocalAnchor(
+    draft.startLocal,
+    draft.endLocal,
+    draft.allDay
+  );
+  if (occurrenceOnly) CalendarRecurrenceAnchorSchema.parse(anchor);
+  else validateCalendarRecurrence(draft.retainedRule ?? rule, anchor);
+  return {
+    rule: draft.retainedRule ?? rule,
+    anchor,
+    event: {
+      title: draft.title.trim(),
+      description: draft.description,
+      location: draft.location || null,
+    },
+  };
+}
+export function recurrenceMutation(
+  draft: RecurrenceDraft,
+  series: NativeCalendarSeries,
+  occurrence: CalendarEvent,
+  scope: RecurrenceScope,
+  requestId: string,
+  action: 'update' | 'delete'
+): MutateNativeCalendarSeriesPayload {
+  if (occurrence.seriesId !== series.id || !occurrence.originalStartLocal)
+    throw new Error('Invalid recurrence identity');
+  const identity = {
+    requestId,
+    expectedRevision: series.revision,
+    scope,
+    originalStartLocal: occurrence.originalStartLocal,
+  };
+  if (action === 'delete') return identity;
+  const payload = recurrenceDraftPayload(draft, scope === 'this');
+  return {
+    ...identity,
+    event: payload.event,
+    anchor: payload.anchor,
+    ...(scope === 'this' ? {} : { rule: payload.rule }),
+  };
+}
+/** A retry of unchanged intent reuses its key; any actor/workspace/revision or draft change does not. */
+export function recurrenceRequestIdentity(
+  newId: () => string = () => crypto.randomUUID()
+) {
+  let intent: string | undefined, id: string | undefined;
+  return (
+    scope: string,
+    payload:
+      | Omit<CreateNativeCalendarSeriesPayload, 'requestId'>
+      | Omit<MutateNativeCalendarSeriesPayload, 'requestId'>,
+    action: string
+  ) => {
+    const next = JSON.stringify([scope, action, payload]);
+    if (next !== intent) {
+      intent = next;
+      id = newId();
+    }
+    return id!;
+  };
+}
+
+export function recurrenceAllDay(
+  draft: RecurrenceDraft,
+  allDay: boolean
+): RecurrenceDraft {
+  if (!allDay) return { ...draft, allDay };
+  return {
+    ...draft,
+    allDay,
+    ...recurrenceMidnightRange(draft.startLocal, draft.endLocal),
+  };
+}

package/src/components/ui/legacy/calendar/native-recurrence-pattern-fields.test.tsx

@@ -0,0 +1,142 @@
+import '@testing-library/jest-dom/vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { type PropsWithChildren, useState } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import {
+  newRecurrenceDraft,
+  type RecurrenceDraft,
+  recurrenceDraftPayload,
+} from './native-recurrence-model';
+import { NativeRecurrencePatternFields } from './native-recurrence-pattern-fields';
+
+vi.mock('next-intl', () => ({ useTranslations: () => (key: string) => key }));
+vi.mock('../../select', () => ({
+  Select: ({
+    children,
+    value,
+    onValueChange,
+  }: PropsWithChildren<{
+    value: string;
+    onValueChange: (value: string) => void;
+  }>) => (
+    <select
+      aria-label={value}
+      value={value}
+      onChange={(event) => onValueChange(event.target.value)}
+    >
+      {children}
+    </select>
+  ),
+  SelectContent: ({ children }: PropsWithChildren) => <>{children}</>,
+  SelectTrigger: () => null,
+  SelectValue: () => null,
+  SelectItem: ({ children, value }: PropsWithChildren<{ value: string }>) => (
+    <option value={value}>{children}</option>
+  ),
+}));
+vi.mock('../../checkbox', () => ({
+  Checkbox: ({
+    checked,
+    onCheckedChange,
+  }: {
+    checked: boolean;
+    onCheckedChange: (value: boolean) => void;
+  }) => (
+    <input
+      type="checkbox"
+      checked={checked}
+      onChange={(event) => onCheckedChange(event.target.checked)}
+    />
+  ),
+}));
+afterEach(cleanup);
+function Form({ initial }: { initial?: Partial<RecurrenceDraft> }) {
+  const [draft, setDraft] = useState({
+    ...newRecurrenceDraft('UTC', new Date('2026-03-27T09:00:00Z')),
+    title: 'Review',
+    frequency: 'monthly' as const,
+    ...initial,
+  });
+  const [result, setResult] = useState('');
+  return (
+    <>
+      <NativeRecurrencePatternFields draft={draft} setDraft={setDraft} />
+      <button
+        type="button"
+        onClick={() =>
+          setResult(JSON.stringify(recurrenceDraftPayload(draft).rule))
+        }
+      >
+        Save
+      </button>
+      <output>{result}</output>
+    </>
+  );
+}
+describe('relative recurrence pattern controls', () => {
+  it('changes an absolute monthly series to the last Friday without changing its start', () => {
+    render(<Form />);
+    fireEvent.change(screen.getByLabelText('day'), {
+      target: { value: 'weekday' },
+    });
+    fireEvent.change(screen.getByLabelText('4'), { target: { value: '-1' } });
+    expect(screen.getByText('relativeWeekdayHelp')).toBeInTheDocument();
+    expect(screen.queryByLabelText('monthDay')).not.toBeInTheDocument();
+    fireEvent.click(screen.getByText('Save'));
+    expect(JSON.parse(screen.getByRole('status').textContent!)).toMatchObject({
+      weekdays: ['FR'],
+      weekIndex: -1,
+      frequency: 'monthly',
+    });
+  });
+  it('edits a yearly relative rule with explicit month and retains ending count', () => {
+    render(
+      <Form
+        initial={{
+          frequency: 'yearly',
+          monthPattern: 'weekday',
+          weekIndex: '-1',
+          month: '3',
+          endType: 'count',
+          endValue: '8',
+        }}
+      />
+    );
+    expect(screen.getByLabelText('month')).toHaveValue(3);
+    fireEvent.click(screen.getByText('Save'));
+    expect(JSON.parse(screen.getByRole('status').textContent!)).toMatchObject({
+      frequency: 'yearly',
+      month: 3,
+      weekIndex: -1,
+      end: { type: 'count', count: 8 },
+    });
+  });
+  it('allows explicitly choosing month-end overflow', () => {
+    render(
+      <Form
+        initial={{
+          startLocal: '2026-03-31T09:00',
+          endLocal: '2026-03-31T10:00',
+          monthDay: '31',
+        }}
+      />
+    );
+    fireEvent.change(screen.getByLabelText('skip'), {
+      target: { value: 'last-day' },
+    });
+    fireEvent.click(screen.getByText('Save'));
+    expect(JSON.parse(screen.getByRole('status').textContent!)).toMatchObject({
+      monthDay: 31,
+      monthDayOverflow: 'last-day',
+    });
+  });
+  it('hides month controls for weekly series and updates selected weekdays', () => {
+    render(<Form initial={{ frequency: 'weekly' }} />);
+    expect(screen.queryByText('monthPattern')).not.toBeInTheDocument();
+    fireEvent.click(screen.getByLabelText('MO'));
+    fireEvent.click(screen.getByText('Save'));
+    expect(JSON.parse(screen.getByRole('status').textContent!)).toMatchObject({
+      weekdays: ['FR', 'MO'],
+    });
+  });
+});

package/src/components/ui/legacy/calendar/native-recurrence-pattern-fields.tsx

@@ -0,0 +1,178 @@
+'use client';
+import { useTranslations } from 'next-intl';
+import { Checkbox } from '../../checkbox';
+import { Input } from '../../input';
+import { Label } from '../../label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../select';
+import type { RecurrenceDraft } from './native-recurrence-model';
+
+export function NativeRecurrencePatternFields({
+  draft,
+  setDraft,
+}: {
+  draft: RecurrenceDraft;
+  setDraft: (draft: RecurrenceDraft) => void;
+}) {
+  const t = useTranslations('calendar.recurrence');
+  const field = (key: keyof RecurrenceDraft, value: unknown) =>
+    setDraft({ ...draft, [key]: value });
+  const monthly = draft.frequency === 'monthly' || draft.frequency === 'yearly';
+  const relative = monthly && draft.monthPattern === 'weekday';
+  return (
+    <>
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <Label>{t('frequency')}</Label>
+          <Select
+            value={draft.frequency}
+            onValueChange={(value) => field('frequency', value)}
+          >
+            <SelectTrigger aria-label={t('frequency')}>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {(['daily', 'weekly', 'monthly', 'yearly'] as const).map(
+                (value) => (
+                  <SelectItem key={value} value={value}>
+                    {t(value)}
+                  </SelectItem>
+                )
+              )}
+            </SelectContent>
+          </Select>
+        </div>
+        <div>
+          <Label htmlFor="series-interval">{t('interval')}</Label>
+          <Input
+            id="series-interval"
+            type="number"
+            min={1}
+            max={1000}
+            value={draft.interval}
+            onChange={(e) => field('interval', e.target.value)}
+          />
+        </div>
+      </div>
+      {monthly && (
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <Label>{t('monthPattern')}</Label>
+            <Select
+              value={draft.monthPattern}
+              onValueChange={(value) => field('monthPattern', value)}
+            >
+              <SelectTrigger aria-label={t('monthPattern')}>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="day">{t('monthDayPattern')}</SelectItem>
+                <SelectItem value="weekday">
+                  {t('monthWeekdayPattern')}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          {draft.frequency === 'yearly' && (
+            <div>
+              <Label htmlFor="series-month">{t('month')}</Label>
+              <Input
+                id="series-month"
+                type="number"
+                min={1}
+                max={12}
+                value={
+                  draft.month ||
+                  (draft.startLocal
+                    ? String(Number(draft.startLocal.slice(5, 7)))
+                    : '')
+                }
+                onChange={(e) => field('month', e.target.value)}
+              />
+            </div>
+          )}
+        </div>
+      )}
+      {monthly &&
+        (relative ? (
+          <div>
+            <Label>{t('weekIndex')}</Label>
+            <Select
+              value={draft.weekIndex}
+              onValueChange={(value) => field('weekIndex', value)}
+            >
+              <SelectTrigger aria-label={t('weekIndex')}>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {(['1', '2', '3', '4', '-1'] as const).map((value) => (
+                  <SelectItem key={value} value={value}>
+                    {t(value === '-1' ? 'ordinalLast' : `ordinal${value}`)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        ) : (
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <Label htmlFor="series-monthday">{t('monthDay')}</Label>
+              <Input
+                id="series-monthday"
+                type="number"
+                min={1}
+                max={31}
+                value={draft.monthDay}
+                onChange={(e) => field('monthDay', e.target.value)}
+              />
+            </div>
+            <div>
+              <Label>{t('monthDayOverflow')}</Label>
+              <Select
+                value={draft.monthDayOverflow ?? 'skip'}
+                onValueChange={(value) => field('monthDayOverflow', value)}
+              >
+                <SelectTrigger aria-label={t('monthDayOverflow')}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="skip">{t('monthDaySkip')}</SelectItem>
+                  <SelectItem value="last-day">{t('monthDayLast')}</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        ))}
+      {(draft.frequency === 'weekly' || relative) && (
+        <fieldset aria-label={t('weekdays')} className="flex flex-wrap gap-2">
+          {(['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU'] as const).map((day) => (
+            <label key={day} className="flex items-center gap-1">
+              <Checkbox
+                checked={draft.weekdays.includes(day)}
+                onCheckedChange={(checked) =>
+                  field(
+                    'weekdays',
+                    checked
+                      ? [...draft.weekdays, day]
+                      : draft.weekdays.filter((d) => d !== day)
+                  )
+                }
+              />
+              {t(day)}
+            </label>
+          ))}
+        </fieldset>
+      )}
+      {relative && (
+        <p className="text-muted-foreground text-xs">
+          {t('relativeWeekdayHelp')}
+        </p>
+      )}
+    </>
+  );
+}