chore(config) use shared tsconfig from design system WD-17093

Signed-off-by: David Edler <[email protected]>

.eslintrc.cjs

@@ -23,7 +23,7 @@ module.exports = {
     },
   },
   parserOptions: {
-    project: "./tsconfig.json",
+    project: "tsconfig.json",
     sourceType: "module",
     ecmaFeatures: {
       jsx: true,

package.json

@@ -33,7 +33,6 @@
     "@canonical/react-components": "1.7.1",
     "@monaco-editor/react": "4.6.0",
     "@tanstack/react-query": "5.51.23",
-    "@use-it/event-listener": "0.1.7",
     "axios": "1.7.4",
     "cytoscape": "3.30.2",
     "cytoscape-popper": "2.0.0",
@@ -59,20 +58,20 @@
     "@babel/preset-env": "7.25.3",
     "@babel/preset-react": "7.24.7",
     "@babel/preset-typescript": "7.24.7",
+    "@canonical/typescript-config-react": "0.1.1-experimental.0",
     "@playwright/test": "1.46.0",
     "@types/convert-source-map": "2.0.3",
     "@types/cytoscape-popper": "2.0.4",
     "@types/dotenv": "8.2.0",
-    "@types/lodash.isequal": "^4.5.8",
+    "@types/lodash.isequal": "4.5.8",
     "@types/node-forge": "1.3.11",
     "@types/react": "18.3.3",
-    "@types/react-cytoscapejs": "1.2.5",
     "@types/react-dom": "18.3.0",
     "@types/react-router-dom": "5.3.3",
     "@types/websocket": "1.0.10",
     "@typescript-eslint/eslint-plugin": "6.21.0",
     "@typescript-eslint/parser": "6.21.0",
-    "@vitejs/plugin-react": "4.3.1",
+    "@vitejs/plugin-react": "4.3.2",
     "@vitest/coverage-istanbul": "1.6.0",
     "autoprefixer": "10.4.20",
     "babel-plugin-istanbul": "6.1.1",
@@ -86,7 +85,7 @@
     "husky": "8.0.3",
     "lint-staged": "15.2.9",
     "monaco-editor": "0.50.0",
-    "nyc": "^15.1.0",
+    "nyc": "15.1.0",
     "postcss": "8.4.41",
     "postcss-cli": "11.0.0",
     "prettier": "3.3.3",
@@ -96,11 +95,11 @@
     "stylelint-order": "6.0.4",
     "stylelint-prettier": "5.0.2",
     "stylelint-scss": "6.5.0",
-    "typescript": "5.3.3",
+    "typescript": "5.6.3",
     "v8-to-istanbul": "9.3.0",
-    "vite": "5.4.7",
+    "vite": "5.4.8",
     "vite-plugin-istanbul": "5.0.0",
-    "vite-tsconfig-paths": "4.3.2",
+    "vite-tsconfig-paths": "5.1.3",
     "vitest": "1.6.0"
   },
   "lint-staged": {

src/api/networks.tsx

@@ -58,11 +58,8 @@ export const createClusterNetwork = (
       }),
     )
       .then((results) => {
-        const error = (
-          results.find((res) => res.status === "rejected") as
-            | PromiseRejectedResult
-            | undefined
-        )?.reason as Error | undefined;
+        const error = results.find((res) => res.status === "rejected")
+          ?.reason as Error | undefined;
 
         if (error) {
           reject(error);

src/components/ErrorPage.tsx

@@ -6,7 +6,7 @@ import {
   Strip,
 } from "@canonical/react-components";
 import { updateMaxHeight } from "util/updateMaxHeight";
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 import { UI_VERSION } from "util/version";
 
 type Props = {

src/components/Navigation.tsx

@@ -11,7 +11,7 @@ import { useDocs } from "context/useDocs";
 import NavLink from "components/NavLink";
 import { useSupportedFeatures } from "context/useSupportedFeatures";
 import NavAccordion, { AccordionNavMenu } from "./NavAccordion";
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 import { enablePermissionsFeature } from "util/permissions";
 import { Location, useLocation } from "react-router-dom";
 import { useLoggedInUser } from "context/useLoggedInUser";

src/components/OperationStatus.tsx

@@ -2,7 +2,7 @@ import { Icon } from "@canonical/react-components";
 import { useOperations } from "context/operationsProvider";
 import { useState } from "react";
 import { isWidthBelow } from "util/helpers";
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 import { Link } from "react-router-dom";
 import { pluralize } from "util/instanceBulkActions";
 

src/components/ScrollableContainer.tsx

@@ -1,5 +1,5 @@
 import { DependencyList, FC, ReactNode, useEffect, useRef } from "react";
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 import {
   getAbsoluteHeightBelowById,
   getParentsBottomSpacing,

src/components/ScrollableTable.tsx

@@ -1,5 +1,5 @@
 import { DependencyList, FC, ReactNode, useEffect } from "react";
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 import {
   getAbsoluteHeightBelowById,
   getParentsBottomSpacing,

src/components/SelectableMainTable.tsx

@@ -10,7 +10,7 @@ import {
   MainTable,
 } from "@canonical/react-components";
 import classnames from "classnames";
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 import { pluralize } from "util/instanceBulkActions";
 
 interface SelectableMainTableProps {

src/components/SidePanel.tsx

@@ -3,7 +3,7 @@ import classnames from "classnames";
 import { AppAside, Panel, Spinner } from "@canonical/react-components";
 import { createPortal } from "react-dom";
 import usePanelParams from "util/usePanelParams";
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 
 interface CommonProps {
   className?: string;

src/components/StatusBar.tsx

@@ -5,7 +5,7 @@ import OperationStatus from "./OperationStatus";
 import { useToastNotification } from "context/toastNotificationProvider";
 import { AppStatus, ICONS, Icon } from "@canonical/react-components";
 import { iconLookup, severityOrder } from "util/notifications";
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 import { useAuth } from "context/auth";
 
 interface Props {

src/components/UsedByItem.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import ResourceLink from "./ResourceLink";
 import { LxdUsedBy } from "util/usedBy";
 import { ResourceIconType } from "./ResourceIcon";

src/components/forms/DeviceDetails.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { Col, Row } from "@canonical/react-components";
 import { LxdGPUDevice, LxdOtherDevice } from "types/device";
 import { deviceKeyToLabel } from "util/devices";

src/components/forms/GPUDeviceInput.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react";
+import { FC, useState } from "react";
 import { Input, RadioInput } from "@canonical/react-components";
 import { LxdGPUDevice } from "types/device";
 

src/components/forms/OtherDeviceForm.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import {
   Button,
   Icon,

src/components/forms/SelectGPUModal.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { Button, MainTable, Modal } from "@canonical/react-components";
 import { useQuery } from "@tanstack/react-query";
 import { queryKeys } from "util/queryKeys";

src/components/forms/YamlForm.tsx

@@ -1,7 +1,7 @@
 import { FC, ReactNode, useEffect, useRef, useState } from "react";
-import Editor, { loader } from "@monaco-editor/react";
+import { Editor, loader } from "@monaco-editor/react";
 import { updateMaxHeight } from "util/updateMaxHeight";
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 import { editor } from "monaco-editor/esm/vs/editor/editor.api";
 import IStandaloneCodeEditor = editor.IStandaloneCodeEditor;
 import classnames from "classnames";
@@ -57,7 +57,9 @@ const YamlForm: FC<Props> = ({
           defaultValue={yaml}
           language="yaml"
           theme="hc-black"
-          onChange={(value) => value && setYaml && setYaml(value)}
+          onChange={(value: string | undefined) =>
+            value && setYaml && setYaml(value)
+          }
           options={{
             fontSize: 18,
             scrollBeyondLastLine: false,

src/components/select/CustomSelect.tsx

@@ -13,7 +13,7 @@ import CustomSelectDropdown, {
   CustomSelectOption,
   getOptionText,
 } from "./CustomSelectDropdown";
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 
 export type SelectRef = MutableRefObject<
   | {

src/components/select/CustomSelectDropdown.tsx

@@ -11,7 +11,7 @@ import {
 } from "react";
 import classnames from "classnames";
 import { adjustDropdownHeight } from "util/customSelect";
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 
 export type CustomSelectOption = LiHTMLAttributes<HTMLLIElement> & {
   value: string;

src/context/menuCollapsed.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 import { isWidthBelow } from "util/helpers";
 
 const isSmallScreen = () => isWidthBelow(620);

src/context/useClusterMembers.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { queryKeys } from "util/queryKeys";
-import { UseQueryResult } from "@tanstack/react-query/src/types";
+import { UseQueryResult } from "@tanstack/react-query";
 import { useSettings } from "context/useSettings";
 import { isClusteredServer } from "util/settings";
 import { fetchClusterMembers } from "api/cluster";

src/context/useSettings.tsx

@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import { queryKeys } from "util/queryKeys";
 import { fetchSettings } from "api/server";
 import { LxdSettings } from "types/server";
-import { UseQueryResult } from "@tanstack/react-query/src/types";
+import { UseQueryResult } from "@tanstack/react-query";
 
 export const useSettings = (): UseQueryResult<LxdSettings> => {
   return useQuery({

src/context/useSmallScreen.tsx

@@ -1,4 +1,4 @@
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 import { useState } from "react";
 import { isWidthBelow } from "util/helpers";
 

src/pages/cluster/ClusterGroupForm.tsx

@@ -20,7 +20,7 @@ import * as Yup from "yup";
 import { checkDuplicateName } from "util/helpers";
 import { useFormik } from "formik";
 import { updateMaxHeight } from "util/updateMaxHeight";
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 import { useNavigate, useParams } from "react-router-dom";
 import { getClusterHeaders, getClusterRows } from "util/clusterGroups";
 import SelectableMainTable from "components/SelectableMainTable";
@@ -167,7 +167,7 @@ const ClusterGroupForm: FC<Props> = ({ group }) => {
               itemName="member"
               parentName="cluster"
               selectedNames={formik.values.members}
-              setSelectedNames={(newMembers) =>
+              setSelectedNames={(newMembers: string[]) =>
                 void formik.setFieldValue("members", newMembers)
               }
               processingNames={[]}

src/pages/cluster/ClusterMemberSelector.tsx

@@ -2,7 +2,7 @@ import { Select, SelectProps } from "@canonical/react-components";
 import { useQuery } from "@tanstack/react-query";
 import { fetchClusterMembers } from "api/cluster";
 import { useSettings } from "context/useSettings";
-import React, { FC, useEffect } from "react";
+import { FC, useEffect } from "react";
 import { queryKeys } from "util/queryKeys";
 import { isClusteredServer } from "util/settings";
 

src/pages/instances/CreateInstance.tsx

@@ -62,7 +62,7 @@ import InstanceFormMenu, {
   OTHER_DEVICES,
   PROXY_DEVICES,
 } from "pages/instances/forms/InstanceFormMenu";
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 import { updateMaxHeight } from "util/updateMaxHeight";
 import DiskDeviceForm from "components/forms/DiskDeviceForm";
 import NetworkDevicesForm from "components/forms/NetworkDevicesForm";

src/pages/instances/EditInstance.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from "react";
+import { FC, useEffect, useState } from "react";
 import { Button, Col, Form, Row } from "@canonical/react-components";
 import { useFormik } from "formik";
 import { updateInstance } from "api/instances";
@@ -38,7 +38,7 @@ import InstanceFormMenu, {
   OTHER_DEVICES,
   PROXY_DEVICES,
 } from "pages/instances/forms/InstanceFormMenu";
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 import { updateMaxHeight } from "util/updateMaxHeight";
 import DiskDeviceForm from "components/forms/DiskDeviceForm";
 import NetworkDevicesForm from "components/forms/NetworkDevicesForm";

src/pages/instances/InstanceConsole.tsx

@@ -12,11 +12,7 @@ import InstanceGraphicConsole from "./InstanceGraphicConsole";
 import { LxdInstance } from "types/instance";
 import InstanceTextConsole from "./InstanceTextConsole";
 import { useInstanceStart } from "util/instanceStart";
-import {
-  sendAltF4,
-  sendAltTab,
-  sendCtrlAltDel,
-} from "../../lib/spice/src/inputs";
+import { sendAltF4, sendAltTab, sendCtrlAltDel } from "lib/spice/src/inputs.js";
 import AttachIsoBtn from "pages/instances/actions/AttachIsoBtn";
 import NotificationRow from "components/NotificationRow";
 import { useSupportedFeatures } from "context/useSupportedFeatures";

src/pages/instances/InstanceDetailActions.tsx

@@ -6,7 +6,7 @@ import CreateImageFromInstanceBtn from "./actions/CreateImageFromInstanceBtn";
 import DuplicateInstanceBtn from "./actions/DuplicateInstanceBtn";
 import { ContextualMenu } from "@canonical/react-components";
 import { isWidthBelow } from "util/helpers";
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 import ExportInstanceBtn from "pages/instances/actions/ExportInstanceBtn";
 
 interface Props {

src/pages/instances/InstanceGraphicConsole.tsx

@@ -1,9 +1,9 @@
 import { FC, useEffect, useRef, useState } from "react";
 import { useParams } from "react-router-dom";
-import * as SpiceHtml5 from "../../lib/spice/src/main";
+import * as SpiceHtml5 from "lib/spice/src/main.js";
 import { connectInstanceVga } from "api/instances";
 import { getWsErrorMsg } from "util/helpers";
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 import Loader from "components/Loader";
 import { updateMaxHeight } from "util/updateMaxHeight";
 import { LxdInstance } from "types/instance";
@@ -119,7 +119,7 @@ const InstanceGraphicConsole: FC<Props> = ({
     if (!spiceRef.current?.parentElement || !("detail" in e)) {
       return;
     }
-    const wheelEvent = (e as SpiceWheelEvent).detail.wheelEvent;
+    const wheelEvent = (e as unknown as SpiceWheelEvent).detail.wheelEvent;
     spiceRef.current.parentElement.scrollBy(
       wheelEvent.deltaX,
       wheelEvent.deltaY,

src/pages/instances/InstanceList.tsx

@@ -18,7 +18,7 @@ import Loader from "components/Loader";
 import { instanceCreationTypes } from "util/instanceOptions";
 import InstanceStatusIcon from "./InstanceStatusIcon";
 import TableColumnsSelect from "components/TableColumnsSelect";
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 import classnames from "classnames";
 import InstanceStateActions from "pages/instances/actions/InstanceStateActions";
 import { useInstanceLoading } from "context/instanceLoading";

src/pages/instances/InstanceOverview.tsx

@@ -3,7 +3,7 @@ import { isoTimeToString } from "util/helpers";
 import { Col, Row, useNotify } from "@canonical/react-components";
 import { LxdInstance } from "types/instance";
 import { instanceCreationTypes } from "util/instanceOptions";
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 import { updateMaxHeight } from "util/updateMaxHeight";
 import InstanceOverviewProfiles from "./InstanceOverviewProfiles";
 import InstanceOverviewMetrics from "./InstanceOverviewMetrics";

src/pages/instances/InstanceSnapshots.tsx

@@ -9,7 +9,7 @@ import {
 import { isoTimeToString } from "util/helpers";
 import { LxdInstance } from "types/instance";
 import InstanceSnapshotActions from "./actions/snapshots/InstanceSnapshotActions";
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 import ItemName from "components/ItemName";
 import SelectableMainTable from "components/SelectableMainTable";
 import InstanceSnapshotBulkDelete from "pages/instances/actions/snapshots/InstanceSnapshotBulkDelete";

src/pages/instances/InstanceTerminal.tsx

@@ -3,7 +3,7 @@ import { unstable_usePrompt as usePrompt, useParams } from "react-router-dom";
 import { FitAddon } from "xterm-addon-fit";
 import { connectInstanceExec } from "api/instances";
 import { getWsErrorMsg } from "util/helpers";
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 import ReconnectTerminalBtn from "./actions/ReconnectTerminalBtn";
 import { TerminalConnectPayload } from "types/terminal";
 import Loader from "components/Loader";

src/pages/instances/InstanceTextConsole.tsx

@@ -7,7 +7,7 @@ import {
 } from "api/instances";
 import { getWsErrorMsg } from "util/helpers";
 import Loader from "components/Loader";
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 import { LxdInstance } from "types/instance";
 import { updateMaxHeight } from "util/updateMaxHeight";
 import { unstable_usePrompt as usePrompt } from "react-router-dom";

src/pages/instances/TerminalPayloadForm.tsx

@@ -8,7 +8,7 @@ import {
   Modal,
 } from "@canonical/react-components";
 import { updateMaxHeight } from "util/updateMaxHeight";
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 import { TerminalConnectPayload } from "types/terminal";
 import * as Yup from "yup";
 import { useFormik } from "formik";