PoC: Migrate from Eslint + Prettier to Biome (#4545)

This PR completely removes ESLint (linter) and Prettier (formatter) and replaces them with Biome.

In this initial PR, only the dependencies and CI configurations are updated to use Biome. All of Biome's failing rules have been temporarily disabled. The plan is to enable these rules incrementally in future PRs.

The current Biome formatting configuration closely mirrors the existing Prettier setup, with the only new feature enabled is import sorting.

Author: bilalabbad

.github/workflows/ci.yml

@@ -90,27 +90,20 @@ jobs:
         run: "yamllint -s ."
 
   javascript-lint:
-    if: needs.files-changed.outputs.javascript == 'true'
-    needs: ["files-changed"]
     runs-on: ubuntu-latest
     timeout-minutes: 5
     steps:
       - name: "Check out repository code"
         uses: "actions/checkout@v4"
         with:
           submodules: true
-      - name: Install NodeJS
-        uses: actions/setup-node@v4
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
         with:
-          node-version: 20
-          cache: 'npm'
-          cache-dependency-path: frontend/app/package-lock.json
-      - name: Install frontend dependencies
-        working-directory: ./frontend/app
-        run: npm install
-      - name: Run ESLint
+          version: 1.9.3
+      - name: Run Biome
         working-directory: ./frontend/app
-        run: npm run eslint
+        run: biome ci .
 
   python-lint:
     if: needs.files-changed.outputs.python == 'true'

frontend/app/.eslintignore

@@ -0,0 +1,115 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
+  "vcs": { "enabled": false, "clientKind": "git", "useIgnoreFile": false },
+  "files": {
+    "ignoreUnknown": false,
+    "ignore": ["./coverage", "./dist", "./playwright-report", "./src/generated", "./test-results"]
+  },
+  "formatter": {
+    "enabled": true,
+    "useEditorconfig": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineEnding": "lf",
+    "lineWidth": 100,
+    "attributePosition": "auto",
+    "bracketSpacing": true
+  },
+  "organizeImports": { "enabled": true },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "all": true,
+      "a11y": {
+        "noSvgWithoutTitle": "off",
+        "useAriaPropsForRole": "off",
+        "useButtonType": "off",
+        "useKeyWithClickEvents": "off",
+        "useSemanticElements": "off"
+      },
+      "complexity": {
+        "noBannedTypes": "off",
+        "noExcessiveCognitiveComplexity": "off",
+        "noForEach": "off",
+        "noUselessFragments": "off",
+        "noUselessSwitchCase": "off",
+        "noUselessThisAlias": "off",
+        "useArrowFunction": "off",
+        "useDateNow": "off",
+        "useOptionalChain": "off",
+        "useSimplifiedLogicExpression": "off"
+      },
+      "correctness": {
+        "noSwitchDeclarations": "off",
+        "noUndeclaredDependencies": "off",
+        "noUndeclaredVariables": "off",
+        "noUnusedFunctionParameters": "off",
+        "noUnusedImports": "off",
+        "noUnusedVariables": "off",
+        "useExhaustiveDependencies": "off",
+        "useHookAtTopLevel": "off",
+        "useImportExtensions": "off"
+      },
+      "performance": {
+        "noAccumulatingSpread": "off",
+        "useTopLevelRegex": "off"
+      },
+      "style": {
+        "noArguments": "off",
+        "noDefaultExport": "off",
+        "noImplicitBoolean": "off",
+        "noInferrableTypes": "off",
+        "noNamespace": "off",
+        "noNamespaceImport": "off",
+        "noNegationElse": "off",
+        "noNonNullAssertion": "off",
+        "noUselessElse": "off",
+        "useBlockStatements": "off",
+        "useConsistentArrayType": "off",
+        "useConsistentBuiltinInstantiation": "off",
+        "useConst": "off",
+        "useDefaultSwitchClause": "off",
+        "useEnumInitializers": "off",
+        "useExplicitLengthCheck": "off",
+        "useFilenamingConvention": "off",
+        "useImportType": "off",
+        "useNamingConvention": "off",
+        "useNumberNamespace": "off",
+        "useSelfClosingElements": "off",
+        "useShorthandArrayType": "off",
+        "useSingleCaseStatement": "off",
+        "useTemplate": "off"
+      },
+      "suspicious": {
+        "noArrayIndexKey": "off",
+        "noAssignInExpressions": "off",
+        "noConsole": "off",
+        "noConsoleLog": "off",
+        "noDoubleEquals": "off",
+        "noEmptyBlock": "off",
+        "noEmptyBlockStatements": "off",
+        "noEvolvingTypes": "off",
+        "noExplicitAny": "off",
+        "noExportsInTest": "off",
+        "noGlobalIsNan": "off",
+        "noImplicitAnyLet": "off",
+        "noReactSpecificProps": "off",
+        "useAwait": "off"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "trailingCommas": "es5",
+      "semicolons": "always",
+      "arrowParentheses": "always",
+      "bracketSameLine": false,
+      "quoteStyle": "double",
+      "attributePosition": "auto",
+      "bracketSpacing": true
+    }
+  }
+}

frontend/app/.eslintrc

@@ -60,7 +60,8 @@ Cypress.Commands.add("mount", (component, options = {}) => {
           options={{
             searchStringToObject: queryString.parse,
             objectToSearchString: queryString.stringify,
-          }}>
+          }}
+        >
           {component}
         </QueryParamProvider>
       </MemoryRouter>