Merge pull request #124 from jdeniau/upgrade-deps

upgrade react, i18next, TS, etc.

package.json

@@ -40,18 +40,18 @@
     ]
   },
   "dependencies": {
-    "antd": "^5.14.1",
+    "antd": "^5.21.3",
     "electron-log": "^5.2.0",
     "electron-squirrel-startup": "^1.0.0",
     "fuse.js": "^7.0.0",
-    "i18next": "^23.10.0",
+    "i18next": "^23.15.2",
     "monaco-editor": "^0.47.0",
     "mysql": "^2.18.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-i18next": "^14.0.5",
-    "react-router": "^6.22.1",
-    "styled-components": "^6.1.8",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^15.0.2",
+    "react-router": "^6.26.2",
+    "styled-components": "^6.1.13",
     "tiny-invariant": "^1.3.3",
     "update-electron-app": "^3.0.0"
   },
@@ -73,30 +73,30 @@
     "@storybook/react": "^8.3.5",
     "@storybook/react-vite": "^8.3.5",
     "@storybook/test": "^8.3.5",
-    "@types/mysql": "^2.15.25",
-    "@types/node": "^20.11.19",
-    "@types/react": "^18.2.57",
-    "@types/react-dom": "^18.2.19",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
+    "@types/mysql": "^2.15.26",
+    "@types/node": "^20.16.11",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react": "^4.3.2",
     "chromatic": "^11.0.0",
     "electron": "^32.1.2",
     "electron-devtools-installer": "^3.2.0",
-    "eslint": "^8.56.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint": "^8.57.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.9.0",
     "husky": "^9.0.11",
     "jsdom": "^25.0.1",
     "lint-staged": "^15.2.2",
-    "mysql2": "^3.9.8",
+    "mysql2": "^3.11.3",
     "prettier": "^3.3.2",
-    "react-router-dom": "^6.22.1",
+    "react-router-dom": "^6.26.2",
     "storybook": "^8.3.5",
     "ts-node": "^10.9.2",
-    "typescript": "~5.3.3",
+    "typescript": "~5.6.3",
     "vitest": "^2.1.2"
   },
   "packageManager": "[email protected]"

src/renderer/component/ButtonLink.tsx

@@ -13,7 +13,7 @@ type Props = LinkProps & BaseButtonProps;
 const ButtonLink = forwardRef(
   (
     { onClick, replace = false, state, target, to, ...rest }: Props,
-    ref: Ref<HTMLElement>
+    ref: Ref<HTMLButtonElement>
   ) => {
     const href = useHref(to);
     const handleClick = useLinkClickHandler(to, {

src/renderer/component/Connection/ConnectionPage.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import { Flex } from 'antd';
 import { Navigate } from 'react-router-dom';
 import { EncryptedConnectionObject } from '../../../configuration/type';

src/renderer/component/ForeignKeyLink.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import { Link } from 'react-router-dom';
 import { styled } from 'styled-components';
 import { useConnectionContext } from '../../contexts/ConnectionContext';

src/renderer/component/KeyboardShortcut.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type JSX, ReactNode } from 'react';
 import { Tooltip } from 'antd';
 import { styled } from 'styled-components';
 

src/renderer/component/NavigateModal/NavigateModal.tsx

@@ -10,7 +10,7 @@ export type NavigationItem = {
   key: string;
   name: string;
   link: string;
-  Icon: ReactElement;
+  Icon: React.ElementType;
 };
 
 type Props = {
@@ -147,7 +147,7 @@ export default function NavigateModal({
                 navigateToItem(item);
               }}
             >
-              {item.Icon} {item.name}
+              <item.Icon /> {item.name}
             </ItemListWithHover>
           )}
         />

src/renderer/component/NavigateModal/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { type JSX, useMemo } from 'react';
 import { DatabaseOutlined, TableOutlined } from '@ant-design/icons';
 import { useConnectionContext } from '../../../contexts/ConnectionContext';
 import { useDatabaseContext } from '../../../contexts/DatabaseContext';
@@ -23,13 +23,13 @@ export default function NavigateModalContainer(props: Props): JSX.Element {
         key: `Table-${table.Name}`,
         name: table.Name,
         link: `/connections/${currentConnectionSlug}/${database}/tables/${table.Name}`,
-        Icon: <TableOutlined />,
+        Icon: TableOutlined,
       })),
       ...databaseList.map((showDatabase) => ({
         key: `Database-${showDatabase.Database}`,
         name: showDatabase.Database,
         link: `/connections/${currentConnectionSlug}/${showDatabase.Database}`,
-        Icon: <DatabaseOutlined />,
+        Icon: DatabaseOutlined,
       })),
     ],
     [currentConnectionSlug, database, databaseList, tableStatusList]

src/renderer/component/TableLayout/useTableHeight.tsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 
 export function useTableHeight(): [number, React.RefObject<HTMLDivElement>] {
   const [yTableScroll, setYTableScroll] = useState<number>(0);
-  const resizeRef = useRef<HTMLDivElement | null>(null);
+  const resizeRef = useRef<HTMLDivElement>(null);
 
   const resizeObserver = useMemo(
     () =>

src/renderer/hooks/useEffectOnce.tsx

@@ -6,7 +6,7 @@ import { useEffect, useRef, useState } from 'react';
  * Used only for navigation and callback registering. Do not use elsewhere.
  */
 export default function useEffectOnce(effect: () => void | (() => void)) {
-  const destroyFunc = useRef<void | (() => void)>();
+  const destroyFunc = useRef<void | (() => void)>(undefined);
   const effectCalled = useRef(false);
   const renderAfterCalled = useRef(false);
   const [_val, setVal] = useState<number>(0);

src/renderer/useNavigationListener.tsx

@@ -1,4 +1,5 @@
 import {
+  type JSX,
   ReactNode,
   createContext,
   useContext,