remove unused code and replace some any with actual types

components/package.json

@@ -30,8 +30,6 @@
   "scripts": {
     "build": "vite build",
     "build:watch": "vite build --watch --mode development",
-    "lint": "eslint . -c eslint.config.mjs",
-    "lint:fix": "eslint . -c eslint.config.mjs --fix",
     "lint:types": "tsc --noEmit",
     "prepack": "pnpm build",
     "test": "vitest run",

components/src/components/atoms/FileInput/FileInput.test.tsx

@@ -18,7 +18,7 @@ describe('<FileInput />', () => {
   })
 
   it('should pass a ref down', async () => {
-    const ref = { current: null } as React.RefObject<any>
+    const ref = { current: null } as React.RefObject<HTMLDivElement>
     render(
       <FileInput ref={ref}>
         {context =>

components/src/components/molecules/Checkbox/Checkbox.tsx

@@ -58,8 +58,7 @@ Omit<
   | 'width'
 >
 
-// TODO: Fix the SVG type
-const SVG = (props: any) => <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M2 12.625L10.125 20.125L22 3.875" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /></svg>
+const SVG = (props: React.SVGProps<SVGSVGElement>) => <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M2 12.625L10.125 20.125L22 3.875" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /></svg>
 
 const InputBox = React.forwardRef<HTMLElement, BoxProps & { baseColor: Hue, baseTheme: 'Primary' | 'Secondary' }>(
   ({ baseColor, baseTheme, disabled, checked, ...props }, ref) => (

components/src/components/molecules/CurrencyToggle/CurrencyToggle.tsx

@@ -26,10 +26,9 @@ const Container = (props: BoxProps) => (
 )
 
 const Label = ({
-  $type,
   $size,
   ...props
-}: BoxProps & { $size: Size, $type: 'eth' | 'fiat' }) => (
+}: BoxProps & { $size: Size }) => (
   <Box
     {...props}
     alignItems="center"
@@ -111,7 +110,6 @@ export const CurrencyToggle = React.forwardRef<HTMLInputElement, CurrencyToggleP
         <Slider $color={color} $size={size} />
         <Label
           $size={size}
-          $type="eth"
           className={styles.labelEth}
           htmlFor={id}
           id="eth"
@@ -120,7 +118,6 @@ export const CurrencyToggle = React.forwardRef<HTMLInputElement, CurrencyToggleP
         </Label>
         <Label
           $size={size}
-          $type="fiat"
           className={styles.labelFiat}
           htmlFor={id}
           id="fiat"

components/src/components/molecules/Input/Input.tsx

@@ -161,7 +161,7 @@ const Label = ({
 
 type IconBoxProps = {
   $icon: React.ReactElement
-  $iconWidth?: any
+  $iconWidth?: Space
   $size: Size
 }
 

components/src/components/molecules/RadioButton/Radio.test.tsx

@@ -3,16 +3,17 @@ import { useState } from 'react'
 
 import { cleanup, render, screen, userEvent, waitFor } from '@/test'
 
+import type { RadioButtonProps } from './RadioButton'
 import { RadioButton } from './RadioButton'
 
-const RadioWithState = React.forwardRef(({ ...props }: any, ref) => {
+const RadioWithState = React.forwardRef<HTMLInputElement, Omit<RadioButtonProps, 'label' | 'value' | 'name' | 'id'>>((props, ref) => {
   const [checked, setChecked] = useState<boolean>(false)
   return (
     <div>
       hello there
       {checked ? <div>checked</div> : <div>unchecked</div>}
       <RadioButton
-        {...props}
+        {...props as RadioButtonProps}
         id="radio-id"
         label="radio-label"
         ref={ref}
@@ -64,7 +65,7 @@ describe('<Radio />', () => {
   })
 
   it('should pass a ref down', async () => {
-    const ref = { current: null } as React.RefObject<any>
+    const ref = { current: null } as React.RefObject<HTMLInputElement>
     render(<RadioWithState ref={ref} />)
     await waitFor(() => {
       expect(ref.current).toBeInstanceOf(HTMLInputElement)

components/src/components/molecules/RadioButtonGroup/RadioButtonGroup.test.tsx

@@ -87,7 +87,7 @@ describe('<RadioButtonGroup />', () => {
   })
 
   it('should fire onChange when checked value does not match value', () => {
-    const mockCallback = vi.fn((e: any) => {
+    const mockCallback = vi.fn<React.ChangeEventHandler<HTMLInputElement>>((e) => {
       return e.target.value
     })
     render(

components/src/components/molecules/Select/Select.test.tsx

@@ -2,7 +2,6 @@ import * as React from 'react'
 
 import {
   cleanup,
-  getPropertyValue,
   render,
   screen,
   userEvent,
@@ -46,7 +45,7 @@ describe('<Select />', () => {
   })
 
   it('should call onChange when selection made', async () => {
-    const mockCallback = vi.fn((e: any) => [
+    const mockCallback = vi.fn<((e: React.ChangeEvent<HTMLInputElement>) => void)>(e => [
       e.target.value,
       e.currentTarget.value,
     ])

components/src/components/molecules/Textarea/Textarea.test.tsx

@@ -55,7 +55,7 @@ describe('<Textarea />', () => {
   })
 
   it('should pass a ref down', async () => {
-    const ref = { current: null } as React.RefObject<any>
+    const ref = { current: null } as React.RefObject<HTMLTextAreaElement>
     render(<Textarea label="Why are you entering $WRITE Race?" ref={ref} />)
     await waitFor(() => {
       expect(ref.current).toBeInstanceOf(HTMLTextAreaElement)

components/src/hooks/useCopied.ts

@@ -9,9 +9,9 @@ export const useCopied = () => {
   }
 
   useEffect(() => {
-    let timeout: any
+    let timeout: number
     if (copied) {
-      timeout = setTimeout(() => setCopied(false), 1500)
+      timeout = window.setTimeout(() => setCopied(false), 1500)
     }
     return () => clearTimeout(timeout)
   }, [copied])

components/src/hooks/useDocumentEvent.ts

@@ -2,7 +2,7 @@ import type { RefObject } from 'react'
 import { useEffect } from 'react'
 
 export const useDocumentEvent = (
-  ref: RefObject<any>,
+  ref: RefObject<HTMLElement>,
   event: keyof DocumentEventMap,
   _callback: () => void,
   shouldCallback?: boolean,

components/src/utils/debounce.ts

@@ -2,7 +2,8 @@ type DebounceOptions = {
   maxWait?: number
 }
 
-export function debounce<T extends (...args: any[]) => any>(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function debounce<T extends (...args: any[]) => unknown>(
   func: T,
   wait: number,
   options?: DebounceOptions,

components/test/utils.ts

@@ -6,17 +6,17 @@ type DeepPartial<T> = T extends object
     }
   : T
 
-export type PartialMockedFunction<T extends (...args: any) => any> = (
+export type PartialMockedFunction<T extends (...args: unknown[]) => unknown> = (
   ...args: Parameters<T>
 ) => DeepPartial<ReturnType<T>>
 
-export const mockFunction = <T extends (...args: any) => any>(func: T) =>
+export const mockFunction = <T extends (...args: unknown[]) => unknown>(func: T) =>
   func as unknown as MockedFunction<PartialMockedFunction<T>>
 
 export const makeMockIntersectionObserver
   = (
     mockIntersectionObserverCls: MockedFunction<any>,
-    mockObserve: MockedFunction<any>,
+    mockObserve: MockedFunction<(t: Element) => void>,
     mockDisconnect: MockedFunction<any>,
   ) =>
     (intersectTop: boolean, intersectBottom: boolean) => {
@@ -30,6 +30,7 @@ export const makeMockIntersectionObserver
       })
       const els: HTMLElement[] = []
       window.IntersectionObserver = mockIntersectionObserverCls
+
       mockObserve.mockImplementation((el) => {
         if (intersectTop && intersectBottom) {
           els.push(el as HTMLElement)

docs/src/pages/guides/[slug].tsx

@@ -29,6 +29,7 @@ export const getStaticPaths: GetStaticPaths = async () => ({
 
 type StaticProps = {
   docsLink: string
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   frontMatter: Record<string, any>
   source: MDXRemoteSerializeResult
 }