Add import order rule to eslint, add eslint to lint-staged

.eslintrc.cjs

@@ -1,71 +1,92 @@
 module.exports = {
   root: true,
-  parser: "@typescript-eslint/parser",
+  parser: '@typescript-eslint/parser',
   plugins: [
-    "react",
-    "react-hooks",
-    "testing-library",
-    "jest",
-    "jest-dom",
-    "@typescript-eslint",
+    'react',
+    'react-hooks',
+    'testing-library',
+    'jest',
+    'jest-dom',
+    '@typescript-eslint',
   ],
-    ignorePatterns: ["apps/portals/src/tests/*"],
+  ignorePatterns: ['apps/portals/src/tests/*'],
   extends: [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:jest/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/recommended-requiring-type-checking",
-    "plugin:storybook/recommended",
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:jest/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    'plugin:storybook/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
   ],
   parserOptions: {
     tsconfigRootDir: __dirname,
     project: [
-      "./tsconfig.json",
-      "./packages/**/tsconfig.json",
-      "./apps/**/tsconfig.json",
+      './tsconfig.json',
+      './packages/**/tsconfig.json',
+      './apps/**/tsconfig.json',
     ],
   },
   rules: {
-    "react/prop-types": [0],
-    "react/no-unstable-nested-components": "warn",
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": [
-      "warn",
+    'react/prop-types': [0],
+    'react/no-unstable-nested-components': 'warn',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': [
+      'warn',
       {
-        additionalHooks: "useDebouncedEffect",
+        additionalHooks: 'useDebouncedEffect',
       },
     ],
-    "no-extra-semi": "off",
-    "prefer-const": "warn",
-    "jest/expect-expect": "off",
-    "@typescript-eslint/restrict-template-expressions": [
-      "warn",
+    'no-extra-semi': 'off',
+    'prefer-const': 'warn',
+    'jest/expect-expect': 'off',
+    '@typescript-eslint/restrict-template-expressions': [
+      'warn',
       { allowBoolean: true },
     ],
-    "@typescript-eslint/unbound-method": "warn",
-    "@typescript-eslint/no-inferrable-types": "off",
-    "@typescript-eslint/ban-ts-comment": "warn",
-    "@typescript-eslint/no-empty-interface": "warn",
-    "@typescript-eslint/no-floating-promises": "off",
-    "@typescript-eslint/no-unsafe-argument": "warn",
-    "@typescript-eslint/no-unsafe-assignment": "warn",
-    "@typescript-eslint/no-unsafe-member-access": "warn",
-    "@typescript-eslint/no-unsafe-call": "warn",
-    "@typescript-eslint/no-unsafe-return": "warn",
-    "@typescript-eslint/no-unnecessary-type-assertion": "warn",
-    "@typescript-eslint/no-non-null-assertion": "off",
-    "@typescript-eslint/no-non-null-asserted-optional-chain": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "off",
-    "@typescript-eslint/no-empty-function": "off",
-    "@typescript-eslint/no-extra-semi": "warn",
+    '@typescript-eslint/unbound-method': 'warn',
+    '@typescript-eslint/no-inferrable-types': 'off',
+    '@typescript-eslint/ban-ts-comment': 'warn',
+    '@typescript-eslint/no-empty-interface': 'warn',
+    '@typescript-eslint/no-floating-promises': 'off',
+    '@typescript-eslint/no-unsafe-argument': 'warn',
+    '@typescript-eslint/no-unsafe-assignment': 'warn',
+    '@typescript-eslint/no-unsafe-member-access': 'warn',
+    '@typescript-eslint/no-unsafe-call': 'warn',
+    '@typescript-eslint/no-unsafe-return': 'warn',
+    '@typescript-eslint/no-unnecessary-type-assertion': 'warn',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-extra-semi': 'warn',
+    'import/order': [
+      'error',
+      {
+        groups: [
+          'builtin',
+          'external',
+          'internal',
+          'parent',
+          'sibling',
+          'index',
+          'object',
+          'type',
+        ],
+      },
+    ],
   },
   settings: {
     react: {
-      version: "detect",
+      version: 'detect',
+    },
+    'import/resolver': {
+      typescript: true,
+      node: true,
     },
   },
   globals: {
     JSX: true,
   },
-};
+}

apps/SageAccountWeb/package.json

@@ -80,6 +80,7 @@
   },
   "scripts": {
     "clean": "rimraf build coverage",
+    "lint": "eslint src",
     "start": "vite",
     "build": "vite build",
     "test": "vitest",

apps/SageAccountWeb/src/App.tsx

@@ -1,4 +1,14 @@
 import { StyledEngineProvider } from '@mui/material/styles'
+import React from 'react'
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
+import {
+  ApplicationSessionManager,
+  SynapseClient,
+  SynapseToastContainer,
+  SynapseContextType,
+  SynapseContextConsumer,
+} from 'synapse-react-client'
+import { QueryClient, QueryClientProvider } from 'react-query'
 import { AppContextConsumer } from './AppContext'
 import { SageResourcesPage } from './components/SageResourcesPage'
 import { AccountCreatedPage } from './components/AccountCreatedPage'
@@ -12,20 +22,10 @@ import { RegisterAccount1 } from './components/RegisterAccount1'
 import { RegisterAccount2 } from './components/RegisterAccount2'
 import { ResetPassword } from './components/ResetPassword'
 import { TermsOfUsePage } from './components/TermsOfUsePage'
-import React from 'react'
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
-import {
-  ApplicationSessionManager,
-  SynapseClient,
-  SynapseToastContainer,
-  SynapseContextType,
-  SynapseContextConsumer,
-} from 'synapse-react-client'
 import { getSearchParam } from './URLUtils'
 import './App.scss'
 import AppInitializer from './AppInitializer'
 import LoginPage from './LoginPage'
-import { QueryClient, QueryClientProvider } from 'react-query'
 import TwoFactorAuthEnrollmentPage from './components/TwoFactorAuth/TwoFactorAuthEnrollmentPage'
 import TwoFactorAuthBackupCodesPage from './components/TwoFactorAuth/TwoFactorAuthBackupCodesPage'
 import { PersonalAccessTokensPage } from './components/PersonalAccessTokensPage'

apps/SageAccountWeb/src/AppInitializer.tsx

@@ -1,18 +1,18 @@
 import React, { useEffect, useState } from 'react'
 import { Redirect } from 'react-router-dom'
-import { getSearchParam } from './URLUtils'
-import useAnalytics from './useAnalytics'
 import { SignedTokenInterface } from '@sage-bionetworks/synapse-types'
 import { createTheme, ThemeProvider } from '@mui/material/styles'
-import { useSourceApp } from './components/SourceApp.js'
-import { sageAccountWebThemeOverrides } from './style/theme'
 import { Theme } from '@mui/material'
 import {
   useLastLoginInfoState,
   SynapseTheme,
   SynapseUtilityFunctions,
   useApplicationSessionContext,
 } from 'synapse-react-client'
+import { getSearchParam } from './URLUtils'
+import useAnalytics from './useAnalytics'
+import { useSourceApp } from './components/SourceApp.js'
+import { sageAccountWebThemeOverrides } from './style/theme'
 import { AppContextProvider } from './AppContext'
 
 function AppInitializer(props: { children?: React.ReactNode }) {

apps/SageAccountWeb/src/components/AccountCreatedPage.tsx

@@ -1,14 +1,12 @@
 import React from 'react'
-import { SourceAppLogo, useSourceApp, useSourceAppConfigs } from './SourceApp'
 import { Button, Grid, Link, Typography } from '@mui/material'
-import { AppContextConsumer } from '../AppContext'
 import { Link as RouterLink } from 'react-router-dom'
-import { LeftRightPanel } from './LeftRightPanel'
+import { AppContextConsumer } from '../AppContext'
 import useMembershipInvitationTokenHandler from '../hooks/useMembershipInvitationTokenHandler'
+import { LeftRightPanel } from './LeftRightPanel'
+import { SourceAppLogo, useSourceApp, useSourceAppConfigs } from './SourceApp'
 
-export type AccountCreatedPageProps = {}
-
-export const AccountCreatedPage = (props: AccountCreatedPageProps) => {
+export const AccountCreatedPage = () => {
   const membershipInvitation = useMembershipInvitationTokenHandler()
   const sourceApp = useSourceApp()
   const sourceAppConfigs = useSourceAppConfigs()

apps/SageAccountWeb/src/components/AccountSettings.tsx

@@ -23,12 +23,12 @@ import {
 } from 'synapse-react-client'
 import { Link as RouterLink, useHistory, useLocation } from 'react-router-dom'
 import { Form } from 'react-bootstrap'
+import UniversalCookies from 'universal-cookie'
 import { ChangePassword } from './ChangePassword'
 import { ORCiDButton } from './ProfileValidation/ORCiDButton'
 import AccountSettingsTopBar from './AccountSettingsTopBar'
 import { ConfigureEmail } from './ConfigureEmail'
 import { UnbindORCiDDialog } from './ProfileValidation/UnbindORCiD'
-import UniversalCookies from 'universal-cookie'
 import { StyledFormControl } from './StyledComponents'
 import { ProfileAvatar } from './ProfileAvatar'
 import { useSourceAppConfigs } from './SourceApp'

apps/SageAccountWeb/src/components/AccountSettingsTopBar.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import { BadgeOutlined } from '@mui/icons-material'
 import { Box, Button, SxProps, Typography } from '@mui/material'
-import { useSourceApp } from './SourceApp'
-import { useAppContext } from '../AppContext'
 import {
   SynapseClient,
   useApplicationSessionContext,
 } from 'synapse-react-client'
+import { useAppContext } from '../AppContext'
+import { useSourceApp } from './SourceApp'
 
 const AccountSettingsTopBar: React.FunctionComponent = () => {
   const sourceApp = useSourceApp()

apps/SageAccountWeb/src/components/ConfigureEmail.tsx

@@ -5,7 +5,6 @@ import {
   SynapseQueries,
   useSynapseContext,
 } from 'synapse-react-client'
-import { getSearchParam, hexDecodeAndDeserialize } from '../URLUtils'
 import {
   Box,
   Button,
@@ -20,6 +19,7 @@ import {
 } from '@mui/material'
 import DeleteIcon from '@mui/icons-material/DeleteTwoTone'
 import AddCircleTwoToneIcon from '@mui/icons-material/AddCircleTwoTone'
+import { getSearchParam, hexDecodeAndDeserialize } from '../URLUtils'
 import { StyledFormControl } from './StyledComponents'
 
 export type ConfigureEmailProps = {
@@ -158,13 +158,17 @@ export const ConfigureEmail = (props: ConfigureEmailProps) => {
                 <Box sx={{ flexGrow: 1, marginRight: '10px' }}>{email}</Box>
                 <Button
                   variant="outlined"
-                  onClick={e => changePrimaryEmail(e, email)}
+                  onClick={e => {
+                    changePrimaryEmail(e, email)
+                  }}
                 >
                   Make Primary
                 </Button>
                 <IconButton
                   aria-label="close"
-                  onClick={e => deleteEmail(e, email)}
+                  onClick={e => {
+                    deleteEmail(e, email)
+                  }}
                 >
                   <DeleteIcon />
                 </IconButton>
@@ -202,7 +206,9 @@ export const ConfigureEmail = (props: ConfigureEmailProps) => {
         control={
           <Checkbox
             checked={sendEmailNotifications}
-            onChange={e => updateEmailNotifications(!sendEmailNotifications)}
+            onChange={e => {
+              updateEmailNotifications(!sendEmailNotifications)
+            }}
           />
         }
         label={

apps/SageAccountWeb/src/components/CropImage.ts

@@ -1,4 +1,4 @@
-import { Area } from 'react-easy-crop/types'
+import type { Area } from 'react-easy-crop/types'
 
 export const createImg = (url: string) =>
   new Promise<HTMLImageElement>((res, rej) => {

apps/SageAccountWeb/src/components/CurrentAffiliationPage.tsx

@@ -1,15 +1,15 @@
 import React, { useEffect, useState } from 'react'
-import { SourceAppLogo, useSourceApp } from './SourceApp'
 import { InputLabel, TextField, Typography } from '@mui/material'
-import { LeftRightPanel } from './LeftRightPanel'
-import { StyledFormControl } from './StyledComponents'
 import {
   displayToast,
   SynapseClient,
   SynapseQueries,
   useSynapseContext,
 } from 'synapse-react-client'
 import { Redirect } from 'react-router-dom'
+import { SourceAppLogo, useSourceApp } from './SourceApp'
+import { LeftRightPanel } from './LeftRightPanel'
+import { StyledFormControl } from './StyledComponents'
 import { ContinueButton } from './ProfileValidation/ContinueButton'
 
 export const CurrentAffiliationPage = () => {

apps/SageAccountWeb/src/components/EmailConfirmationPage.tsx

@@ -36,7 +36,7 @@ export const EmailConfirmationPage: React.FunctionComponent<
         <div className="thankYouText">
           <h3>Please check your email.</h3>
           <p>
-            We've sent an email to <strong>{email}</strong>
+            We&apos;ve sent an email to <strong>{email}</strong>
           </p>
           <p>
             Click the link in the message to verify your address, then continue
@@ -49,7 +49,7 @@ export const EmailConfirmationPage: React.FunctionComponent<
             }
             target="_blank"
           >
-            I didn't receive an email
+            I didn&apos;t receive an email
           </Link>
         </div>
         <Button

apps/SageAccountWeb/src/components/JoinTeamPage.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react'
 import { Box, Button, Typography, useTheme } from '@mui/material'
-import { useAppContext } from '../AppContext'
 import {
   displayToast,
   SynapseClient,
@@ -15,11 +14,10 @@ import {
   ResponseMessage,
 } from '@sage-bionetworks/synapse-types'
 import { CelebrationOutlined, Groups2Outlined } from '@mui/icons-material'
+import { useAppContext } from '../AppContext'
 import { StyledOuterContainer } from './StyledComponents'
 
-export type JoinTeamPageProps = {}
-
-export const JoinTeamPage = (props: JoinTeamPageProps) => {
+export const JoinTeamPage = () => {
   const context = useAppContext()
   const theme = useTheme()
   const [joinTeamToken, setJoinTeamToken] = useState<JoinTeamSignedToken>()

apps/SageAccountWeb/src/components/LeftRightPanel.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { StyledInnerContainer, StyledOuterContainer } from './StyledComponents'
 import { Box, useTheme } from '@mui/material'
+import { StyledInnerContainer, StyledOuterContainer } from './StyledComponents'
 
 export const LeftRightPanel: React.FC<{
   leftContent: JSX.Element

apps/SageAccountWeb/src/components/OAuthClientManagementPage.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
+import { Box, Paper, Typography } from '@mui/material'
+import { OAuthClientManagement } from 'synapse-react-client'
 import { SourceAppLogo } from './SourceApp'
 import { StyledOuterContainer } from './StyledComponents'
-import { Box, Paper, Typography } from '@mui/material'
 import { BackButton } from './BackButton'
-import { OAuthClientManagement } from 'synapse-react-client'
 
 export const OAuthClientManagementPage = () => {
   return (

apps/SageAccountWeb/src/components/PersonalAccessTokensPage.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
+import { Box, Paper, Typography } from '@mui/material'
+import { AccessTokenPage } from 'synapse-react-client'
 import { SourceAppLogo } from './SourceApp'
 import { StyledOuterContainer } from './StyledComponents'
-import { Box, Paper, Typography } from '@mui/material'
 import { BackButton } from './BackButton'
-import { AccessTokenPage } from 'synapse-react-client'
 
 export const PersonalAccessTokensPage = () => {
   return (