bump antd and typescript, and update build tools and components to wo… (

#609) * bump antd and typescript, and update build tools and components to work with new versions * consolidate ts.config
simularium · Nov 18, 2024 · 8cbde6c · 8cbde6c
1 parent 696f7bd
commit 8cbde6c
Show file tree

Hide file tree

Showing 14 changed files with 2,842 additions and 3,698 deletions.
diff --git a/.babelrc b/.babelrc
@@ -13,7 +13,7 @@
   ],
   "presets": [
     "@babel/preset-react",
-    ["@babel/preset-env", { "modules": false }],
+    ["@babel/preset-env", { "modules": "auto" }],
     "@babel/preset-typescript"
   ],
   "env": {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
         "@types/jest": "^26.0.24",
         "@types/jsdom": "12.2.2",
         "@types/lodash": "4.14.121",
+        "@types/node": "^22.8.4",
         "@types/react": "^18.2.39",
         "@types/react-dom": "^18.2.17",
         "@types/react-plotly.js": "^2.2.4",
@@ -85,7 +86,7 @@
         "style-loader": "3.3.1",
         "ts-jest": "^29.0.3",
         "ts-node": "10.9.1",
-        "typescript": "4.5",
+        "typescript": "5.6.3",
         "typescript-plugin-css-modules": "5.0.0",
         "url-loader": "^4.1.1",
         "webpack": "^5.94.0",
@@ -97,7 +98,7 @@
         "@aics/simularium-viewer": "^3.8.4",
         "@ant-design/css-animation": "^1.7.3",
         "@ant-design/icons": "^4.0.6",
-        "antd": "^4.23.6",
+        "antd": "^5.21.6",
         "axios": "^1.7.4",
         "bowser": "^2.11.0",
         "classnames": "2.2.5",
@@ -121,11 +122,5 @@
         "reselect": "4.0.0",
         "use-debounce": "^9.0.4",
         "uuid": "^9.0.1"
-    },
-    "resolutions": {
-        "react": "^16",
-        "react-dom": "^16",
-        "@types/react": "^16",
-        "@types/react-dom": "^16"
     }
 }
diff --git a/src/components/AgentTreeSubmenu/index.tsx b/src/components/AgentTreeSubmenu/index.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import { Checkbox as AntdCheckbox } from "antd";
 import { map, noop } from "lodash";
 import { CheckboxChangeEvent, CheckboxOptionType } from "antd/lib/checkbox";
-import { CheckboxValueType } from "antd/lib/checkbox/Group";
 const CheckboxGroup = AntdCheckbox.Group;
 
 import Checkbox from "../Checkbox";
@@ -11,7 +10,7 @@ import { CHECKBOX_TYPE_STAR } from "../../constants";
 interface AgentTreeSubmenuProps {
     checkedAgents: string[];
     options: CheckboxOptionType[];
-    onChange: (values: CheckboxValueType[]) => void;
+    onChange: (values: string[]) => void;
     checkboxType?: CHECKBOX_TYPE_STAR;
 }
 import styles from "./style.css";

diff --git a/src/components/ErrorNotification/index.tsx b/src/components/ErrorNotification/index.tsx
@@ -40,14 +40,13 @@ const ErrorNotification = ({
 
     return notification[level]({
         message: convertToSentenceCase(message),
-        description:
-            (
-                <div
-                    dangerouslySetInnerHTML={{
-                        __html: htmlData as string,
-                    }}
-                />
-            ) || "",
+        description: (
+            <div
+                dangerouslySetInnerHTML={{
+                    __html: htmlData as string,
+                }}
+            />
+        ),
         duration: getDuration(),
         onClose: onClose,
     });

diff --git a/src/components/NavButtonWithTooltip/index.tsx b/src/components/NavButtonWithTooltip/index.tsx
@@ -64,7 +64,7 @@ const NavButtonWithTooltip: React.FC<NavButtonWithTooltipProps> = ({
             title={tooltipRenderText}
             color={TOOLTIP_COLOR}
             mouseEnterDelay={TOOLTIP_DELAY}
-            arrowPointAtCenter={true}
+            arrow={{ pointAtCenter: true }}
             align={{ targetOffset: NAV_BAR_TOOLTIP_OFFSET }}
             trigger={["hover", "focus"]}
             open={tooltipVisible}

diff --git a/src/index.tsx b/src/index.tsx
@@ -2,7 +2,7 @@ import "core-js/es6/map";
 import "core-js/es6/promise";
 import "core-js/es6/set";
 
-import React from "react";
+import React, { useEffect } from "react";
 import { createRoot } from "react-dom/client";
 import { Provider, useDispatch, batch } from "react-redux";
 import { Layout } from "antd";
@@ -31,7 +31,7 @@ function useLocationChange() {
     const location = useLocation() as LocationWithState;
     const dispatch = useDispatch();
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (
             location.pathname !== VIEWER_PATHNAME &&
             location.pathname !== EMBED_PATHNAME

diff --git a/src/state/trajectory/logics.ts b/src/state/trajectory/logics.ts
@@ -641,10 +641,11 @@ const cancelConversionLogic = createLogic({
 });
 
 const setInitialSelectedUIData = createLogic({
-    process(deps: ReduxLogicDeps, dispatch) {
+    process(deps: ReduxLogicDeps, dispatch, done) {
         const { action } = deps;
         const uiData = action.payload;
         dispatch(setSelectedUIDisplayData(uiData));
+        done();
     },
     type: SET_DEFAULT_UI_DATA,
 });

diff --git a/src/util/index.ts b/src/util/index.ts
@@ -1,23 +1,6 @@
-import { forOwn, isFunction } from "lodash";
-import React from "react";
 import { IconGlyphs } from "../constants/interfaces";
 import { UIDisplayData } from "@aics/simularium-viewer";
 
-type AnyFunction = () => any;
-
-export function bindAll<T extends React.Component>(
-    obj: T,
-    methods: AnyFunction[]
-) {
-    const setOfMethods = new Set(methods);
-
-    forOwn(obj.constructor.prototype, (value, key) => {
-        if (setOfMethods.has(value) && isFunction(value)) {
-            Object.assign(obj, { [key]: value.bind(obj) });
-        }
-    });
-}
-
 export function convertToSentenceCase(string: string): string {
     if (!string) {
         return "";

diff --git a/src/util/test/index.test.ts b/src/util/test/index.test.ts
@@ -1,12 +1,9 @@
-import * as React from "react";
-
 import {
     URL_PARAM_KEY_FILE_NAME,
     URL_PARAM_KEY_USER_URL,
     USER_TRAJ_REDIRECTS,
 } from "../../constants";
 import {
-    bindAll,
     convertToSentenceCase,
     roundTimeForDisplay,
     wrapText,
@@ -34,52 +31,6 @@ import { UIDisplayData } from "@aics/simularium-viewer";
 
 process.env.GOOGLE_API_KEY = "key";
 describe("General utilities", () => {
-    describe("bindAll", () => {
-        it("binds class methods to a class", () => {
-            class Foo extends React.Component {
-                private message = "Hello from Foo";
-
-                constructor(props: any) {
-                    super(props);
-                    bindAll(this, [this.bar]);
-                }
-
-                public bar() {
-                    return this.message;
-                }
-            }
-
-            const foo = new Foo({});
-            const bar = foo.bar;
-            expect(foo.bar()).toBe(bar());
-        });
-
-        it("does not bind a method that it was not asked to bind", () => {
-            class Foo extends React.Component {
-                private message = "Hello from Foo";
-
-                constructor(props: Record<string, never>) {
-                    super(props);
-                    bindAll(this, [this.bar]);
-                }
-
-                public bar() {
-                    return this.message;
-                }
-
-                public baz() {
-                    return this.message;
-                }
-            }
-
-            const foo = new Foo({});
-            const baz = foo.baz;
-
-            expect(foo.baz()).toBe("Hello from Foo");
-            expect(baz).toThrowError(TypeError);
-        });
-    });
-
     describe("toSentenceCase", () => {
         it("returns an empty string as is", () => {
             const startingString = "";

diff --git a/tsconfig.base.json b/tsconfig.base.json
diff --git a/tsconfig.commonjs.json b/tsconfig.commonjs.json
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,8 +1,27 @@
 {
-  "extends": "./tsconfig.base",
   "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "downlevelIteration": true,
+    "jsx": "react",
+    "lib": ["DOM", "ES2015", "ES6", "DOM.Iterable", "ScriptHost"],
+    "moduleResolution": "Node",
+    "skipLibCheck": true,
+    "noEmit": true,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "strict": true,
     "module": "ES6",
     "resolveJsonModule": true,
-    "esModuleInterop": true
-  }
+    "esModuleInterop": true,
+    "plugins": [
+      {
+        "name": "typescript-plugin-css-modules",
+
+      }
+    ]
+  },
+  "include": [
+    "src/**/*"
+  ]
 }
diff --git a/webpack/webpack.config.js b/webpack/webpack.config.js
@@ -1,10 +1,6 @@
 const path = require("path");
 const fs = require("fs");
 
-const lessToJs = require("less-vars-to-js");
-const themeVariables = lessToJs(
-    fs.readFileSync(path.join(__dirname, "../src/styles/ant-vars.less"), "utf8")
-);
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 const { devServer, Env, stats } = require("./constants");
@@ -104,24 +100,6 @@ module.exports = ({ analyze, env, dest = "dist" } = {}) => ({
                     },
                 ],
             },
-            {
-                test: /\.less$/,
-                use: [
-                    { loader: MiniCssExtractPlugin.loader },
-                    {
-                        loader: "css-loader",
-                    },
-                    {
-                        loader: "less-loader",
-                        options: {
-                            lessOptions: {
-                                javascriptEnabled: true,
-                                modifyVars: themeVariables,
-                            },
-                        },
-                    },
-                ],
-            },
             {
                 test: /\.(eot|woff|woff2)([\?]?.*)$/,
                 include: [path.resolve(__dirname, "../src/assets/fonts")],