Merge pull request #688 from devtron-labs/fix/sort-imports

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

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.10.18",
+    "version": "1.10.19",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -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",

package.json

@@ -1,5 +1,10 @@
-import { INVALID_LICENSE_KEY, ResponseHeaders } from '@Shared/index'
-import { API_STATUS_CODES, APIOptions, FALLBACK_REQUEST_TIMEOUT, Host, noop, ResponseType, ServerErrors } from '..'
+import { API_STATUS_CODES, FALLBACK_REQUEST_TIMEOUT, Host } from '@Common/Constants'
+import { noop } from '@Common/Helper'
+import { ServerErrors } from '@Common/ServerError'
+import { APIOptions, ResponseType } from '@Common/Types'
+import { INVALID_LICENSE_KEY } from '@Shared/constants'
+import { ResponseHeaders } from '@Shared/types'
+
 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 {