pixelize-design-library 3.0.1-beta.1 → 3.1.1

package/dist/esm/Components/NotificationCenter/core/useNotificationEngine.js

@@ -0,0 +1,408 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, } from "react";
+import { RefreshCw } from "lucide-react";
+import Button from "../../Button/Button.js";
+import { useToaster } from "../../Toaster/Toaster.js";
+import { BUTTON_SIZES } from "../../../Theme/tokens/primitives/controlSizes.js";
+import { toNotificationActionError } from "./actionError.js";
+import { createNotificationFormatter } from "./format.js";
+import { matchesNotificationQuery, plainTitle } from "./grouping.js";
+import { DEFAULT_NOTIFICATION_LOCALE, resolveNotificationLabels } from "./labels.js";
+import { EMPTY_OVERLAY, buildLiveLists, optimisticCounts, overlayReducer, } from "./overlay.js";
+export const UNDO_WINDOW_MS = 6000;
+export const DECISION_FOLD_MS = 900;
+export const ARCHIVE_FOLD_MS = 220;
+export const CLOCK_TICK_MS = 60000;
+const TOAST_POSITION = "bottom-right";
+const ZERO_WIDTH_SPACE = String.fromCodePoint(0x200b);
+const unique = (ids) => [...new Set(ids)];
+const hasActionId = (entry, actionId) => Boolean(entry.actions && entry.actions.some((action) => action.id === actionId));
+const isLive = (item) => item !== undefined;
+const createEngineActions = (ctx) => {
+    const { latest, windows, undoOrder, mounted, batches, dispatch, announce } = ctx;
+    const nextBatch = () => {
+        batches.current += 1;
+        return `batch-${batches.current}`;
+    };
+    const toast = (props) => latest.current.toaster.showToast({ position: TOAST_POSITION, ...props });
+    const closeWindow = (win) => {
+        win.timers.forEach(clearTimeout);
+        if (win.toastId !== undefined)
+            latest.current.toaster.close(win.toastId);
+        windows.current.delete(win.batch);
+        undoOrder.current = undoOrder.current.filter((batch) => batch !== win.batch);
+    };
+    const sendWindow = (batch) => {
+        const win = windows.current.get(batch);
+        if (!win)
+            return;
+        closeWindow(win);
+        dispatch({ type: "fold", batch });
+        dispatch({ type: "send", batch });
+        win.send();
+    };
+    const undoWindow = (batch) => {
+        const win = windows.current.get(batch);
+        if (!win)
+            return false;
+        closeWindow(win);
+        dispatch({ type: "drop", batch });
+        const { labels } = latest.current;
+        announce(win.kind === "decision" ? labels.decisionUndone : labels.undone);
+        return true;
+    };
+    const openWindow = (win, foldAfter, props) => {
+        const timers = [];
+        if (foldAfter !== null)
+            timers.push(setTimeout(() => dispatch({ type: "fold", batch: win.batch }), foldAfter));
+        timers.push(setTimeout(() => sendWindow(win.batch), UNDO_WINDOW_MS));
+        const record = { ...win, timers };
+        windows.current.set(win.batch, record);
+        undoOrder.current = [...undoOrder.current, win.batch];
+        const { labels } = latest.current;
+        record.toastId = toast({
+            ...props,
+            duration: null,
+            actions: () => (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", label: labels.undo, onClick: () => undoWindow(win.batch) })),
+        });
+    };
+    const sendThen = (batch, call, failTitle) => {
+        Promise.resolve()
+            .then(call)
+            .then(() => {
+            if (mounted.current)
+                dispatch({ type: "settle", batch });
+        }, () => {
+            if (!mounted.current)
+                return;
+            dispatch({ type: "drop", batch });
+            toast({ status: "error", title: failTitle });
+        });
+    };
+    const retryButton = (ids) => {
+        const renderRetry = (onClose) => (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", leftIcon: _jsx(RefreshCw, { size: BUTTON_SIZES.xs.iconSize, "aria-hidden": "true" }), label: latest.current.labels.retry, onClick: () => {
+                onClose();
+                retryMany(ids);
+            } }));
+        return renderRetry;
+    };
+    const finishDecisions = (batch, decision, results) => {
+        var _a, _b;
+        if (!mounted.current)
+            return;
+        const { labels } = latest.current;
+        const outcomes = {};
+        results.forEach((result) => {
+            outcomes[result.id] = { batch, error: result.error };
+        });
+        dispatch({ type: "settleDecisions", outcomes });
+        const ofKind = (kind) => results.filter((result) => { var _a; return ((_a = result.error) === null || _a === void 0 ? void 0 : _a.kind) === kind; });
+        const soleMessage = (list) => { var _a; return (list.length === 1 ? (_a = list[0].error) === null || _a === void 0 ? void 0 : _a.message : undefined); };
+        const failed = ofKind("failed");
+        const conflicts = ofKind("conflict");
+        const forbidden = ofKind("forbidden");
+        const needsReason = ofKind("reasonRequired");
+        if (failed.length) {
+            toast({
+                status: "error",
+                title: labels.decisionFailed(decision.label, failed.length),
+                description: (_a = soleMessage(failed)) !== null && _a !== void 0 ? _a : labels.failedMessage,
+                actions: retryButton(failed.map((result) => result.id)),
+            });
+        }
+        if (conflicts.length) {
+            const title = labels.conflicted(conflicts.length);
+            toast({ status: "info", title, description: soleMessage(conflicts) });
+            announce(title);
+        }
+        if (forbidden.length) {
+            toast({ status: "error", title: labels.forbidden(forbidden.length), description: soleMessage(forbidden) });
+        }
+        if (needsReason.length) {
+            const title = labels.reasonNeeded(decision.label);
+            toast({ status: "warning", title, description: (_b = soleMessage(needsReason)) !== null && _b !== void 0 ? _b : labels.reasonRequiredMessage });
+            announce(title);
+        }
+    };
+    const sendDecisions = (batch, targets, decision) => {
+        const { onAction } = latest.current.source;
+        if (!onAction || !targets.length)
+            return;
+        const sends = targets.map((entry) => {
+            const action = entry.actions && entry.actions.find((candidate) => candidate.id === decision.actionId);
+            if (!action)
+                return Promise.resolve({ id: entry.id, error: { kind: "conflict" } });
+            return Promise.resolve()
+                .then(() => onAction(entry, action, decision.reason))
+                .then(() => ({ id: entry.id }), (error) => ({ id: entry.id, error: toNotificationActionError(error) }));
+        });
+        Promise.all(sends).then((results) => finishDecisions(batch, decision, results));
+    };
+    const retryMany = (ids) => {
+        const { source, live } = latest.current;
+        if (source.isOffline)
+            return;
+        const byDecision = new Map();
+        unique(ids)
+            .map((id) => live.byId.get(id))
+            .filter(isLive)
+            .forEach(({ entry, state }) => {
+            if (state.status !== "failed" || !state.decision)
+                return;
+            const group = byDecision.get(state.decision);
+            if (group)
+                group.push(entry);
+            else
+                byDecision.set(state.decision, [entry]);
+        });
+        byDecision.forEach((group, decision) => {
+            const batch = nextBatch();
+            dispatch({ type: "retry", batch, ids: group.map((entry) => entry.id) });
+            sendDecisions(batch, group, decision);
+        });
+    };
+    const setRead = (ids, read) => {
+        const { source, live, labels } = latest.current;
+        const { onMarkRead } = source;
+        if (!onMarkRead || source.isOffline)
+            return;
+        const targets = unique(ids).filter((id) => {
+            const item = live.byId.get(id);
+            return item !== undefined && item.entry.isRead !== undefined && item.entry.isRead !== read;
+        });
+        if (!targets.length)
+            return;
+        const batch = nextBatch();
+        dispatch({ type: "flag", key: "read", batch, ids: targets, value: read, phase: "sending" });
+        sendThen(batch, () => onMarkRead(targets, read), labels.readFailed(read));
+    };
+    const actions = {
+        open: (entry, event, action) => {
+            const { source, live } = latest.current;
+            const item = live.byId.get(entry.id);
+            if (item && item.entry.isRead === false)
+                setRead([entry.id], true);
+            source.onOpen(action && action.href ? { ...entry, href: action.href } : entry, event, action);
+        },
+        decide: (ids, action, reason) => {
+            var _a, _b;
+            const { source, live, labels } = latest.current;
+            if (!source.onAction || source.isOffline)
+                return;
+            const items = unique(ids)
+                .map((id) => live.byId.get(id))
+                .filter(isLive)
+                .filter((item) => item.state.status === "open" && hasActionId(item.entry, action.id));
+            if (!items.length)
+                return;
+            const trimmed = reason === undefined ? "" : reason.trim();
+            const decision = {
+                actionId: action.id,
+                label: action.label,
+                doneLabel: (_a = action.doneLabel) !== null && _a !== void 0 ? _a : action.label,
+                intent: (_b = action.intent) !== null && _b !== void 0 ? _b : "neutral",
+                reason: trimmed ? trimmed : undefined,
+            };
+            const targetIds = items.map((item) => item.entry.id);
+            const batch = nextBatch();
+            dispatch({ type: "decide", batch, ids: targetIds, decision });
+            const subject = items.length > 1 ? labels.requests(items.length) : items[0].entry.subject;
+            announce(labels.decidedAnnouncement(decision.doneLabel, subject));
+            const decided = items.map((item) => item.entry);
+            openWindow({ batch, kind: "decision", ids: targetIds, send: () => sendDecisions(batch, decided, decision) }, DECISION_FOLD_MS, {
+                status: decision.intent === "negative" ? "info" : "success",
+                title: labels.decided(decision.doneLabel, subject),
+                description: decision.reason ? labels.reasonQuote(decision.reason) : undefined,
+            });
+        },
+        undo: (id) => {
+            const hit = [...windows.current.values()].find((win) => win.ids.includes(id));
+            if (hit)
+                undoWindow(hit.batch);
+        },
+        undoLast: () => {
+            const batch = undoOrder.current[undoOrder.current.length - 1];
+            return batch === undefined ? false : undoWindow(batch);
+        },
+        retry: (id) => retryMany([id]),
+        dismiss: (id) => dispatch({ type: "dismiss", id }),
+        clearReasonRequest: (id) => dispatch({ type: "clearReasonRequest", id }),
+        setRead,
+        markAllRead: (scope) => {
+            const { source, live, labels, counts } = latest.current;
+            const { onMarkAllRead } = source;
+            if (!onMarkAllRead || source.isOffline)
+                return;
+            const query = scope.query ? scope.query.trim() : "";
+            const ids = live.lists[scope.zone]
+                .filter((item) => item.entry.isRead === false &&
+                !item.state.isHidden &&
+                (!scope.category || item.entry.category === scope.category) &&
+                (!query || matchesNotificationQuery(item.entry, query)))
+                .map((item) => item.entry.id);
+            const wholeActivity = scope.zone === "activity" && !scope.category && !query;
+            const count = wholeActivity ? Math.max(ids.length, counts.unread) : ids.length;
+            if (!count)
+                return;
+            const batch = nextBatch();
+            dispatch({ type: "markAll", batch, scope, ids });
+            const title = labels.markedRead(count);
+            announce(title);
+            openWindow({ batch, kind: "markAll", ids, send: () => sendThen(batch, () => onMarkAllRead(scope), labels.markAllFailed) }, null, { status: "success", title });
+        },
+        archive: (ids) => {
+            const { source, live, labels } = latest.current;
+            const { onArchive } = source;
+            if (!onArchive || source.isOffline)
+                return;
+            const items = unique(ids)
+                .map((id) => live.byId.get(id))
+                .filter(isLive)
+                .filter((item) => item.state.zone === "activity" && !item.state.isHidden);
+            if (!items.length)
+                return;
+            const targetIds = items.map((item) => item.entry.id);
+            const batch = nextBatch();
+            dispatch({ type: "flag", key: "archived", batch, ids: targetIds, value: true, phase: "undo" });
+            const title = labels.archived(targetIds.length);
+            announce(title);
+            openWindow({ batch, kind: "archive", ids: targetIds, send: () => sendThen(batch, () => onArchive(targetIds), labels.archiveFailed) }, ARCHIVE_FOLD_MS, { status: "success", title, description: targetIds.length === 1 ? plainTitle(items[0].entry.title) : undefined });
+        },
+        restore: (ids) => {
+            const { source, live, labels } = latest.current;
+            const { onRestore } = source;
+            if (!onRestore || source.isOffline)
+                return;
+            const targets = unique(ids).filter((id) => {
+                const item = live.byId.get(id);
+                return item !== undefined && item.state.zone === "archived";
+            });
+            if (!targets.length)
+                return;
+            const batch = nextBatch();
+            dispatch({ type: "flag", key: "archived", batch, ids: targets, value: false, phase: "sending" });
+            toast({ status: "success", title: labels.restored });
+            announce(labels.restored);
+            sendThen(batch, () => onRestore(targets), labels.restoreFailed);
+        },
+        extraActionsFor: (entry) => {
+            const { extraActions } = latest.current.source;
+            return extraActions ? extraActions(entry) : [];
+        },
+        runExtraAction: (entry, extra) => {
+            const { labels } = latest.current;
+            Promise.resolve()
+                .then(() => extra.onSelect(entry))
+                .then(() => {
+                if (mounted.current && extra.doneLabel)
+                    toast({ status: "success", title: extra.doneLabel });
+            }, () => {
+                if (mounted.current)
+                    toast({ status: "error", title: labels.extraFailed(extra.label) });
+            });
+        },
+        loadMore: () => {
+            const { onLoadMore } = latest.current.source;
+            if (onLoadMore)
+                onLoadMore();
+        },
+        retryLoad: () => {
+            const { onRetry } = latest.current.source;
+            if (onRetry)
+                onRetry();
+        },
+        announce,
+        flush: () => {
+            [...windows.current.keys()].forEach(sendWindow);
+        },
+    };
+    return actions;
+};
+export const useNotificationEngine = (source) => {
+    const { entries, counts, categories, locale = DEFAULT_NOTIFICATION_LOCALE, labels: labelOverrides, status = "ready", isOffline = false, hasMore = false, isLoadingMore = false, loadedAt, appName, } = source;
+    const toaster = useToaster();
+    const [overlay, dispatch] = useReducer(overlayReducer, EMPTY_OVERLAY);
+    const [announcement, setAnnouncement] = useState("");
+    const [now, setNow] = useState(() => Date.now());
+    const cache = useRef(new WeakMap());
+    const labels = useMemo(() => resolveNotificationLabels(locale, labelOverrides), [locale, labelOverrides]);
+    const format = useMemo(() => createNotificationFormatter(locale, labels), [locale, labels]);
+    const live = useMemo(() => buildLiveLists(entries, overlay, categories, cache.current), [entries, overlay, categories]);
+    const { needsYou: serverNeedsYou, unread: serverUnread } = counts;
+    const liveCounts = useMemo(() => optimisticCounts(live, overlay, categories, { needsYou: serverNeedsYou, unread: serverUnread }), [live, overlay, categories, serverNeedsYou, serverUnread]);
+    const latest = useRef({ source, labels, live, counts: liveCounts, toaster });
+    useLayoutEffect(() => {
+        latest.current = { source, labels, live, counts: liveCounts, toaster };
+    });
+    const windows = useRef(new Map());
+    const undoOrder = useRef([]);
+    const mounted = useRef(true);
+    const batches = useRef(0);
+    const flip = useRef(false);
+    const announce = useCallback((message) => {
+        flip.current = !flip.current;
+        setAnnouncement(flip.current ? `${message}${ZERO_WIDTH_SPACE}` : message);
+    }, []);
+    const actions = useMemo(() => createEngineActions({ latest, windows, undoOrder, mounted, batches, dispatch, announce }), [announce]);
+    const find = useCallback((id) => live.byId.get(id), [live]);
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+            actions.flush();
+        };
+    }, [actions]);
+    useEffect(() => {
+        const onPageHide = () => actions.flush();
+        const onVisibility = () => {
+            if (document.visibilityState === "hidden")
+                actions.flush();
+        };
+        window.addEventListener("pagehide", onPageHide);
+        document.addEventListener("visibilitychange", onVisibility);
+        return () => {
+            window.removeEventListener("pagehide", onPageHide);
+            document.removeEventListener("visibilitychange", onVisibility);
+        };
+    }, [actions]);
+    useEffect(() => {
+        const id = setInterval(() => setNow(Date.now()), CLOCK_TICK_MS);
+        return () => clearInterval(id);
+    }, []);
+    const countsKey = `${serverNeedsYou}|${serverUnread}`;
+    const lastCounts = useRef(countsKey);
+    useEffect(() => {
+        if (lastCounts.current === countsKey)
+            return;
+        lastCounts.current = countsKey;
+        dispatch({ type: "countsChanged" });
+    }, [countsKey]);
+    useEffect(() => {
+        dispatch({ type: "reconcile", entries });
+    }, [entries]);
+    const seen = useRef(null);
+    useEffect(() => {
+        if (status !== "ready")
+            return;
+        const newest = entries.reduce((max, entry) => Math.max(max, entry.createdAt), 0);
+        const known = seen.current;
+        seen.current = { ids: new Set(entries.map((entry) => entry.id)), newest: Math.max(newest, known ? known.newest : 0) };
+        if (!known)
+            return;
+        const fresh = entries.filter((entry) => !known.ids.has(entry.id) && entry.createdAt > known.newest && !entry.archived);
+        if (fresh.length === 1)
+            announce(labels.arrivedOne(plainTitle(fresh[0].title)));
+        else if (fresh.length > 1)
+            announce(labels.arrivedMany(fresh.length));
+    }, [entries, status, labels, announce]);
+    const decide = Boolean(source.onAction);
+    const markRead = Boolean(source.onMarkRead);
+    const markAllRead = Boolean(source.onMarkAllRead);
+    const archive = Boolean(source.onArchive);
+    const restore = Boolean(source.onRestore);
+    const loadMore = Boolean(source.onLoadMore);
+    const features = useMemo(() => ({ decide, markRead, markAllRead, archive, restore, loadMore }), [decide, markRead, markAllRead, archive, restore, loadMore]);
+    const shared = useMemo(() => ({ labels, format, now, categories, features, isOffline, appName, actions }), [labels, format, now, categories, features, isOffline, appName, actions]);
+    const value = useMemo(() => ({ ...shared, lists: live.lists, counts: liveCounts, status, loadedAt, hasMore, isLoadingMore, find }), [shared, live, liveCounts, status, loadedAt, hasMore, isLoadingMore, find]);
+    return { value, shared, announcement };
+};

package/dist/esm/Components/NotificationCenter/inbox/InboxList.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { chakra } from "@chakra-ui/react";
+import { Box } from "../../Primitives/Primitives.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import NotificationRow from "../row/NotificationRow.js";
+export const InboxList = ({ groups, isPhone, selectedId, checked, openThreads, idPrefix, onOpenRow, onCheckedChange, onThreadToggle, linkRefFor, }) => {
+    const { colors } = useCustomTheme();
+    const variant = isPhone ? "phone" : "inbox";
+    const rowFor = (item, extra) => (_jsx(NotificationRow, { item: item, variant: variant, isSelected: !isPhone && selectedId === item.entry.id, isChecked: checked.has(item.entry.id), onCheckedChange: onCheckedChange, thread: extra.thread, isThreadOpen: extra.isOpen, onThreadToggle: extra.thread ? onThreadToggle : undefined, isThreadChild: extra.isChild, onOpen: onOpenRow, linkRef: linkRefFor(item.entry.id) }, item.entry.id));
+    return (_jsx(Box, { pb: 2, children: groups.map((group) => {
+            const headingId = `${idPrefix}-group-${group.key}`;
+            return (_jsxs(chakra.section, { "aria-labelledby": group.label === null ? undefined : headingId, children: [group.label !== null && (_jsxs(chakra.h2, { id: headingId, position: "sticky", top: 0, zIndex: "docked", display: "flex", alignItems: "center", gap: 1.5, m: 0, px: 4, pt: 3, pb: 1.5, bg: colors.surfaceRaised, color: colors.textMuted, fontSize: "xs-minus", fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", children: [_jsx("span", { children: group.label }), group.count > 0 && _jsx(chakra.span, { sx: { fontVariantNumeric: "tabular-nums" }, children: group.count })] })), _jsx(chakra.ul, { listStyleType: "none", display: "grid", gap: "0.125rem", m: 0, px: 1.5, py: 0, children: group.threads.flatMap((thread) => {
+                            const isOpen = openThreads.has(thread.key);
+                            const lead = rowFor(thread.lead, { thread: thread.rest.length > 0 ? thread : undefined, isOpen });
+                            return isOpen ? [lead, ...thread.rest.map((item) => rowFor(item, { isChild: true }))] : [lead];
+                        }) })] }, group.key));
+        }) }));
+};

package/dist/esm/Components/NotificationCenter/inbox/InboxStates.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Archive, Bell, CircleAlert, CircleCheck, Lock } from "lucide-react";
+import { Box, Flex } from "../../Primitives/Primitives.js";
+import Button from "../../Button/Button.js";
+import EmptyState from "../../EmptyState/EmptyState.js";
+import Skeletons from "../../Skeletons/Skeletons.js";
+const SKELETON_ROWS = 6;
+export const InboxSkeleton = ({ isPhone, label }) => (_jsx(Flex, { direction: "column", gap: 1, px: 2, py: 2, role: "status", "aria-busy": "true", "aria-label": label, children: Array.from({ length: SKELETON_ROWS }, (_, index) => (_jsxs(Flex, { gap: 3, px: 3, py: 2.5, "aria-hidden": "true", children: [_jsx(Skeletons, { type: "circle", size: isPhone ? "10" : "8" }), _jsx(Box, { flex: 1, children: _jsx(Skeletons, { type: "text", noOfLines: index % 2 === 0 ? 3 : 2, spacing: 2, skeletonHeight: 2 }) })] }, index))) }));
+export const InboxLoadFailure = ({ kind, labels, appName, onRetry }) => kind === "error" ? (_jsx(EmptyState, { icon: CircleAlert, colorScheme: "error", title: labels.loadErrorTitle, description: labels.loadErrorBody, action: onRetry && _jsx(Button, { size: "sm", variant: "outline", colorScheme: "gray", label: labels.retry, onClick: onRetry }) })) : (_jsx(EmptyState, { icon: Lock, colorScheme: "gray", title: labels.noAccessTitle, description: labels.noAccessBody(appName) }));
+export const InboxEmpty = ({ tab, labels }) => {
+    if (tab === "needsYou") {
+        return _jsx(EmptyState, { icon: CircleCheck, colorScheme: "success", title: labels.caughtUpTitle, description: labels.caughtUpBody });
+    }
+    if (tab === "archived") {
+        return _jsx(EmptyState, { icon: Archive, colorScheme: "gray", title: labels.archivedEmptyTitle, description: labels.archivedEmptyBody });
+    }
+    return _jsx(EmptyState, { icon: Bell, colorScheme: "gray", title: labels.activityEmptyTitle, description: labels.activityEmptyBody });
+};