V6

.eslintrc.js

@@ -0,0 +1,37 @@
+const OFF = 0
+const WARN = 1
+const ERROR = 2
+
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  extends: [
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    // "plugin:jsx-a11y/recommended", // TODO
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended",
+  ],
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+  rules: {
+    // typescript
+    "@typescript-eslint/explicit-function-return-type": OFF,
+    "@typescript-eslint/interface-name-prefix": OFF,
+    "@typescript-eslint/explicit-module-boundary-types": OFF,
+    // react
+    "react/display-name": OFF,
+    "react/prop-types": OFF,
+    "react/jsx-no-target-blank": WARN,
+    "react/no-unescaped-entities": WARN,
+  },
+}

gatsby-config.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const languages = require("./src/data/languages")
 
 module.exports = {

package.json

@@ -1,43 +1,51 @@
 {
   "name": "react-hook-form-website",
   "description": "React hooks for form validation without the hassle.",
-  "version": "3.1.0",
+  "version": "6.0.0",
   "author": "beier luo",
   "engines": {
     "node": "12.x"
   },
   "dependencies": {
-    "gatsby": "2.21.21",
-    "gatsby-image": "2.4.3",
-    "gatsby-plugin-google-analytics": "2.3.1",
+    "@hookform/devtools": "2.0.0-beta.1",
+    "gatsby": "2.23.3",
+    "gatsby-image": "2.4.7",
+    "gatsby-plugin-google-analytics": "2.3.4",
     "gatsby-plugin-gtag": "1.0.13",
     "gatsby-plugin-i18n": "^1.0.1",
-    "gatsby-plugin-manifest": "2.4.2",
-    "gatsby-plugin-nprogress": "^2.3.1",
-    "gatsby-plugin-react-helmet": "3.3.1",
-    "gatsby-plugin-sharp": "2.6.2",
-    "gatsby-plugin-sitemap": "2.4.2",
-    "gatsby-plugin-typescript": "2.4.2",
-    "gatsby-source-filesystem": "2.3.1",
-    "gatsby-transformer-sharp": "2.5.2",
-    "little-state-machine": "^3.0.0",
+    "gatsby-plugin-manifest": "2.4.11",
+    "gatsby-plugin-nprogress": "^2.3.4",
+    "gatsby-plugin-react-helmet": "3.3.4",
+    "gatsby-plugin-sharp": "2.6.11",
+    "gatsby-plugin-sitemap": "2.4.5",
+    "gatsby-plugin-typescript": "2.4.6",
+    "gatsby-source-filesystem": "2.3.11",
+    "gatsby-transformer-sharp": "2.5.5",
+    "gatsby-transformer-typescript-css-modules": "^1.0.14",
+    "little-state-machine": "^3.0.2",
     "prismjs": "^1.20.0",
     "ptz-i18n": "^1.0.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-github-btn": "1.2.0",
     "react-helmet": "5.2.1",
-    "react-hook-form": "4.9.3",
-    "react-hook-form-devtools": "1.0.2-beta.2",
-    "react-simple-animate": "^3.3.4",
+    "react-hook-form": "6.0.0-rc.1",
+    "react-simple-animate": "^3.3.9",
     "react-simple-img": "2.3.7",
     "react-sortablejs": "1.5.1",
     "sortablejs": "1.10.2"
   },
   "devDependencies": {
-    "gatsby-plugin-offline": "^3.2.1",
+    "@typescript-eslint/eslint-plugin": "^3.4.0",
+    "@typescript-eslint/parser": "^3.4.0",
+    "eslint": "^7.3.1",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.0",
+    "gatsby-plugin-offline": "^3.2.9",
     "husky": "^4.2.5",
-    "lint-staged": "^10.2.2",
+    "lint-staged": "^10.2.9",
     "prettier": "2.0.5"
   },
   "keywords": [
@@ -52,7 +60,8 @@
     "start": "npm run develop",
     "serve": "gatsby serve",
     "now-build": "npm run build",
-    "prettier": "prettier --write './src/**/*.ts' './src/**/*.tsx' --config ./.prettierrc"
+    "prettier": "prettier --write './src/**/*.ts' './src/**/*.tsx' --config ./.prettierrc",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx --fix"
   },
   "repository": {
     "type": "git",
@@ -68,8 +77,7 @@
   },
   "lint-staged": {
     "*.{ts,tsx}": [
-      "npm run format",
-      "npm run prettier"
+      "npm run format"
     ]
   }
 }

src/components/AdvancedPage.tsx

@@ -4,55 +4,55 @@ import SideMenu from "./SideMenu"
 import Footer from "./Footer"
 import fieldArray from "./codeExamples/fieldArray"
 import unregisterControlledComponent from "./codeExamples/unregisterControlledComponent"
-import copyClipBoard from "./utils/copyClipBoard"
-import schemaValidation from "./codeExamples/schemaValidation"
+import conditionalComponent from "./codeExamples/conditionalComponent"
 import connectForm from "./codeExamples/connectForm"
 import formContextPerformance from "./codeExamples/formContextPerformance"
 import StarRepo from "./StarRepo"
-import generic from "../data/generic"
 import { useStateMachine } from "little-state-machine"
-import advancedContent from "../data/advanced"
+import advancedEn from "../data/en/advanced"
 import controlledMixedUncontrolled from "./codeExamples/controlledMixedUncontrolled"
 import TabGroup from "./TabGroup"
 import unregisterWrapControlledComponent from "./codeExamples/unregisterWrapControlledComponent"
 import controlledMixedUncontrolledInput from "./codeExamples/controlledMixedUncontrolledInput"
 import useFieldArray from "./codeExamples/useFieldArray"
 import typographyStyles from "../styles/typography.module.css"
-import codeAreaStyles from "./CodeArea.module.css"
 import containerStyles from "../styles/container.module.css"
-import getStartedStyles from "./GetStarted.module.css"
 
 const { useRef } = React
-const advancedEn = advancedContent["en"]
 const enLinks = [
   advancedEn.accessibility,
   advancedEn.wizard,
   advancedEn.smartForm,
   advancedEn.fieldArrays,
-  advancedEn.schema,
   advancedEn.errorMessage,
   advancedEn.connectForm,
   advancedEn.formContext,
   advancedEn.conditionalControlledComponent,
   advancedEn.controlledMixedWithUnControlled,
   advancedEn.customHookWithValidationResolver,
   advancedEn.workingWithVirtualizedList,
+  advancedEn.testingForm,
 ]
 
-function Advanced({ defaultLang }: { defaultLang: string }) {
+interface Props {
+  defaultLang: string
+  advanced: any
+}
+
+function Advanced({ defaultLang, advanced }: Props) {
   const pageContentRef = useRef({
     AccessibilityA11y: null,
     WizardFormFunnel: null,
     SmartFormComponent: null,
     FieldArrays: null,
-    SchemaValidation: null,
     ConnectForm: null,
     FormContextPerformance: null,
     ErrorMessages: null,
     ConditionalControlledComponent: null,
     ControlledmixedwithUncontrolledComponents: null,
     CustomHookwithValidationResolver: null,
     Workingwithvirtualizedlists: null,
+    TestingForm: null,
   })
 
   const {
@@ -62,21 +62,20 @@ function Advanced({ defaultLang }: { defaultLang: string }) {
     language && language.currentLanguage
       ? language
       : { currentLanguage: defaultLang }
-  const advanced = advancedContent[currentLanguage]
 
   const links = [
     advanced.accessibility,
     advanced.wizard,
     advanced.smartForm,
     advanced.fieldArrays,
-    advanced.schema,
     advanced.errorMessage,
     advanced.connectForm,
     advanced.formContext,
     advanced.conditionalControlledComponent,
     advanced.controlledMixedWithUnControlled,
     advanced.customHookWithValidationResolver,
     advanced.workingWithVirtualizedList,
+    advanced.testingForm,
   ]
 
   const goToSection = (name) => {
@@ -189,39 +188,6 @@ function Advanced({ defaultLang }: { defaultLang: string }) {
 
           <hr />
 
-          <h2
-            className={typographyStyles.questionTitle}
-            ref={(ref) => (pageContentRef.current.SchemaValidation = ref)}
-          >
-            {advanced.schema.title}
-          </h2>
-
-          {advanced.schema.description}
-
-          {advanced.schema.step1}
-
-          <span className={getStartedStyles.installCode}>
-            npm install yup
-            <button
-              className={getStartedStyles.copyButton}
-              onClick={() => {
-                copyClipBoard("npm install yup")
-                alert("Code copied into your clipboard.")
-              }}
-            >
-              {generic.copy[currentLanguage]}
-            </button>
-          </span>
-
-          {advanced.schema.step2}
-
-          <CodeArea
-            rawData={schemaValidation}
-            url="https://codesandbox.io/s/928po918qr"
-          />
-
-          <hr />
-
           <h2
             className={typographyStyles.questionTitle}
             ref={(ref) => (pageContentRef.current.ErrorMessages = ref)}
@@ -298,7 +264,11 @@ function Advanced({ defaultLang }: { defaultLang: string }) {
 
           {advanced.conditionalControlledComponent.description}
 
-          <TabGroup buttonLabels={["Controller", "Custom Register"]}>
+          <TabGroup buttonLabels={["Normal", "Controller", "Custom Register"]}>
+            <CodeArea
+              rawData={conditionalComponent}
+              url="https://codesandbox.io/s/react-hook-form-conditional-inputs-c7n0r"
+            />
             <CodeArea rawData={unregisterWrapControlledComponent} />
             <CodeArea
               rawData={unregisterControlledComponent}
@@ -353,6 +323,34 @@ function Advanced({ defaultLang }: { defaultLang: string }) {
 
           {advanced.workingWithVirtualizedList.description}
 
+          <hr />
+
+          <h2
+            className={typographyStyles.questionTitle}
+            ref={(ref) => (pageContentRef.current.TestingForm = ref)}
+          >
+            {advanced.testingForm.title}
+          </h2>
+
+          {/* TODO: record a video */}
+
+          {/* <p>
+            In this video tutorial, I have demonstrated how to test with React
+            Hook Form.
+          </p> */}
+
+          {/* <iframe
+            width="100%"
+            height="528"
+            title="The way of testing with React Hook Form - video tutorial"
+            src="https://www.youtube.com/embed/CeAkxVwsyMU"
+            frameBorder="0"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+          /> */}
+
+          {advanced.testingForm.description}
+
           <StarRepo currentLanguage={currentLanguage} />
 
           <Footer currentLanguage={currentLanguage} />

src/components/ApiErrors.tsx

@@ -2,14 +2,24 @@ import * as React from "react"
 import CodeArea from "./CodeArea"
 import errorCode from "./codeExamples/errorCode"
 import errorCodeTs from "./codeExamples/errorCodeTs"
+import errorCodeTypes from "./codeExamples/ErrorCodeTypes"
 import generic from "../data/generic"
 import multipleErrorCode from "./codeExamples/multipleErrorCode"
+import multipleErrorCodeTs from "./codeExamples/multipleErrorCodeTs"
 import TabGroup from "./TabGroup"
 import typographyStyles from "../styles/typography.module.css"
 import tableStyles from "../styles/table.module.css"
 
 export default React.memo(
-  ({ api, currentLanguage }: { api: any; currentLanguage: string }) => {
+  ({
+    api,
+    currentLanguage,
+    goToSection,
+  }: {
+    api: any
+    currentLanguage: string
+    goToSection: (name: any, animate?: boolean) => void
+  }) => {
     return (
       <>
         <code className={typographyStyles.codeHeading}>
@@ -65,7 +75,9 @@ export default React.memo(
                   <code>message</code>
                 </td>
                 <td>
-                  <span className={typographyStyles.typeText}>string</span>
+                  <span className={typographyStyles.typeText}>
+                    string | React.ReactElement
+                  </span>
                 </td>
                 <td>{api.errors.message}</td>
               </tr>
@@ -82,18 +94,22 @@ export default React.memo(
               </tr>
             </tbody>
           </table>
+          {api.errors.note(goToSection)}
         </div>
 
         <TabGroup buttonLabels={["First error detected", "Display all errors"]}>
           <CodeArea
             rawData={errorCode}
             tsRawData={errorCodeTs}
-            url="https://codesandbox.io/s/nrr4n9p8n4"
-            tsUrl="https://codesandbox.io/s/xenodochial-albattani-tcx0n?file=/src/App.tsx"
+            rawTypes={errorCodeTypes}
+            url="https://codesandbox.io/s/react-hook-form-error-v6-rcpm8"
+            tsUrl="https://codesandbox.io/s/react-hook-form-error-ts-v6-500eo"
           />
           <CodeArea
             rawData={multipleErrorCode}
-            url="https://codesandbox.io/s/react-hook-form-errors-validatecriteriamode-all-qbskc"
+            tsRawData={multipleErrorCodeTs}
+            url="https://codesandbox.io/s/react-hook-form-validatecriteriamode-v6-tixtl"
+            tsUrl="https://codesandbox.io/s/react-hook-form-validatecriteriamode-v6-ts-r51li"
           />
         </TabGroup>