Use oxlint for pre-commit lint, fix errors (#2592)

use oxlint for pre-commit lint, fix errors

Author: david-crespo

.husky/pre-commit

@@ -1 +1,2 @@
-npx lint-staged
+# use path directly instead of npx or npm run because it's way faster
+node_modules/.bin/oxlint --deny-warnings

.oxlintrc.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "react-hooks", "unicorn", "typescript", "oxc"],
+  "rules": {
+    "react-hooks/exhaustive-deps": "error",
+    // turning this off because it's more sensitive than eslint currently
+    // "react-hooks/rules-of-hooks": "error",
+    "no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
+    ]
+  }
+}

app/components/TimeSeriesChart.tsx

@@ -33,15 +33,14 @@ function getTicks(data: { timestamp: number }[], n: number): number[] {
   const maxIdx = data.length > 10 ? Math.floor((data.length - 1) * 0.8) : data.length - 1
   const startOffset = Math.floor((data.length - maxIdx) * 0.6)
   // if there are 4 ticks, their positions are 0/3, 1/3, 2/3, 3/3 (as fractions of maxIdx)
-  const idxs = new Array(n)
-    .fill(0)
-    .map((_, i) => Math.floor((maxIdx * i) / (n - 1) + startOffset))
+  const idxs = Array.from({ length: n }).map((_, i) =>
+    Math.floor((maxIdx * i) / (n - 1) + startOffset)
+  )
   return idxs.map((i) => data[i].timestamp)
 }
 
 function getVerticalTicks(n: number, max: number): number[] {
-  const idxs = new Array(n).fill(0)
-  return idxs.map((_, i) => Math.floor(((i + 1) / n) * max))
+  return Array.from({ length: n }).map((_, i) => Math.floor(((i + 1) / n) * max))
 }
 
 /**

app/pages/project/vpcs/VpcPage/tabs/VpcGatewaysTab.tsx

@@ -12,7 +12,7 @@ export const All = () => {
   return (
     <div className="flex flex-wrap">
       {Object.entries(badgeColors).flatMap(([variant, colors]) => (
-        <Section title={variant}>
+        <Section title={variant} key={variant}>
           {Object.keys(colors).map((color) => (
             <div key={`${variant}-${color}`}>
               <Badge variant={variant as BadgeVariant} color={color as BadgeColor}>

app/ui/lib/Badge.stories.tsx

@@ -5,6 +5,8 @@
  *
  * Copyright Oxide Computer Company
  */
+import React from 'react'
+
 import { Section } from '../util/story-section'
 import { Button, variants } from './Button'
 
@@ -21,14 +23,14 @@ export const All = () => {
         <Section key={state} title={state}>
           <div className="mb-2 flex flex-row space-x-2">
             {variants.map((variant) => (
-              <>
+              <React.Fragment key={variant}>
                 <Button key={variant} variant={variant} className={`:${state}`}>
                   {variant}
                 </Button>
                 <Button key={variant} variant={variant} className={`:${state}`} loading>
                   {variant}
                 </Button>
-              </>
+              </React.Fragment>
             ))}
           </div>
         </Section>

app/ui/lib/Button.stories.tsx

@@ -36,7 +36,7 @@ export function CalendarGrid({ state, ...props }: CalendarGridProps) {
           </tr>
         </thead>
         <tbody>
-          {[...new Array(weeksInMonth).keys()].map((weekIndex) => (
+          {[...Array.from({ length: weeksInMonth }).keys()].map((weekIndex) => (
             <tr key={weekIndex}>
               {state
                 .getDatesInWeek(weekIndex)

app/ui/lib/CalendarGrid.tsx

@@ -147,7 +147,7 @@ export const disks: Json<Disk>[] = [
     block_size: 2048,
   },
   // put a ton of disks in project 2 so we can use it to test comboboxes
-  ...new Array(1010).fill(0).map((_, i) => {
+  ...Array.from({ length: 1010 }).map((_, i) => {
     const numStr = (i + 1).toString().padStart(4, '0')
     return {
       id: '9747d936-795d-4d76-8ee0-15561f4cbb' + numStr,

mock-api/disk.ts

@@ -174,7 +174,7 @@ export const handlers = makeHandlers({
 
     return {
       items: genCumulativeI64Data(
-        new Array(1000).fill(0).map((_x, i) => Math.floor(Math.tanh(i / 500) * 3000)),
+        Array.from({ length: 1000 }).map((_x, i) => Math.floor(Math.tanh(i / 500) * 3000)),
         startTime,
         endTime
       ),

mock-api/msw/handlers.ts

@@ -21,7 +21,7 @@ describe('paginated', () => {
   })
 
   it('should return the first 100 items with no limit passed', () => {
-    const items = new Array(200).fill(0).map((_, i) => ({ id: 'i' + i }))
+    const items = Array.from({ length: 200 }).map((_, i) => ({ id: 'i' + i }))
     const page = paginated({}, items)
     expect(page.items.length).toBe(100)
     expect(page.items).toEqual(items.slice(0, 100))

mock-api/msw/util.spec.ts

@@ -72,7 +72,7 @@ export const paginated = <P extends PaginateOptions, I extends { id: string }>(
 // make a bunch of copies of an object with different names and IDs. useful for
 // testing pagination
 export const repeat = <T extends { id: string; name: string }>(obj: T, n: number): T[] =>
-  new Array(n).fill(0).map((_, i) => ({ ...obj, id: obj.id + i, name: obj.name + i }))
+  Array.from({ length: n }).map((_, i) => ({ ...obj, id: obj.id + i, name: obj.name + i }))
 
 export function getStartAndEndTime(params: { startTime?: Date; endTime?: Date }) {
   // if no start time or end time, give the last 24 hours. in this case the
@@ -209,7 +209,7 @@ export function generateUtilization(
 
   // Pick a reasonable start value
   const startVal = 500
-  const values = new Array<number>(dataCount)
+  const values = Array.from<number>({ length: dataCount })
   values[0] = startVal
 
   let x = 0