configure eslint ignores

apps/frontendsupport/app/components/About/About.tsx

@@ -1,4 +1,5 @@
-import { Box, Heading, PageBlock, TextLink, Text, Stack, List } from '@cutting/component-library';
+import { Box, Heading, List, PageBlock, Stack, Text, TextLink } from '@cutting/component-library';
+
 import { LazyLoadedImage } from '../LazyLoadedImage/LazyLoadedImage';
 
 export function About(): JSX.Element {

apps/frontendsupport/app/components/CTAButton/CTAButton.tsx

@@ -1,7 +1,8 @@
-import type { MouseEventHandler, ReactNode } from 'react';
 import cs from 'classnames';
-import * as styles from './CTAButton.css.js';
+import type { MouseEventHandler, ReactNode } from 'react';
+
 import { TextNavLink } from '../TextNavLink/TextNavLink.js';
+import * as styles from './CTAButton.css.js';
 
 interface CTAButtonProps {
   children: ReactNode;

apps/frontendsupport/app/components/Clients/Clients.tsx

@@ -1,13 +1,15 @@
 import { Box, Heading } from '@cutting/component-library';
 import { useIsomorphicLayoutEffect } from '@cutting/hooks';
-import { horizontalLoop } from './loop';
-import { useRef } from 'react';
+import { waitUntil } from '@cutting/util';
+import cs from 'classnames';
 import gsap from 'gsap';
+import { useRef } from 'react';
+
 import { Panel } from '~/pages/Home/Panel/Panel';
-import cs from 'classnames';
-import * as styles from './Clients.css';
+
 import { LazyLoadedImage } from '../LazyLoadedImage/LazyLoadedImage';
-import { waitUntil } from '@cutting/util';
+import * as styles from './Clients.css';
+import { horizontalLoop } from './loop';
 
 const clients = [
   'https://res.cloudinary.com/ddospxsc8/image/upload/v1696609565/volvo_qhsx69.png',
@@ -25,6 +27,7 @@ interface ClientsProps {
 
 export function Clients({ width }: ClientsProps): JSX.Element {
   const id = useRef<NodeJS.Timeout>();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const savedCallback = useRef<any>();
   const boxRef = useRef<HTMLDivElement>(null);
 

apps/frontendsupport/app/components/Clients/loop.ts

@@ -7,31 +7,30 @@ interface LoopConfig {
   repeat?: number;
   onChange?(h: HTMLElement, i: number): void;
   speed?: number;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   snap?: any;
 }
 
-export function horizontalLoop(items: HTMLElement[], config: LoopConfig) {
+export function horizontalLoop(items: HTMLElement[], config: LoopConfig): gsap.core.Timeline {
   items = gsap.utils.toArray(items);
   config = config || {};
 
-  let onChange = config.onChange,
-    lastIndex = 0,
-    tl = gsap.timeline({
-      onUpdate:
-        onChange &&
-        function () {
-          let i = tl.closestIndex();
-          if (lastIndex !== i) {
-            lastIndex = i;
-            onChange?.(items[i]!, i);
-          }
-        },
-      paused: config.paused,
-      defaults: { ease: 'none' },
-      onReverseComplete: () => {
-        tl.totalTime(tl.rawTime() + tl.duration() * 100);
-      },
-    });
+  const onChange = config.onChange;
+  let lastIndex = 0;
+  const tl = gsap.timeline({
+    onUpdate() {
+      const i = tl.closestIndex();
+      if (lastIndex !== i) {
+        lastIndex = i;
+        onChange?.(items[i]!, i);
+      }
+    },
+    paused: config.paused,
+    defaults: { ease: 'none' },
+    onReverseComplete: () => {
+      tl.totalTime(tl.rawTime() + tl.duration() * 100);
+    },
+  });
 
   const length = items.length;
 
@@ -98,6 +97,7 @@ export function horizontalLoop(items: HTMLElement[], config: LoopConfig) {
 
   let timeWrap: (t: number) => number;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const getClosest = (values: number[], value: any, wrap: any) => {
     let i = values.length,
       closest = 1e10,
@@ -151,13 +151,16 @@ export function horizontalLoop(items: HTMLElement[], config: LoopConfig) {
   };
 
   const refresh = (deep: boolean) => {
-    let progress = tl.progress();
+    const progress = tl.progress();
     tl.progress(0, true);
     populateWidths();
-    deep && populateTimeline();
+    if (deep) {
+      populateTimeline();
+    }
     tl.progress(progress, true);
   };
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let proxy: any;
 
   gsap.set(items, { x: 0 });
@@ -169,11 +172,16 @@ export function horizontalLoop(items: HTMLElement[], config: LoopConfig) {
 
   // window.addEventListener('resize', () => refresh(true));
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   function toIndex(index: number, vars: any) {
     vars = vars || {};
-    Math.abs(index - curIndex) > length / 2 && (index += index > curIndex ? -length : length); // always go in the shortest direction
-    let newIndex = gsap.utils.wrap(0, length, index),
-      time = times[newIndex];
+    if (Math.abs(index - curIndex) > length / 2) {
+      index += index > curIndex ? -length : length; // always go in the shortest direction
+    }
+
+    const newIndex = gsap.utils.wrap(0, length, index);
+    let time = times[newIndex];
+
     if (time! > tl.time() !== index > curIndex && index !== curIndex) {
       // if we're wrapping the timeline's playhead, make the proper adjustments
       time! += tl.duration() * (index > curIndex ? 1 : -1);
@@ -186,9 +194,10 @@ export function horizontalLoop(items: HTMLElement[], config: LoopConfig) {
     gsap.killTweensOf(proxy);
     return vars.duration === 0 ? tl.time(timeWrap(time!)) : tl.tweenTo(time!, vars);
   }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   tl.toIndex = (index: number, vars: any) => toIndex(index, vars);
   tl.closestIndex = (setCurrent: unknown) => {
-    let index = getClosest(times, tl.time(), tl.duration());
+    const index = getClosest(times, tl.time(), tl.duration());
     if (setCurrent) {
       curIndex = index;
       indexIsDirty = false;
@@ -198,9 +207,10 @@ export function horizontalLoop(items: HTMLElement[], config: LoopConfig) {
 
   tl.current = () => (indexIsDirty ? tl.closestIndex(true) : curIndex);
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   tl.next = (vars: any) => toIndex(tl.current() + 1, vars);
 
-  tl.previous = (vars: any) => toIndex(tl.current() - 1, vars);
+  tl.previous = (vars: unknown) => toIndex(tl.current() - 1, vars);
 
   tl.times = times;
 
@@ -212,7 +222,7 @@ export function horizontalLoop(items: HTMLElement[], config: LoopConfig) {
 
   tl.refresh = refresh;
 
-  onChange && onChange(items[curIndex]!, curIndex);
+  onChange?.(items[curIndex]!, curIndex);
 
   return tl;
 }

apps/frontendsupport/app/components/Contact/Contact.tsx

@@ -1,5 +1,6 @@
 import { Box, Heading, Stack } from '@cutting/component-library';
 import { ContactForm } from '@cutting/react-hook-form-components';
+
 import * as styles from './Contact.css';
 
 export function Contact(): JSX.Element {

apps/frontendsupport/app/components/Header/Header.tsx

@@ -1,6 +1,7 @@
-import { TopNav } from './Top.js';
 import { Box } from '@cutting/component-library';
 
+import { TopNav } from './Top.js';
+
 export function Header(): JSX.Element {
   return (
     <Box component="header" position="fixed" width="full" zIndex="modal" style={{ background: 'inherit' }}>

apps/frontendsupport/app/components/Header/Top.css.ts

@@ -1,5 +1,5 @@
-import { globalStyle, style } from '@vanilla-extract/css';
 import { responsiveStyle, vars } from '@cutting/component-library';
+import { globalStyle, style } from '@vanilla-extract/css';
 
 export const logo = style({
   whiteSpace: 'nowrap',

apps/frontendsupport/app/components/Header/Top.tsx

@@ -1,9 +1,10 @@
-import { NavLink } from '@remix-run/react';
 import { Box, Nav, NavItem, NavItems, vars } from '@cutting/component-library';
-import { CTAButton } from '../CTAButton/CTAButton.js';
+import { NavLink } from '@remix-run/react';
+import { Image } from '@unpic/react';
 import { useCallback, useState } from 'react';
+
+import { CTAButton } from '../CTAButton/CTAButton.js';
 import { TextNavLink } from '../TextNavLink/TextNavLink.js';
-import { Image } from '@unpic/react';
 import * as styles from './Top.css';
 
 export function TopNav(): JSX.Element {

apps/frontendsupport/app/components/LazyBackgroundImage/LazyBackgroundImage.css.ts

@@ -1,5 +1,5 @@
 import { responsiveStyle } from '@cutting/component-library';
-import { style, createVar } from '@vanilla-extract/css';
+import { createVar, style } from '@vanilla-extract/css';
 
 export const backgroundImage = createVar();
 

apps/frontendsupport/app/components/LazyBackgroundImage/LazyBackgroundImage.tsx

@@ -1,12 +1,13 @@
-import { useRef, useState, useCallback, useMemo } from 'react';
+import { assert } from '@cutting/assert';
 import { Box, type BoxProps } from '@cutting/component-library';
 import { useIsomorphicLayoutEffect } from '@cutting/hooks';
-import { getImagePropsFromMap } from '../LazyLoadedImage/getImagePropsFromMap.js';
 import { blurhashToGradientCssObject } from '@unpic/placeholder';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import * as styles from './LazyBackgroundImage.css.js';
 import cs from 'classnames';
-import { assert } from '@cutting/assert';
+import { useCallback, useMemo, useRef, useState } from 'react';
+
+import { getImagePropsFromMap } from '../LazyLoadedImage/getImagePropsFromMap.js';
+import * as styles from './LazyBackgroundImage.css.js';
 
 interface LazyBackgroundImageProps {
   backgroundImage: string;
@@ -46,7 +47,6 @@ export function LazyBackgroundImage({
 
     return () => {
       if (containerRef.current) {
-        // eslint-disable-next-line react-hooks/exhaustive-deps
         observer.unobserve(containerRef.current);
       }
     };
@@ -64,14 +64,14 @@ export function LazyBackgroundImage({
     <Box
       ref={containerRef}
       style={
-        !global.IntersectionObserver || backgroundStyle === 'repeat' || visible == false
+        !global.IntersectionObserver || backgroundStyle === 'repeat' || !visible
           ? style
           : assignInlineVars({ [styles.backgroundImage]: `url('${backgroundImage}') no-repeat center center fixed` })
       }
       height={height}
       className={cs(className, styles.bg, {
-        [styles.bgRepeat]: backgroundStyle == 'repeat',
-        [styles.bgStatic]: backgroundStyle == 'static',
+        [styles.bgRepeat]: backgroundStyle === 'repeat',
+        [styles.bgStatic]: backgroundStyle === 'static',
       })}
     ></Box>
   );

apps/frontendsupport/app/components/LazyLoadedImage/LazyLoadedImage.tsx

@@ -1,9 +1,10 @@
+import { assert } from '@cutting/assert';
+import { useIsomorphicLayoutEffect } from '@cutting/hooks';
 import { blurhashToCssGradientString } from '@unpic/placeholder';
 import { Image, type ImageProps } from '@unpic/react';
 import { useCallback, useMemo, useState } from 'react';
+
 import { getImagePropsFromMap } from './getImagePropsFromMap';
-import { useIsomorphicLayoutEffect } from '@cutting/hooks';
-import { assert } from '@cutting/assert';
 
 type Layout = ImageProps['layout'];
 
@@ -49,6 +50,7 @@ export function LazyLoadedImage({
   return (
     <Image
       loading={loading}
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       layout={layout as any}
       width={resolvedWidth}
       height={resolvedHeight}

apps/frontendsupport/app/components/LazyLoadedImage/getImagePropsFromMap.ts

@@ -1,7 +1,16 @@
-import blurhashMap from '../../json/blurhash_image_map.json';
 import { assert } from '@cutting/assert';
 
-export function getImagePropsFromMap(url: string) {
+import blurhashMap from '../../json/blurhash_image_map.json';
+
+interface BlurHashImage {
+  id: string;
+  url: string;
+  blurhash: string;
+  width: number;
+  height: number;
+}
+
+export function getImagePropsFromMap(url: string): BlurHashImage {
   const urlParts = url.split('/');
 
   let fileName = urlParts.slice(-1)[0];

apps/frontendsupport/app/components/Posts/Posts.tsx

@@ -1,8 +1,9 @@
 import { Box, Heading, List, PageBlock, Stack, Text, vars } from '@cutting/component-library';
 import type { PostData } from '@cutting/markdown';
 import { Image } from '@unpic/react';
-import { TextNavLink } from '../TextNavLink/TextNavLink.js';
+
 import { LazyLoadedImage } from '../LazyLoadedImage/LazyLoadedImage.js';
+import { TextNavLink } from '../TextNavLink/TextNavLink.js';
 
 interface PostsProps {
   posts: PostData[];

apps/frontendsupport/app/components/RandomImage/RandomImage.css.ts

@@ -1,5 +1,5 @@
-import { style } from '@vanilla-extract/css';
 import { responsiveStyle } from '@cutting/component-library';
+import { style } from '@vanilla-extract/css';
 
 export const mobile = style({
   ...responsiveStyle({

apps/frontendsupport/app/components/RandomImage/RandomImage.tsx

@@ -1,12 +1,13 @@
+import { assert } from '@cutting/assert';
 import type { BoxProps } from '@cutting/component-library';
 import { Box } from '@cutting/component-library';
 import { useInterval } from '@cutting/hooks';
-import { useState } from 'react';
-import * as styles from './RandomImage.css';
 import cs from 'classnames';
-import { LazyLoadedImage } from '../LazyLoadedImage/LazyLoadedImage.js';
-import { assert } from '@cutting/assert';
 import { buildImageUrl, extractPublicId, setConfig } from 'cloudinary-build-url';
+import { useState } from 'react';
+
+import { LazyLoadedImage } from '../LazyLoadedImage/LazyLoadedImage.js';
+import * as styles from './RandomImage.css';
 
 setConfig({
   cloudName: 'ddospxsc8',

apps/frontendsupport/app/components/Scroller/Scroller.tsx

@@ -1,6 +1,7 @@
-import * as styles from './Scroller.css';
-import cs from 'classnames';
 import { Image } from '@unpic/react';
+import cs from 'classnames';
+
+import * as styles from './Scroller.css';
 
 export function Scroller(): JSX.Element {
   return (

apps/frontendsupport/app/components/TextNavLink/TextNavLink.tsx

@@ -1,10 +1,11 @@
 import type { Taggable, TextProps } from '@cutting/component-library';
-import { useGetTextStyles, Text } from '@cutting/component-library';
+import { Text, useGetTextStyles } from '@cutting/component-library';
 import { NavLink, type NavLinkProps } from '@remix-run/react';
 import cs from 'classnames';
-import * as styles from './TextNavLink.css';
 import { forwardRef } from 'react';
 
+import * as styles from './TextNavLink.css';
+
 type Props = NavLinkProps & { Component?: Taggable<NavLinkProps> } & { underline?: boolean } & Omit<
     TextProps,
     'className'