Merge pull request #246 from axonivy/eslint9

Eslint9

build/Jenkinsfile

@@ -24,7 +24,7 @@ pipeline {
             "<a href=${BUILD_URL}artifact/integrations/standalone/build/mock.html>&raquo; Form Editor Mock</a>"
 
           withChecks('ESLint') {
-            recordIssues enabledForFailure: true, publishAllIssues: true, aggregatingResults: true, tools: [esLint(pattern: 'packages/**/eslint.xml,integrations/**/eslint.xml')], qualityGates: [[threshold: 1, type: 'TOTAL', unstable: true]]
+            recordIssues enabledForFailure: true, publishAllIssues: true, aggregatingResults: true, tools: [esLint(pattern: 'eslint.xml')], qualityGates: [[threshold: 1, type: 'TOTAL', unstable: true]]
           }
           withChecks('Test') {
             junit testDataPublishers: [[$class: 'StabilityTestDataPublisher']], testResults: 'packages/**/report.xml'

eslint.config.mjs

@@ -0,0 +1,127 @@
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import reactRecommended from 'eslint-plugin-react/configs/recommended.js';
+import reactJsxRuntime from 'eslint-plugin-react/configs/jsx-runtime.js';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactCompiler from 'eslint-plugin-react-compiler';
+import testingLibrary from 'eslint-plugin-testing-library';
+import playwright from 'eslint-plugin-playwright';
+import pluginQuery from '@tanstack/eslint-plugin-query';
+import globals from 'globals';
+
+export default tseslint.config(
+  // Base eslint recommended config
+  eslint.configs.recommended,
+
+  // TypeScript recommended configs
+  ...tseslint.configs.strict,
+  {
+    name: 'typescript-eslint',
+    languageOptions: {
+      parserOptions: {
+        project: true, // Uses tsconfig.json from current directory
+        tsconfigRootDir: import.meta.dirname
+      }
+    }
+  },
+
+  // React recommended configs
+  {
+    name: 'eslint-plugin-react/configs/recommended',
+    ...reactRecommended
+  },
+  {
+    name: 'eslint-plugin-react/configs/jsx-runtime',
+    ...reactJsxRuntime
+  },
+  {
+    name: 'eslint-plugin-react',
+    languageOptions: {
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true
+        }
+      },
+      globals: {
+        ...globals.browser
+      }
+    },
+    settings: {
+      react: {
+        version: 'detect'
+      }
+    },
+    rules: {
+      'react/display-name': 'off'
+    }
+  },
+  {
+    name: 'eslint-plugin-react-hooks',
+    plugins: {
+      'react-hooks': reactHooks
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules
+    }
+  },
+  {
+    name: 'eslint-plugin-react-compiler',
+    plugins: {
+      'react-compiler': reactCompiler
+    },
+    rules: {
+      'react-compiler/react-compiler': 'error'
+    }
+  },
+
+  // Testing library recommended configs
+  {
+    name: 'eslint-plugin-testing-library',
+    files: ['**/*.test.{js,mjs,cjs,ts,jsx,tsx}'],
+    ...testingLibrary.configs['flat/react']
+  },
+
+  // Playwright recommended configs
+  {
+    name: 'eslint-plugin-playwright',
+    files: ['**/*.spec.{js,mjs,cjs,ts,jsx,tsx}'],
+    ...playwright.configs['flat/recommended'],
+    rules: {
+      ...playwright.configs['flat/recommended'].rules,
+      'playwright/expect-expect': 'off'
+    }
+  },
+
+  // Tanstack recommended configs
+  {
+    name: '@tanstack/eslint-plugin-query',
+    plugins: {
+      '@tanstack/query': pluginQuery
+    },
+    rules: {
+      ...pluginQuery.configs.recommended.rules
+    }
+  },
+
+  // Project-specific overrides and custom rules
+  {
+    name: 'ingored-files',
+    ignores: [
+      '**/node_modules/**',
+      'eslint.config.*',
+      '**/vite*.config.*',
+      '**/playwright.config.*',
+      '**/*.d.ts',
+      '**/lib/*',
+      '**/build/*',
+      '**/schemaCodegen.cjs'
+    ]
+  },
+  {
+    name: 'packages/core',
+    files: ['packages/core/**/*.{js,mjs,cjs,ts,jsx,tsx}'],
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off'
+    }
+  }
+);

integrations/standalone/package.json

@@ -30,9 +30,7 @@
     "package": "vite build",
     "type": "tsc --noEmit",
     "dev": "vite",
-    "serve": "vite preview",
-    "lint": "eslint --ext .ts,.tsx ./src",
-    "lint:fix": "eslint --fix --ext .ts,.tsx ./src"
+    "serve": "vite preview"
   },
   "type": "module",
   "browserslist": {

integrations/standalone/src/index.tsx

@@ -5,18 +5,22 @@ import { ThemeProvider, ReadonlyProvider, toast, Toaster, Spinner, Flex } from '
 import { webSocketConnection, type Connection } from '@axonivy/jsonrpc';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { URLParams } from './url-helper';
+import { webSocketBase, appParam, pmvParam, fileParam, directSaveParam, themeParam, readonlyParam } from './url-helper';
 
-export async function start(): Promise<void> {
-  const server = URLParams.webSocketBase();
-  const app = URLParams.app();
-  const pmv = URLParams.pmv();
-  const file = URLParams.file();
-  const directSave = URLParams.directSave();
-  const theme = URLParams.theme();
-  const readonly = URLParams.readonly();
+export async function start() {
+  const server = webSocketBase();
+  const app = appParam();
+  const pmv = pmvParam();
+  const file = fileParam();
+  const directSave = directSaveParam();
+  const theme = themeParam();
+  const readonly = readonlyParam();
   const queryClient = initQueryClient();
-  const root = createRoot(document.getElementById('root')!);
+  const rootElement = document.getElementById('root');
+  if (rootElement === null) {
+    throw new Error('Root element not found');
+  }
+  const root = createRoot(rootElement);
 
   root.render(
     <React.StrictMode>
@@ -53,7 +57,7 @@ export async function start(): Promise<void> {
     return initialize(connection);
   };
 
-  webSocketConnection<FormClientJsonRpc>(FormClientJsonRpc.webSocketUrl(server)).listen({
+  await webSocketConnection<FormClientJsonRpc>(FormClientJsonRpc.webSocketUrl(server)).listen({
     onConnection: initialize,
     onReconnect: reconnect,
     logger: { log: console.log, info: toast.info, warn: toast.warning, error: toast.error }

integrations/standalone/src/mock.tsx

@@ -5,11 +5,15 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { FormClientMock } from './mock/form-client-mock';
 
-export async function start(): Promise<void> {
+export function start() {
   const formClient = new FormClientMock();
   const queryClient = initQueryClient();
 
-  createRoot(document.getElementById('root')!).render(
+  const root = document.getElementById('root');
+  if (root === null) {
+    throw new Error('Root element not found');
+  }
+  createRoot(root).render(
     <React.StrictMode>
       <ThemeProvider defaultTheme='light'>
         <ClientContextProvider client={formClient}>

integrations/standalone/src/mock/form-client-mock.ts

@@ -6,10 +6,10 @@ import type {
   FormSaveData,
   ValidationResult
 } from '@axonivy/form-editor-protocol';
-import { MetaMock } from './meta-mock';
 import { validateMock } from './validation-mock';
 import { Emitter } from '@axonivy/jsonrpc';
 import { data } from './data-mock';
+import { ATTRIBUTES, CMSQUICKACTIONS, COMPOSITE_PARAMS, COMPOSITES } from './meta-mock';
 
 export class FormClientMock implements FormClient {
   private formData: FormEditor = {
@@ -41,13 +41,13 @@ export class FormClientMock implements FormClient {
   meta<TMeta extends keyof FormMetaRequestTypes>(path: TMeta): Promise<FormMetaRequestTypes[TMeta][1]> {
     switch (path) {
       case 'meta/data/attributes':
-        return Promise.resolve(MetaMock.ATTRIBUTES);
+        return Promise.resolve(ATTRIBUTES);
       case 'meta/composite/all':
-        return Promise.resolve(MetaMock.COMPOSITES);
+        return Promise.resolve(COMPOSITES);
       case 'meta/composite/params':
-        return Promise.resolve(MetaMock.COMPOSITE_PARAMS);
+        return Promise.resolve(COMPOSITE_PARAMS);
       case 'meta/cms/cmsQuickActions':
-        return Promise.resolve(MetaMock.CMSQUICKACTIONS);
+        return Promise.resolve(CMSQUICKACTIONS);
       case 'meta/cms/executeCmsQuickAction':
         return Promise.resolve("#{ivy.cms.co('/Labels/Firstname')}");
       case 'meta/data/logic':