Add import/order to sort imports

auth_test_utils/HTTPBasicAuthServer/app.ts

@@ -1,8 +1,8 @@
 /* eslint-disable no-console */
-import express from 'express'
 import path from 'path'
-import expressBasicAuth from 'express-basic-auth'
 import cors from 'cors'
+import express from 'express'
+import expressBasicAuth from 'express-basic-auth'
 
 const app = express()
 const port = 3040

auth_test_utils/OAuthServer/app.ts

@@ -1,9 +1,10 @@
 /* eslint-disable no-console */
-import express, { Request } from 'express'
 import path from 'path'
-import cors from 'cors'
 import bodyParser from 'body-parser'
+import cors from 'cors'
+import express from 'express'
 import oauthServer from './oauth/server'
+import type { Request } from 'express'
 
 const router = express.Router()
 

auth_test_utils/OAuthServer/oauth/model.ts

@@ -1,6 +1,6 @@
 import crypto from 'crypto'
 
-import {
+import type {
   Client,
   RefreshToken,
   RefreshTokenModel,

docs/generateConfigDocs.ts

@@ -1,3 +1,4 @@
+import fs from 'fs'
 import slugify from 'slugify'
 import {
   rm,
@@ -6,7 +7,6 @@ import {
   extractWithComment,
   getAllFiles,
 } from './util'
-import fs from 'fs'
 
 interface Derives {
   name: string

docs/generateStateModelDocs.ts

@@ -1,3 +1,4 @@
+import fs from 'fs'
 import slugify from 'slugify'
 import {
   rm,
@@ -6,7 +7,6 @@ import {
   removeComments,
   extractWithComment,
 } from './util'
-import fs from 'fs'
 
 interface Action {
   name: string

docs/util.ts

@@ -1,6 +1,6 @@
-import * as ts from 'typescript'
-import { promisify } from 'util'
 import { exec } from 'child_process'
+import { promisify } from 'util'
+import * as ts from 'typescript'
 const exec2 = promisify(exec)
 
 interface Node {

eslint.config.mjs

@@ -1,10 +1,11 @@
 import eslint from '@eslint/js'
+import importPlugin from 'eslint-plugin-import'
 import eslintPluginReact from 'eslint-plugin-react'
 import eslintPluginReactHooks from 'eslint-plugin-react-hooks'
 import eslintPluginReactRefresh from 'eslint-plugin-react-refresh'
 import eslintPluginUnicorn from 'eslint-plugin-unicorn'
-import tseslint from 'typescript-eslint'
 import globals from 'globals'
+import tseslint from 'typescript-eslint'
 
 export default tseslint.config(
   {
@@ -40,10 +41,12 @@ export default tseslint.config(
       },
     },
   },
+
   eslint.configs.recommended,
   ...tseslint.configs.recommended,
   ...tseslint.configs.stylisticTypeChecked,
   ...tseslint.configs.strictTypeChecked,
+  importPlugin.flatConfigs.recommended,
   eslintPluginReact.configs.flat.recommended,
   {
     plugins: {
@@ -79,6 +82,7 @@ export default tseslint.config(
           markers: ['/'],
         },
       ],
+
       'one-var': ['error', 'never'],
       'react-refresh/only-export-components': 'warn',
       'react/no-unescaped-entities': 'off',
@@ -132,6 +136,34 @@ export default tseslint.config(
       'unicorn/no-array-reduce': 'off',
       'unicorn/expiring-todo-comments': 'off',
 
+      'import/no-unresolved': 'off',
+      'import/order': [
+        'warn',
+        {
+          alphabetize: { order: 'asc' },
+          groups: [
+            'builtin',
+            ['external', 'internal'],
+            ['parent', 'sibling', 'index', 'object'],
+            'type',
+          ],
+          pathGroups: [
+            {
+              group: 'builtin',
+              pattern: 'react',
+              position: 'before',
+            },
+            {
+              group: 'external',
+              pattern: '@mui/icons-material',
+              position: 'after',
+            },
+          ],
+
+          pathGroupsExcludedImportTypes: ['react'],
+        },
+      ],
+
       '@typescript-eslint/no-deprecated': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/explicit-module-boundary-types': 'off',
@@ -147,6 +179,7 @@ export default tseslint.config(
       '@typescript-eslint/no-unsafe-return': 'off',
       '@typescript-eslint/prefer-nullish-coalescing': 'off',
       '@typescript-eslint/no-non-null-assertion': 'off',
+      '@typescript-eslint/consistent-type-imports': 'error',
       '@typescript-eslint/require-await': 'off',
       '@typescript-eslint/restrict-template-expressions': 'off',
       '@typescript-eslint/no-empty-function': 'off',

package.json

@@ -105,6 +105,7 @@
     "electron-builder": "^25.1.6",
     "electron-mock-ipc": "^0.3.8",
     "eslint": "^9.0.0",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.3",

packages/__mocks__/@testing-library/react.tsx

@@ -1,6 +1,6 @@
+import React, { Suspense } from 'react'
 import { createTheme, ThemeProvider } from '@mui/material/styles'
 
-import React, { Suspense } from 'react'
 
 const react = jest.requireActual('@testing-library/react')
 const render = (args: React.ReactNode) => {

packages/app-core/src/Assemblies/SessionAssembliesMixin.ts

@@ -1,9 +1,9 @@
-import { types } from 'mobx-state-tree'
 
-import PluginManager from '@jbrowse/core/PluginManager'
-import { AnyConfiguration } from '@jbrowse/core/configuration'
-import { BaseSession } from '@jbrowse/product-core'
-import { BaseAssemblyConfigSchema } from '@jbrowse/core/assemblyManager'
+import { types } from 'mobx-state-tree'
+import type PluginManager from '@jbrowse/core/PluginManager'
+import type { BaseAssemblyConfigSchema } from '@jbrowse/core/assemblyManager'
+import type { AnyConfiguration } from '@jbrowse/core/configuration'
+import type { BaseSession } from '@jbrowse/product-core'
 
 /**
  * #stateModel SessionAssembliesMixin

packages/app-core/src/Assemblies/TemporaryAssembliesMixin.ts

@@ -1,8 +1,8 @@
-import { types } from 'mobx-state-tree'
 
-import PluginManager from '@jbrowse/core/PluginManager'
-import { AnyConfiguration } from '@jbrowse/core/configuration'
-import { BaseSession } from '@jbrowse/product-core'
+import { types } from 'mobx-state-tree'
+import type PluginManager from '@jbrowse/core/PluginManager'
+import type { AnyConfiguration } from '@jbrowse/core/configuration'
+import type { BaseSession } from '@jbrowse/product-core'
 
 /**
  * #stateModel TemporaryAssembliesMixin

packages/app-core/src/HistoryManagement/index.ts

@@ -1,7 +1,7 @@
 import TimeTraveller from '@jbrowse/core/util/TimeTraveller'
-import type { BaseRootModel } from '@jbrowse/product-core'
 import { autorun } from 'mobx'
 import { addDisposer, types } from 'mobx-state-tree'
+import type { BaseRootModel } from '@jbrowse/product-core'
 
 /**
  * #stateModel HistoryManagementMixin

packages/app-core/src/JBrowseConfig/index.ts

@@ -1,17 +1,18 @@
 import {
-  AnyConfigurationSchemaType,
   ConfigurationSchema,
 } from '@jbrowse/core/configuration'
 
-import { PluginDefinition } from '@jbrowse/core/PluginLoader'
-import PluginManager from '@jbrowse/core/PluginManager'
 import RpcManager from '@jbrowse/core/rpc/RpcManager'
 import {
   FormatAboutConfigSchemaFactory,
   FormatDetailsConfigSchemaFactory,
   HierarchicalConfigSchemaFactory,
 } from '@jbrowse/product-core'
 import { types } from 'mobx-state-tree'
+import type { PluginDefinition } from '@jbrowse/core/PluginLoader'
+import type PluginManager from '@jbrowse/core/PluginManager'
+import type {
+  AnyConfigurationSchemaType} from '@jbrowse/core/configuration'
 
 /**
  * #config JBrowseRootConfig

packages/app-core/src/JBrowseModel/index.ts

@@ -1,17 +1,17 @@
-import PluginManager from '@jbrowse/core/PluginManager'
-import { BaseAssemblyConfigSchema } from '@jbrowse/core/assemblyManager'
-import { cast, getParent, getSnapshot } from 'mobx-state-tree'
-import RpcManager from '@jbrowse/core/rpc/RpcManager'
-import {
-  AnyConfigurationModel,
-  readConfObject,
-} from '@jbrowse/core/configuration'
-import { PluginDefinition } from '@jbrowse/core/PluginLoader'
+import { readConfObject } from '@jbrowse/core/configuration'
 import { toJS } from 'mobx'
+import { cast, getParent, getSnapshot } from 'mobx-state-tree'
 
 // locals
 import { JBrowseConfigF } from '../JBrowseConfig'
 
+// types
+import type { PluginDefinition } from '@jbrowse/core/PluginLoader'
+import type PluginManager from '@jbrowse/core/PluginManager'
+import type { BaseAssemblyConfigSchema } from '@jbrowse/core/assemblyManager'
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration'
+import type RpcManager from '@jbrowse/core/rpc/RpcManager'
+
 /**
  * #stateModel AppCoreJBrowseModel
  * note that JBrowseRootConfig is a config model, but config models are MST

packages/app-core/src/RootMenu/index.ts

@@ -1,5 +1,5 @@
-import { MenuItem } from '@jbrowse/core/ui/Menu'
 import { types } from 'mobx-state-tree'
+import type { MenuItem } from '@jbrowse/core/ui/Menu'
 
 export interface Menu {
   label: string

packages/app-core/src/ui/App/App.tsx

@@ -1,17 +1,17 @@
 import React, { Suspense, lazy } from 'react'
+import Snackbar from '@jbrowse/core/ui/Snackbar'
 import { AppBar } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
-import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util'
-import Snackbar from '@jbrowse/core/ui/Snackbar'
-import { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel'
-import { MenuItem as JBMenuItem } from '@jbrowse/core/ui/Menu'
+import { makeStyles } from 'tss-react/mui'
 
 // locals
+import AppFab from './AppFab'
 import AppToolbar from './AppToolbar'
 import DialogQueue from './DialogQueue'
-import AppFab from './AppFab'
 import ViewsContainer from './ViewsContainer'
+import type { MenuItem as JBMenuItem } from '@jbrowse/core/ui/Menu'
+import type { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel'
+import type { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util'
 
 // lazies
 const DrawerWidget = lazy(() => import('./DrawerWidget'))

packages/app-core/src/ui/App/AppFab.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
+import LaunchIcon from '@mui/icons-material/Launch'
 import { Fab, Tooltip } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
-import { SessionWithDrawerWidgets } from '@jbrowse/core/util'
+import { makeStyles } from 'tss-react/mui'
+import type { SessionWithDrawerWidgets } from '@jbrowse/core/util'
 
 // icons
-import LaunchIcon from '@mui/icons-material/Launch'
 
 const useStyles = makeStyles()(theme => ({
   left: {

packages/app-core/src/ui/App/AppToolbar.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
-import { Toolbar, Tooltip } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-import { SessionWithDrawerWidgets } from '@jbrowse/core/util'
+import AppLogo from '@jbrowse/core/ui/AppLogo'
 import DropDownMenu from '@jbrowse/core/ui/DropDownMenu'
 import EditableTypography from '@jbrowse/core/ui/EditableTypography'
-import AppLogo from '@jbrowse/core/ui/AppLogo'
-import { MenuItem as JBMenuItem } from '@jbrowse/core/ui/Menu'
-import { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel'
+import { Toolbar, Tooltip } from '@mui/material'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+import type { MenuItem as JBMenuItem } from '@jbrowse/core/ui/Menu'
+import type { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel'
+import type { SessionWithDrawerWidgets } from '@jbrowse/core/util'
 
 const useStyles = makeStyles()(theme => ({
   grow: {

packages/app-core/src/ui/App/DialogQueue.tsx

@@ -1,8 +1,8 @@
 import React, { Suspense } from 'react'
 import { observer } from 'mobx-react'
+import type { SessionWithDrawerWidgets } from '@jbrowse/core/util'
 
 // locals
-import { SessionWithDrawerWidgets } from '@jbrowse/core/util'
 
 const DialogQueue = observer(function ({
   session,

packages/app-core/src/ui/App/Drawer.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useRef } from 'react'
+import ResizeHandle from '@jbrowse/core/ui/ResizeHandle'
 import { Paper } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
-import ResizeHandle from '@jbrowse/core/ui/ResizeHandle'
-import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types'
+import { makeStyles } from 'tss-react/mui'
+import type { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types'
 
 const useStyles = makeStyles()(theme => ({
   paper: {

packages/app-core/src/ui/App/DrawerControls.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react'
-import { IconButton, Menu, MenuItem, Tooltip } from '@mui/material'
-import { observer } from 'mobx-react'
-import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types'
 
 // icons
 import CloseIcon from '@mui/icons-material/Close'
 import MinimizeIcon from '@mui/icons-material/Minimize'
 import MoreVertIcon from '@mui/icons-material/MoreVert'
+import { IconButton, Menu, MenuItem, Tooltip } from '@mui/material'
+import { observer } from 'mobx-react'
+import type { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types'
 
 const DrawerControls = observer(function ({
   session,

packages/app-core/src/ui/App/DrawerHeader.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
+import LaunchIcon from '@mui/icons-material/Launch'
 import { AppBar, IconButton, Toolbar, Tooltip } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
-import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types'
+import { makeStyles } from 'tss-react/mui'
 
 // locals
-import DrawerWidgetSelector from './DrawerWidgetSelector'
 import DrawerControls from './DrawerControls'
+import DrawerWidgetSelector from './DrawerWidgetSelector'
+import type { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types'
 
 // icons
-import LaunchIcon from '@mui/icons-material/Launch'
 
 const useStyles = makeStyles()(theme => ({
   spacer: {

packages/app-core/src/ui/App/DrawerWidget.tsx

@@ -1,14 +1,14 @@
 import React, { Suspense, lazy, useState } from 'react'
+import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui'
 import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary'
 
-import { observer } from 'mobx-react'
 import { getEnv } from '@jbrowse/core/util'
-import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui'
-import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types'
+import { observer } from 'mobx-react'
 
 // locals
 import Drawer from './Drawer'
 import DrawerHeader from './DrawerHeader'
+import type { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types'
 
 const ModalWidget = lazy(() => import('./ModalWidget'))