refactor: migrate UI components to React 19

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

View File

@@ -15,10 +15,13 @@ const SheetClose = SheetPrimitive.Close;
const SheetPortal = SheetPrimitive.Portal;
const SheetOverlay = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
const SheetOverlay = ({
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> & {
ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Overlay>>;
}) => (
<SheetPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -27,7 +30,7 @@ const SheetOverlay = React.forwardRef<
{...props}
ref={ref}
/>
));
);
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
const sheetVariants = cva(
@@ -53,10 +56,15 @@ interface SheetContentProps
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
VariantProps<typeof sheetVariants> {}
const SheetContent = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Content>,
SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
const SheetContent = ({
ref,
side = "right",
className,
children,
...props
}: SheetContentProps & {
ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Content>>;
}) => (
<SheetPortal>
<SheetOverlay />
<SheetPrimitive.Content
@@ -71,7 +79,7 @@ const SheetContent = React.forwardRef<
{children}
</SheetPrimitive.Content>
</SheetPortal>
));
);
SheetContent.displayName = SheetPrimitive.Content.displayName;
const SheetHeader = ({
@@ -102,28 +110,34 @@ const SheetFooter = ({
);
SheetFooter.displayName = "SheetFooter";
const SheetTitle = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
const SheetTitle = ({
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> & {
ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Title>>;
}) => (
<SheetPrimitive.Title
ref={ref}
className={cn("text-lg font-semibold text-foreground", className)}
{...props}
/>
));
);
SheetTitle.displayName = SheetPrimitive.Title.displayName;
const SheetDescription = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
>(({ className, ...props }, ref) => (
const SheetDescription = ({
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> & {
ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Description>>;
}) => (
<SheetPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
));
);
SheetDescription.displayName = SheetPrimitive.Description.displayName;
export {