Updated client dependencies

2025-02-24 21:46:56 +01:00
parent 3a44a01467
commit cd274a9968
21 changed files with 1139 additions and 989 deletions
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/client/package.json
@@ -7,52 +7,52 @@
  "private": true,
  "type": "module",
  "dependencies": {
-    "@ant-design/icons": "^5.5.1",
+    "@ant-design/icons": "^5.6.1",
    "@loadable/component": "^5.16.4",
-    "@refinedev/antd": "^5.44.0",
-    "@refinedev/core": "^4.56.0",
-    "@refinedev/kbar": "^1.3.12",
-    "@refinedev/react-router-v6": "^4.6.0",
-    "@refinedev/simple-rest": "^5.0.8",
+    "@refinedev/antd": "^5.45.1",
+    "@refinedev/core": "^4.57.5",
+    "@refinedev/kbar": "^1.3.14",
+    "@refinedev/react-router": "^1.0.1",
+    "@refinedev/simple-rest": "^5.0.10",
    "@tanstack/react-query": "^4.36.1",
    "@tanstack/react-query-devtools": "^4.36.1",
    "@types/loadable__component": "^5.13.9",
-    "@types/lodash": "^4.17.13",
+    "@types/lodash": "^4.17.15",
    "@types/uuid": "^10.0.0",
    "@yudiel/react-qr-scanner": "^1.2.10",
-    "antd": "^5.22.1",
-    "axios": "^1.7.7",
-    "flag-icons": "^7.2.3",
-    "html-to-image": "^1.11.11",
-    "i18next": "^23.16.6",
-    "i18next-browser-languagedetector": "^8.0.0",
-    "i18next-http-backend": "^2.6.2",
+    "antd": "^5.24.2",
+    "axios": "^1.7.9",
+    "flag-icons": "^7.3.2",
+    "html-to-image": "^1.11.13",
+    "i18next": "^24.2.2",
+    "i18next-browser-languagedetector": "^8.0.4",
+    "i18next-http-backend": "^3.0.2",
    "lodash": "^4.17.21",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^18.3.1",
-    "react-i18next": "^15.1.1",
-    "react-router-dom": "^6.28.0",
-    "react-to-print": "^2.15.1",
-    "uuid": "^11.0.3",
+    "react-dom": "^19.0.0",
+    "react-i18next": "^15.4.1",
+    "react-router": "^7.2.0",
+    "react-to-print": "^3.0.5",
+    "uuid": "^11.1.0",
    "vite-plugin-svgr": "^4.3.0",
-    "zustand": "^5.0.1"
+    "zustand": "^5.0.3"
  },
  "devDependencies": {
-    "@refinedev/cli": "^2.16.39",
+    "@refinedev/cli": "^2.16.42",
    "@simbathesailor/use-what-changed": "^2.0.0",
-    "@types/node": "^22.9.1",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@typescript-eslint/eslint-plugin": "^8.15.0",
-    "@typescript-eslint/parser": "^8.15.0",
-    "@vitejs/plugin-react": "^4.3.3",
-    "eslint": "^9.8.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.9",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.14",
+    "@types/node": "^22.13.5",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@typescript-eslint/eslint-plugin": "^8.25.0",
+    "@typescript-eslint/parser": "^8.25.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.1",
    "vite-plugin-mkcert": "^1.17.6"
  },
  "scripts": {
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -15,12 +15,12 @@ import {
  UserOutlined,
 } from "@ant-design/icons";
 import loadable from "@loadable/component";
-import routerBindings, { DocumentTitleHandler, UnsavedChangesNotifier } from "@refinedev/react-router-v6";
+import routerBindings, { DocumentTitleHandler, UnsavedChangesNotifier } from "@refinedev/react-router";
 import { ConfigProvider } from "antd";
 import { Locale } from "antd/es/locale";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Outlet, Route, Routes } from "react-router";
 import dataProvider from "./components/dataProvider";
 import { Favicon } from "./components/favicon";
 import { SpoolmanLayout } from "./components/layout";
--- a/client/src/components/column.tsx
+++ b/client/src/components/column.tsx
@@ -5,7 +5,7 @@ import { ColumnFilterItem, ColumnType } from "antd/es/table/interface";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { AlignType } from "rc-table/lib/interface";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { getFiltersForField, typeFilters } from "../utils/filtering";
 import { enrichText } from "../utils/parsing";
 import { Field, FieldType } from "../utils/queryFields";
--- a/client/src/components/qrCodeScanner.tsx
+++ b/client/src/components/qrCodeScanner.tsx
@@ -3,7 +3,7 @@ import { useTranslate } from "@refinedev/core";
 import { QrScanner } from "@yudiel/react-qr-scanner";
 import { FloatButton, Modal, Space } from "antd";
 import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";

 const QRCodeScannerModal: React.FC = () => {
  const [visible, setVisible] = useState(false);
--- a/client/src/pages/filaments/list.tsx
+++ b/client/src/pages/filaments/list.tsx
@@ -5,7 +5,7 @@ import { Button, Dropdown, Table } from "antd";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import {
    ActionsColumn,
    CustomFieldColumn,
--- a/client/src/pages/filaments/show.tsx
+++ b/client/src/pages/filaments/show.tsx
@@ -4,7 +4,7 @@ import { Button, Typography } from "antd";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import React from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { ExtraFieldDisplay } from "../../components/extraFields";
 import { NumberFieldUnit } from "../../components/numberField";
 import SpoolIcon from "../../components/spoolIcon";
--- a/client/src/pages/help/index.tsx
+++ b/client/src/pages/help/index.tsx
@@ -7,7 +7,7 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import React from "react";
 import { Trans } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";

 dayjs.extend(utc);

--- a/client/src/pages/home/index.tsx
+++ b/client/src/pages/home/index.tsx
@@ -6,7 +6,7 @@ import Title from "antd/es/typography/Title";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import React, { ReactNode } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import Logo from "../../icon.svg?react";
 import { ISpool } from "../spools/model";

--- a/client/src/pages/locations/components/spoolCard.tsx
+++ b/client/src/pages/locations/components/spoolCard.tsx
@@ -8,7 +8,7 @@ import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import utc from "dayjs/plugin/utc";
 import { useEffect, useRef } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import SpoolIcon from "../../../components/spoolIcon";
 import { formatWeight } from "../../../utils/parsing";
 import { ISpool } from "../../spools/model";
--- a/client/src/pages/printing/index.tsx
+++ b/client/src/pages/printing/index.tsx
@@ -5,7 +5,7 @@ import { Content } from "antd/es/layout/layout";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import React from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router";
 import SpoolQRCodePrintingDialog from "./spoolQrCodePrintingDialog";
 import SpoolSelectModal from "./spoolSelectModal";

--- a/client/src/pages/printing/printing.tsx
+++ b/client/src/pages/printing/printing.tsx
@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import { v4 as uuidv4 } from "uuid";
 import { useGetSetting, useSetSetting } from "../../utils/querySettings";
 import { ISpool } from "../spools/model";
@@ -75,7 +76,7 @@ function getTagValue(tag: string, obj: GenericObject): any {
  return value;
 }

-function applyNewline(text: string): JSX.Element[] {
+function applyNewline(text: string): ReactElement[] {
  return text.split("\n").map((line, idx, arr) => (
    <span key={idx}>
      {line}
@@ -84,7 +85,7 @@ function applyNewline(text: string): JSX.Element[] {
  ));
 }

-function applyTextFormatting(text: string): JSX.Element[] {
+function applyTextFormatting(text: string): ReactElement[] {
  const regex = /\*\*([\w\W]*?)\*\*/g;
  const parts = text.split(regex);
  // Map over the parts and wrap matched text with <b> tags
@@ -96,7 +97,7 @@ function applyTextFormatting(text: string): JSX.Element[] {
  return elements;
 }

-export function renderLabelContents(template: string, spool: ISpool): JSX.Element {
+export function renderLabelContents(template: string, spool: ISpool): ReactElement {
  // Find all {tags} in the template string and loop over them
  // let matches = [...template.matchAll(/(?:{(.*?))?{(.*?)}(.*?)(?:}(.*?))?/gs)];
  let matches = [...template.matchAll(/{(?:[^}{]|{[^}{]*})*}/gs)];
--- a/client/src/pages/printing/printingDialog.tsx
+++ b/client/src/pages/printing/printingDialog.tsx
@@ -15,19 +15,19 @@ import {
  Space,
 } from "antd";
 import * as htmlToImage from "html-to-image";
-import React, { useRef } from "react";
-import ReactToPrint from "react-to-print";
+import React, { ReactElement, useRef } from "react";
+import { useReactToPrint } from "react-to-print";
 import { useSavedState } from "../../utils/saveload";
 import { PrintSettings } from "./printing";

 interface PrintingDialogProps {
-  items: JSX.Element[];
+  items: ReactElement[];
  printSettings: PrintSettings;
  setPrintSettings: (setPrintSettings: PrintSettings) => void;
  style?: string;
-  extraSettings?: JSX.Element;
-  extraSettingsStart?: JSX.Element;
-  extraButtons?: JSX.Element;
+  extraSettings?: ReactElement;
+  extraSettingsStart?: ReactElement;
+  extraButtons?: ReactElement;
 }

 interface PaperDimensions {
@@ -90,7 +90,8 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
  const paperWidth = paperSize === "custom" ? customPaperSize.width : paperDimensions[paperSize].width;
  const paperHeight = paperSize === "custom" ? customPaperSize.height : paperDimensions[paperSize].height;

-  const printRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const reactToPrintFn = useReactToPrint({ contentRef });

  const itemWidth = (paperWidth - margin.left - margin.right - spacing.horizontal) / paperColumns - spacing.horizontal;
  const itemHeight = (paperHeight - margin.top - margin.bottom - spacing.vertical) / paperRows - spacing.vertical;
@@ -223,7 +224,7 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
          >
            <div
              className="print-container"
-              ref={printRef}
+              ref={contentRef}
              style={{
                transform: `scale(${previewScale})`,
                transformOrigin: "top left",
@@ -817,15 +818,9 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
            <Button type="primary" icon={<FileImageOutlined />} size="large" onClick={saveAsImage}>
              {t("printing.generic.saveAsImage")}
            </Button>
-            <ReactToPrint
-              key="print-button"
-              trigger={() => (
-                <Button type="primary" icon={<PrinterOutlined />} size="large">
+            <Button type="primary" icon={<PrinterOutlined />} size="large" onClick={() => reactToPrintFn()}>
              {t("printing.generic.print")}
            </Button>
-              )}
-              content={() => printRef.current}
-            />
          </Space>
        </Col>
      </Row>
--- a/client/src/pages/printing/qrCodePrintingDialog.tsx
+++ b/client/src/pages/printing/qrCodePrintingDialog.tsx
@@ -1,6 +1,7 @@
-import { getBasePath } from "../../utils/url";
 import { useTranslate } from "@refinedev/core";
 import { Col, Form, InputNumber, QRCode, Radio, RadioChangeEvent, Row, Slider, Switch, Typography } from "antd";
+import { ReactElement } from "react";
+import { getBasePath } from "../../utils/url";
 import { QRCodePrintSettings } from "./printing";
 import PrintingDialog from "./printingDialog";

@@ -8,7 +9,7 @@ const { Text } = Typography;

 interface QRCodeData {
  value: string;
-  label?: JSX.Element;
+  label?: ReactElement;
  errorLevel?: "L" | "M" | "Q" | "H";
 }

@@ -16,9 +17,9 @@ interface QRCodePrintingDialogProps {
  items: QRCodeData[];
  printSettings: QRCodePrintSettings;
  setPrintSettings: (setPrintSettings: QRCodePrintSettings) => void;
-  extraSettings?: JSX.Element;
-  extraSettingsStart?: JSX.Element;
-  extraButtons?: JSX.Element;
+  extraSettings?: ReactElement;
+  extraSettingsStart?: ReactElement;
+  extraButtons?: ReactElement;
  baseUrlRoot: string;
  useHTTPUrl: boolean;
  setUseHTTPUrl: (value: boolean) => void;
--- a/client/src/pages/printing/spoolSelectModal.tsx
+++ b/client/src/pages/printing/spoolSelectModal.tsx
@@ -3,7 +3,7 @@ import { useTable } from "@refinedev/antd";
 import { Button, Checkbox, Col, message, Row, Space, Table } from "antd";
 import { t } from "i18next";
 import { useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { FilteredQueryColumn, SortedColumn, SpoolIconColumn } from "../../components/column";
 import { useSpoolmanFilamentFilter, useSpoolmanMaterials } from "../../components/otherModels";
 import { removeUndefined } from "../../utils/filtering";
--- a/client/src/pages/settings/extraFieldsSettings.tsx
+++ b/client/src/pages/settings/extraFieldsSettings.tsx
@@ -22,7 +22,7 @@ import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 import { useState } from "react";
 import { Trans } from "react-i18next";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { DateTimePicker } from "../../components/dateTimePicker";
 import { InputNumberRange } from "../../components/inputNumberRange";
 import { EntityType, Field, FieldType, useDeleteField, useGetFields, useSetField } from "../../utils/queryFields";
--- a/client/src/pages/settings/generalSettings.tsx
+++ b/client/src/pages/settings/generalSettings.tsx
@@ -47,8 +47,7 @@ export function GeneralSettings() {
    }
  };

-  return (
-    <>
+  return (<>
    <Form
      form={form}
      labelCol={{ span: 8 }}
@@ -110,6 +109,5 @@ export function GeneralSettings() {
      </Form.Item>
    </Form>
    {contextHolder}
-    </>
-  );
+  </>);
 }
--- a/client/src/pages/settings/index.tsx
+++ b/client/src/pages/settings/index.tsx
@@ -5,7 +5,7 @@ import { Content } from "antd/es/layout/layout";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import React from "react";
-import { Route, Routes, useNavigate } from "react-router-dom";
+import { Route, Routes, useNavigate } from "react-router";
 import { ExtraFieldsSettings } from "./extraFieldsSettings";
 import { GeneralSettings } from "./generalSettings";

--- a/client/src/pages/spools/edit.tsx
+++ b/client/src/pages/spools/edit.tsx
@@ -5,7 +5,7 @@ import TextArea from "antd/es/input/TextArea";
 import { message } from "antd/lib";
 import dayjs from "dayjs";
 import { useEffect, useMemo, useState } from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router";
 import { ExtraFieldFormItem, ParsedExtras, StringifiedExtras } from "../../components/extraFields";
 import { useSpoolmanLocations } from "../../components/otherModels";
 import { searchMatches } from "../../utils/filtering";
--- a/client/src/pages/spools/list.tsx
+++ b/client/src/pages/spools/list.tsx
@@ -14,7 +14,7 @@ import { Button, Dropdown, Modal, Table } from "antd";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { useCallback, useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import {
    Action,
    ActionsColumn,
--- a/client/src/pages/vendors/list.tsx
+++ b/client/src/pages/vendors/list.tsx
@@ -5,7 +5,7 @@ import { Button, Dropdown, Table } from "antd";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { useCallback, useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import {
    ActionsColumn,
    CustomFieldColumn,