Merge pull request #26 from provectus/enhancement/24-add-eslint

enhancement/24-add-eslint

kafka-ui-react-app/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+end_of_line = lf
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

kafka-ui-react-app/.eslintrc.json

@@ -0,0 +1,59 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint", "prettier"],
+  "extends": [
+    "plugin:react/recommended",
+    "airbnb",
+    "plugin:prettier/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "rules": {
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ],
+    "prettier/prettier": "error",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "react/jsx-filename-extension": [
+      1,
+      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
+    ]
+  },
+  "overrides": [
+    {
+      "files": ["**/*.tsx"],
+      "rules": {
+        "react/prop-types": "off"
+      }
+    }
+  ],
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  }
+}

kafka-ui-react-app/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

kafka-ui-react-app/package.json

@@ -35,13 +35,25 @@
     "typesafe-actions": "^5.1.0",
     "typescript": "~3.7.4"
   },
+  "lint-staged": {
+    "*.{js,ts,jsx,tsx}": [
+      "eslint -c .eslintrc.json --fix"
+    ]
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "lint": "esprint check",
+    "lint:fix": "esprint check --fix",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "mock": "node ./mock/index.js"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn tsc --noEmit && lint-staged"
+    }
+  },
   "eslintConfig": {
     "extends": "react-app"
   },
@@ -56,5 +68,21 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^2.27.0",
+    "@typescript-eslint/parser": "^2.27.0",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.1.0",
+    "eslint-config-prettier": "^6.10.1",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^2.5.1",
+    "esprint": "^0.6.0",
+    "husky": "^4.2.5",
+    "lint-staged": ">=10",
+    "prettier": "^2.0.4"
   }
 }

kafka-ui-react-app/src/components/Topics/New/CustomParams/CustomParamValue.tsx

@@ -16,24 +16,26 @@ const CustomParamValue: React.FC<Props> = ({
   name,
   defaultValue,
 }) => {
-
   const { register, unregister, errors, watch, setValue } = useFormContext();
-  const selectInputName: string = `${index}[name]`;
-  const valInputName: string    = `${index}[value]`;
+  const selectInputName = `${index}[name]`;
+  const valInputName = `${index}[value]`;
   const selectedParamName = watch(selectInputName, name);
 
-  React.useEffect(
-    () => {
-      if (selectedParamName) {
-        setValue(valInputName, CUSTOM_PARAMS_OPTIONS[selectedParamName].defaultValue, true);
-      }
-    },
-    [selectedParamName],
-  );
+  React.useEffect(() => {
+    if (selectedParamName) {
+      setValue(
+        valInputName,
+        CUSTOM_PARAMS_OPTIONS[selectedParamName].defaultValue,
+        true
+      );
+    }
+  }, [selectedParamName]);
 
-  React.useEffect(
-    () => { if (isFirstParam(index)) { unregister(valInputName) } },
-  );
+  React.useEffect(() => {
+    if (isFirstParam(index)) {
+      unregister(valInputName);
+    }
+  });
 
   return (
     <>
@@ -50,7 +52,7 @@ const CustomParamValue: React.FC<Props> = ({
         disabled={isDisabled}
       />
       <p className="help is-danger">
-        <ErrorMessage errors={errors} name={valInputName}/>
+        <ErrorMessage errors={errors} name={valInputName} />
       </p>
     </>
   );