Merge pull request #241 from Enterwell/stage

Stage

.github/workflows/nextjs.yml

@@ -71,4 +71,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v3

apps/docs/components/ExampleUseDataGrid.tsx

@@ -1,28 +1,40 @@
-import { useDataGrid } from '@enterwell/react-mui-hooks';
-import { DataGridPro, GridValidRowModel } from '@mui/x-data-grid-pro';
+import { TypedExtendedGridColDef, useDataGrid } from '@enterwell/react-mui-hooks';
+import { DataGridPro } from '@mui/x-data-grid-pro';
 import { useEffect } from 'react';
 
+type Todo = {
+  id: number;
+  title: string;
+  completed: boolean;
+}
+
+type TodoRow = {
+  id: number;
+  title: string;
+  status: string;
+}
+
 async function getData(page: number, pageSize: number) {
     const response = await fetch('https://jsonplaceholder.typicode.com/todos');
     return (await response.json()).slice(page * pageSize, page * pageSize + pageSize);
 }
 
 export function ExampleUseDataGrid() {
-    const columns = [
+    const columns: TypedExtendedGridColDef<TodoRow>[] = [
         { field: 'title', headerName: 'Title' },
-        { field: 'status', headerName: 'Status' },
+        { field: 'status', headerName: 'Status' }
     ];
 
-    const handleOnPage = async (page: number): Promise<{
-        rows: GridValidRowModel[];
-        totalRowsCount?: number | undefined;
+    const handleOnPage = async (page: number, pageSize: number): Promise<{
+        rows: TodoRow[];
+        totalRowsCount?: number;
     }> => {
-        const response = await getData(page, 20);
+        const response = await getData(page, pageSize);
         return {
-            rows: response.map((item: any) => ({
-                id: item.id,
-                title: item.title,
-                status: item.completed ? 'Completed' : 'Not Completed'
+            rows: response.map((item: Todo) => ({
+              id: item.id,
+              title: item.title,
+              status: item.completed ? 'Completed' : 'Not Completed'
             }))
         };
     };

apps/docs/package.json

@@ -26,31 +26,31 @@
     "@enterwell/react-ui": "workspace:*",
     "@mdx-js/mdx": "3.0.0",
     "@mdx-js/react": "3.0.0",
-    "@mui/icons-material": "5.14.18",
-    "@mui/lab": "5.0.0-alpha.153",
-    "@mui/material": "5.14.18",
-    "@mui/system": "5.14.18",
-    "@mui/x-data-grid": "6.18.2",
-    "@mui/x-data-grid-pro": "6.18.2",
+    "@mui/icons-material": "5.15.0",
+    "@mui/lab": "5.0.0-alpha.156",
+    "@mui/material": "5.15.0",
+    "@mui/system": "5.15.0",
+    "@mui/x-data-grid": "6.18.5",
+    "@mui/x-data-grid-pro": "6.18.5",
     "@mui/x-date-pickers": "5.0.20",
     "@mui/x-date-pickers-pro": "5.0.20",
     "classix": "2.1.35",
     "comment-parser": "1.4.1",
-    "next": "14.0.3",
+    "next": "14.0.4",
     "nextra": "2.13.2",
     "nextra-theme-docs": "2.13.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tailwindcss-animate": "1.0.7"
   },
   "devDependencies": {
-    "@types/node": "18.18.13",
-    "@types/react": "18.2.39",
+    "@types/node": "18.19.3",
+    "@types/react": "18.2.45",
     "@types/react-dom": "18.2.17",
     "autoprefixer": "10.4.16",
-    "postcss": "8.4.31",
-    "tailwindcss": "3.3.5",
-    "typescript": "5.3.2",
+    "postcss": "8.4.32",
+    "tailwindcss": "3.3.6",
+    "typescript": "5.3.3",
     "unist-builder": "4.0.0",
     "unist-util-visit": "5.0.0"
   }

package.json

@@ -6,11 +6,11 @@
     "lint": "turbo run lint"
   },
   "devDependencies": {
-    "eslint": "8.54.0",
+    "eslint": "8.55.0",
     "tsconfig": "workspace:*",
-    "turbo": "1.10.16",
-    "@turbo/gen": "1.10.16"
+    "turbo": "1.11.2",
+    "@turbo/gen": "1.11.2"
   },
-  "packageManager": "pnpm@8.11.0",
+  "packageManager": "pnpm@8.12.1",
   "name": "ui"
 }

packages/eslint-config-custom/package.json

@@ -5,6 +5,6 @@
   "private": true,
   "devDependencies": {
     "@vercel/style-guide": "5.1.0",
-    "eslint-config-turbo": "1.10.16"
+    "eslint-config-turbo": "1.11.2"
   }
 }

packages/react-hooks/package.json

@@ -23,16 +23,16 @@
     "lint": "eslint ."
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "7.38.3",
-    "@types/node": "18.18.13",
-    "@types/react": "18.2.39",
+    "@microsoft/api-extractor": "7.38.5",
+    "@types/node": "18.19.3",
+    "@types/react": "18.2.45",
     "@types/react-dom": "18.2.17",
     "eslint-config-custom": "workspace:*",
     "react": "18.2.0",
     "rimraf": "5.0.5",
     "tsconfig": "workspace:*",
     "tsup": "8.0.1",
-    "typescript": "5.3.2"
+    "typescript": "5.3.3"
   },
   "peerDependencies": {
     "react": "^18",

packages/react-mui-hooks/hooks/useDataGrid.tsx

@@ -29,6 +29,7 @@ import {
     type GridPaginationModel,
     type GridValidRowModel,
     type DataGridPro,
+    type GridSortItem,
 } from '@mui/x-data-grid-pro';
 import { useResizeObserver } from '@enterwell/react-hooks';
 import { format } from 'date-fns';
@@ -90,12 +91,44 @@ type ExtendedGridRenderCellParams = Omit<GridCellParams<GridValidRowModel, unkno
     width?: number
 };
 
-type ExtendedGridColDef = GridColDef<GridValidRowModel> & {
+/**
+ * Extended data grid column definition.
+ *
+ * @public
+ */
+export type ExtendedGridColDef = GridColDef<GridValidRowModel> & {
     customType?: CellRendererCustomType
     enum?: { get: (value: any) => { label: string } | undefined },
     width?: number
 };
 
+/**
+ * Type-safe extended data grid column definition.
+ *
+ * @public
+ */
+export type TypedExtendedGridColDef<T> = ExtendedGridColDef & {
+  field: keyof T
+};
+
+/**
+ * Type-safe data grid column visibility model
+ *
+ * @public
+ */
+export type TypedColVisibilityModel<T> = GridColumnVisibilityModel & {
+  [K in keyof Partial<T>]: boolean
+};
+
+/**
+ * Type-safe sort model
+ *
+ * @public
+ */
+export type TypedSortModel<T> = (GridSortItem & {
+  field: keyof T
+})[];
+
 type CellRendererProps = {
     customType?: CellRendererCustomType,
     value?: any,
@@ -122,7 +155,7 @@ function CellRenderer({
     if (customType === 'enum') {
         const enumLabel = params.enum?.get(value)?.label;
         if (enumLabel) {
-            return <Text {...rest}>{ }</Text>;
+            return <Text {...rest}>{enumLabel}</Text>;
         }
     }
     if (customType === 'actions') {
@@ -229,12 +262,11 @@ function headerRenderer({ colDef }: ExtendedGridRenderHeaderParams) {
  */
 export type UseDataGridProps = {
     columns: ExtendedGridColDef[],
-    onPage: (page: number, sortModel?: GridSortModel) => Promise<{ rows: GridValidRowModel[], totalRowsCount?: number }>,
+    onPage: (page: number, pageSize: number, sortModel?: GridSortModel) => Promise<{ rows: GridValidRowModel[], totalRowsCount?: number }>,
     tableId?: string,
     pageSize?: number,
     columnVisibilityModel?: GridColumnVisibilityModel,
     defaultSort?: GridSortModel,
-    renderCell?: (params: any) => React.ReactElement,
     onRowClick?: any,
     rowHeight?: number,
     selection?: boolean,
@@ -269,7 +301,6 @@ export function useDataGrid({
     columns,
     columnVisibilityModel,
     defaultSort,
-    renderCell,
     onPage,
     onRowClick,
     rowHeight = 40,
@@ -300,7 +331,7 @@ export function useDataGrid({
             setLoading((current) => [...current, page]);
             console.debug('Loading page', page, 'with sort', sortModel);
 
-            const response = await onPage(Math.max(page, 0), sortModel);
+            const response = await onPage(Math.max(page, 0), pageSize, sortModel);
             const pageIndexOrZero = page <= 0 ? 0 : page;
 
             console.debug('Loaded page', page);
@@ -451,7 +482,7 @@ export function useDataGrid({
     const columnsMemo = useMemo(() => columns.map((c) => ({
         ...c,
         cellClassName: () => 'mui-datagrid-cell-narrow-on-mobile',
-        renderCell: renderCell || ((params: ExtendedGridRenderCellParams) => (
+        renderCell: c.renderCell || ((params: ExtendedGridRenderCellParams) => (
             <CellRenderer
                 customType={params.colDef.customType}
                 value={params.value}
@@ -460,9 +491,9 @@ export function useDataGrid({
                 params={params.colDef}
             />
         )),
-        renderHeader: headerRenderer,
+        renderHeader: c.renderHeader || headerRenderer,
         ...resolveCustomTypeOperators(c),
-    })), [columns, renderCell, headerRenderer, rowHeight]);
+    })), [columns, headerRenderer, rowHeight]);
 
     return {
         props: {

packages/react-mui-hooks/package.json

@@ -25,25 +25,23 @@
   "devDependencies": {
     "@enterwell/react-hooks": "workspace:*",
     "@enterwell/react-ui": "workspace:*",
-    "@microsoft/api-extractor": "7.38.3",
-    "@mui/material": "5.14.18",
-    "@mui/x-data-grid": "6.18.2",
-    "@mui/x-data-grid-pro": "6.18.2",
-    "@types/node": "18.18.13",
-    "@types/react": "18.2.39",
+    "@microsoft/api-extractor": "7.38.5",
+    "@mui/material": "5.15.0",
+    "@mui/x-data-grid-pro": "6.18.5",
+    "@types/node": "18.19.3",
+    "@types/react": "18.2.45",
     "@types/react-dom": "18.2.17",
     "date-fns": "2.30.0",
     "eslint-config-custom": "workspace:*",
     "react": "18.2.0",
     "rimraf": "5.0.5",
     "tsconfig": "workspace:*",
     "tsup": "8.0.1",
-    "typescript": "5.3.2"
+    "typescript": "5.3.3"
   },
   "peerDependencies": {
     "@enterwell/react-ui": "workspace:*",
     "@mui/material": "^5",
-    "@mui/x-data-grid": "^6",
     "@mui/x-data-grid-pro": "^6",
     "react": "^18",
     "react-dom": "^18"

packages/react-mui-hooks/temp/react-mui-hooks.api.md

@@ -8,24 +8,50 @@ import { ComponentPropsWithRef } from 'react';
 import { DataGridPro } from '@mui/x-data-grid-pro';
 import { GridColDef } from '@mui/x-data-grid-pro';
 import { GridColumnVisibilityModel } from '@mui/x-data-grid-pro';
+import { GridSortItem } from '@mui/x-data-grid-pro';
 import { GridSortModel } from '@mui/x-data-grid-pro';
 import { GridValidRowModel } from '@mui/x-data-grid-pro';
 
 // @public
-export function useDataGrid({ tableId, pageSize, columns, columnVisibilityModel, defaultSort, renderCell, onPage, onRowClick, rowHeight, selection, checkboxSelection, infiniteLoading, keepNonExistentRowsSelected }: UseDataGridProps): UseDataGridResponse;
+export type ExtendedGridColDef = GridColDef<GridValidRowModel> & {
+    customType?: CellRendererCustomType;
+    enum?: {
+        get: (value: any) => {
+            label: string;
+        } | undefined;
+    };
+    width?: number;
+};
+
+// @public
+export type TypedColVisibilityModel<T> = GridColumnVisibilityModel & {
+    [K in keyof Partial<T>]: boolean;
+};
+
+// @public
+export type TypedExtendedGridColDef<T> = ExtendedGridColDef & {
+    field: keyof T;
+};
+
+// @public
+export type TypedSortModel<T> = (GridSortItem & {
+    field: keyof T;
+})[];
+
+// @public
+export function useDataGrid({ tableId, pageSize, columns, columnVisibilityModel, defaultSort, onPage, onRowClick, rowHeight, selection, checkboxSelection, infiniteLoading, keepNonExistentRowsSelected }: UseDataGridProps): UseDataGridResponse;
 
 // @public
 export type UseDataGridProps = {
     columns: ExtendedGridColDef[];
-    onPage: (page: number, sortModel?: GridSortModel) => Promise<{
+    onPage: (page: number, pageSize: number, sortModel?: GridSortModel) => Promise<{
         rows: GridValidRowModel[];
         totalRowsCount?: number;
     }>;
     tableId?: string;
     pageSize?: number;
     columnVisibilityModel?: GridColumnVisibilityModel;
     defaultSort?: GridSortModel;
-    renderCell?: (params: any) => React.ReactElement;
     onRowClick?: any;
     rowHeight?: number;
     selection?: boolean;
@@ -45,7 +71,7 @@ export type UseDataGridResponse = {
 
 // Warnings were encountered during analysis:
 //
-// dist/index.d.ts:19:5 - (ae-forgotten-export) The symbol "ExtendedGridColDef" needs to be exported by the entry point index.d.ts
+// dist/index.d.ts:11:5 - (ae-forgotten-export) The symbol "CellRendererCustomType" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

packages/react-ui/package.json

@@ -27,22 +27,22 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@enterwell/react-hooks": "workspace:*",
-    "@microsoft/api-extractor": "7.38.3",
-    "@mui/icons-material": "5.14.18",
-    "@mui/material": "5.14.18",
-    "@mui/system": "5.14.18",
+    "@microsoft/api-extractor": "7.38.5",
+    "@mui/icons-material": "5.15.0",
+    "@mui/material": "5.15.0",
+    "@mui/system": "5.15.0",
     "@mui/x-date-pickers-pro": "5.0.20",
     "@mui/x-date-pickers": "5.0.20",
-    "@types/node": "18.18.13",
-    "@types/react": "18.2.39",
+    "@types/node": "18.19.3",
+    "@types/react": "18.2.45",
     "@types/react-dom": "18.2.17",
     "date-fns": "2.30.0",
     "eslint-config-custom": "workspace:*",
     "react": "18.2.0",
     "rimraf": "5.0.5",
     "tsconfig": "workspace:*",
     "tsup": "8.0.1",
-    "typescript": "5.3.2"
+    "typescript": "5.3.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11",