Upgrading RHF dependencies + Adding content layer (#978)

* chore: dependencies upgrade

* chore: upgrading rhf deps

* feat: adding content layer to generate all pages

Author: aranlucas

.gitignore

@@ -34,4 +34,7 @@ yarn-error.log*
 package-lock.json
 .vscode
 tsconfig.tsbuildinfo
-.next/
+.next/
+
+# contentlayer
+.contentlayer

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

contentlayer.config.ts

@@ -0,0 +1,39 @@
+import { defineDocumentType, makeSource } from "contentlayer/source-files"
+import { remarkHeadingId } from "remark-custom-heading-id"
+import remarkGfm from "remark-gfm"
+import rehypeMdxCodeProps from "rehype-mdx-code-props"
+import emoji from "remark-emoji"
+
+export const Doc = defineDocumentType(() => ({
+  name: "Doc",
+  contentType: "mdx",
+  filePathPattern: "**/*.mdx",
+  fields: {
+    title: { type: "string", required: true },
+    description: { type: "string", required: true },
+    sidebar: { type: "string", required: true },
+  },
+  computedFields: {
+    slug: {
+      type: "string",
+      resolve: (doc) => `/${doc._raw.flattenedPath}`,
+    },
+    slugAsParams: {
+      type: "string",
+      resolve: (doc) => doc._raw.flattenedPath.split("/").slice(1).join("/"),
+    },
+    segment: {
+      type: "list",
+      resolve: (doc) => doc._raw.flattenedPath.split("/"),
+    },
+  },
+}))
+
+export default makeSource({
+  contentDirPath: "src/content",
+  documentTypes: [Doc],
+  mdx: {
+    remarkPlugins: [remarkGfm, remarkHeadingId, emoji],
+    rehypePlugins: [rehypeMdxCodeProps],
+  },
+})

next.config.mjs

@@ -1,9 +1,4 @@
-import withMDX from "@next/mdx"
-import { remarkHeadingId } from "remark-custom-heading-id"
-import remarkGfm from "remark-gfm"
-import rehypeMdxCodeProps from "rehype-mdx-code-props"
-import emoji from "remark-emoji"
-
+import { withContentlayer } from "next-contentlayer"
 import withBundleAnalyzer from "@next/bundle-analyzer"
 
 /** @type {import('next').NextConfig} */
@@ -19,14 +14,4 @@ const bundleAnalyzer = withBundleAnalyzer({
   enabled: process.env.ANALYZE === "true",
 })
 
-export default bundleAnalyzer(
-  withMDX({
-    extension: /\.mdx?$/,
-    options: {
-      remarkPlugins: [remarkGfm, remarkHeadingId, emoji],
-      rehypePlugins: [rehypeMdxCodeProps],
-      // If you use `MDXProvider`, uncomment the following line.
-      providerImportSource: "@mdx-js/react",
-    },
-  })(nextConfig)
-)
+export default bundleAnalyzer(withContentlayer(nextConfig))

package.json

@@ -4,47 +4,50 @@
   "version": "6.0.1",
   "author": "beier luo",
   "dependencies": {
-    "@hookform/devtools": "2.0.0-beta.1",
+    "@hookform/devtools": "4.3.1",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
-    "@next/mdx": "^13.4.4",
-    "@types/node": "^20.2.5",
+    "@next/mdx": "^13.4.5",
+    "@types/node": "^20.3.1",
     "class-variance-authority": "^0.6.0",
     "clsx": "^1.2.1",
+    "contentlayer": "^0.3.3",
+    "date-fns": "^2.30.0",
     "little-state-machine": "^4.8.0",
-    "next": "^13.4.4",
+    "next": "^13.4.5",
+    "next-contentlayer": "^0.3.3",
     "next-themes": "^0.2.1",
-    "prism-react-renderer": "^2.0.4",
+    "prism-react-renderer": "^2.0.5",
     "prismjs": "^1.29.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-github-btn": "1.4.0",
-    "react-hook-form": "6.0.0",
+    "react-hook-form": "7.44.3",
     "react-simple-animate": "^3.5.2",
     "react-simple-img": "3.0.0",
     "react-sortablejs": "1.5.1",
     "rehype-mdx-code-props": "^1.0.0",
     "remark-custom-heading-id": "^1.0.1",
-    "remark-emoji": "^3.1.1",
+    "remark-emoji": "^3.1.2",
     "remark-gfm": "^3.0.1",
     "sortablejs": "1.15.0"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^13.4.4",
+    "@next/bundle-analyzer": "^13.4.5",
     "@types/react-helmet": "^6.1.6",
-    "@typescript-eslint/eslint-plugin": "^5.59.8",
-    "@typescript-eslint/parser": "^5.59.8",
+    "@typescript-eslint/eslint-plugin": "^5.59.11",
+    "@typescript-eslint/parser": "^5.59.11",
     "cross-env": "^7.0.3",
-    "eslint": "^8.41.0",
-    "eslint-config-next": "^13.4.4",
+    "eslint": "^8.42.0",
+    "eslint-config-next": "^13.4.5",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "husky": "^4.3.8",
-    "lint-staged": "^10.5.4",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
     "prettier": "^2.8.8",
-    "typescript": "^5.0.4"
+    "typescript": "^5.1.3"
   },
   "keywords": [
     "react-hook-form",
@@ -55,19 +58,15 @@
     "analyze": "cross-env ANALYZE=true next build",
     "build": "next build",
     "dev": "next dev",
-    "format": "prettier --write \"src/**/*.{ts,tsx,mdx}\"",
+    "format": "prettier --write",
     "lint": "next lint --fix",
     "now-build": "npm run build",
-    "start": "npm run dev",
-    "typecheck": "tsc --noEmit"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+    "start": "next start",
+    "typecheck": "tsc --noEmit",
+    "prepare": "husky install"
   },
   "lint-staged": {
-    "*.{ts,tsx,mdx}": [
+    "*.{ts,tsx,mdx,css,json}": [
       "npm run format"
     ]
   }

src/actions/settingActions.ts

@@ -1,36 +1,20 @@
 import { useEffect } from "react"
-import { useStateMachine } from "little-state-machine"
 import Link from "next/link"
 import Footer from "./Footer"
 import typographyStyles from "../styles/typography.module.css"
 import styles from "./ApiGallery.module.css"
 import containerStyles from "../styles/container.module.css"
 import headerStyles from "./Header.module.css"
-import { updateSetting } from "../actions/settingActions"
 import { useRouter } from "next/router"
 
 export default function ApiGallery() {
-  const {
-    actions,
-    state: {
-      setting = {
-        version: 7,
-      },
-    },
-  } = useStateMachine({
-    updateSetting,
-  })
   const router = useRouter()
 
   const onChange = (e) => {
     const version = parseInt(e.target.value)
 
-    actions.updateSetting({
-      version,
-    })
-
     if (version !== 7) {
-      window.location.href = `https://legacy.react-hook-form.com/v${version}/api`
+      router.push(`https://legacy.react-hook-form.com/v${version}/api`)
     } else {
       router.push(`/v${version}/docs/`)
     }
@@ -63,7 +47,7 @@ export default function ApiGallery() {
     ) {
       router.push(`/docs/${name}`)
     }
-  }, [setting, router])
+  }, [router])
 
   return (
     <div className={containerStyles.container}>