Create Feature less module in UI code and import alias

ui/.editorconfig

@@ -0,0 +1,10 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset=utf-8
+end_of_line=lf
+insert_final_newline=false
+indent_style=space
+indent_size=2
+

ui/.eslintrc

@@ -4,23 +4,47 @@
     "es6": true,
     "node": true
   },
-  "plugins": ["@typescript-eslint/eslint-plugin"],
+  "plugins": ["react", "@typescript-eslint/eslint-plugin", "prettier"],
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".tsx", ".ts", ".jsx", ".js", ".json"]
+      },
+      "typescript": {}
+    }
+  },
   "extends": [
     // https://github.com/eslint/eslint/blob/main/conf/eslint-recommended.js
     "eslint:recommended",
     // https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app
     "react-app",
     // https://reactjs.org/docs/hooks-rules.html
     "plugin:react-hooks/recommended",
-    "prettier"
+    "plugin:prettier/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": 2018,
     "sourceType": "module"
   },
   "rules": {
-    "dot-notation": "error"
+    "dot-notation": "error",
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "ts": "never",
+        "tsx": "never",
+        "json": "never",
+        "js": "never",
+        "jsx": "never"
+      }
+    ],
+    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
+    "import/prefer-default-export": "off",
+    "import/no-unresolved": "error",
+    "import/no-dynamic-require": "off",
+    "import/no-mutable-exports": "warn"
   },
   "overrides": [
     {

ui/.vscode/settings.json

@@ -11,5 +11,8 @@
   ],
   "[css]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

ui/craco.config.js

@@ -0,0 +1,51 @@
+const path = require("path");
+
+const { loaderByName } = require("@craco/craco");
+const CracoLessPlugin = require("craco-less");
+
+const resolve = (dir) => path.resolve(__dirname, dir);
+
+module.exports = {
+  babel: {
+    plugins: [
+      [
+        "import",
+        {
+          libraryName: "antd",
+          libraryDirectory: "es",
+          style: true,
+        },
+      ],
+    ],
+  },
+  webpack: {
+    alias: {
+      "@": resolve("src"),
+    },
+  },
+  plugins: [
+    {
+      plugin: CracoLessPlugin,
+      options: {
+        lessLoaderOptions: {
+          lessOptions: {
+            modifyVars: {},
+            javascriptEnabled: true,
+          },
+        },
+        modifyLessModuleRule(lessModuleRule, context) {
+          // Configure the file suffix
+          lessModuleRule.test = /\.module\.less$/;
+
+          // Configure the generated local ident name.
+          const cssLoader = lessModuleRule.use.find(loaderByName("css-loader"));
+          cssLoader.options.modules = {
+            localIdentName: "[local]_[hash:base64:5]",
+          };
+
+          return lessModuleRule;
+        },
+      },
+    },
+  ],
+};