Biome pre-commit

.pre-commit-config.yaml

@@ -17,7 +17,8 @@ repos:
         exclude: package-lock.json
       - id: no-commit-to-branch
 
-  - repo: https://github.com/rbubley/mirrors-prettier
-    rev: "v3.3.3"
+  - repo: https://github.com/biomejs/pre-commit
+    rev: "v2.4.8"  # Use the sha / tag you want to point at
     hooks:
-      - id: prettier
+    -   id: biome-check
+        additional_dependencies: ["@biomejs/biome@2.4.8"]

.storybook/preview.tsx

@@ -1,5 +1,4 @@
 import type { Preview } from "@storybook/react"
-import * as React from "react"
 
 import "../src/index.scss"
 

.storybook/vitest.setup.ts

@@ -1,5 +1,6 @@
 import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview"
 import { setProjectAnnotations } from "@storybook/nextjs-vite"
+
 import * as projectAnnotations from "./preview"
 
 // This is an important step to apply the right configuration when testing your stories.

app/(noMap)/about/layout.tsx

@@ -1,5 +1,5 @@
 "use client"
-import React from "react"
+import type React from "react"
 import Col from "react-bootstrap/Col"
 import Row from "react-bootstrap/Row"
 

app/(noMap)/about/page.tsx

@@ -1,4 +1,4 @@
-import { Metadata } from "next"
+import type { Metadata } from "next"
 
 import { WagtailBlock } from "Features/WagtailApi/WagtailBlock"
 

app/(platformMap)/@belowMap/home.tsx

@@ -1,5 +1,6 @@
 "use client"
 import { usePathname } from "next/navigation"
+
 import { Superlatives } from "Features/ERDDAP/Superlatives/index"
 
 export function HomeSuperlatives() {

app/(platformMap)/@bottom/platform/[platformId]/current_conditions.tsx

@@ -1,4 +1,5 @@
 "use client"
+
 import { UsePlatform } from "Features/ERDDAP/hooks"
 import { ErddapCurrentPlatformConditions } from "Features/ERDDAP/Platform/Observations/CurrentConditions"
 

app/(platformMap)/@bottom/platform/[platformId]/forecast/[standardName]/forecast.tsx

@@ -1,4 +1,5 @@
 "use client"
+
 // import { UsePlatform } from "Features/ERDDAP/hooks"
 // import { useUnitSystem } from "Features/Units"
 // import { Forecast } from "Features/ERDDAP/Platform/Forecasts/Page"
@@ -15,7 +16,14 @@ import { WarningAlert } from "components/Alerts"
 // )
 // }
 
-export function ForecastChart({ platformId, standardName }: { platformId: string; standardName: string }) {
+// biome-ignore lint/correctness/noEmptyPattern: forecast currently disabled
+export function ForecastChart({
+  //   // platformId,
+  //   // standardName,
+}: {
+  platformId: string
+  standardName: string
+}) {
   return (
     <WarningAlert>
       Forecasts are temporarily unavailable. A new and improved version of this feature is in development for early

app/(platformMap)/@bottom/platform/[platformId]/observations/[standardName]/chart.tsx

@@ -1,7 +1,7 @@
 "use client"
-import { ErddapObservedCondition } from "Features/ERDDAP/Platform/Observations/Condition"
+
 import { UsePlatform } from "Features/ERDDAP/hooks"
-import React from "react"
+import { ErddapObservedCondition } from "Features/ERDDAP/Platform/Observations/Condition"
 
 export function ObservationChart({ platformId, standardName }: { platformId: string; standardName: string }) {
   return (

app/(platformMap)/@bottom/platform/[platformId]/observations/[standardName]/page.tsx

@@ -1,5 +1,6 @@
 "use client"
-import React, { use } from "react"
+import { use } from "react"
+
 import { ObservationChart } from "./chart"
 
 export default function ObservedPlot(props: { params: Promise<{ platformId: string; standardName: string }> }) {

app/(platformMap)/@bottom/platform/[platformId]/observations/all/all_observations.tsx

@@ -1,7 +1,8 @@
 "use client"
+
 import { UsePlatform } from "Features/ERDDAP/hooks"
-import { useUnitSystem } from "Features/Units"
 import { ErddapAllObservationsTable } from "Features/ERDDAP/Platform/Observations/Table/all"
+import { useUnitSystem } from "Features/Units"
 
 export function AllObservations({ platformId }: { platformId: string }) {
   const unitSystem = useUnitSystem()

app/(platformMap)/@bottom/platform/[platformId]/observations/wind/chart.tsx

@@ -1,7 +1,7 @@
 "use client"
-import { ErddapWindObservedCondition } from "Features/ERDDAP/Platform/Observations/WindCondition"
+
 import { UsePlatform } from "Features/ERDDAP/hooks"
-import React from "react"
+import { ErddapWindObservedCondition } from "Features/ERDDAP/Platform/Observations/WindCondition"
 
 export function WindChart({ platformId }: { platformId: string }) {
   return (

app/(platformMap)/@bottom/platform/[platformId]/observations/wind/page.tsx

@@ -1,7 +1,6 @@
 import { DehydratedPlatforms } from "Features/ERDDAP/hooks/DehydrateComponent"
 
 import { WindChart } from "./chart"
-import React from "react"
 
 export default async function WindPlot(props: { params: Promise<{ platformId: string }> }) {
   const params = await props.params

app/(platformMap)/@bottom/platform/[platformId]/page.tsx

@@ -1,7 +1,8 @@
 import { use } from "react"
-import { DehydratedPlatforms } from "Features/ERDDAP/hooks/DehydrateComponent"
 
+import { DehydratedPlatforms } from "Features/ERDDAP/hooks/DehydrateComponent"
 import { useDecodedUrl } from "util/hooks"
+
 import { CurrentConditions } from "./current_conditions"
 
 export default function CurrentConditionsPage(props: { params: Promise<{ platformId: string }> }) {

app/(platformMap)/@bottom/platform/[platformId]/tabs.tsx

@@ -3,16 +3,15 @@ import Link from "next/link"
 import { useParams, usePathname } from "next/navigation"
 import * as React from "react"
 import Col from "react-bootstrap/Col"
-import Row from "react-bootstrap/Row"
 import Nav from "react-bootstrap/Nav"
-
-import { paths } from "Shared/constants"
-import { urlPartReplacer } from "Shared/urlParams"
+import Row from "react-bootstrap/Row"
 
 import { ForecastDropdown } from "Features/ERDDAP/ForecastsMetadata/Menu"
+import { UsePlatform } from "Features/ERDDAP/hooks/BuoyBarnComponents"
 import { ErddapMoreInfoDropdown } from "Features/ERDDAP/Platform/MoreInfoMenu/index"
 import { ErddapObservedDropdown } from "Features/ERDDAP/Platform/Observations/Menu"
-import { UsePlatform } from "Features/ERDDAP/hooks/BuoyBarnComponents"
+import { paths } from "Shared/constants"
+import { urlPartReplacer } from "Shared/urlParams"
 import { useDecodedUrl } from "util/hooks"
 
 export function PlatformTabs() {

app/(platformMap)/@sidebar/platform/[platformId]/page.tsx

@@ -1,4 +1,4 @@
-import React, { use } from "react"
+import { use } from "react"
 
 import { PlatformInfo } from "components/PlatformInfo/platformInfo"
 import { useDecodedUrl } from "util/hooks"

app/(platformMap)/@sidebar/region/[regionId]/page.tsx

@@ -1,17 +1,17 @@
 import { use } from "react"
-import { DehydratedPlatforms } from "Features/ERDDAP/hooks/DehydrateComponent"
 
+import { DehydratedPlatforms } from "Features/ERDDAP/hooks/DehydrateComponent"
 import { regionList } from "Shared/constants"
-import { Region } from "Shared/regions"
+import type { Region } from "Shared/regions"
+import { useDecodedUrl } from "util/hooks"
 
 import { RegionList } from "./region"
-import { useDecodedUrl } from "util/hooks"
 
 export default function RegionSidebar(props: { params: Promise<{ regionId: string }> }) {
   const params = use(props.params)
   const regionId = useDecodedUrl(params.regionId)
 
-  let region: Region | undefined = regionList.find((r) => r.slug === regionId)
+  const region: Region | undefined = regionList.find((r) => r.slug === regionId)
 
   if (typeof region === "undefined") {
     return null

app/(platformMap)/@sidebar/region/[regionId]/region.tsx

@@ -1,6 +1,7 @@
 "use client"
+
 import { ErddapPlatformList } from "Features/ERDDAP"
-import { Region } from "Shared/regions"
+import type { Region } from "Shared/regions"
 
 export function RegionList({ region }: { region: Region }) {
   return <ErddapPlatformList boundingBox={region.bbox} />

app/(platformMap)/layout.tsx

@@ -2,19 +2,17 @@
 import { useParams, usePathname } from "next/navigation"
 import * as React from "react"
 import { useEffect, useState } from "react"
-import { useMeasure } from "react-use"
 import Col from "react-bootstrap/Col"
 import Row from "react-bootstrap/Row"
+import { useMeasure } from "react-use"
 
 import { ErddapMap } from "../../src/Features/ERDDAP/Map"
 
 export default function Layout({
-  children,
   sidebar,
   belowMap,
   bottom,
 }: {
-  children: React.ReactNode
   sidebar: React.ReactNode
   bottom: React.ReactNode
   belowMap: React.ReactNode

app/(waterLevel)/water-level/layout.tsx

@@ -1,5 +1,3 @@
-import React from "react"
-
 export default function Layout({ children }) {
   return <>{children}</>
 }

app/(waterLevel)/water-level/page.tsx

@@ -1,13 +1,12 @@
 "use client"
-import React from "react"
 import Card from "react-bootstrap/Card"
 import Col from "react-bootstrap/Col"
 import Row from "react-bootstrap/Row"
 
-import { ErddapWaterLevelSensorListBase } from "Features/ERDDAP/List/waterSensorList"
 import { usePlatforms } from "Features/ERDDAP/hooks"
-import { ErddapWaterLevelMapBase } from "Features/ERDDAP/waterLevel/map"
+import { ErddapWaterLevelSensorListBase } from "Features/ERDDAP/List/waterSensorList"
 import { filterForSensors } from "Features/ERDDAP/waterLevel/hooks"
+import { ErddapWaterLevelMapBase } from "Features/ERDDAP/waterLevel/map"
 import { regionList } from "Shared/regions"
 
 export default function WaterLevelIndexPage() {

app/(waterLevel)/water-level/sensor/[sensorId]/page.tsx

@@ -1,16 +1,16 @@
 "use client"
 import { fromLonLat } from "ol/proj"
-import React, { useEffect, useState, use } from "react"
-import { createBreakpoint } from "react-use"
+import { use, useEffect, useState } from "react"
 import Col from "react-bootstrap/Col"
 import Row from "react-bootstrap/Row"
+import { createBreakpoint } from "react-use"
 
-import { WaterLevelSensorInfo } from "components/PlatformInfo/WaterLevelSensorInfo"
-import { SecondaryBanner } from "components/SecondaryBanner"
 import { usePlatform } from "Features/ERDDAP/hooks"
+import { useWaterLevelPlatforms } from "Features/ERDDAP/waterLevel/hooks"
 import { ErddapWaterLevelMapBase } from "Features/ERDDAP/waterLevel/map"
 import { WaterLevelObservationContent } from "Features/ERDDAP/waterLevel/observationContent"
-import { useWaterLevelPlatforms } from "Features/ERDDAP/waterLevel/hooks"
+import { WaterLevelSensorInfo } from "components/PlatformInfo/WaterLevelSensorInfo"
+import { SecondaryBanner } from "components/SecondaryBanner"
 import { useDecodedUrl } from "util/hooks"
 
 const useBreakpoint = createBreakpoint({ S: 576, M: 768, L: 992 })
@@ -22,7 +22,7 @@ export default function SensorIdPage(props: { params: Promise<{ sensorId: string
   const id = useDecodedUrl(params.sensorId)
   const platform = usePlatform(id)
 
-  const [currentTime, setCurrentTime] = useState(Date.now())
+  const [_currentTime, setCurrentTime] = useState(Date.now())
 
   useEffect(() => {
     const updateGraph = () => {
@@ -48,9 +48,16 @@ export default function SensorIdPage(props: { params: Promise<{ sensorId: string
   return (
     <div>
       <SecondaryBanner>
-        <p style={{ fontStyle: "italic", fontSize: "14px", marginBottom: "0px", textAlign: "center" }}>
+        <p
+          style={{
+            fontStyle: "italic",
+            fontSize: "14px",
+            marginBottom: "0px",
+            textAlign: "center",
+          }}
+        >
           For official watch, warning, advisory, and forecast information please visit the{" "}
-          <a href="https://www.weather.gov/erh/coastalflood" target="_blank">
+          <a href="https://www.weather.gov/erh/coastalflood" target="_blank" rel="noopener">
             NWS Eastern Region Coastal Flood Page
           </a>
         </p>

app/error.stories.tsx

@@ -1,5 +1,3 @@
-import React from "react"
-
 import ErrorPage from "./error"
 
 export default {

app/error.tsx

@@ -8,8 +8,8 @@ import Row from "react-bootstrap/Row"
 
 import n_walkabout from "./n_walkabout.png"
 
-export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
-  let eventId = useRef("")
+export default function ErrorPage({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  const eventId = useRef("")
 
   useEffect(() => {
     eventId.current = Sentry.captureException(error)

app/global-error.tsx

@@ -9,14 +9,14 @@ import Row from "react-bootstrap/Row"
 import n_walkabout from "./n_walkabout.png"
 
 export default function GlobalError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
-  let eventId = useRef("")
+  const eventId = useRef("")
 
   useEffect(() => {
     eventId.current = Sentry.captureException(error)
   }, [error])
 
   return (
-    <html>
+    <html lang="en">
       <body>
         <Row>
           <Col md={{ offset: 2, span: 8 }}>

app/layout.tsx

@@ -1,9 +1,9 @@
-import { Metadata, Viewport } from "next"
-import React from "react"
+import type { Metadata, Viewport } from "next"
+import type React from "react"
 
 import NavBar from "components/NavBar"
-import { Footer } from "../src/components/Footer"
 
+import { Footer } from "../src/components/Footer"
 import Providers from "./providers"
 
 import "../src/index.scss"

app/providers.tsx

@@ -1,8 +1,8 @@
 "use client"
-import dynamic from "next/dynamic"
 import { AppProgressProvider as ProgressProvider } from "@bprogress/next"
 import { isServer, QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
+import dynamic from "next/dynamic"
 
 import { GAListener } from "Shared/google-analytics"
 
@@ -19,7 +19,7 @@ function makeQueryClient() {
   })
 }
 
-let browserQueryClient: QueryClient | undefined = undefined
+let browserQueryClient: QueryClient | undefined
 
 function getQueryClient() {
   if (isServer) {

app/store.tsx

@@ -1,5 +1,5 @@
-import { useRef, PropsWithChildren } from "react"
 import { configureStore } from "@reduxjs/toolkit"
+import { type PropsWithChildren, useRef } from "react"
 import { Provider } from "react-redux"
 
 import { unitReducer as unit } from "Features/Units"