Upgraded eslint and eslint-config-airbnb to latest major versions (#5848

) * eslint upgrade & disable rules due to airbnb config * enable no-unsafe-optional-chaining and resolve assoc errors * enable prefer-regex-literals and resolve assoc errors * enable react/jsx-no-constructed-context-values and resolve assoc errors * enable react/no-unstable-nested-components and resolve assoc errors * consistent naming and disable react/function-component-definition * memoize FormContext provider value * rework roots context value * Fixed a RegExp lint error in Calendar utils Co-authored-by: Eric Soderberg <eric.soderberg@hpe.com>
grommet · Dec 18, 2021 · 313fa81 · 313fa81
1 parent 19b996a
commit 313fa81
Show file tree

Hide file tree

Showing 21 changed files with 402 additions and 380 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -32,25 +32,12 @@
     "requestAnimationFrame": true
   },
   "rules": {
+    "default-param-last": 0,
+    "import/prefer-default-export": 0,
     "indent": "off",
     "comma-dangle": ["error", "always-multiline"],
-    "no-console": 0,
-    "react/jsx-filename-extension": 0,
-    "import/prefer-default-export": 0,
-    "react/prop-types": 0,
-    "react/jsx-one-expression-per-line": 0,
-    "react/jsx-wrap-multilines": 0,
-    "no-useless-concat": 0,
-    "react/jsx-indent": 0,
-    "react/jsx-props-no-spreading": 0,
-    "react/state-in-constructor": 0,
-    "react/static-property-placement": 0,
-    "react/jsx-curly-newline": 0,
     "max-len": [2, { "ignoreUrls": true, "ignoreRegExpLiterals": true }],
-    "react-hooks/rules-of-hooks": 2,
-    "react-hooks/exhaustive-deps": 1,
-    "react/sort-comp": 0,
-    "semi": [2, "always"],
+    "no-console": 0,
     "no-restricted-imports": [
       "error",
       {
@@ -62,7 +49,22 @@
           }
         ]
       }
-    ]
+    ],
+    "no-useless-concat": 0,
+    "react/function-component-definition": 0,
+    "react/jsx-curly-newline": 0,
+    "react/jsx-filename-extension": 0,
+    "react/jsx-indent": 0,
+    "react/jsx-one-expression-per-line": 0,
+    "react/jsx-props-no-spreading": 0,
+    "react/jsx-wrap-multilines": 0,
+    "react/prop-types": 0,
+    "react/sort-comp": 0,
+    "react/state-in-constructor": 0,
+    "react/static-property-placement": 0,
+    "react-hooks/exhaustive-deps": 1,
+    "react-hooks/rules-of-hooks": 2,
+    "semi": [2, "always"]
   },
   "overrides": [
     {
@@ -77,7 +79,8 @@
         "import/no-unresolved": 0,
         "import/extensions": 0,
         "import/no-extraneous-dependencies": 0,
-        "react/no-multi-comp": 0
+        "react/no-multi-comp": 0,
+        "react/no-unstable-nested-components": 0
       }
     },
     {

diff --git a/package.json b/package.json
@@ -96,8 +96,8 @@
     "cross-env": "^7.0.3",
     "del": "^6.0.0",
     "elliptic": "^6.5.4",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb": "^18.2.1",
+    "eslint": "^8.4.1",
+    "eslint-config-airbnb": "^19.0.2",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-import": "^2.25.3",

diff --git a/src/js/components/Accordion/Accordion.js b/src/js/components/Accordion/Accordion.js
@@ -1,4 +1,4 @@
-import React, { Children, forwardRef, useState } from 'react';
+import React, { Children, forwardRef, useCallback, useState } from 'react';
 import { AccordionPropTypes } from './propTypes';
 import { Box } from '../Box';
 
@@ -27,23 +27,34 @@ const Accordion = forwardRef(
       setStateActiveIndex(activeIndex);
     }
 
-    const onPanelChange = (index) => {
-      let nextActiveIndexes = [...(activeIndexes || [])];
+    const getAccordionContext = useCallback(
+      (index) => {
+        const onPanelChange = (nextIndex) => {
+          let nextActiveIndexes = [...(activeIndexes || [])];
 
-      const nextActiveIndex = nextActiveIndexes.indexOf(index);
-      if (nextActiveIndex > -1) {
-        nextActiveIndexes.splice(nextActiveIndex, 1);
-      } else if (multiple) {
-        nextActiveIndexes.push(index);
-      } else {
-        nextActiveIndexes = [index];
-      }
+          const nextActiveIndex = nextActiveIndexes.indexOf(nextIndex);
+          if (nextActiveIndex > -1) {
+            nextActiveIndexes.splice(nextActiveIndex, 1);
+          } else if (multiple) {
+            nextActiveIndexes.push(nextIndex);
+          } else {
+            nextActiveIndexes = [nextIndex];
+          }
 
-      setActiveIndexes(nextActiveIndexes);
-      if (onActive) {
-        onActive(nextActiveIndexes);
-      }
-    };
+          setActiveIndexes(nextActiveIndexes);
+          if (onActive) {
+            onActive(nextActiveIndexes);
+          }
+        };
+
+        return {
+          active: activeIndexes.indexOf(index) > -1,
+          animate,
+          onPanelChange: () => onPanelChange(index),
+        };
+      },
+      [activeIndexes, animate, multiple, onActive],
+    );
 
     return (
       <Box ref={ref} role="tablist" {...rest}>
@@ -53,11 +64,7 @@ const Accordion = forwardRef(
             <AccordionContext.Provider
               // eslint-disable-next-line react/no-array-index-key
               key={index}
-              value={{
-                active: activeIndexes.indexOf(index) > -1,
-                animate,
-                onPanelChange: () => onPanelChange(index),
-              }}
+              value={getAccordionContext(index)}
             >
               {child}
             </AccordionContext.Provider>

diff --git a/src/js/components/Avatar/Avatar.js b/src/js/components/Avatar/Avatar.js
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import { ThemeContext } from 'styled-components';
 
 import { defaultProps } from '../../default-props';
@@ -20,19 +20,25 @@ const Avatar = ({
   const avatarSize = theme.avatar.size[size] || size;
   const avatarTextSize = theme.avatar.text.size[size] || 'large';
 
-  const avatarProps = {
-    align,
-    height: avatarSize,
-    justify,
-    overflow: 'hidden',
-    round,
-    width: avatarSize,
-  };
+  const avatarProps = useMemo(
+    () => ({
+      align,
+      height: avatarSize,
+      justify,
+      overflow: 'hidden',
+      round,
+      width: avatarSize,
+    }),
+    [align, avatarSize, justify, round],
+  );
 
-  const AvatarChildren = () => (
-    <StyledAvatar {...avatarProps} {...rest}>
-      {children}
-    </StyledAvatar>
+  const AvatarChildren = useCallback(
+    () => (
+      <StyledAvatar {...avatarProps} {...rest}>
+        {children}
+      </StyledAvatar>
+    ),
+    [avatarProps, children, rest],
   );
 
   if (height || width) {

diff --git a/src/js/components/Calendar/Calendar.js b/src/js/components/Calendar/Calendar.js
@@ -53,7 +53,7 @@ const activeDates = {
   end: 'end',
 };
 
-const timeStamp = new RegExp(/T.*/);
+const timeStamp = /T.*/;
 
 const formatSelectedDatesString = (date) => `Currently selected 
   ${date?.map((item) => {

diff --git a/src/js/components/Calendar/utils.js b/src/js/components/Calendar/utils.js
@@ -126,7 +126,7 @@ export const withinDates = (date, dates) => {
 };
 
 export const getTimestamp = (date) =>
-  new RegExp(/T.*/).test(date)
+  /T.*/.test(date)
     ? new Date(date).toISOString().split('T')[1]
     : // for Calendar, explicitly mark that caller has provided
       // value with no timestamp

diff --git a/src/js/components/DataTable/DataTable.js b/src/js/components/DataTable/DataTable.js
@@ -201,7 +201,8 @@ const DataTable = ({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useLayoutEffect(() => {
     const nextScrollOffset =
-      bodyRef.current.parentElement?.clientWidth - bodyRef.current.clientWidth;
+      (bodyRef.current.parentElement?.clientWidth || 0) -
+      bodyRef.current.clientWidth;
     if (nextScrollOffset !== scrollOffset) setScrollOffset(nextScrollOffset);
   });
 

diff --git a/src/js/components/DateInput/DateInput.js b/src/js/components/DateInput/DateInput.js
@@ -166,6 +166,13 @@ const DateInput = forwardRef(
       />
     );
 
+    const formContextValue = useMemo(
+      () => ({
+        useFormInput: ({ value: valueProp }) => [valueProp, () => {}],
+      }),
+      [],
+    );
+
     if (!format) {
       // When no format is specified, we don't give the user a way to type
       if (inline) return calendar;
@@ -186,9 +193,7 @@ const DateInput = forwardRef(
       <FormContext.Provider
         key="input"
         // don't let MaskedInput drive the Form
-        value={{
-          useFormInput: ({ value: valueProp }) => [valueProp, () => {}],
-        }}
+        value={formContextValue}
       >
         <Keyboard
           onEsc={open ? () => closeCalendar() : undefined}

diff --git a/src/js/components/DateInput/utils.js b/src/js/components/DateInput/utils.js
@@ -24,15 +24,15 @@ export const formatToSchema = (format) => {
 };
 
 const masks = {
-  m: { length: [1, 2], regexp: new RegExp(`^[1-9]$|^1[0-2]$`) },
-  mm: { length: [1, 2], regexp: new RegExp(`^[0-1]$|^0[1-9]$|^1[0-2]$`) },
-  d: { length: [1, 2], regexp: new RegExp(`^[1-9]$|^[1-2][0-9]$|^3[0-1]$`) },
+  m: { length: [1, 2], regexp: /^[1-9]$|^1[0-2]$/ },
+  mm: { length: [1, 2], regexp: /^[0-1]$|^0[1-9]$|^1[0-2]$/ },
+  d: { length: [1, 2], regexp: /^[1-9]$|^[1-2][0-9]$|^3[0-1]$/ },
   dd: {
     length: [1, 2],
-    regexp: new RegExp(`^[0-3]$|^0[1-9]$|^[1-2][0-9]$|^3[0-1]$`),
+    regexp: /^[0-3]$|^0[1-9]$|^[1-2][0-9]$|^3[0-1]$/,
   },
-  yy: { length: [1, 2], regexp: new RegExp(`^[0-9]{1,2}$`) },
-  yyyy: { length: [1, 4], regexp: new RegExp(`^[0-9]{1,4}$`) },
+  yy: { length: [1, 2], regexp: /^[0-9]{1,2}$/ },
+  yyyy: { length: [1, 4], regexp: /^[0-9]{1,4}$/ },
 };
 
 export const schemaToMask = (schema) => {

diff --git a/src/js/components/Drop/DropContainer.js b/src/js/components/Drop/DropContainer.js
@@ -335,18 +335,24 @@ const DropContainer = forwardRef(
       </StyledDrop>
     );
 
-    if (background || theme.global.drop.background) {
-      const dark = backgroundIsDark(
-        background || theme.global.drop.background,
-        theme,
-      );
-      if (dark !== undefined && dark !== theme.dark) {
-        content = (
-          <ThemeContext.Provider value={{ ...theme, dark }}>
-            {content}
-          </ThemeContext.Provider>
+    const themeContextValue = useMemo(() => {
+      let dark;
+      if (background || theme.global.drop.background) {
+        dark = backgroundIsDark(
+          background || theme.global.drop.background,
+          theme,
         );
       }
+      return { ...theme, dark };
+    }, [background, theme]);
+
+    const { dark } = themeContextValue;
+    if (dark !== undefined && dark !== theme.dark) {
+      content = (
+        <ThemeContext.Provider value={themeContextValue}>
+          {content}
+        </ThemeContext.Provider>
+      );
     }
 
     return (