Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

draft: upgrade to react 19 #875

Closed
wants to merge 5 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 0 additions & 11 deletions .vscode/remix.code-snippets
Original file line number Diff line number Diff line change
Expand Up @@ -56,17 +56,6 @@
"}",
],
},
"meta": {
"prefix": "/meta",
"scope": "typescriptreact,javascriptreact,typescript,javascript",
"body": [
"import type { MetaFunction } from '@remix-run/node'",
"",
"export const meta: MetaFunction<typeof loader> = ({ data }) => [{",
" title: 'Title',",
"}]",
],
},
"shouldRevalidate": {
"prefix": "/shouldRevalidate",
"scope": "typescriptreact,javascriptreact,typescript,javascript",
Expand Down
29 changes: 17 additions & 12 deletions app/components/ui/button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,20 +39,25 @@ export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean
ref?: React.RefObject<HTMLButtonElement>
}

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}
/>
)
},
)
const Button = ({
ref,
className,
variant,
size,
asChild = false,
...props
}: ButtonProps) => {
const Comp = asChild ? Slot : 'button'
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
{...props}
/>
)
}
Button.displayName = 'Button'

export { Button, buttonVariants }
11 changes: 6 additions & 5 deletions app/components/ui/checkbox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,11 @@ export type CheckboxProps = Omit<
type?: string
}

const Checkbox = React.forwardRef<
React.ElementRef<typeof CheckboxPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
const Checkbox = ({
ref,
className,
...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) => (
<CheckboxPrimitive.Root
ref={ref}
className={cn(
Expand All @@ -35,7 +36,7 @@ const Checkbox = React.forwardRef<
</svg>
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
))
)
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }
110 changes: 64 additions & 46 deletions app/components/ui/dropdown-menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,15 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

const DropdownMenuSubTrigger = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
inset?: boolean
}
>(({ className, inset, children, ...props }, ref) => (
const DropdownMenuSubTrigger = ({
ref,
className,
inset,
children,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
inset?: boolean
}) => (
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
Expand All @@ -33,14 +36,15 @@ const DropdownMenuSubTrigger = React.forwardRef<
{children}
<span className="ml-auto h-4 w-4">▶️</span>
</DropdownMenuPrimitive.SubTrigger>
))
)
DropdownMenuSubTrigger.displayName =
DropdownMenuPrimitive.SubTrigger.displayName

const DropdownMenuSubContent = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
const DropdownMenuSubContent = ({
ref,
className,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) => (
<DropdownMenuPrimitive.SubContent
ref={ref}
className={cn(
Expand All @@ -49,14 +53,16 @@ const DropdownMenuSubContent = React.forwardRef<
)}
{...props}
/>
))
)
DropdownMenuSubContent.displayName =
DropdownMenuPrimitive.SubContent.displayName

const DropdownMenuContent = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
const DropdownMenuContent = ({
ref,
className,
sideOffset = 4,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) => (
<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Content
ref={ref}
Expand All @@ -68,15 +74,17 @@ const DropdownMenuContent = React.forwardRef<
{...props}
/>
</DropdownMenuPrimitive.Portal>
))
)
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName

const DropdownMenuItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
inset?: boolean
}
>(({ className, inset, ...props }, ref) => (
const DropdownMenuItem = ({
ref,
className,
inset,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
inset?: boolean
}) => (
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
Expand All @@ -86,13 +94,16 @@ const DropdownMenuItem = React.forwardRef<
)}
{...props}
/>
))
)
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName

const DropdownMenuCheckboxItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
const DropdownMenuCheckboxItem = ({
ref,
className,
children,
checked,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) => (
<DropdownMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
Expand All @@ -118,14 +129,18 @@ const DropdownMenuCheckboxItem = React.forwardRef<
</span>
{children}
</DropdownMenuPrimitive.CheckboxItem>
))
)
DropdownMenuCheckboxItem.displayName =
DropdownMenuPrimitive.CheckboxItem.displayName

const DropdownMenuRadioItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
const DropdownMenuRadioItem = ({
ref,
className,
children,
...props
}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>>
}) => (
<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
Expand All @@ -141,15 +156,17 @@ const DropdownMenuRadioItem = React.forwardRef<
</span>
{children}
</DropdownMenuPrimitive.RadioItem>
))
)
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName

const DropdownMenuLabel = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
inset?: boolean
}
>(({ className, inset, ...props }, ref) => (
const DropdownMenuLabel = ({
ref,
className,
inset,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
inset?: boolean
}) => (
<DropdownMenuPrimitive.Label
ref={ref}
className={cn(
Expand All @@ -159,19 +176,20 @@ const DropdownMenuLabel = React.forwardRef<
)}
{...props}
/>
))
)
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName

const DropdownMenuSeparator = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
const DropdownMenuSeparator = ({
ref,
className,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) => (
<DropdownMenuPrimitive.Separator
ref={ref}
className={cn('-mx-1 my-1 h-px bg-muted', className)}
{...props}
/>
))
)
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName

const DropdownMenuShortcut = ({
Expand Down
44 changes: 24 additions & 20 deletions app/components/ui/input-otp.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,12 @@ import * as React from 'react'

import { cn } from '#app/utils/misc.tsx'

const InputOTP = React.forwardRef<
React.ElementRef<typeof OTPInput>,
React.ComponentPropsWithoutRef<typeof OTPInput>
>(({ className, containerClassName, ...props }, ref) => (
const InputOTP = ({
ref,
className,
containerClassName,
...props
}: React.ComponentProps<typeof OTPInput>) => (
<OTPInput
ref={ref}
containerClassName={cn(
Expand All @@ -16,21 +18,26 @@ const InputOTP = React.forwardRef<
className={cn('disabled:cursor-not-allowed', className)}
{...props}
/>
))
)
InputOTP.displayName = 'InputOTP'

const InputOTPGroup = React.forwardRef<
React.ElementRef<'div'>,
React.ComponentPropsWithoutRef<'div'>
>(({ className, ...props }, ref) => (
const InputOTPGroup = ({
ref,
className,
...props
}: React.ComponentProps<'div'>) => (
<div ref={ref} className={cn('flex items-center', className)} {...props} />
))
)
InputOTPGroup.displayName = 'InputOTPGroup'

const InputOTPSlot = React.forwardRef<
React.ElementRef<'div'>,
React.ComponentPropsWithoutRef<'div'> & { index: number }
>(({ index, className, ...props }, ref) => {
const InputOTPSlot = ({
ref,
index,
className,
...props
}: React.ComponentProps<'div'> & {
index: number
}) => {
const inputOTPContext = React.useContext(OTPInputContext)
const slot = inputOTPContext.slots[index]
if (!slot) throw new Error('Invalid slot index')
Expand All @@ -54,17 +61,14 @@ const InputOTPSlot = React.forwardRef<
)}
</div>
)
})
}
InputOTPSlot.displayName = 'InputOTPSlot'

const InputOTPSeparator = React.forwardRef<
React.ElementRef<'div'>,
React.ComponentPropsWithoutRef<'div'>
>(({ ...props }, ref) => (
const InputOTPSeparator = ({ ref, ...props }: React.ComponentProps<'div'>) => (
<div ref={ref} role="separator" {...props}>
-
</div>
))
)
InputOTPSeparator.displayName = 'InputOTPSeparator'

export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
32 changes: 16 additions & 16 deletions app/components/ui/input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,23 @@ import * as React from 'react'
import { cn } from '#app/utils/misc.tsx'

export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {}
extends React.InputHTMLAttributes<HTMLInputElement> {
ref?: React.RefObject<HTMLInputElement>
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm md:file:text-sm',
className,
)}
ref={ref}
{...props}
/>
)
},
)
const Input = ({ ref, className, type, ...props }: InputProps) => {
return (
<input
type={type}
className={cn(
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm md:file:text-sm',
className,
)}
ref={ref}
{...props}
/>
)
}
Input.displayName = 'Input'

export { Input }
Loading
Loading