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

2025-12-16 03:37:53 +01:00 · 2022-11-29 16:47:53 +11:00
parent 86f9905600
commit 402334ee20
13 changed files with 11841 additions and 11249 deletions
--- a/.yarn/releases/yarn-1.22.19.cjs
+++ b/.yarn/releases/yarn-1.22.19.cjs
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -0,0 +1 @@
+yarnPath: .yarn/releases/yarn-1.22.19.cjs
--- a/package.json
+++ b/package.json
@@ -8,15 +8,15 @@
  },
  "private": true,
  "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
+    "@emotion/react": "^11.10.5",
+    "@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",
-    "typescript": "^4.6.3",
+    "tss-react": "^4.4.4",
+    "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"
 }
--- a/src/Providers.tsx
+++ b/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 AdapterDateFns from "@mui/lab/AdapterDateFns";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import createCache from "@emotion/cache";
 import { CacheProvider } from "@emotion/react";
 import RowyThemeProvider from "@src/theme/RowyThemeProvider";
--- a/src/components/TableSettingsDialog/TableSettingsDialog.tsx
+++ b/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>);

--- a/src/components/fields/Date/EditorCell.tsx
+++ b/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",
--- a/src/components/fields/Date/SideDrawerField.tsx
+++ b/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 },
--- a/src/components/fields/DateTime/EditorCell.tsx
+++ b/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}
    />
  );
 }
--- a/src/components/fields/DateTime/SideDrawerField.tsx
+++ b/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}
    />
  );
 }
--- a/src/components/fields/Duration/SideDrawerField.tsx
+++ b/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 DateTimeIcon from "@mui/icons-material/AccessTime";
+import { DateTimePicker } from "@mui/x-date-pickers";
+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>
    </>
--- a/src/hooks/useFirestoreCollectionWithAtom.ts
+++ b/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,
--- a/src/theme/components.tsx
+++ b/src/theme/components.tsx
@@ -1402,23 +1402,23 @@ export const components = (theme: Theme): ThemeOptions => {
        },
      },

-      MuiYearPicker: {
-        styleOverrides: {
-          root: {
-            "& .PrivatePickersYear-yearButton": {
-              ...(theme.typography.button as any),
-              fontSize: "1rem",
-            },
-          },
-        },
-      },
-      MuiPickersDay: {
-        styleOverrides: {
-          root: {
-            background: "none",
-          },
-        },
-      },
+      // MuiYearPicker: {
+      //   styleOverrides: {
+      //     root: {
+      //       "& .PrivatePickersYear-yearButton": {
+      //         ...(theme.typography.button as any),
+      //         fontSize: "1rem",
+      //       },
+      //     },
+      //   },
+      // },
+      // MuiPickersDay: {
+      //   styleOverrides: {
+      //     root: {
+      //       background: "none",
+      //     },
+      //   },
+      // },

      RowyMultiSelect: {
        defaultProps: {
--- a/yarn.lock
+++ b/yarn.lock