Switch import sorter Prettier plugin

.prettierrc.js

@@ -8,13 +8,19 @@
 
 module.exports = {
   // note: it seems like tailwind has to be last for it to work
-  plugins: ['@trivago/prettier-plugin-sort-imports', 'prettier-plugin-tailwindcss'],
+  plugins: ['@ianvs/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,
-  importOrderSortSpecifiers: true,
+  importOrder: [
+    '<THIRD_PARTY_MODULES>',
+    '',
+    '^@oxide/(.*)$',
+    '',
+    '^app/(.*)$',
+    '',
+    '^[./]',
+  ],
+  importOrderTypeScriptVersion: '5.2.2',
 }

app/components/CapacityMetric.tsx

@@ -7,8 +7,7 @@
  */
 import { useMemo } from 'react'
 
-import type { SystemMetricName } from '@oxide/api'
-import { useApiQuery } from '@oxide/api'
+import { useApiQuery, type SystemMetricName } from '@oxide/api'
 import { splitDecimal } from '@oxide/util'
 
 import RoundedSector from 'app/components/RoundedSector'

app/components/MswBanner.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { type ReactNode, useState } from 'react'
+import { useState, type ReactNode } from 'react'
 
 import {
   Button,

app/components/RefetchIntervalPicker.tsx

@@ -11,11 +11,11 @@ import { useEffect, useState } from 'react'
 
 import {
   Listbox,
-  type ListboxItem,
   Refresh16Icon,
   SpinnerLoader,
   Time16Icon,
   useInterval,
+  type ListboxItem,
 } from '@oxide/ui'
 
 const intervalPresets = {

app/components/StatusBadge.tsx

@@ -6,8 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import type { DiskState, InstanceState, SnapshotState } from '@oxide/api'
-import type { BadgeColor, BadgeProps } from '@oxide/ui'
-import { Badge } from '@oxide/ui'
+import { Badge, type BadgeColor, type BadgeProps } from '@oxide/ui'
 
 const INSTANCE_COLORS: Record<InstanceState, Pick<BadgeProps, 'color' | 'variant'>> = {
   creating: { color: 'purple', variant: 'solid' },

app/components/SystemMetric.tsx

@@ -7,8 +7,12 @@
  */
 import React, { Suspense, useMemo, useRef } from 'react'
 
-import type { ChartDatum, SystemMetricName } from '@oxide/api'
-import { synthesizeData, useApiQuery } from '@oxide/api'
+import {
+  synthesizeData,
+  useApiQuery,
+  type ChartDatum,
+  type SystemMetricName,
+} from '@oxide/api'
 import { Badge, DirectionDownIcon, DirectionUpIcon, Spinner } from '@oxide/ui'
 import { splitDecimal } from '@oxide/util'
 

app/components/Terminal.tsx

@@ -6,8 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useEffect, useRef, useState } from 'react'
-import type { ITerminalOptions } from 'xterm'
-import { Terminal as XTerm } from 'xterm'
+import { Terminal as XTerm, type ITerminalOptions } from 'xterm'
 import { FitAddon } from 'xterm-addon-fit'
 
 import { DirectionDownIcon, DirectionUpIcon } from '@oxide/ui'

app/components/TopBar.tsx

@@ -11,11 +11,11 @@ import { useNavigate } from 'react-router-dom'
 import { navToLogin, useApiMutation } from '@oxide/api'
 import {
   Button,
+  buttonStyle,
   DirectionDownIcon,
   DropdownMenu,
   Info16Icon,
   Profile16Icon,
-  buttonStyle,
 } from '@oxide/ui'
 
 import { useCurrentUser } from 'app/layouts/AuthenticatedLayout'

app/components/TopBarPicker.tsx

@@ -8,8 +8,7 @@
 import cn from 'classnames'
 import { Link } from 'react-router-dom'
 
-import type { Project } from '@oxide/api'
-import { useApiQuery } from '@oxide/api'
+import { useApiQuery, type Project } from '@oxide/api'
 import {
   Button,
   DropdownMenu,

app/components/form/Form.tsx

@@ -8,7 +8,7 @@
 import cn from 'classnames'
 import { cloneElement } from 'react'
 
-import { Button, type ButtonProps, Error12Icon } from '@oxide/ui'
+import { Button, Error12Icon, type ButtonProps } from '@oxide/ui'
 import { classed, flattenChildren, invariant, isOneOf, pluckFirstOfType } from '@oxide/util'
 
 import './form.css'

app/components/form/FullPageForm.tsx

@@ -5,18 +5,19 @@
  *
  * Copyright Oxide Computer Company
  */
-import type { ReactElement, ReactNode } from 'react'
-import { cloneElement, useEffect } from 'react'
+import { cloneElement, useEffect, type ReactElement, type ReactNode } from 'react'
 import type { FieldValues, UseFormReturn } from 'react-hook-form'
-import type { unstable_Blocker as Blocker } from 'react-router-dom'
-import { unstable_useBlocker as useBlocker } from 'react-router-dom'
+import {
+  unstable_useBlocker as useBlocker,
+  type unstable_Blocker as Blocker,
+} from 'react-router-dom'
 
 import type { ApiError } from '@oxide/api'
 import { Modal, PageHeader, PageTitle } from '@oxide/ui'
 import { classed, flattenChildren, pluckFirstOfType } from '@oxide/util'
 
-import { PageActions } from '../PageActions'
 import { Form } from '../form/Form'
+import { PageActions } from '../PageActions'
 
 interface FullPageFormProps<TFieldValues extends FieldValues> {
   id: string

app/components/form/SideModalForm.tsx

@@ -5,8 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import type { ReactNode } from 'react'
-import { useEffect } from 'react'
+import { useEffect, type ReactNode } from 'react'
 import type { FieldValues, UseFormReturn } from 'react-hook-form'
 import { useNavigationType } from 'react-router-dom'
 

app/components/form/fields/CheckboxField.tsx

@@ -5,11 +5,9 @@
  *
  * Copyright Oxide Computer Company
  */
-import type { Control, FieldPath, FieldValues } from 'react-hook-form'
-import { Controller } from 'react-hook-form'
+import { Controller, type Control, type FieldPath, type FieldValues } from 'react-hook-form'
 
-import type { CheckboxProps } from '@oxide/ui'
-import { Checkbox } from '@oxide/ui'
+import { Checkbox, type CheckboxProps } from '@oxide/ui'
 
 type CheckboxFieldProps<
   TFieldValues extends FieldValues,

app/components/form/fields/DateTimeRangePicker.spec.tsx

@@ -12,8 +12,7 @@ import { beforeAll, describe, expect, it, vi } from 'vitest'
 
 import { clickByRole } from 'app/test/unit'
 
-import type { RangeKey } from './DateTimeRangePicker'
-import { DateTimeRangePicker } from './DateTimeRangePicker'
+import { DateTimeRangePicker, type RangeKey } from './DateTimeRangePicker'
 
 const now = getNow(getLocalTimeZone())
 

app/components/form/fields/DateTimeRangePicker.tsx

@@ -5,8 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import type { DateValue } from '@internationalized/date'
-import { getLocalTimeZone, now as getNow } from '@internationalized/date'
+import { getLocalTimeZone, now as getNow, type DateValue } from '@internationalized/date'
 import { useMemo, useState } from 'react'
 
 import { DateRangePicker, Listbox } from '@oxide/ui'

app/components/form/fields/DescriptionField.tsx

@@ -7,8 +7,7 @@
  */
 import type { FieldPath, FieldValues } from 'react-hook-form'
 
-import type { TextFieldProps } from './TextField'
-import { TextField } from './TextField'
+import { TextField, type TextFieldProps } from './TextField'
 
 // TODO: Pull this from generated types
 const MAX_LEN = 512

app/components/form/fields/DisksTableField.tsx

@@ -6,8 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useState } from 'react'
-import type { Control } from 'react-hook-form'
-import { useController } from 'react-hook-form'
+import { useController, type Control } from 'react-hook-form'
 
 import type { DiskCreate } from '@oxide/api'
 import { Badge, Button, Error16Icon, FieldLabel, MiniTable } from '@oxide/ui'

app/components/form/fields/FileField.tsx

@@ -5,8 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import type { Control, FieldPath, FieldValues } from 'react-hook-form'
-import { Controller } from 'react-hook-form'
+import { Controller, type Control, type FieldPath, type FieldValues } from 'react-hook-form'
 
 import { FieldLabel, FileInput, TextInputHint } from '@oxide/ui'
 

app/components/form/fields/ImageSelectField.tsx

@@ -5,8 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import type { Control } from 'react-hook-form'
-import { useController } from 'react-hook-form'
+import { useController, type Control } from 'react-hook-form'
 
 import type { Image } from '@oxide/api'
 import type { ListboxItem } from '@oxide/ui'

app/components/form/fields/ListboxField.tsx

@@ -6,11 +6,9 @@
  * Copyright Oxide Computer Company
  */
 import cn from 'classnames'
-import type { Control, FieldPath, FieldValues } from 'react-hook-form'
-import { Controller } from 'react-hook-form'
+import { Controller, type Control, type FieldPath, type FieldValues } from 'react-hook-form'
 
-import type { ListboxItem } from '@oxide/ui'
-import { Listbox } from '@oxide/ui'
+import { Listbox, type ListboxItem } from '@oxide/ui'
 import { capitalize } from '@oxide/util'
 
 import { ErrorMessage } from './ErrorMessage'

app/components/form/fields/NameField.tsx

@@ -9,8 +9,7 @@ import type { FieldPath, FieldValues } from 'react-hook-form'
 
 import { capitalize } from '@oxide/util'
 
-import type { TextFieldProps } from './TextField'
-import { TextField } from './TextField'
+import { TextField, type TextFieldProps } from './TextField'
 
 export function NameField<
   TFieldValues extends FieldValues,

app/components/form/fields/NetworkInterfaceField.tsx

@@ -6,8 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useState } from 'react'
-import type { Control } from 'react-hook-form'
-import { useController } from 'react-hook-form'
+import { useController, type Control } from 'react-hook-form'
 
 import type {
   InstanceNetworkInterfaceAttachment,

app/components/form/fields/NumberField.tsx

@@ -7,8 +7,7 @@
  */
 import cn from 'classnames'
 import { useId } from 'react'
-import type { FieldPathByValue, FieldValues } from 'react-hook-form'
-import { Controller } from 'react-hook-form'
+import { Controller, type FieldPathByValue, type FieldValues } from 'react-hook-form'
 
 import { FieldLabel, TextInputHint, NumberInput as UINumberField } from '@oxide/ui'
 import { capitalize } from '@oxide/util'

app/components/form/fields/RadioField.tsx

@@ -7,12 +7,21 @@
  */
 import cn from 'classnames'
 import React, { useId } from 'react'
-import type { Control, FieldPath, FieldValues, PathValue } from 'react-hook-form'
-import { Controller } from 'react-hook-form'
+import {
+  Controller,
+  type Control,
+  type FieldPath,
+  type FieldValues,
+  type PathValue,
+} from 'react-hook-form'
 
-import type { RadioGroupProps } from '@oxide/ui'
-import { Radio } from '@oxide/ui'
-import { FieldLabel, RadioGroup, TextInputHint } from '@oxide/ui'
+import {
+  FieldLabel,
+  Radio,
+  RadioGroup,
+  TextInputHint,
+  type RadioGroupProps,
+} from '@oxide/ui'
 import { capitalize } from '@oxide/util'
 
 export type RadioFieldProps<

app/components/form/fields/SubnetListbox.tsx

@@ -5,15 +5,13 @@
  *
  * Copyright Oxide Computer Company
  */
-import type { FieldPath, FieldValues } from 'react-hook-form'
-import { useWatch } from 'react-hook-form'
+import { useWatch, type FieldPath, type FieldValues } from 'react-hook-form'
 
 import { useApiQuery } from '@oxide/api'
 
 import { useProjectSelector } from 'app/hooks'
 
-import type { ListboxFieldProps } from './ListboxField'
-import { ListboxField } from './ListboxField'
+import { ListboxField, type ListboxFieldProps } from './ListboxField'
 
 type SubnetListboxProps<
   TFieldValues extends FieldValues,

app/components/form/fields/TextField.tsx

@@ -7,21 +7,22 @@
  */
 import cn from 'classnames'
 import { useId } from 'react'
-import type {
-  Control,
-  FieldPath,
-  FieldPathValue,
-  FieldValues,
-  Validate,
+import {
+  Controller,
+  type Control,
+  type FieldPath,
+  type FieldPathValue,
+  type FieldValues,
+  type Validate,
 } from 'react-hook-form'
-import { Controller } from 'react-hook-form'
 
-import type {
-  TextAreaProps as UITextAreaProps,
-  TextInputBaseProps as UITextFieldProps,
+import {
+  FieldLabel,
+  TextInputHint,
+  TextInput as UITextField,
+  type TextAreaProps as UITextAreaProps,
+  type TextInputBaseProps as UITextFieldProps,
 } from '@oxide/ui'
-import { TextInputHint } from '@oxide/ui'
-import { FieldLabel, TextInput as UITextField } from '@oxide/ui'
 import { capitalize } from '@oxide/util'
 
 import { ErrorMessage } from './ErrorMessage'

app/components/form/fields/TlsCertsField.tsx

@@ -6,8 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useState } from 'react'
-import type { Control } from 'react-hook-form'
-import { useController } from 'react-hook-form'
+import { useController, type Control } from 'react-hook-form'
 import type { Merge } from 'type-fest'
 
 import type { CertificateCreate } from '@oxide/api'

app/forms/access-util.tsx

@@ -5,10 +5,14 @@
  *
  * Copyright Oxide Computer Company
  */
-import type { Actor, IdentityType, Policy, RoleKey } from '@oxide/api'
-import { allRoles } from '@oxide/api'
-import type { ListboxItem } from '@oxide/ui'
-import { Badge } from '@oxide/ui'
+import {
+  allRoles,
+  type Actor,
+  type IdentityType,
+  type Policy,
+  type RoleKey,
+} from '@oxide/api'
+import { Badge, type ListboxItem } from '@oxide/ui'
 import { capitalize } from '@oxide/util'
 
 type AddUserValues = {

app/forms/disk-attach.tsx

@@ -5,8 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import type { ApiError } from '@oxide/api'
-import { useApiQuery } from '@oxide/api'
+import { useApiQuery, type ApiError } from '@oxide/api'
 
 import { ListboxField, SideModalForm } from 'app/components/form'
 import { useForm, useProjectSelector } from 'app/hooks'