Added ESLint's plugin:react/recommended, enabled no-unused-vars rule and fixed lint errors.

Author: MadOPcode

.eslintrc

@@ -1,4 +1,12 @@
 {
-  "extends": ["react-important-stuff", "plugin:prettier/recommended"],
-  "parser": "babel-eslint"
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "react-important-stuff",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "babel-eslint",
+  "rules": {
+    "no-unused-vars": "warn"
+  }
 }

package-lock.json

@@ -79,6 +79,7 @@
     "eslint-config-prettier": "^6.7.0",
     "eslint-config-react-important-stuff": "^2.0.0",
     "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-react": "^7.23.2",
     "file-loader": "^6.2.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^25.2.7",

package.json

@@ -58,6 +58,7 @@ Button.propTypes = {
   children: PT.node,
   className: PT.string,
   color: PT.oneOf(["primary"]),
+  isSelected: PT.bool,
   name: PT.string,
   onClick: PT.func,
   size: PT.oneOf(["medium"]),

src/components/Button/index.jsx

@@ -48,7 +48,9 @@ const Checkbox = ({
 
 Checkbox.propTypes = {
   checked: PT.bool,
+  className: PT.string,
   name: PT.string.isRequired,
+  size: PT.oneOf(["medium", "small"]),
   onChange: PT.func.isRequired,
   option: PT.shape({
     value: PT.string.isRequired,

src/components/Checkbox/index.jsx

@@ -1,4 +1,5 @@
 import React, { memo } from "react";
+import PT from "prop-types";
 import cn from "classnames";
 import styles from "./styles.module.scss";
 
@@ -15,4 +16,8 @@ const IconWrapper = (props) => (
   <span {...props} className={cn(styles.iconWrapper, props.className)} />
 );
 
+IconWrapper.propTypes = {
+  className: PT.string,
+};
+
 export default memo(IconWrapper);

src/components/IconWrapper/index.jsx

@@ -9,7 +9,7 @@ import styles from "./styles.module.scss";
  *
  * @param {Object} props component props
  * @param {string} [props.className] class name added to root element
- * @param {() => void} props.onClick click handler
+ * @param {() => void} [props.onClick] click handler
  * @param {boolean} props.isActive whether the icon is in active state
  * @param {'up'|'down'} [props.direction] arrow direction
  * @returns {JSX.Element}
@@ -27,6 +27,9 @@ const ArrowSmall = ({ className, onClick, isActive, direction = "down" }) => (
 
 ArrowSmall.propTypes = {
   className: PT.string,
+  isActive: PT.bool.isRequired,
+  direction: PT.oneOf(["down", "up"]),
+  onClick: PT.func,
 };
 
 export default ArrowSmall;

src/components/Icons/ArrowSmall/index.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React from "react";
 import PT from "prop-types";
 import cn from "classnames";
 import styles from "./styles.module.scss";
@@ -39,6 +39,8 @@ const IntegerField = ({
 IntegerField.propTypes = {
   className: PT.string,
   name: PT.string.isRequired,
+  maxValue: PT.number,
+  minValue: PT.string,
   onChange: PT.func.isRequired,
   value: PT.number.isRequired,
 };

src/components/IntegerField/index.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React from "react";
 import PT from "prop-types";
 import cn from "classnames";
 import { Link, useMatch } from "@reach/router";
@@ -30,10 +30,10 @@ const NavLink = ({ className, exact = false, icon: Icon, label, path }) => {
   );
 };
 
-NavLink.ptopTypes = {
+NavLink.propTypes = {
   className: PT.string,
   exact: PT.bool,
-  icon: PT.node.isRequired,
+  icon: PT.func.isRequired,
   label: PT.string.isRequired,
   path: PT.string.isRequired,
 };

src/components/NavLink/index.jsx

@@ -17,7 +17,7 @@ const PageTitle = ({ className, text: title }) => (
 
 PageTitle.propTypes = {
   className: PT.string,
-  title: PT.string.isRequired,
+  text: PT.string.isRequired,
 };
 
 export default PageTitle;

src/components/PageTitle/index.jsx

@@ -107,9 +107,13 @@ const Pagination = ({
 
 Pagination.propTypes = {
   className: PT.string,
+  pageSizeClassName: PT.string,
+  id: PT.string.isRequired,
+  label: PT.string,
+  pageSizeLabel: PT.string,
   onPageNumberClick: PT.func.isRequired,
   onPageSizeChange: PT.func.isRequired,
-  options: PT.arrayOf(
+  pageSizeOptions: PT.arrayOf(
     PT.shape({
       value: PT.oneOfType([PT.number, PT.string]).isRequired,
       label: PT.string.isRequired,

src/components/Pagination/index.jsx

@@ -50,6 +50,8 @@ const SearchField = ({
 
 SearchField.propTypes = {
   className: PT.string,
+  id: PT.string.isRequired,
+  size: PT.oneOf(["medium", "small"]),
   name: PT.string.isRequired,
   onChange: PT.func.isRequired,
   placeholder: PT.string,

src/components/SearchField/index.jsx

@@ -92,6 +92,7 @@ SelectField.propTypes = {
   className: PT.string,
   id: PT.string.isRequired,
   label: PT.string,
+  size: PT.oneOf(["medium", "small"]),
   onChange: PT.func.isRequired,
   options: PT.arrayOf(
     PT.shape({

src/components/SelectField/index.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React from "react";
 import PT from "prop-types";
 import cn from "classnames";
 import NavMenu from "components/NavMenu";

src/components/Sidebar/index.jsx

@@ -48,6 +48,7 @@ const SortingControl = ({ className, onChange, sortBy, value }) => {
 SortingControl.propTypes = {
   className: PT.string,
   onChange: PT.func.isRequired,
+  sortBy: PT.string.isRequired,
   value: PT.oneOf([SORT_ORDER.ASC, SORT_ORDER.DESC, null, undefined])
     .isRequired,
 };

src/components/SortingControl/index.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useRef, useState } from "react";
+import React, { forwardRef, useCallback, useRef } from "react";
 import PT from "prop-types";
 import cn from "classnames";
 import DatePicker from "react-datepicker";
@@ -42,7 +42,7 @@ const WeekPicker = ({
   }, []);
 
   // @ts-ignore
-  const CustomInput = forwardRef(({ value, onClick }, ref) => (
+  const CustomInput = forwardRef(({ onClick }, ref) => (
     <div
       ref={ref}
       className={styles.customInput}
@@ -89,6 +89,11 @@ const WeekPicker = ({
       </Button>
     </div>
   ));
+  CustomInput.displayName = "CustomInput";
+  CustomInput.propTypes = {
+    // @ts-ignore
+    onClick: PT.func,
+  };
 
   return (
     <div className={cn(styles.container, className)}>

src/components/TextField/index.jsx

@@ -72,7 +72,7 @@ export const PAYMENT_STATUS_MAP = {
 export const API_PAYMENT_STATUS_MAP = (function () {
   const obj = {};
   for (let key in PAYMENT_STATUS_MAP) {
-    if (PAYMENT_STATUS_MAP.hasOwnProperty(key)) {
+    if (Object.prototype.hasOwnProperty.call(PAYMENT_STATUS_MAP, key)) {
       obj[PAYMENT_STATUS_MAP[key]] = key;
     }
   }