LukeParke/better-auth
1
0
Fork 0
mirror of https://github.com/LukeHagar/better-auth.git synced 2025-12-09 12:27:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: migrate UI components to React 19

Browse Source
This commit is contained in:
Bereket Engida
2025-03-04 20:29:25 +03:00
parent 232f565cb7
commit 210c20eb65
42 changed files with 2456 additions and 2031 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
demo/nextjs/components/ui/form.tsx
View File

@@ -72,10 +72,15 @@ const FormItemContext = React.createContext<FormItemContextValue>(
{} as FormItemContextValue,
);
const FormItem = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
const FormItem = (
{
ref,
className,
...props
}: React.HTMLAttributes<HTMLDivElement> & {
ref: React.RefObject<HTMLDivElement>;
}
) => {
const id = React.useId();
return (
@@ -83,13 +88,18 @@ const FormItem = React.forwardRef<
<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>
>(({ className, ...props }, ref) => {
const FormLabel = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
ref: React.RefObject<React.ElementRef<typeof LabelPrimitive.Root>>;
}
) => {
const { error, formItemId } = useFormField();
return (
@@ -100,13 +110,17 @@ const FormLabel = React.forwardRef<
{...props}
/>
);
});
};
FormLabel.displayName = "FormLabel";
const FormControl = React.forwardRef<
React.ElementRef<typeof Slot>,
React.ComponentPropsWithoutRef<typeof Slot>
>(({ ...props }, ref) => {
const FormControl = (
{
ref,
...props
}: React.ComponentPropsWithoutRef<typeof Slot> & {
ref: React.RefObject<React.ElementRef<typeof Slot>>;
}
) => {
const { error, formItemId, formDescriptionId, formMessageId } =
useFormField();
@@ -123,13 +137,18 @@ const FormControl = React.forwardRef<
{...props}
/>
);
});
};
FormControl.displayName = "FormControl";
const FormDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
const FormDescription = (
{
ref,
className,
...props
}: React.HTMLAttributes<HTMLParagraphElement> & {
ref: React.RefObject<HTMLParagraphElement>;
}
) => {
const { formDescriptionId } = useFormField();
return (
@@ -140,13 +159,19 @@ const FormDescription = React.forwardRef<
{...props}
/>
);
});
};
FormDescription.displayName = "FormDescription";
const FormMessage = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
const FormMessage = (
{
ref,
className,
children,
...props
}: React.HTMLAttributes<HTMLParagraphElement> & {
ref: React.RefObject<HTMLParagraphElement>;
}
) => {
const { error, formMessageId } = useFormField();
const body = error ? String(error?.message) : children;
@@ -164,7 +189,7 @@ const FormMessage = React.forwardRef<
{body}
</p>
);
});
};
FormMessage.displayName = "FormMessage";
export {