diff options
Diffstat (limited to 'apps/web/src/components/ui/form.tsx')
| -rw-r--r-- | apps/web/src/components/ui/form.tsx | 216 |
1 files changed, 108 insertions, 108 deletions
diff --git a/apps/web/src/components/ui/form.tsx b/apps/web/src/components/ui/form.tsx index cb4f53a9..f186d894 100644 --- a/apps/web/src/components/ui/form.tsx +++ b/apps/web/src/components/ui/form.tsx @@ -4,12 +4,12 @@ import * as React from "react"; import { Label as LabelPrimitive, Slot as SlotPrimitive } from "radix-ui"; import { - Controller, - ControllerProps, - FieldPath, - FieldValues, - FormProvider, - useFormContext, + Controller, + ControllerProps, + FieldPath, + FieldValues, + FormProvider, + useFormContext, } from "react-hook-form"; import { cn } from "../../lib/utils"; @@ -18,162 +18,162 @@ import { Label } from "./label"; const Form = FormProvider; type FormFieldContextValue< - TFieldValues extends FieldValues = FieldValues, - TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, > = { - name: TName; + name: TName; }; const FormFieldContext = React.createContext<FormFieldContextValue>( - {} as FormFieldContextValue + {} as FormFieldContextValue, ); const FormField = < - TFieldValues extends FieldValues = FieldValues, - TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, >({ - ...props + ...props }: ControllerProps<TFieldValues, TName>) => { - return ( - <FormFieldContext.Provider value={{ name: props.name }}> - <Controller {...props} /> - </FormFieldContext.Provider> - ); + return ( + <FormFieldContext.Provider value={{ name: props.name }}> + <Controller {...props} /> + </FormFieldContext.Provider> + ); }; 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 <FormField>"); - } + if (!fieldContext) { + throw new Error("useFormField should be used within <FormField>"); + } - const { id } = itemContext; + const { id } = itemContext; - return { - id, - name: fieldContext.name, - formItemId: `${id}-form-item`, - formDescriptionId: `${id}-form-item-description`, - formMessageId: `${id}-form-item-message`, - ...fieldState, - }; + return { + id, + name: fieldContext.name, + formItemId: `${id}-form-item`, + formDescriptionId: `${id}-form-item-description`, + formMessageId: `${id}-form-item-message`, + ...fieldState, + }; }; type FormItemContextValue = { - id: string; + id: string; }; const FormItemContext = React.createContext<FormItemContextValue>( - {} as FormItemContextValue + {} as FormItemContextValue, ); const FormItem = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes<HTMLDivElement> + HTMLDivElement, + React.HTMLAttributes<HTMLDivElement> >(({ className, ...props }, ref) => { - const id = React.useId(); + const id = React.useId(); - return ( - <FormItemContext.Provider value={{ id }}> - <div ref={ref} className={cn("space-y-2", className)} {...props} /> - </FormItemContext.Provider> - ); + return ( + <FormItemContext.Provider value={{ id }}> + <div ref={ref} className={cn("space-y-2", className)} {...props} /> + </FormItemContext.Provider> + ); }); FormItem.displayName = "FormItem"; const FormLabel = React.forwardRef< - React.ElementRef<typeof LabelPrimitive.Root>, - React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> + React.ElementRef<typeof LabelPrimitive.Root>, + React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> >(({ className, ...props }, ref) => { - const { error, formItemId } = useFormField(); + const { error, formItemId } = useFormField(); - return ( - <Label - ref={ref} - className={cn(error && "text-destructive", className)} - htmlFor={formItemId} - {...props} - /> - ); + return ( + <Label + ref={ref} + className={cn(error && "text-destructive", className)} + htmlFor={formItemId} + {...props} + /> + ); }); FormLabel.displayName = "FormLabel"; const FormControl = React.forwardRef< - React.ElementRef<typeof SlotPrimitive.Slot>, - React.ComponentPropsWithoutRef<typeof SlotPrimitive.Slot> + React.ElementRef<typeof SlotPrimitive.Slot>, + React.ComponentPropsWithoutRef<typeof SlotPrimitive.Slot> >(({ ...props }, ref) => { - const { error, formItemId, formDescriptionId, formMessageId } = - useFormField(); + const { error, formItemId, formDescriptionId, formMessageId } = + useFormField(); - return ( - <SlotPrimitive.Slot - ref={ref} - id={formItemId} - aria-describedby={ - !error - ? `${formDescriptionId}` - : `${formDescriptionId} ${formMessageId}` - } - aria-invalid={!!error} - {...props} - /> - ); + return ( + <SlotPrimitive.Slot + ref={ref} + id={formItemId} + aria-describedby={ + !error + ? `${formDescriptionId}` + : `${formDescriptionId} ${formMessageId}` + } + aria-invalid={!!error} + {...props} + /> + ); }); FormControl.displayName = "FormControl"; const FormDescription = React.forwardRef< - HTMLParagraphElement, - React.HTMLAttributes<HTMLParagraphElement> + HTMLParagraphElement, + React.HTMLAttributes<HTMLParagraphElement> >(({ className, ...props }, ref) => { - const { formDescriptionId } = useFormField(); + const { formDescriptionId } = useFormField(); - return ( - <p - ref={ref} - id={formDescriptionId} - className={cn("text-[0.8rem] text-muted-foreground", className)} - {...props} - /> - ); + return ( + <p + ref={ref} + id={formDescriptionId} + className={cn("text-[0.8rem] text-muted-foreground", className)} + {...props} + /> + ); }); FormDescription.displayName = "FormDescription"; const FormMessage = React.forwardRef< - HTMLParagraphElement, - React.HTMLAttributes<HTMLParagraphElement> + HTMLParagraphElement, + React.HTMLAttributes<HTMLParagraphElement> >(({ className, children, ...props }, ref) => { - const { error, formMessageId } = useFormField(); - const body = error ? String(error?.message) : children; + const { error, formMessageId } = useFormField(); + const body = error ? String(error?.message) : children; - if (!body) { - return null; - } + if (!body) { + return null; + } - return ( - <p - ref={ref} - id={formMessageId} - className={cn("text-[0.8rem] font-medium text-destructive", className)} - {...props} - > - {body} - </p> - ); + return ( + <p + ref={ref} + id={formMessageId} + className={cn("text-[0.8rem] font-medium text-destructive", className)} + {...props} + > + {body} + </p> + ); }); FormMessage.displayName = "FormMessage"; export { - useFormField, - Form, - FormItem, - FormLabel, - FormControl, - FormDescription, - FormMessage, - FormField, + useFormField, + Form, + FormItem, + FormLabel, + FormControl, + FormDescription, + FormMessage, + FormField, }; |