From e1d3b615e63edf4438b5bf1d06b86581d21b499f Mon Sep 17 00:00:00 2001 From: Chan Date: Tue, 9 Jul 2024 08:38:27 +0000 Subject: [PATCH 01/17] refactor: remove obsolete comments --- src/widgets/sign-up/ui/SignUp.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/widgets/sign-up/ui/SignUp.tsx b/src/widgets/sign-up/ui/SignUp.tsx index 22025f3..7e19b3a 100644 --- a/src/widgets/sign-up/ui/SignUp.tsx +++ b/src/widgets/sign-up/ui/SignUp.tsx @@ -44,8 +44,6 @@ export function SignUp() { router.push("/sign-in"); }; - // TODO style form based on Figma - return (
From 193e33cee54296f482565ffe2682387a298f71e4 Mon Sep 17 00:00:00 2001 From: Chan Date: Tue, 9 Jul 2024 08:40:58 +0000 Subject: [PATCH 02/17] fix: use aria-errormessage for FromMessage component --- src/shared/ui/form.tsx | 118 +++++++++++++++++++++-------------------- 1 file changed, 61 insertions(+), 57 deletions(-) diff --git a/src/shared/ui/form.tsx b/src/shared/ui/form.tsx index 51a9af1..46b619d 100644 --- a/src/shared/ui/form.tsx +++ b/src/shared/ui/form.tsx @@ -1,6 +1,6 @@ -import * as React from "react" -import * as LabelPrimitive from "@radix-ui/react-label" -import { Slot } from "@radix-ui/react-slot" +import * as React from "react"; +import * as LabelPrimitive from "@radix-ui/react-label"; +import { Slot } from "@radix-ui/react-slot"; import { Controller, ControllerProps, @@ -8,27 +8,27 @@ import { FieldValues, FormProvider, useFormContext, -} from "react-hook-form" +} from "react-hook-form"; -import { cn } from "@/src/shared/lib/utils" -import { Label } from "@/src/shared/ui/label" +import { cn } from "@/src/shared/lib/utils"; +import { Label } from "@/src/shared/ui/label"; -const Form = FormProvider +const Form = FormProvider; type FormFieldContextValue< TFieldValues extends FieldValues = FieldValues, - TName extends FieldPath = FieldPath + TName extends FieldPath = FieldPath, > = { - name: TName -} + name: TName; +}; const FormFieldContext = React.createContext( - {} as FormFieldContextValue -) + {} as FormFieldContextValue, +); const FormField = < TFieldValues extends FieldValues = FieldValues, - TName extends FieldPath = FieldPath + TName extends FieldPath = FieldPath, >({ ...props }: ControllerProps) => { @@ -36,21 +36,21 @@ const FormField = < - ) -} + ); +}; const useFormField = () => { - const fieldContext = React.useContext(FormFieldContext) - const itemContext = React.useContext(FormItemContext) - const { getFieldState, formState } = useFormContext() + const fieldContext = React.useContext(FormFieldContext); + const itemContext = React.useContext(FormItemContext); + const { getFieldState, formState } = useFormContext(); - const fieldState = getFieldState(fieldContext.name, formState) + const fieldState = getFieldState(fieldContext.name, formState); if (!fieldContext) { - throw new Error("useFormField should be used within ") + throw new Error("useFormField should be used within "); } - const { id } = itemContext + const { id } = itemContext; return { id, @@ -59,36 +59,36 @@ const useFormField = () => { formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message`, ...fieldState, - } -} + }; +}; type FormItemContextValue = { - id: string -} + id: string; +}; const FormItemContext = React.createContext( - {} as FormItemContextValue -) + {} as FormItemContextValue, +); const FormItem = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { - const id = React.useId() + const id = React.useId(); return (
- ) -}) -FormItem.displayName = "FormItem" + ); +}); +FormItem.displayName = "FormItem"; const FormLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { - const { error, formItemId } = useFormField() + const { error, formItemId } = useFormField(); return (