refactor: fix eslint errors

Author: marcalexiei

.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",

pnpm-lock.yaml

@@ -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/ApiFormState.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/ApiRefTable.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/BuilderPage.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/CodeCompareSection.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/DevToolFeaturesList.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/DevTools.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