fix: improve import/export order across modules via eslint-plugin-simple-import-sort

Author: RohitRaj011

.eslintrc.cjs

@@ -14,9 +14,11 @@
  * limitations under the License.
  */
 
+const tsconfigPath = require('./tsconfig.json')
+
 module.exports = {
     parser: '@typescript-eslint/parser',
-    plugins: ['@typescript-eslint', 'react', 'prettier', 'import'],
+    plugins: ['@typescript-eslint', 'react', 'prettier', 'import', 'simple-import-sort'],
     env: {
         browser: true,
         es2021: true,
@@ -109,6 +111,26 @@ module.exports = {
         'import/prefer-default-export': 'off',
         'no-restricted-exports': 'off',
         'import/named': 'off',
+        'simple-import-sort/imports': [
+                    'error',
+                    {
+                        groups: [
+                            // Packages `react` related packages and external packages.
+                            ['^react', '^@?\\w'],
+                            // Devtron packages
+                            ['^@devtron-labs'],
+                            // Internal packages.
+                            [...Object.keys(tsconfigPath.compilerOptions.paths).map((alias) => alias.replace('/*', ''))],
+                            // Side effect imports.
+                            ['^\\u0000'],
+                            // Put same-folder imports, `..` and `.` last. Other relative imports.
+                            ['^\\.\\.(?!/?$)', '^\\.\\./?$', '^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$',],
+                            // Style imports.
+                            [ '^.+\\.?(css|scss)$'],
+                        ],
+                    },
+                ],
+        'simple-import-sort/exports': 'error',
     },
     overrides: [
         {

package-lock.json

@@ -60,6 +60,7 @@
         "eslint-plugin-prettier": "^5.1.2",
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-simple-import-sort": "^12.1.1",
         "glob": "^10.3.3",
         "husky": "^7.0.4",
         "json-schema": "^0.4.0",
@@ -108,10 +109,10 @@
         "@replit/codemirror-indentation-markers": "6.5.3",
         "@replit/codemirror-vscode-keymap": "6.0.2",
         "@types/react-dates": "^21.8.6",
-        "@xyflow/react": "12.4.2",
         "@uiw/codemirror-extensions-hyper-link": "4.23.10",
         "@uiw/codemirror-theme-github": "4.23.7",
         "@uiw/react-codemirror": "4.23.7",
+        "@xyflow/react": "12.4.2",
         "ansi_up": "^5.2.1",
         "codemirror-json-schema": "0.8.0",
         "dayjs": "^1.11.13",

package.json

@@ -1,4 +1,5 @@
 import { INVALID_LICENSE_KEY, ResponseHeaders } from '@Shared/index'
+
 import { API_STATUS_CODES, APIOptions, FALLBACK_REQUEST_TIMEOUT, Host, noop, ResponseType, ServerErrors } from '..'
 import { CoreAPIConstructorParamsType, FetchAPIParamsType, FetchInTimeParamsType } from './types'
 import { handleServerError } from './utils'

src/Common/API/CoreAPI.ts

@@ -8,5 +8,5 @@ const dashboardAPI = new CoreAPI({
 })
 
 export const { post, put, patch, get, trash } = dashboardAPI
-export { getIsRequestAborted, abortPreviousRequests, handleRedirectToLicenseActivation } from './utils'
 export { default as CoreAPI } from './CoreAPI'
+export { abortPreviousRequests, getIsRequestAborted, handleRedirectToLicenseActivation } from './utils'

src/Common/API/index.ts

@@ -1,6 +1,8 @@
-import { ServerErrors } from '@Common/ServerError'
 import { MutableRefObject } from 'react'
+
 import { URLS } from '@Common/Constants'
+import { ServerErrors } from '@Common/ServerError'
+
 import { RESPONSE_MESSAGES } from './constants'
 
 export const handleServerError = async (contentType: string, response: Response) => {

src/Common/API/utils.ts

@@ -15,7 +15,7 @@
  */
 
 import { AddCDPositions, AddPipelineType, PipelineType, WorkflowNodeType } from '../Types'
-import { HandleAddCD, GetPipelineType } from './types'
+import { GetPipelineType, HandleAddCD } from './types'
 
 const getPipelineType = ({ startNode }: GetPipelineType) => {
     if (startNode.type === WorkflowNodeType.WEBHOOK) {

src/Common/AddCDButton/utils.tsx

@@ -14,12 +14,14 @@
  * limitations under the License.
  */
 
-import { useState, useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
+
 import Tooltip from '@Common/Tooltip/Tooltip'
+
+import { ReactComponent as Check } from '../../Assets/Icon/ic-check.svg'
+import { ReactComponent as ICCopy } from '../../Assets/Icon/ic-copy.svg'
 import { copyToClipboard, noop, stopPropagation } from '../Helper'
 import ClipboardProps from './types'
-import { ReactComponent as ICCopy } from '../../Assets/Icon/ic-copy.svg'
-import { ReactComponent as Check } from '../../Assets/Icon/ic-check.svg'
 
 /**
  * @param content - Content to be copied

src/Common/ClipboardButton/ClipboardButton.tsx

@@ -15,7 +15,9 @@
  */
 
 import YAML from 'yaml'
+
 import { noop, YAMLStringify } from '@Common/Helper'
+
 import { MODES } from '../Constants'
 import { Action, CodeEditorInitialValueType, CodeEditorState } from './types'
 import { getCodeEditorThemeFromAppTheme } from './utils'

src/Common/CodeEditor/CodeEditor.reducer.ts

@@ -15,6 +15,7 @@
  */
 
 import { AppThemeType } from '@Shared/Providers'
+
 import { MODES } from '../Constants'
 
 export interface InformationBarProps {