Skip to content

Commit 72aa289

Browse files
lumirlumirlumirlumir
authored
refactor: complete migration to React 19 (#116)
1 parent 92ec3a3 commit 72aa289

15 files changed

+307
-297
lines changed

‎package-lock.json

Lines changed: 18 additions & 26 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -82,9 +82,9 @@
8282
"@types/eslint-scope": "^3.7.7",
8383
"@types/espree": "^10.1.0",
8484
"@types/esquery": "^1.5.4",
85-
"@types/node": "^18.19.44",
86-
"@types/react": "^18.3.3",
87-
"@types/react-dom": "^18.3.0",
85+
"@types/node": "^20",
86+
"@types/react": "^19.1.8",
87+
"@types/react-dom": "^19.1.6",
8888
"@vitejs/plugin-react": "^4.4.1",
8989
"babel-plugin-react-compiler": "^19.1.0-rc.2",
9090
"eslint": "^9.25.1",

‎src/components/theme-provider.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,9 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
4747
};
4848

4949
return (
50-
<ThemeProviderContext.Provider {...props} value={{ theme, setTheme }}>
50+
<ThemeProviderContext {...props} value={{ theme, setTheme }}>
5151
{children}
52-
</ThemeProviderContext.Provider>
52+
</ThemeProviderContext>
5353
);
5454
};
5555

‎src/components/ui/accordion.tsx

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,24 @@ import { cn } from "@/lib/utils";
88

99
const Accordion = AccordionPrimitive.Root;
1010

11-
const AccordionItem = React.forwardRef<
12-
React.ElementRef<typeof AccordionPrimitive.Item>,
13-
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
14-
>(({ className, ...props }, ref) => (
11+
const AccordionItem = ({
12+
className,
13+
ref,
14+
...props
15+
}: React.ComponentPropsWithRef<typeof AccordionPrimitive.Item>) => (
1516
<AccordionPrimitive.Item
1617
ref={ref}
1718
className={cn("border-b", className)}
1819
{...props}
1920
/>
20-
));
21-
AccordionItem.displayName = "AccordionItem";
22-
23-
const AccordionTrigger = React.forwardRef<
24-
React.ElementRef<typeof AccordionPrimitive.Trigger>,
25-
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
26-
>(({ className, children, ...props }, ref) => (
21+
);
22+
23+
const AccordionTrigger = ({
24+
className,
25+
children,
26+
ref,
27+
...props
28+
}: React.ComponentPropsWithRef<typeof AccordionPrimitive.Trigger>) => (
2729
<AccordionPrimitive.Header className="flex">
2830
<AccordionPrimitive.Trigger
2931
ref={ref}
@@ -37,22 +39,21 @@ const AccordionTrigger = React.forwardRef<
3739
<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
3840
</AccordionPrimitive.Trigger>
3941
</AccordionPrimitive.Header>
40-
));
41-
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
42-
43-
const AccordionContent = React.forwardRef<
44-
React.ElementRef<typeof AccordionPrimitive.Content>,
45-
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
46-
>(({ className, children, ...props }, ref) => (
42+
);
43+
44+
const AccordionContent = ({
45+
className,
46+
children,
47+
ref,
48+
...props
49+
}: React.ComponentPropsWithRef<typeof AccordionPrimitive.Content>) => (
4750
<AccordionPrimitive.Content
4851
ref={ref}
4952
className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
5053
{...props}
5154
>
5255
<div className={cn("pb-4 pt-0", className)}>{children}</div>
5356
</AccordionPrimitive.Content>
54-
));
55-
56-
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
57+
);
5758

5859
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

‎src/components/ui/button.tsx

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -36,22 +36,27 @@ const buttonVariants = cva(
3636

3737
export interface ButtonProps
3838
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39-
VariantProps<typeof buttonVariants> {
39+
VariantProps<typeof buttonVariants>,
40+
React.RefAttributes<HTMLButtonElement> {
4041
asChild?: boolean;
4142
}
4243

43-
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44-
({ className, variant, size, asChild = false, ...props }, ref) => {
45-
const Comp = asChild ? Slot : "button";
46-
return (
47-
<Comp
48-
className={cn(buttonVariants({ variant, size, className }))}
49-
ref={ref}
50-
{...props}
51-
/>
52-
);
53-
},
54-
);
55-
Button.displayName = "Button";
44+
const Button = ({
45+
className,
46+
variant,
47+
size,
48+
asChild = false,
49+
ref,
50+
...props
51+
}: ButtonProps) => {
52+
const Comp = asChild ? Slot : "button";
53+
return (
54+
<Comp
55+
className={cn(buttonVariants({ variant, size, className }))}
56+
ref={ref}
57+
{...props}
58+
/>
59+
);
60+
};
5661

5762
export { Button, buttonVariants };

‎src/components/ui/dialog.tsx

Lines changed: 25 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,11 @@ const DialogPortal = DialogPrimitive.Portal;
1414

1515
const DialogClose = DialogPrimitive.Close;
1616

17-
const DialogOverlay = React.forwardRef<
18-
React.ElementRef<typeof DialogPrimitive.Overlay>,
19-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
20-
>(({ className, ...props }, ref) => (
17+
const DialogOverlay = ({
18+
className,
19+
ref,
20+
...props
21+
}: React.ComponentPropsWithRef<typeof DialogPrimitive.Overlay>) => (
2122
<DialogPrimitive.Overlay
2223
ref={ref}
2324
className={cn(
@@ -26,13 +27,14 @@ const DialogOverlay = React.forwardRef<
2627
)}
2728
{...props}
2829
/>
29-
));
30-
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
30+
);
3131

32-
const DialogContent = React.forwardRef<
33-
React.ElementRef<typeof DialogPrimitive.Content>,
34-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
35-
>(({ className, children, ...props }, ref) => (
32+
const DialogContent = ({
33+
className,
34+
children,
35+
ref,
36+
...props
37+
}: React.ComponentPropsWithRef<typeof DialogPrimitive.Content>) => (
3638
<DialogPortal>
3739
<DialogOverlay />
3840
<DialogPrimitive.Content
@@ -50,8 +52,7 @@ const DialogContent = React.forwardRef<
5052
</DialogPrimitive.Close>
5153
</DialogPrimitive.Content>
5254
</DialogPortal>
53-
));
54-
DialogContent.displayName = DialogPrimitive.Content.displayName;
55+
);
5556

5657
const DialogHeader = ({
5758
className,
@@ -65,7 +66,6 @@ const DialogHeader = ({
6566
{...props}
6667
/>
6768
);
68-
DialogHeader.displayName = "DialogHeader";
6969

7070
const DialogFooter = ({
7171
className,
@@ -79,12 +79,12 @@ const DialogFooter = ({
7979
{...props}
8080
/>
8181
);
82-
DialogFooter.displayName = "DialogFooter";
8382

84-
const DialogTitle = React.forwardRef<
85-
React.ElementRef<typeof DialogPrimitive.Title>,
86-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
87-
>(({ className, ...props }, ref) => (
83+
const DialogTitle = ({
84+
className,
85+
ref,
86+
...props
87+
}: React.ComponentPropsWithRef<typeof DialogPrimitive.Title>) => (
8888
<DialogPrimitive.Title
8989
ref={ref}
9090
className={cn(
@@ -93,20 +93,19 @@ const DialogTitle = React.forwardRef<
9393
)}
9494
{...props}
9595
/>
96-
));
97-
DialogTitle.displayName = DialogPrimitive.Title.displayName;
96+
);
9897

99-
const DialogDescription = React.forwardRef<
100-
React.ElementRef<typeof DialogPrimitive.Description>,
101-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
102-
>(({ className, ...props }, ref) => (
98+
const DialogDescription = ({
99+
className,
100+
ref,
101+
...props
102+
}: React.ComponentPropsWithRef<typeof DialogPrimitive.Description>) => (
103103
<DialogPrimitive.Description
104104
ref={ref}
105105
className={cn("text-sm text-muted-foreground", className)}
106106
{...props}
107107
/>
108-
));
109-
DialogDescription.displayName = DialogPrimitive.Description.displayName;
108+
);
110109

111110
export {
112111
Dialog,

0 commit comments

Comments
 (0)