Use shared tsconfig from design system (#999)

## Done

- Use shared tsconfig from design system
- Update eslint typescript packages
- Fix code issues to align with new rules.

Fixes [WD-17093](https://warthogs.atlassian.net/browse/WD-17093)


[WD-17093]:
https://warthogs.atlassian.net/browse/WD-17093?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

.eslintrc.cjs

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

package.json

@@ -13,8 +13,8 @@
     "format-js-prettier": "prettier 'src/**/*.{json,jsx,tsx,ts}' 'tests/**/*.ts' --write",
     "format-js": "yarn format-js-eslint && yarn format-js-prettier",
     "lint-scss": "stylelint 'src/**/*.scss'",
-    "lint-js-eslint": "eslint 'src/**/*.{json,tsx,ts}' 'tests/**/*.ts' .eslintrc.cjs babel.config.js",
-    "lint-js-prettier": "prettier 'src/**/*.{json,tsx,ts}' 'tests/**/*.ts' .eslintrc.cjs babel.config.js --check",
+    "lint-js-eslint": "eslint 'src/**/*.{json,tsx,ts}' 'tests/**/*.ts'",
+    "lint-js-prettier": "prettier 'src/**/*.{json,tsx,ts}' 'tests/**/*.ts' --check",
     "lint-js": "tsc --noEmit && yarn lint-js-eslint && yarn lint-js-prettier",
     "hooks-add": "husky install",
     "hooks-remove": "husky uninstall",
@@ -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",
+    "@typescript-eslint/eslint-plugin": "8.16.0",
+    "@typescript-eslint/parser": "8.16.0",
+    "@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

@@ -65,11 +65,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/ErrorBoundary.tsx

@@ -26,6 +26,7 @@ export default class ErrorBoundary extends Component<Props, State> {
 
   render() {
     const { error, hasError } = this.state;
+    // eslint-disable-next-line react/prop-types
     const { children, fallback: ErrorComponent } = this.props;
 
     return hasError ? <ErrorComponent error={error} /> : <>{children}</>;

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";
@@ -51,7 +51,9 @@ const Navigation: FC = () => {
   );
 
   useEffect(() => {
-    project && project.name !== projectName && setProjectName(project.name);
+    if (project && project.name !== projectName) {
+      setProjectName(project.name);
+    }
   }, [project?.name]);
 
   useEffect(() => {

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/Xterm.tsx

@@ -22,6 +22,8 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
  */
 
+/* eslint @typescript-eslint/unbound-method: 0 */
+
 import {
   forwardRef,
   useEffect,

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/FormFooterLayout.tsx

@@ -1,8 +1,6 @@
 import { FC, PropsWithChildren } from "react";
 
-interface Props {}
-
-const FormFooterLayout: FC<Props & PropsWithChildren> = ({ children }) => {
+const FormFooterLayout: FC<PropsWithChildren> = ({ children }) => {
   return (
     <div className="p-bottom-controls" id="form-footer">
       <footer className="u-align--right bottom-btns">{children}</footer>

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";
 import { getNearestParentsZIndex } from "util/zIndex";
 
 export type CustomSelectOption = LiHTMLAttributes<HTMLLIElement> & {

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/operationsProvider.tsx

@@ -60,7 +60,7 @@ const OperationsProvider: FC<Props> = ({ children }) => {
     };
   }, []);
 
-  const debouncedRefetch = (options?: RefetchOptions | undefined) => {
+  const debouncedRefetch = (options?: RefetchOptions) => {
     const delay = 2_000;
     if (refetchTimerRef.current) {
       clearTimeout(refetchTimerRef.current);

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,12 +1,14 @@
-import useEventListener from "@use-it/event-listener";
+import useEventListener from "util/useEventListener";
 import { useState } from "react";
 import { isWidthBelow } from "util/helpers";
 
 export const useSmallScreen = (): boolean => {
   const [isSmallScreen, setIsSmallScreen] = useState(isWidthBelow(620));
   const handleResize = () => {
     const newSmall = isWidthBelow(620);
-    newSmall !== isSmallScreen && setIsSmallScreen(newSmall);
+    if (newSmall !== isSmallScreen) {
+      setIsSmallScreen(newSmall);
+    }
   };
   useEventListener("resize", handleResize);
   return isSmallScreen;

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";
@@ -272,9 +272,11 @@ const CreateInstance: FC = () => {
       </>
     );
 
-    shouldStart
-      ? notifyCreatedAndStarted(instanceLink)
-      : notifyCreated(instanceLink, message);
+    if (shouldStart) {
+      notifyCreatedAndStarted(instanceLink);
+    } else {
+      notifyCreated(instanceLink, message);
+    }
   };
 
   const { data: profiles = [] } = useQuery({

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";
@@ -163,9 +163,11 @@ const EditInstance: FC<Props> = ({ instance }) => {
     }
 
     const baseUrl = `/ui/project/${project}/instance/${instance.name}/configuration`;
-    newSection === MAIN_CONFIGURATION
-      ? navigate(baseUrl)
-      : navigate(`${baseUrl}/${slugify(newSection)}`);
+    if (newSection === MAIN_CONFIGURATION) {
+      navigate(baseUrl);
+    } else {
+      navigate(`${baseUrl}/${slugify(newSection)}`);
+    }
   };
 
   const getYaml = () => {