refactor: enable recommendedTypeChecked rules (#1107)

* refactor: enable `recommendedTypeChecked` rules

* ci: add lint:ci script

Author: marcalexiei

.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 (