refactor(v4.0.0-alpha): beginning of a new era

libs/ui/src/components/form.tsx

@@ -0,0 +1,115 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import { FormFieldContext, FormItemContext, useFormField } from "@reactive-resume/hooks";
+import { cn } from "@reactive-resume/utils";
+import { forwardRef, useId } from "react";
+import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider } from "react-hook-form";
+
+import { Label } from "./label";
+
+export const Form = FormProvider;
+
+export const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => (
+  <FormFieldContext.Provider value={{ name: props.name }}>
+    <Controller {...props} />
+  </FormFieldContext.Provider>
+);
+
+export const FormItem = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = useId();
+
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} className={cn("w-full space-y-1", className)} {...props} />
+      </FormItemContext.Provider>
+    );
+  },
+);
+
+FormItem.displayName = "FormItem";
+
+export const FormLabel = forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      htmlFor={formItemId}
+      className={cn(error && "text-error", className)}
+      {...props}
+    />
+  );
+});
+
+FormLabel.displayName = "FormLabel";
+
+export const FormControl = forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-invalid={!!error}
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+      {...props}
+    />
+  );
+});
+
+FormControl.displayName = "FormControl";
+
+export const FormDescription = forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-xs leading-relaxed opacity-60", className)}
+      {...props}
+    />
+  );
+});
+
+FormDescription.displayName = "FormDescription";
+
+export const FormMessage = forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-xs font-medium leading-relaxed text-error", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+
+FormMessage.displayName = "FormMessage";