typescript-eslint v6 + prettier 3.0 (#1805)

* start by bumping everything

* seems like everything works. no more double plugin workaround

* use new recommended stylistic config

* use strict config, it seems fine!

* use structuredClone directly, don't fall back to JSON.parse(JSON.stringify(x))

Author: david-crespo

.babelrc

@@ -6,9 +6,10 @@
   },
   "extends": [
     "eslint:recommended",
+    "plugin:@typescript-eslint/strict",
+    "plugin:@typescript-eslint/stylistic",
     "plugin:jsx-a11y/recommended",
     "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
     "prettier",
     "plugin:react-hook-form/recommended"
   ],
@@ -28,6 +29,8 @@
     "node": true
   },
   "rules": {
+    "@typescript-eslint/array-type": "off",
+    "@typescript-eslint/consistent-type-definitions": "off",
     "@typescript-eslint/consistent-type-imports": ["error", { "prefer": "type-imports" }],
     "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/no-empty-interface": "off",

.eslintrc.json

@@ -6,33 +6,13 @@
  * Copyright Oxide Computer Company
  */
 
-const twPlugin = require('prettier-plugin-tailwindcss')
-const importsPlugin = require('@trivago/prettier-plugin-sort-imports')
-
-// The Tailwind plugin and the imports plugin can't both be used at the same
-// time because they both rely on the same underlying mechanism, which can only
-// take one plugin. So we manually combine them into a single plugin and use
-// that. Approach recommended here:
-// https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/31#issuecomment-1195411734
-
-/** @type {import("prettier").Parser}  */
-const combinedParser = {
-  ...importsPlugin.parsers.typescript,
-  parse: twPlugin.parsers.typescript.parse,
-}
-
-/** @type {import("prettier").Plugin}  */
-const combinedPlugin = {
-  parsers: {
-    typescript: combinedParser,
-  },
-}
-
 module.exports = {
-  plugins: [combinedPlugin],
+  // note: it seems like tailwind has to be last for it to work
+  plugins: ['@trivago/prettier-plugin-sort-imports', 'prettier-plugin-tailwindcss'],
   printWidth: 92,
   singleQuote: true,
   semi: false,
+  trailingComma: 'es5', // default changed to all in prettier 3, wanted to minimize diff
   importOrder: ['<THIRD_PARTY_MODULES>', '^@oxide/(.*)$', '^app/(.*)$', '^[./]'],
   importOrderGroupNamespaceSpecifiers: true,
   importOrderSeparation: true,

.prettierrc.js

@@ -14,7 +14,7 @@ import { Badge } from '@oxide/ui'
  * Display the user or group name. If the row is for a group, add a GROUP badge.
  */
 export const AccessNameCell = <
-  RowData extends { name: string; identityType: IdentityType }
+  RowData extends { name: string; identityType: IdentityType },
 >(
   info: CellContext<RowData, string>
 ) => {

app/components/AccessNameCell.tsx

@@ -202,26 +202,26 @@ function getPath(angle: number, thickness: number, size: number, cornerRadius: n
       ${+(Math.abs(newOuterAngle) > 180)},0,
       ${outerLineEndCornerXY1.x},${outerLineEndCornerXY1.y}
       C ${outerLineEndCornerXY1.x} ${outerLineEndCornerXY1.y} ${
-    outerLineEndCornerBezier.x
-  } ${outerLineEndCornerBezier.y}  ${outerLineEndCornerXY2.x} ${outerLineEndCornerXY2.y}
+        outerLineEndCornerBezier.x
+      } ${outerLineEndCornerBezier.y}  ${outerLineEndCornerXY2.x} ${outerLineEndCornerXY2.y}
       L ${innerLineStartCornerXY1.x} ${innerLineStartCornerXY1.y}
       C ${innerLineStartCornerXY1.x} ${innerLineStartCornerXY1.y} ${
-    innerLineStartCornerBezier.x
-  } ${innerLineStartCornerBezier.y}  ${innerLineStartCornerXY2.x} ${
-    innerLineStartCornerXY2.y
-  }
+        innerLineStartCornerBezier.x
+      } ${innerLineStartCornerBezier.y}  ${innerLineStartCornerXY2.x} ${
+        innerLineStartCornerXY2.y
+      }
     A ${innerRadius},${innerRadius},0,
     ${+(Math.abs(newInnerAngle) > 180)},1,
     ${innerLineEndCornerXY1.x},${innerLineEndCornerXY1.y}
     C ${innerLineEndCornerXY1.x} ${innerLineEndCornerXY1.y} ${innerLineEndCornerBezier.x} ${
-    innerLineEndCornerBezier.y
-  }  ${innerLineEndCornerXY2.x} ${innerLineEndCornerXY2.y}
+      innerLineEndCornerBezier.y
+    }  ${innerLineEndCornerXY2.x} ${innerLineEndCornerXY2.y}
     L ${outerLinerStartCornerXY1.x} ${outerLinerStartCornerXY1.y}
     C ${outerLinerStartCornerXY1.x} ${outerLinerStartCornerXY1.y} ${
-    outerLineStartCornerBezier.x
-  } ${outerLineStartCornerBezier.y}  ${outerLineStartCornerXY2.x} ${
-    outerLineStartCornerXY2.y
-  }
+      outerLineStartCornerBezier.x
+    } ${outerLineStartCornerBezier.y}  ${outerLineStartCornerXY2.x} ${
+      outerLineStartCornerXY2.y
+    }
     `
 }
 

app/components/RoundedSector.tsx

@@ -13,15 +13,15 @@ import { Checkbox } from '@oxide/ui'
 
 type CheckboxFieldProps<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 > = Omit<CheckboxProps, 'name'> & {
   name: TName
   control: Control<TFieldValues>
 }
 
 export const CheckboxField = <
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 >({
   control,
   name,

app/components/form/fields/CheckboxField.tsx

@@ -15,7 +15,7 @@ const MAX_LEN = 512
 
 export function DescriptionField<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 >(props: Omit<TextFieldProps<TFieldValues, TName>, 'validate'>) {
   return <TextField as="textarea" validate={validateDescription} {...props} />
 }

app/components/form/fields/DescriptionField.tsx

@@ -14,14 +14,14 @@ import type { TextFieldProps } from './TextField'
 
 interface DiskSizeProps<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 > extends TextFieldProps<TFieldValues, TName> {
   minSize?: number
 }
 
 export function DiskSizeField<
   TFieldValues extends FieldValues,
-  TName extends FieldPathByValue<TFieldValues, number>
+  TName extends FieldPathByValue<TFieldValues, number>,
 >({ required = true, name, minSize = 1, ...props }: DiskSizeProps<TFieldValues, TName>) {
   return (
     <NumberField

app/components/form/fields/DiskSizeField.tsx

@@ -14,7 +14,7 @@ import { ErrorMessage } from './ErrorMessage'
 
 export function FileField<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 >({
   id,
   name,

app/components/form/fields/FileField.tsx

@@ -17,7 +17,7 @@ import { ErrorMessage } from './ErrorMessage'
 
 export type ListboxFieldProps<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 > = {
   name: TName
   placeholder?: string
@@ -35,7 +35,7 @@ export type ListboxFieldProps<
 
 export function ListboxField<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues>,
 >({
   items,
   name,