chore: use biome for formatting and linting

frontend/.storybook/preview.ts

@@ -1,5 +1,5 @@
-import type { Preview, ReactRenderer } from "@storybook/react";
 import { withThemeByClassName } from '@storybook/addon-themes';
+import type { Preview, ReactRenderer } from "@storybook/react";
 import '../src/index.css';
 
 const preview: Preview = {

frontend/biome.json

@@ -0,0 +1,45 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "organizeImports": {
+    "enabled": true,
+    "ignore": ["./node_modules", "./dist", "./src/protos"]
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "a11y": {
+        "useKeyWithClickEvents": "off"
+      },
+      "correctness": {
+        "useExhaustiveDependencies": "off"
+      },
+      "suspicious": {
+        "noArrayIndexKey": "off"
+      }
+    },
+    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx", "src/**/*.cjs", "src/**/*.mjs"],
+    "ignore": ["./node_modules", "./dist", "./src/protos"]
+  },
+  "formatter": {
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 160,
+    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx", "src/**/*.cjs", "src/**/*.mjs"],
+    "ignore": ["./node_modules", "./dist", "./src/protos"]
+  },
+  "javascript": {
+    "formatter": {
+      "semicolons": "asNeeded",
+      "indentStyle": "space",
+      "quoteStyle": "single",
+      "jsxQuoteStyle": "single"
+    }
+  },
+  "json": {
+    "formatter": {
+      "indentStyle": "space",
+      "indentWidth": 2
+    }
+  }
+}

frontend/package.json

@@ -8,19 +8,15 @@
     "build:css-types": "tcm --c -p  'src/**/*.css' .",
     "copy:css": "node ./scripts/copy-css.cjs",
     "dev": "vite",
-    "lint": "eslint . --ext .ts,.tsx,.js,.cjs",
-    "lint:fix": "npm run lint -- --fix --quiet",
+    "lint": "biome check .",
+    "lint:fix": "biome format . --write",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "lint-staged": {
-    "*.(js|cjs|tsx|ts)": [
-      "npm run lint:fix"
-    ]
+    "*.(js|cjs|tsx|ts)": ["npm run lint:fix"]
   },
-  "browserslist": [
-    "> 2%"
-  ],
+  "browserslist": ["> 2%"],
   "source": "index.html",
   "dependencies": {
     "@bufbuild/protoc-gen-es": "1.10.0",
@@ -51,6 +47,7 @@
     "type-fest": "^4.18.2"
   },
   "devDependencies": {
+    "@biomejs/biome": "1.8.3",
     "@chromatic-com/storybook": "^1.6.1",
     "@storybook/addon-essentials": "^8.2.7",
     "@storybook/addon-interactions": "^8.2.7",

frontend/src/App.tsx

@@ -1,11 +1,11 @@
 import { Navigate, Route, Routes } from 'react-router-dom'
+import { ConsolePage } from './features/console/ConsolePage.tsx'
 import { DeploymentPage } from './features/deployments/DeploymentPage.tsx'
 import { DeploymentsPage } from './features/deployments/DeploymentsPage.tsx'
 import { TimelinePage } from './features/timeline/TimelinePage.tsx'
 import { VerbPage } from './features/verbs/VerbPage.tsx'
 import { Layout } from './layout/Layout.tsx'
 import { NotFoundPage } from './layout/NotFoundPage.tsx'
-import { ConsolePage } from './features/console/ConsolePage.tsx'
 
 export const App = () => {
   return (

frontend/src/components/Card.tsx

@@ -11,9 +11,7 @@ export const Card = ({ topBarColor, className, onClick, children }: Props) => {
       onClick={onClick}
       className={`relative rounded-md border border-gray-200 dark:border-gray-500 ${onClick ? 'cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-700' : ''} ${className}`}
     >
-      {topBarColor && (
-        <div className='absolute top-0 left-0 right-0 h-1 bg-green-400 rounded-t-md -mt-px -ml-px -mr-px'></div>
-      )}
+      {topBarColor && <div className='absolute top-0 left-0 right-0 h-1 bg-green-400 rounded-t-md -mt-px -ml-px -mr-px' />}
 
       <div className={`${topBarColor ? 'mt-1' : ''} p-2`}>{children}</div>
     </div>

frontend/src/components/CloseButton.tsx

@@ -6,8 +6,8 @@ interface Props {
 
 export const CloseButton = ({ onClick }: Props) => {
   return (
-    <button onClick={onClick} className='rounded-sm hover:bg-gray-200 dark:hover:bg-slate-500'>
-      <XMarkIcon className={`h-5 w-5`} />
+    <button type='button' onClick={onClick} className='rounded-sm hover:bg-gray-200 dark:hover:bg-slate-500'>
+      <XMarkIcon className={'h-5 w-5'} />
     </button>
   )
 }