From a1f3cd1f515c334a515e08aea2c34a4b084ddcbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?=
 <wingkwong.code@gmail.com>
Date: Wed, 1 May 2024 21:13:24 +0800
Subject: [PATCH] feat(switch): add WithReactHookFormTemplate

---
 .../switch/stories/switch.stories.tsx         | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/packages/components/switch/stories/switch.stories.tsx b/packages/components/switch/stories/switch.stories.tsx
index 33a753a70b..8564dfd7e3 100644
--- a/packages/components/switch/stories/switch.stories.tsx
+++ b/packages/components/switch/stories/switch.stories.tsx
@@ -5,6 +5,8 @@ import {toggle} from "@nextui-org/theme";
 import {VisuallyHidden} from "@react-aria/visually-hidden";
 import {SunFilledIcon, MoonFilledIcon} from "@nextui-org/shared-icons";
 import {clsx} from "@nextui-org/shared-utils";
+import {button} from "@nextui-org/theme";
+import {useForm} from "react-hook-form";
 
 import {Switch, SwitchProps, SwitchThumbIconProps, useSwitch} from "../src";
 
@@ -131,6 +133,44 @@ const CustomWithHooksTemplate = (args: SwitchProps) => {
   );
 };
 
+const WithReactHookFormTemplate = (args: SwitchProps) => {
+  const {
+    register,
+    formState: {errors},
+    handleSubmit,
+  } = useForm({
+    defaultValues: {
+      defaultTrue: true,
+      defaultFalse: false,
+      requiredField: false,
+    },
+  });
+
+  const onSubmit = (data: any) => {
+    // eslint-disable-next-line no-console
+    console.log(data);
+    alert("Submitted value: " + JSON.stringify(data));
+  };
+
+  return (
+    <form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)}>
+      <Switch {...args} {...register("defaultTrue")}>
+        By default this switch is true
+      </Switch>
+      <Switch {...args} {...register("defaultFalse")}>
+        By default this switch is false
+      </Switch>
+      <Switch {...args} {...register("requiredField", {required: true})}>
+        This switch is required
+      </Switch>
+      {errors.requiredField && <span className="text-danger">This switch is required</span>}
+      <button className={button({class: "w-fit"})} type="submit">
+        Submit
+      </button>
+    </form>
+  );
+};
+
 export const Default = {
   args: {
     ...defaultProps,
@@ -204,3 +244,11 @@ export const CustomWithHooks = {
     ...defaultProps,
   },
 };
+
+export const WithReactHookForm = {
+  render: WithReactHookFormTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};