chore: replace eslint/dprint with biome

Removes eslint and adds biome, which is a much faster linter
that can handle TypeScript out of the box, and also does formatting.

Author: steabert

.eslintrc.json

@@ -12,9 +12,8 @@ updates:
           - "patch"
         patterns:
           - "*vite*"
+          - "*biome*"
           - "depcheck"
-          - "dprint"
-          - "eslint*"
           - "ts-node"
           - "typescript"
       fluent:

.github/dependabot.yml

@@ -1,6 +1,5 @@
 # Tools
 .DS_Store
-.eslintcache
 
 node_modules/
 lib

.gitignore

@@ -1,8 +1,7 @@
 {
   "recommendations": [
     "arcanis.vscode-zipfs",
-    "dbaeumer.vscode-eslint",
-    "dprint.dprint",
+    "biomejs.biome",
     "streetsidesoftware.code-spell-checker"
   ]
 }

.vscode/extensions.json

@@ -1,11 +1,12 @@
 {
-  "editor.defaultFormatter": "dprint.dprint",
+  "editor.defaultFormatter": "biomejs.biome",
+  "editor.codeActionsOnSave": {
+    "quickfix.biome": "explicit",
+    "source.organizeImports.biome": "explicit"
+  },
   "search.exclude": {
     "**/.yarn": true,
     "**/.pnp.*": true
   },
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "eslint.workingDirectories": [
-    {"mode":"auto"}
-  ]
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

.vscode/settings.json

@@ -0,0 +1,54 @@
+{
+  "$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": {
+        "noUnusedImports": "error",
+        "noUnusedVariables": "error",
+        "recommended": true
+      },
+      "security": {
+        "recommended": true
+      },
+      "suspicious": {
+        "recommended": true,
+        "noArrayIndexKey": "off",
+        "noAssignInExpressions": "off",
+        "noConfusingVoidType": "off",
+        "noExplicitAny": "off",
+        "noGlobalIsNan": "off",
+        "noImplicitAnyLet": "off"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "trailingCommas": "es5"
+    },
+    "jsxRuntime": "reactClassic"
+  }
+}

biome.json

@@ -22,12 +22,11 @@
     "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"

components/empty-view/.eslintrc.json

@@ -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";
 

components/empty-view/package.json

@@ -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}>