refactor: fix eslint errors

.eslintrc.js

@@ -5,6 +5,7 @@ const ERROR = 2
 /* eslint-enable @typescript-eslint/no-unused-vars */
 
 module.exports = {
+  reportUnusedDisableDirectives: true,
   parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaVersion: 2020,
@@ -42,5 +43,7 @@ module.exports = {
     // jsx-ally
     "jsx-a11y/no-onchange": WARN,
     "import/no-anonymous-default-export": OFF,
+    // next
+    "@next/next/no-img-element": OFF,
   },
 }

package.json

@@ -35,6 +35,7 @@
   "devDependencies": {
     "@next/bundle-analyzer": "^13.4.5",
     "@types/react-helmet": "^6.1.6",
+    "@types/react": "^18.3.11",
     "@typescript-eslint/eslint-plugin": "^5.59.11",
     "@typescript-eslint/parser": "^5.59.11",
     "cross-env": "^7.0.3",
@@ -60,7 +61,8 @@
     "dev": "next dev",
     "format": "prettier . --check",
     "format:fix": "prettier . --write",
-    "lint": "next lint --fix",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
     "now-build": "pnpm run build",
     "start": "next start",
     "typecheck": "tsc --noEmit",

src/components/ApiFormState.tsx

@@ -1,12 +1,13 @@
 import { memo } from "react"
+import API from "../data/api"
 import typographyStyles from "../styles/typography.module.css"
 import FormStateTable from "./FormStateTable"
 import TabGroup from "./TabGroup"
 import CodeArea from "./CodeArea"
 import formStateUseEffect from "./codeExamples/formStateUseEffect"
 import formStateUseEffectTs from "./codeExamples/formStateUseEffectTs"
 
-function ApiFormState({ api }: { api: any }) {
+function ApiFormState({ api }: { api: typeof API }) {
   return (
     <>
       <code className={typographyStyles.codeHeading}>

src/components/ApiRefTable.tsx

@@ -1,13 +1,14 @@
 import { useState } from "react"
 import CodeArea from "./CodeArea"
 import generic from "../data/generic"
+import apiData from "../data/api"
 import typographyStyles from "../styles/typography.module.css"
 import tableStyles from "../styles/table.module.css"
 import styles from "./ApiRefTable.module.css"
 import register from "./codeExamples/register"
 import registerTs from "./codeExamples/registerTs"
 
-export default function ApiRefTable({ api }: { api: any }) {
+export default function ApiRefTable({ api }: { api: typeof apiData }) {
   const [isStandard, toggleOption] = useState(true)
 
   return (

src/components/BuilderPage.tsx

@@ -1,3 +1,5 @@
+import { useState, useRef, useEffect, memo, RefObject } from "react"
+import { useRouter } from "next/router"
 import { Animate } from "react-simple-animate"
 import { useForm } from "react-hook-form"
 import SortableContainer from "./SortableContainer"
@@ -16,10 +18,8 @@ import containerStyles from "../styles/container.module.css"
 import typographyStyles from "../styles/typography.module.css"
 import CodeArea from "./CodeArea"
 import ClipBoard from "./ClipBoard"
-import { useState, useRef, useEffect, memo, RefObject } from "react"
 import styles from "./BuilderPage.module.css"
 import { BeekaiBuilderPage } from "./BeekaiBuilderPage"
-import { useRouter } from "next/router"
 
 const errorStyle = {
   border: `1px solid ${colors.secondary}`,
@@ -110,15 +110,15 @@ function BuilderPage({
 
   useEffect(() => {
     setValue("toggle", shouldToggleOn)
-  }, [shouldToggleOn])
+  }, [setValue, shouldToggleOn])
 
   useEffect(() => {
     if (editFormData.type) setValue("type", editFormData.type)
-  }, [editFormData.type])
+  }, [editFormData.type, setValue])
 
   useEffect(() => {
     setValue("required", editFormData.required)
-  }, [editIndex])
+  }, [editFormData.required, editIndex, setValue])
 
   const child = (
     <div className={containerStyles.container}>

src/components/CodeCompareSection.tsx

@@ -2,7 +2,6 @@ import { memo } from "react"
 import reactHookFormCode from "./codeExamples/reactHookFormCode"
 import CodeArea from "./CodeArea"
 import { AnimateGroup, Animate } from "react-simple-animate"
-import colors from "../styles/colors"
 import home from "../data/home"
 import typographyStyles from "../styles/typography.module.css"
 import containerStyles from "../styles/container.module.css"

src/components/DevToolFeaturesList.tsx

@@ -2,6 +2,7 @@ import { memo } from "react"
 import { AnimateGroup, AnimateKeyframes } from "react-simple-animate"
 import home from "../data/home"
 import generic from "../data/generic"
+import type devToolsContent from "../data/devtools"
 import typographyStyles from "../styles/typography.module.css"
 import styles from "./DevToolFeaturesList.module.css"
 import { AnimateKeyframesProps } from "react-simple-animate/dist/types"
@@ -18,16 +19,15 @@ const animationKeyFramesProps: AnimateKeyframesProps = {
 }
 
 interface Props {
-  isPlayFeature: boolean
-  content: any
+  content: typeof devToolsContent
 }
 
-function FeaturesList({ isPlayFeature, content }: Props) {
+const FeaturesList = ({ content }: Props) => {
   return (
     <div className={styles.features}>
       <h2 className={typographyStyles.title}>{generic.features}</h2>
 
-      <AnimateGroup play={isPlayFeature}>
+      <AnimateGroup play>
         <div className={styles.featuresContent}>
           <article>
             <AnimateKeyframes {...animationKeyFramesProps} sequenceIndex={0}>

src/components/DevTools.tsx

@@ -8,6 +8,7 @@ import CodeArea from "./CodeArea"
 import code from "./codeExamples/devTool"
 import copyClipBoard from "./utils/copyClipBoard"
 import generic from "../data/generic"
+import content from "../data/devtools"
 import typographyStyles from "../styles/typography.module.css"
 import containerStyles from "../styles/container.module.css"
 import buttonStyles from "../styles/button.module.css"
@@ -27,11 +28,7 @@ const DevTool = dynamic<DevtoolUIProps>(
   }
 )
 
-interface Props {
-  content: any
-}
-
-export default function DevTools({ content }: Props) {
+export default function DevTools() {
   const methods = useForm({
     mode: "onChange",
   })
@@ -68,7 +65,7 @@ export default function DevTools({ content }: Props) {
           )}
         />
 
-        <DevToolFeaturesList isPlayFeature content={content} />
+        <DevToolFeaturesList content={content} />
 
         <div className={containerStyles.centerContent}>
           <h1 className={typographyStyles.h1}>

src/components/Form.tsx

@@ -29,11 +29,11 @@ function Form({
   methods,
   devTool,
 }: {
-  onSubmit: (data: any) => void
-  submitData: any
+  onSubmit: (data: Record<string, unknown>) => void
+  submitData: Record<string, unknown>
   toggleBuilder: (state: boolean) => void
   formUpdated: boolean
-  methods: UseFormReturn<FieldValues, any, undefined>
+  methods: UseFormReturn<FieldValues, Record<string, unknown>, undefined>
   devTool?: boolean
 }) {
   const { register, handleSubmit, watch, formState, reset } = methods
@@ -138,6 +138,7 @@ function Form({
                     JSON.stringify(
                       Object.entries(errors).reduce(
                         // @ts-expect-error needed for previous
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
                         (previous, [key, { ref, ...rest }]) => {
                           previous[key] = rest
                           return previous

src/components/FormStateApi.tsx

@@ -1,29 +1,12 @@
 import typographyStyles from "../styles/typography.module.css"
 import API from "../data/api"
 import Link from "next/link"
-import { ReactNode } from "react"
 
 export const FormStateApi = ({
   api,
   columnIndent,
 }: {
-  api?: {
-    formState: {
-      isDirty: ReactNode | string
-      dirtyFields: ReactNode | string
-      defaultValues: ReactNode | string
-      touched: ReactNode | string
-      isSubmitted: ReactNode | string
-      isSubmitSuccessful: ReactNode | string
-      isSubmitting: ReactNode | string
-      submitCount: ReactNode | string
-      isValid: ReactNode | string
-      isValidating: ReactNode | string
-      isLoading: ReactNode | string
-      validatingFields: ReactNode | string
-      disabled: ReactNode | string
-    }
-  }
+  api?: Pick<typeof API, "formState">
   columnIndent?: boolean
 }) => (
   <>

src/components/FormStateTable.tsx

@@ -1,9 +1,10 @@
 import generic from "../data/generic"
+import API from "../data/api"
 import typographyStyles from "../styles/typography.module.css"
 import tableStyles from "../styles/table.module.css"
 import { FormStateApi } from "./FormStateApi"
 
-export default function FormStateTable({ api }) {
+export default function FormStateTable({ api }: { api: typeof API }) {
   return (
     <>
       <h2 className={typographyStyles.subTitle} id="return">

src/components/SortableContainer.tsx

@@ -1,5 +1,6 @@
 import Sortable from "react-sortablejs"
 import { Animate } from "react-simple-animate"
+import type { GlobalState } from "little-state-machine"
 import colors from "../styles/colors"
 import generic from "../data/generic"
 import originalFormData from "../state/formData"
@@ -14,7 +15,7 @@ export default function SortableContainer({
   reset,
 }: {
   updateFormData: (data: object) => void
-  formData: any
+  formData: GlobalState["formData"]
   editIndex: number
   setEditIndex: (payload: number) => void
   setFormData: (payload: object) => void

src/components/UseController.tsx

@@ -1,4 +1,3 @@
-import api from "../data/api"
 import typographyStyles from "../styles/typography.module.css"
 import Footer from "./Footer"
 import containerStyles from "../styles/container.module.css"
@@ -21,7 +20,7 @@ export default function UseController() {
 
         <main>
           <section>
-            <UseControllerContent api={api} />
+            <UseControllerContent />
 
             <StarRepo />
           </section>

src/components/UseControllerContent.tsx

@@ -1,5 +1,6 @@
-import CodeArea from "./CodeArea"
+import api from "../data/api"
 import generic from "../data/generic"
+import CodeArea from "./CodeArea"
 import useController from "./codeExamples/useController"
 import useControllerTs from "./codeExamples/useControllerTs"
 import tableStyles from "../styles/table.module.css"
@@ -9,7 +10,7 @@ import TabGroup from "./TabGroup"
 import useControllerCheckboxes from "./codeExamples/useControllerCheckboxes"
 import { SelectNav } from "./selectNav"
 
-export default function UseControllerContent({ api }: { api: any }) {
+export default function UseControllerContent() {
   return (
     <>
       <SelectNav

src/components/UseControllerMethods.tsx

@@ -123,9 +123,9 @@ const UseControllerMethods = ({
             <td>
               <code>name</code>
             </td>
-            <tr>
+            <td>
               <code className={typographyStyles.typeText}>string</code>
-            </tr>
+            </td>
             <td>
               <p>Input's name being registered.</p>
             </td>
@@ -137,9 +137,9 @@ const UseControllerMethods = ({
             <td>
               <code>ref</code>
             </td>
-            <tr>
+            <td>
               <code className={typographyStyles.typeText}>React.Ref</code>
-            </tr>
+            </td>
             <td>
               <p>
                 A ref used to connect hook form to the input. Assign{" "}

src/components/UseFieldArray.tsx

@@ -1,4 +1,3 @@
-import api from "../data/api"
 import typographyStyles from "../styles/typography.module.css"
 import Footer from "./Footer"
 import containerStyles from "../styles/container.module.css"
@@ -19,7 +18,7 @@ export default function UseFieldArray() {
 
         <main>
           <section>
-            <UseFieldArrayContent api={api} />
+            <UseFieldArrayContent />
 
             <StarRepo />
           </section>