Switch import sorter Prettier plugin (#1808)

* switch import sorter to one that groups imports from the same package

* combine all type and non-type imports into one statement!

Author: david-crespo

.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'