fixup! chore: replace eslint/dprint with biome

Author: steabert

.github/dependabot.yml

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

.gitignore

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

.vscode/extensions.json

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

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

biome.json

@@ -2,8 +2,15 @@
   "$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/", "package.json", ".vscode/"]
+    "include": [
+      "**/*.json",
+      "**/*.js",
+      "**/*.mjs",
+      "**/*.cjs",
+      "**/*.ts",
+      "**/*.tsx"
+    ],
+    "ignore": ["lib/", ".vscode/"]
   },
   "organizeImports": {
     "enabled": true,

components/empty-view/package.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/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";
 

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

components/password-input/package.json

@@ -27,7 +27,7 @@
     "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"
@@ -37,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",

components/password-input/src/password-input.tsx

@@ -7,11 +7,11 @@ import {
 } from "@fluentui/react-components";
 import { EyeOffRegular, EyeRegular } from "@fluentui/react-icons";
 
-import { PasswordInputProps } from "./password-input.types.js";
 import { usePasswordInputStyles } from "./password-input.styles.js";
+import { PasswordInputProps } from "./password-input.types.js";
 
-export const PasswordInput: ForwardRefComponent<PasswordInputProps> = React
-  .forwardRef((props: PasswordInputProps, ref) => {
+export const PasswordInput: ForwardRefComponent<PasswordInputProps> =
+  React.forwardRef((props: PasswordInputProps, ref) => {
     const { className, ...rest } = props;
 
     const styles = usePasswordInputStyles();
@@ -32,9 +32,13 @@ export const PasswordInput: ForwardRefComponent<PasswordInputProps> = React
       <Input
         ref={ref}
         type={isVisible ? "text" : "password"}
-        contentAfter={isVisible
-          ? <EyeOffRegular {...iconProps} />
-          : <EyeRegular {...iconProps} />}
+        contentAfter={
+          isVisible ? (
+            <EyeOffRegular {...iconProps} />
+          ) : (
+            <EyeRegular {...iconProps} />
+          )
+        }
         className={inputStyles}
         {...rest}
       />