refactor: enable recommendedTypeChecked rules

.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

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
+      },
     },
   },
 }))

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,
+        },
+      ],
     },
   }
 )

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,

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

src/components/Admonition.tsx

@@ -109,7 +109,7 @@ export const Admonition = ({
   children,
 }: {
   type: AdmonitionType
-  title: string
+  title?: string
   children: ReactNode
 }) => {
   return (

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`)

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"
           />

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>

src/components/ClipBoard.tsx

@@ -19,7 +19,9 @@ const ClipBoard = ({
       setCopiedCode(false)
     }, 3000)
 
-    return () => clearTimeout(timerId)
+    return () => {
+      clearTimeout(timerId)
+    }
   }, [copiedCode])
 
   return (

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 || "")
+            }}
           />
         )}
 

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"

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>
 

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