refactor: complete migration to React 19 (#116)

Author: lumirlumir

package-lock.json

@@ -82,9 +82,9 @@
     "@types/eslint-scope": "^3.7.7",
     "@types/espree": "^10.1.0",
     "@types/esquery": "^1.5.4",
-    "@types/node": "^18.19.44",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/node": "^20",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "^4.4.1",
     "babel-plugin-react-compiler": "^19.1.0-rc.2",
     "eslint": "^9.25.1",

package.json

@@ -47,9 +47,9 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
 	};
 
 	return (
-		<ThemeProviderContext.Provider {...props} value={{ theme, setTheme }}>
+		<ThemeProviderContext {...props} value={{ theme, setTheme }}>
 			{children}
-		</ThemeProviderContext.Provider>
+		</ThemeProviderContext>
 	);
 };
 

src/components/theme-provider.tsx

@@ -8,22 +8,24 @@ import { cn } from "@/lib/utils";
 
 const Accordion = AccordionPrimitive.Root;
 
-const AccordionItem = React.forwardRef<
-	React.ElementRef<typeof AccordionPrimitive.Item>,
-	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
+const AccordionItem = ({
+	className,
+	ref,
+	...props
+}: React.ComponentPropsWithRef<typeof AccordionPrimitive.Item>) => (
 	<AccordionPrimitive.Item
 		ref={ref}
 		className={cn("border-b", className)}
 		{...props}
 	/>
-));
-AccordionItem.displayName = "AccordionItem";
-
-const AccordionTrigger = React.forwardRef<
-	React.ElementRef<typeof AccordionPrimitive.Trigger>,
-	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+);
+
+const AccordionTrigger = ({
+	className,
+	children,
+	ref,
+	...props
+}: React.ComponentPropsWithRef<typeof AccordionPrimitive.Trigger>) => (
 	<AccordionPrimitive.Header className="flex">
 		<AccordionPrimitive.Trigger
 			ref={ref}
@@ -37,22 +39,21 @@ const AccordionTrigger = React.forwardRef<
 			<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
 		</AccordionPrimitive.Trigger>
 	</AccordionPrimitive.Header>
-));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-
-const AccordionContent = React.forwardRef<
-	React.ElementRef<typeof AccordionPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+);
+
+const AccordionContent = ({
+	className,
+	children,
+	ref,
+	...props
+}: React.ComponentPropsWithRef<typeof AccordionPrimitive.Content>) => (
 	<AccordionPrimitive.Content
 		ref={ref}
 		className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
 		{...props}
 	>
 		<div className={cn("pb-4 pt-0", className)}>{children}</div>
 	</AccordionPrimitive.Content>
-));
-
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+);
 
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

src/components/ui/accordion.tsx

@@ -36,22 +36,27 @@ const buttonVariants = cva(
 
 export interface ButtonProps
 	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-		VariantProps<typeof buttonVariants> {
+		VariantProps<typeof buttonVariants>,
+		React.RefAttributes<HTMLButtonElement> {
 	asChild?: boolean;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-	({ className, variant, size, asChild = false, ...props }, ref) => {
-		const Comp = asChild ? Slot : "button";
-		return (
-			<Comp
-				className={cn(buttonVariants({ variant, size, className }))}
-				ref={ref}
-				{...props}
-			/>
-		);
-	},
-);
-Button.displayName = "Button";
+const Button = ({
+	className,
+	variant,
+	size,
+	asChild = false,
+	ref,
+	...props
+}: ButtonProps) => {
+	const Comp = asChild ? Slot : "button";
+	return (
+		<Comp
+			className={cn(buttonVariants({ variant, size, className }))}
+			ref={ref}
+			{...props}
+		/>
+	);
+};
 
 export { Button, buttonVariants };

src/components/ui/button.tsx

@@ -14,10 +14,11 @@ const DialogPortal = DialogPrimitive.Portal;
 
 const DialogClose = DialogPrimitive.Close;
 
-const DialogOverlay = React.forwardRef<
-	React.ElementRef<typeof DialogPrimitive.Overlay>,
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+const DialogOverlay = ({
+	className,
+	ref,
+	...props
+}: React.ComponentPropsWithRef<typeof DialogPrimitive.Overlay>) => (
 	<DialogPrimitive.Overlay
 		ref={ref}
 		className={cn(
@@ -26,13 +27,14 @@ const DialogOverlay = React.forwardRef<
 		)}
 		{...props}
 	/>
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+);
 
-const DialogContent = React.forwardRef<
-	React.ElementRef<typeof DialogPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+const DialogContent = ({
+	className,
+	children,
+	ref,
+	...props
+}: React.ComponentPropsWithRef<typeof DialogPrimitive.Content>) => (
 	<DialogPortal>
 		<DialogOverlay />
 		<DialogPrimitive.Content
@@ -50,8 +52,7 @@ const DialogContent = React.forwardRef<
 			</DialogPrimitive.Close>
 		</DialogPrimitive.Content>
 	</DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
+);
 
 const DialogHeader = ({
 	className,
@@ -65,7 +66,6 @@ const DialogHeader = ({
 		{...props}
 	/>
 );
-DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({
 	className,
@@ -79,12 +79,12 @@ const DialogFooter = ({
 		{...props}
 	/>
 );
-DialogFooter.displayName = "DialogFooter";
 
-const DialogTitle = React.forwardRef<
-	React.ElementRef<typeof DialogPrimitive.Title>,
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
+const DialogTitle = ({
+	className,
+	ref,
+	...props
+}: React.ComponentPropsWithRef<typeof DialogPrimitive.Title>) => (
 	<DialogPrimitive.Title
 		ref={ref}
 		className={cn(
@@ -93,20 +93,19 @@ const DialogTitle = React.forwardRef<
 		)}
 		{...props}
 	/>
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
+);
 
-const DialogDescription = React.forwardRef<
-	React.ElementRef<typeof DialogPrimitive.Description>,
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
+const DialogDescription = ({
+	className,
+	ref,
+	...props
+}: React.ComponentPropsWithRef<typeof DialogPrimitive.Description>) => (
 	<DialogPrimitive.Description
 		ref={ref}
 		className={cn("text-sm text-muted-foreground", className)}
 		{...props}
 	/>
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+);
 
 export {
 	Dialog,