@proofkit/cli 1.0.0-beta.0

package/template/pages/nextjs/table-infinite-edit/table.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { __TYPE_NAME__ } from "@/config/schemas/__SOURCE_NAME__/__SCHEMA_NAME__";
+import { Text } from "@mantine/core";
+import {
+  createMRTColumnHelper,
+  MantineReactTable,
+  useMantineReactTable,
+  type MRT_Cell,
+  type MRT_ColumnDef,
+  type MRT_ColumnFiltersState,
+  type MRT_RowVirtualizer,
+  type MRT_SortingState,
+} from "mantine-react-table";
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type UIEvent,
+} from "react";
+
+import { useAllData } from "./query";
+import { idFieldName } from "./schema";
+
+type TData = __TYPE_NAME__;
+
+const columns: MRT_ColumnDef<TData>[] = [];
+
+export default function MyTable() {
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const rowVirtualizerInstanceRef =
+    useRef<MRT_RowVirtualizer<HTMLDivElement, HTMLTableRowElement>>(null);
+
+  const [sorting, setSorting] = useState<MRT_SortingState>([]);
+  const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(
+    []
+  );
+
+  const {
+    data,
+    totalDBRowCount,
+    totalFetched,
+    isLoading,
+    isFetching,
+    fetchNextPage,
+    updateRecord,
+  } = useAllData({ sorting, columnFilters });
+
+  async function handleSaveCell(cell: MRT_Cell<TData>, value: unknown) {
+    updateRecord({
+      [idFieldName]: cell.row.id,
+      [cell.column.id]: value,
+    });
+  }
+
+  const table = useMantineReactTable({
+    data,
+    columns,
+    rowCount: totalDBRowCount,
+    enableRowVirtualization: true, // only render the rows that are visible on screen to improve performance
+    state: { isLoading, sorting, showProgressBars: isFetching, columnFilters },
+    enableGlobalFilter: false, // doesn't work as easily with server-side filters, it's better to filter the specific columns
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    enablePagination: false, // hide pagination buttons
+    enableStickyHeader: true,
+    mantineBottomToolbarProps: { style: { alignItems: "center" } },
+    renderBottomToolbarCustomActions: () =>
+      !isLoading ? (
+        <Text px="sm">
+          Fetched {totalFetched} of {totalDBRowCount}
+        </Text>
+      ) : null,
+    mantineTableContainerProps: ({ table }) => {
+      return {
+        h: table.getState().isFullScreen
+          ? "100%"
+          : `calc(100vh - var(--app-shell-header-height) - 13rem)`, // may need to adjust this height if you have more elements on your page
+        ref: tableContainerRef,
+        onScroll: (
+          event: UIEvent<HTMLDivElement> //add an event listener to the table container element
+        ) => fetchMoreOnBottomReached(event.target as HTMLDivElement),
+      };
+    },
+
+    /** Inline editing functionality */
+    enableEditing: true,
+    editDisplayMode: "cell",
+    getRowId: (row) => row[idFieldName],
+    mantineEditTextInputProps: ({ cell }) => ({
+      // onBlur is more efficient (only called when you leave the field)
+      // onChange event could be used for other types of edits, like dropdowns
+      onBlur: (event) => {
+        handleSaveCell(cell, event.target.value);
+      },
+    }),
+  });
+
+  // called on scroll and possibly on mount to fetch more data as the user scrolls and reaches bottom of table
+  const fetchMoreOnBottomReached = useCallback(
+    (containerRefElement?: HTMLDivElement | null) => {
+      if (containerRefElement) {
+        const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
+        // once the user has scrolled within 400px of the bottom of the table, fetch more data
+        if (
+          scrollHeight - scrollTop - clientHeight < 400 &&
+          !isFetching &&
+          totalFetched < totalDBRowCount
+        ) {
+          void fetchNextPage();
+        }
+      }
+    },
+    [fetchNextPage, isFetching, totalFetched, totalDBRowCount]
+  );
+
+  // scroll to top of table when sorting or filters change
+  useEffect(() => {
+    if (rowVirtualizerInstanceRef.current) {
+      try {
+        rowVirtualizerInstanceRef.current.scrollToIndex(0);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }, [sorting, columnFilters]);
+
+  return <MantineReactTable table={table} />;
+}

package/template/pages/vite-wv/table/index.tsx

@@ -0,0 +1,34 @@
+import { createFileRoute } from "@tanstack/react-router";
+import {
+  MantineReactTable,
+  MRT_ColumnDef,
+  useMantineReactTable,
+} from "mantine-react-table";
+import { __CLIENT_NAME__ } from "@/config/schemas/__SOURCE_NAME__/client";
+import { __TYPE_NAME__ } from "@/config/schemas/__SOURCE_NAME__/__SCHEMA_NAME__";
+import { Stack, Text } from "@mantine/core";
+import FullScreenLoader from "@/components/full-screen-loader";
+export const Route = createFileRoute("/")({
+  component: RouteComponent,
+  pendingComponent: () => <FullScreenLoader />,
+  loader: async () => {
+    // this function is limited to 100 records by default. To load more, see the other table templates from the docs
+    const { data } = await __CLIENT_NAME__.list();
+    return data.map((record) => record.fieldData) as __TYPE_NAME__[];
+  },
+});
+
+type TData = __TYPE_NAME__;
+
+const columns: MRT_ColumnDef<TData>[] = [];
+
+function RouteComponent() {
+  const data = Route.useLoaderData();
+  const table = useMantineReactTable({ data, columns });
+  return (
+    <Stack p="md">
+      <Text>This basic table loads up to 100 records by default</Text>
+      <MantineReactTable table={table} />
+    </Stack>
+  );
+}

package/template/pages/vite-wv/table-edit/index.tsx

@@ -0,0 +1,72 @@
+import { createFileRoute } from "@tanstack/react-router";
+import {
+  MantineReactTable,
+  MRT_Cell,
+  MRT_ColumnDef,
+  useMantineReactTable,
+} from "mantine-react-table";
+import { __CLIENT_NAME__ } from "@/config/schemas/__SOURCE_NAME__/client";
+import { __TYPE_NAME__ } from "@/config/schemas/__SOURCE_NAME__/__SCHEMA_NAME__";
+import { Code, Stack, Text } from "@mantine/core";
+import FullScreenLoader from "@/components/full-screen-loader";
+
+export const Route = createFileRoute("/")({
+  component: RouteComponent,
+  pendingComponent: () => <FullScreenLoader />,
+  loader: async () => {
+    // this function is limited to 100 records by default. To load more, see the other table templates from the docs
+    const { data } = await __CLIENT_NAME__.list();
+    return data.map((record) => record.fieldData) as __TYPE_NAME__[];
+  },
+});
+
+type TData = __TYPE_NAME__;
+
+const columns: MRT_ColumnDef<TData>[] = [];
+
+// TODO: Make sure this variable is properly set to your primary key field
+const idFieldName: keyof __TYPE_NAME__ = "__FIRST_FIELD_NAME__";
+async function handleSaveCell(cell: MRT_Cell<TData>, value: unknown) {
+  const {
+    data: { recordId },
+  } = await __CLIENT_NAME__.findOne({
+    query: { [idFieldName]: `==${cell.row.id}` },
+  });
+
+  await __CLIENT_NAME__.update({
+    fieldData: { [cell.column.id]: value },
+    recordId,
+  });
+}
+
+function RouteComponent() {
+  const data = Route.useLoaderData();
+  const table = useMantineReactTable({
+    data,
+    columns,
+    enableEditing: true,
+    editDisplayMode: "cell",
+    getRowId: (row) => row[idFieldName],
+    mantineEditTextInputProps: ({ cell }) => ({
+      //onBlur is more efficient, but could use onChange instead
+      onBlur: (event) => {
+        handleSaveCell(cell, event.target.value);
+      },
+    }),
+  });
+  return (
+    <Stack p="md">
+      <div>
+        <Text>
+          This table allows editing. Double-click on a cell to edit the value.
+        </Text>
+        <Text size="sm" c="dimmed">
+          NOTE: This feature requires a primary key field on your API layout. If your
+          primary key field is not <Code>{idFieldName}</Code>, update the
+          <Code>idFieldName</Code> variable in the code.
+        </Text>
+      </div>
+      <MantineReactTable table={table} />
+    </Stack>
+  );
+}

package/template/vite-wv/.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  }
+}

package/template/vite-wv/_gitignore

@@ -0,0 +1,18 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+.vinxi
+.output
+.vercel
+.netlify
+.wrangler
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea

package/template/vite-wv/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ProofKit WebViewer</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template/vite-wv/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "webviewer-demo",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "build:upload": "pnpm build && pnpm upload",
+    "dev": "vite",
+    "launch-fm": "./scripts/launch-fm.sh",
+    "proofkit": "proofkit",
+    "serve": "vite preview",
+    "start": "vite",
+    "typegen": "proofkit typegen",
+    "upload": "node scripts/upload.js"
+  },
+  "dependencies": {
+    "@mantine/core": "^7.15.1",
+    "@mantine/dates": "^7.15.1",
+    "@mantine/hooks": "^7.15.1",
+    "@mantine/modals": "^7.15.1",
+    "@mantine/notifications": "^7.15.1",
+    "@proofkit/webviewer": "^3.0.0",
+    "@proofkit/fmdapi": "^5.0.0",
+    "@t3-oss/env-core": "^0.12.0",
+    "@tabler/icons-react": "^3.26.0",
+    "@tanstack/react-query": "^5.69.0",
+    "@tanstack/react-router": "^1.114.27",
+    "mantine-react-table": "2.0.0-beta.7",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "vite-plugin-singlefile": "^2.1.0",
+    "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "@tanstack/eslint-plugin-query": "^5.59.1",
+    "@tanstack/react-query-devtools": "^5.69.0",
+    "@tanstack/react-router-devtools": "^1.114.27",
+    "@tanstack/router-plugin": "^1.114.27",
+    "@types/node": "^22.13.13",
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "dotenv": "^16.4.7",
+    "open": "^10.1.0",
+    "postcss": "^8.5.3",
+    "postcss-preset-mantine": "^1.17.0",
+    "postcss-simple-vars": "^7.0.1",
+    "typescript": "^5",
+    "vite": "^6.2.3"
+  }
+}