react 19

nichtsam · Dec 16, 2024 · aa477fa · aa477fa
1 parent 971818c
commit aa477fa
Show file tree

Hide file tree

Showing 12 changed files with 473 additions and 562 deletions.
diff --git a/app/components/error-boundary.tsx b/app/components/error-boundary.tsx
@@ -7,20 +7,21 @@ import {
 	type ErrorResponse,
 	type Location,
 } from '@remix-run/react'
+import { type ReactElement } from 'react'
 import { getErrorMessage } from '#app/utils/error.ts'
 import { Icon } from './ui/icon.tsx'
 
 type StatusHandler = (info: {
 	error: ErrorResponse
 	params: Record<string, string | undefined>
 	location: Location
-}) => JSX.Element | null
+}) => ReactElement | null
 
 type UnexpectedErrorHandler = (info: {
 	error: unknown
 	params: Record<string, string | undefined>
 	location: Location
-}) => JSX.Element | null
+}) => ReactElement | null
 
 export const GeneralErrorBoundary = ({
 	defaultStatusHandler,

diff --git a/app/components/ui/avatar.tsx b/app/components/ui/avatar.tsx
@@ -4,7 +4,7 @@ import * as React from 'react'
 import { cn } from '#app/utils/ui.ts'
 
 const Avatar = React.forwardRef<
-	React.ElementRef<typeof AvatarPrimitive.Root>,
+	React.ComponentRef<typeof AvatarPrimitive.Root>,
 	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
 >(({ className, ...props }, ref) => (
 	<AvatarPrimitive.Root
@@ -19,7 +19,7 @@ const Avatar = React.forwardRef<
 Avatar.displayName = AvatarPrimitive.Root.displayName
 
 const AvatarImage = React.forwardRef<
-	React.ElementRef<typeof AvatarPrimitive.Image>,
+	React.ComponentRef<typeof AvatarPrimitive.Image>,
 	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
 >(({ className, ...props }, ref) => (
 	<AvatarPrimitive.Image
@@ -31,7 +31,7 @@ const AvatarImage = React.forwardRef<
 AvatarImage.displayName = AvatarPrimitive.Image.displayName
 
 const AvatarFallback = React.forwardRef<
-	React.ElementRef<typeof AvatarPrimitive.Fallback>,
+	React.ComponentRef<typeof AvatarPrimitive.Fallback>,
 	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
 >(({ className, ...props }, ref) => (
 	<AvatarPrimitive.Fallback

diff --git a/app/components/ui/checkbox.tsx b/app/components/ui/checkbox.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import { cn } from '#app/utils/ui.ts'
 
 const Checkbox = React.forwardRef<
-	React.ElementRef<typeof CheckboxPrimitive.Root>,
+	React.ComponentRef<typeof CheckboxPrimitive.Root>,
 	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
 >(({ className, ...props }, ref) => (
 	<CheckboxPrimitive.Root

diff --git a/app/components/ui/drawer.tsx b/app/components/ui/drawer.tsx
@@ -21,7 +21,7 @@ const DrawerPortal = DrawerPrimitive.Portal
 const DrawerClose = DrawerPrimitive.Close
 
 const DrawerOverlay = React.forwardRef<
-	React.ElementRef<typeof DrawerPrimitive.Overlay>,
+	React.ComponentRef<typeof DrawerPrimitive.Overlay>,
 	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
 	<DrawerPrimitive.Overlay
@@ -33,7 +33,7 @@ const DrawerOverlay = React.forwardRef<
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
 
 const DrawerContent = React.forwardRef<
-	React.ElementRef<typeof DrawerPrimitive.Content>,
+	React.ComponentRef<typeof DrawerPrimitive.Content>,
 	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
 	<DrawerPortal>
@@ -76,7 +76,7 @@ const DrawerFooter = ({
 DrawerFooter.displayName = 'DrawerFooter'
 
 const DrawerTitle = React.forwardRef<
-	React.ElementRef<typeof DrawerPrimitive.Title>,
+	React.ComponentRef<typeof DrawerPrimitive.Title>,
 	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
 >(({ className, ...props }, ref) => (
 	<DrawerPrimitive.Title
@@ -91,7 +91,7 @@ const DrawerTitle = React.forwardRef<
 DrawerTitle.displayName = DrawerPrimitive.Title.displayName
 
 const DrawerDescription = React.forwardRef<
-	React.ElementRef<typeof DrawerPrimitive.Description>,
+	React.ComponentRef<typeof DrawerPrimitive.Description>,
 	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
 >(({ className, ...props }, ref) => (
 	<DrawerPrimitive.Description

diff --git a/app/components/ui/dropdown-menu.tsx b/app/components/ui/dropdown-menu.tsx
@@ -21,7 +21,7 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 
 const DropdownMenuSubTrigger = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+	React.ComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,
 	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 		inset?: boolean
 	}
@@ -43,7 +43,7 @@ DropdownMenuSubTrigger.displayName =
 	DropdownMenuPrimitive.SubTrigger.displayName
 
 const DropdownMenuSubContent = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+	React.ComponentRef<typeof DropdownMenuPrimitive.SubContent>,
 	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
 	<DropdownMenuPrimitive.SubContent
@@ -59,7 +59,7 @@ DropdownMenuSubContent.displayName =
 	DropdownMenuPrimitive.SubContent.displayName
 
 const DropdownMenuContent = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+	React.ComponentRef<typeof DropdownMenuPrimitive.Content>,
 	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
 	<DropdownMenuPrimitive.Portal>
@@ -78,7 +78,7 @@ const DropdownMenuContent = React.forwardRef<
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 
 const DropdownMenuItem = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+	React.ComponentRef<typeof DropdownMenuPrimitive.Item>,
 	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 		inset?: boolean
 	}
@@ -96,7 +96,7 @@ const DropdownMenuItem = React.forwardRef<
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 
 const DropdownMenuCheckboxItem = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+	React.ComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,
 	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 >(({ className, children, checked, ...props }, ref) => (
 	<DropdownMenuPrimitive.CheckboxItem
@@ -120,7 +120,7 @@ DropdownMenuCheckboxItem.displayName =
 	DropdownMenuPrimitive.CheckboxItem.displayName
 
 const DropdownMenuRadioItem = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+	React.ComponentRef<typeof DropdownMenuPrimitive.RadioItem>,
 	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
 >(({ className, children, ...props }, ref) => (
 	<DropdownMenuPrimitive.RadioItem
@@ -142,7 +142,7 @@ const DropdownMenuRadioItem = React.forwardRef<
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
 
 const DropdownMenuLabel = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+	React.ComponentRef<typeof DropdownMenuPrimitive.Label>,
 	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
 		inset?: boolean
 	}
@@ -160,7 +160,7 @@ const DropdownMenuLabel = React.forwardRef<
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
 
 const DropdownMenuSeparator = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+	React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,
 	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
 >(({ className, ...props }, ref) => (
 	<DropdownMenuPrimitive.Separator

diff --git a/app/components/ui/label.tsx b/app/components/ui/label.tsx
@@ -9,7 +9,7 @@ const labelVariants = cva(
 )
 
 const Label = React.forwardRef<
-	React.ElementRef<typeof LabelPrimitive.Root>,
+	React.ComponentRef<typeof LabelPrimitive.Root>,
 	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
 		VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (

diff --git a/app/components/ui/navigation-menu.tsx b/app/components/ui/navigation-menu.tsx
@@ -6,7 +6,7 @@ import * as React from 'react'
 import { cn } from '#app/utils/ui.ts'
 
 const NavigationMenu = React.forwardRef<
-	React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+	React.ComponentRef<typeof NavigationMenuPrimitive.Root>,
 	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
 	<NavigationMenuPrimitive.Root
@@ -24,7 +24,7 @@ const NavigationMenu = React.forwardRef<
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
 
 const NavigationMenuList = React.forwardRef<
-	React.ElementRef<typeof NavigationMenuPrimitive.List>,
+	React.ComponentRef<typeof NavigationMenuPrimitive.List>,
 	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
 >(({ className, ...props }, ref) => (
 	<NavigationMenuPrimitive.List
@@ -45,7 +45,7 @@ const navigationMenuTriggerStyle = cva(
 )
 
 const NavigationMenuTrigger = React.forwardRef<
-	React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+	React.ComponentRef<typeof NavigationMenuPrimitive.Trigger>,
 	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
 	<NavigationMenuPrimitive.Trigger
@@ -63,7 +63,7 @@ const NavigationMenuTrigger = React.forwardRef<
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
 
 const NavigationMenuContent = React.forwardRef<
-	React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+	React.ComponentRef<typeof NavigationMenuPrimitive.Content>,
 	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
 >(({ className, ...props }, ref) => (
 	<NavigationMenuPrimitive.Content
@@ -80,7 +80,7 @@ NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
 const NavigationMenuLink = NavigationMenuPrimitive.Link
 
 const NavigationMenuViewport = React.forwardRef<
-	React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+	React.ComponentRef<typeof NavigationMenuPrimitive.Viewport>,
 	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 >(({ className, ...props }, ref) => (
 	<div className={cn('absolute left-0 top-full flex justify-center')}>
@@ -98,7 +98,7 @@ NavigationMenuViewport.displayName =
 	NavigationMenuPrimitive.Viewport.displayName
 
 const NavigationMenuIndicator = React.forwardRef<
-	React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+	React.ComponentRef<typeof NavigationMenuPrimitive.Indicator>,
 	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
 >(({ className, ...props }, ref) => (
 	<NavigationMenuPrimitive.Indicator

diff --git a/app/components/ui/progress.tsx b/app/components/ui/progress.tsx
@@ -4,7 +4,7 @@ import * as React from 'react'
 import { cn } from '#app/utils/ui.ts'
 
 const Progress = React.forwardRef<
-	React.ElementRef<typeof ProgressPrimitive.Root>,
+	React.ComponentRef<typeof ProgressPrimitive.Root>,
 	React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
 >(({ className, value, ...props }, ref) => (
 	<ProgressPrimitive.Root

diff --git a/app/components/ui/scroll-area.tsx b/app/components/ui/scroll-area.tsx
@@ -4,7 +4,7 @@ import * as React from 'react'
 import { cn } from '#app/utils/ui.ts'
 
 const ScrollArea = React.forwardRef<
-	React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+	React.ComponentRef<typeof ScrollAreaPrimitive.Root>,
 	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
 	<ScrollAreaPrimitive.Root
@@ -22,7 +22,7 @@ const ScrollArea = React.forwardRef<
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
 
 const ScrollBar = React.forwardRef<
-	React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+	React.ComponentRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
 	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
 >(({ className, orientation = 'vertical', ...props }, ref) => (
 	<ScrollAreaPrimitive.ScrollAreaScrollbar

diff --git a/app/components/ui/tooltip.tsx b/app/components/ui/tooltip.tsx
@@ -10,7 +10,7 @@ const Tooltip = TooltipPrimitive.Root
 const TooltipTrigger = TooltipPrimitive.Trigger
 
 const TooltipContent = React.forwardRef<
-	React.ElementRef<typeof TooltipPrimitive.Content>,
+	React.ComponentRef<typeof TooltipPrimitive.Content>,
 	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
 	<TooltipPrimitive.Content

diff --git a/package.json b/package.json
@@ -77,8 +77,8 @@
     "nanoid": "5.0.8",
     "p-queue": "8.0.1",
     "ramda": "0.30.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "reading-time": "1.5.0",
     "remix-auth": "3.7.0",
     "remix-auth-discord": "1.4.1",
@@ -105,8 +105,8 @@
     "@types/morgan": "1.9.9",
     "@types/node": "22.9.1",
     "@types/ramda": "0.30.2",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.2",
     "@types/source-map-support": "0.5.10",
     "@vitest/coverage-v8": "2.1.5",
     "autoprefixer": "10.4.20",