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).

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,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"
 }

.vscode/settings.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"
+  }
+}

biome.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"

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