@jwcarman/roux-web 0.0.0 → 0.1.0

package/dist/table/selectColumn.d.ts

@@ -0,0 +1,17 @@
+import { type ColumnDef } from "@tanstack/react-table";
+export interface SelectColumnOptions<T> {
+    /** The selected rows, by key; they may span pages. */
+    selected: ReadonlyMap<string, T>;
+    onSelectedChange: (selected: Map<string, T>) => void;
+    /** A row's stable key, such as its id: rows are new objects on every fetch. */
+    keyOf: (row: T) => string;
+    /** Names a row for its checkbox: "Select <label>". */
+    labelOf: (row: T) => string;
+    /** The header checkbox's label. */
+    selectAllLabel?: string;
+}
+/**
+ * A checkbox column for choosing rows, across pages. The header checkbox selects or unselects
+ * the rows on the page shown, leaving other pages' selections alone.
+ */
+export declare function createSelectColumn<T>({ selected, onSelectedChange, keyOf, labelOf, selectAllLabel, }: SelectColumnOptions<T>): ColumnDef<T, unknown>;

package/dist/table/selectColumn.js

@@ -0,0 +1,36 @@
+import { Checkbox as e } from "@chakra-ui/react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { createColumnHelper as r } from "@tanstack/react-table";
+// src/table/selectColumn.tsx
+function i({ selected: i, onSelectedChange: a, keyOf: o, labelOf: s, selectAllLabel: c = "Select every row on this page" }) {
+	return r().display({
+		id: "select",
+		header: ({ table: r }) => {
+			let s = r.getRowModel().rows.map((e) => e.original), l = s.filter((e) => i.has(o(e))).length, u = s.length > 0 && l === s.length || l > 0 && "indeterminate";
+			function d(e) {
+				let t = new Map(i);
+				for (let n of s) e ? t.set(o(n), n) : t.delete(o(n));
+				a(t);
+			}
+			return /* @__PURE__ */ n(e.Root, {
+				checked: u,
+				disabled: s.length === 0,
+				onCheckedChange: () => d(u !== !0),
+				children: [/* @__PURE__ */ t(e.HiddenInput, { "aria-label": c }), /* @__PURE__ */ t(e.Control, { children: /* @__PURE__ */ t(e.Indicator, {}) })]
+			});
+		},
+		cell: ({ row: r }) => {
+			let c = o(r.original), l = i.has(c);
+			function u(e) {
+				let t = new Map(i);
+				e ? t.set(c, r.original) : t.delete(c), a(t);
+			}
+			return /* @__PURE__ */ n(e.Root, {
+				checked: l,
+				onCheckedChange: (e) => u(e.checked === !0),
+				children: [/* @__PURE__ */ t(e.HiddenInput, { "aria-label": `Select ${s(r.original)}` }), /* @__PURE__ */ t(e.Control, { children: /* @__PURE__ */ t(e.Indicator, {}) })]
+			});
+		}
+	});
+}
+export { i as createSelectColumn };

package/dist/table/useDebounce.d.ts

@@ -0,0 +1,2 @@
+/** `value`, once it has stopped changing for `delayMs`. */
+export declare function useDebounce<T>(value: T, delayMs: number): T;

package/dist/table/useDebounce.js

@@ -0,0 +1,10 @@
+import { useEffect as e, useState as t } from "react";
+// src/table/useDebounce.ts
+function n(n, r) {
+	let [i, a] = t(n);
+	return e(() => {
+		let e = setTimeout(() => a(n), r);
+		return () => clearTimeout(e);
+	}, [n, r]), i;
+}
+export { n as useDebounce };

package/dist/table/useQueryTable.d.ts

@@ -0,0 +1,49 @@
+import { type QueryKey } from "@tanstack/react-query";
+import { type ColumnDef, type ColumnSort, type Table } from "@tanstack/react-table";
+import { type PageDto, type PageParams, type SortDirection, type TableSearch } from "../paging/paging";
+export declare const DEFAULT_PAGE_SIZE = 25;
+export interface UseQueryTableOptions<T> {
+    /**
+     * Names the list, including any search or filter the page applies (`query` closes over the
+     * same values). A different key is a different list, which starts on its first page.
+     */
+    queryKey: QueryKey;
+    /** Fetches one page; the table supplies the page, page size and sort. */
+    query: (params: PageParams) => Promise<PageDto<T>>;
+    /** Column ids of sortable columns are the endpoint's sort names (its sort enum's values). */
+    columns: ColumnDef<T, unknown>[];
+    initialSort?: ColumnSort;
+    /** Rows per page, at most {@link MAX_PAGE_SIZE}; {@link DEFAULT_PAGE_SIZE} unless given. */
+    initialPageSize?: number;
+    /** A stable id per row, such as the entity's id; the row's index on the page otherwise. */
+    getRowId?: (row: T) => string;
+    /**
+     * The page and sort, when the caller keeps them (in the URL, say): the table shows these, with
+     * the defaults above for what is absent, and reports every change to {@link onParamsChange}
+     * instead of keeping its own. Its `search` is ignored; put the search in `queryKey` and `query`,
+     * and set `pageIndex` back to 0 in the same update that changes it.
+     */
+    params?: TableSearch;
+    onParamsChange?: (params: TableParams) => void;
+}
+/** A table's page and sort, as reported to {@link UseQueryTableOptions.onParamsChange}. */
+export interface TableParams {
+    pageIndex: number;
+    pageSize: number;
+    sortBy?: string;
+    sortDirection?: SortDirection;
+}
+export interface UseQueryTableResult<T> {
+    table: Table<T>;
+    /** The page on screen: the last one loaded, while the next one loads. */
+    page: PageDto<T> | undefined;
+    isLoading: boolean;
+    isError: boolean;
+    refetch: () => Promise<unknown>;
+}
+/**
+ * A TanStack table over a jpa-utils paged endpoint: the server pages and sorts, TanStack Query
+ * fetches and caches, and the table holds the page and sort the user chose, or reports them to a
+ * caller that keeps them ({@link UseQueryTableOptions.params}).
+ */
+export declare function useQueryTable<T>({ queryKey, query, columns, initialSort, initialPageSize, getRowId, params, onParamsChange, }: UseQueryTableOptions<T>): UseQueryTableResult<T>;

package/dist/table/useQueryTable.js

@@ -0,0 +1,127 @@
+import { pageParamsOf as e } from "../paging/paging.js";
+import { hashKey as t, keepPreviousData as n, useQuery as r } from "@tanstack/react-query";
+import { functionalUpdate as i, getCoreRowModel as a, useReactTable as o } from "@tanstack/react-table";
+import { useEffect as s, useRef as c, useState as l } from "react";
+// src/table/useQueryTable.ts
+var u = 25, d = [];
+function f(e, t, n) {
+	return {
+		pagination: {
+			pageIndex: g(e.pageIndex ?? 0),
+			pageSize: h(e.pageSize ?? n)
+		},
+		sorting: p(e, t)
+	};
+}
+function p(e, t) {
+	if (e.sortBy !== void 0) return [{
+		id: e.sortBy,
+		desc: e.sortDirection === "DESC"
+	}];
+	if (t === void 0) return [];
+	let n = e.sortDirection === void 0 ? t.desc : e.sortDirection === "DESC";
+	return [{
+		id: t.id,
+		desc: n
+	}];
+}
+function m({ pagination: e, sorting: t }) {
+	let { pageIndex: n, pageSize: r } = e, i = t[0];
+	return i ? {
+		pageIndex: n,
+		pageSize: r,
+		sortBy: i.id,
+		sortDirection: i.desc ? "DESC" : "ASC"
+	} : {
+		pageIndex: n,
+		pageSize: r
+	};
+}
+function h(e) {
+	return Number.isFinite(e) ? Math.min(Math.max(1, Math.floor(e)), 100) : 25;
+}
+function g(e) {
+	return Number.isFinite(e) ? Math.max(0, Math.floor(e)) : 0;
+}
+function _({ queryKey: u, query: p, columns: _, initialSort: v, initialPageSize: y = 25, getRowId: b, params: x, onParamsChange: S }) {
+	let C = x !== void 0, [w, T] = l(() => f({}, v, y)), E = C ? f(x, v, y) : w, D = c(S);
+	s(() => {
+		D.current = S;
+	}, [S]);
+	function O(e) {
+		let t = {
+			pagination: {
+				pageIndex: g(e.pagination.pageIndex),
+				pageSize: h(e.pagination.pageSize)
+			},
+			sorting: e.sorting
+		};
+		C ? D.current?.(m(t)) : T(t);
+	}
+	let k = t(u), [A, j] = l(k);
+	A !== k && (j(k), T({
+		...w,
+		pagination: {
+			...w.pagination,
+			pageIndex: 0
+		}
+	}));
+	let M = E.pagination, N = e(M, E.sorting), P = r({
+		queryKey: [...u, N],
+		queryFn: () => p(N),
+		placeholderData: n
+	}), F = P.data, I = P.isPlaceholderData ? Infinity : F?.pagination.totalPageCount ?? Infinity, L = M.pageIndex > 0 && M.pageIndex >= I ? Math.max(0, I - 1) : void 0, R = M.pageSize, z = E.sorting[0]?.id, B = E.sorting[0]?.desc === !0;
+	return s(() => {
+		if (L === void 0) return;
+		let e = {
+			pagination: {
+				pageIndex: L,
+				pageSize: R
+			},
+			sorting: z === void 0 ? [] : [{
+				id: z,
+				desc: B
+			}]
+		};
+		C ? D.current?.(m(e)) : T(e);
+	}, [
+		L,
+		C,
+		R,
+		z,
+		B
+	]), {
+		table: o({
+			data: F?.data ?? d,
+			columns: _,
+			getRowId: b,
+			rowCount: F?.pagination.totalElementCount ?? 0,
+			pageCount: F?.pagination.totalPageCount ?? 0,
+			state: {
+				pagination: M,
+				sorting: E.sorting
+			},
+			onPaginationChange: (e) => O({
+				...E,
+				pagination: i(e, M)
+			}),
+			onSortingChange: (e) => O({
+				sorting: i(e, E.sorting),
+				pagination: {
+					...M,
+					pageIndex: 0
+				}
+			}),
+			getCoreRowModel: a(),
+			autoResetPageIndex: !1,
+			enableMultiSort: !1,
+			enableSortingRemoval: !1,
+			sortDescFirst: !1
+		}),
+		page: F,
+		isLoading: P.isLoading,
+		isError: P.isError,
+		refetch: P.refetch
+	};
+}
+export { u as DEFAULT_PAGE_SIZE, _ as useQueryTable };

package/package.json

@@ -1,11 +1,87 @@
 {
   "name": "@jwcarman/roux-web",
-  "version": "0.0.0",
-  "description": "Placeholder; real releases start at 0.1.0.",
+  "version": "0.1.0",
+  "type": "module",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/jwcarman/roux.git",
     "directory": "web/roux-web"
+  },
+  "homepage": "https://github.com/jwcarman/roux#readme",
+  "bugs": "https://github.com/jwcarman/roux/issues",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    "./problem": {
+      "types": "./dist/problem/index.d.ts",
+      "import": "./dist/problem/index.js"
+    },
+    "./api": {
+      "types": "./dist/api/index.d.ts",
+      "import": "./dist/api/index.js"
+    },
+    "./paging": {
+      "types": "./dist/paging/index.d.ts",
+      "import": "./dist/paging/index.js"
+    },
+    "./table": {
+      "types": "./dist/table/index.d.ts",
+      "import": "./dist/table/index.js"
+    },
+    "./feedback": {
+      "types": "./dist/feedback/index.d.ts",
+      "import": "./dist/feedback/index.js"
+    },
+    "./form": {
+      "types": "./dist/form/index.d.ts",
+      "import": "./dist/form/index.js"
+    }
+  },
+  "scripts": {
+    "build": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.json --emitDeclarationOnly && vite build",
+    "typecheck": "tsc -p tsconfig.test.json",
+    "test": "vitest run",
+    "coverage": "vitest run --coverage",
+    "mutate": "stryker run",
+    "format": "../lint-tools/node_modules/.bin/prettier --write .",
+    "format:check": "../lint-tools/node_modules/.bin/prettier --check .",
+    "lint": "../lint-tools/node_modules/.bin/eslint -c ../lint-tools/eslint.config.mjs ."
+  },
+  "peerDependencies": {
+    "@chakra-ui/react": "^3.38.0",
+    "@emotion/react": "^11.14.0",
+    "@tanstack/react-form": "^1.33.5",
+    "@tanstack/react-query": "^5.107.1",
+    "@tanstack/react-table": "^8.21.3",
+    "react": "^19.3.1",
+    "react-icons": "^5.7.0"
+  },
+  "devDependencies": {
+    "@chakra-ui/react": "3.38.0",
+    "@emotion/react": "11.14.0",
+    "@stryker-mutator/core": "10.1.1",
+    "@stryker-mutator/vitest-runner": "10.1.1",
+    "@tanstack/react-form": "1.33.5",
+    "@tanstack/react-query": "5.107.1",
+    "@tanstack/react-table": "8.21.3",
+    "@testing-library/dom": "10.4.2",
+    "@testing-library/jest-dom": "7.0.1",
+    "@testing-library/react": "16.3.3",
+    "@testing-library/user-event": "14.6.8",
+    "@types/node": "26.6.6",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitest/coverage-v8": "5.1.0",
+    "jsdom": "31.0.0",
+    "msw": "3.0.5",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "react-icons": "5.7.0",
+    "typescript": "7.0.2",
+    "vite": "8.3.6",
+    "vitest": "5.1.0"
   }
 }