Create Feature less module in UI code and import alias (#768)

* Add craco devDependencies

Signed-off-by: Boli Guan <ifendoe@gmail.com>

* Add classnames, @ant-design/icons,eslint-plugin.. dependencies.

Signed-off-by: Boli Guan <ifendoe@gmail.com>

* Update .editorconfig and .eslintrc

* Update .editorconfig

Signed-off-by: Boli Guan <ifendoe@gmail.com>

Signed-off-by: Boli Guan <ifendoe@gmail.com>

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;
+ },
+ },
+ },
+ ],
+};