From 1bb2a2d5e4bbf2fac987cc7f9952b1ce6eac1db2 Mon Sep 17 00:00:00 2001
From: hatim dinia <diniahatim@gmail.com>
Date: Thu, 31 Oct 2024 15:12:17 +0100
Subject: [PATCH] feat(ui-imports): add eslint imports config and sort script

---
 webapp/.eslintrc.cjs     | 39 ++++++++++++++++++++++++++++++---------
 webapp/.gitignore        |  1 +
 webapp/package-lock.json | 10 ++++++++++
 webapp/package.json      |  1 +
 4 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/webapp/.eslintrc.cjs b/webapp/.eslintrc.cjs
index 29270da704..41f556763a 100644
--- a/webapp/.eslintrc.cjs
+++ b/webapp/.eslintrc.cjs
@@ -14,15 +14,8 @@ module.exports = {
     "plugin:jsdoc/recommended-typescript",
     "plugin:prettier/recommended", // Must be the last one
   ],
-  plugins: [
-    "license-header",
-    "react-refresh",
-  ],
-  ignorePatterns: [
-    "dist", 
-    "license-header.js", 
-    ".eslintrc.cjs",
-  ],
+  plugins: ["license-header", "react-refresh", "simple-import-sort"],
+  ignorePatterns: ["dist", "license-header.js", ".eslintrc.cjs"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     // `ecmaVersion` is automatically sets by `esXXXX` in `env`
@@ -85,5 +78,33 @@ module.exports = {
     "react/prop-types": "off",
     "react/self-closing-comp": "error",
     "require-await": "warn", // TODO: switch to "error" when the quantity of warning will be low
+    "simple-import-sort/imports": [
+      "error",
+      {
+        groups: [
+          // React first, then packages starting with a character
+          ["^react$", "^[a-z]"],
+
+          // Packages starting with `@` (except our internal @/)
+          ["^@(?!/)"],
+
+          // Internal imports from src using @/
+          ["^@/"],
+
+          // Imports starting with `../`
+          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
+
+          // Imports starting with `./`
+          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
+
+          // Style imports
+          ["^.+\\.s?css$"],
+
+          // Side effect imports
+          ["^\\u0000"],
+        ],
+      },
+    ],
+    "simple-import-sort/exports": "error",
   },
 };
diff --git a/webapp/.gitignore b/webapp/.gitignore
index 3b3f257e44..3c81f51708 100644
--- a/webapp/.gitignore
+++ b/webapp/.gitignore
@@ -19,3 +19,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.temp-eslint.json
\ No newline at end of file
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 809c088d3d..53f8ea6660 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -108,6 +108,7 @@
         "eslint-plugin-react": "7.37.0",
         "eslint-plugin-react-hooks": "4.6.2",
         "eslint-plugin-react-refresh": "0.4.12",
+        "eslint-plugin-simple-import-sort": "12.1.1",
         "husky": "9.1.6",
         "jsdom": "25.0.1",
         "prettier": "3.3.3",
@@ -7057,6 +7058,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/eslint-plugin-simple-import-sort": {
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-12.1.1.tgz",
+      "integrity": "sha512-6nuzu4xwQtE3332Uz0to+TxDQYRLTKRESSc2hefVT48Zc8JthmN23Gx9lnYhu0FtkRSL1oxny3kJ2aveVhmOVA==",
+      "dev": true,
+      "peerDependencies": {
+        "eslint": ">=5.0.0"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index 117add1312..ba123ba575 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -114,6 +114,7 @@
     "eslint-plugin-react": "7.37.0",
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-react-refresh": "0.4.12",
+    "eslint-plugin-simple-import-sort": "12.1.1",
     "husky": "9.1.6",
     "jsdom": "25.0.1",
     "prettier": "3.3.3",