fix: add react-hooks eslint and fix missing deps/issues (#330)

bigcommerce · Jan 21, 2020 · da3fbd6 · da3fbd6
1 parent b680e73
commit da3fbd6
Show file tree

Hide file tree

Showing 29 changed files with 491 additions and 103 deletions.
diff --git a/packages/big-design-icons/.eslintrc.js b/packages/big-design-icons/.eslintrc.js
@@ -0,0 +1 @@
+module.exports = require('@bigcommerce/configs/eslint');
diff --git a/packages/big-design-icons/package.json b/packages/big-design-icons/package.json
@@ -21,7 +21,8 @@
     "build:icons": "node scripts/build.js",
     "download": "node scripts/downloader.js",
     "ci": "yarn run lint && yarn run build",
-    "lint": "yarn run lint:tslint && yarn run lint:tsc && yarn run lint:prettier",
+    "lint": "yarn run lint:eslint && yarn run lint:tslint && yarn run lint:tsc && yarn run lint:prettier",
+    "lint:eslint": "eslint src/**/* --ext '.ts,.tsx'",
     "lint:prettier": "prettier --check 'src/**/*.{ts,tsx}'",
     "lint:tsc": "tsc --noEmit",
     "lint:tslint": "tslint -c tslint.json -p tsconfig.json",
@@ -30,6 +31,7 @@
   },
   "lint-staged": {
     "*.{js,ts,tsx}": [
+      "eslint --fix",
       "tslint --fix",
       "prettier --write",
       "git add"
@@ -68,8 +70,11 @@
     "@svgr/plugin-prettier": "^5.0.1",
     "@svgr/plugin-svgo": "^5.0.1",
     "@types/styled-components": "^4.1.12",
+    "@typescript-eslint/parser": "^2.16.0",
     "babel-plugin-styled-components": "^1.10.6",
     "camelcase": "^5.3.1",
+    "eslint": "^6.8.0",
+    "eslint-plugin-react-hooks": "^2.3.0",
     "fs-extra": "^8.1.0",
     "glob": "^7.1.4",
     "glob-promise": "^3.4.0",

diff --git a/packages/big-design-theme/.eslintrc.js b/packages/big-design-theme/.eslintrc.js
@@ -0,0 +1 @@
+module.exports = require('@bigcommerce/configs/eslint');
diff --git a/packages/big-design-theme/package.json b/packages/big-design-theme/package.json
@@ -19,7 +19,8 @@
     "build:es": "NODE_ENV=production BABEL_ENV=es babel --extensions \".ts,.tsx\" ./src --out-dir ./dist/es",
     "build:dt": "tsc --emitDeclarationOnly",
     "ci": "yarn run lint && yarn run test --maxWorkers=2 && yarn run build",
-    "lint": "yarn run lint:tslint && yarn run lint:tsc && yarn run lint:prettier",
+    "lint": "yarn run lint:eslint && yarn run lint:tslint && yarn run lint:tsc && yarn run lint:prettier",
+    "lint:eslint": "eslint src/**/* --ext '.ts,.tsx'",
     "lint:prettier": "prettier --check 'src/**/*.{ts,tsx}'",
     "lint:tsc": "tsc --noEmit",
     "lint:tslint": "tslint -c tslint.json -p tsconfig.json",
@@ -33,6 +34,7 @@
   ],
   "lint-staged": {
     "*.{js,ts,tsx}": [
+      "eslint --fix",
       "tslint --fix",
       "prettier --write",
       "git add"
@@ -63,8 +65,11 @@
     "@bigcommerce/configs": "^0.9.0",
     "@types/jest": "^24.0.16",
     "@types/styled-components": "^4.1.12",
+    "@typescript-eslint/parser": "^2.16.0",
     "babel-jest": "^24.5.0",
     "concurrently": "^5.0.0",
+    "eslint": "^6.8.0",
+    "eslint-plugin-react-hooks": "^2.3.0",
     "jest": "^24.5.0",
     "jest-styled-components": "^6.3.1",
     "lint-staged": "^9.2.0",

diff --git a/packages/big-design/.eslintrc.js b/packages/big-design/.eslintrc.js
@@ -0,0 +1 @@
+module.exports = require('@bigcommerce/configs/eslint');
diff --git a/packages/big-design/package.json b/packages/big-design/package.json
@@ -22,7 +22,8 @@
     "build:es": "NODE_ENV=production BABEL_ENV=es babel --extensions \".ts,.tsx\" ./src --out-dir ./dist/es",
     "build:dt": "tsc --emitDeclarationOnly",
     "ci": "yarn run lint && yarn run test --maxWorkers=2 && yarn run build",
-    "lint": "yarn run lint:tslint && yarn run lint:tsc && yarn run lint:prettier",
+    "lint": "yarn run lint:eslint && yarn run lint:tslint && yarn run lint:tsc && yarn run lint:prettier",
+    "lint:eslint": "eslint src/**/* --ext '.ts,.tsx'",
     "lint:prettier": "prettier --check 'src/**/*.{ts,tsx}'",
     "lint:tsc": "tsc --noEmit",
     "lint:tslint": "tslint -c tslint.json -p tsconfig.json",
@@ -34,6 +35,7 @@
   },
   "lint-staged": {
     "*.{js,ts,tsx}": [
+      "eslint --fix",
       "tslint --fix",
       "prettier --write",
       "git add"
@@ -77,9 +79,12 @@
     "@types/react-dom": "^16.8.5",
     "@types/react-test-renderer": "^16.8.3",
     "@types/styled-components": "^4.1.12",
+    "@typescript-eslint/parser": "^2.16.0",
     "babel-jest": "^24.5.0",
     "babel-plugin-styled-components": "^1.10.6",
     "concurrently": "^5.0.0",
+    "eslint": "^6.8.0",
+    "eslint-plugin-react-hooks": "^2.3.0",
     "jest": "^24.5.0",
     "jest-styled-components": "^6.3.1",
     "lint-staged": "^9.2.0",

diff --git a/packages/big-design/src/components/Checkbox/Checkbox.tsx b/packages/big-design/src/components/Checkbox/Checkbox.tsx
@@ -30,7 +30,8 @@ const RawCheckbox: React.FC<CheckboxProps & PrivateProps> = ({
   style,
   ...props
 }) => {
-  const id = props.id ? props.id : useUniqueId('checkbox');
+  const uniqueCheckboxId = useUniqueId('checkbox');
+  const id = props.id ? props.id : uniqueCheckboxId;
   const labelId = useUniqueId('checkbox_label');
 
   const renderedLabel = useMemo(() => {

diff --git a/packages/big-design/src/components/Form/Group/Group.tsx b/packages/big-design/src/components/Form/Group/Group.tsx
@@ -1,7 +1,6 @@
 import { ErrorIcon } from '@bigcommerce/big-design-icons';
-import React from 'react';
+import React, { Fragment } from 'react';
 
-import { useUniqueId } from '../../../hooks';
 import { warning } from '../../../utils';
 import { Checkbox } from '../../Checkbox';
 import { Radio } from '../../Radio';
@@ -52,29 +51,31 @@ export const FormGroup: React.FC<GroupProps> = props => {
   );
 };
 
-function generateErrors(errors: GroupProps['errors'], fromGroup = false): React.ReactNode {
-  const errorKey = useUniqueId('formGroup_error');
-
+const generateErrors = (errors: GroupProps['errors'], fromGroup = false, key?: number): React.ReactNode => {
   if (typeof errors === 'string') {
     return (
-      <StyledError alignItems="center" key={errorKey}>
-        <ErrorIcon color="danger" />
-        <FormControlError>{errors}</FormControlError>
-      </StyledError>
+      <Fragment key={key}>
+        <StyledError alignItems="center">
+          <ErrorIcon color="danger" />
+          <FormControlError>{errors}</FormControlError>
+        </StyledError>
+      </Fragment>
     );
   }
 
   if (React.isValidElement(errors) && errors.type === FormControlError) {
     return (
-      <StyledError alignItems="center" key={errorKey}>
-        <ErrorIcon color="danger" />
-        {errors}
-      </StyledError>
+      <Fragment key={key}>
+        <StyledError alignItems="center">
+          <ErrorIcon color="danger" />
+          {errors}
+        </StyledError>
+      </Fragment>
     );
   }
 
   if (Array.isArray(errors)) {
-    return errors.map(error => error && generateErrors(error, fromGroup));
+    return errors.map((error, index) => error && generateErrors(error, fromGroup, index));
   }
 
   if (!errors) {
@@ -84,4 +85,4 @@ function generateErrors(errors: GroupProps['errors'], fromGroup = false): React.
   if (fromGroup) {
     warning('errors must be either a string, FormControlError, or an array of strings or FormControlError components.');
   }
-}
+};
diff --git a/packages/big-design/src/components/Input/Input.tsx b/packages/big-design/src/components/Input/Input.tsx
@@ -36,7 +36,8 @@ const StyleableInput: React.FC<InputProps & PrivateProps> = ({
   ...props
 }) => {
   const [focus, setFocus] = useState(false);
-  const id = props.id ? props.id : useUniqueId('input');
+  const uniqueInputId = useUniqueId('input');
+  const id = props.id ? props.id : uniqueInputId;
 
   const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
     const { onFocus } = props;
@@ -75,7 +76,7 @@ const StyleableInput: React.FC<InputProps & PrivateProps> = ({
     }
 
     warning('label must be either a string or a FormControlLabel component.');
-  }, [label, labelId, props.required]);
+  }, [id, label, labelId, props.required]);
 
   const renderedDescription = useMemo(() => {
     if (!description) {

diff --git a/packages/big-design/src/components/Modal/Modal.tsx b/packages/big-design/src/components/Modal/Modal.tsx
@@ -44,8 +44,8 @@ export const Modal: React.FC<ModalProps> = typedMemo(
     onClose = () => null,
     variant = 'modal',
   }) => {
+    const initialBodyOverflowYRef = useRef('');
     const [internalTrap, setInternalTrap] = useState<FocusTrap | null>(null);
-    const [initialBodyOverflowY, setInitialBodyOverflowY] = useState('');
     const [modalContainer, setModalContainer] = useState<HTMLDivElement | null>(null);
     const headerUniqueId = useUniqueId('modal_header');
     const modalRef = createRef<HTMLDivElement>();
@@ -71,37 +71,37 @@ export const Modal: React.FC<ModalProps> = typedMemo(
     }, []);
 
     useEffect(() => {
-      return () => {
-        const prevFocus = previousFocus.current as HTMLElement;
+      const prevFocus = previousFocus.current as HTMLElement;
 
+      return () => {
         if (modalContainer) {
           document.body.removeChild(modalContainer);
         }
 
-        document.body.style.overflowY = initialBodyOverflowY;
+        document.body.style.overflowY = initialBodyOverflowYRef.current;
 
         if (prevFocus && typeof prevFocus.focus === 'function') {
           prevFocus.focus();
         }
       };
-    }, [modalContainer, previousFocus]);
+    }, [initialBodyOverflowYRef, modalContainer, previousFocus]);
 
     useEffect(() => {
       if (modalRef.current && !internalTrap) {
         setInternalTrap(focusTrap(modalRef.current as HTMLElement, { initialFocus: modalRef.current }));
       }
 
       if (isOpen) {
-        setInitialBodyOverflowY(document.body.style.overflowY || '');
+        initialBodyOverflowYRef.current = document.body.style.overflowY || '';
         document.body.style.overflowY = 'hidden';
         internalTrap?.activate();
       } else {
-        setInitialBodyOverflowY('');
-        document.body.style.overflowY = initialBodyOverflowY;
+        initialBodyOverflowYRef.current = '';
+        document.body.style.overflowY = initialBodyOverflowYRef.current;
         internalTrap?.deactivate();
         setInternalTrap(null);
       }
-    }, [focusTrap, internalTrap, isOpen, modalRef]);
+    }, [initialBodyOverflowYRef, internalTrap, isOpen, modalRef]);
 
     const renderedClose = useMemo(
       () =>

diff --git a/packages/big-design/src/components/Pagination/Pagination.tsx b/packages/big-design/src/components/Pagination/Pagination.tsx
@@ -1,5 +1,5 @@
 import { ArrowDropDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@bigcommerce/big-design-icons';
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo, useCallback, useEffect, useState } from 'react';
 
 import { MarginProps } from '../../mixins';
 import { Dropdown, DropdownItem } from '../Dropdown';
@@ -21,21 +21,21 @@ export const Pagination: React.FC<PaginationProps> = memo(
     const [maxPages, setMaxPages] = useState(Math.ceil(totalItems / itemsPerPage));
     const [itemRange, setItemRange] = useState({ start: 0, end: 0 });
 
-    const handlePageOutOfBounds = () => {
+    const handlePageOutOfBounds = useCallback(() => {
       if (currentPage < 1 || isNaN(currentPage) || currentPage === undefined) {
         onPageChange(1);
       } else if (currentPage > maxPages) {
         onPageChange(maxPages);
       }
-    };
+    }, [currentPage, maxPages, onPageChange]);
 
-    const handlePerPageOutOfBounds = () => {
+    const handlePerPageOutOfBounds = useCallback(() => {
       if (itemsPerPage < 1 || isNaN(itemsPerPage) || itemsPerPage === undefined) {
         onItemsPerPageChange(itemsPerPageOptions[0]);
       }
-    };
+    }, [itemsPerPage, onItemsPerPageChange, itemsPerPageOptions]);
 
-    const calculateRange = () => {
+    const calculateRange = useCallback(() => {
       let firstItemInRange = itemsPerPage * (currentPage - 1) + 1;
       let lastItemInRange = itemsPerPage * currentPage;
 
@@ -48,7 +48,7 @@ export const Pagination: React.FC<PaginationProps> = memo(
       }
 
       setItemRange({ start: firstItemInRange, end: lastItemInRange });
-    };
+    }, [itemsPerPage, currentPage, totalItems]);
 
     useEffect(() => {
       handlePageOutOfBounds();
@@ -58,7 +58,7 @@ export const Pagination: React.FC<PaginationProps> = memo(
       calculateRange();
 
       setMaxPages(Math.ceil(totalItems / itemsPerPage));
-    }, [currentPage, itemsPerPage, totalItems]);
+    }, [calculateRange, currentPage, handlePageOutOfBounds, handlePerPageOutOfBounds, itemsPerPage, totalItems]);
 
     const handlePageIncrease = () => {
       onPageChange(currentPage + 1);

diff --git a/packages/big-design/src/components/ProgressCircle/ProgressCircle.tsx b/packages/big-design/src/components/ProgressCircle/ProgressCircle.tsx
@@ -71,7 +71,7 @@ export const ProgressCircle: React.FC<ProgressCircleProps> = typedMemo(({ error,
         )}
       </StyledProgressCircle>
     );
-  }, [size, percent]);
+  }, [percent, size, renderedSuccess]);
 
   return error ? renderedError : renderedCircle;
 });
diff --git a/packages/big-design/src/components/Radio/Radio.tsx b/packages/big-design/src/components/Radio/Radio.tsx
@@ -25,7 +25,8 @@ const RawRadio: React.FC<RadioProps & PrivateProps> = ({
   style,
   ...props
 }) => {
-  const id = props.id ? props.id : useUniqueId('radio');
+  const uniqueRadioId = useUniqueId('radio');
+  const id = props.id ? props.id : uniqueRadioId;
   const labelId = useUniqueId('radio_label');
 
   const renderedLabel = useMemo(() => {

diff --git a/packages/big-design/src/components/Select/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Select/__snapshots__/spec.tsx.snap
@@ -67,7 +67,7 @@ exports[`select action supports actionTypes 1`] = `
     class="c2 c3"
   >
     <svg
-      aria-labelledby="bd-icon-3"
+      aria-labelledby="bd-icon-4"
       class="c4"
       color="danger50"
       fill="currentColor"
@@ -217,7 +217,7 @@ exports[`select action supports icons 1`] = `
         class="c4 c5"
       >
         <svg
-          aria-labelledby="bd-icon-3"
+          aria-labelledby="bd-icon-4"
           class="c6"
           color="secondary60"
           fill="currentColor"

diff --git a/packages/big-design/src/components/StatefulTable/StatefulTable.tsx b/packages/big-design/src/components/StatefulTable/StatefulTable.tsx
@@ -37,8 +37,14 @@ const InternalStatefulTable = <T extends TableItem>({
 
   const [state, dispatch] = useReducer(reducer, { columns, defaultSelected, items, pagination }, reducerInit);
 
-  useDidUpdate(() => dispatch({ type: 'COLUMNS_CHANGED', columns }), [columns]);
-  useDidUpdate(() => dispatch({ type: 'ITEMS_CHANGED', items, isPaginationEnabled: pagination }), [items, pagination]);
+  const columnsChangedCallback = useCallback(() => dispatch({ type: 'COLUMNS_CHANGED', columns }), [columns]);
+  const itemsChangedCallback = useCallback(
+    () => dispatch({ type: 'ITEMS_CHANGED', items, isPaginationEnabled: pagination }),
+    [items, pagination],
+  );
+
+  useDidUpdate(columnsChangedCallback);
+  useDidUpdate(itemsChangedCallback);
 
   const onPageChange = useCallback((page: number) => dispatch({ type: 'PAGE_CHANGE', page }), []);
   const onItemsPerPageChange = useCallback(
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		module.exports = require('@bigcommerce/configs/eslint');