studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📝(react) fix RHF login example

Browse Source 
This story was broken due to incorrect usage of FormProvider.
This commit is contained in:
Nathan Vasse
2024-03-12 15:29:07 +01:00
committed by NathanVss
parent 25e61c2b4a
commit 5446d70bca
1 changed files with 51 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx
View File

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