React best practice implementations in ui code

ui/.env.development

@@ -1,3 +1,3 @@
 REACT_APP_AZURE_TENANT_ID=common
-REACT_APP_API_ENDPOINT=http://127.0.0.1:8000
+REACT_APP_API_ENDPOINT=https://feathr-sql-registry.azurewebsites.net
 REACT_APP_ENABLE_RBAC=false

ui/.eslintignore

@@ -1,2 +1,4 @@
 node_modules
-build
+build
+dist
+public

ui/.eslintrc

@@ -1,10 +1,25 @@
 {
+  "root": true,
   "env": {
+    "browser": true,
     "commonjs": true,
     "es6": true,
     "node": true
   },
-  "plugins": ["react", "@typescript-eslint/eslint-plugin", "prettier"],
+  "plugins": ["react", "@typescript-eslint", "prettier"],
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "eslint:recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:import/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:json/recommended",
+    "plugin:prettier/recommended",
+    "plugin:jest/recommended"
+  ],
   "settings": {
     "import/resolver": {
       "node": {
@@ -13,38 +28,82 @@
       "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",
-    "plugin:prettier/recommended",
-    "plugin:json/recommended"
-  ],
-  "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "ecmaVersion": 2018,
-    "sourceType": "module"
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module" 
   },
   "rules": {
-    "dot-notation": "error",
     "import/extensions": [
       "error",
       "ignorePackages",
       {
         "ts": "never",
         "tsx": "never",
+        "json": "always",
         "js": "never",
         "jsx": "never"
       }
     ],
-    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
     "import/prefer-default-export": "off",
+    "import/named": "off",
     "import/no-unresolved": "error",
     "import/no-dynamic-require": "off",
-    "import/no-mutable-exports": "warn"
+    "import/no-mutable-exports": "warn",
+    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
+    "import/order": [
+      "error",
+      {
+        "groups": ["builtin", "external", "internal", "parent", "sibling", "index", "object"],
+        "pathGroups": [
+          {
+            "pattern": "react",
+            "group": "builtin",
+            "position": "before"
+          },
+          {
+            "pattern": "{.,..}/**/*.less",
+            "group": "object",
+            "position": "after"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["react"],
+        "newlines-between": "always",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ],
+
+    "react/jsx-sort-props": [
+      "error",
+      {
+        "callbacksLast": true,
+        "shorthandFirst": true,
+        "shorthandLast": false,
+        "multiline": "first",
+        "ignoreCase": false,
+        "noSortAlphabetically": true,
+        "reservedFirst": ["key", "ref"],
+        "locale": "auto"
+      }
+    ],
+    "react-hooks/exhaustive-deps": "off",
+
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/no-static-element-interactions": "off",
+
+    "@typescript-eslint/no-unused-vars": ["warn", { "args": "none" }],
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+
+    "dot-notation": "error",
+    "quotes": ["error", "single"]
   },
   "overrides": [
     {

ui/.prettierignore

@@ -1,5 +1,3 @@
-# Ignore artifacts:
-build
 node_modules
-public
-package*.json
+build
+dist

ui/.prettierrc

@@ -1 +1,19 @@
-{}
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always",
+  "rangeStart": 0,
+  "requirePragma": false,
+  "insertPragma": false,
+  "proseWrap": "preserve",
+  "htmlWhitespaceSensitivity": "css",
+  "endOfLine": "lf"
+}

ui/.stylelintrc

@@ -0,0 +1,27 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-css-modules",
+    "stylelint-config-recess-order",
+    "stylelint-config-rational-order",
+    "stylelint-config-prettier"
+  ],
+  "plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"],
+  "rules": {
+    "plugin/declaration-block-no-ignored-properties": true,
+    "declaration-block-trailing-semicolon": "always",
+    "comment-empty-line-before": null,
+    "declaration-empty-line-before": null,
+    "function-name-case": "lower",
+    "no-descending-specificity": null,
+    "no-invalid-double-slash-comments": null,
+    "rule-empty-line-before": ["always", { "except": ["inside-block"] }],
+    "no-extra-semicolons": true,
+    "selector-pseudo-class-no-unknown": [true, { "ignorePseudoClasses": ["global"] }],
+    "indentation": [2],
+    "no-duplicate-selectors": null,
+    "selector-class-pattern": null
+  },
+  "ignoreFiles": ["node_modules/**/*", "build/**/*", "dist/**/*"],
+  "customSyntax": "postcss-less"
+}

ui/README.md

@@ -53,10 +53,10 @@ Following tools are used to lint and format code:
 
 #### Linting
 
-If ESLint plugin is installed, vscode will pickup configuration from [.eslintrc](.eslintrc) and automatically lint the code on save. To lint code for entire code base, simply run:
+If ESLint plugin is installed, vscode will pick up configuration from [.eslintrc](.eslintrc) and automatically lint the code on save. To lint code for entire code base, simply run:
 
 ```
-npm run lint:fix
+npm run lint-eslint
 ```
 
 This command will automatically fix all problems that can be fixed, and list the rest problems requires manual fix.

ui/craco.config.js

@@ -1,55 +1,52 @@
-const path = require("path");
+const path = require('path')
 
-const { loaderByName } = require("@craco/craco");
-const CracoLessPlugin = require("craco-less");
+const { loaderByName } = require('@craco/craco')
+const CracoLessPlugin = require('craco-less')
+const webpack = require('webpack')
 
-const webpack = require("webpack");
+const packageJson = require('./package.json')
 
-const packageJson = require("./package.json");
+const resolve = (dir) => path.resolve(__dirname, dir)
 
-const resolve = (dir) => path.resolve(__dirname, dir);
-
-const currentTime = new Date();
+const currentTime = new Date()
 
 module.exports = {
   babel: {
     plugins: [
       [
-        "import",
+        'import',
         {
-          libraryName: "antd",
-          libraryDirectory: "es",
-          style: true,
-        },
-      ],
-    ],
+          libraryName: 'antd',
+          libraryDirectory: 'es',
+          style: true
+        }
+      ]
+    ]
   },
   webpack: {
     alias: {
-      "@": resolve("src"),
+      '@': resolve('src')
     },
     configure: (webpackConfig, { env, paths }) => {
-      const index = webpackConfig.plugins.findIndex(
-        (itme) => itme instanceof webpack.DefinePlugin
-      );
+      const index = webpackConfig.plugins.findIndex((itme) => itme instanceof webpack.DefinePlugin)
 
       if (index > -1) {
-        const definePlugin = webpackConfig.plugins[index];
+        const definePlugin = webpackConfig.plugins[index]
         webpackConfig.plugins.splice(
           index,
           1,
           new webpack.DefinePlugin({
-            "process.env": {
-              ...definePlugin.definitions["process.env"],
+            'process.env': {
+              ...definePlugin.definitions['process.env'],
               FEATHR_VERSION: JSON.stringify(packageJson.version),
-              FEATHR_GENERATED_TIME: JSON.stringify(currentTime.toISOString()),
-            },
+              FEATHR_GENERATED_TIME: JSON.stringify(currentTime.toISOString())
+            }
           })
-        );
+        )
       }
 
-      return webpackConfig;
-    },
+      return webpackConfig
+    }
   },
   plugins: [
     {
@@ -58,22 +55,22 @@ module.exports = {
         lessLoaderOptions: {
           lessOptions: {
             modifyVars: {},
-            javascriptEnabled: true,
-          },
+            javascriptEnabled: true
+          }
         },
         modifyLessModuleRule(lessModuleRule, context) {
           // Configure the file suffix
-          lessModuleRule.test = /\.module\.less$/;
+          lessModuleRule.test = /\.module\.less$/
 
           // Configure the generated local ident name.
-          const cssLoader = lessModuleRule.use.find(loaderByName("css-loader"));
+          const cssLoader = lessModuleRule.use.find(loaderByName('css-loader'))
           cssLoader.options.modules = {
-            localIdentName: "[local]_[hash:base64:5]",
-          };
+            localIdentName: '[local]_[hash:base64:5]'
+          }
 
-          return lessModuleRule;
-        },
-      },
-    },
-  ],
-};
+          return lessModuleRule
+        }
+      }
+    }
+  ]
+}