Skip to content

Commit 338e0f6

Browse files
mnpqravenmnpqraven
committed
forwardref removal
1 parent 97c4081 commit 338e0f6

31 files changed

+549
-823
lines changed

‎packages/ui/primitive/accordion.tsx‎

Lines changed: 18 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,56 +7,46 @@ import { cn } from "lib";
77

88
const Accordion = AccordionPrimitive.Root;
99

10-
const AccordionItem = React.forwardRef<
11-
React.ElementRef<typeof AccordionPrimitive.Item>,
12-
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
13-
>(({ className, ...props }, ref) => (
14-
<AccordionPrimitive.Item
15-
className={cn("border-b", className)}
16-
ref={ref}
17-
{...props}
18-
/>
19-
));
20-
// @ts-ignore
21-
AccordionItem.displayName = "AccordionItem";
10+
const AccordionItem = ({
11+
className,
12+
...props
13+
}: React.ComponentPropsWithRef<typeof AccordionPrimitive.Item>) => (
14+
<AccordionPrimitive.Item className={cn("border-b", className)} {...props} />
15+
);
2216

23-
const AccordionTrigger = React.forwardRef<
24-
React.ElementRef<typeof AccordionPrimitive.Trigger>,
25-
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
26-
>(({ className, children, ...props }, ref) => (
17+
const AccordionTrigger = ({
18+
className,
19+
children,
20+
...props
21+
}: React.ComponentPropsWithRef<typeof AccordionPrimitive.Trigger>) => (
2722
<AccordionPrimitive.Header className="flex">
2823
<AccordionPrimitive.Trigger
2924
className={cn(
3025
"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
3126
className,
3227
)}
33-
ref={ref}
3428
{...props}
3529
>
3630
{children}
3731
<ChevronDownIcon className="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200" />
3832
</AccordionPrimitive.Trigger>
3933
</AccordionPrimitive.Header>
40-
));
41-
// @ts-ignore type override
42-
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
34+
);
4335

44-
const AccordionContent = React.forwardRef<
45-
React.ElementRef<typeof AccordionPrimitive.Content>,
46-
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
47-
>(({ className, children, ...props }, ref) => (
36+
const AccordionContent = ({
37+
className,
38+
children,
39+
...props
40+
}: React.ComponentPropsWithRef<typeof AccordionPrimitive.Content>) => (
4841
<AccordionPrimitive.Content
4942
className={cn(
5043
"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
5144
className,
5245
)}
53-
ref={ref}
5446
{...props}
5547
>
5648
<div className="pb-4 pt-0">{children}</div>
5749
</AccordionPrimitive.Content>
58-
));
59-
// @ts-ignore type override
60-
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
50+
);
6151

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

‎packages/ui/primitive/avatar.tsx‎

Lines changed: 15 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,49 +4,40 @@ import * as React from "react";
44
import * as AvatarPrimitive from "@radix-ui/react-avatar";
55
import { cn } from "lib";
66

7-
const Avatar = React.forwardRef<
8-
React.ElementRef<typeof AvatarPrimitive.Root>,
9-
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
10-
>(({ className, ...props }, ref) => (
7+
const Avatar = ({
8+
className,
9+
...props
10+
}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>) => (
1111
<AvatarPrimitive.Root
12-
ref={ref}
1312
className={cn(
1413
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
1514
className,
1615
)}
1716
{...props}
1817
/>
19-
));
20-
// @ts-ignore
21-
Avatar.displayName = AvatarPrimitive.Root.displayName;
18+
);
2219

23-
const AvatarImage = React.forwardRef<
24-
React.ElementRef<typeof AvatarPrimitive.Image>,
25-
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26-
>(({ className, ...props }, ref) => (
20+
const AvatarImage = ({
21+
className,
22+
...props
23+
}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>) => (
2724
<AvatarPrimitive.Image
28-
ref={ref}
2925
className={cn("aspect-square h-full w-full", className)}
3026
{...props}
3127
/>
32-
));
33-
// @ts-ignore
34-
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
28+
);
3529

36-
const AvatarFallback = React.forwardRef<
37-
React.ElementRef<typeof AvatarPrimitive.Fallback>,
38-
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
39-
>(({ className, ...props }, ref) => (
30+
const AvatarFallback = ({
31+
className,
32+
...props
33+
}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>) => (
4034
<AvatarPrimitive.Fallback
41-
ref={ref}
4235
className={cn(
4336
"bg-muted flex h-full w-full items-center justify-center rounded-full",
4437
className,
4538
)}
4639
{...props}
4740
/>
48-
));
49-
// @ts-ignore
50-
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
41+
);
5142

5243
export { Avatar, AvatarImage, AvatarFallback };

‎packages/ui/primitive/badge.tsx‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,11 @@ const badgeVariants = cva(
2424

2525
export interface BadgeProps
2626
extends React.HTMLAttributes<HTMLDivElement>,
27-
VariantProps<typeof badgeVariants> { }
28-
const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(function Badge(
29-
{ className, variant, ...props },
30-
ref,
31-
) {
27+
VariantProps<typeof badgeVariants> {}
28+
const Badge = function Badge({ className, variant, ...props }: BadgeProps) {
3229
return (
33-
<div
34-
className={cn(badgeVariants({ variant }), className)}
35-
{...props}
36-
ref={ref}
37-
/>
30+
<div className={cn(badgeVariants({ variant }), className)} {...props} />
3831
);
39-
});
32+
};
4033

4134
export { Badge, badgeVariants };

‎packages/ui/primitive/button.tsx‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -39,19 +39,20 @@ export interface ButtonProps
3939
asChild?: boolean;
4040
}
4141

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

5758
export { Button, buttonVariants };

‎packages/ui/primitive/calendar.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,5 @@ function Calendar({
5959
/>
6060
);
6161
}
62-
Calendar.displayName = "Calendar";
6362

6463
export { Calendar };

‎packages/ui/primitive/card.tsx‎

Lines changed: 34 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,59 @@
11
import * as React from "react";
22
import { cn } from "lib/utils";
33

4-
const Card = React.forwardRef<
5-
HTMLDivElement,
6-
React.HTMLAttributes<HTMLDivElement>
7-
>(({ className, ...props }, ref) => (
4+
const Card = ({
5+
className,
6+
...props
7+
}: React.HTMLAttributes<HTMLDivElement>) => (
88
<div
99
className={cn(
1010
"rounded-lg border bg-card text-card-foreground shadow-sm",
1111
className,
1212
)}
13-
ref={ref}
1413
{...props}
1514
/>
16-
));
17-
// @ts-ignore type override
18-
Card.displayName = "Card";
15+
);
1916

20-
const CardHeader = React.forwardRef<
21-
HTMLDivElement,
22-
React.HTMLAttributes<HTMLDivElement>
23-
>(({ className, ...props }, ref) => (
24-
<div
25-
className={cn("flex flex-col space-y-1.5 p-6", className)}
26-
ref={ref}
27-
{...props}
28-
/>
29-
));
30-
// @ts-ignore type override
31-
CardHeader.displayName = "CardHeader";
17+
const CardHeader = ({
18+
className,
19+
...props
20+
}: React.HTMLAttributes<HTMLDivElement>) => (
21+
<div className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
22+
);
3223

33-
const CardTitle = React.forwardRef<
34-
HTMLParagraphElement,
35-
React.HTMLAttributes<HTMLHeadingElement>
36-
>(({ className, ...props }, ref) => (
24+
const CardTitle = ({
25+
className,
26+
...props
27+
}: React.HTMLAttributes<HTMLHeadingElement>) => (
3728
<h3
3829
className={cn(
3930
"text-2xl font-semibold leading-none tracking-tight",
4031
className,
4132
)}
42-
ref={ref}
4333
{...props}
4434
/>
45-
));
46-
// @ts-ignore type override
47-
CardTitle.displayName = "CardTitle";
35+
);
4836

49-
const CardDescription = React.forwardRef<
50-
HTMLParagraphElement,
51-
React.HTMLAttributes<HTMLParagraphElement>
52-
>(({ className, ...props }, ref) => (
53-
<p
54-
className={cn("text-sm text-muted-foreground", className)}
55-
ref={ref}
56-
{...props}
57-
/>
58-
));
59-
// @ts-ignore type override
60-
CardDescription.displayName = "CardDescription";
37+
const CardDescription = ({
38+
className,
39+
...props
40+
}: React.HTMLAttributes<HTMLParagraphElement>) => (
41+
<p className={cn("text-sm text-muted-foreground", className)} {...props} />
42+
);
6143

62-
const CardContent = React.forwardRef<
63-
HTMLDivElement,
64-
React.HTMLAttributes<HTMLDivElement>
65-
>(({ className, ...props }, ref) => (
66-
<div className={cn("p-6 pt-0", className)} ref={ref} {...props} />
67-
));
68-
// @ts-ignore type override
69-
CardContent.displayName = "CardContent";
44+
const CardContent = ({
45+
className,
46+
...props
47+
}: React.HTMLAttributes<HTMLDivElement>) => (
48+
<div className={cn("p-6 pt-0", className)} {...props} />
49+
);
7050

71-
const CardFooter = React.forwardRef<
72-
HTMLDivElement,
73-
React.HTMLAttributes<HTMLDivElement>
74-
>(({ className, ...props }, ref) => (
75-
<div
76-
className={cn("flex items-center p-6 pt-0", className)}
77-
ref={ref}
78-
{...props}
79-
/>
80-
));
81-
// @ts-ignore type override
82-
CardFooter.displayName = "CardFooter";
51+
const CardFooter = ({
52+
className,
53+
...props
54+
}: React.HTMLAttributes<HTMLDivElement>) => (
55+
<div className={cn("flex items-center p-6 pt-0", className)} {...props} />
56+
);
8357

8458
export {
8559
Card,

‎packages/ui/primitive/checkbox.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,15 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
55
import { Check } from "lucide-react";
66
import { cn } from "lib";
77

8-
const Checkbox = React.forwardRef<
9-
React.ElementRef<typeof CheckboxPrimitive.Root>,
10-
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
11-
>(({ className, ...props }, ref) => (
8+
const Checkbox = ({
9+
className,
10+
...props
11+
}: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>) => (
1212
<CheckboxPrimitive.Root
1313
className={cn(
1414
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
1515
className,
1616
)}
17-
ref={ref}
1817
{...props}
1918
>
2019
<CheckboxPrimitive.Indicator
@@ -23,8 +22,6 @@ const Checkbox = React.forwardRef<
2322
<Check className="h-4 w-4" />
2423
</CheckboxPrimitive.Indicator>
2524
</CheckboxPrimitive.Root>
26-
));
27-
// @ts-ignore override
28-
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
25+
);
2926

3027
export { Checkbox };

0 commit comments

Comments
 (0)