Introduce Biome.js for Linting and formatting

.github/pull_request_template.md

@@ -0,0 +1,19 @@
+<!-- Set your PR title -->
+# Your PR Title
+
+## Problem
+<!-- Describe what problem we are encountering -->
+
+## Solution
+<!-- Describe what this PR is trying to solve -->
+
+## Reference
+<!-- If this PR is associated with a GitHub issue in this repository, specify it here; if not, input N/A -->
+
+## Screenshots
+<!-- If your change is visual, it might be helpful to provide some screenshots/videos to showcase the change -->
+
+## Checklist
+
+- [ ] Changes have been tested locally
+- [ ] Changes have been self-reviewed

.github/workflows/pull_request.yml

@@ -0,0 +1,21 @@
+name: Code quality
+
+on:
+  pull_request:
+
+jobs:
+  quality:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+        with:
+          persist-credentials: false
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
+        with:
+          version: latest
+      - name: Run Biome
+        run: biome ci .

app/api/client.ts

@@ -1,4 +1,4 @@
-import { createClient } from '@supabase/supabase-js';
-import { databaseApiKey, databaseUrl } from '~/constants/db';
+import { createClient } from "@supabase/supabase-js";
+import { databaseApiKey, databaseUrl } from "~/constants/db";
 
 export const client = createClient(databaseUrl, databaseApiKey);

app/api/resources/methods.ts

@@ -1,10 +1,10 @@
+import { client } from "~/api/client";
+import type { ModelAPI } from "~/api/types";
 import type {
   ResourceEntry,
   ResourceStatus,
   ResourceType,
-} from '~/types/ResourceEntry';
-import type { ModelAPI } from '~/api/types';
-import { client } from '~/api/client';
+} from "~/types/ResourceEntry";
 
 /**
  * Options for paginated fetching of resources
@@ -20,7 +20,7 @@ export type ResourceEntryGetListParams = {
   status?: ResourceStatus;
 };
 
-const TABLE_NAME = 'resources';
+const TABLE_NAME = "resources";
 const table = client.from(TABLE_NAME);
 
 export const ResourceEntryAPI: ModelAPI<
@@ -30,20 +30,20 @@ export const ResourceEntryAPI: ModelAPI<
   getList: async (params) => {
     const { limit, offset, resourceType, status } = params;
     const isPaginating =
-      typeof limit === 'number' && typeof offset === 'number';
+      typeof limit === "number" && typeof offset === "number";
 
-    let query = table.select('*', { count: 'exact' });
+    let query = table.select("*", { count: "exact" });
 
     if (isPaginating) {
       query = query.range(offset, offset + limit - 1);
     }
 
     if (resourceType) {
-      query = query.eq('resource_type', resourceType);
+      query = query.eq("resource_type", resourceType);
     }
 
     if (status) {
-      query = query.eq('status', status);
+      query = query.eq("status", status);
     }
 
     const { data, error, count } = await query;
@@ -64,8 +64,8 @@ export const ResourceEntryAPI: ModelAPI<
   },
   getById: async (id) => {
     const { data, error } = await table
-      .select('*')
-      .eq('id', id)
+      .select("*")
+      .eq("id", id)
       .single<ResourceEntry>();
 
     if (error) {
@@ -89,7 +89,7 @@ export const ResourceEntryAPI: ModelAPI<
   updateById: async (id, values) => {
     const { data, error } = await table
       .update(values)
-      .eq('id', id)
+      .eq("id", id)
       .single<ResourceEntry>();
 
     if (error) {
@@ -99,7 +99,7 @@ export const ResourceEntryAPI: ModelAPI<
     return data;
   },
   delete: async (id) => {
-    const { error } = await table.delete().eq('id', id);
+    const { error } = await table.delete().eq("id", id);
 
     if (error) {
       throw error;

app/app.css

@@ -1,8 +1,9 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 @theme {
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-sans:
+    'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 }
 
 html,

app/root.tsx

@@ -5,21 +5,21 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
-} from 'react-router';
+} from "react-router";
 
-import type { Route } from './+types/root';
-import './app.css';
+import type { Route } from "./+types/root";
+import "./app.css";
 
 export const links: Route.LinksFunction = () => [
-  { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+  { rel: "preconnect", href: "https://fonts.googleapis.com" },
   {
-    rel: 'preconnect',
-    href: 'https://fonts.gstatic.com',
-    crossOrigin: 'anonymous',
+    rel: "preconnect",
+    href: "https://fonts.gstatic.com",
+    crossOrigin: "anonymous",
   },
   {
-    rel: 'stylesheet',
-    href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+    rel: "stylesheet",
+    href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
   },
 ];
 
@@ -46,15 +46,15 @@ export default function App() {
 }
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
-  let message = 'Oops!';
-  let details = 'An unexpected error occurred.';
+  let message = "Oops!";
+  let details = "An unexpected error occurred.";
   let stack: string | undefined;
 
   if (isRouteErrorResponse(error)) {
-    message = error.status === 404 ? '404' : 'Error';
+    message = error.status === 404 ? "404" : "Error";
     details =
       error.status === 404
-        ? 'The requested page could not be found.'
+        ? "The requested page could not be found."
         : error.statusText || details;
   } else if (import.meta.env.DEV && error && error instanceof Error) {
     details = error.message;

app/routes.ts

@@ -1,3 +1,3 @@
-import { type RouteConfig, index } from '@react-router/dev/routes';
+import { index, type RouteConfig } from "@react-router/dev/routes";
 
-export default [index('routes/home.tsx')] satisfies RouteConfig;
+export default [index("routes/home.tsx")] satisfies RouteConfig;

app/routes/home.tsx

@@ -1,12 +1,12 @@
-import type { Route } from './+types/home';
-import { useLoaderData } from 'react-router';
-import { Welcome } from '../welcome/welcome';
-import ResourcesAPI from '~/api/resources/methods';
+import { useLoaderData } from "react-router";
+import ResourcesAPI from "~/api/resources/methods";
+import { Welcome } from "../welcome/welcome";
+import type { Route } from "./+types/home";
 
-export function meta({}: Route.MetaArgs) {
+export function meta(_metaArgs: Route.MetaArgs) {
   return [
-    { title: 'New React Router App' },
-    { name: 'description', content: 'Welcome to React Router!' },
+    { title: "New React Router App" },
+    { name: "description", content: "Welcome to React Router!" },
   ];
 }
 

app/types/ResourceEntry.ts

@@ -8,86 +8,86 @@
 /**
  * Type of data source for a resource entry.
  */
-export type DataSourceType = 'MANUAL' | 'WEB_SCRAPE';
+export type DataSourceType = "MANUAL" | "WEB_SCRAPE";
 
 /**
  * Type of resource available in the system.
  */
-export type ResourceType = 'WATER' | 'FOOD' | 'FORAGE' | 'BATHROOM';
+export type ResourceType = "WATER" | "FOOD" | "FORAGE" | "BATHROOM";
 
 /**
  * Status of a resource.
  */
 export type ResourceStatus =
-  | 'OPERATIONAL'
-  | 'TEMPORARILY_CLOSED'
-  | 'PERMANENTLY_CLOSED'
-  | 'HIDDEN';
+  | "OPERATIONAL"
+  | "TEMPORARILY_CLOSED"
+  | "PERMANENTLY_CLOSED"
+  | "HIDDEN";
 
 /**
  * Entry permission type for a resource.
  */
-export type EntryType = 'OPEN' | 'RESTRICTED' | 'UNSURE';
+export type EntryType = "OPEN" | "RESTRICTED" | "UNSURE";
 
 /**
  * Type of water dispenser.
  */
 export type DispenserType =
-  | 'DRINKING_FOUNTAIN'
-  | 'BOTTLE_FILLER'
-  | 'SINK'
-  | 'JUG'
-  | 'SODA_MACHINE'
-  | 'PITCHER'
-  | 'WATER_COOLER';
+  | "DRINKING_FOUNTAIN"
+  | "BOTTLE_FILLER"
+  | "SINK"
+  | "JUG"
+  | "SODA_MACHINE"
+  | "PITCHER"
+  | "WATER_COOLER";
 
 /**
  * Tags for water resources.
  */
 export type WaterTag =
-  | 'WHEELCHAIR_ACCESSIBLE'
-  | 'FILTERED'
-  | 'BYOB'
-  | 'ID_REQUIRED';
+  | "WHEELCHAIR_ACCESSIBLE"
+  | "FILTERED"
+  | "BYOB"
+  | "ID_REQUIRED";
 
 /**
  * Type of food available.
  */
-export type FoodType = 'PERISHABLE' | 'NON_PERISHABLE' | 'PREPARED';
+export type FoodType = "PERISHABLE" | "NON_PERISHABLE" | "PREPARED";
 
 /**
  * Distribution type for food resources.
  */
-export type DistributionType = 'EAT_ON_SITE' | 'DELIVERY' | 'PICKUP';
+export type DistributionType = "EAT_ON_SITE" | "DELIVERY" | "PICKUP";
 
 /**
  * Organization type for food resources.
  */
 export type OrganizationType =
-  | 'GOVERNMENT'
-  | 'BUSINESS'
-  | 'NON_PROFIT'
-  | 'UNSURE';
+  | "GOVERNMENT"
+  | "BUSINESS"
+  | "NON_PROFIT"
+  | "UNSURE";
 
 /**
  * Type of foraging resources.
  */
-export type ForageType = 'NUT' | 'FRUIT' | 'LEAVES' | 'BARK' | 'FLOWERS';
+export type ForageType = "NUT" | "FRUIT" | "LEAVES" | "BARK" | "FLOWERS";
 
 /**
  * Tags for foraging resources.
  */
-export type ForageTag = 'MEDICINAL' | 'IN_SEASON' | 'COMMUNITY_GARDEN';
+export type ForageTag = "MEDICINAL" | "IN_SEASON" | "COMMUNITY_GARDEN";
 
 /**
  * Tags for bathroom resources.
  */
 export type BathroomTag =
-  | 'WHEELCHAIR_ACCESSIBLE'
-  | 'GENDER_NEUTRAL'
-  | 'CHANGING_TABLE'
-  | 'SINGLE_OCCUPANCY'
-  | 'FAMILY';
+  | "WHEELCHAIR_ACCESSIBLE"
+  | "GENDER_NEUTRAL"
+  | "CHANGING_TABLE"
+  | "SINGLE_OCCUPANCY"
+  | "FAMILY";
 
 /**
  * A data source defining where the resource data entry came from.
@@ -243,7 +243,7 @@ export type ResourceEntry = {
 /**
  * Resource type constants for easy use
  */
-export const WATER_RESOURCE_TYPE = 'WATER';
-export const FOOD_RESOURCE_TYPE = 'FOOD';
-export const FORAGE_RESOURCE_TYPE = 'FORAGE';
-export const BATHROOM_RESOURCE_TYPE = 'BATHROOM';
+export const WATER_RESOURCE_TYPE = "WATER";
+export const FOOD_RESOURCE_TYPE = "FOOD";
+export const FORAGE_RESOURCE_TYPE = "FORAGE";
+export const BATHROOM_RESOURCE_TYPE = "BATHROOM";