pixelize-design-library 3.0.0 → 3.1.0

package/dist/Components/NotificationCenter/core/overlay.d.ts

@@ -0,0 +1,109 @@
+import type { NotificationActionError, NotificationCategories, NotificationCounts, NotificationEntry, NotificationMarkAllScope } from "./NotificationSourceProps";
+import type { LiveNotificationEntry, NotificationDecision, NotificationReasonRequest, NotificationRowStatus, NotificationZoneLists } from "./NotificationEngineProps";
+export type ById<T> = {
+    [id: string]: T | undefined;
+};
+export type WindowPhase = "undo" | "sending" | "settled";
+export type DecisionPhase = Exclude<NotificationRowStatus, "open">;
+export interface DecisionRecord {
+    batch: string;
+    decision: NotificationDecision;
+    phase: DecisionPhase;
+    folded: boolean;
+    error?: NotificationActionError;
+    settledAt?: number;
+}
+export interface FlagRecord {
+    batch: string;
+    value: boolean;
+    phase: WindowPhase;
+    folded: boolean;
+    settledAt?: number;
+    previous?: FlagRecord;
+}
+export interface MarkAllRecord {
+    batch: string;
+    scope: NotificationMarkAllScope;
+    phase: WindowPhase;
+    settledAt?: number;
+}
+export interface DismissedRecord {
+    actionId: string;
+    settledAt?: number;
+}
+export interface NotificationOverlay {
+    decisions: ById<DecisionRecord>;
+    read: ById<FlagRecord>;
+    archived: ById<FlagRecord>;
+    markAll: MarkAllRecord[];
+    reasonRequests: ById<NotificationReasonRequest>;
+    dismissed: ById<DismissedRecord>;
+    epoch: number;
+}
+export declare const EMPTY_OVERLAY: NotificationOverlay;
+export interface DecisionOutcome {
+    batch: string;
+    error?: NotificationActionError;
+}
+export type FlagKey = "read" | "archived";
+export type OverlayAction = {
+    type: "decide";
+    batch: string;
+    ids: string[];
+    decision: NotificationDecision;
+} | {
+    type: "retry";
+    batch: string;
+    ids: string[];
+} | {
+    type: "fold";
+    batch: string;
+} | {
+    type: "send";
+    batch: string;
+} | {
+    type: "drop";
+    batch: string;
+} | {
+    type: "settleDecisions";
+    outcomes: Record<string, DecisionOutcome>;
+} | {
+    type: "dismiss";
+    id: string;
+} | {
+    type: "clearReasonRequest";
+    id: string;
+} | {
+    type: "flag";
+    key: FlagKey;
+    batch: string;
+    ids: string[];
+    value: boolean;
+    phase: "undo" | "sending";
+} | {
+    type: "markAll";
+    batch: string;
+    scope: NotificationMarkAllScope;
+    ids: string[];
+} | {
+    type: "settle";
+    batch: string;
+} | {
+    type: "reconcile";
+    entries: NotificationEntry[];
+} | {
+    type: "countsChanged";
+};
+export declare const overlayReducer: (state: NotificationOverlay, action: OverlayAction) => NotificationOverlay;
+export declare const liveEntryFor: (entry: NotificationEntry, overlay: NotificationOverlay, categories: NotificationCategories) => LiveNotificationEntry;
+export interface LiveLists {
+    lists: NotificationZoneLists;
+    byId: Map<string, LiveNotificationEntry>;
+    entries: NotificationEntry[];
+}
+export type LiveCache = WeakMap<NotificationEntry, {
+    categories: NotificationCategories;
+    live: LiveNotificationEntry;
+}>;
+export declare const buildLiveLists: (entries: NotificationEntry[], overlay: NotificationOverlay, categories: NotificationCategories, cache?: LiveCache) => LiveLists;
+export declare const optimisticCounts: (live: LiveLists, overlay: NotificationOverlay, categories: NotificationCategories, server: NotificationCounts) => NotificationCounts;

package/dist/Components/NotificationCenter/core/overlay.js

@@ -0,0 +1,281 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.optimisticCounts = exports.buildLiveLists = exports.liveEntryFor = exports.overlayReducer = exports.EMPTY_OVERLAY = void 0;
+const grouping_1 = require("./grouping");
+exports.EMPTY_OVERLAY = {
+    decisions: {},
+    read: {},
+    archived: {},
+    markAll: [],
+    reasonRequests: {},
+    dismissed: {},
+    epoch: 0,
+};
+const mapById = (record, fn) => {
+    let changed = false;
+    const next = {};
+    Object.keys(record).forEach((id) => {
+        const current = record[id];
+        if (current === undefined)
+            return;
+        const value = fn(current, id);
+        if (value !== current)
+            changed = true;
+        if (value !== undefined)
+            next[id] = value;
+    });
+    return changed ? next : record;
+};
+const hasAction = (entry, actionId) => Boolean(entry.actions && entry.actions.some((action) => action.id === actionId));
+const foldsWithDecision = (phase) => phase === "undo" || phase === "sending" || phase === "resolved";
+const withPrevious = (current) => current ? { ...current, previous: undefined } : undefined;
+const setFlags = (record, ids, batch, value, phase) => {
+    const next = { ...record };
+    ids.forEach((id) => {
+        next[id] = { batch, value, phase, folded: false, previous: withPrevious(record[id]) };
+    });
+    return next;
+};
+const stepFlags = (record, batch, fn) => mapById(record, (rec) => (rec.batch === batch ? fn(rec) : rec));
+const firstById = (entries) => {
+    const byId = new Map();
+    entries.forEach((entry) => {
+        if (!byId.has(entry.id))
+            byId.set(entry.id, entry);
+    });
+    return byId;
+};
+const reconcile = (state, entries) => {
+    const byId = firstById(entries);
+    const decisions = mapById(state.decisions, (rec, id) => {
+        const base = byId.get(id);
+        if (!base)
+            return undefined;
+        if ((rec.phase === "resolved" || rec.phase === "denied") && !hasAction(base, rec.decision.actionId))
+            return undefined;
+        return rec;
+    });
+    const dismissed = mapById(state.dismissed, (rec, id) => {
+        const base = byId.get(id);
+        return base && hasAction(base, rec.actionId) ? rec : undefined;
+    });
+    const settledFlag = (agrees) => (rec, id) => {
+        const base = byId.get(id);
+        if (!base)
+            return undefined;
+        return rec.phase === "settled" && agrees(base, rec) ? undefined : rec;
+    };
+    const read = mapById(state.read, settledFlag((base, rec) => base.isRead === rec.value));
+    const archived = mapById(state.archived, settledFlag((base, rec) => Boolean(base.archived) === rec.value));
+    const reasonRequests = mapById(state.reasonRequests, (req, id) => (byId.has(id) ? req : undefined));
+    const unchanged = decisions === state.decisions &&
+        dismissed === state.dismissed &&
+        read === state.read &&
+        archived === state.archived &&
+        reasonRequests === state.reasonRequests;
+    return unchanged ? state : { ...state, decisions, dismissed, read, archived, reasonRequests };
+};
+const settleDecisions = (state, outcomes) => {
+    const decisions = { ...state.decisions };
+    const reasonRequests = { ...state.reasonRequests };
+    Object.keys(outcomes).forEach((id) => {
+        const rec = decisions[id];
+        const outcome = outcomes[id];
+        if (!rec || rec.batch !== outcome.batch)
+            return;
+        const { error } = outcome;
+        if (!error) {
+            decisions[id] = { ...rec, phase: "resolved", folded: true, settledAt: state.epoch };
+        }
+        else if (error.kind === "reasonRequired") {
+            delete decisions[id];
+            reasonRequests[id] = { actionId: rec.decision.actionId, message: error.message };
+        }
+        else if (error.kind === "failed") {
+            decisions[id] = { ...rec, phase: "failed", folded: false, error };
+        }
+        else {
+            decisions[id] = { ...rec, phase: "denied", folded: false, error, settledAt: state.epoch };
+        }
+    });
+    return { ...state, decisions, reasonRequests };
+};
+const overlayReducer = (state, action) => {
+    switch (action.type) {
+        case "decide": {
+            const decisions = { ...state.decisions };
+            const reasonRequests = { ...state.reasonRequests };
+            action.ids.forEach((id) => {
+                decisions[id] = { batch: action.batch, decision: action.decision, phase: "undo", folded: false };
+                delete reasonRequests[id];
+            });
+            return { ...state, decisions, reasonRequests };
+        }
+        case "retry":
+            return {
+                ...state,
+                decisions: mapById(state.decisions, (rec, id) => action.ids.includes(id) && rec.phase === "failed"
+                    ? { batch: action.batch, decision: rec.decision, phase: "sending", folded: false }
+                    : rec),
+            };
+        case "fold":
+            return {
+                ...state,
+                decisions: mapById(state.decisions, (rec) => rec.batch === action.batch && foldsWithDecision(rec.phase) && !rec.folded ? { ...rec, folded: true } : rec),
+                archived: stepFlags(state.archived, action.batch, (rec) => (rec.value && !rec.folded ? { ...rec, folded: true } : rec)),
+            };
+        case "send": {
+            const toSending = (rec) => (rec.phase === "undo" ? { ...rec, phase: "sending" } : rec);
+            return {
+                ...state,
+                decisions: mapById(state.decisions, (rec) => rec.batch === action.batch && rec.phase === "undo" ? { ...rec, phase: "sending" } : rec),
+                read: stepFlags(state.read, action.batch, toSending),
+                archived: stepFlags(state.archived, action.batch, toSending),
+                markAll: state.markAll.map((rec) => (rec.batch === action.batch && rec.phase === "undo" ? { ...rec, phase: "sending" } : rec)),
+            };
+        }
+        case "drop":
+            return {
+                ...state,
+                decisions: mapById(state.decisions, (rec) => (rec.batch === action.batch ? undefined : rec)),
+                read: stepFlags(state.read, action.batch, (rec) => rec.previous),
+                archived: stepFlags(state.archived, action.batch, (rec) => rec.previous),
+                markAll: state.markAll.filter((rec) => rec.batch !== action.batch),
+            };
+        case "settleDecisions":
+            return settleDecisions(state, action.outcomes);
+        case "dismiss": {
+            const rec = state.decisions[action.id];
+            if (!rec || rec.phase !== "denied")
+                return state;
+            const decisions = { ...state.decisions };
+            delete decisions[action.id];
+            return {
+                ...state,
+                decisions,
+                dismissed: { ...state.dismissed, [action.id]: { actionId: rec.decision.actionId, settledAt: rec.settledAt } },
+            };
+        }
+        case "clearReasonRequest": {
+            if (!state.reasonRequests[action.id])
+                return state;
+            const reasonRequests = { ...state.reasonRequests };
+            delete reasonRequests[action.id];
+            return { ...state, reasonRequests };
+        }
+        case "flag": {
+            const next = setFlags(state[action.key], action.ids, action.batch, action.value, action.phase);
+            return action.key === "read" ? { ...state, read: next } : { ...state, archived: next };
+        }
+        case "markAll":
+            return {
+                ...state,
+                read: setFlags(state.read, action.ids, action.batch, true, "undo"),
+                markAll: [...state.markAll, { batch: action.batch, scope: action.scope, phase: "undo" }],
+            };
+        case "settle": {
+            const settle = (rec) => rec.phase === "sending" ? { ...rec, phase: "settled", settledAt: state.epoch } : rec;
+            return {
+                ...state,
+                read: stepFlags(state.read, action.batch, settle),
+                archived: stepFlags(state.archived, action.batch, settle),
+                markAll: state.markAll.map((rec) => rec.batch === action.batch && rec.phase === "sending" ? { ...rec, phase: "settled", settledAt: state.epoch } : rec),
+            };
+        }
+        case "reconcile":
+            return reconcile(state, action.entries);
+        case "countsChanged":
+            return { ...state, epoch: state.epoch + 1, markAll: state.markAll.filter((rec) => rec.phase !== "settled") };
+    }
+};
+exports.overlayReducer = overlayReducer;
+const counts = (rec, epoch) => rec.settledAt === undefined || rec.settledAt >= epoch;
+const resolveFlags = (entry, overlay, countingOnly) => {
+    const keep = (rec) => rec && (!countingOnly || counts(rec, overlay.epoch)) ? rec : undefined;
+    const read = keep(overlay.read[entry.id]);
+    const archive = keep(overlay.archived[entry.id]);
+    const shownArchive = countingOnly ? archive === null || archive === void 0 ? void 0 : archive.value : archive && (archive.value ? archive.folded : false);
+    return {
+        isRead: read && entry.isRead !== undefined ? read.value : entry.isRead,
+        archived: shownArchive === undefined ? Boolean(entry.archived) : shownArchive,
+        isArchiving: Boolean(!countingOnly && archive && archive.value && !archive.folded),
+        decision: keep(overlay.decisions[entry.id]),
+        isDismissed: keep(overlay.dismissed[entry.id]) !== undefined,
+    };
+};
+const isTouched = (id, overlay) => overlay.decisions[id] !== undefined ||
+    overlay.read[id] !== undefined ||
+    overlay.archived[id] !== undefined ||
+    overlay.dismissed[id] !== undefined ||
+    overlay.reasonRequests[id] !== undefined;
+const pendingStatus = (status) => status === "open" || status === "failed";
+const liveEntryFor = (entry, overlay, categories) => {
+    const flags = resolveFlags(entry, overlay, false);
+    const changed = flags.isRead !== entry.isRead || flags.archived !== Boolean(entry.archived);
+    const shown = changed ? { ...entry, isRead: flags.isRead, archived: flags.archived } : entry;
+    const zone = (0, grouping_1.zoneFor)(shown, categories);
+    const record = flags.decision;
+    const status = record ? record.phase : "open";
+    const state = {
+        zone,
+        status,
+        decision: record === null || record === void 0 ? void 0 : record.decision,
+        error: record === null || record === void 0 ? void 0 : record.error,
+        reasonRequest: overlay.reasonRequests[entry.id],
+        isHidden: flags.isArchiving || flags.isDismissed || Boolean(record && record.folded && foldsWithDecision(record.phase)),
+        isPending: zone === "needsYou" && !flags.isDismissed && pendingStatus(status),
+    };
+    return { entry: shown, state };
+};
+exports.liveEntryFor = liveEntryFor;
+const contribution = (entry, overlay, categories) => {
+    const flags = overlay
+        ? resolveFlags(entry, overlay, true)
+        : { isRead: entry.isRead, archived: Boolean(entry.archived), isDismissed: false, decision: undefined };
+    const zone = (0, grouping_1.zoneFor)({ category: entry.category, isRead: flags.isRead, archived: flags.archived }, categories);
+    const status = flags.decision ? flags.decision.phase : "open";
+    return {
+        needsYou: zone === "needsYou" && !flags.isDismissed && pendingStatus(status) ? 1 : 0,
+        unread: zone === "activity" && flags.isRead === false ? 1 : 0,
+    };
+};
+const buildLiveLists = (entries, overlay, categories, cache) => {
+    const byId = new Map();
+    const unique = [];
+    const lists = { needsYou: [], activity: [], archived: [] };
+    entries.forEach((entry) => {
+        if (byId.has(entry.id))
+            return;
+        unique.push(entry);
+        const cached = cache === null || cache === void 0 ? void 0 : cache.get(entry);
+        const touched = isTouched(entry.id, overlay);
+        const live = !touched && cached && cached.categories === categories ? cached.live : (0, exports.liveEntryFor)(entry, overlay, categories);
+        if (!touched && cache)
+            cache.set(entry, { categories, live });
+        byId.set(entry.id, live);
+        lists[live.state.zone].push(live);
+    });
+    lists.needsYou.sort(grouping_1.byNewest);
+    lists.activity.sort(grouping_1.byNewest);
+    lists.archived.sort(grouping_1.byNewest);
+    return { lists, byId, entries: unique };
+};
+exports.buildLiveLists = buildLiveLists;
+const isWholeActivity = (scope) => scope.zone === "activity" && !scope.category && !(scope.query && scope.query.trim());
+const optimisticCounts = (live, overlay, categories, server) => {
+    let needsYou = server.needsYou;
+    let unread = server.unread;
+    live.entries.forEach((entry) => {
+        if (!isTouched(entry.id, overlay))
+            return;
+        const before = contribution(entry, null, categories);
+        const after = contribution(entry, overlay, categories);
+        needsYou += after.needsYou - before.needsYou;
+        unread += after.unread - before.unread;
+    });
+    if (overlay.markAll.some((rec) => isWholeActivity(rec.scope) && counts(rec, overlay.epoch))) {
+        unread = live.lists.activity.filter((item) => item.entry.isRead === false && !item.state.isHidden).length;
+    }
+    return { needsYou: Math.max(0, needsYou), unread: Math.max(0, unread) };
+};
+exports.optimisticCounts = optimisticCounts;

package/dist/Components/NotificationCenter/core/useNotificationEngine.d.ts

@@ -0,0 +1,13 @@
+import type { NotificationSourceProps } from "./NotificationSourceProps";
+import type { NotificationCenterValue } from "./NotificationEngineProps";
+export declare const UNDO_WINDOW_MS = 6000;
+export declare const DECISION_FOLD_MS = 900;
+export declare const ARCHIVE_FOLD_MS = 220;
+export declare const CLOCK_TICK_MS = 60000;
+export type NotificationShared = Pick<NotificationCenterValue, "labels" | "format" | "now" | "categories" | "features" | "isOffline" | "appName" | "actions">;
+export interface NotificationEngine {
+    value: NotificationCenterValue;
+    shared: NotificationShared;
+    announcement: string;
+}
+export declare const useNotificationEngine: (source: NotificationSourceProps) => NotificationEngine;