chore(ui-react): lint primitives/utils (#2334)

* chore(ui-react): lint primitives/utils

Author: calebpollman

packages/react/.eslintrc.js

@@ -69,7 +69,7 @@ module.exports = {
         'src/components/**/*',
         'src/helpers/**/*',
         'src/hooks/**/*',
-        'src/primitives/shared/**/*',
+        'src/primitives/+(shared|utils)/**/*',
         // 'src/primitives/**/*',
       ],
       extends: [

packages/react/src/primitives/Checkbox/Checkbox.tsx

@@ -12,7 +12,7 @@ import { splitPrimitiveProps } from '../shared/styleUtils';
 import { Text } from '../Text';
 import { useCheckbox } from './useCheckbox';
 import { VisuallyHidden } from '../VisuallyHidden';
-import { useTestId } from '../utils/testUtils';
+import { getTestId } from '../utils/testUtils';
 
 const CheckboxPrimitive: Primitive<CheckboxProps, 'input'> = (
   {
@@ -47,9 +47,9 @@ const CheckboxPrimitive: Primitive<CheckboxProps, 'input'> = (
     }
   }, [checked, dataChecked, setDataChecked]);
 
-  const buttonTestId = useTestId(testId, ComponentClassNames.CheckboxButton);
-  const iconTestId = useTestId(testId, ComponentClassNames.CheckboxIcon);
-  const labelTestId = useTestId(testId, ComponentClassNames.CheckboxLabel);
+  const buttonTestId = getTestId(testId, ComponentClassNames.CheckboxButton);
+  const iconTestId = getTestId(testId, ComponentClassNames.CheckboxIcon);
+  const labelTestId = getTestId(testId, ComponentClassNames.CheckboxLabel);
   const flexClasses = classNames(
     ComponentClassNames.CheckboxButton,
     classNameModifierByFlag(

packages/react/src/primitives/Checkbox/__tests__/Checkbox.test.tsx

@@ -10,7 +10,6 @@ import {
   testFlexProps,
   expectFlexContainerStyleProps,
 } from '../../Flex/__tests__/Flex.test';
-import { useTestId } from '../../utils/testUtils';
 
 describe('Checkbox test suite', () => {
   const basicProps = {

packages/react/src/primitives/CheckboxField/CheckboxField.tsx

@@ -7,7 +7,7 @@ import { CheckboxFieldProps, Primitive } from '../types';
 import { ComponentClassNames } from '../shared';
 import { FieldErrorMessage } from '../Field';
 import { Flex } from '../Flex';
-import { useTestId } from '../utils/testUtils';
+import { getTestId } from '../utils/testUtils';
 
 const CheckboxFieldPrimitive: Primitive<CheckboxFieldProps, 'input'> = (
   {
@@ -22,7 +22,7 @@ const CheckboxFieldPrimitive: Primitive<CheckboxFieldProps, 'input'> = (
   },
   ref
 ) => {
-  const checkboxTestId = useTestId(testId, ComponentClassNames.Checkbox);
+  const checkboxTestId = getTestId(testId, ComponentClassNames.Checkbox);
   return (
     <Flex
       className={classNames(

packages/react/src/primitives/utils/testUtils.ts

@@ -1,25 +1,23 @@
-import * as React from 'react';
-export const useTestId = (testId: string, component: string) => {
-  const newTestId = React.useMemo(
-    () => (testId && component ? `${testId}-${component}` : undefined),
-    [testId, component]
-  );
-  return newTestId;
-};
+export const getTestId = (testId: string, component: string): string =>
+  testId && component ? `${testId}-${component}` : undefined;
 
-export const errorMessageWrapper = (fn: () => void, message: string) => {
+export const errorMessageWrapper = (
+  fn: () => void,
+  message: string
+): void | Error => {
   try {
     fn();
   } catch (error) {
     // Formatting below is intentional
     // and displays below Jest error message
-    error.message += `
+    (error as Error).message += `
 
 -- Custom Error Message --
 ${message}
 
 `;
+    // eslint-disable-next-line no-console
     console.error(error);
-    throw new Error(error);
+    throw new Error((error as Error).message);
   }
 };

packages/react/src/primitives/utils/useLayoutEffect.ts

@@ -8,8 +8,6 @@ import * as React from 'react';
  *
  * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
  */
-const useLayoutEffect = Boolean(globalThis?.document)
-  ? React.useLayoutEffect
-  : () => {};
+const useLayoutEffect = globalThis?.document ? React.useLayoutEffect : () => {};
 
 export { useLayoutEffect };

packages/react/src/primitives/utils/useStableId.ts

@@ -9,10 +9,14 @@ export type UseStableId = (id?: string) => string;
 
 // Create a local version of React.useId which will reference React.useId for React 18
 // and fallback to noop for React 17 and below
-// Note: We `toString()` to prevent bundlers from trying to `import { useId } from 'react';`
+// Note: We use `toString()` to prevent bundlers from trying to `import { useId } from 'react';`
 // since it doesn't exist in React 17 and below (prevents https://github.com/aws-amplify/amplify-ui/issues/1154)
 const useReactId: () => string | (() => undefined) =
-  (React as any)['useId'.toString()] || (() => undefined);
+  // disable eslint below to allow usage of casting React to `any`, which ensures that TS
+  // does not get confused about the existence of `useId` in React 17 and below
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  ((React as any)['useId'.toString()] as () => string) || (() => undefined);
+
 let count = 0;
 
 /**