chore: replace eslint/dprint with biome (#396)

Removes eslint and adds biome, which is a much faster linter that can handle TypeScript out of the box, and also does formatting. Removes circular dependencies related to importing elements into the route map, but also route map into elements. This caused a problem with vite's HMR depending on the exact order of the imports. The solution here is to only map routes to elements where needed (in this case only App.tsx).
AxisCommunications · Feb 25, 2025 · 52ecb1f · 52ecb1f
1 parent 6d32c5d
commit 52ecb1f
Show file tree

Hide file tree

Showing 201 changed files with 13,953 additions and 5,411 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -12,9 +12,8 @@ updates:
           - "patch"
         patterns:
           - "*vite*"
+          - "*biome*"
           - "depcheck"
-          - "dprint"
-          - "eslint*"
           - "ts-node"
           - "typescript"
       fluent:

diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,5 @@
 # Tools
 .DS_Store
-.eslintcache
 
 node_modules/
 lib

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,8 +1,7 @@
 {
   "recommendations": [
     "arcanis.vscode-zipfs",
-    "dbaeumer.vscode-eslint",
-    "dprint.dprint",
+    "biomejs.biome",
     "streetsidesoftware.code-spell-checker"
   ]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,11 +1,28 @@
 {
-  "editor.defaultFormatter": "dprint.dprint",
+  "editor.defaultFormatter": "biomejs.biome",
+  "editor.codeActionsOnSave": {
+    "quickfix.biome": "explicit",
+    "source.organizeImports.biome": "explicit"
+  },
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
   "search.exclude": {
     "**/.yarn": true,
     "**/.pnp.*": true
   },
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "eslint.workingDirectories": [
-    {"mode":"auto"}
-  ]
+  "typescript.tsdk": "node_modules/typescript/lib"
 }
diff --git a/biome.json b/biome.json
@@ -0,0 +1,51 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "vcs": { "enabled": true, "clientKind": "git", "useIgnoreFile": true },
+  "files": {
+    "include": [
+      "**/*.json",
+      "**/*.js",
+      "**/*.mjs",
+      "**/*.cjs",
+      "**/*.ts",
+      "**/*.tsx"
+    ],
+    "ignore": ["lib/", ".vscode/"]
+  },
+  "organizeImports": {
+    "enabled": true,
+    "ignore": ["generated/", ".vscode/"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "lineWidth": 80
+  },
+  "linter": {
+    "enabled": true,
+    "ignore": ["generated/", ".vscode/"],
+    "rules": {
+      "recommended": false,
+      "correctness": {
+        "recommended": true,
+        "noUnusedImports": "error",
+        "noUnusedVariables": "error"
+      },
+      "security": {
+        "recommended": true
+      },
+      "suspicious": {
+        "recommended": true,
+        "noArrayIndexKey": "off",
+        "noExplicitAny": "off",
+        "noImplicitAnyLet": "off"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "trailingCommas": "es5"
+    },
+    "jsxRuntime": "reactClassic"
+  }
+}
diff --git a/components/empty-view/.eslintrc.json b/components/empty-view/.eslintrc.json
diff --git a/components/empty-view/package.json b/components/empty-view/package.json
@@ -17,19 +17,16 @@
       "import": "./lib/index.js"
     }
   },
-  "files": [
-    "lib"
-  ],
+  "files": ["lib"],
   "scripts": {
     "prebuild": "pnpm run -C ../../illustrations build",
     "build": "pnpm prebuild && tsc",
     "check:unused-deps": "depcheck . --config=depcheck.yml",
-    "lint": "tsc --noEmit && eslint . --cache"
+    "lint": "tsc --noEmit && biome check"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "eslint": "^8.57.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.5.5"

diff --git a/components/empty-view/src/constants.ts b/components/empty-view/src/constants.ts
@@ -1,7 +1,6 @@
 import {
   AddUserProfileDark,
   AddUserProfileLight,
-  bundleIllustrationSmart,
   CodeErrorDark,
   CodeErrorLight,
   DataDark,
@@ -42,6 +41,7 @@ import {
   TeamLight,
   UnderConstructionDark,
   UnderConstructionLight,
+  bundleIllustrationSmart,
 } from "@axiscommunications/fluent-illustrations";
 import { IllustrationKind } from "./types.js";
 

diff --git a/components/empty-view/src/view.tsx b/components/empty-view/src/view.tsx
@@ -11,19 +11,19 @@ import {
 
 import { useMediaQuery } from "@axiscommunications/fluent-hooks";
 
+import { Illustration } from "./constants.js";
 import { useContainerStyle, useStyles } from "./styles.js";
 import {
   ContentProps,
   EmptyViewProps,
   HtmlDivAttributesRestProps,
 } from "./types.js";
-import { Illustration } from "./constants.js";
 
-function ContainerSpacious(
-  { children, className, ...rest }: PropsWithChildren<
-    HtmlDivAttributesRestProps
-  >
-) {
+function ContainerSpacious({
+  children,
+  className,
+  ...rest
+}: PropsWithChildren<HtmlDivAttributesRestProps>) {
   const styles = useStyles();
   const containerStyle = useContainerStyle({ className });
 
@@ -37,11 +37,11 @@ function ContainerSpacious(
   );
 }
 
-function ContainerCompact(
-  { children, className, ...rest }: PropsWithChildren<
-    HtmlDivAttributesRestProps
-  >
-) {
+function ContainerCompact({
+  children,
+  className,
+  ...rest
+}: PropsWithChildren<HtmlDivAttributesRestProps>) {
   const styles = useStyles();
   const containerStyle = useContainerStyle({ className });
 
@@ -54,11 +54,11 @@ function ContainerCompact(
   );
 }
 
-function ContainerTop(
-  { children, className, ...rest }: PropsWithChildren<
-    HtmlDivAttributesRestProps
-  >
-) {
+function ContainerTop({
+  children,
+  className,
+  ...rest
+}: PropsWithChildren<HtmlDivAttributesRestProps>) {
   const styles = useStyles();
   const containerStyle = useContainerStyle({ className });
 
@@ -106,9 +106,10 @@ function ContentSmall({ body, illustration, title }: ContentProps) {
   );
 }
 
-function ContentExtraSmall(
-  { title, body }: Omit<ContentProps, "illustration">
-) {
+function ContentExtraSmall({
+  title,
+  body,
+}: Omit<ContentProps, "illustration">) {
   const screenStyles = useStyles();
   return (
     <>
@@ -118,36 +119,42 @@ function ContentExtraSmall(
   );
 }
 
-export function MainEmptyView(
-  { after, illustration, title, children, ...rest }: EmptyViewProps
-) {
+export function MainEmptyView({
+  after,
+  illustration,
+  title,
+  children,
+  ...rest
+}: EmptyViewProps) {
   const screenStyles = useStyles();
   const media = useMediaQuery();
   return (
     <ContainerSpacious {...rest}>
-      {media === "small"
-        ? (
-          <ContentMedium
-            illustration={illustration}
-            title={title}
-            body={children}
-          />
-        )
-        : (
-          <ContentLarge
-            illustration={illustration}
-            title={title}
-            body={children}
-          />
-        )}
+      {media === "small" ? (
+        <ContentMedium
+          illustration={illustration}
+          title={title}
+          body={children}
+        />
+      ) : (
+        <ContentLarge
+          illustration={illustration}
+          title={title}
+          body={children}
+        />
+      )}
       <div className={screenStyles.after}>{after}</div>
     </ContainerSpacious>
   );
 }
 
-export function PanelEmptyView(
-  { after, illustration, title, children, ...rest }: EmptyViewProps
-) {
+export function PanelEmptyView({
+  after,
+  illustration,
+  title,
+  children,
+  ...rest
+}: EmptyViewProps) {
   const screenStyles = useStyles();
   return (
     <ContainerTop {...rest}>
@@ -161,9 +168,12 @@ export function PanelEmptyView(
   );
 }
 
-export function SubmenuEmptyView(
-  { illustration, title, children, ...rest }: Omit<EmptyViewProps, "after">
-) {
+export function SubmenuEmptyView({
+  illustration,
+  title,
+  children,
+  ...rest
+}: Omit<EmptyViewProps, "after">) {
   return (
     <ContainerTop {...rest}>
       <ContentSmall illustration={illustration} title={title} body={children} />
@@ -184,9 +194,12 @@ export function SubmenuEmptyView(
  * </DialogContent>
  * ```
  */
-export function DialogEmptyView(
-  { after, title, children, ...rest }: Omit<EmptyViewProps, "illustration">
-) {
+export function DialogEmptyView({
+  after,
+  title,
+  children,
+  ...rest
+}: Omit<EmptyViewProps, "illustration">) {
   const screenStyles = useStyles();
   return (
     <ContainerCompact {...rest}>

diff --git a/components/password-input/.eslintrc.json b/components/password-input/.eslintrc.json
diff --git a/components/password-input/package.json b/components/password-input/package.json
@@ -21,15 +21,13 @@
   "main": "lib/cjs/index.js",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
-  "files": [
-    "lib"
-  ],
+  "files": ["lib"],
   "scripts": {
     "build": "pnpm build:cjs && pnpm build:esm",
     "build:cjs": "tsc --module commonjs --outDir lib/cjs",
     "build:esm": "tsc",
     "check:unused-deps": "depcheck . --config=depcheck.yml",
-    "lint": "tsc --noEmit && eslint . --cache",
+    "lint": "tsc --noEmit && biome check",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest watch"
@@ -39,7 +37,6 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitest/coverage-c8": "^0.33.0",
-    "eslint": "^8.57.1",
     "jsdom": "^26.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",