refactor: migrate UI components to React 19

2025-12-07 04:19:22 +00:00 · 2025-03-04 20:29:25 +03:00
parent 232f565cb7
commit 210c20eb65
42 changed files with 2456 additions and 2031 deletions
--- a/demo/nextjs/components/ui/navigation-menu.tsx
+++ b/demo/nextjs/components/ui/navigation-menu.tsx
@@ -5,37 +5,44 @@ import { cva } from "class-variance-authority";

 import { cn } from "@/lib/utils";

-const NavigationMenu = React.forwardRef<
-	React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-	<NavigationMenuPrimitive.Root
-		ref={ref}
-		className={cn(
-			"relative z-10 flex max-w-max flex-1 items-center justify-center",
-			className,
-		)}
-		{...props}
-	>
-		{children}
-		<NavigationMenuViewport />
-	</NavigationMenuPrimitive.Root>
-));
+const NavigationMenu = (
+    {
+        ref,
+        className,
+        children,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root> & {
+        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.Root>>;
+    }
+) => (<NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+        "relative z-10 flex max-w-max flex-1 items-center justify-center",
+        className,
+    )}
+    {...props}
+>
+    {children}
+    <NavigationMenuViewport />
+</NavigationMenuPrimitive.Root>);
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;

-const NavigationMenuList = React.forwardRef<
-	React.ElementRef<typeof NavigationMenuPrimitive.List>,
-	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
->(({ className, ...props }, ref) => (
-	<NavigationMenuPrimitive.List
-		ref={ref}
-		className={cn(
-			"group flex flex-1 list-none items-center justify-center space-x-1",
-			className,
-		)}
-		{...props}
-	/>
-));
+const NavigationMenuList = (
+    {
+        ref,
+        className,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List> & {
+        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.List>>;
+    }
+) => (<NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+        "group flex flex-1 list-none items-center justify-center space-x-1",
+        className,
+    )}
+    {...props}
+/>);
 NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;

 const NavigationMenuItem = NavigationMenuPrimitive.Item;
@@ -44,74 +51,87 @@ const navigationMenuTriggerStyle = cva(
 	"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
 );

-const NavigationMenuTrigger = React.forwardRef<
-	React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-	<NavigationMenuPrimitive.Trigger
-		ref={ref}
-		className={cn(navigationMenuTriggerStyle(), "group", className)}
-		{...props}
-	>
-		{children}{" "}
-		<ChevronDownIcon
-			className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
-			aria-hidden="true"
-		/>
-	</NavigationMenuPrimitive.Trigger>
-));
+const NavigationMenuTrigger = (
+    {
+        ref,
+        className,
+        children,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger> & {
+        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.Trigger>>;
+    }
+) => (<NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+>
+    {children}{" "}
+    <ChevronDownIcon
+        className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+    />
+</NavigationMenuPrimitive.Trigger>);
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;

-const NavigationMenuContent = React.forwardRef<
-	React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-	<NavigationMenuPrimitive.Content
-		ref={ref}
-		className={cn(
-			"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
-			className,
-		)}
-		{...props}
-	/>
-));
+const NavigationMenuContent = (
+    {
+        ref,
+        className,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content> & {
+        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.Content>>;
+    }
+) => (<NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+        "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+        className,
+    )}
+    {...props}
+/>);
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;

 const NavigationMenuLink = NavigationMenuPrimitive.Link;

-const NavigationMenuViewport = React.forwardRef<
-	React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
->(({ className, ...props }, ref) => (
-	<div className={cn("absolute left-0 top-full flex justify-center")}>
-		<NavigationMenuPrimitive.Viewport
-			className={cn(
-				"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
-				className,
-			)}
-			ref={ref}
-			{...props}
-		/>
-	</div>
-));
+const NavigationMenuViewport = (
+    {
+        ref,
+        className,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport> & {
+        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.Viewport>>;
+    }
+) => (<div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+        className={cn(
+            "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+            className,
+        )}
+        ref={ref}
+        {...props}
+    />
+</div>);
 NavigationMenuViewport.displayName =
 	NavigationMenuPrimitive.Viewport.displayName;

-const NavigationMenuIndicator = React.forwardRef<
-	React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
->(({ className, ...props }, ref) => (
-	<NavigationMenuPrimitive.Indicator
-		ref={ref}
-		className={cn(
-			"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
-			className,
-		)}
-		{...props}
-	>
-		<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
-	</NavigationMenuPrimitive.Indicator>
-));
+const NavigationMenuIndicator = (
+    {
+        ref,
+        className,
+        ...props
+    }: React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator> & {
+        ref: React.RefObject<React.ElementRef<typeof NavigationMenuPrimitive.Indicator>>;
+    }
+) => (<NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+        "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+        className,
+    )}
+    {...props}
+>
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+</NavigationMenuPrimitive.Indicator>);
 NavigationMenuIndicator.displayName =
 	NavigationMenuPrimitive.Indicator.displayName;