Add eslint-plugin-import

.eslintrc.js

@@ -8,6 +8,12 @@ module.exports = {
     react: {
       version: 'detect',
     },
+    'import/resolver': {
+      typescript: {
+        alwaysTryTypes: true,
+        project: './tsconfig.json',
+      },
+    },
   },
   extends: [
     'plugin:@typescript-eslint/recommended',
@@ -16,6 +22,8 @@ module.exports = {
     'plugin:react/jsx-runtime',
     'plugin:react/recommended',
     'plugin:react-hooks/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
   ],
   rules: {
     'react/react-in-jsx-scope': 0,
@@ -63,6 +71,31 @@ module.exports = {
     '@typescript-eslint/ban-ts-ignore': 'off',
     '@typescript-eslint/no-unnecessary-type-constraint': 'off',
     '@typescript-eslint/consistent-type-imports': ['error', { fixStyle: 'inline-type-imports' }],
+    'import/namespace': ['error', { allowComputed: true }],
+    'import/no-unresolved': [
+      'error',
+      {
+        ignore: ['^react-select/dist/.+'],
+      },
+    ],
+    'import/order': [
+      'error',
+      {
+        'newlines-between': 'always',
+        pathGroupsExcludedImportTypes: ['builtin'],
+        pathGroups: [
+          { pattern: 'react', group: 'builtin' },
+          { pattern: '../**/__mocks__/*', group: 'internal' },
+          { pattern: '../../**/__mocks__/*', group: 'internal' },
+          { pattern: '../../../**/__mocks__/*', group: 'internal' },
+        ],
+        groups: ['builtin', 'external', 'object', 'index', 'parent', 'sibling', 'internal', 'type'],
+        alphabetize: {
+          order: 'asc' /* sort in ascending order. Options: ['ignore', 'asc', 'desc'] */,
+          caseInsensitive: true /* ignore case. Options: [true, false] */,
+        },
+      },
+    ],
   },
   overrides: [
     {

package.json

@@ -51,6 +51,8 @@
     "danger-plugin-yarn": "^1.6.0",
     "eslint": "8.55.0",
     "eslint-config-prettier": "9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "5.0.1",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",

src/__tests__/components/Button.test.tsx

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+
 import { Button } from '../../components/Button';
 import { ThemedApp } from '../../stories/styles';
 

src/__tests__/components/LinkButton.test.tsx

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+
 import { LinkButton } from '../../components/LinkButton';
 import { ThemedApp } from '../../stories/styles';
 

src/__tests__/components/Modal.test.tsx

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+
 import { Modal } from '../../components/Modal';
 import { ThemedApp } from '../../stories/styles';
 

src/components/Button/index.tsx

@@ -1,10 +1,14 @@
-import React from 'react';
-import { ButtonWrapper } from './styles';
-import { Icon, type IconProps } from '../Icon';
+import { memo } from 'react';
+import type React from 'react';
+
 import { type ButtonProps as MuiButtonProps } from '@mui/material';
-import { useButtonStyles, useButtonFontStyle } from './utils';
+
+import { Icon, type IconProps } from '../Icon';
 import { Typography } from '../Typography';
 
+import { ButtonWrapper } from './styles';
+import { useButtonStyles, useButtonFontStyle } from './utils';
+
 export type ButtonProps = Omit<MuiButtonProps, 'variant' | 'type' | 'size' | 'children'> & {
   variant: 'primary' | 'secondary' | 'tertiary';
   type: 'mint' | 'destructive' | 'disabled';
@@ -50,4 +54,4 @@ const ButtonNoMemo: React.FC<ButtonProps> = ({
   );
 };
 
-export const Button = React.memo(ButtonNoMemo);
+export const Button = memo(ButtonNoMemo);

src/components/Button/utils.ts

@@ -1,4 +1,5 @@
 import { useTheme } from '@mui/material';
+
 import { type Colors, type TypographyFontSize } from '../../mui-theme';
 import { ButtonDimension } from '../../my-constants';
 

src/components/Card.tsx

@@ -1,11 +1,13 @@
-import React from 'react';
+import { memo } from 'react';
+import type React from 'react';
+
 import { styled, useTheme } from '@mui/material';
 
 import { Button } from './Button';
 import { Flex } from './Flex';
 import { type IconProps } from './Icon';
-import { Typography } from './Typography';
 import { LinkButton } from './LinkButton';
+import { Typography } from './Typography';
 
 type CardButtonsProps = {
   editing: boolean;
@@ -108,7 +110,7 @@ function CardButtonsNoMemo(props: CardButtonsProps) {
   );
 }
 
-const CardButtons = React.memo(CardButtonsNoMemo);
+const CardButtons = memo(CardButtonsNoMemo);
 
 const Wrapper = styled(Flex)<{ fullWidth: boolean }>(({ theme, fullWidth }) => ({
   outline: `1px solid ${theme.palette.colors.dark15}`,

src/components/Checkbox.tsx

@@ -1,10 +1,11 @@
 import type React from 'react';
+
 import { Checkbox as CheckboxMui, FormControlLabel, styled, useTheme } from '@mui/material';
 
 import { Flex } from './Flex';
 import { Icon } from './Icon';
-import { Typography } from './Typography';
 import { TextFieldErrorLabel } from './TextInput/Labels';
+import { Typography } from './Typography';
 
 type CheckboxSize = 'sm' | 'md' | 'lg';
 

src/components/DocumentUploadCard/LeftContent/index.tsx

@@ -1,9 +1,10 @@
 // External Imports
 // React
-import type React from 'react';
 
 // Relative Imports
 // Components
+import type React from 'react';
+
 import { Flex } from '../../Flex';
 import { Typography } from '../../Typography';
 

src/components/DocumentUploadCard/RightContent/Locked.tsx

@@ -1,14 +1,15 @@
 // External Imports
 // React
-import type React from 'react';
 // Material
-import { typedMemo } from '../../../utils';
-
 // Relative Imports
 // Components
+import type React from 'react';
+
+import { typedMemo } from '../../../utils';
 import { Flex } from '../../Flex';
 import { Icon } from '../../Icon';
 import { Typography } from '../../Typography';
+// Utils
 
 type LockedProps = {
   fileUrl?: string;

src/components/DocumentUploadCard/RightContent/Upload.tsx

@@ -1,15 +1,13 @@
 // External Imports
 // React
+import { useCallback, useMemo } from 'react';
 import type React from 'react';
-import { useCallback } from 'react';
-// Material
 
 // Relative Imports
 // Components
-import { Flex } from '../../Flex';
-import { Button } from '../../Button';
-// Styling
 import { typedMemo } from '../../../utils';
+import { Button } from '../../Button';
+import { Flex } from '../../Flex';
 
 type UploadProps = { onSelect: (file: File) => void; accept?: string };
 
@@ -29,7 +27,7 @@ const UploadNoMemo: React.FC<UploadProps> = ({ onSelect, accept = '.pdf' }) => {
     [accept]
   );
 
-  const onClick = onUpload.bind(null, onSelect);
+  const onClick = useMemo(() => onUpload.bind(null, onSelect), [onSelect, onUpload]);
 
   return (
     <Flex direction="row">

src/components/DocumentUploadCard/RightContent/Uploaded.tsx

@@ -1,16 +1,18 @@
 // External Imports
 // React
-import type React from 'react';
 import { useState, useCallback } from 'react';
+import type React from 'react';
 
-// Relative Imports
-// Components
-import { Icon } from '../../Icon';
-import { Flex } from '../../Flex';
+import { useTheme } from '@mui/material';
+
+import { typedMemo } from '../../../utils';
 import { Button } from '../../Button';
+import { Flex } from '../../Flex';
+import { Icon } from '../../Icon';
 import { LinkButton } from '../../LinkButton';
-import { typedMemo } from '../../../utils';
-import { useTheme } from '@mui/material';
+
+// Relative Imports
+// Components
 
 type UploadedProps = { onFileDelete: () => void };
 

src/components/DocumentUploadCard/RightContent/Uploading.tsx

@@ -1,9 +1,10 @@
 // External Imports
 // React
-import type React from 'react';
 
 // Relative Imports
 // Components
+import type React from 'react';
+
 import { Flex } from '../../Flex';
 import { Typography } from '../../Typography';
 

src/components/DocumentUploadCard/index.tsx

@@ -1,13 +1,14 @@
 // Relative Imports
 // Components
+import { Flex } from '../../components/Flex';
 import { Icon } from '../../components/Icon';
 import { Typography } from '../../components/Typography';
-import { Flex } from '../../components/Flex';
 // Styled Components
-import { FlexCard, StyledLinearProgress, TypographyContainer } from './styles';
+import { TextFieldLabel } from '../TextInput/Labels';
+
 import { LeftContent } from './LeftContent';
 import { Locked, Upload, Uploading, Uploaded } from './RightContent';
-import { TextFieldLabel } from '../TextInput/Labels';
+import { FlexCard, StyledLinearProgress, TypographyContainer } from './styles';
 
 export type DocumentUploadCardProps = {
   label: string;

src/components/DocumentUploadCard/styles.tsx

@@ -1,4 +1,5 @@
 import { css, LinearProgress, styled } from '@mui/material';
+
 import { Flex } from '../Flex';
 
 const FlexCard = styled(Flex)<{

src/components/Dropdown/index.tsx

@@ -1,10 +1,11 @@
 import React, { useCallback, useMemo } from 'react';
+
 import { Select, MenuItem, type SelectChangeEvent, styled, useTheme, ListItemIcon } from '@mui/material';
-import { TextFieldErrorLabel, TextFieldLabel } from '../TextInput/Labels';
-import { Typography } from '../Typography';
-import { Icon } from '../Icon';
 
 import { automation } from '../../utils';
+import { Icon } from '../Icon';
+import { TextFieldErrorLabel, TextFieldLabel } from '../TextInput/Labels';
+import { Typography } from '../Typography';
 
 type Option = {
   label: string;

src/components/Flex.tsx

@@ -1,4 +1,5 @@
 import { type CSSProperties } from 'react';
+
 import { styled, css } from '@mui/material';
 
 const Flex = styled('div')<{

src/components/Icon/Custom/GameIconsPerson.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+
 import { type Icon } from './types';
 
 /**

src/components/Icon/index.tsx

@@ -1,9 +1,11 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, memo } from 'react';
+
 import * as Icons from 'tabler-icons-react';
-import * as CustomIcons from './Custom';
 
-import { type Colors } from '../../theme.types';
 import { colorPalette } from '../../mui-theme';
+import { type Colors } from '../../theme.types';
+
+import * as CustomIcons from './Custom';
 
 export type IconProps = {
   icon: keyof typeof Icons | keyof typeof CustomIcons;
@@ -21,5 +23,5 @@ function IconNoMemo(props: IconProps) {
   return <IconComponent color={colorPalette[props.color]} className={props.className} size={props.size} />;
 }
 
-const Icon = React.memo(IconNoMemo);
+const Icon = memo(IconNoMemo);
 export { Icon };

src/components/ImageUpload.tsx

@@ -1,12 +1,13 @@
 import { useCallback } from 'react';
+
 import { styled, useTheme } from '@mui/material';
 
+import { automation } from '../utils';
+
+import { Button } from './Button';
 import { Flex } from './Flex';
-import { Typography } from './Typography';
 import { Icon } from './Icon';
-import { Button } from './Button';
-
-import { automation } from '../utils';
+import { Typography } from './Typography';
 
 export type ImageUploadProps = {
   label: string;

src/components/InformationCheckbox/index.tsx

@@ -1,12 +1,13 @@
 import type React from 'react';
+
 import { styled, useTheme } from '@mui/material';
 
-import { Typography } from '../Typography';
-import { Flex } from '../Flex';
+import { automation } from '../../utils';
 import { RawCheckbox } from '../Checkbox';
+import { Flex } from '../Flex';
+import { Typography } from '../Typography';
 
 import { getInfoCheckboxBackgroundColor } from './utils';
-import { automation } from '../../utils';
 
 export type InformationCheckboxProps = {
   title: string;

src/components/KebabMenu/index.tsx

@@ -1,7 +1,10 @@
-import { Menu, type PaperProps, type PopoverOrigin } from '@mui/material';
 import { useCallback, useMemo, useState } from 'react';
+
+import { Menu, type PaperProps, type PopoverOrigin } from '@mui/material';
+
 import { Keys } from '../../my-constants';
 import { automation } from '../../utils';
+
 import { CopyContainer, Description, IconButton, KebabMenuIcon, MenuItemIcon, StyledMenuItem, Wrapper } from './styles';
 import { type IMenuOption, type KebabMenuProps } from './types';
 

src/components/KebabMenu/styles.ts

@@ -1,6 +1,5 @@
-import { styled, css } from '@mui/material';
+import { styled, css, MenuItem, IconButton as UnstyledIconButton } from '@mui/material';
 import Color from 'color';
-import { MenuItem, IconButton as UnstyledIconButton } from '@mui/material';
 
 import { Icon } from '../Icon';
 

src/components/LinkButton/index.tsx

@@ -1,11 +1,14 @@
 import type React from 'react';
+
 import { styled, Button, useTheme } from '@mui/material';
 import { type ButtonProps as MuiButtonProps } from '@mui/material';
-import { Typography } from '../Typography';
-import { useLinkButtonFontStyle, getLinkButtonStyle } from './utils';
+
 import { type Colors } from '../../mui-theme';
 import { Flex } from '../Flex';
 import { Icon, type IconProps } from '../Icon';
+import { Typography } from '../Typography';
+
+import { useLinkButtonFontStyle, getLinkButtonStyle } from './utils';
 
 export type LinkButtonProps = {
   type: 'mint' | 'white' | 'grey' | 'red';

src/components/LinkButton/utils.ts

@@ -1,4 +1,5 @@
 import { useTheme } from '@mui/material';
+
 import { type Colors, type TypographyFontClass, type TypographyFontSize } from '../../mui-theme';
 
 const getLinkButtonStyle = (