upgrade dependencies, fix node 18 build, migrate date pickers from mui/lab to mui/x

.yarnrc.yml

@@ -0,0 +1 @@
+yarnPath: .yarn/releases/yarn-1.22.19.cjs

package.json

@@ -8,15 +8,15 @@
   },
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.9.0",
+    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.8.1",
+    "@emotion/styled": "^11.10.5",
     "@mdi/js": "^6.6.96",
     "@monaco-editor/react": "^4.4.4",
-    "@mui/icons-material": "5.6.0",
+    "@mui/icons-material": "^5.10.16",
     "@mui/lab": "^5.0.0-alpha.76",
-    "@mui/material": "5.6.0",
+    "@mui/material": "^5.10.16",
     "@mui/x-date-pickers": "^5.0.0-alpha.4",
-    "@rowy/form-builder": "^0.7.0",
+    "@rowy/form-builder": "^0.8.0",
     "@rowy/multiselect": "^0.4.1",
     "@tanstack/react-table": "^8.5.15",
     "@tinymce/tinymce-react": "^3",
@@ -44,14 +44,14 @@
     "path-browserify": "^1.0.1",
     "pb-util": "^1.0.3",
     "quicktype-core": "^6.0.71",
-    "react": "^18.0.0",
+    "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-color-palette": "^6.2.0",
     "react-detect-offline": "^2.4.5",
     "react-div-100vh": "^0.7.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^18.0.0",
+    "react-dom": "^18.2.0",
     "react-dropzone": "^10",
     "react-element-scroll-hook": "^1.1.0",
     "react-error-boundary": "^3.1.4",
@@ -62,7 +62,7 @@
     "react-markdown": "^8.0.3",
     "react-router-dom": "^6.3.0",
     "react-router-hash-link": "^2.4.3",
-    "react-scripts": "^5.0.0",
+    "react-scripts": "^5.0.1",
     "react-usestateref": "^1.0.8",
     "react-virtual": "^2.10.4",
     "remark-gfm": "^3.0.1",
@@ -70,13 +70,14 @@
     "stream-browserify": "^3.0.0",
     "swr": "^1.3.0",
     "tinymce": "^5",
-    "tss-react": "^3.6.2",
+    "tss-react": "^4.4.4",
-    "typescript": "^4.6.3",
+    "typescript": "^4.9.3",
     "use-algolia": "^1.5.3",
     "use-async-memo": "^1.2.4",
     "use-debounce": "^8.0.0",
     "use-memo-value": "^1.0.1",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "workbox-webpack-plugin": "^6.5.4"
   },
   "scripts": {
     "start": "cross-env PORT=7699 craco start",
@@ -92,7 +93,7 @@
     "typedoc": "typedoc --options typedoc.json"
   },
   "engines": {
-    "node": "^16"
+    "node": ">=16"
   },
   "eslintConfig": {
     "plugins": [
@@ -156,21 +157,22 @@
     "@types/json2csv": "^5.0.3",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^17.0.23",
-    "@types/react": "^18.0.5",
+    "@types/react": "^18.0.25",
     "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-detect-offline": "^2.4.1",
     "@types/react-div-100vh": "^0.4.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react-dom": "^18.0.9",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-router-hash-link": "^2.4.5",
     "@types/seedrandom": "^3.0.2",
-    "@typescript-eslint/parser": "^5.18.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
     "craco-alias": "^3.0.1",
     "craco-swc": "^0.5.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.12.0",
+    "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-config-react-app": "^7.0.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-local-rules": "^1.1.0",
     "eslint-plugin-no-relative-import-paths": "^1.2.0",
     "eslint-plugin-tsdoc": "^0.2.16",
@@ -189,5 +191,6 @@
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --cache --fix",
     "**/*": "prettier --write --ignore-unknown"
-  }
+  },
+  "packageManager": "yarn@1.22.19"
 }

src/Providers.tsx

@@ -6,8 +6,8 @@ import { HelmetProvider } from "react-helmet-async";
 import { Provider as JotaiProvider, Atom } from "jotai";
 import { projectScope } from "@src/atoms/projectScope";
 import { DebugAtoms } from "@src/atoms/utils";
-import LocalizationProvider from "@mui/lab/LocalizationProvider";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-import AdapterDateFns from "@mui/lab/AdapterDateFns";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import createCache from "@emotion/cache";
 import { CacheProvider } from "@emotion/react";
 import RowyThemeProvider from "@src/theme/RowyThemeProvider";

src/components/TableSettingsDialog/TableSettingsDialog.tsx

@@ -184,18 +184,20 @@ export default function TableSettingsDialog() {
           handleCancel: async () => {
             let _schema: Record<string, any> = {};
             if (hasExtensions) {
-              _schema.extensionObjects = get(
+              _schema.extensionObjects = (
+                get(
                   data,
                   "_schema.extensionObjects"
                   // TODO: types
-              )!.map((x: any) => ({
+                ) ?? []
+              ).map((x: any) => ({
                 ...x,
                 active: false,
               }));
             }
             if (hasWebhooks) {
               // TODO: types
-              _schema.webhooks = get(data, "_schema.webhooks")!.map(
+              _schema.webhooks = (get(data, "_schema.webhooks") ?? []).map(
                 (x: any) => ({
                   ...x,
                   active: false,
@@ -272,7 +274,7 @@ export default function TableSettingsDialog() {
         ).reduce((acc, [name, err]) => {
           const match = find(fields, ["name", name])?.step;
           if (!match) return acc;
-          acc[match] = err.message;
+          acc[match] = (err?.message as string) ?? "";
           return acc;
         }, {} as Record<string, string>);
 

src/components/fields/Date/EditorCell.tsx

@@ -1,7 +1,7 @@
 import { useDebouncedCallback } from "use-debounce";
 import { IEditorCellProps } from "@src/components/fields/types";
 
-import DatePicker from "@mui/lab/DatePicker";
+import { DatePicker } from "@mui/x-date-pickers";
 import { TextField } from "@mui/material";
 import { ChevronDown } from "@src/assets/icons";
 
@@ -63,6 +63,8 @@ export default function Date_({
             },
             "& .MuiInputAdornment-root": { m: 0 },
           }}
+          autoFocus
+          onKeyDown={(e) => e.stopPropagation()}
           onClick={(e) => e.stopPropagation()}
           inputProps={{ ...props.inputProps, tabIndex }}
         />
@@ -72,7 +74,6 @@ export default function Date_({
       onChange={handleDateChange}
       inputFormat={format}
       mask={format.replace(/[A-Za-z]/g, "_")}
-      clearable
       OpenPickerButtonProps={{
         size: "small",
         className: "row-hover-iconButton end",

src/components/fields/Date/SideDrawerField.tsx

@@ -1,6 +1,6 @@
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
-import DatePicker from "@mui/lab/DatePicker";
+import { DatePicker } from "@mui/x-date-pickers";
 import { TextField } from "@mui/material";
 import { ChevronDown } from "@src/assets/icons";
 
@@ -52,7 +52,6 @@ export default function Date_({
       onAccept={onSubmit}
       inputFormat={format}
       mask={format.replace(/[A-Za-z]/g, "_")}
-      clearable
       OpenPickerButtonProps={{
         size: "small",
         sx: { width: 32, height: 32 },

src/components/fields/DateTime/EditorCell.tsx

@@ -2,7 +2,7 @@ import { useDebouncedCallback } from "use-debounce";
 import { IEditorCellProps } from "@src/components/fields/types";
 import { setSeconds } from "date-fns";
 
-import DateTimePicker from "@mui/lab/DateTimePicker";
+import { DateTimePicker } from "@mui/x-date-pickers";
 import { TextField } from "@mui/material";
 import { ChevronDown } from "@src/assets/icons";
 
@@ -68,6 +68,7 @@ export default function DateTime({
             },
             "& .MuiInputAdornment-root": { m: 0 },
           }}
+          autoFocus
           onKeyDown={(e) => e.stopPropagation()}
           onClick={(e) => e.stopPropagation()}
           inputProps={{ ...props.inputProps, tabIndex }}
@@ -77,7 +78,6 @@ export default function DateTime({
       value={transformedValue}
       onChange={(date) => handleDateChange(date ? setSeconds(date, 0) : null)}
       inputFormat={format}
-      clearable
       OpenPickerButtonProps={{
         size: "small",
         className: "row-hover-iconButton end",
@@ -88,6 +88,7 @@ export default function DateTime({
       disableOpenPicker={false}
       disabled={disabled}
       PopperProps={{ onClick: (e) => e.stopPropagation() }}
+      hideTabs={false}
     />
   );
 }

src/components/fields/DateTime/SideDrawerField.tsx

@@ -1,7 +1,7 @@
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 import { setSeconds } from "date-fns";
 
-import DateTimePicker from "@mui/lab/DateTimePicker";
+import { DateTimePicker } from "@mui/x-date-pickers";
 import { TextField } from "@mui/material";
 import { ChevronDown } from "@src/assets/icons";
 
@@ -52,11 +52,10 @@ export default function DateTime({
       )}
       label={column.name}
       value={transformedValue}
-      onChange={(date) => handleChange(date ? setSeconds(date, 0) : null)}
+      onChange={(date: any) => handleChange(date ? setSeconds(date, 0) : null)}
       onAccept={onSubmit}
       inputFormat={format}
       mask={format.replace(/[A-Za-z]/g, "_")}
-      clearable
       OpenPickerButtonProps={{
         size: "small",
         sx: { width: 32, height: 32 },
@@ -64,6 +63,7 @@ export default function DateTime({
       components={{ OpenPickerIcon: ChevronDown }}
       disableOpenPicker={false}
       disabled={disabled}
+      hideTabs={false}
     />
   );
 }

src/components/fields/Duration/SideDrawerField.tsx

@@ -1,8 +1,8 @@
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
 import { Box, Stack, TextField } from "@mui/material";
-import DatePicker from "@mui/lab/DatePicker";
+import { DateTimePicker } from "@mui/x-date-pickers";
-import DateTimeIcon from "@mui/icons-material/AccessTime";
+import { ChevronDown } from "@src/assets/icons";
 
 import { fieldSx, getFieldId } from "@src/components/SideDrawer/utils";
 import { getDurationString } from "./utils";
@@ -42,7 +42,7 @@ export default function Duration({
       </Box>
 
       <Stack direction="row" spacing={1} sx={{ mt: 0.5 }}>
-        <DatePicker
+        <DateTimePicker
           renderInput={(props) => (
             <TextField
               {...props}
@@ -50,12 +50,6 @@ export default function Duration({
               fullWidth
               hiddenLabel
               aria-label={column.name as string}
-              InputProps={{
-                ...props.InputProps,
-                endAdornment: props.InputProps?.endAdornment || (
-                  <DateTimeIcon color="action" />
-                ),
-              }}
               sx={{
                 "& .MuiInputBase-input": { fontVariantNumeric: "tabular-nums" },
                 "& .MuiInputAdornment-root": { m: 0 },
@@ -71,15 +65,14 @@ export default function Duration({
           onAccept={onSubmit}
           inputFormat={format}
           mask={format.replace(/[A-Za-z]/g, "_")}
-          clearable
           OpenPickerButtonProps={{ size: "small" }}
-          components={{ OpenPickerIcon: DateTimeIcon }}
+          components={{ OpenPickerIcon: ChevronDown }}
           disableOpenPicker={false}
-          showToolbar
           disabled={disabled}
+          hideTabs={false}
         />
 
-        <DatePicker
+        <DateTimePicker
           renderInput={(props) => (
             <TextField
               {...props}
@@ -87,12 +80,6 @@ export default function Duration({
               label="End"
               hiddenLabel
               aria-label={column.name as string}
-              InputProps={{
-                ...props.InputProps,
-                endAdornment: props.InputProps?.endAdornment || (
-                  <DateTimeIcon color="action" />
-                ),
-              }}
               sx={{
                 "& .MuiInputBase-input": { fontVariantNumeric: "tabular-nums" },
                 "& .MuiInputAdornment-root": { m: 0 },
@@ -108,12 +95,11 @@ export default function Duration({
           onAccept={onSubmit}
           inputFormat={format}
           mask={format.replace(/[A-Za-z]/g, "_")}
-          clearable
           OpenPickerButtonProps={{ size: "small" }}
-          components={{ OpenPickerIcon: DateTimeIcon }}
+          components={{ OpenPickerIcon: ChevronDown }}
           disableOpenPicker={false}
-          showToolbar
           disabled={disabled}
+          hideTabs={false}
         />
       </Stack>
     </>

src/hooks/useFirestoreCollectionWithAtom.ts

@@ -23,6 +23,7 @@ import {
   WhereFilterOp,
   documentId,
   getCountFromServer,
+  DocumentData,
 } from "firebase/firestore";
 import { useErrorHandler } from "react-error-boundary";
 
@@ -77,7 +78,9 @@ interface IUseFirestoreCollectionWithAtomOptions<T> {
  * @param path - Collection path. If falsy, the listener isn’t created at all.
  * @param options - {@link IUseFirestoreCollectionWithAtomOptions}
  */
-export function useFirestoreCollectionWithAtom<T = TableRow>(
+export function useFirestoreCollectionWithAtom<
+  T extends DocumentData = TableRow
+>(
   dataAtom: PrimitiveAtom<T[]>,
   dataScope: Parameters<typeof useAtom>[1] | undefined,
   path: string | undefined,

src/theme/components.tsx

@@ -1402,23 +1402,23 @@ export const components = (theme: Theme): ThemeOptions => {
         },
       },
 
-      MuiYearPicker: {
+      // MuiYearPicker: {
-        styleOverrides: {
+      //   styleOverrides: {
-          root: {
+      //     root: {
-            "& .PrivatePickersYear-yearButton": {
+      //       "& .PrivatePickersYear-yearButton": {
-              ...(theme.typography.button as any),
+      //         ...(theme.typography.button as any),
-              fontSize: "1rem",
+      //         fontSize: "1rem",
-            },
+      //       },
-          },
+      //     },
-        },
+      //   },
-      },
+      // },
-      MuiPickersDay: {
+      // MuiPickersDay: {
-        styleOverrides: {
+      //   styleOverrides: {
-          root: {
+      //     root: {
-            background: "none",
+      //       background: "none",
-          },
+      //     },
-        },
+      //   },
-      },
+      // },
 
       RowyMultiSelect: {
         defaultProps: {