feat: attempt to fix the crud with auth

contexts/FormField/FormFieldContext.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+
+interface FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> {
+  name: TName;
+}
+
+export const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+);

contexts/FormField/FormFieldProvider.tsx

@@ -0,0 +1,20 @@
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues
+} from 'react-hook-form';
+import { FormFieldContext } from './FormFieldContext';
+
+export const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};

contexts/FormItem/FormItemContext.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface FormItemContextValue {
+  id: string;
+}
+
+export const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+);

contexts/FormItem/FormItemProvider.tsx

@@ -0,0 +1,18 @@
+import { cn } from '@utils/cn';
+import * as React from 'react';
+import { FormItemContext } from './FormItemContext';
+
+export const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn('space-y-2', className)} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+
+FormItem.displayName = 'FormItem';