@rapidmx/web-client 0.15.1 → 0.17.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/eventForm.ts

@@ -28,6 +28,8 @@ export interface EventFormValues {
     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;
@@ -70,8 +72,6 @@ export interface EventFormController {
     deviceZone: string;
 
     // Guests.
-    /** Adds the addresses in `text`; returns the ones that are not valid addresses. */
-    addGuests: (text: string) => string[];
     updateAttendee: (index: number, patch: Partial<Attendee>) => void;
     removeAttendee: (index: number) => void;
     addResource: (mailbox: Mailbox) => void;

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

@@ -6,6 +6,7 @@ import { format } from "date-fns";
 import { Attendee, AttendeeResponseStatus, BusyStatus, EventVisibility, GuestPermissions } from "@rapidmx/react-shared/calendar/calendarApi.js";
 import { fromEventWallClock, toEventWallClock } from "@rapidmx/react-shared/calendar/recurrence.js";
 import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
+import { formatRecipient, isValidRecipientAddress, parseRecipient, splitRecipientList } from "../mail/compose/recipients.js";
 import { addDaysToKey, allDayDateKey } from "./allDay.js";
 
 /** What the event form and the read-only event view both need to say about a busy status / an answer. */
@@ -80,19 +81,53 @@ export function describeReminder(minutes: number | undefined): string {
     return `Notify ${amount} ${amount === 1 ? unit.singular : unit.unit} before`;
 }
 
-/** Splits what was typed into the guests field into its addresses: commas, semicolons and white space separate them. */
-export function splitGuestInput(text: string): string[] {
-    return text.split(/[,;\s]+/).filter(Boolean);
+/** An attendee as the guests field adds one. */
+export function newGuest(address: string, displayName?: string): Attendee {
+    return { address, ...(displayName ? { displayName } : {}), role: "required", responseStatus: "needsAction", isOrganizer: false };
 }
 
-/** The loosest address check that is still worth making before an invitation is sent: something, an @, something. */
-export function isValidGuestAddress(address: string): boolean {
-    return /^[^\s@<>,;]+@[^\s@<>,;]+$/.test(address);
+/** A guest as the guests field shows it: `Name <address>`, or the bare address for one without a name (the form compose's recipient fields use). */
+export function guestChip(guest: { address: string; displayName?: string }): string {
+    return formatRecipient({ address: guest.address, displayName: guest.displayName });
 }
 
-/** An attendee as the guests field adds one. */
-export function newGuest(address: string): Attendee {
-    return { address, role: "required", responseStatus: "needsAction", isOrganizer: false };
+/**
+ * The guests the guests field's chips name, given the guests `current`ly on the list: a chip for someone already there keeps that guest as
+ * they are (their role and answer, whatever the case of the address), a chip for a new address adds a required guest with the chip's name, and
+ * an address twice (or one of `skipAddresses` - the organizer's, or the people already invited) is added once. The chips are the field's whole
+ * list, so a guest without a chip is removed. What is not an address comes back as `invalid`, to stay in the field flagged; several addresses
+ * separated by white space in one chip ("a@x.com b@x.com", as a paste can be) are taken as several.
+ */
+export function applyGuestChips(current: Attendee[], chips: string[], skipAddresses: string[] = []): { attendees: Attendee[]; invalid: string[] } {
+    const skip = new Set(skipAddresses.map((address) => address.toLowerCase()));
+    const attendees: Attendee[] = [];
+    const invalid: string[] = [];
+    const known = (address: string) => current.find((guest) => guest.address.toLowerCase() === address.toLowerCase());
+    const listed = (address: string) => attendees.some((guest) => guest.address.toLowerCase() === address.toLowerCase());
+
+    function add(address: string, displayName?: string) {
+        const existing = known(address);
+        if (existing) {
+            if (!listed(address)) {
+                attendees.push(existing);
+            }
+        } else if (!skip.has(address.toLowerCase()) && !listed(address)) {
+            attendees.push(newGuest(address, displayName));
+        }
+    }
+
+    for (const chip of chips) {
+        const { address, displayName } = parseRecipient(chip);
+        const parts = chip.trim().split(/\s+/);
+        if (isValidRecipientAddress(address) || known(address)) {
+            add(address, displayName);
+        } else if (parts.length > 1 && parts.every(isValidRecipientAddress)) {
+            parts.forEach((part) => add(part));
+        } else if (!invalid.includes(chip.trim())) {
+            invalid.push(chip.trim());
+        }
+    }
+    return { attendees, invalid };
 }
 
 /** The wall-clock string a form input holds ("YYYY-MM-DDTHH:mm") read as `zone`'s clock, as an instant. `deviceZone` is the zone the browser
@@ -152,19 +187,11 @@ export function formatStoredWhen(startDate: string, endDate: string, allDay: boo
     return formatWhen(new Date(startDate), new Date(endDate), false, now);
 }
 
-/** Adds the addresses typed into the guests field to `current`: an address already on the list (in any case) is skipped, and what is not an
- * address comes back as `invalid` for the field to keep. */
-export function mergeGuests(current: Attendee[], text: string): { attendees: Attendee[]; invalid: string[] } {
-    const attendees = [...current];
-    const invalid: string[] = [];
-    for (const token of splitGuestInput(text)) {
-        if (!isValidGuestAddress(token)) {
-            invalid.push(token);
-        } else if (!attendees.some((a) => a.address.toLowerCase() === token.toLowerCase())) {
-            attendees.push(newGuest(token));
-        }
-    }
-    return { attendees, invalid };
+/** Adds the guests typed or pasted into the guests field to `current` - recipients separated by commas or semicolons, each an address or
+ * `Name <address>` (see `applyGuestChips()`, which keeps who is already there): an address already on the list (in any case) or in
+ * `skipAddresses` is skipped, and what is not an address comes back as `invalid` for the field to keep. */
+export function mergeGuests(current: Attendee[], text: string, skipAddresses: string[] = []): { attendees: Attendee[]; invalid: string[] } {
+    return applyGuestChips(current, [...current.map(guestChip), ...splitRecipientList(text)], skipAddresses);
 }
 
 /** `formatWhen()` for the form's own wall-clock strings (an all-day event's `end` is its inclusive last day); a message while either is empty. */