Update and upgrade dependencies

.github/workflows/ci.yml

@@ -192,7 +192,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '16.17.0'
+          node-version: '22.13.1'
       - name: Install dependencies 🖥
         run: npm install
       - name: Lint ui/src ✔️

ui/jest.config.js

@@ -9,7 +9,7 @@ module.exports = {
   ],
   coverageDirectory: '<rootDir>/../coverage',
   moduleNameMapper: {
-    '\\.(css|less|scss)$': '<rootDir>/support/style-mock.ts',
+    '\\.(css|less|scss)(\\?inline)?$': '<rootDir>/support/style-mock.ts',
     '^support/(.*)$': '<rootDir>/support/$1',
     '^components/(.*)$': '<rootDir>/components/$1',
     '^interfaces/(.*)$': '<rootDir>/interfaces/$1',

ui/package.json

@@ -13,53 +13,53 @@
     "lint": "eslint src"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.4",
-    "@floating-ui/dom": "^1.0.2",
-    "@floating-ui/react-dom": "^1.0.0",
-    "@floating-ui/react-dom-interactions": "^0.10.1",
-    "@tanstack/react-query": "^4.2.3",
-    "@tanstack/react-query-devtools": "^4.24.12",
-    "@tanstack/react-table": "^8.8.5",
-    "@tanstack/react-virtual": "^3.0.0-beta.54",
-    "@types/lodash.isequal": "^4.5.6",
-    "@types/react-window": "^1.8.5",
-    "@types/semver": "^7.5.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@floating-ui/dom": "^1.6.13",
+    "@floating-ui/react-dom": "^1.3.0",
+    "@floating-ui/react-dom-interactions": "^0.10.3",
+    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-query-devtools": "^4.36.1",
+    "@tanstack/react-table": "^8.20.6",
+    "@tanstack/react-virtual": "^3.12.0",
+    "@types/lodash.isequal": "^4.5.8",
+    "@types/react-window": "^1.8.8",
+    "@types/semver": "^7.5.8",
     "clsx": "^1.2.1",
-    "framer-motion": "^10.16.4",
+    "framer-motion": "^10.18.0",
     "is-url": "^1.2.4",
     "lodash.isequal": "^4.5.0",
     "monaco-editor": "^0.44.0",
     "normalize.css": "^8.0.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.43.2",
-    "react-router-dom": "^6.10.0",
-    "react-window": "^1.8.8",
-    "semver": "^7.5.3",
-    "usehooks-ts": "^2.9.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.54.2",
+    "react-router-dom": "^6.29.0",
+    "react-window": "^1.8.11",
+    "semver": "^7.7.1",
+    "usehooks-ts": "^2.16.0",
     "yup": "^0.32.11",
-    "zustand": "^4.1.1"
+    "zustand": "^4.5.6"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/is-url": "^1.2.30",
-    "@types/jest": "^28.1.7",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^6.11.0",
-    "@typescript-eslint/parser": "^6.11.0",
-    "@vitejs/plugin-react": "^2.1.0",
-    "eslint": "^8.24.0",
-    "eslint-plugin-react": "^7.32.2",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
-    "ts-jest": "^28.0.8",
-    "typescript": "^5.2.2",
-    "vite": "^3.2.7",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/is-url": "^1.2.32",
+    "@types/jest": "^28.1.8",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "eslint": "^8.57.1",
+    "eslint-plugin-react": "^7.37.4",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "ts-jest": "^29.2.5",
+    "typescript": "^5.7.3",
+    "vite": "^5.4.14",
     "vite-plugin-environment": "^1.1.3",
-    "vite-tsconfig-paths": "^4.2.0"
+    "vite-tsconfig-paths": "^4.3.2"
   }
 }

ui/src/components/common/TextField/TextField.tsx

@@ -32,9 +32,9 @@ const sharedStyles = ({ theme, inputSize, hasError }: { theme: Theme } & InputCo
 
 const InputComponent = styled.input<InputComponentProps>(sharedStyles)
 
-const Box = styled.div(() => ({
+const Box = styled.div({
   position: 'relative'
-}))
+})
 
 interface LabelProps {
   lifted: boolean,

ui/src/global-styles.ts

@@ -1,5 +1,5 @@
 import { css, Theme } from '@emotion/react'
-import normalize from 'normalize.css'
+import normalize from 'normalize.css?inline'
 import { ThemeMode } from './shared/types'
 // import prism from './styling/prism.css' TODO: include it when JSON editor is ready
 

ui/src/stores/auth.ts

@@ -1,4 +1,4 @@
-import create from 'zustand'
+import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 import { STORAGE_KEYS } from '../services/storage'
 

ui/src/stores/incarnations-operations.ts

@@ -1,5 +1,5 @@
 import { Incarnation } from 'interfaces/incarnations.types'
-import create from 'zustand'
+import { create } from 'zustand'
 
 interface IncarnationsOperationsStore {
   selectedIncarnations: Incarnation[]

ui/src/stores/incarnations-sort.ts

@@ -1,4 +1,4 @@
-import create from 'zustand'
+import { create } from 'zustand'
 
 interface IncarnationsSortStore {
   sort: string,

ui/src/stores/show-status.ts

@@ -1,4 +1,4 @@
-import create from 'zustand'
+import { create } from 'zustand'
 
 interface CanShowVersionStore {
   canShow: boolean,

ui/src/stores/table-settings.ts

@@ -1,4 +1,4 @@
-import create from 'zustand'
+import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 import { INCARNATION_TABLE_COLUMNS, IncarnationTableColumn } from '../constants/incarnations.consts'
 import { IncarnationBase } from '../interfaces/incarnations.types'

ui/src/stores/theme-mode.ts

@@ -1,4 +1,4 @@
-import create from 'zustand'
+import { create } from 'zustand'
 import { persist, devtools } from 'zustand/middleware'
 import { STORAGE_KEYS } from '../services/storage'
 import { ThemeMode } from '../shared/types'

ui/src/stores/toolbar-search.ts

@@ -1,4 +1,4 @@
-import create from 'zustand'
+import { create } from 'zustand'
 
 interface ToolbarSearchStore {
   search: string,

ui/src/support/setup-tests.tsx

@@ -1,5 +1,5 @@
-import '@testing-library/jest-dom/extend-expect'
-import React, { ReactElement } from 'react'
+import '@testing-library/jest-dom'
+import React, { ReactElement, act } from 'react'
 import { render, RenderOptions } from '@testing-library/react'
 import { ThemeProvider } from '@emotion/react'
 import { THEMES } from '../styling/themes'
@@ -14,4 +14,5 @@ const customRender = (
 ) => render(ui, { wrapper: AllTheProviders, ...options })
 
 export * from '@testing-library/react'
+export { act }
 export { customRender as render }