chore: ignore existing errors

homebound-team · Sep 13, 2023 · 43bb977 · 43bb977
1 parent 299ab9b
commit 43bb977
Show file tree

Hide file tree

Showing 35 changed files with 613 additions and 407 deletions.
diff --git a/src/components/AutoSaveIndicator.tsx b/src/components/AutoSaveIndicator.tsx
@@ -12,14 +12,19 @@ interface AutoSaveIndicatorProps {
 export function AutoSaveIndicator({ hideOnIdle, doNotReset }: AutoSaveIndicatorProps) {
   const { status, resetStatus, errors } = useAutoSaveStatus();
 
-  useEffect(() => {
-    if (doNotReset) return;
-    /**
-     * Any time AutoSaveIndicator dismounts, most likely on Page Navigation,
-     * state should clear before the next Indicator mounts
-     */
-    return () => resetStatus();
-  }, []);
+  useEffect(
+    () => {
+      if (doNotReset) return;
+      /**
+       * Any time AutoSaveIndicator dismounts, most likely on Page Navigation,
+       * state should clear before the next Indicator mounts
+       */
+      return () => resetStatus();
+    },
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-internal-frontend
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
 
   switch (status) {
     case AutoSaveStatus.IDLE:

diff --git a/src/components/BeamContext.tsx b/src/components/BeamContext.tsx
@@ -69,21 +69,26 @@ export function BeamProvider({ children, ...presentationProps }: BeamProviderPro
 
   // We essentially expose the refs, but with our own getters/setters so that we can
   // have the setters call `tick` to re-render this Provider
-  const context = useMemo<BeamContextState>(() => {
-    return {
-      // These two keys need to trigger re-renders on change
-      modalState: new PretendRefThatTicks(modalRef, tick),
-      drawerContentStack: new PretendRefThatTicks(drawerContentStackRef, tick),
-      // The rest we don't need to re-render when these are mutated, so just expose as-is
-      modalCanCloseChecks: modalCanCloseChecksRef,
-      modalHeaderDiv,
-      modalBodyDiv,
-      modalFooterDiv,
-      drawerCanCloseChecks,
-      drawerCanCloseDetailsChecks,
-      sdHeaderDiv,
-    };
-  }, [modalBodyDiv, modalFooterDiv]);
+  const context = useMemo<BeamContextState>(
+    () => {
+      return {
+        // These two keys need to trigger re-renders on change
+        modalState: new PretendRefThatTicks(modalRef, tick),
+        drawerContentStack: new PretendRefThatTicks(drawerContentStackRef, tick),
+        // The rest we don't need to re-render when these are mutated, so just expose as-is
+        modalCanCloseChecks: modalCanCloseChecksRef,
+        modalHeaderDiv,
+        modalBodyDiv,
+        modalFooterDiv,
+        drawerCanCloseChecks,
+        drawerCanCloseDetailsChecks,
+        sdHeaderDiv,
+      };
+    },
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-internal-frontend
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [modalBodyDiv, modalFooterDiv],
+  );
 
   return (
     <BeamContext.Provider value={{ ...context }}>
@@ -109,7 +114,10 @@ export function BeamProvider({ children, ...presentationProps }: BeamProviderPro
 
 /** Looks like a ref, but invokes a re-render on set (w/o changing the setter identity). */
 class PretendRefThatTicks<T> implements MutableRefObject<T> {
-  constructor(private ref: MutableRefObject<T>, private tick: () => void) {}
+  constructor(
+    private ref: MutableRefObject<T>,
+    private tick: () => void,
+  ) {}
   get current(): T {
     return this.ref.current;
   }

diff --git a/src/components/CssReset.tsx b/src/components/CssReset.tsx
@@ -117,8 +117,16 @@ Improve consistency of default fonts in all browsers. (https://github.com/sindre
 */
 
   body {
-    font-family: system-ui, -apple-system, /* Firefox supports this but not yet system-ui */ "Segoe UI", Roboto,
-      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+    font-family:
+      system-ui,
+      -apple-system,
+      /* Firefox supports this but not yet system-ui */ "Segoe UI",
+      Roboto,
+      Helvetica,
+      Arial,
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji";
   }
 
   /*
@@ -376,8 +384,21 @@ const tailwindPreflightReset = css`
  *    to override it to ensure consistency even when using the default theme.
  */
   html {
-    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    font-family:
+      Inter,
+      ui-sans-serif,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      "Helvetica Neue",
+      Arial,
+      "Noto Sans",
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
       "Noto Color Emoji"; /* 1 */
     line-height: 1.5; /* 2 */
   }

diff --git a/src/components/DnDGrid/useDnDGridItem.tsx b/src/components/DnDGrid/useDnDGridItem.tsx
@@ -12,25 +12,30 @@ export function useDnDGridItem(props: useDnDGridItemProps) {
   const { id, itemRef } = props;
   const { dragEl, onDragHandleKeyDown } = useDnDGridContext();
 
-  const { dragItemProps, dragHandleProps } = useMemo(() => {
-    function initDraggable() {
-      if (itemRef.current) {
-        dragEl.current = itemRef.current;
+  const { dragItemProps, dragHandleProps } = useMemo(
+    () => {
+      function initDraggable() {
+        if (itemRef.current) {
+          dragEl.current = itemRef.current;
+        }
       }
-    }
 
-    return {
-      dragItemProps: { [gridItemIdKey]: id },
-      dragHandleProps: {
-        onMouseDown: initDraggable,
-        onTouchStart: initDraggable,
-        onKeyDown: (e: KeyboardEvent) => {
-          initDraggable();
-          onDragHandleKeyDown(e);
+      return {
+        dragItemProps: { [gridItemIdKey]: id },
+        dragHandleProps: {
+          onMouseDown: initDraggable,
+          onTouchStart: initDraggable,
+          onKeyDown: (e: KeyboardEvent) => {
+            initDraggable();
+            onDragHandleKeyDown(e);
+          },
         },
-      },
-    };
-  }, [dragEl, id, itemRef]);
+      };
+    },
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-internal-frontend
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dragEl, id, itemRef],
+  );
 
   return { dragHandleProps, dragItemProps };
 }

diff --git a/src/components/Filters/BaseFilter.ts b/src/components/Filters/BaseFilter.ts
@@ -11,7 +11,10 @@ import { TestIds } from "src/utils/useTestIds";
  * detail.
  */
 export class BaseFilter<V, P extends { label?: string; defaultValue?: V }> {
-  constructor(protected key: string, protected props: P) {}
+  constructor(
+    protected key: string,
+    protected props: P,
+  ) {}
 
   get label(): string {
     return this.props.label || defaultLabel(this.key);

diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
@@ -69,6 +69,8 @@ export function IconButton(props: IconButtonProps) {
       ...(isFocusVisible || forceFocusStyles ? iconButtonStylesFocus : {}),
       ...(isDisabled && iconButtonStylesDisabled),
     }),
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-internal-frontend
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [isHovered, isFocusVisible, isDisabled, compact],
   );
   const iconColor = contrast ? contrastIconColor : defaultIconColor;

diff --git a/src/components/Layout/RightPaneLayout/RightPaneLayout.stories.tsx b/src/components/Layout/RightPaneLayout/RightPaneLayout.stories.tsx
@@ -147,6 +147,8 @@ function TableExample({ numCols = 10, numRows = 100 }: { numCols?: number; numRo
         w: "200px",
         sticky: i === 0 ? "left" : undefined,
       })),
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-internal-frontend
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [numCols],
   );
 

diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
@@ -65,6 +65,8 @@ export const ButtonsInFooter = () => {
       ),
     });
   // Immediately open the modal for Chromatic snapshots
+  // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-internal-frontend
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(open, [openModal]);
   return <Button label="Open" onClick={open} />;
 };
@@ -132,6 +134,8 @@ function ModalExample(props: ModalExampleProps) {
       drawHeaderBorder,
     });
   // Immediately open the modal for Chromatic snapshots
+  // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-internal-frontend
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(open, [openModal]);
   return <Button label="Open" onClick={open} />;
 }
@@ -146,6 +150,8 @@ function ModalFilterTableExample({ size, forceScrolling }: Pick<ModalProps, "siz
 
   // Immediately open the modal for Chromatic snapshots
   const open = () => openModal(modalProps);
+  // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-internal-frontend
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(open, [openModal]);
 
   return <Button label="Open" onClick={open} />;

diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
@@ -59,6 +59,8 @@ describe("Modal", () => {
 
 function TestModalApp(props: ModalProps & { canClose?: () => boolean }) {
   const { openModal, addCanClose } = useModal();
+  // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-internal-frontend
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => openModal(props), [openModal]);
   if (props.canClose) {
     addCanClose(props.canClose);

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -76,21 +76,31 @@ export function Modal(props: ModalProps) {
 
   useResizeObserver({
     ref: modalBodyRef,
-    onResize: useCallback(() => {
-      const target = modalBodyRef.current!;
-      if (forceScrolling === undefined && !isFixedHeight) {
-        setHasScroll(target.scrollHeight > target.clientHeight);
-      }
-    }, []),
+    onResize: useCallback(
+      () => {
+        const target = modalBodyRef.current!;
+        if (forceScrolling === undefined && !isFixedHeight) {
+          setHasScroll(target.scrollHeight > target.clientHeight);
+        }
+      },
+      // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-internal-frontend
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [],
+    ),
   });
 
   // Even though we use raw-divs for the createPortal calls, we do actually need to
   // use refs + useEffect to stitch those raw divs back into the React component tree.
-  useEffect(() => {
-    modalHeaderRef.current!.appendChild(modalHeaderDiv);
-    modalBodyRef.current!.appendChild(modalBodyDiv);
-    modalFooterRef.current!.appendChild(modalFooterDiv);
-  }, [modalBodyRef, modalFooterRef, modalHeaderRef]);
+  useEffect(
+    () => {
+      modalHeaderRef.current!.appendChild(modalHeaderDiv);
+      modalBodyRef.current!.appendChild(modalBodyDiv);
+      modalFooterRef.current!.appendChild(modalFooterDiv);
+    },
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-internal-frontend
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [modalBodyRef, modalFooterRef, modalHeaderRef],
+  );
 
   return (
     <OverlayContainer>

diff --git a/src/components/Modal/useModal.test.tsx b/src/components/Modal/useModal.test.tsx
@@ -36,6 +36,8 @@ describe("useModal", () => {
   it("can provide a custom canClose method", async () => {
     function TestApp(props: ModalProps) {
       const { openModal } = useModal();
+      // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-internal-frontend
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       useEffect(() => openModal(props), []);
       return <div>App</div>;
     }
@@ -64,6 +66,8 @@ describe("useModal", () => {
     function TestApp(props: ModalProps) {
       beamContext = useBeamContext();
       const { openModal } = useModal();
+      // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-internal-frontend
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       useEffect(() => openModal(props), []);
       return <div>App</div>;
     }

diff --git a/src/components/ScrollShadows.tsx b/src/components/ScrollShadows.tsx
@@ -41,18 +41,25 @@ export function ScrollShadows(props: ScrollShadowsProps) {
     ];
   }, [horizontal, bgColor]);
 
-  const updateScrollProps = useCallback((el: HTMLDivElement) => {
-    const { scrollTop, scrollHeight, clientHeight, scrollWidth, scrollLeft, clientWidth } = el;
+  const updateScrollProps = useCallback(
+    (el: HTMLDivElement) => {
+      const { scrollTop, scrollHeight, clientHeight, scrollWidth, scrollLeft, clientWidth } = el;
 
-    const start = horizontal ? scrollLeft : scrollTop;
-    const end = horizontal ? scrollWidth : scrollHeight;
-    const boxSize = horizontal ? clientWidth : clientHeight;
-    setShowStartShadow(start > 0);
-    setShowEndShadow(start + boxSize < end);
-  }, []);
+      const start = horizontal ? scrollLeft : scrollTop;
+      const end = horizontal ? scrollWidth : scrollHeight;
+      const boxSize = horizontal ? clientWidth : clientHeight;
+      setShowStartShadow(start > 0);
+      setShowEndShadow(start + boxSize < end);
+    },
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-internal-frontend
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
 
   // Use a ResizeObserver to update the scroll props to determine if the shadows should be shown.
   // This executes on render and subsequent resizes which could be due to content/`children` changes (such as responses from APIs).
+  // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-internal-frontend
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const onResize = useCallback(() => scrollRef.current && updateScrollProps(scrollRef.current), []);
   useResizeObserver({ ref: scrollRef, onResize });
 

diff --git a/src/components/Snackbar/Snackbar.stories.tsx b/src/components/Snackbar/Snackbar.stories.tsx
@@ -84,9 +84,14 @@ function CustomOffsetComponent(props: SnackBarStoryProps) {
   const { actionLabel, actionVariant, offset, ...noticeProps } = props;
 
   useSnackbarOffset(offset ?? {});
-  useEffect(() => {
-    triggerNotice({ message: "Initial notice for chromatic diff purposes to ensure proper placement." });
-  }, []);
+  useEffect(
+    () => {
+      triggerNotice({ message: "Initial notice for chromatic diff purposes to ensure proper placement." });
+    },
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-internal-frontend
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
 
   return (
     <Button
@@ -109,18 +114,23 @@ export function SystematicClose(args: SnackBarStoryProps) {
   const noticeId = "customId";
   const { actionLabel, actionVariant, ...noticeProps } = args;
 
-  const triggerOnClick = useCallback(() => {
-    triggerNotice({
-      ...noticeProps,
-      ...(actionLabel
-        ? { action: { label: actionLabel, variant: actionVariant, onClick: action(`${actionLabel} clicked`) } }
-        : undefined),
-      id: noticeId,
-      persistent: true,
-      onClose: () => setNoticeOpen(false),
-    });
-    setNoticeOpen(true);
-  }, [noticeId]);
+  const triggerOnClick = useCallback(
+    () => {
+      triggerNotice({
+        ...noticeProps,
+        ...(actionLabel
+          ? { action: { label: actionLabel, variant: actionVariant, onClick: action(`${actionLabel} clicked`) } }
+          : undefined),
+        id: noticeId,
+        persistent: true,
+        onClose: () => setNoticeOpen(false),
+      });
+      setNoticeOpen(true);
+    },
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-internal-frontend
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [noticeId],
+  );
 
   const closeOnClick = useCallback(() => {
     closeNotice(noticeId);