Replace ESLint & Prettier with Biome (#821)

[biomejs.dev](https://biomejs.dev/) is a modern replacement for both
prettier+eslint written in Rust. It's really really fast, like 10x the
speed of eslint+prettier and it has a really extensive linting ruleset.

As you can see from the diff, the formatting options are 100% compatible
with what we already have.

If we want to, we can also turn on organizeImports which alphabetically
sorts the imports. I have not done that yet, since that would dilute the
diff with like 100 files changed.

Instead of spending two minutes waiting for lintfix, it now takes 2.5
seconds for all the code


![image](https://github.com/dotkom/monoweb/assets/42585241/8299a39a-20f3-4346-a2af-dd3c975644d0)

## CI Lint times

The crazy 🦀 🦀 language speed can also be felt in the CI
pipeline. Here is before and after


![image](https://github.com/dotkom/monoweb/assets/42585241/9cc3c22c-7f3c-4634-b881-92545864e850)

![image](https://github.com/dotkom/monoweb/assets/42585241/d8ba02df-188d-48c8-b82b-1630262e6b40)

.github/workflows/ci.yml

@@ -63,7 +63,7 @@ jobs:
         run: pnpm type-check
 
       - name: Lint
-        run: pnpm lint
+        run: pnpm lint-check
 
       - name: Build
         run: pnpm run build

.npmrc

@@ -1,5 +1,2 @@
 public-hoist-pattern[]='*storybook*'
 public-hoist-pattern[]='*types*'
-public-hoist-pattern[]='*eslint*'
-public-hoist-pattern[]='@prettier/plugin-*'
-public-hoist-pattern[]='*prettier-plugin-*'

apps/dashboard/biome.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "extends": ["../../packages/config/biome.json"]
+}

apps/dashboard/package.json

@@ -6,8 +6,8 @@
     "dev": "next dev -p 3002",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint --max-warnings 0 .",
-    "lint:fix": "eslint --fix .",
+    "lint": "biome check . --apply",
+    "lint-check": "biome check .",
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
@@ -43,17 +43,14 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.5.3",
     "@dotkomonline/config": "workspace:^",
-    "@types/eslint": "^8.44.7",
     "@types/node": "^18.18.13",
     "@types/react": "^18.2.38",
     "@types/react-dom": "^18.2.17",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.54.0",
-    "eslint-config-next": "^14.0.3",
     "open-color": "^1.9.1",
     "postcss": "^8.4.31",
-    "prettier": "^3.1.0",
     "tailwindcss": "^3.3.5",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",

apps/dashboard/postcss.config.cjs

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    "autoprefixer": {},
+    autoprefixer: {},
     "postcss-preset-mantine": {},
     "postcss-simple-vars": {
       variables: {

apps/dashboard/src/app/form.tsx

@@ -223,7 +223,7 @@ export function createFileInput<F extends FieldValues>({
               label=""
             />
           )}
-        ></Controller>
+        />
       </Box>
     )
   }

apps/dashboard/src/modules/event/mutations/use-add-company-to-event-mutation.ts

@@ -7,7 +7,7 @@ export const useAddCompanyToEventMutation = () => {
     onMutate: () => {
       notification.loading({
         title: "Legger til bedrift...",
-        message: `Legger til bedriften som arrangør av dette arrangementet.`,
+        message: "Legger til bedriften som arrangør av dette arrangementet.",
       })
     },
     onSuccess: () => {

apps/dashboard/src/modules/event/mutations/use-deregister-for-event-mutation.ts

@@ -14,7 +14,7 @@ export const useDeregisterForEventMutation = () => {
     onSuccess: () => {
       notification.complete({
         title: "Avmelding vellykket",
-        message: `Bruker ble meldt av arrangementet.`,
+        message: "Bruker ble meldt av arrangementet.",
       })
     },
     onError: (err) => {

apps/dashboard/src/modules/event/mutations/use-remove-company-from-event-mutation.ts

@@ -7,7 +7,7 @@ export const useRemoveCompanyFromEventMutation = () => {
     onMutate: () => {
       notification.loading({
         title: "Fjerner bedrift",
-        message: `Fjerner bedriften fra arrangørlisten til dette arrangementet.`,
+        message: "Fjerner bedriften fra arrangørlisten til dette arrangementet.",
       })
     },
     onSuccess: () => {

apps/dashboard/src/utils/s3-upload-file.ts

@@ -4,9 +4,9 @@ import { type File } from "../../stubs/file/File"
 export async function s3UploadFile(file: File, fields: Record<string, string>, url: string): Promise<string> {
   try {
     const formData = new FormData()
-    Object.entries(fields).forEach(([key, value]) => {
+    for (const [key, value] of Object.entries(fields)) {
       formData.append(key, value)
-    })
+    }
 
     // Append the file to the formData
     formData.append("file", file)

apps/dashboard/src/utils/trpc.ts

@@ -11,7 +11,7 @@ const getBaseUrl = () => {
   if (env.NEXT_PUBLIC_NODE_ENV === "production") {
     return "https://web.online.ntnu.no"
   }
-  return `http://localhost:3000`
+  return "http://localhost:3000"
 }
 
 export const trpcConfig: CreateTRPCClientOptions<AppRouter> = {

apps/gateway-email/biome.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "extends": ["../../packages/config/biome.json"]
+}

apps/gateway-email/package.json

@@ -6,8 +6,8 @@
   "scripts": {
     "docker:dev": "docker run -p 9000:8080 -e AWS_ACCESS_KEY_ID -e AWS_SECRET_ACCESS_KEY -e AWS_REGION=eu-north-1 gateway-email:latest",
     "build": "tsup src/lambda.ts && echo '{\"type\":\"module\"}' > dist/package.json",
-    "lint": "eslint --max-warnings 0 .",
-    "lint:fix": "eslint --fix .",
+    "lint": "biome check . --apply",
+    "lint-check": "biome check .",
     "docker:build": "docker build --platform linux/amd64 -t gateway-email:latest -f Dockerfile ../..",
     "docker:push:staging": "docker tag gateway-email:latest 891459268445.dkr.ecr.eu-north-1.amazonaws.com/brevduen-staging:latest && docker push 891459268445.dkr.ecr.eu-north-1.amazonaws.com/brevduen-staging:latest",
     "docker:push:prod": "docker tag gateway-email:latest 891459268445.dkr.ecr.eu-north-1.amazonaws.com/brevduen-prod:latest && docker push 891459268445.dkr.ecr.eu-north-1.amazonaws.com/brevduen-prod:latest",
@@ -21,6 +21,7 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.5.3",
     "@types/aws-lambda": "^8.10.129",
     "@types/node": "18.18.13",
     "tsup": "^7.2.0",

apps/gateway-email/src/lambda.ts

@@ -15,10 +15,10 @@ const templates = [
   HelloWorldTemplate,
   InterestFormForBedkomTemplate,
   InterestFormForCompanyTemplate,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny: this should be any
 ] satisfies Template<any>[]
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// biome-ignore lint/suspicious/noExplicitAny: this too, should be any
 const templateMap = templates.reduce<Record<string, Template<any>>>((acc, curr) => {
   acc[curr.displayName] = curr
   return acc
@@ -77,7 +77,8 @@ export const handler: Handler<APIGatewayProxyEventV2, APIGatewayProxyResultV2> =
   } catch (err) {
     if (err instanceof ZodError) {
       return { statusCode: 400, body: "Provided arguments don't match email input schema" }
-    } else if (err instanceof InvalidTemplateArguments) {
+    }
+    if (err instanceof InvalidTemplateArguments) {
       return { statusCode: 400, body: "Arguments provided to template don't match the template's arguments" }
     }
     console.error(err)

apps/rif/biome.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "extends": ["../../packages/config/biome.json"]
+}

apps/rif/package.json

@@ -6,8 +6,8 @@
     "dev": "next dev -p 3003",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint --max-warnings 0 .",
-    "lint:fix": "eslint --fix .",
+    "lint": "biome check . --apply",
+    "lint-check": "biome check .",
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
@@ -29,16 +29,13 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.5.3",
     "@dotkomonline/config": "workspace:^",
-    "@types/eslint": "^8.44.7",
     "@types/node": "^18.18.13",
     "@types/react": "^18.2.38",
     "@types/react-dom": "^18.2.17",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.54.0",
-    "eslint-config-next": "^14.0.3",
     "postcss": "^8.4.31",
-    "prettier": "^3.1.0",
     "tailwindcss": "^3.3.5",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2"

apps/rif/src/app/page.tsx

@@ -30,7 +30,6 @@ export default function Page() {
   return (
     <main className="mx-auto flex max-w-2xl flex-col gap-12 px-3 py-12">
       <Section>
-        {/* eslint-disable-next-line @next/next/no-img-element */}
         <img src="/Online_bla.svg" alt="Online logo" />
         <Title element="h1">Interesseskjema for bedrifter</Title>
         <Text>Dette skjemaet skal brukes til å melde interesse for samarbeid med Online.</Text>

apps/rif/src/app/takk/page.tsx

@@ -7,7 +7,6 @@ export default function TakkPage() {
   return (
     <main className="mx-auto flex max-w-2xl flex-col gap-12 px-3 py-12">
       <Section>
-        {/* eslint-disable-next-line @next/next/no-img-element */}
         <img src="/Online_bla.svg" alt="Online logo" />
         <Title element="h1">Takk for interessen.</Title>
         <Text>Takk for at du har vist interesse til bedriftssamarbeid med Linjeforeningen Online.</Text>

apps/rif/src/email.ts

@@ -7,7 +7,7 @@ export const deliverConfirmationEmail = async (form: FormSchema) => {
   const response = await fetch(endpoint, {
     headers: {
       "X-Email-Token": token,
-      "Accept": "application/json",
+      Accept: "application/json",
       "Content-Type": "application/json",
     },
     method: "POST",
@@ -32,7 +32,7 @@ export const deliverNotificationEmail = async (form: FormSchema) => {
   const response = await fetch(endpoint, {
     headers: {
       "X-Email-Token": token,
-      "Accept": "application/json",
+      Accept: "application/json",
       "Content-Type": "application/json",
     },
     method: "POST",
@@ -42,7 +42,7 @@ export const deliverNotificationEmail = async (form: FormSchema) => {
       to: [form.contactEmail],
       cc: [],
       bcc: [],
-      subject: `Kvittering for meldt interesse til Online`,
+      subject: "Kvittering for meldt interesse til Online",
       replyTo: ["[email protected]"],
       arguments: {
         ...form,

apps/sanity/biome.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "extends": ["../../packages/config/biome.json"]
+}

apps/sanity/package.json

@@ -6,6 +6,8 @@
   "license": "UNLICENSED",
   "scripts": {
     "dev": "sanity dev",
+    "lint": "biome check . --apply",
+    "lint-check": "biome check .",
     "start": "sanity start",
     "build:prod": "sanity build",
     "deploy": "sanity deploy",
@@ -23,9 +25,7 @@
     "styled-components": "^6.1.1"
   },
   "devDependencies": {
-    "@sanity/eslint-config-studio": "^3.0.1",
-    "eslint": "^8.54.0",
-    "prettier": "^3.1.0",
+    "@biomejs/biome": "^1.5.3",
     "typescript": "^5.2.2"
   }
 }

apps/web/biome.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "extends": ["../../packages/config/biome.json"]
+}

apps/web/package.json

@@ -9,8 +9,8 @@
     "start": "next start",
     "storybook": "start-storybook -p 6007",
     "build-storybook": "build-storybook",
-    "lint": "eslint --max-warnings 0 .",
-    "lint:fix": "eslint --fix .",
+    "lint": "biome check . --apply",
+    "lint-check": "biome check .",
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
@@ -46,7 +46,6 @@
     "next-superjson-plugin": "^0.5.10",
     "next-themes": "^0.2.1",
     "pg": "^8.11.3",
-    "prettier": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
@@ -55,18 +54,16 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.5.3",
     "@dotkomonline/config": "workspace:*",
     "@dotkomonline/logger": "workspace:*",
     "@types/cors": "^2.8.17",
-    "@types/eslint": "^8.44.7",
     "@types/jsdom": "^21.1.6",
     "@types/node": "^18.18.13",
     "@types/react": "^18.2.38",
     "@types/react-dom": "^18.2.17",
     "autoprefixer": "^10.4.16",
     "cva": "npm:class-variance-authority@^0.7.0",
-    "eslint": "^8.54.0",
-    "eslint-config-next": "^14.0.3",
     "jsdom": "^22.1.0",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.3.5",

apps/web/src/components/atoms/OnlineIcon.tsx

@@ -15,6 +15,7 @@ const OnlineIcon: FC<IconProps> = ({ className }) => (
     xmlnsXlink="http://www.w3.org/1999/xlink"
     xmlSpace="preserve"
   >
+    <title>Online logo</title>
     <g transform="matrix(1,0,0,1,-2947.13,-68.8934)">
       <g transform="matrix(1,0,0,1,1956.71,0)">
         <g transform="matrix(1.33333,0,0,1.33333,886.922,-278.061)">

apps/web/src/components/icons/BedpressIcon.tsx

@@ -16,6 +16,7 @@ const SvgBedpressIcon = (props: SVGProps<SVGSVGElement>) => (
     height="1em"
     {...props}
   >
+    <title>Bedpress icon</title>
     <path
       d="m70.14 83.666 7.926-10.341c7.323-9.092 12.589-6.719 20.706-2.285l46.013 25.134c10.238 5.592 6.874 19.696-9.202 13.709L98.772 93.889c-7.794-3.789-10.523-1.07-9.203 6.854l11.503 111.961c2.977 28.966-21.154 27.669-25.307 4.569l-11.504-63.977-11.503 66.262c-3.2 18.431-27.549 20.66-25.308-4.57l7.171-75.401 12.905.397c20.092.042 20.513-30.801.057-30.844l-9.259-.168-2.433-13.576-13.042 21.342h23.007c11.945 0 10.883 13.709 2.301 13.709H13.646c-11.12 0-13.53-8.861-6.902-20.564l15.791-27.36c7.928-14.231 14.246-9.655 18.87-7.285 3.472 1.78 13.276 10.5 13.276 10.5.017-3.703-1.697-18.983-1.697-18.983 5.369 1.709 13.112 1.805 18.48 0 0 0-1.316 13.803-1.324 16.911Z"
       style={{

apps/web/src/components/icons/FacebookIcon.tsx

@@ -1,5 +1,6 @@
 const FacebookIcon = () => (
   <svg viewBox="0 0 74 73" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Facebook logo</title>
     <rect x="0.432617" width="73.3513" height="73" rx="36.5" fill="#FAB759" />
     <path
       d="M53.2452 19.0435H20.9706C20.1945 19.0435 19.5674 19.6675 19.5674 20.44V52.56C19.5674 53.3324 20.1945 53.9565 20.9706 53.9565H53.2452C54.0214 53.9565 54.6485 53.3324 54.6485 52.56V20.44C54.6485 19.6675 54.0214 19.0435 53.2452 19.0435ZM49.1934 29.2337H46.3913C44.1943 29.2337 43.7689 30.2724 43.7689 31.7998V35.1646H49.0136L48.3295 40.4321H43.7689V53.9565H38.3007V40.4364H33.727V35.1646H38.3007V31.2805C38.3007 26.7723 41.0677 24.3153 45.1108 24.3153C47.049 24.3153 48.711 24.4593 49.1977 24.5248V29.2337H49.1934Z"

apps/web/src/components/icons/GitHubIcon.tsx

@@ -1,5 +1,6 @@
 const GitHubIcon = () => (
   <svg viewBox="0 0 74 73" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>GitHub logo</title>
     <rect x="0.648682" width="73.3513" height="73" rx="36.5" fill="#FAB759" />
     <path
       fillRule="evenodd"