Updated frontend dependencies

2025-03-28 15:31:28 +01:00 · 2025-03-28 15:31:28 +01:00 · 4f75833414
commit 4f75833414
parent ca6b5d398b
14 changed files with 468 additions and 652 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -24,7 +24,7 @@ steps:
  commands:
  # Build website
  - cd geneit_app
-  - npm install 
+  - npm install --legacy-peer-deps # TODO : remove when mui-color-input is updated
  - GENERATE_SOURCEMAP=false npm run build 
  # Install AWS
  - curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
--- a/geneit_app/package-lock.json
+++ b/geneit_app/package-lock.json
--- a/geneit_app/package.json
+++ b/geneit_app/package.json
@ -7,7 +7,7 @@
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
-    "@fontsource/roboto": "^5.1.0",
+    "@fontsource/roboto": "^5.2.5",
    "@fullcalendar/core": "^6.1.15",
    "@fullcalendar/daygrid": "^6.1.15",
    "@fullcalendar/interaction": "^6.1.15",
@ -15,36 +15,35 @@
    "@fullcalendar/react": "^6.1.15",
    "@mdi/js": "^7.2.96",
    "@mdi/react": "^1.6.1",
-    "@mui/icons-material": "^6.1.2",
-    "@mui/lab": "^6.0.0-beta.10",
-    "@mui/material": "^6.1.2",
-    "@mui/x-data-grid": "^7.18.0",
-    "@mui/x-date-pickers": "^7.18.0",
-    "@mui/x-tree-view": "^7.18.0",
+    "@mui/icons-material": "^7.0.0",
+    "@mui/lab": "^7.0.0-beta.9",
+    "@mui/material": "^7.0.0",
+    "@mui/x-data-grid": "^7.28.2",
+    "@mui/x-date-pickers": "^7.28.2",
+    "@mui/x-tree-view": "^7.28.1",
    "@testing-library/jest-dom": "^6.5.0",
    "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^14.0.0",
+    "@testing-library/user-event": "^14.6.1",
    "@types/jest": "^29.5.13",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react": "^4.3.2",
    "date-and-time": "^3.6.0",
    "dayjs": "^1.11.13",
    "email-validator": "^2.0.4",
    "filesize": "^10.1.6",
-    "jspdf": "^2.5.2",
-    "mui-color-input": "^5.0.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-easy-crop": "^5.0.8",
+    "jspdf": "^3.0.1",
+    "mui-color-input": "^6.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-easy-crop": "^5.4.1",
    "react-qr-code": "^2.0.14",
-    "react-router-dom": "^7.0.0",
-    "react-zoom-pan-pinch": "^3.4.4",
-    "svg2pdf.js": "^2.2.3",
-    "typescript": "^5.6.2",
-    "vite": "^6.0.0",
-    "vite-tsconfig-paths": "^5.0.1",
-    "web-vitals": "^3.5.2"
+    "react-router-dom": "^7.4.0",
+    "react-zoom-pan-pinch": "^3.7.0",
+    "svg2pdf.js": "^2.5.0",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.3",
+    "vite-tsconfig-paths": "^5.0.1"
  },
  "scripts": {
    "start": "vite",
--- a/geneit_app/src/index.tsx
+++ b/geneit_app/src/index.tsx
@ -3,7 +3,6 @@ import ReactDOM from "react-dom/client";
 import { App } from "./App";
 import { ServerApi } from "./api/ServerApi";
 import "./index.css";
-import reportWebVitals from "./reportWebVitals";

 // Roboto font
 import "@fontsource/roboto/300.css";
@ -61,8 +60,3 @@ async function init() {
 }

 init();
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
--- a/geneit_app/src/reportWebVitals.ts
+++ b/geneit_app/src/reportWebVitals.ts
@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;
--- a/geneit_app/src/routes/auth/LoginRoute.tsx
+++ b/geneit_app/src/routes/auth/LoginRoute.tsx
@ -1,4 +1,5 @@
-import { Visibility, VisibilityOff } from "@mui/icons-material";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 import {
  Alert,
  CircularProgress,
@ -11,7 +12,7 @@ import {
 } from "@mui/material";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import Grid from "@mui/material/Grid2";
+import Grid from "@mui/material/Grid";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import * as React from "react";
@ -148,7 +149,7 @@ export function LoginRoute(): React.ReactElement {
                    onMouseDown={handleMouseDownPassword}
                    edge="end"
                  >
-                    {showPassword ? <VisibilityOff /> : <Visibility />}
+                    {showPassword ? <VisibilityOffIcon /> : <VisibilityIcon />}
                  </IconButton>
                </Tooltip>
              </InputAdornment>
--- a/geneit_app/src/routes/family/genealogy/FamilyCoupleRoute.tsx
+++ b/geneit_app/src/routes/family/genealogy/FamilyCoupleRoute.tsx
@ -4,7 +4,7 @@ import EditIcon from "@mui/icons-material/Edit";
 import FileDownloadIcon from "@mui/icons-material/FileDownload";
 import SaveIcon from "@mui/icons-material/Save";
 import { Button, Stack } from "@mui/material";
-import Grid from "@mui/material/Grid2";
+import Grid from "@mui/material/Grid";
 import React from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { ServerApi } from "../../../api/ServerApi";
--- a/geneit_app/src/routes/family/genealogy/FamilyMemberRoute.tsx
+++ b/geneit_app/src/routes/family/genealogy/FamilyMemberRoute.tsx
@ -12,7 +12,7 @@ import {
  ListItemText,
  Stack,
 } from "@mui/material";
-import Grid from "@mui/material/Grid2";
+import Grid from "@mui/material/Grid";
 import * as EmailValidator from "email-validator";
 import React from "react";
 import { useNavigate, useParams } from "react-router-dom";
--- a/geneit_app/src/setupTests.ts
+++ b/geneit_app/src/setupTests.ts
@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
--- a/geneit_app/src/widgets/BaseFamilyRoute.tsx
+++ b/geneit_app/src/widgets/BaseFamilyRoute.tsx
@ -54,7 +54,7 @@ export function BaseFamilyRoute(): React.ReactElement {

  const loadKey = React.useRef(1);

-  const loadPromise = React.useRef<() => void>();
+  const loadPromise = React.useRef<() => void>(null);

  const load = async () => {
    const familyID = Number(familyId);
@ -104,7 +104,7 @@ export function BaseFamilyRoute(): React.ReactElement {
      build={() => {
        if (loadPromise.current != null) {
          loadPromise.current?.();
-          loadPromise.current = undefined;
+          loadPromise.current = null;
        }

        return (
--- a/geneit_app/src/widgets/BaseLoginpage.tsx
+++ b/geneit_app/src/widgets/BaseLoginpage.tsx
@ -3,10 +3,9 @@ import Icon from "@mdi/react";
 import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
 import CssBaseline from "@mui/material/CssBaseline";
-import Grid from "@mui/material/Grid2";
+import Grid from "@mui/material/Grid";
 import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
-import * as React from "react";
 import { Link, Outlet } from "react-router-dom";
 import { DarkThemeButton } from "./DarkThemeButton";

--- a/geneit_app/src/widgets/PasswordInput.tsx
+++ b/geneit_app/src/widgets/PasswordInput.tsx
@ -1,4 +1,5 @@
-import { Visibility, VisibilityOff } from "@mui/icons-material";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 import {
  FormControl,
  FormHelperText,
@ -50,7 +51,7 @@ export function PasswordInput(p: {
              onMouseDown={handleMouseDownPassword}
              edge="end"
            >
-              {showPassword ? <VisibilityOff /> : <Visibility />}
+              {showPassword ? <VisibilityOffIcon /> : <VisibilityIcon />}
            </IconButton>
          </InputAdornment>
        }
--- a/geneit_app/src/widgets/accommodations/BaseAccommodationsRoute.tsx
+++ b/geneit_app/src/widgets/accommodations/BaseAccommodationsRoute.tsx
@ -27,7 +27,7 @@ export function BaseAccommodationsRoute(): React.ReactElement {

  const loadKey = React.useRef(1);

-  const loadPromise = React.useRef<() => void>();
+  const loadPromise = React.useRef<() => void>(null);

  const load = async () => {
    setAccommodations(
@ -53,7 +53,7 @@ export function BaseAccommodationsRoute(): React.ReactElement {
      build={() => {
        if (loadPromise.current != null) {
          loadPromise.current?.();
-          loadPromise.current = undefined;
+          loadPromise.current = null;
        }

        return (
--- a/geneit_app/src/widgets/genealogy/BaseGenealogyRoute.tsx
+++ b/geneit_app/src/widgets/genealogy/BaseGenealogyRoute.tsx
@ -22,7 +22,7 @@ export function BaseGenealogyRoute(): React.ReactElement {

  const loadKey = React.useRef(1);

-  const loadPromise = React.useRef<() => void>();
+  const loadPromise = React.useRef<() => void>(null);

  const load = async () => {
    setMembers(await MemberApi.GetEntireList(family.familyId));
@ -48,7 +48,7 @@ export function BaseGenealogyRoute(): React.ReactElement {
      build={() => {
        if (loadPromise.current != null) {
          loadPromise.current?.();
-          loadPromise.current = undefined;
+          loadPromise.current = null;
        }

        return (