@chromvoid/headless-ui 0.1.0

package/dist/feed/index.js

@@ -0,0 +1,260 @@
+import { action, atom, computed } from '@reatom/core';
+const dedupe = (articles) => {
+    const seen = new Set();
+    const result = [];
+    for (const a of articles) {
+        if (seen.has(a.id))
+            continue;
+        seen.add(a.id);
+        result.push(a);
+    }
+    return result;
+};
+export function createFeed(options) {
+    const idBase = options.idBase ?? 'feed';
+    const articlesAtom = atom(dedupe(options.articles), `${idBase}.articles`);
+    const articleIdsAtom = computed(() => articlesAtom().map((a) => a.id), `${idBase}.articleIds`);
+    const articleByIdAtom = computed(() => new Map(articlesAtom().map((a, i) => [a.id, { article: a, index: i }])), `${idBase}.articleById`);
+    const enabledIdsAtom = computed(() => articlesAtom()
+        .filter((a) => !a.disabled)
+        .map((a) => a.id), `${idBase}.enabledIds`);
+    const isLoadingAtom = atom(false, `${idBase}.isLoading`);
+    const isBusyAtom = atom(false, `${idBase}.isBusy`);
+    const totalCountAtom = atom(options.totalCount ?? -1, `${idBase}.totalCount`);
+    const errorAtom = atom(null, `${idBase}.error`);
+    const isEmptyAtom = computed(() => articleIdsAtom().length === 0, `${idBase}.isEmpty`);
+    const hasErrorAtom = computed(() => errorAtom() !== null, `${idBase}.hasError`);
+    const canLoadMoreAtom = computed(() => options.onLoadMore != null && !isLoadingAtom(), `${idBase}.canLoadMore`);
+    const canLoadNewerAtom = computed(() => options.onLoadNewer != null && !isLoadingAtom(), `${idBase}.canLoadNewer`);
+    const resolveInitialActive = () => {
+        const initial = options.initialActiveArticleId;
+        if (initial != null) {
+            const info = articleByIdAtom().get(initial);
+            if (info && !info.article.disabled)
+                return initial;
+        }
+        return enabledIdsAtom()[0] ?? null;
+    };
+    const activeArticleIdAtom = atom(resolveInitialActive(), `${idBase}.activeArticleId`);
+    const ensureActiveInvariant = () => {
+        const active = activeArticleIdAtom();
+        const enabled = enabledIdsAtom();
+        if (enabled.length === 0) {
+            activeArticleIdAtom.set(null);
+            return;
+        }
+        if (active != null && enabled.includes(active))
+            return;
+        activeArticleIdAtom.set(enabled[0] ?? null);
+    };
+    const moveBy = (direction) => {
+        const enabled = enabledIdsAtom();
+        if (enabled.length === 0) {
+            activeArticleIdAtom.set(null);
+            return;
+        }
+        const active = activeArticleIdAtom();
+        if (active == null) {
+            activeArticleIdAtom.set(enabled[0] ?? null);
+            return;
+        }
+        const idx = enabled.indexOf(active);
+        if (idx < 0) {
+            activeArticleIdAtom.set(enabled[0] ?? null);
+            return;
+        }
+        const next = Math.min(Math.max(idx + direction, 0), enabled.length - 1);
+        activeArticleIdAtom.set(enabled[next] ?? null);
+    };
+    const focusNextArticle = action(() => {
+        moveBy(1);
+    }, `${idBase}.focusNextArticle`);
+    const focusPrevArticle = action(() => {
+        moveBy(-1);
+    }, `${idBase}.focusPrevArticle`);
+    const setArticles = action((articles) => {
+        articlesAtom.set(dedupe(articles));
+        ensureActiveInvariant();
+    }, `${idBase}.setArticles`);
+    const appendArticles = action((articles) => {
+        articlesAtom.set(dedupe([...articlesAtom(), ...articles]));
+    }, `${idBase}.appendArticles`);
+    const prependArticles = action((articles) => {
+        articlesAtom.set(dedupe([...articles, ...articlesAtom()]));
+    }, `${idBase}.prependArticles`);
+    const removeArticle = action((articleId) => {
+        const current = articlesAtom();
+        const idx = current.findIndex((a) => a.id === articleId);
+        if (idx < 0)
+            return;
+        const wasActive = activeArticleIdAtom() === articleId;
+        const next = current.filter((a) => a.id !== articleId);
+        articlesAtom.set(next);
+        if (wasActive) {
+            const enabled = enabledIdsAtom();
+            if (enabled.length === 0) {
+                activeArticleIdAtom.set(null);
+                return;
+            }
+            const allIds = articleIdsAtom();
+            let found = null;
+            for (let i = idx; i < allIds.length; i++) {
+                if (enabled.includes(allIds[i])) {
+                    found = allIds[i];
+                    break;
+                }
+            }
+            if (found == null) {
+                for (let i = Math.min(idx - 1, allIds.length - 1); i >= 0; i--) {
+                    if (enabled.includes(allIds[i])) {
+                        found = allIds[i];
+                        break;
+                    }
+                }
+            }
+            activeArticleIdAtom.set(found ?? enabled[0] ?? null);
+        }
+    }, `${idBase}.removeArticle`);
+    const setBusy = action((value) => {
+        isBusyAtom.set(value);
+    }, `${idBase}.setBusy`);
+    const setError = action((message) => {
+        errorAtom.set(message);
+    }, `${idBase}.setError`);
+    const clearError = action(() => {
+        errorAtom.set(null);
+    }, `${idBase}.clearError`);
+    const setTotalCount = action((count) => {
+        totalCountAtom.set(count);
+    }, `${idBase}.setTotalCount`);
+    const loadMore = action(async () => {
+        if (!options.onLoadMore)
+            return;
+        if (isLoadingAtom())
+            return;
+        isLoadingAtom.set(true);
+        isBusyAtom.set(true);
+        try {
+            const loaded = await options.onLoadMore();
+            articlesAtom.set(dedupe([...articlesAtom(), ...loaded]));
+            ensureActiveInvariant();
+        }
+        catch (e) {
+            errorAtom.set(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            isLoadingAtom.set(false);
+            isBusyAtom.set(false);
+        }
+    }, `${idBase}.loadMore`);
+    const loadNewer = action(async () => {
+        if (!options.onLoadNewer)
+            return;
+        if (isLoadingAtom())
+            return;
+        isLoadingAtom.set(true);
+        isBusyAtom.set(true);
+        try {
+            const loaded = await options.onLoadNewer();
+            articlesAtom.set(dedupe([...loaded, ...articlesAtom()]));
+            ensureActiveInvariant();
+        }
+        catch (e) {
+            errorAtom.set(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            isLoadingAtom.set(false);
+            isBusyAtom.set(false);
+        }
+    }, `${idBase}.loadNewer`);
+    const handleKeyDown = action((event) => {
+        const ctrlOrMeta = event.ctrlKey === true || event.metaKey === true;
+        if (event.key === 'PageDown') {
+            focusNextArticle();
+            return 'next';
+        }
+        if (event.key === 'PageUp') {
+            focusPrevArticle();
+            return 'prev';
+        }
+        if (event.key === 'End' && ctrlOrMeta) {
+            return 'exit-after';
+        }
+        if (event.key === 'Home' && ctrlOrMeta) {
+            return 'exit-before';
+        }
+        return null;
+    }, `${idBase}.handleKeyDown`);
+    const setActiveArticle = action((articleId) => {
+        const info = articleByIdAtom().get(articleId);
+        if (!info || info.article.disabled)
+            return;
+        activeArticleIdAtom.set(articleId);
+    }, `${idBase}.setActiveArticle`);
+    const contracts = {
+        getFeedProps() {
+            const props = {
+                id: `${idBase}-root`,
+                role: 'feed',
+                'aria-busy': isBusyAtom() ? 'true' : 'false',
+            };
+            if (options.ariaLabel != null)
+                props['aria-label'] = options.ariaLabel;
+            if (options.ariaLabelledBy != null)
+                props['aria-labelledby'] = options.ariaLabelledBy;
+            return props;
+        },
+        getArticleProps(articleId) {
+            const info = articleByIdAtom().get(articleId);
+            if (!info) {
+                throw new Error(`Unknown feed article id: ${articleId}`);
+            }
+            const total = totalCountAtom();
+            const setSize = total >= 0 ? total : -1;
+            const posInSet = info.index + 1;
+            const isActive = activeArticleIdAtom() === articleId;
+            return {
+                id: `${idBase}-article-${articleId}`,
+                role: 'article',
+                tabindex: (isActive && !info.article.disabled ? '0' : '-1'),
+                'aria-posinset': posInSet,
+                'aria-setsize': setSize,
+                'aria-disabled': info.article.disabled ? 'true' : undefined,
+                'data-active': (isActive ? 'true' : 'false'),
+                onFocus: () => setActiveArticle(articleId),
+            };
+        },
+    };
+    const state = {
+        articleIds: articleIdsAtom,
+        activeArticleId: activeArticleIdAtom,
+        isLoading: isLoadingAtom,
+        isBusy: isBusyAtom,
+        totalCount: totalCountAtom,
+        isEmpty: isEmptyAtom,
+        hasError: hasErrorAtom,
+        error: errorAtom,
+        canLoadMore: canLoadMoreAtom,
+        canLoadNewer: canLoadNewerAtom,
+    };
+    const actions = {
+        focusNextArticle,
+        focusPrevArticle,
+        loadMore,
+        loadNewer,
+        setArticles,
+        appendArticles,
+        prependArticles,
+        removeArticle,
+        setBusy,
+        setError,
+        clearError,
+        setTotalCount,
+        handleKeyDown,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/grid/index.d.ts

@@ -0,0 +1,103 @@
+import { type Atom, type Computed } from '@reatom/core';
+export type GridFocusStrategy = 'roving-tabindex' | 'aria-activedescendant';
+export type GridSelectionMode = 'single' | 'multiple';
+export interface GridRow {
+    id: string;
+    index?: number;
+    disabled?: boolean;
+}
+export interface GridColumn {
+    id: string;
+    index?: number;
+    disabled?: boolean;
+}
+export interface GridCellId {
+    rowId: string;
+    colId: string;
+}
+export interface GridKeyboardEventLike {
+    key: string;
+    shiftKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    altKey?: boolean;
+}
+export interface CreateGridOptions {
+    rows: readonly GridRow[];
+    columns: readonly GridColumn[];
+    disabledCells?: readonly GridCellId[];
+    idBase?: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    focusStrategy?: GridFocusStrategy;
+    selectionMode?: GridSelectionMode;
+    selectionFollowsFocus?: boolean;
+    totalRowCount?: number;
+    totalColumnCount?: number;
+    pageSize?: number;
+    initialActiveCellId?: GridCellId | null;
+    initialSelectedCellIds?: readonly GridCellId[];
+    isReadOnly?: boolean;
+}
+export interface GridState {
+    activeCellId: Atom<GridCellId | null>;
+    selectedCellIds: Atom<Set<string>>;
+    rowCount: Computed<number>;
+    columnCount: Computed<number>;
+}
+export interface GridActions {
+    setActiveCell(cell: GridCellId): void;
+    moveUp(): void;
+    moveDown(): void;
+    moveLeft(): void;
+    moveRight(): void;
+    moveRowStart(): void;
+    moveRowEnd(): void;
+    moveGridStart(): void;
+    moveGridEnd(): void;
+    pageUp(): void;
+    pageDown(): void;
+    selectCell(cell: GridCellId): void;
+    toggleCellSelection(cell: GridCellId): void;
+    selectRow(rowId: string): void;
+    selectColumn(colId: string): void;
+    handleKeyDown(event: GridKeyboardEventLike): void;
+}
+export interface GridProps {
+    id: string;
+    role: 'grid';
+    tabindex: '0' | '-1';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-multiselectable': 'true' | 'false';
+    'aria-colcount': number;
+    'aria-rowcount': number;
+    'aria-activedescendant'?: string;
+}
+export interface GridRowProps {
+    id: string;
+    role: 'row';
+    'aria-rowindex': number;
+}
+export interface GridCellProps {
+    id: string;
+    role: 'gridcell';
+    tabindex: '0' | '-1';
+    'aria-colindex': number;
+    'aria-selected': 'true' | 'false';
+    'aria-readonly'?: 'true';
+    'aria-disabled'?: 'true';
+    'data-active': 'true' | 'false';
+    onFocus: () => void;
+}
+export interface GridContracts {
+    getGridProps(): GridProps;
+    getRowProps(rowId: string): GridRowProps;
+    getCellProps(rowId: string, colId: string): GridCellProps;
+}
+export interface GridModel {
+    readonly state: GridState;
+    readonly actions: GridActions;
+    readonly contracts: GridContracts;
+}
+export declare function createGrid(options: CreateGridOptions): GridModel;