Activate react eslint plugins

.eslintrc.js

@@ -5,6 +5,8 @@ module.exports = {
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -16,13 +18,20 @@ module.exports = {
   },
   "plugins": [
     "@typescript-eslint",
+    "react",
+    "react-hooks",
     "import"
   ],
   "rules": {
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-unused-vars": ["error", { "ignoreRestSiblings": true }],
 
     "no-unused-vars": "off",
-    "import/no-default-export": "error"
+    "import/no-default-export": "error",
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
+    "react/jsx-no-target-blank": "off",
+    "react/display-name": "off",
+    "react/no-unescaped-entities": "warn",
   }
 }

package.json

@@ -50,6 +50,7 @@
     "eslint": "^8.19.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "jest": "^28.1.2",
     "jest-environment-jsdom": "^29.3.1",
     "jest-environment-node": "^29.6.2",

src/components/BodyPortal.spec.tsx

@@ -239,7 +239,7 @@ describe('BodyPortal', () => {
     render(
       <BodyPortalSlotsContext.Provider value={['header', 'root']}>
         <BodyPortal slot='header' tagName='header' id='orange' data-testid='blue'>
-          Now you're thinking with portals
+          Now you&apos;re thinking with portals
         </BodyPortal>
       </BodyPortalSlotsContext.Provider>,
       { container: root }

src/components/BodyPortal.tsx

@@ -47,6 +47,7 @@ export const BodyPortal = React.forwardRef<HTMLElement, BodyPortalProps>((
   }
 
   const bodyPortalOrderedRefs = React.useContext(BodyPortalSlotsContext);
+  const testId = props['data-testid'];
 
   React.useLayoutEffect(() => {
     const element = internalRef.current;
@@ -55,7 +56,7 @@ export const BodyPortal = React.forwardRef<HTMLElement, BodyPortalProps>((
 
     if (id) { element.id = id; }
 
-    if (props['data-testid']) { element.dataset.testid = props['data-testid']; }
+    if (testId) { element.dataset.testid = testId; }
 
     if (role) { element.setAttribute('role', role); }
 
@@ -76,9 +77,9 @@ export const BodyPortal = React.forwardRef<HTMLElement, BodyPortalProps>((
 
       if (id) { element.id = ''; }
 
-      if (props['data-testid']) { delete element.dataset.testid; }
+      if (testId) { delete element.dataset.testid; }
     };
-  }, [bodyPortalOrderedRefs, className, role, slot, tag]);
+  }, [bodyPortalOrderedRefs, className, id, role, slot, tag, testId]);
 
   return createPortal(children, internalRef.current);
 });

src/components/ButtonBar.stories.tsx

@@ -40,6 +40,7 @@ export const Examples = () => {
           <a
             data-selected={selections[0] === i}
             onClick={() => updateSelection(0, i)}
+            key={i}
           >
             {label}
           </a>
@@ -52,6 +53,7 @@ export const Examples = () => {
           <a
             data-selected={selections[1] === i}
             onClick={() => updateSelection(1, i)}
+            key={i}
           >
             {label}
           </a>
@@ -68,6 +70,7 @@ export const Examples = () => {
           <a
             data-selected={selections[2] === i}
             onClick={() => updateSelection(2, i)}
+            key={i}
           >
             {label}
           </a>

src/components/Error.tsx

@@ -39,7 +39,7 @@ export const Error = ({ heading, children, ...props }: ErrorPropTypes) => {
   return <ModalBody {...props} data-testid='error'>
     <ModalBodyHeading>{heading ?? `Uh-oh, there's been a glitch`}</ModalBodyHeading>
     {children ?? <>
-      We're not quite sure what went wrong. Restart your browser. If this doesn't solve
+      We&apos;re not quite sure what went wrong. Restart your browser. If this doesn&apos;t solve
       the problem, visit our <a href="https://openstax.secure.force.com/help" target="_blank">Support Center</a>.
     </>}
     <EventId data-testid='event-id'>{context.error?.eventId || lastEventId}</EventId>

src/components/ErrorBoundary.stories.tsx

@@ -18,7 +18,7 @@ const ErrorComponent = ({ doThrow, setShowError, error: error, errorMessage }: {
         error instanceof Error ? error : new Error(errorMessage || 'Test Error')
       );
     }
-  }, [doThrow]);
+  }, [doThrow, error, errorMessage, setShowError]);
 
   return null;
 };

src/components/ErrorBoundary.tsx

@@ -12,7 +12,7 @@ const Error = ({ children, ...props }: React.PropsWithChildren<ErrorPropTypes>)
 const defaultErrorFallbacks = {
   'generic': <Error data-testid='error-fallback' />,
   'SessionExpiredError': <Error heading='Your session has expired'>
-    Please refresh your browser and try again. If this doesn't solve the problem, visit our <a href="https://openstax.secure.force.com/help" target="_blank">Support Center</a>.
+    Please refresh your browser and try again. If this doesn&apos;t solve the problem, visit our <a href="https://openstax.secure.force.com/help" target="_blank">Support Center</a>.
   </Error>,
   'UnauthorizedError': <Error heading="Uh-oh, it seems you can't access this page.">
     You may not have the required permissions or may have been logged out. Try refreshing the page or restarting your browser.
@@ -52,7 +52,7 @@ export const ErrorBoundary = ({
         new Sentry.BrowserTracing(),
       ],
     });
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   // There are two references to the render element here because the Sentry fallback (and
   // onError) are not used for unhandledrejection events. To support those events, we provide

src/components/SidebarNav/index.tsx

@@ -53,7 +53,7 @@ export const SidebarNavBase = ({
 
   React.useLayoutEffect(() => {
     setNavIsCollapsed(isMobile);
-  }, [isMobile]);
+  }, [isMobile]); // eslint-disable-line react-hooks/exhaustive-deps
 
   React.useEffect(() => {
     if (!isMobile || navIsCollapsed) {

src/components/Toast.tsx

@@ -143,7 +143,7 @@ export const Toast = ({
     return () => {
       clearTimeout(timeoutId);
     };
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   if (!show) { return null; }
 

src/components/Tooltip.stories.tsx

@@ -23,8 +23,8 @@ const Row = styled.div`
 `;
 
 export const Default = () => <Wrapper>
-  {(['right', 'top', 'bottom'] as Placement[]).map((placement) =>
-    <Row><TooltipGroup placement={placement}>Tooltip content goes here.</TooltipGroup>{placement}</Row>
+  {(['right', 'top', 'bottom'] as Placement[]).map((placement, i) =>
+    <Row key={i}><TooltipGroup placement={placement}>Tooltip content goes here.</TooltipGroup>{placement}</Row>
   )}
   </Wrapper>
 ;

src/components/forms/uncontrolled/inputTypes.tsx

@@ -232,8 +232,8 @@ export const Checkbox = ({
     <HelpText value={help} />
     {error !== undefined && (
         <>
-          {error.map((msg) => (
-            <StyledErrorMessage>{msg}</StyledErrorMessage>
+          {error.map((msg, i) => (
+            <StyledErrorMessage key={i}>{msg}</StyledErrorMessage>
           ))}
         </>
       )}

yarn.lock

@@ -6508,6 +6508,11 @@ eslint-plugin-import@^2.26.0:
     resolve "^1.22.0"
     tsconfig-paths "^3.14.1"
 
+eslint-plugin-react-hooks@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.0.0.tgz#72e2eefbac4b694f5324154619fee44f5f60f101"
+  integrity sha512-hIOwI+5hYGpJEc4uPRmz2ulCjAGD/N13Lukkh8cLV0i2IRk/bdZDYjgLVHj+U9Z704kLIdIO6iueGvxNur0sgw==
+
 eslint-plugin-react@^7.30.1:
   version "7.30.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.30.1.tgz#2be4ab23ce09b5949c6631413ba64b2810fd3e22"