@open-webapp/calendar 0.0.0-stage → 0.1.0

package/dist/react/CalendarSelector.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { filterCalendarsByName, summarizeCalendarSelection } from '../core/events.js';
+export function CalendarSelector({ calendars, selectedIds, onChange, heading }) {
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const [activeIndex, setActiveIndex] = useState(0);
+    const buttonRef = useRef(null);
+    const searchRef = useRef(null);
+    const rootRef = useRef(null);
+    const listboxId = useId();
+    const visibleCalendars = filterCalendarsByName(calendars, query);
+    const primaryId = calendars.find((calendar) => calendar.primary)?.id ?? calendars[0]?.id;
+    useEffect(() => {
+        if (open)
+            searchRef.current?.focus();
+    }, [open]);
+    useEffect(() => {
+        if (!open)
+            return;
+        function onMouseDown(event) {
+            if (rootRef.current && !rootRef.current.contains(event.target))
+                setOpen(false);
+        }
+        function onKeyDown(event) {
+            if (event.key === 'Escape')
+                setOpen(false);
+        }
+        document.addEventListener('mousedown', onMouseDown);
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('mousedown', onMouseDown);
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [open]);
+    function close() {
+        setOpen(false);
+        buttonRef.current?.focus();
+    }
+    function toggle(id) {
+        if (selectedIds.includes(id)) {
+            if (selectedIds.length === 1)
+                return;
+            onChange(selectedIds.filter((selectedId) => selectedId !== id));
+            return;
+        }
+        onChange([...selectedIds, id]);
+    }
+    function selectAll() {
+        const visibleIds = visibleCalendars.map((calendar) => calendar.id);
+        onChange([...selectedIds, ...visibleIds.filter((id) => !selectedIds.includes(id))]);
+    }
+    function clear() {
+        onChange(primaryId ? [primaryId] : []);
+    }
+    function handleListboxKeyDown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            close();
+            return;
+        }
+        if (visibleCalendars.length === 0)
+            return;
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            setActiveIndex((index) => (index + 1) % visibleCalendars.length);
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            setActiveIndex((index) => (index - 1 + visibleCalendars.length) % visibleCalendars.length);
+            return;
+        }
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            const activeCalendar = visibleCalendars[activeIndex];
+            if (activeCalendar)
+                toggle(activeCalendar.id);
+        }
+    }
+    const label = summarizeCalendarSelection(selectedIds, calendars);
+    return (_jsxs("div", { className: "calendar-selector", ref: rootRef, children: [_jsx("button", { ref: buttonRef, type: "button", role: "combobox", "aria-label": label, "aria-expanded": open, "aria-controls": listboxId, "aria-haspopup": "listbox", onClick: () => {
+                    setOpen((isOpen) => !isOpen);
+                    setQuery('');
+                    setActiveIndex(0);
+                }, children: label }), open && (_jsxs("div", { className: "calendar-selector-dropdown calendar-selector-dropdown--upward", onKeyDown: handleListboxKeyDown, children: [heading && (_jsx("div", { role: "heading", "aria-level": 3, className: "calendar-selector-heading", children: heading })), _jsx("input", { ref: searchRef, type: "search", role: "searchbox", "aria-label": "Search calendars", value: query, onChange: (event) => {
+                            setQuery(event.target.value);
+                            setActiveIndex(0);
+                        } }), _jsxs("div", { className: "calendar-selector-actions", children: [_jsx("button", { type: "button", onClick: selectAll, children: "Select all" }), _jsx("button", { type: "button", onClick: clear, children: "Clear" }), _jsx("button", { type: "button", onClick: close, children: "Done" })] }), _jsx("div", { id: listboxId, role: "listbox", "aria-multiselectable": "true", "aria-activedescendant": visibleCalendars[activeIndex] ? `${listboxId}-${visibleCalendars[activeIndex].id}` : undefined, tabIndex: -1, children: calendars.length === 0 ? (_jsx("p", { children: "No calendars available" })) : visibleCalendars.length === 0 ? (_jsx("p", { children: "No calendars found" })) : (visibleCalendars.map((calendar, index) => (_jsxs("button", { type: "button", id: `${listboxId}-${calendar.id}`, role: "option", title: calendar.summary, "aria-selected": selectedIds.includes(calendar.id), "data-active": index === activeIndex || undefined, onClick: () => toggle(calendar.id), children: [_jsx("input", { type: "checkbox", className: "calendar-selector-checkbox", checked: selectedIds.includes(calendar.id), readOnly: true, tabIndex: -1, "aria-hidden": "true" }), _jsx("span", { "aria-hidden": "true", className: "calendar-selector-dot", "data-testid": `calendar-color-${calendar.id}`, style: { backgroundColor: calendar.backgroundColor } }), _jsx("span", { className: "calendar-selector-name", title: calendar.summary, children: calendar.summary })] }, calendar.id)))) })] }))] }));
+}

package/dist/react/index.d.ts

@@ -0,0 +1,3 @@
+export { CalendarPane } from './CalendarPane.js';
+export type { CalendarPaneProps, RsvpSelection } from './CalendarPane.js';
+export { CalendarSelector } from './CalendarSelector.js';

package/dist/react/index.js

@@ -0,0 +1,2 @@
+export { CalendarPane } from './CalendarPane.js';
+export { CalendarSelector } from './CalendarSelector.js';

package/dist/styles.css

@@ -0,0 +1,503 @@
+.calendar-pane {
+  --calendar-footer-height: 64px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.calendar-pane-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.calendar-pane:has(.calendar-pane-footer) .calendar-pane-scroll {
+  padding-bottom: var(--calendar-footer-height);
+}
+
+.calendar-pane-footer {
+  position: sticky;
+  bottom: 0;
+  z-index: 3;
+  box-sizing: border-box;
+  min-height: var(--calendar-footer-height);
+  padding: 12px 16px;
+  border-top: 1px solid #eee;
+  background: #ffffff;
+}
+
+.calendar-pane-prompt {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 24px 16px;
+}
+
+.calendar-pane-prompt p {
+  margin: 0;
+  color: #555;
+  font-size: 14px;
+}
+
+.calendar-connect-button {
+  padding: 10px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  background: #ffffff;
+  color: #00a9ce;
+  border: 1px solid #00a9ce;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.calendar-connect-button:hover {
+  background: #f0f8fb;
+}
+
+.calendar-rsvp-chips {
+  display: flex;
+  gap: 8px;
+  padding: 12px 16px;
+  flex-wrap: wrap;
+  position: sticky;
+  top: 0;
+  background: #ffffff;
+  z-index: 2;
+}
+
+.calendar-rsvp-chip {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: transparent;
+  color: #333;
+  border: 1px solid #ccc;
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.calendar-scroll-today-btn {
+  margin-right: 4px;
+  padding-right: 4px;
+  border-right: 1px solid #ccc;
+}
+
+.calendar-rsvp-chip:hover {
+  border-color: #00a9ce;
+}
+
+.calendar-rsvp-chip.selected {
+  background: #081a59;
+  color: #ffffff;
+  border-color: #081a59;
+}
+
+.calendar-empty-state {
+  padding: 24px 16px;
+  color: #999;
+  font-size: 14px;
+}
+
+.calendar-day-groups {
+  display: flex;
+  flex-direction: column;
+}
+
+.calendar-day-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.calendar-day-header {
+  position: sticky;
+  top: var(--chip-row-height, 44px);
+  background: #f5f5f5;
+  color: #333;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 8px 16px;
+  z-index: 1;
+}
+
+.calendar-event-allday {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border-left: 3px solid var(--rsvp-bar, transparent);
+  border-bottom: 1px solid #eee;
+}
+
+.calendar-event-row {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 16px;
+  border-left: 3px solid var(--rsvp-bar, transparent);
+  border-bottom: 1px solid #eee;
+}
+
+.calendar-event-allday {
+  background: #fdf6e3;
+  font-style: italic;
+}
+
+.calendar-event-row--rsvp-accepted {
+  --rsvp-bar: #2e7d32;
+}
+
+.calendar-event-row--rsvp-tentative {
+  --rsvp-bar: #d97706;
+}
+
+.calendar-event-row--rsvp-needsAction {
+  --rsvp-bar: #2563eb;
+}
+
+.calendar-event-row--rsvp-declined {
+  --rsvp-bar: #dc2626;
+}
+
+.calendar-event-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.calendar-event-title-link {
+  align-self: flex-start;
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+}
+
+.calendar-event-title-link:hover .calendar-event-title {
+  text-decoration: underline;
+}
+
+.calendar-event-title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  align-self: flex-start;
+}
+
+.calendar-event-insert-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: #888;
+  cursor: pointer;
+}
+
+.calendar-event-insert-link:hover {
+  color: #222;
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.calendar-event-insert-link:focus-visible {
+  outline: 2px solid #1a73e8;
+  outline-offset: 1px;
+  color: #222;
+}
+
+.calendar-event-time {
+  font-size: 12px;
+  color: #666;
+  min-width: 110px;
+  flex-shrink: 0;
+}
+
+.calendar-event-title {
+  font-size: 14px;
+  color: #222;
+}
+
+.calendar-event-organizer {
+  font-size: 12px;
+  color: #888;
+}
+
+.calendar-event-calendar {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  color: #888;
+}
+
+.calendar-event-calendar-dot {
+  width: 8px;
+  height: 8px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+}
+
+.calendar-event-join {
+  font-size: 12px;
+  font-weight: 500;
+  color: #00a9ce;
+  cursor: pointer;
+  text-decoration: none;
+  padding: 4px 8px;
+  border: 1px solid #00a9ce;
+  border-radius: 4px;
+}
+
+.calendar-event-join:hover {
+  background: #f0f8fb;
+}
+
+.calendar-event-row--current,
+.calendar-event-row--selected {
+  background: #f0f8fb;
+}
+
+@media (prefers-color-scheme: dark) {
+  .calendar-pane-prompt p {
+    color: #ccc;
+  }
+
+  .calendar-connect-button {
+    background: #1a1a1a;
+    color: #22d0ef;
+    border-color: #22d0ef;
+  }
+
+  .calendar-connect-button:hover {
+    background: #2a2a2a;
+  }
+
+  .calendar-rsvp-chips {
+    background: #1a1a1a;
+  }
+
+  .calendar-pane-footer {
+    border-top-color: #333;
+    background: #1a1a1a;
+  }
+
+  .calendar-rsvp-chip {
+    color: #eee;
+    border-color: #444;
+  }
+
+  .calendar-scroll-today-btn {
+    border-right-color: #444;
+  }
+
+  .calendar-rsvp-chip.selected {
+    background: #22d0ef;
+    color: #081a59;
+    border-color: #22d0ef;
+  }
+
+  .calendar-day-header {
+    background: #222;
+    color: #eee;
+  }
+
+  .calendar-event-allday {
+    border-bottom-color: #333;
+  }
+
+  .calendar-event-row {
+    border-bottom-color: #333;
+  }
+
+  .calendar-event-allday {
+    background: #2a2510;
+  }
+
+  .calendar-event-row--rsvp-accepted {
+    --rsvp-bar: #4ade80;
+  }
+
+  .calendar-event-row--rsvp-tentative {
+    --rsvp-bar: #fbbf24;
+  }
+
+  .calendar-event-row--rsvp-needsAction {
+    --rsvp-bar: #60a5fa;
+  }
+
+  .calendar-event-row--rsvp-declined {
+    --rsvp-bar: #f87171;
+  }
+
+  .calendar-event-title {
+    color: #eee;
+  }
+
+  .calendar-event-join {
+    color: #22d0ef;
+    border-color: #22d0ef;
+  }
+
+  .calendar-event-join:hover {
+    background: #2a2a2a;
+  }
+
+  .calendar-event-row--current,
+  .calendar-event-row--selected {
+    background: #10262b;
+  }
+
+  .calendar-event-insert-link {
+    color: #999;
+  }
+
+  .calendar-event-insert-link:hover {
+    color: #eee;
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .calendar-event-insert-link:focus-visible {
+    outline-color: #22d0ef;
+    color: #eee;
+  }
+}
+
+.calendar-selector {
+  position: relative;
+}
+
+.calendar-selector-dropdown {
+  position: absolute;
+  z-index: 3;
+  box-sizing: border-box;
+  min-width: 220px;
+  max-width: min(320px, calc(100vw - 32px));
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  background: #fff;
+  color: #1a1a1a;
+  box-shadow: 0 4px 14px rgb(0 0 0 / 15%);
+}
+
+.calendar-selector-dropdown--upward {
+  right: 0;
+  bottom: calc(100% + 6px);
+}
+
+.calendar-selector-dropdown input[type='search'] {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.calendar-selector-checkbox {
+  flex: none;
+  margin: 0;
+  pointer-events: none;
+  accent-color: #22a6c0;
+}
+
+.calendar-selector-actions {
+  display: flex;
+  gap: 8px;
+  margin: 8px 0;
+}
+
+.calendar-selector-dropdown [role='listbox'] {
+  display: grid;
+  gap: 2px;
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.calendar-selector-dropdown [role='option'] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px;
+  border: 0;
+  background: transparent;
+  text-align: left;
+}
+
+.calendar-selector-dropdown [role='option'][data-active='true'] {
+  background: #e8f5f8;
+}
+
+.calendar-selector-dot {
+  flex: none;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.calendar-selector-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (prefers-color-scheme: dark) {
+  .calendar-selector-dropdown {
+    border-color: #333;
+    background: #1a1a1a;
+    color: #eee;
+    box-shadow: 0 4px 14px rgb(0 0 0 / 50%);
+  }
+
+  .calendar-selector-dropdown input[type='search'] {
+    border: 1px solid #444;
+    background: #2a2a2a;
+    color: #eee;
+  }
+
+  .calendar-selector-dropdown button {
+    border: 1px solid #444;
+    background: #2a2a2a;
+    color: #eee;
+  }
+
+  .calendar-selector-dropdown [role='option'] {
+    border: 0;
+    background: transparent;
+    color: #eee;
+  }
+
+  .calendar-selector-dropdown [role='option']:hover {
+    background: #2a2a2a;
+  }
+
+  .calendar-selector-dropdown [role='option'][data-active='true'] {
+    background: #10262b;
+  }
+}
+
+.calendar-event-source-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 5px;
+  flex: none;
+}
+
+.calendar-selector-heading {
+  margin: 0;
+  padding: 6px 8px 2px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  opacity: 0.7;
+  overflow-wrap: anywhere;
+}

package/dist/testing/index.d.ts

@@ -0,0 +1,21 @@
+import type { CryptoAdapter, StorageAdapter, StorageRow } from '../core/storage.js';
+export declare function createMemoryStorage(): StorageAdapter & {
+    rows: Map<string, StorageRow>;
+};
+export declare const identityCrypto: CryptoAdapter;
+export type FakeReply = {
+    status: number;
+    body?: unknown;
+} | 'network-error';
+/** Stubs global fetch with a router; returns the request log. Restore via the returned `restore`. */
+export declare function installFakeFetch(router: (req: {
+    url: string;
+    token: string;
+}, u: URL) => FakeReply): {
+    log: {
+        url: string;
+        token: string;
+    }[];
+    restore: () => void;
+};
+export * from './storageContract.js';

package/dist/testing/index.js

@@ -0,0 +1,42 @@
+export function createMemoryStorage() {
+    const rows = new Map();
+    return {
+        rows,
+        async get(id) {
+            return rows.get(id) ?? null;
+        },
+        async put(id, row) {
+            rows.set(id, row);
+        },
+        async delete(id) {
+            rows.delete(id);
+        },
+        async clear(id) {
+            rows.delete(id);
+        },
+    };
+}
+export const identityCrypto = {
+    encrypt: async (s) => s,
+    decrypt: async (s) => s,
+};
+/** Stubs global fetch with a router; returns the request log. Restore via the returned `restore`. */
+export function installFakeFetch(router) {
+    const original = globalThis.fetch;
+    const log = [];
+    globalThis.fetch = (async (input, init) => {
+        const url = String(input);
+        const auth = init?.headers?.Authorization ?? init?.headers?.authorization ?? '';
+        const req = { url, token: auth.replace(/^Bearer /, '') };
+        log.push(req);
+        const reply = router(req, new URL(url));
+        if (reply === 'network-error')
+            throw new TypeError('Failed to fetch');
+        return new Response(JSON.stringify(reply.body ?? {}), {
+            status: reply.status,
+            headers: { 'content-type': 'application/json' },
+        });
+    });
+    return { log, restore: () => void (globalThis.fetch = original) };
+}
+export * from './storageContract.js';

package/dist/testing/storageContract.d.ts

@@ -0,0 +1,27 @@
+import type { CryptoAdapter, StorageAdapter, StorageRow } from '../core/storage.js';
+import type { CalendarEvent } from '../core/types.js';
+/**
+ * What a host supplies to run the contract.
+ *
+ * - `storage` / `crypto`: the adapters under test (fresh, empty per factory call).
+ * - `seedRaw` (optional): writes a row EXACTLY as given, bypassing any normalisation the
+ *   adapter's `put` performs. Hosts whose adapter stores a different on-disk shape (e.g. an
+ *   IndexedDB store) use this to plant legacy-format and corrupt rows. Defaults to `storage.put`.
+ * - `wrongKeyCrypto` (optional): a crypto adapter whose decrypt fails (or yields garbage) for
+ *   data written by `crypto`. Omit when `crypto` is an identity transform (wrong-key case skipped).
+ * - `encryptedFixture` (optional): a LITERAL ciphertext string (copied from a real legacy
+ *   capture, never generated here) that `crypto.decrypt` turns into JSON of `[LEGACY_EVENT]`.
+ *   Defaults to the plain JSON string, which is correct for identity crypto.
+ * - `corruptRow` (optional): a row the host considers corrupt on disk. Defaults to garbage strings.
+ */
+export interface StorageContractHarness {
+    storage: StorageAdapter;
+    crypto: CryptoAdapter;
+    seedRaw?: (sourceId: string, row: StorageRow) => Promise<void>;
+    wrongKeyCrypto?: CryptoAdapter;
+    encryptedFixture?: string;
+    corruptRow?: StorageRow;
+}
+/** Literal fixture event (values copied from the notesdiary calendarCache test row()). */
+export declare const LEGACY_EVENT: CalendarEvent;
+export declare function runStorageAdapterContract(factory: () => StorageContractHarness | Promise<StorageContractHarness>): void;