@ui-construction-library/integration-tanstack-query 0.1.5 → 0.2.0

package/dist/QueryBoundary.d.ts

@@ -0,0 +1,27 @@
+import { type QueryKey } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+export type QueryBoundaryProps = {
+    /** Content rendered while the query is loading (shown inside `<Suspense>`). */
+    loadingFallback?: ReactNode;
+    /** Content or render function shown when the query throws an error. */
+    errorFallback?: ReactNode | ((error: Error, retry: () => void) => ReactNode);
+    /** Optional query key — when provided, `retry` invalidates the query before re-rendering. */
+    queryKey?: QueryKey;
+    children: ReactNode;
+};
+/**
+ * Wraps query-consuming children with `Suspense` + an error boundary.
+ *
+ * @example
+ * ```tsx
+ * <QueryBoundary
+ *   loadingFallback={<Skeleton />}
+ *   errorFallback={(err, retry) => <div>Failed: {err.message} <button onClick={retry}>Retry</button></div>}
+ *   queryKey={['users']}
+ * >
+ *   <UsersList />
+ * </QueryBoundary>
+ * ```
+ */
+export declare function QueryBoundary({ loadingFallback, errorFallback, queryKey, children, }: QueryBoundaryProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=QueryBoundary.d.ts.map

package/dist/QueryBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryBoundary.d.ts","sourceRoot":"","sources":["../src/QueryBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAkB,MAAM,uBAAuB,CAAC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAuDvC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,+EAA+E;IAC/E,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,uEAAuE;IACvE,aAAa,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC,CAAC;IAC7E,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,EAC5B,eAA2D,EAC3D,aAAa,EACb,QAAQ,EACR,QAAQ,GACT,EAAE,kBAAkB,2CA4BpB"}

package/dist/QueryList.d.ts

@@ -0,0 +1,42 @@
+import { type QueryKey } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+export type QueryListPage<T> = {
+    items: T[];
+    nextCursor?: string | number | null;
+};
+export type QueryListProps<T> = {
+    /** TanStack Query cache key. */
+    queryKey: QueryKey;
+    /** Paginated fetch — receives `{ pageParam }` and returns one page. */
+    queryFn: (ctx: {
+        pageParam?: string | number;
+    }) => Promise<QueryListPage<T>>;
+    /** Render function for a single item. */
+    renderItem: (item: T, index: number) => ReactNode;
+    /** Custom loading placeholder. */
+    loadingFallback?: ReactNode;
+    /** Custom error state. */
+    errorFallback?: ReactNode | ((error: Error) => ReactNode);
+    /** Custom empty state. */
+    emptyFallback?: ReactNode;
+    /** Label for the "Load more" button. */
+    loadMoreLabel?: string;
+    /** Number of skeleton items shown while loading (default 3). */
+    skeletonRows?: number;
+};
+/**
+ * Infinite-scroll / load-more list backed by TanStack Query's `useInfiniteQuery`.
+ *
+ * @example
+ * ```tsx
+ * <QueryList<User>
+ *   queryKey={['users-list']}
+ *   queryFn={({ pageParam }) =>
+ *     fetch(`/api/users?cursor=${pageParam ?? ''}`).then(r => r.json())
+ *   }
+ *   renderItem={(user) => <div>{user.name}</div>}
+ * />
+ * ```
+ */
+export declare function QueryList<T>({ queryKey, queryFn, renderItem, loadingFallback, errorFallback, emptyFallback, loadMoreLabel, skeletonRows, }: QueryListProps<T>): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=QueryList.d.ts.map

package/dist/QueryList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryList.d.ts","sourceRoot":"","sources":["../src/QueryList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAoB,MAAM,uBAAuB,CAAC;AAExE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI;IAC7B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI;IAC9B,gCAAgC;IAChC,QAAQ,EAAE,QAAQ,CAAC;IACnB,uEAAuE;IACvE,OAAO,EAAE,CAAC,GAAG,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7E,yCAAyC;IACzC,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,kCAAkC;IAClC,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,0BAA0B;IAC1B,aAAa,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC;IAC1D,0BAA0B;IAC1B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAC3B,QAAQ,EACR,OAAO,EACP,UAAU,EACV,eAAe,EACf,aAAa,EACb,aAAa,EACb,aAA2B,EAC3B,YAAgB,GACjB,EAAE,cAAc,CAAC,CAAC,CAAC,6FA+EnB"}

package/dist/QueryTable.d.ts

@@ -0,0 +1,46 @@
+import { type QueryKey } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+type Column<T> = {
+    key: string;
+    header: string;
+    width?: number | string;
+    sortable?: boolean;
+    filterable?: boolean;
+    render?: (item: T) => ReactNode;
+};
+export type QueryTableProps<T> = {
+    /** TanStack Query cache key. */
+    queryKey: QueryKey;
+    /** Function that fetches the row data. */
+    queryFn: () => Promise<T[]>;
+    /** Column definitions passed to `DataTable`. */
+    columns: Column<T>[];
+    /** Page size passed to `DataTable`. */
+    pageSize?: number;
+    /** Custom loading placeholder. */
+    loadingFallback?: ReactNode;
+    /** Custom error state. */
+    errorFallback?: ReactNode | ((error: Error) => ReactNode);
+    /** Custom empty state shown when `data.length === 0`. */
+    emptyFallback?: ReactNode;
+    /** Number of skeleton rows to show while loading (default 5). */
+    skeletonRows?: number;
+};
+/**
+ * Data table pre-wired with TanStack Query loading, error and empty states.
+ *
+ * @example
+ * ```tsx
+ * <QueryTable<User>
+ *   queryKey={['users']}
+ *   queryFn={() => fetch('/api/users').then(r => r.json())}
+ *   columns={[
+ *     { key: 'name', header: 'Name', sortable: true },
+ *     { key: 'email', header: 'Email' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function QueryTable<T>({ queryKey, queryFn, columns, pageSize, loadingFallback, errorFallback, emptyFallback, skeletonRows, }: QueryTableProps<T>): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=QueryTable.d.ts.map

package/dist/QueryTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryTable.d.ts","sourceRoot":"","sources":["../src/QueryTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAY,MAAM,uBAAuB,CAAC;AAEhE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,MAAM,CAAC,CAAC,IAAI;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI;IAC/B,gCAAgC;IAChC,QAAQ,EAAE,QAAQ,CAAC;IACnB,0CAA0C;IAC1C,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;IAC5B,gDAAgD;IAChD,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,0BAA0B;IAC1B,aAAa,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC;IAC1D,yDAAyD;IACzD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,EAC5B,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,EACR,eAAe,EACf,aAAa,EACb,aAAa,EACb,YAAgB,GACjB,EAAE,eAAe,CAAC,CAAC,CAAC,6FAgDpB"}

package/dist/index.d.ts

@@ -1,5 +1,11 @@
 import { type QueryKey } from '@tanstack/react-query';
 import type { ReactNode } from 'react';
+export type { QueryBoundaryProps } from './QueryBoundary';
+export { QueryBoundary } from './QueryBoundary';
+export type { QueryListPage, QueryListProps } from './QueryList';
+export { QueryList } from './QueryList';
+export type { QueryTableProps } from './QueryTable';
+export { QueryTable } from './QueryTable';
 type Column<T> = {
     key: string;
     header: string;
@@ -14,6 +20,6 @@ interface AsyncDataTableProps<T> {
     columns: Column<T>[];
     pageSize?: number;
 }
+/** @deprecated Use `QueryTable` instead, which adds skeleton, error and empty states. */
 export declare function AsyncDataTable<T>({ queryKey, queryFn, columns, pageSize, }: AsyncDataTableProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAY,MAAM,uBAAuB,CAAC;AAEhE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,MAAM,CAAC,CAAC,IAAI;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;CACjC,CAAC;AAEF,UAAU,mBAAmB,CAAC,CAAC;IAC7B,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;IAC5B,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,EAChC,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,GACT,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CAOxB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAY,MAAM,uBAAuB,CAAC;AAEhE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,KAAK,MAAM,CAAC,CAAC,IAAI;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;CACjC,CAAC;AAEF,UAAU,mBAAmB,CAAC,CAAC;IAC7B,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;IAC5B,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,yFAAyF;AACzF,wBAAgB,cAAc,CAAC,CAAC,EAAE,EAChC,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,GACT,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CAOxB"}

package/dist/index.esm.js

@@ -1,7 +1,130 @@
-import { jsx } from 'react/jsx-runtime';
-import { useQuery } from '@tanstack/react-query';
-import { DataTable } from '@ui-construction-library/core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useQueryClient, useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { Skeleton, EmptyState, DataTable } from '@ui-construction-library/core';
+import { Suspense, Component } from 'react';
 
+class QueryErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error, info) {
+        console.error('[QueryBoundary]', error, info.componentStack);
+    }
+    handleReset = () => {
+        this.props.onReset?.();
+        this.setState({ error: null });
+    };
+    render() {
+        const { error } = this.state;
+        if (error) {
+            const { fallback } = this.props;
+            return typeof fallback === 'function'
+                ? fallback(error, this.handleReset)
+                : fallback;
+        }
+        return this.props.children;
+    }
+}
+/**
+ * Wraps query-consuming children with `Suspense` + an error boundary.
+ *
+ * @example
+ * ```tsx
+ * <QueryBoundary
+ *   loadingFallback={<Skeleton />}
+ *   errorFallback={(err, retry) => <div>Failed: {err.message} <button onClick={retry}>Retry</button></div>}
+ *   queryKey={['users']}
+ * >
+ *   <UsersList />
+ * </QueryBoundary>
+ * ```
+ */
+function QueryBoundary({ loadingFallback = jsx("div", { "data-query-loading": "", children: "Loading\u2026" }), errorFallback, queryKey, children, }) {
+    const queryClient = useQueryClient();
+    const resolvedErrorFallback = errorFallback ??
+        ((err, retry) => (jsxs("div", { "data-query-error": "", role: "alert", children: [jsxs("p", { children: ["Something went wrong: ", err.message] }), jsx("button", { type: "button", onClick: retry, children: "Retry" })] })));
+    return (jsx(QueryErrorBoundary, { fallback: resolvedErrorFallback, onReset: () => {
+            if (queryKey) {
+                void queryClient.invalidateQueries({ queryKey });
+            }
+        }, children: jsx(Suspense, { fallback: loadingFallback, children: children }) }));
+}
+
+/**
+ * Infinite-scroll / load-more list backed by TanStack Query's `useInfiniteQuery`.
+ *
+ * @example
+ * ```tsx
+ * <QueryList<User>
+ *   queryKey={['users-list']}
+ *   queryFn={({ pageParam }) =>
+ *     fetch(`/api/users?cursor=${pageParam ?? ''}`).then(r => r.json())
+ *   }
+ *   renderItem={(user) => <div>{user.name}</div>}
+ * />
+ * ```
+ */
+function QueryList({ queryKey, queryFn, renderItem, loadingFallback, errorFallback, emptyFallback, loadMoreLabel = 'Load more', skeletonRows = 3, }) {
+    const { data, isLoading, isError, error, hasNextPage, isFetchingNextPage, fetchNextPage, } = useInfiniteQuery({
+        queryKey,
+        queryFn: ({ pageParam }) => queryFn({ pageParam: pageParam }),
+        initialPageParam: undefined,
+        getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
+    });
+    if (isLoading) {
+        return (loadingFallback ?? (jsx("div", { "data-query-list-loading": "", style: { display: 'grid', gap: '0.5rem' }, children: Array.from({ length: skeletonRows }).map((_, i) => (jsx(Skeleton, { style: { height: '2rem', width: '100%' } }, i))) })));
+    }
+    if (isError) {
+        const fallback = typeof errorFallback === 'function'
+            ? errorFallback(error)
+            : errorFallback;
+        return (fallback ?? (jsx("div", { "data-query-list-error": "", role: "alert", children: "Failed to load data." })));
+    }
+    const allItems = data?.pages.flatMap((page) => page.items) ?? [];
+    if (allItems.length === 0) {
+        return (emptyFallback ?? (jsx(EmptyState, { title: "No items", description: "There is nothing to display right now." })));
+    }
+    return (jsxs("div", { "data-query-list": "", children: [jsx("div", { "data-query-list-items": "", children: allItems.map((item, index) => renderItem(item, index)) }), hasNextPage && (jsx("button", { type: "button", onClick: () => void fetchNextPage(), disabled: isFetchingNextPage, "data-query-list-load-more": "", style: { marginTop: '1rem' }, children: isFetchingNextPage ? 'Loading…' : loadMoreLabel }))] }));
+}
+
+/**
+ * Data table pre-wired with TanStack Query loading, error and empty states.
+ *
+ * @example
+ * ```tsx
+ * <QueryTable<User>
+ *   queryKey={['users']}
+ *   queryFn={() => fetch('/api/users').then(r => r.json())}
+ *   columns={[
+ *     { key: 'name', header: 'Name', sortable: true },
+ *     { key: 'email', header: 'Email' },
+ *   ]}
+ * />
+ * ```
+ */
+function QueryTable({ queryKey, queryFn, columns, pageSize, loadingFallback, errorFallback, emptyFallback, skeletonRows = 5, }) {
+    const { data, isLoading, isError, error } = useQuery({ queryKey, queryFn });
+    if (isLoading) {
+        return (loadingFallback ?? (jsx("div", { "data-query-table-loading": "", style: { display: 'grid', gap: '0.5rem' }, children: Array.from({ length: skeletonRows }).map((_, i) => (jsx(Skeleton, { style: { height: '2rem', width: '100%' } }, i))) })));
+    }
+    if (isError) {
+        const fallback = typeof errorFallback === 'function'
+            ? errorFallback(error)
+            : errorFallback;
+        return (fallback ?? (jsx("div", { "data-query-table-error": "", role: "alert", children: "Failed to load data." })));
+    }
+    const rows = data ?? [];
+    if (rows.length === 0) {
+        return (emptyFallback ?? (jsx(EmptyState, { title: "No records found", description: "There are no items to display right now." })));
+    }
+    return jsx(DataTable, { data: rows, columns: columns, pageSize: pageSize });
+}
+
+/** @deprecated Use `QueryTable` instead, which adds skeleton, error and empty states. */
 function AsyncDataTable({ queryKey, queryFn, columns, pageSize, }) {
     const { data = [], isLoading, isError } = useQuery({ queryKey, queryFn });
     if (isLoading)
@@ -11,5 +134,5 @@ function AsyncDataTable({ queryKey, queryFn, columns, pageSize, }) {
     return jsx(DataTable, { data: data, columns: columns, pageSize: pageSize });
 }
 
-export { AsyncDataTable };
+export { AsyncDataTable, QueryBoundary, QueryList, QueryTable };
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAoBM,SAAU,cAAc,CAAI,EAChC,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,GACe,EAAA;AACvB,IAAA,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;AAEzE,IAAA,IAAI,SAAS;AAAE,QAAA,OAAOA,sCAAqB;AAC3C,IAAA,IAAI,OAAO;AAAE,QAAA,OAAOA,gDAA+B;AAEnD,IAAA,OAAOA,GAAA,CAAC,SAAS,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI;AACxE;;;;"}
+{"version":3,"file":"index.esm.js","sources":["../src/QueryBoundary.tsx","../src/QueryList.tsx","../src/QueryTable.tsx","../src/index.tsx"],"sourcesContent":[null,null,null,null],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/index.js

@@ -3,7 +3,130 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactQuery = require('@tanstack/react-query');
 var core = require('@ui-construction-library/core');
+var react = require('react');
 
+class QueryErrorBoundary extends react.Component {
+    constructor(props) {
+        super(props);
+        this.state = { error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error, info) {
+        console.error('[QueryBoundary]', error, info.componentStack);
+    }
+    handleReset = () => {
+        this.props.onReset?.();
+        this.setState({ error: null });
+    };
+    render() {
+        const { error } = this.state;
+        if (error) {
+            const { fallback } = this.props;
+            return typeof fallback === 'function'
+                ? fallback(error, this.handleReset)
+                : fallback;
+        }
+        return this.props.children;
+    }
+}
+/**
+ * Wraps query-consuming children with `Suspense` + an error boundary.
+ *
+ * @example
+ * ```tsx
+ * <QueryBoundary
+ *   loadingFallback={<Skeleton />}
+ *   errorFallback={(err, retry) => <div>Failed: {err.message} <button onClick={retry}>Retry</button></div>}
+ *   queryKey={['users']}
+ * >
+ *   <UsersList />
+ * </QueryBoundary>
+ * ```
+ */
+function QueryBoundary({ loadingFallback = jsxRuntime.jsx("div", { "data-query-loading": "", children: "Loading\u2026" }), errorFallback, queryKey, children, }) {
+    const queryClient = reactQuery.useQueryClient();
+    const resolvedErrorFallback = errorFallback ??
+        ((err, retry) => (jsxRuntime.jsxs("div", { "data-query-error": "", role: "alert", children: [jsxRuntime.jsxs("p", { children: ["Something went wrong: ", err.message] }), jsxRuntime.jsx("button", { type: "button", onClick: retry, children: "Retry" })] })));
+    return (jsxRuntime.jsx(QueryErrorBoundary, { fallback: resolvedErrorFallback, onReset: () => {
+            if (queryKey) {
+                void queryClient.invalidateQueries({ queryKey });
+            }
+        }, children: jsxRuntime.jsx(react.Suspense, { fallback: loadingFallback, children: children }) }));
+}
+
+/**
+ * Infinite-scroll / load-more list backed by TanStack Query's `useInfiniteQuery`.
+ *
+ * @example
+ * ```tsx
+ * <QueryList<User>
+ *   queryKey={['users-list']}
+ *   queryFn={({ pageParam }) =>
+ *     fetch(`/api/users?cursor=${pageParam ?? ''}`).then(r => r.json())
+ *   }
+ *   renderItem={(user) => <div>{user.name}</div>}
+ * />
+ * ```
+ */
+function QueryList({ queryKey, queryFn, renderItem, loadingFallback, errorFallback, emptyFallback, loadMoreLabel = 'Load more', skeletonRows = 3, }) {
+    const { data, isLoading, isError, error, hasNextPage, isFetchingNextPage, fetchNextPage, } = reactQuery.useInfiniteQuery({
+        queryKey,
+        queryFn: ({ pageParam }) => queryFn({ pageParam: pageParam }),
+        initialPageParam: undefined,
+        getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
+    });
+    if (isLoading) {
+        return (loadingFallback ?? (jsxRuntime.jsx("div", { "data-query-list-loading": "", style: { display: 'grid', gap: '0.5rem' }, children: Array.from({ length: skeletonRows }).map((_, i) => (jsxRuntime.jsx(core.Skeleton, { style: { height: '2rem', width: '100%' } }, i))) })));
+    }
+    if (isError) {
+        const fallback = typeof errorFallback === 'function'
+            ? errorFallback(error)
+            : errorFallback;
+        return (fallback ?? (jsxRuntime.jsx("div", { "data-query-list-error": "", role: "alert", children: "Failed to load data." })));
+    }
+    const allItems = data?.pages.flatMap((page) => page.items) ?? [];
+    if (allItems.length === 0) {
+        return (emptyFallback ?? (jsxRuntime.jsx(core.EmptyState, { title: "No items", description: "There is nothing to display right now." })));
+    }
+    return (jsxRuntime.jsxs("div", { "data-query-list": "", children: [jsxRuntime.jsx("div", { "data-query-list-items": "", children: allItems.map((item, index) => renderItem(item, index)) }), hasNextPage && (jsxRuntime.jsx("button", { type: "button", onClick: () => void fetchNextPage(), disabled: isFetchingNextPage, "data-query-list-load-more": "", style: { marginTop: '1rem' }, children: isFetchingNextPage ? 'Loading…' : loadMoreLabel }))] }));
+}
+
+/**
+ * Data table pre-wired with TanStack Query loading, error and empty states.
+ *
+ * @example
+ * ```tsx
+ * <QueryTable<User>
+ *   queryKey={['users']}
+ *   queryFn={() => fetch('/api/users').then(r => r.json())}
+ *   columns={[
+ *     { key: 'name', header: 'Name', sortable: true },
+ *     { key: 'email', header: 'Email' },
+ *   ]}
+ * />
+ * ```
+ */
+function QueryTable({ queryKey, queryFn, columns, pageSize, loadingFallback, errorFallback, emptyFallback, skeletonRows = 5, }) {
+    const { data, isLoading, isError, error } = reactQuery.useQuery({ queryKey, queryFn });
+    if (isLoading) {
+        return (loadingFallback ?? (jsxRuntime.jsx("div", { "data-query-table-loading": "", style: { display: 'grid', gap: '0.5rem' }, children: Array.from({ length: skeletonRows }).map((_, i) => (jsxRuntime.jsx(core.Skeleton, { style: { height: '2rem', width: '100%' } }, i))) })));
+    }
+    if (isError) {
+        const fallback = typeof errorFallback === 'function'
+            ? errorFallback(error)
+            : errorFallback;
+        return (fallback ?? (jsxRuntime.jsx("div", { "data-query-table-error": "", role: "alert", children: "Failed to load data." })));
+    }
+    const rows = data ?? [];
+    if (rows.length === 0) {
+        return (emptyFallback ?? (jsxRuntime.jsx(core.EmptyState, { title: "No records found", description: "There are no items to display right now." })));
+    }
+    return jsxRuntime.jsx(core.DataTable, { data: rows, columns: columns, pageSize: pageSize });
+}
+
+/** @deprecated Use `QueryTable` instead, which adds skeleton, error and empty states. */
 function AsyncDataTable({ queryKey, queryFn, columns, pageSize, }) {
     const { data = [], isLoading, isError } = reactQuery.useQuery({ queryKey, queryFn });
     if (isLoading)
@@ -14,4 +137,7 @@ function AsyncDataTable({ queryKey, queryFn, columns, pageSize, }) {
 }
 
 exports.AsyncDataTable = AsyncDataTable;
+exports.QueryBoundary = QueryBoundary;
+exports.QueryList = QueryList;
+exports.QueryTable = QueryTable;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":[null],"names":["useQuery","_jsx","DataTable"],"mappings":";;;;;;AAoBM,SAAU,cAAc,CAAI,EAChC,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,GACe,EAAA;AACvB,IAAA,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,GAAGA,mBAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;AAEzE,IAAA,IAAI,SAAS;AAAE,QAAA,OAAOC,iDAAqB;AAC3C,IAAA,IAAI,OAAO;AAAE,QAAA,OAAOA,2DAA+B;AAEnD,IAAA,OAAOA,cAAA,CAACC,cAAS,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI;AACxE;;;;"}
+{"version":3,"file":"index.js","sources":["../src/QueryBoundary.tsx","../src/QueryList.tsx","../src/QueryTable.tsx","../src/index.tsx"],"sourcesContent":[null,null,null,null],"names":["Component","_jsx","useQueryClient","_jsxs","Suspense","useInfiniteQuery","Skeleton","EmptyState","useQuery","DataTable"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui-construction-library/integration-tanstack-query",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -8,19 +8,26 @@
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "rollup -c && tsc -p tsconfig.json --emitDeclarationOnly --declarationMap",
+    "test": "vitest run --config ./vitest.config.ts src",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check src"
+  },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",
-    "react": ">=18.0.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@ui-construction-library/core": "^0.1.2"
+    "@ui-construction-library/core": "^0.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.27",
+    "@types/react": "catalog:",
     "@rollup/plugin-typescript": "^12.1.2",
     "rollup": "^4.34.8",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.0"
+    "vitest": "catalog:"
   },
   "type": "module",
   "sideEffects": false,
@@ -31,10 +38,22 @@
       "types": "./dist/index.d.ts"
     }
   },
-  "scripts": {
-    "build": "rollup -c",
-    "test": "vitest run --config ../../../vitest.config.ts src",
-    "typecheck": "tsc --noEmit",
-    "lint": "biome check src"
-  }
-}
+  "description": "TanStack Query integration for @ui-construction-library — query-backed data components.",
+  "keywords": [
+    "tanstack-query",
+    "react-query",
+    "data-fetching",
+    "react",
+    "design-system"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jilimb0/UI-Library.git",
+    "directory": "packages/integrations/tanstack-query"
+  },
+  "homepage": "https://github.com/jilimb0/UI-Library#readme",
+  "files": [
+    "dist",
+    "README.md"
+  ]
+}

package/.rollup.cache/Users/jilimbo/Documents/PersonalProjects/UI-Library/packages/integrations/tanstack-query/dist/index.d.ts

@@ -1,19 +0,0 @@
-import { type QueryKey } from '@tanstack/react-query';
-import type { ReactNode } from 'react';
-type Column<T> = {
-    key: string;
-    header: string;
-    width?: number | string;
-    sortable?: boolean;
-    filterable?: boolean;
-    render?: (item: T) => ReactNode;
-};
-interface AsyncDataTableProps<T> {
-    queryKey: QueryKey;
-    queryFn: () => Promise<T[]>;
-    columns: Column<T>[];
-    pageSize?: number;
-}
-export declare function AsyncDataTable<T>({ queryKey, queryFn, columns, pageSize, }: AsyncDataTableProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=index.d.ts.map

package/.rollup.cache/Users/jilimbo/Documents/PersonalProjects/UI-Library/packages/integrations/tanstack-query/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAY,MAAM,uBAAuB,CAAC;AAEhE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,MAAM,CAAC,CAAC,IAAI;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;CACjC,CAAC;AAEF,UAAU,mBAAmB,CAAC,CAAC;IAC7B,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;IAC5B,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,EAChC,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,GACT,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CAOxB"}

package/.rollup.cache/Users/jilimbo/Documents/PersonalProjects/UI-Library/packages/integrations/tanstack-query/dist/index.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useQuery } from '@tanstack/react-query';
-import { DataTable } from '@ui-construction-library/core';
-export function AsyncDataTable({ queryKey, queryFn, columns, pageSize, }) {
-    const { data = [], isLoading, isError } = useQuery({ queryKey, queryFn });
-    if (isLoading)
-        return _jsx("div", { children: "Loading..." });
-    if (isError)
-        return _jsx("div", { children: "Failed to load data." });
-    return _jsx(DataTable, { data: data, columns: columns, pageSize: pageSize });
-}
-//# sourceMappingURL=index.js.map

package/.rollup.cache/Users/jilimbo/Documents/PersonalProjects/UI-Library/packages/integrations/tanstack-query/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAmB1D,MAAM,UAAU,cAAc,CAAI,EAChC,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,GACe;IACvB,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC;IAE1E,IAAI,SAAS;QAAE,OAAO,uCAAqB,CAAC;IAC5C,IAAI,OAAO;QAAE,OAAO,iDAA+B,CAAC;IAEpD,OAAO,KAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;AACzE,CAAC"}

package/.rollup.cache/Users/jilimbo/Documents/PersonalProjects/UI-Library/packages/integrations/tanstack-query/dist/index.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=index.test.d.ts.map

package/.rollup.cache/Users/jilimbo/Documents/PersonalProjects/UI-Library/packages/integrations/tanstack-query/dist/index.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../src/index.test.tsx"],"names":[],"mappings":""}

package/.rollup.cache/Users/jilimbo/Documents/PersonalProjects/UI-Library/packages/integrations/tanstack-query/dist/index.test.js

@@ -1,37 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-const useQueryMock = vi.fn();
-vi.mock('@tanstack/react-query', () => ({
-    useQuery: (args) => useQueryMock(args),
-}));
-vi.mock('@ui-construction-library/core', () => ({
-    DataTable: ({ data }) => (_jsxs("div", { children: ["rows:", data.length] })),
-}));
-import { AsyncDataTable } from './index';
-describe('integration-tanstack-query', () => {
-    it('shows loading and error states and renders the data table on success', async () => {
-        useQueryMock.mockReturnValueOnce({
-            data: [],
-            isLoading: true,
-            isError: false,
-        });
-        const { rerender } = render(_jsx(AsyncDataTable, { queryKey: ['items'], queryFn: async () => [], columns: [] }));
-        expect(screen.getByText('Loading...')).toBeTruthy();
-        useQueryMock.mockReturnValueOnce({
-            data: [],
-            isLoading: false,
-            isError: true,
-        });
-        rerender(_jsx(AsyncDataTable, { queryKey: ['items'], queryFn: async () => [], columns: [] }));
-        expect(screen.getByText('Failed to load data.')).toBeTruthy();
-        useQueryMock.mockReturnValueOnce({
-            data: [{ name: 'A' }],
-            isLoading: false,
-            isError: false,
-        });
-        rerender(_jsx(AsyncDataTable, { queryKey: ['items'], queryFn: async () => [], columns: [] }));
-        expect(screen.getByText('rows:1')).toBeTruthy();
-    });
-});
-//# sourceMappingURL=index.test.js.map

package/.rollup.cache/Users/jilimbo/Documents/PersonalProjects/UI-Library/packages/integrations/tanstack-query/dist/index.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../src/index.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAElD,MAAM,YAAY,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;AAE7B,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,GAAG,EAAE,CAAC,CAAC;IACtC,QAAQ,EAAE,CAAC,IAAa,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC;CAChD,CAAC,CAAC,CAAC;AAEJ,EAAE,CAAC,IAAI,CAAC,+BAA+B,EAAE,GAAG,EAAE,CAAC,CAAC;IAC9C,SAAS,EAAE,CAAC,EAAE,IAAI,EAAqC,EAAE,EAAE,CAAC,CAC1D,mCAAW,IAAI,CAAC,MAAM,IAAO,CAC9B;CACF,CAAC,CAAC,CAAC;AAEJ,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,QAAQ,CAAC,4BAA4B,EAAE,GAAG,EAAE;IAC1C,EAAE,CAAC,sEAAsE,EAAE,KAAK,IAAI,EAAE;QACpF,YAAY,CAAC,mBAAmB,CAAC;YAC/B,IAAI,EAAE,EAAE;YACR,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,KAAK;SACf,CAAC,CAAC;QACH,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,CACzB,KAAC,cAAc,IACb,QAAQ,EAAE,CAAC,OAAO,CAAC,EACnB,OAAO,EAAE,KAAK,IAAI,EAAE,CAAC,EAAE,EACvB,OAAO,EAAE,EAAE,GACX,CACH,CAAC;QACF,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC;QAEpD,YAAY,CAAC,mBAAmB,CAAC;YAC/B,IAAI,EAAE,EAAE;YACR,SAAS,EAAE,KAAK;YAChB,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;QACH,QAAQ,CACN,KAAC,cAAc,IACb,QAAQ,EAAE,CAAC,OAAO,CAAC,EACnB,OAAO,EAAE,KAAK,IAAI,EAAE,CAAC,EAAE,EACvB,OAAO,EAAE,EAAE,GACX,CACH,CAAC;QACF,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,sBAAsB,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC;QAE9D,YAAY,CAAC,mBAAmB,CAAC;YAC/B,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC;YACrB,SAAS,EAAE,KAAK;YAChB,OAAO,EAAE,KAAK;SACf,CAAC,CAAC;QACH,QAAQ,CACN,KAAC,cAAc,IACb,QAAQ,EAAE,CAAC,OAAO,CAAC,EACnB,OAAO,EAAE,KAAK,IAAI,EAAE,CAAC,EAAE,EACvB,OAAO,EAAE,EAAE,GACX,CACH,CAAC;QACF,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC;IAClD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}