From 4e75c39039385685f5c86ba8470d2f0a98f488bd Mon Sep 17 00:00:00 2001
From: Marco Pasqualetti <marco.pasqualetti@live.com>
Date: Mon, 23 Dec 2024 08:53:15 +0100
Subject: [PATCH 1/2] refactor: enable `recommendedTypeChecked` rules

---
 contentlayer.config.ts                | 16 ++++++++--
 eslint.config.mjs                     | 25 ++++++++++++++--
 src/components/Admonition.tsx         |  2 +-
 src/components/ApiGallery.tsx         |  4 ++-
 src/components/ApiRefTable.tsx        |  8 +++--
 src/components/BuilderPage.tsx        | 19 +++++++-----
 src/components/ClipBoard.tsx          |  4 ++-
 src/components/CodeArea.tsx           | 27 +++++++++++------
 src/components/CodeCompareSection.tsx |  6 ++--
 src/components/DevTools.tsx           | 11 +++++--
 src/components/Form.tsx               |  5 ++--
 src/components/FormFields.tsx         | 10 +++----
 src/components/Menu/Menu.tsx          |  4 +--
 src/components/Nav.tsx                | 24 ++++++++-------
 src/components/Popup.tsx              | 15 +++++++---
 src/components/ResourceList.tsx       | 12 ++++++--
 src/components/Search.tsx             | 15 ++++++----
 src/components/TabGroup.tsx           |  4 ++-
 src/components/Watcher.tsx            | 18 +++++++----
 src/components/general-observer.tsx   |  8 +++--
 src/components/layout.tsx             | 10 ++++---
 src/components/logic/generateCode.ts  | 11 ++-----
 src/components/mdx/code.tsx           | 23 ++++----------
 src/components/mdx/pre.tsx            |  6 ++--
 src/components/mdx/theme.ts           |  2 +-
 src/components/mdx/youtube.tsx        | 43 +++++++--------------------
 src/components/utils/copyClipBoard.ts |  3 +-
 src/components/utils/useWindowSize.ts |  4 ++-
 src/content/docs/useform.mdx          |  3 +-
 src/pages/[...slug].tsx               |  5 ++--
 src/pages/_app.tsx                    | 16 +++++-----
 tsconfig.json                         |  6 +++-
 32 files changed, 210 insertions(+), 159 deletions(-)

diff --git a/contentlayer.config.ts b/contentlayer.config.ts
index 1c3a39456..3958c85a1 100644
--- a/contentlayer.config.ts
+++ b/contentlayer.config.ts
@@ -4,6 +4,7 @@ import remarkGfm from "remark-gfm"
 import rehypeMdxCodeProps from "rehype-mdx-code-props"
 import emoji from "remark-emoji"
 import * as sidebar from "./src/components/Menu/MenuLinks"
+import type { Pages } from "./src/types/types"
 
 export const Doc = defineDocumentType(() => ({
   name: "Doc",
@@ -33,13 +34,22 @@ export const Doc = defineDocumentType(() => ({
       type: "string",
       resolve: (doc) => doc._raw.flattenedPath.split("/").slice(1).join("/"),
     },
+
+    /**
+     * Can't define value different from primitives, so hardcoding the correct type
+     * @see https://github.com/contentlayerdev/contentlayer/issues/149
+     */
     segment: {
-      type: "list",
+      type: "string[]" as "list",
       resolve: (doc) => doc._raw.flattenedPath.split("/"),
     },
     pages: {
-      type: "list",
-      resolve: (doc) => sidebar[doc.sidebar] ?? [],
+      type: "json",
+      resolve: (doc) => {
+        // added explicit type casting to keep track of this data structure
+        // in case in the future contentlayer will support values different than primitives
+        return sidebar[doc.sidebar] as unknown as Pages
+      },
     },
   },
 }))
diff --git a/eslint.config.mjs b/eslint.config.mjs
index d4767491e..d56f1e8fd 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -9,7 +9,8 @@ const compat = new FlatCompat({
 })
 
 export default tseslint.config(
-  tseslint.configs.recommended,
+  tseslint.configs.recommendedTypeChecked,
+
   ...compat.config({
     extends: ["next"],
     rules: {
@@ -30,17 +31,37 @@ export default tseslint.config(
       "@next/next/no-img-element": "off",
     },
   }),
+
   // @ts-expect-error eslintPluginReact.configs.flat, but runtime is always defined
   eslintPluginReact.configs.flat["jsx-runtime"],
+
   {
     linterOptions: {
       reportUnusedDisableDirectives: "error",
     },
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
     rules: {
       // typescript
       "@typescript-eslint/explicit-function-return-type": "off",
-      "@typescript-eslint/interface-name-prefix": "off",
       "@typescript-eslint/explicit-module-boundary-types": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/no-floating-promises": "off",
+      "@typescript-eslint/restrict-template-expressions": [
+        "error",
+        {
+          allowAny: false,
+          allowBoolean: false,
+          allowNever: false,
+          allowNullish: false,
+          allowNumber: true,
+          allowRegExp: false,
+        },
+      ],
     },
   }
 )
diff --git a/src/components/Admonition.tsx b/src/components/Admonition.tsx
index b1ad3b1ae..b6921b309 100644
--- a/src/components/Admonition.tsx
+++ b/src/components/Admonition.tsx
@@ -109,7 +109,7 @@ export const Admonition = ({
   children,
 }: {
   type: AdmonitionType
-  title: string
+  title?: string
   children: ReactNode
 }) => {
   return (
diff --git a/src/components/ApiGallery.tsx b/src/components/ApiGallery.tsx
index d4e2623fc..24fccbb7e 100644
--- a/src/components/ApiGallery.tsx
+++ b/src/components/ApiGallery.tsx
@@ -12,7 +12,9 @@ export default function ApiGallery() {
   const router = useRouter()
 
   const onChange: MouseEventHandler<HTMLButtonElement> = (e) => {
-    const version = parseInt((e.target as HTMLElement).getAttribute("value")!)
+    const version = parseInt(
+      (e.target as HTMLElement).getAttribute("value") as string
+    )
 
     if (version !== 7) {
       router.push(`https://legacy.react-hook-form.com/v${version}/api`)
diff --git a/src/components/ApiRefTable.tsx b/src/components/ApiRefTable.tsx
index 076b14b0d..4fc0897f4 100644
--- a/src/components/ApiRefTable.tsx
+++ b/src/components/ApiRefTable.tsx
@@ -86,7 +86,9 @@ export default function ApiRefTable({ api }: { api: typeof apiData }) {
         <legend>{api.register.options.title}</legend>
         <label>
           <input
-            onChange={() => toggleOption(true)}
+            onChange={() => {
+              toggleOption(true)
+            }}
             type="radio"
             name="errorMessage"
             defaultChecked
@@ -95,7 +97,9 @@ export default function ApiRefTable({ api }: { api: typeof apiData }) {
         </label>
         <label>
           <input
-            onChange={() => toggleOption(false)}
+            onChange={() => {
+              toggleOption(false)
+            }}
             type="radio"
             name="errorMessage"
           />
diff --git a/src/components/BuilderPage.tsx b/src/components/BuilderPage.tsx
index 981472643..e45786e99 100644
--- a/src/components/BuilderPage.tsx
+++ b/src/components/BuilderPage.tsx
@@ -57,7 +57,7 @@ function BuilderPage({
     state: { formData = [] },
     actions: { updateFormData },
   } = useStateMachine({
-    updateFormData: (state, payload) => {
+    updateFormData: (state, payload: GlobalState["formData"]) => {
       return {
         ...state,
         formData: [...payload],
@@ -81,7 +81,7 @@ function BuilderPage({
       setEditFormData(defaultValue)
       setEditIndex(-1)
     } else {
-      updateFormData([...formData, ...[data]])
+      updateFormData([...formData, data as FormDataItem])
     }
     reset()
   }
@@ -153,7 +153,7 @@ function BuilderPage({
             reset={reset}
           />
         </section>
-
+        {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
         <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
           <h2 className={typographyStyles.title} ref={form}>
             {builder.inputCreator.title}
@@ -255,7 +255,9 @@ function BuilderPage({
             <input
               type="checkbox"
               {...register("toggle", { required: false })}
-              onClick={() => toggleValidation(!showValidation)}
+              onClick={() => {
+                toggleValidation(!showValidation)
+              }}
             />
             {builder.inputCreator.validation}
           </label>
@@ -325,7 +327,7 @@ function BuilderPage({
           <button
             className={buttonStyles.pinkButton}
             onClick={() => {
-              form?.current?.scrollIntoView({ behavior: "smooth" })
+              form.current?.scrollIntoView({ behavior: "smooth" })
             }}
           >
             {editIndex >= 0 ? generic.update : generic.create}
@@ -345,7 +347,7 @@ function BuilderPage({
           )}
 
           <Animate
-            play={(formData || []).length > 0}
+            play={formData.length > 0}
             start={{
               opacity: 0,
               pointerEvents: "none",
@@ -374,7 +376,6 @@ function BuilderPage({
             )}
           />
         </form>
-
         <section
           style={{
             paddingRight: "20px",
@@ -395,7 +396,9 @@ function BuilderPage({
           >
             <div className={styles.buttonWrapper}>
               <ClipBoard
-                onClick={() => copyClipBoard(generateCode(formData))}
+                onClick={() => {
+                  copyClipBoard(generateCode(formData))
+                }}
                 className={`${styles.button} ${styles.copyButton}`}
               />
             </div>
diff --git a/src/components/ClipBoard.tsx b/src/components/ClipBoard.tsx
index 1144e357d..8f783b8e0 100644
--- a/src/components/ClipBoard.tsx
+++ b/src/components/ClipBoard.tsx
@@ -19,7 +19,9 @@ const ClipBoard = ({
       setCopiedCode(false)
     }, 3000)
 
-    return () => clearTimeout(timerId)
+    return () => {
+      clearTimeout(timerId)
+    }
   }, [copiedCode])
 
   return (
diff --git a/src/components/CodeArea.tsx b/src/components/CodeArea.tsx
index 1e713fa62..16ab32e83 100644
--- a/src/components/CodeArea.tsx
+++ b/src/components/CodeArea.tsx
@@ -30,11 +30,12 @@ export default function CodeArea({
 }) {
   const [currentType, setType] = useState<
     (typeof ToggleTypes)[keyof typeof ToggleTypes]
-  >(
-    (rawData && ToggleTypes.js) ||
-      (tsRawData && ToggleTypes.ts) ||
-      ToggleTypes.types
-  )
+  >(() => {
+    if (rawData) return ToggleTypes.js
+    if (tsRawData) return ToggleTypes.ts
+    return ToggleTypes.types
+  })
+
   const codeAreaRef = useRef<HTMLDivElement | null>(null)
 
   return (
@@ -46,7 +47,9 @@ export default function CodeArea({
       <div className={styles.buttonWrapper}>
         {((rawData && tsRawData) || (rawData && rawTypes)) && (
           <button
-            onClick={() => setType(ToggleTypes.js)}
+            onClick={() => {
+              setType(ToggleTypes.js)
+            }}
             className={`${styles.button} ${styles.codeLink} ${
               currentType === ToggleTypes.js ? styles.active : ""
             }`}
@@ -56,7 +59,9 @@ export default function CodeArea({
         )}
         {((tsRawData && rawData) || (tsRawData && rawTypes)) && (
           <button
-            onClick={() => setType(ToggleTypes.ts)}
+            onClick={() => {
+              setType(ToggleTypes.ts)
+            }}
             className={`${styles.button} ${styles.codeLink} ${
               currentType === ToggleTypes.ts ? styles.active : ""
             }`}
@@ -66,7 +71,9 @@ export default function CodeArea({
         )}
         {((rawTypes && rawData) || (rawTypes && tsRawData)) && (
           <button
-            onClick={() => setType(ToggleTypes.types)}
+            onClick={() => {
+              setType(ToggleTypes.types)
+            }}
             className={`${styles.button} ${styles.codeLink} ${
               currentType === ToggleTypes.types ? styles.active : ""
             }`}
@@ -77,7 +84,9 @@ export default function CodeArea({
         {!withOutCopy && (
           <ClipBoard
             className={`${styles.button} ${styles.copyButton}`}
-            onClick={() => copyClipBoard(codeAreaRef.current?.innerText || "")}
+            onClick={() => {
+              copyClipBoard(codeAreaRef.current?.innerText || "")
+            }}
           />
         )}
 
diff --git a/src/components/CodeCompareSection.tsx b/src/components/CodeCompareSection.tsx
index e2a10c8d2..4ea29423a 100644
--- a/src/components/CodeCompareSection.tsx
+++ b/src/components/CodeCompareSection.tsx
@@ -47,10 +47,8 @@ function CodeCompareSection({
                 borderRadius: 4,
                 overflow: "hidden",
                 transition: "0.3s all 0.5s",
-                opacity: isPlayCodeCompare ? 1 : 0,
-                transform: isPlayCodeCompare
-                  ? "translateY(0)"
-                  : "translateY(100px)",
+                opacity: 1,
+                transform: "translateY(0)",
               }}
               title="React Hook Form codesandbox demo"
               allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
diff --git a/src/components/DevTools.tsx b/src/components/DevTools.tsx
index 1b9aac681..8dea93f3c 100644
--- a/src/components/DevTools.tsx
+++ b/src/components/DevTools.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react"
+import type React from "react"
 import { useForm } from "react-hook-form"
 import { Animate } from "react-simple-animate"
 import Form from "./Form"
@@ -22,7 +23,7 @@ const DevTool = dynamic<DevtoolUIProps>(
   () =>
     // @ts-expect-error no types are available
     import("@hookform/devtools/dist/index.cjs.development").then(
-      (mod) => mod.DevTool
+      (mod) => (mod as { DevTool: React.ElementType<DevtoolUIProps> }).DevTool
     ),
   {
     ssr: false,
@@ -38,7 +39,9 @@ export default function DevTools() {
 
   const { control } = methods
 
-  const onSubmit = (data: unknown) => console.log(data)
+  const onSubmit = (data: unknown) => {
+    console.log(data)
+  }
 
   return (
     <div className={containerStyles.container}>
@@ -81,7 +84,9 @@ export default function DevTools() {
             npm install -D @hookform/devtools
             <ClipBoard
               className={getStartedStyle.copyButton}
-              onClick={() => copyClipBoard("npm install -D @hookform/devtools")}
+              onClick={() => {
+                copyClipBoard("npm install -D @hookform/devtools")
+              }}
             />
           </pre>
 
diff --git a/src/components/Form.tsx b/src/components/Form.tsx
index c00078131..455d2485d 100644
--- a/src/components/Form.tsx
+++ b/src/components/Form.tsx
@@ -33,12 +33,12 @@ function Form({
   submitData: Record<string, unknown>
   toggleBuilder: (state: boolean) => void
   formUpdated: boolean
-  methods: UseFormReturn<FieldValues, Record<string, unknown>, undefined>
+  methods: UseFormReturn<FieldValues, Record<string, unknown>>
   devTool?: boolean
 }) {
   const { register, handleSubmit, watch, formState, reset } = methods
 
-  const touched = Object.keys(formState.touchedFields || {})
+  const touched = Object.keys(formState.touchedFields)
   const {
     state: { formData },
   } = useStateMachine()
@@ -71,6 +71,7 @@ function Form({
       )}
 
       <div className={styles.wrapper}>
+        {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
         <form className={styles.demoForm} onSubmit={handleSubmit(onSubmit)}>
           <h2 className={typographyStyles.title} style={{ marginTop: 40 }}>
             Example
diff --git a/src/components/FormFields.tsx b/src/components/FormFields.tsx
index 2f911fd8c..846dd6bbe 100644
--- a/src/components/FormFields.tsx
+++ b/src/components/FormFields.tsx
@@ -28,12 +28,12 @@ const FormFields = ({
   errors: FieldErrors
   register: UseFormRegister<Record<string, unknown>>
 }) => {
-  return (formData || []).map((field, i) => {
+  return formData.map((field, i) => {
     switch (field.type) {
       case "select":
         return (
           <select
-            key={field.name + i}
+            key={`${field.name}${i}`}
             aria-label={field.name}
             {...register(field.name, { required: field.required })}
             style={{
@@ -58,7 +58,7 @@ const FormFields = ({
       case "textarea":
         return (
           <textarea
-            key={field.name + i}
+            key={`${field.name}${i}`}
             aria-label={field.name}
             placeholder={field.name}
             {...register(field.name, {
@@ -75,7 +75,7 @@ const FormFields = ({
       case "radio":
         return (
           <div
-            key={field.name + i}
+            key={`${field.name}${i}`}
             className={styles.radioGroup}
             style={{ marginBottom: 20 }}
             aria-label={field.name}
@@ -109,7 +109,7 @@ const FormFields = ({
       default:
         return (
           <input
-            key={field.name + i}
+            key={`${field.name}${i}`}
             style={{
               marginBottom: 20,
               ...(errors[field.name] ? errorStyle : null),
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index fa19dbf8a..2b0b55be8 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -33,7 +33,7 @@ function Menu({ pages = [] }: { pages: Pages }) {
                 key={page.pathname}
                 className={styles.menuItem}
                 style={{
-                  display: page?.pages ? "block" : "flex",
+                  display: page.pages ? "block" : "flex",
                 }}
               >
                 <code aria-hidden className={styles.code}>{`</>`}</code>
@@ -44,7 +44,7 @@ function Menu({ pages = [] }: { pages: Pages }) {
                   {page.name}
                 </Link>
 
-                {page?.pages && (
+                {page.pages && (
                   <ul>
                     {page.pages.map((page) => {
                       const isActive = pathname === page.pathname
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 608e6dd01..1880d7f8c 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -1,16 +1,16 @@
 import { useState, useEffect } from "react"
 import Link from "next/link"
+import { useRouter } from "next/router"
 import GitHubButton from "react-github-btn"
+import { Animate } from "react-simple-animate"
+import clsx from "clsx"
 import nav from "../data/nav"
+import colors from "../styles/colors"
+import { LARGE_SCREEN } from "../styles/breakpoints"
 import Toggle from "./Toggle"
-import { Animate } from "react-simple-animate"
 import Search from "./Search"
 import styles from "./Nav.module.css"
-import colors from "../styles/colors"
 import useWindowSize from "./utils/useWindowSize"
-import { LARGE_SCREEN } from "../styles/breakpoints"
-import { useRouter } from "next/router"
-import clsx from "clsx"
 
 export default function Nav() {
   const [isFocusOnSearch, setIsFocusOnSearch] = useState(false)
@@ -26,13 +26,15 @@ export default function Nav() {
   useEffect(() => {
     if (LARGE_SCREEN <= width) {
       setLang(true)
-    } else {
-      if (isFocusOnSearch) {
-        setLang(false)
-      } else if (!isFocusOnSearch) {
-        setLang(true)
-      }
+      return
     }
+
+    if (isFocusOnSearch) {
+      setLang(false)
+      return
+    }
+
+    setLang(true)
   }, [isFocusOnSearch, width])
 
   useEffect(() => {
diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx
index fad9fd221..146dfa55a 100644
--- a/src/components/Popup.tsx
+++ b/src/components/Popup.tsx
@@ -13,11 +13,18 @@ function Popup({
 }) {
   const [tipShow, setTipShow] = useState(false)
 
-  return iconOnly ? (
-    <span className={styles.icon}>!</span>
-  ) : (
+  if (iconOnly) {
+    return <span className={styles.icon}>!</span>
+  }
+
+  return (
     <span className={styles.root}>
-      <button className={styles.button} onClick={() => setTipShow(!tipShow)}>
+      <button
+        className={styles.button}
+        onClick={() => {
+          setTipShow(!tipShow)
+        }}
+      >
         !
       </button>
       <span>
diff --git a/src/components/ResourceList.tsx b/src/components/ResourceList.tsx
index 3acae4f0a..a7a1e77c1 100644
--- a/src/components/ResourceList.tsx
+++ b/src/components/ResourceList.tsx
@@ -4,7 +4,7 @@ import headerStyles from "./Header.module.css"
 import styles from "./ResourcePage.module.css"
 import typographyStyles from "../styles/typography.module.css"
 
-type Resource = {
+interface Resource {
   title: string
   description?: string
   version?: string
@@ -13,6 +13,10 @@ type Resource = {
   authorUrl?: string
 }
 
+interface ResourceListFormData {
+  filterResources: string
+}
+
 export default function ResourceList({
   title,
   resources,
@@ -20,7 +24,9 @@ export default function ResourceList({
   title: string
   resources: Resource[]
 }) {
-  const { register, watch } = useForm({ mode: "onChange" })
+  const { register, watch } = useForm<ResourceListFormData>({
+    mode: "onChange",
+  })
   const [layout, setLayout] = useState("grid")
 
   const isGridLayout = layout === "grid"
@@ -29,7 +35,7 @@ export default function ResourceList({
     const { title, author, description, version } = cur
     // case insensitive filter
     if (
-      `${title} ${author} ${description} v${version}`.match(
+      `${title} ${author ?? ""} ${description ?? ""} ${version ? `v${version}` : ""}`.match(
         new RegExp(watch("filterResources"), "i")
       )
     ) {
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 6fd3dabef..753c9409a 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -1,4 +1,5 @@
 import { useRef, useEffect } from "react"
+import clsx from "clsx"
 import searchStyles from "./Search.module.css"
 import useWindowSize from "./utils/useWindowSize"
 import { LARGE_SCREEN } from "../styles/breakpoints"
@@ -11,10 +12,10 @@ const Search = ({
   setFocus: (value: boolean) => void
 }) => {
   const { width } = useWindowSize()
-  const searchRef = useRef<HTMLInputElement>(null)
+  const searchRef = useRef<HTMLInputElement | null>(null)
 
   useEffect(() => {
-    window?.docsearch?.({
+    window.docsearch?.({
       appId: "Z2CKVVT2QA",
       apiKey: "c56a3f265ffbf85c2c654f865cb09164",
       indexName: "react-hook-form",
@@ -39,16 +40,18 @@ const Search = ({
     <>
       <form className={searchStyles.searchForm}>
         <input
-          className={`${searchStyles.searchBar} ${
-            focus ? searchStyles.searchBarOpen : null
-          }`}
+          className={clsx(searchStyles.searchBar, {
+            [searchStyles.searchBarOpen]: focus,
+          })}
           spellCheck="false"
           type="search"
           placeholder="Search..."
           aria-label="search input"
           id="algolia-doc-search"
           ref={searchRef}
-          onFocus={() => setFocus(true)}
+          onFocus={() => {
+            setFocus(true)
+          }}
           onBlur={() => {
             if (LARGE_SCREEN > width) {
               setFocus(false)
diff --git a/src/components/TabGroup.tsx b/src/components/TabGroup.tsx
index 159c89bc6..7f322e1ba 100644
--- a/src/components/TabGroup.tsx
+++ b/src/components/TabGroup.tsx
@@ -24,7 +24,9 @@ const TabGroup = ({
               ...(currentIndex === index ? { cursor: "default" } : {}),
             }}
             disabled={currentIndex === index}
-            onClick={() => setIndex(currentIndex)}
+            onClick={() => {
+              setIndex(currentIndex)
+            }}
           >
             {label}
           </button>
diff --git a/src/components/Watcher.tsx b/src/components/Watcher.tsx
index 8bec409ac..d0f5196ae 100644
--- a/src/components/Watcher.tsx
+++ b/src/components/Watcher.tsx
@@ -7,14 +7,16 @@ import typographyStyles from "../styles/typography.module.css"
 import styles from "./Watcher.module.css"
 import home from "../data/home"
 
+type WatchFormData = { test: string }
+
 const WatchText = ({
   control,
   checked,
 }: {
-  control: Control
+  control: Control<WatchFormData>
   checked?: boolean
 }) => {
-  const test = useWatch({
+  const test = useWatch<WatchFormData>({
     control,
     name: "test",
     defaultValue: "",
@@ -40,7 +42,7 @@ const WatchGroup = ({
   control,
 }: {
   checked?: boolean
-  control: Control
+  control: Control<WatchFormData>
 }) => {
   const [check, setChecked] = useState(checked)
   return (
@@ -48,7 +50,9 @@ const WatchGroup = ({
       <input
         type="checkbox"
         checked={check}
-        onChange={() => setChecked(!check)}
+        onChange={() => {
+          setChecked(!check)
+        }}
       />
       <WatchText control={control} checked={check} />
     </div>
@@ -56,7 +60,7 @@ const WatchGroup = ({
 }
 
 const Watcher = ({ isPlayWatch }: { isPlayWatch: boolean }) => {
-  const { register, control, setValue } = useForm()
+  const { register, setValue, control } = useForm<WatchFormData>()
 
   useEffect(() => {
     if (!isPlayWatch) {
@@ -93,7 +97,9 @@ const Watcher = ({ isPlayWatch }: { isPlayWatch: boolean }) => {
       i++
     }, 200)
 
-    return () => clearTimeout(timer)
+    return () => {
+      clearTimeout(timer)
+    }
   }, [setValue, isPlayWatch])
 
   return (
diff --git a/src/components/general-observer.tsx b/src/components/general-observer.tsx
index f1c3d64f6..2b2cc2893 100644
--- a/src/components/general-observer.tsx
+++ b/src/components/general-observer.tsx
@@ -20,7 +20,7 @@ export const GeneralObserver: FunctionComponent<IGeneralObserverProps> = ({
   onEnter,
   placeholder,
 }) => {
-  const ref = useRef<HTMLElement>(null)
+  const ref = useRef<HTMLElement | null>(null)
   const [isChildVisible, setIsChildVisible] = useState(false)
 
   useEffect(() => {
@@ -36,11 +36,13 @@ export const GeneralObserver: FunctionComponent<IGeneralObserverProps> = ({
         threshold: [1],
       }
     )
-    if (ref && ref.current) {
+    if (ref.current) {
       observer.observe(ref.current)
     }
 
-    return () => observer.disconnect()
+    return () => {
+      observer.disconnect()
+    }
   }, [ref, onEnter])
 
   let slot = children
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index a2fadac40..780199e99 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -16,12 +16,14 @@ const Layout = ({ children }: { children: ReactNode }) => {
       setShow(false)
     }
   }
-  const editLink = getEditLink(location?.pathname)
+  const editLink = getEditLink(location.pathname)
 
   useEffect(() => {
     window.addEventListener("scroll", scrollHandler)
 
-    return () => window.removeEventListener("scroll", scrollHandler)
+    return () => {
+      window.removeEventListener("scroll", scrollHandler)
+    }
   }, [])
 
   return (
@@ -63,13 +65,13 @@ const Layout = ({ children }: { children: ReactNode }) => {
         <button
           className="scrollToTop"
           aria-label="Scroll back to top"
-          onClick={() =>
+          onClick={() => {
             window.scrollTo({
               top: 0,
               left: 0,
               behavior: "smooth",
             })
-          }
+          }}
         >
           ▲
         </button>
diff --git a/src/components/logic/generateCode.ts b/src/components/logic/generateCode.ts
index f97389f86..7040708fa 100644
--- a/src/components/logic/generateCode.ts
+++ b/src/components/logic/generateCode.ts
@@ -36,12 +36,7 @@ ${
             minLength,
             pattern,
           ].some((value) => {
-            const isBooleanValue = typeof value === "boolean"
-
-            if (isBooleanValue) {
-              return value !== undefined
-            }
-
+            if (typeof value === "boolean") return value
             return Boolean(value)
           })
           const ref = `{...register${
@@ -68,9 +63,7 @@ ${
               .reduce((temp, option) => {
                 return (
                   temp +
-                  `      <input ${ref} type="${
-                    type || "text"
-                  }" value="${option}" />\n`
+                  `      <input ${ref} type="${type}" value="${option}" />\n`
                 )
               }, "")}`
 
diff --git a/src/components/mdx/code.tsx b/src/components/mdx/code.tsx
index 1a9b65dde..3531631a0 100644
--- a/src/components/mdx/code.tsx
+++ b/src/components/mdx/code.tsx
@@ -1,27 +1,16 @@
-import { useEffect, useState } from "react"
+import { useMemo } from "react"
 import type { ReactNode } from "react"
 import { Highlight } from "prism-react-renderer"
 import { useTheme } from "next-themes"
-import { theme, lightTheme } from "./theme"
-
-const prism = {
-  dark: theme,
-  light: lightTheme,
-}
+import { darkTheme, lightTheme } from "./theme"
 
 function usePrismTheme() {
   const { theme } = useTheme()
-  const lightModeTheme = prism.light
-  const darkModeTheme = prism.dark || lightModeTheme
-  const prismTheme = theme === "light" ? lightModeTheme : darkModeTheme
-
-  const [finalTheme, setFinalTheme] = useState(prismTheme)
-
-  useEffect(() => {
-    setFinalTheme(prismTheme)
-  }, [prismTheme])
 
-  return finalTheme
+  return useMemo(() => {
+    if (theme === "light") return lightTheme
+    return darkTheme
+  }, [theme])
 }
 
 export const PrismSyntaxHighlight = ({
diff --git a/src/components/mdx/pre.tsx b/src/components/mdx/pre.tsx
index c2b283597..5c084c89c 100644
--- a/src/components/mdx/pre.tsx
+++ b/src/components/mdx/pre.tsx
@@ -12,10 +12,10 @@ export const Pre = (
     expo?: boolean
   }
 ) => {
-  const preRef = useRef<HTMLDivElement>(null)
+  const preRef = useRef<HTMLDivElement | null>(null)
 
-  const language = isValidElement<{ className?: string }>(props?.children)
-    ? props.children.props?.className?.replace(/language-/gm, "") || ""
+  const language = isValidElement<{ className?: string }>(props.children)
+    ? props.children.props.className?.replace(/language-/gm, "") || ""
     : ""
 
   const isJs = language === "javascript"
diff --git a/src/components/mdx/theme.ts b/src/components/mdx/theme.ts
index 15d5c1690..0d8afdd64 100644
--- a/src/components/mdx/theme.ts
+++ b/src/components/mdx/theme.ts
@@ -1,6 +1,6 @@
 import type { PrismTheme } from "prism-react-renderer"
 
-export const theme: PrismTheme = {
+export const darkTheme: PrismTheme = {
   plain: {
     backgroundColor: "var(--color-purple)",
     color: "#f8f8f2",
diff --git a/src/components/mdx/youtube.tsx b/src/components/mdx/youtube.tsx
index eb97b31c3..44bbfd651 100644
--- a/src/components/mdx/youtube.tsx
+++ b/src/components/mdx/youtube.tsx
@@ -2,54 +2,33 @@ import { FunctionComponent } from "react"
 
 import { GeneralObserver } from "../general-observer"
 
-export interface IYouTubeProps {
+interface YouTubeProps {
   /** YouTube id */
-  youTubeId?: string
-  /** YouTube Playlist id */
-  youTubePlaylistId?: string
-  /** Aspect ratio of YouTube video */
-  aspectRatio?: "1:1" | "16:9" | "4:3" | "3:2" | "8:5"
-  /** Skip to a time in the video */
-  skipTo?: {
-    h: number
-    m: number
-    s: number
-  }
+  youTubeId: string
+
   /** Auto play the video */
   autoPlay?: boolean
+
   /** No Cookie option */
   noCookie?: boolean
 }
 
-export const YouTube: FunctionComponent<IYouTubeProps> = ({
-  youTubeId,
-  youTubePlaylistId,
-  autoPlay = false,
-  skipTo = { h: 0, m: 0, s: 0 },
-  noCookie = false,
-}: IYouTubeProps) => {
-  const { h, m, s } = skipTo
-
-  const tH = h * 60
-  const tM = m * 60
-
-  const startTime = tH + tM + s
+export const YouTube: FunctionComponent<YouTubeProps> = (
+  props: YouTubeProps
+) => {
+  const { youTubeId, autoPlay = false, noCookie = false } = props
 
   const provider = noCookie
     ? "https://www.youtube-nocookie.com"
     : "https://www.youtube.com"
-  const baseUrl = `${provider}/embed/`
-  const src = `${baseUrl}${
-    youTubeId
-      ? `${youTubeId}?&autoplay=${autoPlay}&start=${startTime}`
-      : `&videoseries?list=${youTubePlaylistId}`
-  }`
+
+  const src = `${provider}/embed/${youTubeId}?&autoplay=${autoPlay.toString()}`
 
   return (
     <GeneralObserver>
       <iframe
         data-testid="youtube"
-        title={`youTube-${youTubeId ? youTubeId : youTubePlaylistId}`}
+        title={`youTube-${youTubeId}`}
         src={src}
         frameBorder="0"
         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
diff --git a/src/components/utils/copyClipBoard.ts b/src/components/utils/copyClipBoard.ts
index d69fc46b4..7b83ef383 100644
--- a/src/components/utils/copyClipBoard.ts
+++ b/src/components/utils/copyClipBoard.ts
@@ -12,13 +12,14 @@ export default function copyToClipboard(text: string) {
 
         textarea.value = text
         textarea.select()
+
         document.execCommand("copy")
 
         body?.removeChild(textarea)
 
         resolve(0)
       } catch (e) {
-        reject(e)
+        reject(e as Error)
       }
     }
   })
diff --git a/src/components/utils/useWindowSize.ts b/src/components/utils/useWindowSize.ts
index da668c179..1b7976fb3 100644
--- a/src/components/utils/useWindowSize.ts
+++ b/src/components/utils/useWindowSize.ts
@@ -21,7 +21,9 @@ export default function useWindowSize(): Size {
 
     window.addEventListener("resize", handleResize)
 
-    return () => window.removeEventListener("resize", handleResize)
+    return () => {
+      window.removeEventListener("resize", handleResize)
+    }
   }, [])
 
   return windowSize
diff --git a/src/content/docs/useform.mdx b/src/content/docs/useform.mdx
index 9a3b436b3..2328aa3d7 100644
--- a/src/content/docs/useform.mdx
+++ b/src/content/docs/useform.mdx
@@ -739,10 +739,9 @@ useEffect(() => {
 
 <Admonition type="tip" >
 
-The recommended way is to pass destructure the required methods and add them to the dependencies of an `useEffect`
+The recommended way is to pass destructured methods to the dependencies of an `useEffect`
 
 ```javascript
-
 const { reset } = useForm()
 
 useEffect(() => {
diff --git a/src/pages/[...slug].tsx b/src/pages/[...slug].tsx
index 9ef4423c2..0351f8e50 100644
--- a/src/pages/[...slug].tsx
+++ b/src/pages/[...slug].tsx
@@ -9,8 +9,9 @@ import StarRepo from "@/components/StarRepo"
 import containerStyles from "@/styles/container.module.css"
 import typographyStyles from "@/styles/typography.module.css"
 import Menu from "@/components/Menu/Menu"
+import { Pages } from "@/types/types"
 
-export const getStaticPaths: GetStaticPaths = async () => {
+export const getStaticPaths: GetStaticPaths = () => {
   // Get a list of valid doc paths.
   const paths = allDocs.map((doc) => ({
     params: { slug: doc.segment },
@@ -55,7 +56,7 @@ export default function Page({
         <p className={typographyStyles.subHeading}>{doc.description}</p>
 
         <div className={containerStyles.wrapper}>
-          <Menu pages={doc.pages} />
+          <Menu pages={doc.pages as Pages} />
 
           <main>
             <MDXContent components={MDXComponents} />
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 57701bb62..a5f79e378 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -19,16 +19,14 @@ createStore(
 function App({ Component, pageProps }: AppProps) {
   useEffect(() => {
     try {
-      if (window.navigator && navigator.serviceWorker) {
-        navigator.serviceWorker
-          .getRegistrations()
-          .then(function (registrations) {
-            if (Array.isArray(registrations)) {
-              for (const registration of registrations) {
-                registration.unregister()
-              }
+      if ("serviceWorker" in window.navigator) {
+        navigator.serviceWorker.getRegistrations().then((registrations) => {
+          if (Array.isArray(registrations)) {
+            for (const registration of registrations) {
+              ;(registration as ServiceWorkerRegistration).unregister()
             }
-          })
+          }
+        })
       }
     } catch {}
   }, [])
diff --git a/tsconfig.json b/tsconfig.json
index 12088f941..67f349ed1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -78,9 +78,13 @@
     "plugins": [{ "name": "next" }]
   },
   "include": [
+    "./src/**/*",
+
     "next-env.d.ts",
+    "next.config.ts",
     ".next/types/**/*.ts",
-    "./src/**/*",
+
+    "contentlayer.config.ts",
     ".contentlayer/generated"
   ],
   "exclude": ["node_modules"]

From 57e84426f99ad82476ed3c1568dbd91216fc7007 Mon Sep 17 00:00:00 2001
From: Marco Pasqualetti <marco.pasqualetti@live.com>
Date: Mon, 23 Dec 2024 10:59:32 +0100
Subject: [PATCH 2/2] ci: add lint:ci script

---
 .github/workflows/ci.yml |  2 +-
 next.config.ts           | 10 ++++++++++
 package.json             |  1 +
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 54f52f9ce..9d116a3e5 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -20,7 +20,7 @@ jobs:
     strategy:
       fail-fast: true
       matrix:
-        script: ["format", "lint", "typecheck:ci"]
+        script: ["format", "lint:ci", "typecheck:ci"]
 
     steps:
       - name: Checkout repo
diff --git a/next.config.ts b/next.config.ts
index 3e4956cd4..5d589531d 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -3,7 +3,17 @@ import { withContentlayer } from "next-contentlayer"
 import withBundleAnalyzer from "@next/bundle-analyzer"
 
 const nextConfig: NextConfig = {
+  eslint: {
+    /**
+     * Now eslint requires typecheck so we have to run build before executing lint
+     * These check are performed via `.github/workflows/ci.yml` action
+     *
+     * @see https://github.com/react-hook-form/documentation/pull/1107
+     */
+    ignoreDuringBuilds: true,
+  },
   typescript: {
+    /** @see `eslint.ignoreDuringBuilds` comment */
     ignoreBuildErrors: true,
   },
   reactStrictMode: true,
diff --git a/package.json b/package.json
index 470aac8c0..aff74ced2 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "format:fix": "prettier . --write",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
+    "lint:ci": "next build --no-lint && next lint",
     "now-build": "pnpm run build",
     "start": "next start",
     "typecheck": "tsc --noEmit",