update on new api create form control (#1113)

* update on new api create form control

* update doc on create form control

* package upgrade

* update doc

* fix format

* fix format

* fix lint and upgrade deps

Author: bluebill1049

.prettierignore

@@ -1 +1,4 @@
-pnpm-lock.yaml
+pnpm-lock.yaml
+.cache/
+.contentlayer/
+.next/

package.json

@@ -8,20 +8,20 @@
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@next/mdx": "15.1.0",
-    "class-variance-authority": "^0.6.0",
+    "class-variance-authority": "^0.6.1",
     "clsx": "^1.2.1",
     "contentlayer": "^0.3.4",
-    "little-state-machine": "^4.8.0",
+    "little-state-machine": "^4.8.1",
     "next": "15.1.2",
     "next-contentlayer": "^0.3.4",
     "next-themes": "^0.2.1",
-    "prism-react-renderer": "^2.0.5",
+    "prism-react-renderer": "^2.4.1",
     "prismjs": "^1.29.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-github-btn": "1.4.0",
     "react-hook-form": "7.44.3",
-    "react-simple-animate": "^3.5.2",
+    "react-simple-animate": "^3.5.3",
     "react-simple-img": "3.0.0",
     "react-sortablejs": "1.5.1",
     "rehype-mdx-code-props": "^1.0.0",
@@ -35,19 +35,19 @@
     "@types/eslint-plugin-jsx-a11y": "6.10.0",
     "@types/eslint__eslintrc": "2.1.2",
     "@types/node": "20.17.10",
-    "@types/react": "^18.3.17",
-    "@types/react-dom": "^18.3.5",
-    "@types/react-helmet": "^6.1.6",
+    "@types/react": "18.3.17",
+    "@types/react-dom": "18.3.5",
+    "@types/react-helmet": "^6.1.11",
     "cross-env": "^7.0.3",
     "eslint": "9.17.0",
     "eslint-config-next": "15.1.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-react": "7.37.2",
     "eslint-plugin-react-hooks": "5.1.0",
     "husky": "^8.0.3",
-    "lint-staged": "^13.2.2",
+    "lint-staged": "^13.3.0",
     "prettier": "^3.4.2",
-    "typescript": "^5.6.3",
+    "typescript": "^5.7.3",
     "typescript-eslint": "8.18.1"
   },
   "keywords": [

pnpm-lock.yaml

@@ -159,6 +159,10 @@ export const apiLinks: Pages = [
     pathname: "/docs/usefieldarray",
     name: "useFieldArray",
   },
+  {
+    pathname: "/docs/createFormControl",
+    name: "createFormControl",
+  },
 ]
 
 export const tsLinks: Pages = [

src/components/Menu/MenuLinks.ts

@@ -236,7 +236,9 @@ export default function Nav() {
             <span>{nav.advanced}</span>
           </Link>
           <Link
-            className={`desktopOnly ${router.asPath == "/faqs" ? "active" : ""}`}
+            className={`desktopOnly ${
+              router.asPath == "/faqs" ? "active" : ""
+            }`}
             href="/faqs"
           >
             <div className={styles.iconWrapper}>

src/components/Nav.tsx

@@ -35,9 +35,9 @@ export default function ResourceList({
     const { title, author, description, version } = cur
     // case insensitive filter
     if (
-      `${title} ${author ?? ""} ${description ?? ""} ${version ? `v${version}` : ""}`.match(
-        new RegExp(watch("filterResources"), "i")
-      )
+      `${title} ${author ?? ""} ${description ?? ""} ${
+        version ? `v${version}` : ""
+      }`.match(new RegExp(watch("filterResources"), "i"))
     ) {
       acc.push(cur)
     }

src/components/ResourceList.tsx

@@ -0,0 +1,88 @@
+---
+title: createFormControl (BETA)
+description: Create form state and ready to be subscribed
+sidebar: apiLinks
+---
+
+This function create the entire form state subscription and allow you to subscribe update with or without react component.
+
+### Props
+
+---
+
+This following table applied to `FormProvider`, `useFormContext` accepts no argument.
+
+| Name       | Type                        | Description    |
+| ---------- | --------------------------- | -------------- |
+| `...props` | <TypeText>Object</TypeText> | `UseFormProps` |
+
+<Admonition type="important" title="Notes">
+  - This function is published at **v7.55.0-next.1** - This function is
+  completely optional, you can consider to use this instead of `useFormContext`
+  API. - You may find it useful if you would like to subscribe formsState by
+  skipping react re-render.
+</Admonition>
+
+**Examples:**
+
+---
+
+<TabGroup buttonLabels={["Setup", "Subscribe"]}>
+
+```javascript
+const { formControl, control } = createFormControl({
+  mode: 'onChange',
+  defaultValues: {
+    firstName: 'Bill'
+  }
+}})
+
+function App() {
+  const { register, handleSubmit } = useForm({
+    formControl,
+  })
+
+  return (
+    <form onSubmit={handleSubmit(data => console.log)}>
+      <input {...register('name')} />
+      <FormState />
+      <Controller />
+    </form>
+  );
+}
+
+function FormState() {
+  useFormState({
+    control // no longer need context api
+  })
+}
+
+function Controller() {
+  useFormState({
+    control // no longer need context api
+  })
+}
+```
+
+```javascript
+const { formControl } = createFormControl(props)
+
+formControl.subscribe({
+  formState: { isDirty: true },
+  callback: (formState) => {
+    if (formState.isDirty) {
+      // do something here
+    }
+  },
+})
+
+function App() {
+  const { register } = useForm({
+    formControl,
+  })
+
+  return <form />
+}
+```
+
+</TabGroup>

src/content/docs/createFormControl.mdx

@@ -121,33 +121,32 @@ const App = () => {
 **Dependant Fields**
 
 ```typescript sandbox="https://codesandbox.io/s/dependant-field-dwin1"
-import * as React from "react";
-import { useForm } from "react-hook-form";
+import * as React from "react"
+import { useForm } from "react-hook-form"
 
 type FormValues = {
-  a: string;
-  b: string;
-  c: string;
-};
+  a: string
+  b: string
+  c: string
+}
 
 export default function App() {
-  const { watch, register, handleSubmit, setValue, formState } = useForm<
-    FormValues
-  >({
-    defaultValues: {
-      a: "",
-      b: "",
-      c: ""
-    }
-  });
-  const onSubmit = (data: FormValues) => console.log(data);
-  const [a, b] = watch(["a", "b"]);
+  const { watch, register, handleSubmit, setValue, formState } =
+    useForm<FormValues>({
+      defaultValues: {
+        a: "",
+        b: "",
+        c: "",
+      },
+    })
+  const onSubmit = (data: FormValues) => console.log(data)
+  const [a, b] = watch(["a", "b"])
 
   React.useEffect(() => {
     if (formState.touchedFields.a && formState.touchedFields.b && a && b) {
-      setValue("c", `${a} ${b}`);
+      setValue("c", `${a} ${b}`)
     }
-  }, [setValue, a, b, formState]);
+  }, [setValue, a, b, formState])
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
@@ -159,14 +158,14 @@ export default function App() {
       <button
         type="button"
         onClick={() => {
-          setValue("a", "what", { shouldTouch: true });
-          setValue("b", "ever", { shouldTouch: true });
+          setValue("a", "what", { shouldTouch: true })
+          setValue("b", "ever", { shouldTouch: true })
         }}
       >
         trigger value
       </button>
     </form>
-  );
+  )
 }
 ```