Skip to content

Commit ffa0d3f

Browse files
nicodesnicodes
authored
Update React imports to use destructuring (#65)
Attempt to fix github/spark#1107 This changes all the react imports to use destructuring rather than `* as React`. This will hopefully no longer give use the `UseContext` error
1 parent 24175a2 commit ffa0d3f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+327
-323
lines changed

‎src/components/ui/accordion.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import * as React from "react"
1+
import { ComponentProps } from "react"
22
import * as AccordionPrimitive from "@radix-ui/react-accordion"
33
import { ChevronDownIcon } from "lucide-react"
44

55
import { cn } from "@/lib/utils"
66

77
function Accordion({
88
...props
9-
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
9+
}: ComponentProps<typeof AccordionPrimitive.Root>) {
1010
return <AccordionPrimitive.Root data-slot="accordion" {...props} />
1111
}
1212

1313
function AccordionItem({
1414
className,
1515
...props
16-
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
16+
}: ComponentProps<typeof AccordionPrimitive.Item>) {
1717
return (
1818
<AccordionPrimitive.Item
1919
data-slot="accordion-item"
@@ -27,7 +27,7 @@ function AccordionTrigger({
2727
className,
2828
children,
2929
...props
30-
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
30+
}: ComponentProps<typeof AccordionPrimitive.Trigger>) {
3131
return (
3232
<AccordionPrimitive.Header className="flex">
3333
<AccordionPrimitive.Trigger
@@ -49,7 +49,7 @@ function AccordionContent({
4949
className,
5050
children,
5151
...props
52-
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
52+
}: ComponentProps<typeof AccordionPrimitive.Content>) {
5353
return (
5454
<AccordionPrimitive.Content
5555
data-slot="accordion-content"

‎src/components/ui/alert-dialog.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
"use client"
22

3-
import * as React from "react"
3+
import { ComponentProps } from "react"
44
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
55

66
import { cn } from "@/lib/utils"
77
import { buttonVariants } from "@/components/ui/button"
88

99
function AlertDialog({
1010
...props
11-
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
11+
}: ComponentProps<typeof AlertDialogPrimitive.Root>) {
1212
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
1313
}
1414

1515
function AlertDialogTrigger({
1616
...props
17-
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
17+
}: ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
1818
return (
1919
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
2020
)
2121
}
2222

2323
function AlertDialogPortal({
2424
...props
25-
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
25+
}: ComponentProps<typeof AlertDialogPrimitive.Portal>) {
2626
return (
2727
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
2828
)
@@ -31,7 +31,7 @@ function AlertDialogPortal({
3131
function AlertDialogOverlay({
3232
className,
3333
...props
34-
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
34+
}: ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
3535
return (
3636
<AlertDialogPrimitive.Overlay
3737
data-slot="alert-dialog-overlay"
@@ -47,7 +47,7 @@ function AlertDialogOverlay({
4747
function AlertDialogContent({
4848
className,
4949
...props
50-
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
50+
}: ComponentProps<typeof AlertDialogPrimitive.Content>) {
5151
return (
5252
<AlertDialogPortal>
5353
<AlertDialogOverlay />
@@ -66,7 +66,7 @@ function AlertDialogContent({
6666
function AlertDialogHeader({
6767
className,
6868
...props
69-
}: React.ComponentProps<"div">) {
69+
}: ComponentProps<"div">) {
7070
return (
7171
<div
7272
data-slot="alert-dialog-header"
@@ -79,7 +79,7 @@ function AlertDialogHeader({
7979
function AlertDialogFooter({
8080
className,
8181
...props
82-
}: React.ComponentProps<"div">) {
82+
}: ComponentProps<"div">) {
8383
return (
8484
<div
8585
data-slot="alert-dialog-footer"
@@ -95,7 +95,7 @@ function AlertDialogFooter({
9595
function AlertDialogTitle({
9696
className,
9797
...props
98-
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
98+
}: ComponentProps<typeof AlertDialogPrimitive.Title>) {
9999
return (
100100
<AlertDialogPrimitive.Title
101101
data-slot="alert-dialog-title"
@@ -108,7 +108,7 @@ function AlertDialogTitle({
108108
function AlertDialogDescription({
109109
className,
110110
...props
111-
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
111+
}: ComponentProps<typeof AlertDialogPrimitive.Description>) {
112112
return (
113113
<AlertDialogPrimitive.Description
114114
data-slot="alert-dialog-description"
@@ -121,7 +121,7 @@ function AlertDialogDescription({
121121
function AlertDialogAction({
122122
className,
123123
...props
124-
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
124+
}: ComponentProps<typeof AlertDialogPrimitive.Action>) {
125125
return (
126126
<AlertDialogPrimitive.Action
127127
className={cn(buttonVariants(), className)}
@@ -133,7 +133,7 @@ function AlertDialogAction({
133133
function AlertDialogCancel({
134134
className,
135135
...props
136-
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
136+
}: ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
137137
return (
138138
<AlertDialogPrimitive.Cancel
139139
className={cn(buttonVariants({ variant: "outline" }), className)}

‎src/components/ui/alert.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import * as React from "react"
1+
import { ComponentProps } from "react"
22
import { cva, type VariantProps } from "class-variance-authority"
33

44
import { cn } from "@/lib/utils"
@@ -23,7 +23,7 @@ function Alert({
2323
className,
2424
variant,
2525
...props
26-
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
26+
}: ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
2727
return (
2828
<div
2929
data-slot="alert"
@@ -34,7 +34,7 @@ function Alert({
3434
)
3535
}
3636

37-
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
37+
function AlertTitle({ className, ...props }: ComponentProps<"div">) {
3838
return (
3939
<div
4040
data-slot="alert-title"
@@ -50,7 +50,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
5050
function AlertDescription({
5151
className,
5252
...props
53-
}: React.ComponentProps<"div">) {
53+
}: ComponentProps<"div">) {
5454
return (
5555
<div
5656
data-slot="alert-description"

‎src/components/ui/aspect-ratio.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1+
import { ComponentProps } from "react"
12
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
23

34
function AspectRatio({
45
...props
5-
}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
6+
}: ComponentProps<typeof AspectRatioPrimitive.Root>) {
67
return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
78
}
89

‎src/components/ui/avatar.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
"use client"
22

3-
import * as React from "react"
3+
import { ComponentProps } from "react"
44
import * as AvatarPrimitive from "@radix-ui/react-avatar"
55

66
import { cn } from "@/lib/utils"
77

88
function Avatar({
99
className,
1010
...props
11-
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
11+
}: ComponentProps<typeof AvatarPrimitive.Root>) {
1212
return (
1313
<AvatarPrimitive.Root
1414
data-slot="avatar"
@@ -24,7 +24,7 @@ function Avatar({
2424
function AvatarImage({
2525
className,
2626
...props
27-
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
27+
}: ComponentProps<typeof AvatarPrimitive.Image>) {
2828
return (
2929
<AvatarPrimitive.Image
3030
data-slot="avatar-image"
@@ -37,7 +37,7 @@ function AvatarImage({
3737
function AvatarFallback({
3838
className,
3939
...props
40-
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
40+
}: ComponentProps<typeof AvatarPrimitive.Fallback>) {
4141
return (
4242
<AvatarPrimitive.Fallback
4343
data-slot="avatar-fallback"

‎src/components/ui/badge.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import * as React from "react"
1+
import { ComponentProps } from "react"
22
import { Slot } from "@radix-ui/react-slot"
33
import { cva, type VariantProps } from "class-variance-authority"
44

@@ -30,7 +30,7 @@ function Badge({
3030
variant,
3131
asChild = false,
3232
...props
33-
}: React.ComponentProps<"span"> &
33+
}: ComponentProps<"span"> &
3434
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
3535
const Comp = asChild ? Slot : "span"
3636

‎src/components/ui/breadcrumb.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import * as React from "react"
1+
import { ComponentProps } from "react"
22
import { Slot } from "@radix-ui/react-slot"
33
import { ChevronRight, MoreHorizontal } from "lucide-react"
44

55
import { cn } from "@/lib/utils"
66

7-
function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
7+
function Breadcrumb({ ...props }: ComponentProps<"nav">) {
88
return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
99
}
1010

11-
function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
11+
function BreadcrumbList({ className, ...props }: ComponentProps<"ol">) {
1212
return (
1313
<ol
1414
data-slot="breadcrumb-list"
@@ -21,7 +21,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
2121
)
2222
}
2323

24-
function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
24+
function BreadcrumbItem({ className, ...props }: ComponentProps<"li">) {
2525
return (
2626
<li
2727
data-slot="breadcrumb-item"
@@ -35,7 +35,7 @@ function BreadcrumbLink({
3535
asChild,
3636
className,
3737
...props
38-
}: React.ComponentProps<"a"> & {
38+
}: ComponentProps<"a"> & {
3939
asChild?: boolean
4040
}) {
4141
const Comp = asChild ? Slot : "a"
@@ -49,7 +49,7 @@ function BreadcrumbLink({
4949
)
5050
}
5151

52-
function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
52+
function BreadcrumbPage({ className, ...props }: ComponentProps<"span">) {
5353
return (
5454
<span
5555
data-slot="breadcrumb-page"
@@ -66,7 +66,7 @@ function BreadcrumbSeparator({
6666
children,
6767
className,
6868
...props
69-
}: React.ComponentProps<"li">) {
69+
}: ComponentProps<"li">) {
7070
return (
7171
<li
7272
data-slot="breadcrumb-separator"
@@ -83,7 +83,7 @@ function BreadcrumbSeparator({
8383
function BreadcrumbEllipsis({
8484
className,
8585
...props
86-
}: React.ComponentProps<"span">) {
86+
}: ComponentProps<"span">) {
8787
return (
8888
<span
8989
data-slot="breadcrumb-ellipsis"

‎src/components/ui/button.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import * as React from "react"
1+
import { ComponentProps } from "react"
22
import { Slot } from "@radix-ui/react-slot"
33
import { cva, type VariantProps } from "class-variance-authority"
44

@@ -41,7 +41,7 @@ function Button({
4141
size,
4242
asChild = false,
4343
...props
44-
}: React.ComponentProps<"button"> &
44+
}: ComponentProps<"button"> &
4545
VariantProps<typeof buttonVariants> & {
4646
asChild?: boolean
4747
}) {

‎src/components/ui/calendar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import * as React from "react"
1+
import { ComponentProps } from "react"
22
import { ChevronLeft, ChevronRight } from "lucide-react"
33
import { DayPicker } from "react-day-picker"
44

@@ -10,7 +10,7 @@ function Calendar({
1010
classNames,
1111
showOutsideDays = true,
1212
...props
13-
}: React.ComponentProps<typeof DayPicker>) {
13+
}: ComponentProps<typeof DayPicker>) {
1414
return (
1515
<DayPicker
1616
showOutsideDays={showOutsideDays}

‎src/components/ui/card.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import * as React from "react"
1+
import { ComponentProps } from "react"
22

33
import { cn } from "@/lib/utils"
44

5-
function Card({ className, ...props }: React.ComponentProps<"div">) {
5+
function Card({ className, ...props }: ComponentProps<"div">) {
66
return (
77
<div
88
data-slot="card"
@@ -15,7 +15,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
1515
)
1616
}
1717

18-
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
18+
function CardHeader({ className, ...props }: ComponentProps<"div">) {
1919
return (
2020
<div
2121
data-slot="card-header"
@@ -28,7 +28,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
2828
)
2929
}
3030

31-
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
31+
function CardTitle({ className, ...props }: ComponentProps<"div">) {
3232
return (
3333
<div
3434
data-slot="card-title"
@@ -38,7 +38,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
3838
)
3939
}
4040

41-
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
41+
function CardDescription({ className, ...props }: ComponentProps<"div">) {
4242
return (
4343
<div
4444
data-slot="card-description"
@@ -48,7 +48,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
4848
)
4949
}
5050

51-
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
51+
function CardAction({ className, ...props }: ComponentProps<"div">) {
5252
return (
5353
<div
5454
data-slot="card-action"
@@ -61,7 +61,7 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
6161
)
6262
}
6363

64-
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
64+
function CardContent({ className, ...props }: ComponentProps<"div">) {
6565
return (
6666
<div
6767
data-slot="card-content"
@@ -71,7 +71,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
7171
)
7272
}
7373

74-
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
74+
function CardFooter({ className, ...props }: ComponentProps<"div">) {
7575
return (
7676
<div
7777
data-slot="card-footer"

0 commit comments

Comments
 (0)