Merge pull request #137 from tiqi-group/chore/update_eslint

chore: update eslint config

frontend/.eslintrc

@@ -1,19 +0,0 @@
-{
-    "root": true,
-    "parser": "@typescript-eslint/parser",
-    "plugins": [
-        "@typescript-eslint",
-        "prettier"
-    ],
-    "extends": [
-        "eslint:recommended",
-        "plugin:@typescript-eslint/recommended",
-        "prettier",
-        "plugin:react/recommended"
-    ],
-    "rules": {
-        "prettier/prettier": "error",
-        "react/react-in-jsx-scope": "off",
-        "react/prop-types": "off"
-    }
-}

frontend/eslint.config.js

@@ -0,0 +1,21 @@
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
+import reactRecommended from "eslint-plugin-react/configs/recommended.js";
+
+export default [
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...tseslint.configs.stylistic,
+  {
+    files: ["**/*.{js,jsx,ts,tsx}"],
+    ...reactRecommended,
+    rules: {
+      "prettier/prettier": "error",
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+      "@typescript-eslint/no-empty-function": "off",
+    },
+  },
+  eslintPluginPrettierRecommended,
+];

frontend/package.json

@@ -6,7 +6,7 @@
     "scripts": {
         "dev": "vite",
         "build": "tsc -b && vite build --emptyOutDir",
-        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+        "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
         "preview": "vite preview"
     },
     "dependencies": {
@@ -19,16 +19,21 @@
         "socket.io-client": "^4.7.1"
     },
     "devDependencies": {
+        "@eslint/js": "^9.6.0",
+        "@types/eslint__js": "^8.42.3",
+        "@types/node": "^20.14.10",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@typescript-eslint/eslint-plugin": "^7.13.1",
         "@typescript-eslint/parser": "^7.13.1",
         "@vitejs/plugin-react-swc": "^3.5.0",
         "eslint": "^8.57.0",
-        "eslint-config-prettier": "^9.0.0",
-        "eslint-plugin-prettier": "^5.0.1",
-        "prettier": "^3.0.3",
-        "typescript": "^5.2.2",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-prettier": "^5.1.3",
+        "eslint-plugin-react": "^7.34.3",
+        "prettier": "3.3.2",
+        "typescript": "^5.5.3",
+        "typescript-eslint": "^7.15.0",
         "vite": "^5.3.1"
     }
 }

frontend/src/App.tsx

@@ -20,13 +20,13 @@ type Action =
       fullAccessPath: string;
       newValue: SerializedObject;
     };
-type UpdateMessage = {
+interface UpdateMessage {
   data: { full_access_path: string; value: SerializedObject };
-};
-type LogMessage = {
+}
+interface LogMessage {
   levelname: LevelName;
   message: string;
-};
+}
 
 const reducer = (state: State | null, action: Action): State | null => {
   switch (action.type) {

frontend/src/WebSettings.tsx

@@ -2,8 +2,8 @@ import { createContext } from "react";
 
 export const WebSettingsContext = createContext<Record<string, WebSetting>>({});
 
-export type WebSetting = {
+export interface WebSetting {
   displayName: string;
   display: boolean;
   index: number;
-};
+}

frontend/src/components/AsyncMethodComponent.tsx

@@ -4,7 +4,7 @@ import { Form, Button, InputGroup, Spinner } from "react-bootstrap";
 import { DocStringComponent } from "./DocStringComponent";
 import { LevelName } from "./NotificationsComponent";
 
-type AsyncMethodProps = {
+interface AsyncMethodProps {
   fullAccessPath: string;
   value: "RUNNING" | null;
   docString: string | null;
@@ -13,7 +13,7 @@ type AsyncMethodProps = {
   displayName: string;
   id: string;
   render: boolean;
-};
+}
 
 export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
   const {

frontend/src/components/ButtonComponent.tsx

@@ -4,7 +4,7 @@ import { DocStringComponent } from "./DocStringComponent";
 import { LevelName } from "./NotificationsComponent";
 import { SerializedObject } from "../types/SerializedObject";
 
-type ButtonComponentProps = {
+interface ButtonComponentProps {
   fullAccessPath: string;
   value: boolean;
   readOnly: boolean;
@@ -14,7 +14,7 @@ type ButtonComponentProps = {
   changeCallback?: (value: SerializedObject, callback?: (ack: unknown) => void) => void;
   displayName: string;
   id: string;
-};
+}
 
 export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
   const {

frontend/src/components/ConnectionToast.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { Toast, Button, ToastContainer } from "react-bootstrap";
 
-type ConnectionToastProps = {
+interface ConnectionToastProps {
   connectionStatus: string;
-};
+}
 
 /**
  * ConnectionToast Component

frontend/src/components/DataServiceComponent.tsx

@@ -6,13 +6,13 @@ import { GenericComponent } from "./GenericComponent";
 import { LevelName } from "./NotificationsComponent";
 import { SerializedObject } from "../types/SerializedObject";
 
-type DataServiceProps = {
+interface DataServiceProps {
   props: DataServiceJSON;
   isInstantUpdate: boolean;
   addNotification: (message: string, levelname?: LevelName) => void;
   displayName: string;
   id: string;
-};
+}
 
 export type DataServiceJSON = Record<string, SerializedObject>;
 

frontend/src/components/DeviceConnection.tsx

@@ -3,14 +3,14 @@ import { LevelName } from "./NotificationsComponent";
 import { DataServiceComponent, DataServiceJSON } from "./DataServiceComponent";
 import { MethodComponent } from "./MethodComponent";
 
-type DeviceConnectionProps = {
+interface DeviceConnectionProps {
   fullAccessPath: string;
   props: DataServiceJSON;
   isInstantUpdate: boolean;
   addNotification: (message: string, levelname?: LevelName) => void;
   displayName: string;
   id: string;
-};
+}
 
 export const DeviceConnectionComponent = React.memo(
   ({

frontend/src/components/DictComponent.tsx

@@ -4,13 +4,13 @@ import { GenericComponent } from "./GenericComponent";
 import { LevelName } from "./NotificationsComponent";
 import { SerializedObject } from "../types/SerializedObject";
 
-type DictComponentProps = {
+interface DictComponentProps {
   value: Record<string, SerializedObject>;
   docString: string | null;
   isInstantUpdate: boolean;
   addNotification: (message: string, levelname?: LevelName) => void;
   id: string;
-};
+}
 
 export const DictComponent = React.memo((props: DictComponentProps) => {
   const { value, docString, isInstantUpdate, addNotification, id } = props;

frontend/src/components/DocStringComponent.tsx

@@ -1,9 +1,9 @@
 import { Badge, Tooltip, OverlayTrigger } from "react-bootstrap";
 import React from "react";
 
-type DocStringProps = {
+interface DocStringProps {
   docString?: string | null;
-};
+}
 
 export const DocStringComponent = React.memo((props: DocStringProps) => {
   const { docString } = props;

frontend/src/components/EnumComponent.tsx

@@ -4,7 +4,7 @@ import { DocStringComponent } from "./DocStringComponent";
 import { LevelName } from "./NotificationsComponent";
 import { SerializedObject } from "../types/SerializedObject";
 
-export type EnumSerialization = {
+export interface EnumSerialization {
   type: "Enum" | "ColouredEnum";
   full_access_path: string;
   name: string;
@@ -12,15 +12,15 @@ export type EnumSerialization = {
   readonly: boolean;
   doc: string | null;
   enum: Record<string, string>;
-};
+}
 
-type EnumComponentProps = {
+interface EnumComponentProps {
   attribute: EnumSerialization;
   addNotification: (message: string, levelname?: LevelName) => void;
   displayName: string;
   id: string;
   changeCallback?: (value: SerializedObject, callback?: (ack: unknown) => void) => void;
-};
+}
 
 export const EnumComponent = React.memo((props: EnumComponentProps) => {
   const { attribute, addNotification, displayName, id } = props;

frontend/src/components/GenericComponent.tsx

@@ -18,11 +18,11 @@ import { DictComponent } from "./DictComponent";
 import { parseFullAccessPath } from "../utils/stateUtils";
 import { SerializedObject } from "../types/SerializedObject";
 
-type GenericComponentProps = {
+interface GenericComponentProps {
   attribute: SerializedObject;
   isInstantUpdate: boolean;
   addNotification: (message: string, levelname?: LevelName) => void;
-};
+}
 
 const getPathFromPathParts = (pathParts: string[]): string => {
   let path = "";

frontend/src/components/ImageComponent.tsx

@@ -4,7 +4,7 @@ import { DocStringComponent } from "./DocStringComponent";
 import { ChevronDown, ChevronRight } from "react-bootstrap-icons";
 import { LevelName } from "./NotificationsComponent";
 
-type ImageComponentProps = {
+interface ImageComponentProps {
   fullAccessPath: string;
   value: string;
   docString: string | null;
@@ -12,7 +12,7 @@ type ImageComponentProps = {
   addNotification: (message: string, levelname?: LevelName) => void;
   displayName: string;
   id: string;
-};
+}
 
 export const ImageComponent = React.memo((props: ImageComponentProps) => {
   const { fullAccessPath, value, docString, format, addNotification, displayName, id } =

frontend/src/components/ListComponent.tsx

@@ -4,13 +4,13 @@ import { GenericComponent } from "./GenericComponent";
 import { LevelName } from "./NotificationsComponent";
 import { SerializedObject } from "../types/SerializedObject";
 
-type ListComponentProps = {
+interface ListComponentProps {
   value: SerializedObject[];
   docString: string | null;
   isInstantUpdate: boolean;
   addNotification: (message: string, levelname?: LevelName) => void;
   id: string;
-};
+}
 
 export const ListComponent = React.memo((props: ListComponentProps) => {
   const { value, docString, isInstantUpdate, addNotification, id } = props;

frontend/src/components/MethodComponent.tsx

@@ -4,14 +4,14 @@ import { Button, Form } from "react-bootstrap";
 import { DocStringComponent } from "./DocStringComponent";
 import { LevelName } from "./NotificationsComponent";
 
-type MethodProps = {
+interface MethodProps {
   fullAccessPath: string;
   docString: string | null;
   addNotification: (message: string, levelname?: LevelName) => void;
   displayName: string;
   id: string;
   render: boolean;
-};
+}
 
 export const MethodComponent = React.memo((props: MethodProps) => {
   const { fullAccessPath, docString, addNotification, displayName, id } = props;

frontend/src/components/NotificationsComponent.tsx

@@ -2,18 +2,18 @@ import React from "react";
 import { ToastContainer, Toast } from "react-bootstrap";
 
 export type LevelName = "CRITICAL" | "ERROR" | "WARNING" | "INFO" | "DEBUG";
-export type Notification = {
+export interface Notification {
   id: number;
   timeStamp: string;
   message: string;
   levelname: LevelName;
-};
+}
 
-type NotificationProps = {
+interface NotificationProps {
   showNotification: boolean;
   notifications: Notification[];
   removeNotificationById: (id: number) => void;
-};
+}
 
 export const Notifications = React.memo((props: NotificationProps) => {
   const { showNotification, notifications, removeNotificationById } = props;

frontend/src/components/NumberComponent.tsx

@@ -8,27 +8,27 @@ import { QuantityMap } from "../types/QuantityMap";
 
 // TODO: add button functionality
 
-export type QuantityObject = {
+export interface QuantityObject {
   type: "Quantity";
   readonly: boolean;
   value: QuantityMap;
   doc: string | null;
-};
-export type IntObject = {
+}
+export interface IntObject {
   type: "int";
   readonly: boolean;
   value: number;
   doc: string | null;
-};
-export type FloatObject = {
+}
+export interface FloatObject {
   type: "float";
   readonly: boolean;
   value: number;
   doc: string | null;
-};
+}
 export type NumberObject = IntObject | FloatObject | QuantityObject;
 
-type NumberComponentProps = {
+interface NumberComponentProps {
   type: "float" | "int" | "Quantity";
   fullAccessPath: string;
   value: number;
@@ -40,7 +40,7 @@ type NumberComponentProps = {
   changeCallback?: (value: SerializedObject, callback?: (ack: unknown) => void) => void;
   displayName?: string;
   id: string;
-};
+}
 
 // TODO: highlight the digit that is being changed by setting both selectionStart and
 // selectionEnd

frontend/src/components/SliderComponent.tsx

@@ -7,7 +7,7 @@ import { LevelName } from "./NotificationsComponent";
 import { SerializedObject } from "../types/SerializedObject";
 import { QuantityMap } from "../types/QuantityMap";
 
-type SliderComponentProps = {
+interface SliderComponentProps {
   fullAccessPath: string;
   min: NumberObject;
   max: NumberObject;
@@ -20,7 +20,7 @@ type SliderComponentProps = {
   changeCallback?: (value: SerializedObject, callback?: (ack: unknown) => void) => void;
   displayName: string;
   id: string;
-};
+}
 
 export const SliderComponent = React.memo((props: SliderComponentProps) => {
   const renderCount = useRef(0);
@@ -122,7 +122,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
   const deconstructNumberDict = (
     numberDict: NumberObject,
   ): [number, boolean, string | undefined] => {
-    let numberMagnitude: number = 0;
+    let numberMagnitude = 0;
     let numberUnit: string | undefined = undefined;
     const numberReadOnly = numberDict.readonly;
 

frontend/src/components/StringComponent.tsx

@@ -7,7 +7,7 @@ import { SerializedObject } from "../types/SerializedObject";
 
 // TODO: add button functionality
 
-type StringComponentProps = {
+interface StringComponentProps {
   fullAccessPath: string;
   value: string;
   readOnly: boolean;
@@ -17,7 +17,7 @@ type StringComponentProps = {
   changeCallback?: (value: SerializedObject, callback?: (ack: unknown) => void) => void;
   displayName: string;
   id: string;
-};
+}
 
 export const StringComponent = React.memo((props: StringComponentProps) => {
   const {

frontend/src/index.tsx

@@ -9,5 +9,5 @@ import "bootstrap/dist/css/bootstrap.min.css";
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );

frontend/src/types/QuantityMap.ts

@@ -1,4 +1,4 @@
-export type QuantityMap = {
+export interface QuantityMap {
   magnitude: number;
   unit: string;
-};
+}

frontend/src/types/SerializedObject.ts

@@ -1,15 +1,15 @@
 import { QuantityMap } from "./QuantityMap";
 
-type SignatureDict = {
+interface SignatureDict {
   parameters: Record<string, Record<string, unknown>>;
   return_annotation: Record<string, unknown>;
-};
+}
 
-type SerializedObjectBase = {
+interface SerializedObjectBase {
   full_access_path: string;
   doc: string | null;
   readonly: boolean;
-};
+}
 
 type SerializedInteger = SerializedObjectBase & {
   value: number;

frontend/src/utils/serializationUtils.ts

@@ -41,7 +41,7 @@ const serializePrimitive = (
   }
 };
 
-export const serializeList = (obj: unknown[], accessPath: string = "") => {
+export const serializeList = (obj: unknown[], accessPath = "") => {
   const doc = null;
   const value = obj.map((item, index) => {
     if (
@@ -65,10 +65,7 @@ export const serializeList = (obj: unknown[], accessPath: string = "") => {
     doc,
   };
 };
-export const serializeDict = (
-  obj: Record<string, unknown>,
-  accessPath: string = "",
-) => {
+export const serializeDict = (obj: Record<string, unknown>, accessPath = "") => {
   const doc = null;
   const value = Object.entries(obj).reduce(
     (acc, [key, val]) => {
@@ -87,7 +84,7 @@ export const serializeDict = (
 
       return acc;
     },
-    <Record<string, SerializedObject>>{},
+    {} as Record<string, SerializedObject>,
   );
 
   return {

frontend/src/utils/stateUtils.ts

@@ -1,12 +1,12 @@
 import { SerializedObject } from "../types/SerializedObject";
 
-export type State = {
+export interface State {
   type: string;
   name: string;
   value: Record<string, SerializedObject> | null;
   readonly: boolean;
   doc: string | null;
-};
+}
 
 /**
  * Splits a full access path into its atomic parts, separating attribute names, numeric
@@ -110,7 +110,7 @@ function getOrCreateItemInContainer(
 function getContainerItemByKey(
   container: Record<string, SerializedObject> | SerializedObject[],
   key: string,
-  allowAppend: boolean = false,
+  allowAppend = false,
 ): SerializedObject {
   const processedKey = parseSerializedKey(key);