From 5446d70bcadf5f6fba19e7085fa92692b7b79cdb Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Tue, 12 Mar 2024 15:29:07 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D(react)=20fix=20RHF=20login=20examp?=
 =?UTF-8?q?le?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This story was broken due to incorrect usage of FormProvider.
---
 .../Examples/ReactHookForm/Login.stories.tsx  | 99 ++++++++++---------
 1 file changed, 51 insertions(+), 48 deletions(-)

diff --git a/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx b/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx
index b3fcac6..27e6d68 100644
--- a/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx
+++ b/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx
@@ -1,7 +1,7 @@
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Meta } from "@storybook/react";
 import React from "react";
-import { useForm } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 import * as Yup from "yup";
 import { RhfInput } from ":/components/Forms/Input/stories-utils";
 import { Checkbox } from ":/components/Forms/Checkbox";
@@ -29,7 +29,7 @@ const loginSchema = Yup.object().shape({
 });
 
 export const Login = () => {
-  const { register, handleSubmit, formState } = useForm<LoginStoryFormValues>({
+  const methods = useForm<LoginStoryFormValues>({
     defaultValues: {
       email: "",
       password: "",
@@ -41,53 +41,56 @@ export const Login = () => {
   });
 
   return (
-    <form
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "1rem",
-        width: "300px",
-      }}
-      onSubmit={handleSubmit(onSubmit)}
-    >
-      <h1
-        className="fs-h3 fw-bold clr-greyscale-900"
-        style={{ textAlign: "center" }}
+    <FormProvider {...methods}>
+      <form
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+          width: "300px",
+        }}
+        onSubmit={methods.handleSubmit(onSubmit)}
       >
-        Log in
-      </h1>
-      <RhfInput
-        label="Email"
-        fullWidth={true}
-        state={getFieldState("email", formState)}
-        text={getFieldErrorMessage("email", formState)}
-        {...register("email")}
-      />
-      <RhfInput
-        label="Password"
-        state={getFieldState("password", formState)}
-        type="password"
-        text={
-          getFieldErrorMessage("password", formState) || "Forgot your password?"
-        }
-        fullWidth={true}
-        {...register("password")}
-      />
-      <div>
-        <Checkbox
-          label="Remember me"
-          state={getFieldState("rememberMe", formState)}
-          text={getFieldErrorMessage("rememberMe", formState)}
-          {...register("rememberMe")}
+        <h1
+          className="fs-h3 fw-bold clr-greyscale-900"
+          style={{ textAlign: "center" }}
+        >
+          Log in
+        </h1>
+        <RhfInput
+          label="Email"
+          fullWidth={true}
+          state={getFieldState("email", methods.formState)}
+          text={getFieldErrorMessage("email", methods.formState)}
+          {...methods.register("email")}
         />
-      </div>
-      <Button fullWidth={true}>Log in</Button>
-      <div className="fs-m clr-greyscale-800" style={{ textAlign: "center" }}>
-        You do not have an account?{" "}
-        <a href="/#" className="clr-greyscale-800">
-          Register
-        </a>
-      </div>
-    </form>
+        <RhfInput
+          label="Password"
+          state={getFieldState("password", methods.formState)}
+          type="password"
+          text={
+            getFieldErrorMessage("password", methods.formState) ||
+            "Forgot your password?"
+          }
+          fullWidth={true}
+          {...methods.register("password")}
+        />
+        <div>
+          <Checkbox
+            label="Remember me"
+            state={getFieldState("rememberMe", methods.formState)}
+            text={getFieldErrorMessage("rememberMe", methods.formState)}
+            {...methods.register("rememberMe")}
+          />
+        </div>
+        <Button fullWidth={true}>Log in</Button>
+        <div className="fs-m clr-greyscale-800" style={{ textAlign: "center" }}>
+          You do not have an account?{" "}
+          <a href="/#" className="clr-greyscale-800">
+            Register
+          </a>
+        </div>
+      </form>
+    </FormProvider>
   );
 };