[PM-17496] Migrate eslint to flat config (#12806)

The legacy config is deprecated and will be removed in eslint 10. The flat config also allows us to write js functions which will assist in handling limitations with multiple identical rules.

.github/renovate.json

@@ -71,12 +71,8 @@
     },
     {
       "matchPackageNames": [
-        "@angular-eslint/eslint-plugin-template",
-        "@angular-eslint/eslint-plugin",
         "@angular-eslint/schematics",
-        "@angular-eslint/template-parser",
-        "@typescript-eslint/eslint-plugin",
-        "@typescript-eslint/parser",
+        "angular-eslint",
         "eslint-config-prettier",
         "eslint-import-resolver-typescript",
         "eslint-plugin-import",
@@ -86,7 +82,8 @@
         "eslint-plugin-tailwindcss",
         "eslint",
         "husky",
-        "lint-staged"
+        "lint-staged",
+        "typescript-eslint"
       ],
       "description": "Architecture owned dependencies",
       "commitMessagePrefix": "[deps] Architecture:",

.storybook/main.ts

@@ -1,7 +1,8 @@
 import { dirname, join } from "path";
+
 import { StorybookConfig } from "@storybook/angular";
-import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
 import remarkGfm from "remark-gfm";
+import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
 
 const config: StorybookConfig = {
   stories: [
@@ -29,6 +30,8 @@ const config: StorybookConfig = {
     getAbsolutePath("@storybook/addon-designs"),
     getAbsolutePath("@storybook/addon-interactions"),
     {
+      // @storybook/addon-docs is part of @storybook/addon-essentials
+      // eslint-disable-next-line storybook/no-uninstalled-addons
       name: "@storybook/addon-docs",
       options: {
         mdxPluginOptions: {

.storybook/manager.js

@@ -50,10 +50,14 @@ const darkTheme = create({
 });
 
 export const getPreferredColorScheme = () => {
-  if (!globalThis || !globalThis.matchMedia) return "light";
+  if (!globalThis || !globalThis.matchMedia) {
+    return "light";
+  }
 
   const isDarkThemePreferred = globalThis.matchMedia("(prefers-color-scheme: dark)").matches;
-  if (isDarkThemePreferred) return "dark";
+  if (isDarkThemePreferred) {
+    return "dark";
+  }
 
   return "light";
 };

.vscode/settings.json

@@ -7,5 +7,6 @@
     "**/_locales/*[^n]/messages.json": true
   },
   "rust-analyzer.linkedProjects": ["apps/desktop/desktop_native/Cargo.toml"],
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "eslint.useFlatConfig": true
 }

apps/browser/src/autofill/content/components/.lit-storybook/main.ts

@@ -1,8 +1,8 @@
-import { dirname, join } from "path";
-import path from "path";
+import path, { dirname, join } from "path";
+
 import type { StorybookConfig } from "@storybook/web-components-webpack5";
-import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
 import remarkGfm from "remark-gfm";
+import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
 
 const getAbsolutePath = (value: string): string =>
   dirname(require.resolve(join(value, "package.json")));