From 85282593b6cec5ee9ea8b6c93dc44c4c8abc1d35 Mon Sep 17 00:00:00 2001
From: v1rtl <hi@v1rtl.site>
Date: Sat, 30 Nov 2024 03:11:18 +0200
Subject: [PATCH] remove unused code and replace some any with actual types

---
 components/package.json                                    | 2 --
 .../src/components/atoms/FileInput/FileInput.test.tsx      | 2 +-
 components/src/components/molecules/Checkbox/Checkbox.tsx  | 3 +--
 .../components/molecules/CurrencyToggle/CurrencyToggle.tsx | 5 +----
 components/src/components/molecules/Input/Input.tsx        | 2 +-
 .../src/components/molecules/RadioButton/Radio.test.tsx    | 7 ++++---
 .../molecules/RadioButtonGroup/RadioButtonGroup.test.tsx   | 2 +-
 components/src/components/molecules/Select/Select.test.tsx | 3 +--
 .../src/components/molecules/Textarea/Textarea.test.tsx    | 2 +-
 components/src/hooks/useCopied.ts                          | 4 ++--
 components/src/hooks/useDocumentEvent.ts                   | 2 +-
 components/src/utils/debounce.ts                           | 3 ++-
 components/test/utils.ts                                   | 7 ++++---
 docs/src/pages/guides/[slug].tsx                           | 1 +
 14 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/components/package.json b/components/package.json
index f106cc30..537a0a73 100644
--- a/components/package.json
+++ b/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",
diff --git a/components/src/components/atoms/FileInput/FileInput.test.tsx b/components/src/components/atoms/FileInput/FileInput.test.tsx
index dd5f26db..127683a5 100644
--- a/components/src/components/atoms/FileInput/FileInput.test.tsx
+++ b/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 =>
diff --git a/components/src/components/molecules/Checkbox/Checkbox.tsx b/components/src/components/molecules/Checkbox/Checkbox.tsx
index 88d4d290..f01fd67e 100644
--- a/components/src/components/molecules/Checkbox/Checkbox.tsx
+++ b/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) => (
diff --git a/components/src/components/molecules/CurrencyToggle/CurrencyToggle.tsx b/components/src/components/molecules/CurrencyToggle/CurrencyToggle.tsx
index 0ec94159..25f15692 100644
--- a/components/src/components/molecules/CurrencyToggle/CurrencyToggle.tsx
+++ b/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"
diff --git a/components/src/components/molecules/Input/Input.tsx b/components/src/components/molecules/Input/Input.tsx
index fbedd9da..fcb0dc5d 100644
--- a/components/src/components/molecules/Input/Input.tsx
+++ b/components/src/components/molecules/Input/Input.tsx
@@ -161,7 +161,7 @@ const Label = ({
 
 type IconBoxProps = {
   $icon: React.ReactElement
-  $iconWidth?: any
+  $iconWidth?: Space
   $size: Size
 }
 
diff --git a/components/src/components/molecules/RadioButton/Radio.test.tsx b/components/src/components/molecules/RadioButton/Radio.test.tsx
index fa0bdcaf..54002f62 100644
--- a/components/src/components/molecules/RadioButton/Radio.test.tsx
+++ b/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)
diff --git a/components/src/components/molecules/RadioButtonGroup/RadioButtonGroup.test.tsx b/components/src/components/molecules/RadioButtonGroup/RadioButtonGroup.test.tsx
index 38d0b478..2c017621 100644
--- a/components/src/components/molecules/RadioButtonGroup/RadioButtonGroup.test.tsx
+++ b/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(
diff --git a/components/src/components/molecules/Select/Select.test.tsx b/components/src/components/molecules/Select/Select.test.tsx
index 50edc7cf..e9491b1a 100644
--- a/components/src/components/molecules/Select/Select.test.tsx
+++ b/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,
     ])
diff --git a/components/src/components/molecules/Textarea/Textarea.test.tsx b/components/src/components/molecules/Textarea/Textarea.test.tsx
index de6533e3..4971f89a 100644
--- a/components/src/components/molecules/Textarea/Textarea.test.tsx
+++ b/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)
diff --git a/components/src/hooks/useCopied.ts b/components/src/hooks/useCopied.ts
index 567c871c..fe000fa0 100644
--- a/components/src/hooks/useCopied.ts
+++ b/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])
diff --git a/components/src/hooks/useDocumentEvent.ts b/components/src/hooks/useDocumentEvent.ts
index 2a0a9ca1..8238dc50 100644
--- a/components/src/hooks/useDocumentEvent.ts
+++ b/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,
diff --git a/components/src/utils/debounce.ts b/components/src/utils/debounce.ts
index 7579864a..8e2e5f21 100644
--- a/components/src/utils/debounce.ts
+++ b/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,
diff --git a/components/test/utils.ts b/components/test/utils.ts
index 00cd2935..4cd86079 100644
--- a/components/test/utils.ts
+++ b/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)
diff --git a/docs/src/pages/guides/[slug].tsx b/docs/src/pages/guides/[slug].tsx
index 5b71282a..fff6f8a9 100644
--- a/docs/src/pages/guides/[slug].tsx
+++ b/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
 }