JSDoc Updates

.editorconfig

@@ -0,0 +1,28 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+insert_final_newline = false
+
+[*.{yml,yaml}]
+indent_size = 2
+
+[*.{ts,js,jsx,tsx}]
+quote_type = double
+continuation_indent_size = 2
+curly_brace_next_line = false
+indent_brace_style = BSD
+spaces_around_operators = true
+spaces_around_brackets = true
+
+[*.{pl,pm,t,PL}]
+max_line_length = off
+continuation_indent_size = 4

eslint.config.mjs

@@ -0,0 +1,44 @@
+import js from "@eslint/js";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+import css from "@eslint/css";
+import { defineConfig } from "eslint/config";
+import stylistic from "@stylistic/eslint-plugin";
+import jsdoc from "eslint-plugin-jsdoc";
+
+export default defineConfig([
+    { settings: { react: { version: "detect" } } },
+    { ignores: ["*.cjs", "eslint.config.mjs", "**/public/**", "**/node_modules/**", "**/cypress/**", "cypress.config.ts", ".stylelintrc.js", "src/frontend/testing/**", "src/frontend/css/stylesheets/external/**", "src/frontend/components/dashboard/lib/react/polyfills/**", "babel.config.js", "webpack.config.js", "jest.config.js", "tsconfig.json", "src/frontend/js/lib/jqplot/**", "src/frontend/js/lib/jquery/**", "src/frontend/js/lib/plotly/**", "src/frontend/components/timeline/**", "fengari-web.js"] },
+    { files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], plugins: { js }, extends: ["js/recommended"] },
+    { files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], languageOptions: { globals: { ...globals.browser, ...globals.jquery, ...globals.jest } } },
+    tseslint.configs.recommended,
+    pluginReact.configs.flat.recommended,
+    { files: ["**/*.css"], plugins: { css }, language: "css/css", extends: ["css/recommended"] },
+    { plugins: {'@stylistic': stylistic, jsdoc} },
+    {
+        rules: {
+            "@typescript-eslint/no-explicit-any": "off",
+            'react/prop-types': 'off',
+            'react/no-deprecated': 'off', // We are currently using deprecated React features, so we disable this rule - this will change in the future
+            '@stylistic/quotes': ['error', 'single'],
+            '@stylistic/no-extra-semi': 'error',
+            '@stylistic/semi': ['error', 'always'],
+            '@stylistic/curly-newline': 'error',
+            '@stylistic/indent': ['error', 4],
+            '@stylistic/comma-dangle': ['error', 'never'],
+            "jsdoc/require-jsdoc": [
+                "error",
+                {
+                    require: {
+                        FunctionDeclaration: true,
+                        MethodDefinition: true,
+                        ClassDeclaration: true,
+                        ArrowFunctionExpression: false,
+                        FunctionExpression: false
+                    }
+                }
+            ],
+        }
+    }
+]);

package.json

@@ -8,7 +8,9 @@
     "test": "jest",
     "build:dev": "webpack --env development --progress -w",
     "test:watch": "jest --watch",
-    "e2e": "yarn cypress run"
+    "e2e": "yarn cypress run",
+    "prebuild": "npx update-browserslist-db@latest",
+    "pretest": "npx update-browserslist-db@latest"
   },
   "dependencies": {
     "@egjs/hammerjs": "^2.0.0",
@@ -54,7 +56,10 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
     "@babel/runtime-corejs3": "^7.14.7",
+    "@eslint/css": "^0.10.0",
+    "@eslint/js": "^9.31.0",
     "@jest/globals": "^29.7.0",
+    "@stylistic/eslint-plugin": "^5.2.0",
     "@testing-library/react": "12",
     "@types/jest": "^29.5.6",
     "@types/jquery": "^3.5.24",
@@ -63,8 +68,6 @@
     "@types/react-dom": "^17.0.14",
     "@types/react-grid-layout": "^1.3.2",
     "@types/typeahead.js": "^0.11.6",
-    "@typescript-eslint/eslint-plugin": "^7.7.0",
-    "@typescript-eslint/parser": "^7.7.0",
     "@webpack-cli/serve": "^2.0.1",
     "autoprefixer": "^9.8.8",
     "babel-loader": "^8.2.2",
@@ -74,8 +77,10 @@
     "core-js": "^3.15.2",
     "css-loader": "^3.2.0",
     "cypress": "^13.7.2",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint": "^9.31.0",
+    "eslint-plugin-jsdoc": "^52.0.0",
+    "eslint-plugin-react": "^7.37.5",
+    "globals": "^16.3.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "mini-css-extract-plugin": "^2.7.2",
@@ -85,6 +90,7 @@
     "terser-webpack-plugin": "^5.3.6",
     "ts-loader": "~8.2.0",
     "typescript": "5.4.3",
+    "typescript-eslint": "^8.37.0",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1",

src/frontend/components/alert/lib/alertBase.ts

@@ -1,6 +1,9 @@
 import { Hidable, Renderable } from 'util/renderable';
 import { AlertType } from './types';
 
+/**
+ * AlertBase serves as a foundational class for creating various types of alert components in the application.
+ */
 export abstract class AlertBase extends Hidable implements Renderable<HTMLDivElement> {
     /**
      * Create an instance of AlertBase.

src/frontend/components/alert/lib/dangerAlert.ts

@@ -1,5 +1,8 @@
-import { AlertBase } from "./alertBase";
+import { AlertBase } from './alertBase';
 
+/**
+ * Class representing a danger alert.
+ */
 export class DangerAlert extends AlertBase {
     /**
      * Create an instance of InfoAlert.

src/frontend/components/alert/lib/infoAlert.ts

@@ -1,17 +1,19 @@
 import { AlertBase } from './alertBase';
 
+/**
+ * InfoAlert class represents an informational alert in the application.
+ */
 export class InfoAlert extends AlertBase {
     /**
      * Create an instance of InfoAlert.
      * This class extends AlertBase to provide a specific implementation for info alerts.
-     * It uses the AlertType.INFO to set the alert type.
      * @class
      * @public
      * @memberof alert.lib
      * @constructor
      * @param {string} message - The message to be displayed in the info alert.
      */
     constructor(message: string) {
-        super(message, "info");
+        super(message, 'info');
     }
-}
+}

src/frontend/components/alert/lib/successAlert.ts

@@ -1,5 +1,8 @@
-import { AlertBase } from "./alertBase";
+import { AlertBase } from './alertBase';
 
+/**
+ * Class representing a success alert.
+*/
 export class SuccessAlert extends AlertBase {
     /**
      * Create an instance of InfoAlert.

src/frontend/components/alert/lib/warningAlert.ts

@@ -1,17 +1,19 @@
-import { AlertBase } from "./alertBase";
+import { AlertBase } from './alertBase';
 
+/**
+ * Class representing a warning alert. This class extends AlertBase to provide a specific implementation for warning alerts.
+ */
 export class WarningAlert extends AlertBase {
     /**
      * Create an instance of InfoAlert.
      * This class extends AlertBase to provide a specific implementation for info alerts.
-     * It uses the AlertType.INFO to set the alert type.
      * @class
      * @public
      * @memberof alert.lib
      * @constructor
      * @param {string} message - The message to be displayed in the info alert.
      */
     constructor(message: string) {
-        super(message, "warning");
+        super(message, 'warning');
     }
 }

src/frontend/components/button/index.js

@@ -1,4 +1,4 @@
-import { initializeComponent } from 'component'
-import ButtonComponent from './lib/component'
+import { initializeComponent } from 'component';
+import ButtonComponent from './lib/component';
 
-export default (scope) => initializeComponent(scope, 'button[class*="btn-js-"]', ButtonComponent)
+export default (scope) => initializeComponent(scope, 'button[class*="btn-js-"]', ButtonComponent);

src/frontend/components/button/lib/RenderableButton.ts

@@ -1,18 +1,31 @@
-import { Renderable } from "util/renderable";
+import { Renderable } from 'util/renderable';
 
+/**
+ * A simple button component that can be rendered to the DOM. It takes a text, an onClick handler, and an optional list of CSS classes.
+ */
 export class RenderableButton implements Renderable<HTMLButtonElement> {
     classList: string[] = [];
 
+    /**
+     * Creates a new RenderableButton instance.
+     * @param text The text to display in the button
+     * @param onClick The onclick listener for when the button is clicked
+     * @param classList Any classes to add to the button
+     */
     constructor(private readonly text: string, private readonly onClick: (ev: MouseEvent)=>void, ...classList: string[]) {
         this.classList = classList;
     }
 
+    /**
+     * Renders the button to an HTMLButtonElement.
+     * @returns A button element to attach to the DOM
+     */
     render(): HTMLButtonElement {
         const button = document.createElement('button');
         button.textContent = this.text;
         button.addEventListener('click', this.onClick);
         button.classList.add(...this.classList, 'btn');
-        const btnType = this.classList.find(b=>b.startsWith('btn-')) ? '' : 'btn-default'
+        const btnType = this.classList.find(b=>b.startsWith('btn-')) ? '' : 'btn-default';
         if(btnType) {
             button.classList.add(btnType);
         }

src/frontend/components/button/lib/cancel-button.ts

@@ -1,9 +1,14 @@
-import { clearSavedFormValues } from "./common";
+import { clearSavedFormValues } from './common';
 
+/**
+ * Create a cancel button that navigates away from the page
+ * This component will navigate away to the parameter defined in the data-href attribute, or will navigate back
+ * @param { HTMLElement | JQuery<HTMLElement> } el The button element
+ */
 export default function createCancelButton(el: HTMLElement | JQuery<HTMLElement>) {
     const $el = $(el);
     if ($el[0].tagName !== 'BUTTON') return;
-    $el.data('cancel-button', "true");
+    $el.data('cancel-button', 'true');
     $el.on('click', async () => {
         const href = $el.data('href');
         await clearSavedFormValues();
@@ -12,4 +17,4 @@ export default function createCancelButton(el: HTMLElement | JQuery<HTMLElement>
         else
             window.history.back();
     });
-}
+}

src/frontend/components/button/lib/common.test.ts

@@ -1,23 +1,23 @@
-import { describe, it, expect } from "@jest/globals"
-import { layoutId, recordId, table_key } from "./common";
+import { describe, it, expect } from '@jest/globals';
+import { layoutId, recordId, table_key } from './common';
 
-describe("Common button tests", () => {
-    it("should populate table_key", () => {
-        expect(table_key()).toBe("linkspace-record-change-undefined-0"); // Undefined because $('body').data('layout-identifier') is not defined
+describe('Common button tests', () => {
+    it('should populate table_key', () => {
+        expect(table_key()).toBe('linkspace-record-change-undefined-0'); // Undefined because $('body').data('layout-identifier') is not defined
     });
 
-    it("should have a layoutId", () => {
+    it('should have a layoutId', () => {
         $('body').data('layout-identifier', 'layoutId');
         expect(layoutId()).toBe('layoutId');
     });
 
-    it("should have a recordId", () => {
-        expect(isNaN(parseInt(location.pathname.split('/').pop() ?? ""))).toBe(true);
+    it('should have a recordId', () => {
+        expect(isNaN(parseInt(location.pathname.split('/').pop() ?? ''))).toBe(true);
         expect(recordId()).toBe(0);
     });
 
-    it("should populate table_key fully", () => {
+    it('should populate table_key fully', () => {
         $('body').data('layout-identifier', 'layoutId');
-        expect(table_key()).toBe("linkspace-record-change-layoutId-0");
+        expect(table_key()).toBe('linkspace-record-change-layoutId-0');
     });
 });