Fix biome-ignore issues (#826)

apps/screenshot-worker/src/index.ts

@@ -55,8 +55,8 @@ app.post(
     const db = createDrizzleClient(env);
 
     const sessionId = await getRandomSession(env.MYBROWSER);
-    // biome-ignore lint/suspicious/noImplicitAnyLet: <explanation>
-    let browser;
+
+    let browser: puppeteer.Browser | undefined;
     if (sessionId) {
       try {
         browser = await puppeteer.connect(env.MYBROWSER, sessionId);
@@ -112,8 +112,10 @@ const getRandomSession = async (
   }
 
   const sessionId = sessionsIds[Math.floor(Math.random() * sessionsIds.length)];
+  if (!sessionId) {
+    throw new Error("No available session IDs");
+  }
 
-  // biome-ignore lint/style/noNonNullAssertion: <explanation>
-  return sessionId!;
+  return sessionId;
 };
 export default app;

apps/server/src/v1/check/post.ts

@@ -76,15 +76,15 @@ export function registerPostCheck(api: typeof checkAPI) {
             workspaceId: workspaceId,
             url: input.url,
             method: input.method,
-            headers: input.headers?.reduce((acc, { key, value }) => {
-              if (!key) return acc; // key === "" is an invalid header
-
-              return {
-                // biome-ignore lint/performance/noAccumulatingSpread: <explanation>
-                ...acc,
-                [key]: value,
-              };
-            }, {}),
+            headers: input.headers?.reduce<{ [key: string]: string }>(
+              (acc, { key, value }) => {
+                if (!key) return acc; // key === "" is an invalid header
+
+                acc[key] = value; // Directly assign to the accumulator
+                return acc;
+              },
+              {},
+            ),
             body: input.body ? input.body : undefined,
           }),
         });

apps/web/src/app/(content)/_components/pagination.tsx

@@ -5,8 +5,7 @@ import Link from "next/link";
 import { Button } from "@openstatus/ui/src/components/button";
 
 export function Pagination({
-  // biome-ignore lint/correctness/noUnusedVariables: <explanation>
-  prev,
+  // prev, Commented out as not used to avoid biome-ignore
   next,
 }: {
   prev?: Changelog;

apps/web/src/app/(content)/features/_components/assertions-timing-form-example.tsx

@@ -21,8 +21,7 @@ export function AssertionsTimingFormExample() {
       headerAssertions: assertions
         .deserialize(_assertions)
         .map((a) => a.schema)
-        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-        .filter((a) => a.type === "header") as any,
+        .filter((a): a is assertions.AssertionType => a.type === "header"),
     },
   });
   return (

apps/web/src/app/_components/input-search.tsx

@@ -52,12 +52,13 @@ export function InputSearch({
     () =>
       events.reduce(
         (prev, curr) => {
-          return {
-            // biome-ignore lint/performance/noAccumulatingSpread: <explanation>
-            ...prev,
-            status: [...new Set([curr.statusCode, ...(prev.status || [])])],
-            region: [...new Set([curr.region, ...(prev.region || [])])],
-          };
+          if (!prev.status.includes(curr.statusCode)) {
+            prev.status.push(curr.statusCode);
+          }
+          if (!prev.region.includes(curr.region)) {
+            prev.region.push(curr.region);
+          }
+          return prev;
         },
         // defaultState
         { limit: [10, 25, 50], status: [], region: [] } as {

apps/web/src/app/api/checker/cron/_cron.ts

@@ -32,9 +32,8 @@ export const isAuthorizedDomain = (url: string) => {
 
 export const cron = async ({
   periodicity,
-  // biome-ignore lint/correctness/noUnusedVariables: <explanation>
-  req,
-}: z.infer<typeof periodicityAvailable> & { req: NextRequest }) => {
+  // req, // Commented out as not used to avoid biome-ignore
+}: z.infer<typeof periodicityAvailable> & { req?: NextRequest }) => {
   const client = new CloudTasksClient({
     projectId: env.GCP_PROJECT_ID,
     credentials: {

apps/web/src/app/api/og/_components/tracker.tsx

@@ -2,6 +2,7 @@ import type { Monitor } from "@openstatus/tinybird";
 import { Tracker as OSTracker, classNames } from "@openstatus/tracker";
 
 import { cn, formatDate } from "@/lib/utils";
+import { nanoid } from "nanoid";
 
 export function Tracker({ data }: { data: Monitor[] }) {
   const tracker = new OSTracker({ data });
@@ -14,26 +15,28 @@ export function Tracker({ data }: { data: Monitor[] }) {
         </div>
         {/* Empty State */}
         <div tw="flex flex-row relative">
-          {new Array(data.length).fill(null).map((_, i) => {
-            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-            return <div key={i} tw="h-16 w-3 rounded-full mr-1 bg-black/20" />;
+          {new Array(data.length).fill(null).map((_) => {
+            return (
+              <div
+                key={`placeholder-${nanoid(6)}`}
+                tw="h-16 w-3 rounded-full mr-1 bg-black/20"
+              />
+            );
           })}
           <div tw="flex flex-row-reverse absolute left-0">
-            {tracker.days.map((item, i) => {
+            {tracker.days.map((item, _i) => {
               const isBlackListed = Boolean(item.blacklist);
               if (isBlackListed) {
                 return (
                   <div
-                    // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-                    key={i}
+                    key={`day-${item?.day}-${nanoid(6)}`}
                     tw="h-16 w-3 rounded-full mr-1 bg-status-operational/90"
                   />
                 );
               }
               return (
                 <div
-                  // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-                  key={i}
+                  key={`day-${item?.day}-${nanoid(6)}`}
                   tw={cn(
                     "h-16 w-3 rounded-full mr-1",
                     classNames[item.variant],

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/data/_components/data-table-wrapper.tsx

@@ -23,8 +23,8 @@ import type { monitorFlyRegionSchema } from "@openstatus/db/src/schema/constants
 import type { z } from "zod";
 
 // EXAMPLE: get the type of the response of the endpoint
-// biome-ignore lint/correctness/noUnusedVariables: <explanation>
-type T = Awaited<ReturnType<ReturnType<OSTinybird["endpointList"]>>>;
+// Commented out as not used to avoid biome-ignore
+// type T = Awaited<ReturnType<ReturnType<OSTinybird["endpointList"]>>>;
 
 // FIXME: use proper type
 export type Monitor = {

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/details/page.tsx

@@ -20,11 +20,10 @@ const searchParamsSchema = z.object({
 });
 
 export default async function Details({
-  // biome-ignore lint/correctness/noUnusedVariables: <explanation>
-  params,
+  // params, // Commented out as not used to avoid biome-ignore
   searchParams,
 }: {
-  params: { id: string; workspaceSlug: string };
+  params?: { id: string; workspaceSlug: string };
   searchParams: { [key: string]: string | string[] | undefined };
 }) {
   const search = searchParamsSchema.safeParse(searchParams);

apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/[id]/overview/loading.tsx

@@ -1,21 +1,26 @@
 import { Separator, Skeleton } from "@openstatus/ui";
+import { nanoid } from "nanoid";
 
 export default function Loading() {
   return (
     <div className="grid gap-4">
       <Skeleton className="h-10 w-[150px]" />
       <div className="grid gap-6">
-        <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 md:grid-cols-5 md:gap-6">
-          {new Array(4).fill(0).map((_, i) => (
-            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-            <Skeleton key={i} className="h-16 w-full" />
+        <div className="grid grid-cols-2 gap-4 md:grid-cols-5 sm:grid-cols-4 md:gap-6">
+          {new Array(4).fill(0).map((_) => (
+            <Skeleton
+              key={`skeleton-loading-${nanoid(6)}`}
+              className="h-16 w-full"
+            />
           ))}
         </div>
         <div className="grid gap-4">
-          <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 md:grid-cols-5 md:gap-6">
-            {new Array(5).fill(0).map((_, i) => (
-              // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-              <Skeleton key={i} className="h-16 w-full" />
+          <div className="grid grid-cols-2 gap-4 md:grid-cols-5 sm:grid-cols-4 md:gap-6">
+            {new Array(5).fill(0).map((_) => (
+              <Skeleton
+                key={`skeleton-loading-${nanoid(6)}`}
+                className="h-16 w-full"
+              />
             ))}
           </div>
           <Skeleton className="h-3 w-40" />

apps/web/src/app/app/[workspaceSlug]/(dashboard)/rum/_components/category-bar.tsx

@@ -10,6 +10,7 @@ import {
 } from "@openstatus/ui";
 
 import { cn } from "@/lib/utils";
+import { nanoid } from "nanoid";
 
 const MAX_VALUE_RATIO = 1.3; // avoiding Infinity as number
 
@@ -62,12 +63,11 @@ export function CategoryBar({ values, marker }: CategoryBarProps) {
         <div className="absolute bottom-0 left-0 flex items-center text-muted-foreground text-xs">
           0
         </div>
-        {valuesWithPercentage.slice(0, values.length - 1).map((value, i) => {
+        {valuesWithPercentage.slice(0, values.length - 1).map((value) => {
           const width = `${(value.percentage * 100).toFixed(2)}%`;
           return (
             <div
-              // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-              key={i}
+              key={`category-bar-label-${nanoid(6)}`}
               className="flex items-center justify-end"
               style={{ width }}
             >
@@ -83,10 +83,15 @@ export function CategoryBar({ values, marker }: CategoryBarProps) {
         </div>
       </div>
       <div className="flex h-3 w-full overflow-hidden rounded-full">
-        {valuesWithPercentage.map((value, i) => {
+        {valuesWithPercentage.map((value) => {
           const width = `${(value.percentage * 100).toFixed(2)}%`;
-          // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-          return <div key={i} className={cn(value.color)} style={{ width }} />;
+          return (
+            <div
+              key={`category-bar-segment-${nanoid(6)}`}
+              className={cn(value.color)}
+              style={{ width }}
+            />
+          );
         })}
       </div>
       <div

apps/web/src/app/layout.tsx

@@ -38,14 +38,10 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
+  const bodyClassName = `${inter.className} ${calSans.variable}`;
   return (
     <html lang="en">
-      <body
-        className={`${
-          inter.className
-          // biome-ignore lint/nursery/useSortedClasses: <explanation>
-        } ${calSans.variable}`}
-      >
+      <body className={bodyClassName}>
         <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
           <Background>{children}</Background>
           <Toaster richColors />

apps/web/src/app/play/checker/_components/global-monitoring.tsx

@@ -11,6 +11,9 @@ import {
   CardTitle,
 } from "@/components/marketing/card";
 
+import { Globe } from "@/components/marketing/monitor/globe";
+import { nanoid } from "nanoid";
+
 const features: {
   icon: ValidIcon;
   catchline: string;
@@ -44,8 +47,7 @@ export const GlobalMonitoring = () => {
       </CardHeader>
       <ul className="grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-6">
         {features?.map((feature, i) => (
-          // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-          <CardFeature key={i} {...feature} />
+          <CardFeature key={`${feature.icon}-${nanoid(6)}`} {...feature} />
         ))}
       </ul>
       <div className="order-first flex items-center justify-center gap-2 text-center md:order-none">

apps/web/src/app/public/monitors/[id]/loading.tsx

@@ -1,6 +1,7 @@
 import { Separator, Skeleton } from "@openstatus/ui";
 
 import { Shell } from "@/components/dashboard/shell";
+import { nanoid } from "nanoid";
 
 export default function Loading() {
   return (
@@ -16,17 +17,21 @@ export default function Loading() {
       </Shell>
       <Shell className="grid gap-4">
         <div className="grid gap-6">
-          <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 md:grid-cols-5 md:gap-6">
-            {new Array(4).fill(0).map((_, i) => (
-              // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-              <Skeleton key={i} className="h-16 w-full" />
+          <div className="grid grid-cols-2 gap-4 md:grid-cols-5 sm:grid-cols-4 md:gap-6">
+            {new Array(4).fill(0).map((_) => (
+              <Skeleton
+                key={`skeleton-loading-${nanoid(6)}`}
+                className="h-16 w-full"
+              />
             ))}
           </div>
           <div className="grid gap-4">
-            <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 md:grid-cols-5 md:gap-6">
-              {new Array(5).fill(0).map((_, i) => (
-                // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-                <Skeleton key={i} className="h-16 w-full" />
+            <div className="grid grid-cols-2 gap-4 md:grid-cols-5 sm:grid-cols-4 md:gap-6">
+              {new Array(5).fill(0).map((_) => (
+                <Skeleton
+                  key={`skeleton-loading-${nanoid(6)}`}
+                  className="h-16 w-full"
+                />
               ))}
             </div>
             <Skeleton className="h-3 w-40" />

apps/web/src/app/status-page/[domain]/_components/password-form.tsx

@@ -111,8 +111,8 @@ export function PasswordForm({ slug }: PasswordFormProps) {
                   type={inputType}
                   disabled={loading}
                   trailing={
-                    // biome-ignore lint/a11y/useButtonType: <explanation>
                     <button
+                      type="button"
                       onClick={() =>
                         setInputType((type) =>
                           type === "password" ? "text" : "password",

apps/web/src/components/data-table/data-table-badges.tsx

@@ -5,6 +5,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@openstatus/ui";
+import { nanoid } from "nanoid";
 
 export function DataTableBadges({ names }: { names: string[] }) {
   const [first, second, ...rest] = names;
@@ -26,9 +27,8 @@ export function DataTableBadges({ names }: { names: string[] }) {
               </Badge>
             </TooltipTrigger>
             <TooltipContent side="top" className="flex gap-2">
-              {rest.map((name, i) => (
-                // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-                <Badge key={i} variant="outline">
+              {rest.map((name) => (
+                <Badge key={`${name}-${nanoid(6)}`} variant="outline">
                   {name}
                 </Badge>
               ))}

apps/web/src/components/data-table/data-table-skeleton.tsx

@@ -7,6 +7,7 @@ import {
   TableHeader,
   TableRow,
 } from "@openstatus/ui";
+import { nanoid } from "nanoid";
 
 interface DataTableSkeletonProps {
   /**
@@ -40,9 +41,11 @@ export function DataTableSkeleton({ rows = 3 }: DataTableSkeletonProps) {
           </TableRow>
         </TableHeader>
         <TableBody>
-          {new Array(rows).fill(0).map((_, i) => (
-            // biome-ignore lint: only one row
-            <TableRow key={i} className="hover:bg-transparent">
+          {new Array(rows).fill(0).map((_) => (
+            <TableRow
+              key={`skeleton-row-${nanoid(6)}`}
+              className="hover:bg-transparent"
+            >
               <TableCell>
                 <Skeleton className="my-1.5 h-4 w-full max-w-[10rem]" />
               </TableCell>