@rapidmx/web-client 0.14.1 → 0.16.0

package/apps/shared/components/calendar/allDay.ts

@@ -1,124 +1,124 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import { format } from "date-fns";
-import { WeekdayCode } from "@rapidmx/react-shared/calendar/calendarApi.js";
-import { CalendarOccurrence, toEventWallClock } from "@rapidmx/react-shared/calendar/recurrence.js";
-
-const MS_PER_DAY = 86_400_000;
-
-/**
- * All-day events are stored date-only: `startDate` is UTC midnight of the first day and `endDate` is UTC
- * midnight of the day *after* the last day (exclusive, like iCalendar's `DTEND;VALUE=DATE`). That keeps
- * an all-day event on the same calendar date for every viewer, whatever their timezone.
- *
- * Older events were saved as the creator's *local* midnight converted to UTC (e.g. `...T22:00Z` for a
- * UTC+2 creator), so reading one rounds the instant to the nearest UTC midnight rather than slicing the
- * ISO string — which gives the intended date for both formats.
- */
-export function allDayDateKey(iso: string): string {
-    const rounded = Math.round(new Date(iso).getTime() / MS_PER_DAY) * MS_PER_DAY;
-    return new Date(rounded).toISOString().slice(0, 10);
-}
-
-/** `YYYY-MM-DD` -> the stored UTC-midnight instant for that date. */
-export function allDayInstant(dateKey: string): string {
-    return `${dateKey}T00:00:00.000Z`;
-}
-
-/** Adds `days` to a `YYYY-MM-DD` date key. */
-export function addDaysToKey(dateKey: string, days: number): string {
-    return new Date(new Date(allDayInstant(dateKey)).getTime() + days * MS_PER_DAY).toISOString().slice(0, 10);
-}
-
-/** The local calendar date `day` (a local-midnight `Date` from a grid view) as a `YYYY-MM-DD` key. */
-export function localDateKey(day: Date): string {
-    return format(day, "yyyy-MM-dd");
-}
-
-/**
- * A recurrence rule's inclusive "Ends on" date -> its stored `until` instant: the end of that day in the
- * frame the series expands in. A timed series expands in its own (normally the viewer's) timezone, so that's
- * the end of the local day - `new Date("YYYY-MM-DD")` would be UTC midnight, the previous day west of UTC.
- * An all-day series expands in UTC (react-shared's `expandOccurrences`), so it's the end of the UTC day: the
- * local end of day is already the next UTC day west of UTC and would add one more occurrence.
- */
-export function recurrenceUntilInstant(dateKey: string, allDay: boolean): string {
-    if (allDay) {
-        return `${dateKey}T23:59:59.999Z`;
-    }
-    const [y, m, d] = dateKey.split("-").map(Number);
-    return new Date(y, m - 1, d, 23, 59, 59, 999).toISOString();
-}
-
-/** The stored form of an all-day series' "Ends on" date - the last millisecond of that UTC day. */
-const ALL_DAY_UNTIL_PATTERN = /^(\d{4}-\d{2}-\d{2})T23:59:59\.999Z$/;
-/** A bare UTC midnight - how the oldest editor (and date-only `UNTIL` values) stored the chosen date itself. */
-const UTC_MIDNIGHT_PATTERN = /^(\d{4}-\d{2}-\d{2})T00:00:00(?:\.000)?Z$/;
-
-/**
- * Inverse of `recurrenceUntilInstant()`. An all-day series' value is recognized explicitly in its stored
- * `T23:59:59.999Z` form (and as a bare UTC midnight, the oldest form). Anything else is a legacy value stored
- * as the creator's *local* end of day, which can land anywhere from just before 10:00Z on the chosen date (UTC+14)
- * to just before 12:00Z the day after (UTC-12) - a 26-hour spread no UTC-only rounding can resolve (UTC+14 and UTC-10
- * creators' values are exactly 24h apart for the same date), so it reads back on the local calendar, the
- * frame it was written in.
- */
-export function recurrenceUntilDateKey(until: string, allDay: boolean): string {
-    if (allDay) {
-        const stored = ALL_DAY_UNTIL_PATTERN.exec(until) ?? UTC_MIDNIGHT_PATTERN.exec(until);
-        if (stored) {
-            return stored[1];
-        }
-    }
-    return format(new Date(until), "yyyy-MM-dd");
-}
-
-/** `Date#getUTCDay()` index -> RFC 5545 weekday code. */
-const JS_WEEKDAY_CODES: WeekdayCode[] = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
-
-/** The weekday an event starts on, in the frame its series expands in: the UTC date for an all-day event
- * (`start`'s date part), the event's own timezone otherwise (`start` being a local `datetime-local` value).
- * `undefined` while the start input is empty/invalid. */
-export function startWeekdayCode(start: string, allDay: boolean, timezone: string | undefined): WeekdayCode | undefined {
-    const ms = allDay ? new Date(allDayInstant(start.slice(0, 10))).getTime() : new Date(start).getTime();
-    if (Number.isNaN(ms)) {
-        return undefined;
-    }
-    return JS_WEEKDAY_CODES[new Date(toEventWallClock(ms, timezone, allDay)).getUTCDay()];
-}
-
-/**
- * Whether `occurrence` should be shown on the grid's local calendar day `day`. All-day events cover every
- * date from their start date up to (not including) their exclusive end date — at least their start date.
- * Timed events cover every local day their [start, end) interval overlaps, so a multi-day event shows on
- * each day rather than only on its start day.
- */
-export function occursOnDay(occurrence: CalendarOccurrence, day: Date): boolean {
-    if (occurrence.allDay) {
-        const key = localDateKey(day);
-        const startKey = allDayDateKey(occurrence.startDate);
-        const endKey = allDayDateKey(occurrence.endDate);
-        return key === startKey || (key > startKey && key < endKey);
-    }
-    const dayStart = new Date(day.getFullYear(), day.getMonth(), day.getDate());
-    const dayEnd = new Date(day.getFullYear(), day.getMonth(), day.getDate() + 1);
-    const start = new Date(occurrence.startDate);
-    const end = new Date(occurrence.endDate);
-    if (start.getTime() === end.getTime()) {
-        return start >= dayStart && start < dayEnd;
-    }
-    return start < dayEnd && end > dayStart;
-}
-
-/**
- * Whether `day` is the first day `occurrence` covers. Grid views only make that day's chip/block
- * draggable — a drag id must be unique, so the continuation copies on later days are display-only.
- */
-export function startsOnDay(occurrence: CalendarOccurrence, day: Date): boolean {
-    if (occurrence.allDay) {
-        return allDayDateKey(occurrence.startDate) === localDateKey(day);
-    }
-    return localDateKey(new Date(occurrence.startDate)) === localDateKey(day);
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { format } from "date-fns";
+import { WeekdayCode } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { CalendarOccurrence, toEventWallClock } from "@rapidmx/react-shared/calendar/recurrence.js";
+
+const MS_PER_DAY = 86_400_000;
+
+/**
+ * All-day events are stored date-only: `startDate` is UTC midnight of the first day and `endDate` is UTC
+ * midnight of the day *after* the last day (exclusive, like iCalendar's `DTEND;VALUE=DATE`). That keeps
+ * an all-day event on the same calendar date for every viewer, whatever their timezone.
+ *
+ * Older events were saved as the creator's *local* midnight converted to UTC (e.g. `...T22:00Z` for a
+ * UTC+2 creator), so reading one rounds the instant to the nearest UTC midnight rather than slicing the
+ * ISO string — which gives the intended date for both formats.
+ */
+export function allDayDateKey(iso: string): string {
+    const rounded = Math.round(new Date(iso).getTime() / MS_PER_DAY) * MS_PER_DAY;
+    return new Date(rounded).toISOString().slice(0, 10);
+}
+
+/** `YYYY-MM-DD` -> the stored UTC-midnight instant for that date. */
+export function allDayInstant(dateKey: string): string {
+    return `${dateKey}T00:00:00.000Z`;
+}
+
+/** Adds `days` to a `YYYY-MM-DD` date key. */
+export function addDaysToKey(dateKey: string, days: number): string {
+    return new Date(new Date(allDayInstant(dateKey)).getTime() + days * MS_PER_DAY).toISOString().slice(0, 10);
+}
+
+/** The local calendar date `day` (a local-midnight `Date` from a grid view) as a `YYYY-MM-DD` key. */
+export function localDateKey(day: Date): string {
+    return format(day, "yyyy-MM-dd");
+}
+
+/**
+ * A recurrence rule's inclusive "Ends on" date -> its stored `until` instant: the end of that day in the
+ * frame the series expands in. A timed series expands in its own (normally the viewer's) timezone, so that's
+ * the end of the local day - `new Date("YYYY-MM-DD")` would be UTC midnight, the previous day west of UTC.
+ * An all-day series expands in UTC (react-shared's `expandOccurrences`), so it's the end of the UTC day: the
+ * local end of day is already the next UTC day west of UTC and would add one more occurrence.
+ */
+export function recurrenceUntilInstant(dateKey: string, allDay: boolean): string {
+    if (allDay) {
+        return `${dateKey}T23:59:59.999Z`;
+    }
+    const [y, m, d] = dateKey.split("-").map(Number);
+    return new Date(y, m - 1, d, 23, 59, 59, 999).toISOString();
+}
+
+/** The stored form of an all-day series' "Ends on" date - the last millisecond of that UTC day. */
+const ALL_DAY_UNTIL_PATTERN = /^(\d{4}-\d{2}-\d{2})T23:59:59\.999Z$/;
+/** A bare UTC midnight - how the oldest editor (and date-only `UNTIL` values) stored the chosen date itself. */
+const UTC_MIDNIGHT_PATTERN = /^(\d{4}-\d{2}-\d{2})T00:00:00(?:\.000)?Z$/;
+
+/**
+ * Inverse of `recurrenceUntilInstant()`. An all-day series' value is recognized explicitly in its stored
+ * `T23:59:59.999Z` form (and as a bare UTC midnight, the oldest form). Anything else is a legacy value stored
+ * as the creator's *local* end of day, which can land anywhere from just before 10:00Z on the chosen date (UTC+14)
+ * to just before 12:00Z the day after (UTC-12) - a 26-hour spread no UTC-only rounding can resolve (UTC+14 and UTC-10
+ * creators' values are exactly 24h apart for the same date), so it reads back on the local calendar, the
+ * frame it was written in.
+ */
+export function recurrenceUntilDateKey(until: string, allDay: boolean): string {
+    if (allDay) {
+        const stored = ALL_DAY_UNTIL_PATTERN.exec(until) ?? UTC_MIDNIGHT_PATTERN.exec(until);
+        if (stored) {
+            return stored[1];
+        }
+    }
+    return format(new Date(until), "yyyy-MM-dd");
+}
+
+/** `Date#getUTCDay()` index -> RFC 5545 weekday code. */
+const JS_WEEKDAY_CODES: WeekdayCode[] = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
+
+/** The weekday an event starts on, in the frame its series expands in: the UTC date for an all-day event
+ * (`start`'s date part), the event's own timezone otherwise (`start` being a local `datetime-local` value).
+ * `undefined` while the start input is empty/invalid. */
+export function startWeekdayCode(start: string, allDay: boolean, timezone: string | undefined): WeekdayCode | undefined {
+    const ms = allDay ? new Date(allDayInstant(start.slice(0, 10))).getTime() : new Date(start).getTime();
+    if (Number.isNaN(ms)) {
+        return undefined;
+    }
+    return JS_WEEKDAY_CODES[new Date(toEventWallClock(ms, timezone, allDay)).getUTCDay()];
+}
+
+/**
+ * Whether `occurrence` should be shown on the grid's local calendar day `day`. All-day events cover every
+ * date from their start date up to (not including) their exclusive end date — at least their start date.
+ * Timed events cover every local day their [start, end) interval overlaps, so a multi-day event shows on
+ * each day rather than only on its start day.
+ */
+export function occursOnDay(occurrence: CalendarOccurrence, day: Date): boolean {
+    if (occurrence.allDay) {
+        const key = localDateKey(day);
+        const startKey = allDayDateKey(occurrence.startDate);
+        const endKey = allDayDateKey(occurrence.endDate);
+        return key === startKey || (key > startKey && key < endKey);
+    }
+    const dayStart = new Date(day.getFullYear(), day.getMonth(), day.getDate());
+    const dayEnd = new Date(day.getFullYear(), day.getMonth(), day.getDate() + 1);
+    const start = new Date(occurrence.startDate);
+    const end = new Date(occurrence.endDate);
+    if (start.getTime() === end.getTime()) {
+        return start >= dayStart && start < dayEnd;
+    }
+    return start < dayEnd && end > dayStart;
+}
+
+/**
+ * Whether `day` is the first day `occurrence` covers. Grid views only make that day's chip/block
+ * draggable — a drag id must be unique, so the continuation copies on later days are display-only.
+ */
+export function startsOnDay(occurrence: CalendarOccurrence, day: Date): boolean {
+    if (occurrence.allDay) {
+        return allDayDateKey(occurrence.startDate) === localDateKey(day);
+    }
+    return localDateKey(new Date(occurrence.startDate)) === localDateKey(day);
+}

package/apps/shared/components/calendar/eventDialogFields.ts

@@ -0,0 +1,86 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { EventVisibility, guestPermissionsOf, visibilityOf } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import {
+    MAX_EVENT_DESCRIPTION_HTML_LENGTH,
+    MAX_EVENT_DESCRIPTION_LENGTH,
+    htmlToPlainText,
+    sanitizeEventDescriptionHtml,
+} from "@rapidmx/react-shared/calendar/eventDescription.js";
+import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+import { EventFormValues } from "./eventForm.js";
+
+/** The event dialog's own fields of a `CalendarEventInput` - only the ones that differ from what the event has, so saving an event no one touched these on
+ * says nothing about them (and asks for no new invitations). */
+export interface EventDialogFields {
+    /** `null` clears. */
+    description?: string | null;
+    descriptionHtml?: string | null;
+    visibility?: EventVisibility;
+    guestsCanModify?: boolean;
+    guestsCanInviteOthers?: boolean;
+    guestsCanSeeGuestList?: boolean;
+}
+
+function escapeHtml(text: string): string {
+    return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+/** Whether the editor's HTML holds any text (an emptied editor writes `<p></p>`). */
+export function hasDescriptionText(html: string): boolean {
+    return html.replace(/<[^>]*>/g, "").trim() !== "";
+}
+
+/** A plain-text description as the paragraphs the editor starts from: one for each line (an event whose description has no HTML). */
+export function plainTextToHtml(text: string): string {
+    return text
+        .split(/\r\n|\r|\n/)
+        .map((line) => `<p>${escapeHtml(line)}</p>`)
+        .join("");
+}
+
+/** What the description editor starts with for `occurrence`: its HTML, else its plain text as paragraphs, else nothing. */
+export function initialDescriptionHtml(occurrence: Pick<CalendarOccurrence, "description" | "descriptionHtml"> | null): string {
+    if (occurrence?.descriptionHtml) {
+        return occurrence.descriptionHtml;
+    }
+    return occurrence?.description ? plainTextToHtml(occurrence.description) : "";
+}
+
+/** Why the description cannot be saved as it is - too long for the server (400) - or `undefined`. */
+export function descriptionProblem(descriptionHtml: string): string | undefined {
+    const html = sanitizeEventDescriptionHtml(descriptionHtml);
+    return html.length > MAX_EVENT_DESCRIPTION_HTML_LENGTH || htmlToPlainText(html).length > MAX_EVENT_DESCRIPTION_LENGTH
+        ? "The description is too long."
+        : undefined;
+}
+
+/**
+ * What the form says about the description, visibility and guest permissions that differs from `occurrence` (`null` for a new event, which starts from the
+ * defaults: no description, default visibility, guests cannot modify, can invite, can see the list). A description is sent as both its sanitized HTML and the
+ * plain text derived from it, or as `null` twice when it was emptied; one the user did not change is not sent.
+ */
+export function dialogFields(values: EventFormValues, occurrence: CalendarOccurrence | null): EventDialogFields {
+    const fields: EventDialogFields = {};
+
+    const initial = initialDescriptionHtml(occurrence);
+    const html = sanitizeEventDescriptionHtml(values.descriptionHtml);
+    if (values.descriptionHtml !== initial && html !== sanitizeEventDescriptionHtml(initial)) {
+        const plain = htmlToPlainText(html);
+        fields.description = plain || null;
+        fields.descriptionHtml = plain ? html : null;
+    }
+
+    if (values.visibility !== (occurrence ? visibilityOf(occurrence) : "default")) {
+        fields.visibility = values.visibility;
+    }
+    const permissions = guestPermissionsOf(occurrence ?? {});
+    for (const key of ["guestsCanModify", "guestsCanInviteOthers", "guestsCanSeeGuestList"] as const) {
+        if (values[key] !== permissions[key]) {
+            fields[key] = values[key];
+        }
+    }
+    return fields;
+}

package/apps/shared/components/calendar/eventForm.ts

@@ -0,0 +1,108 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { FormEvent } from "react";
+import { Attendee, BusyStatus, EventVisibility, RecurrenceRule, WeekdayCode } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+
+/** Which occurrences of a recurring event an edit applies to. */
+export type EditScope = "occurrence" | "series";
+
+/**
+ * Everything the event form edits. The quick-create popover and the full form are two faces of the same values, so a title typed in the
+ * one is still there when "More options" opens the other.
+ */
+export interface EventFormValues {
+    title: string;
+    location: string;
+    /** `YYYY-MM-DDTHH:mm` on the wall clock of `formZone` (for an all-day event only the date part matters). */
+    start: string;
+    end: string;
+    allDay: boolean;
+    /** The zone `start` and `end` are read in: the device's own until the user picks another. */
+    formZone: string;
+    /** The IANA zone the event is stored with. */
+    timezone: string;
+    attendees: Attendee[];
+    /** What has been typed into the guests field but not added yet. */
+    guestDraft: string;
+    /** What was committed to the guests field (Enter, a comma, leaving it) but is not an address: kept there, flagged, until it is fixed or removed. */
+    guestInvalid: string[];
+    recurrenceRule: RecurrenceRule | null;
+    /** Minutes before the start, as typed; blank means no reminder. */
+    reminderMinutes: string;
+    busyStatus: BusyStatus;
+    /** Who may see the event's details. */
+    visibility: EventVisibility;
+    /** The description as the editor last wrote it: HTML, `""` when there is none (an emptied editor writes `<p></p>`, which counts as none). */
+    descriptionHtml: string;
+    /** What guests may do: ask for the event to change, ask for guests to be added, see who else is invited. */
+    guestsCanModify: boolean;
+    guestsCanInviteOthers: boolean;
+    guestsCanSeeGuestList: boolean;
+    autoReplyEnabled: boolean;
+    autoReplyMessage: string;
+    videoEnabled: boolean;
+    targetMailboxUid: string;
+    targetFolderUid: string;
+}
+
+/** What `EventEditor` hands both faces of the form: the values, and every action and derived fact they need. */
+export interface EventFormController {
+    /** The event being edited, `null` for a new one. */
+    occurrence: CalendarOccurrence | null;
+    values: EventFormValues;
+    update: (patch: Partial<EventFormValues>) => void;
+
+    // Date and time.
+    setStart: (next: string) => void;
+    setEnd: (next: string) => void;
+    onAllDayChange: (allDay: boolean) => void;
+    onTimeZoneChange: (zone: string) => void;
+    timeZones: string[];
+    startWeekday: WeekdayCode | undefined;
+    /** "This event only" of a recurring event: the copy it detaches has no rule of its own. */
+    editingSingleOccurrence: boolean;
+
+    // Find a time: whose calendar the grid shows as "you", and the zone the device's own clock is in.
+    /** The address the event is organized from (the chosen mailbox's, for a new event). */
+    organizerAddress: string;
+    deviceZone: string;
+
+    // Guests.
+    updateAttendee: (index: number, patch: Partial<Attendee>) => void;
+    removeAttendee: (index: number) => void;
+    addResource: (mailbox: Mailbox) => void;
+    /** Addresses already on the list (lowercased), for the room/equipment picker to leave out. */
+    guestAddresses: string[];
+
+    // Where the event goes.
+    mailboxOptions: { mailbox: Mailbox; calendars: { uid: string; name: string }[] }[] | undefined;
+    onMailboxChange: (mailboxUid: string) => void;
+    /** The calendars to choose between when creating; `undefined` for an existing event, which keeps its own. */
+    calendarChoices: { uid: string; name: string }[] | undefined;
+    calendarName: string | undefined;
+    calendarColor: string | undefined;
+
+    // Video conferencing.
+    videoMeetingUid: string | undefined;
+    /** The organizer's own join link once it is known and safe to open. */
+    joinUrl: string | undefined;
+    /** `undefined` while it is being fetched, `null` once it is known there is none. */
+    organizerJoinUrl: string | null | undefined;
+    videoError: string | null;
+
+    // The form as a whole.
+    editScope: EditScope;
+    setEditScope: (scope: EditScope) => void;
+    /** Whether the "Apply changes to" choice is offered (editing an occurrence of a recurring event). */
+    showEditScope: boolean;
+    error: string | null;
+    saving: boolean;
+    /** Submits the form. */
+    onSubmit: (event: FormEvent) => void;
+    /** The X / Cancel: leaves the form (back to the details for an existing event). */
+    onCancel: () => void;
+}