Skip to content

Commit bea5da3

Browse files
EhespEhesp
committed
test(shadcn): Update shadcn components to mock otp w/ window
1 parent e6eed4d commit bea5da3

Some content is hidden

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

73 files changed

+1585
-2311
lines changed

‎examples/shadcn/add-all.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import parser from "yargs-parser";
2+
import readline from "node:readline";
3+
import registryJson from "../../packages/shadcn/registry-spec.json";
4+
import { execSync } from "node:child_process";
5+
6+
const components = registryJson.items.map((item) => item.name);
7+
const args = parser(process.argv.slice(2));
8+
const prefix = String(args.prefix) || "@dev";
9+
10+
const rl = readline.createInterface({
11+
input: process.stdin,
12+
output: process.stdout,
13+
});
14+
15+
const items = components
16+
.map((component) => {
17+
return `${prefix}/${component}`;
18+
})
19+
.join(" ");
20+
21+
rl.question(
22+
`Add ${components.length} components. This will overrwrite all existing files. Continue? (y/N) `,
23+
(answer: unknown) => {
24+
const answerString = String(answer || "n").toLowerCase();
25+
26+
if (answerString === "y") {
27+
try {
28+
execSync(`pnpm dlx shadcn@latest add -y -o -a ${items}`, { stdio: "inherit" });
29+
process.exit(0);
30+
} catch (error) {
31+
console.error(error);
32+
process.exit(1);
33+
}
34+
}
35+
36+
console.log("Aborting...");
37+
process.exit(0);
38+
}
39+
);

‎examples/shadcn/package.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
"version": "0.0.0",
55
"type": "module",
66
"scripts": {
7-
"dev": "vite"
7+
"dev": "vite",
8+
"shadcn:add-all": "tsx add-all.ts"
89
},
910
"dependencies": {
1011
"@firebase-ui/core": "workspace:*",
@@ -64,10 +65,13 @@
6465
"@types/node": "catalog:",
6566
"@types/react": "catalog:",
6667
"@types/react-dom": "catalog:",
68+
"@types/yargs-parser": "^21.0.3",
6769
"@vitejs/plugin-react": "catalog:",
6870
"tailwindcss": "catalog:",
71+
"tsx": "^4.20.6",
6972
"tw-animate-css": "^1.4.0",
7073
"typescript": "catalog:",
71-
"vite": "catalog:"
74+
"vite": "catalog:",
75+
"yargs-parser": "^22.0.0"
7276
}
7377
}

‎examples/shadcn/src/components/phone-auth-form.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@
22

33
import type { PhoneAuthNumberFormSchema } from "@firebase-ui/core";
44
import { FirebaseUIError, getTranslation } from "@firebase-ui/core";
5-
import { PhoneAuthFormProps, usePhoneAuthNumberFormSchema, usePhoneNumberFormAction, useUI } from "@firebase-ui/react";
5+
import {
6+
type PhoneAuthFormProps,
7+
usePhoneAuthNumberFormSchema,
8+
usePhoneNumberFormAction,
9+
useUI,
10+
} from "@firebase-ui/react";
611
import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
712
import { useForm } from "react-hook-form";
813

‎examples/shadcn/src/components/ui/accordion.tsx‎

Lines changed: 13 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,24 @@
1-
import * as React from "react"
2-
import * as AccordionPrimitive from "@radix-ui/react-accordion"
3-
import { ChevronDownIcon } from "lucide-react"
1+
import * as React from "react";
2+
import * as AccordionPrimitive from "@radix-ui/react-accordion";
3+
import { ChevronDownIcon } from "lucide-react";
44

5-
import { cn } from "@/lib/utils"
5+
import { cn } from "@/lib/utils";
66

7-
function Accordion({
8-
...props
9-
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
10-
return <AccordionPrimitive.Root data-slot="accordion" {...props} />
7+
function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
8+
return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
119
}
1210

13-
function AccordionItem({
14-
className,
15-
...props
16-
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
11+
function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
1712
return (
1813
<AccordionPrimitive.Item
1914
data-slot="accordion-item"
2015
className={cn("border-b last:border-b-0", className)}
2116
{...props}
2217
/>
23-
)
18+
);
2419
}
2520

26-
function AccordionTrigger({
27-
className,
28-
children,
29-
...props
30-
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
21+
function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
3122
return (
3223
<AccordionPrimitive.Header className="flex">
3324
<AccordionPrimitive.Trigger
@@ -42,14 +33,10 @@ function AccordionTrigger({
4233
<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
4334
</AccordionPrimitive.Trigger>
4435
</AccordionPrimitive.Header>
45-
)
36+
);
4637
}
4738

48-
function AccordionContent({
49-
className,
50-
children,
51-
...props
52-
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
39+
function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>) {
5340
return (
5441
<AccordionPrimitive.Content
5542
data-slot="accordion-content"
@@ -58,7 +45,7 @@ function AccordionContent({
5845
>
5946
<div className={cn("pt-0 pb-4", className)}>{children}</div>
6047
</AccordionPrimitive.Content>
61-
)
48+
);
6249
}
6350

64-
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
51+
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

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

Lines changed: 27 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,22 @@
1-
import * as React from "react"
2-
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
1+
import * as React from "react";
2+
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
33

4-
import { cn } from "@/lib/utils"
5-
import { buttonVariants } from "@/components/ui/button"
4+
import { cn } from "@/lib/utils";
5+
import { buttonVariants } from "@/components/ui/button";
66

7-
function AlertDialog({
8-
...props
9-
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
10-
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
7+
function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
8+
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
119
}
1210

13-
function AlertDialogTrigger({
14-
...props
15-
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
16-
return (
17-
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
18-
)
11+
function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
12+
return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
1913
}
2014

21-
function AlertDialogPortal({
22-
...props
23-
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
24-
return (
25-
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
26-
)
15+
function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
16+
return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
2717
}
2818

29-
function AlertDialogOverlay({
30-
className,
31-
...props
32-
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
19+
function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
3320
return (
3421
<AlertDialogPrimitive.Overlay
3522
data-slot="alert-dialog-overlay"
@@ -39,13 +26,10 @@ function AlertDialogOverlay({
3926
)}
4027
{...props}
4128
/>
42-
)
29+
);
4330
}
4431

45-
function AlertDialogContent({
46-
className,
47-
...props
48-
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
32+
function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
4933
return (
5034
<AlertDialogPortal>
5135
<AlertDialogOverlay />
@@ -58,49 +42,37 @@ function AlertDialogContent({
5842
{...props}
5943
/>
6044
</AlertDialogPortal>
61-
)
45+
);
6246
}
6347

64-
function AlertDialogHeader({
65-
className,
66-
...props
67-
}: React.ComponentProps<"div">) {
48+
function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
6849
return (
6950
<div
7051
data-slot="alert-dialog-header"
7152
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
7253
{...props}
7354
/>
74-
)
55+
);
7556
}
7657

77-
function AlertDialogFooter({
78-
className,
79-
...props
80-
}: React.ComponentProps<"div">) {
58+
function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
8159
return (
8260
<div
8361
data-slot="alert-dialog-footer"
84-
className={cn(
85-
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
86-
className
87-
)}
62+
className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
8863
{...props}
8964
/>
90-
)
65+
);
9166
}
9267

93-
function AlertDialogTitle({
94-
className,
95-
...props
96-
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
68+
function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
9769
return (
9870
<AlertDialogPrimitive.Title
9971
data-slot="alert-dialog-title"
10072
className={cn("text-lg font-semibold", className)}
10173
{...props}
10274
/>
103-
)
75+
);
10476
}
10577

10678
function AlertDialogDescription({
@@ -113,31 +85,15 @@ function AlertDialogDescription({
11385
className={cn("text-muted-foreground text-sm", className)}
11486
{...props}
11587
/>
116-
)
88+
);
11789
}
11890

119-
function AlertDialogAction({
120-
className,
121-
...props
122-
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
123-
return (
124-
<AlertDialogPrimitive.Action
125-
className={cn(buttonVariants(), className)}
126-
{...props}
127-
/>
128-
)
91+
function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
92+
return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />;
12993
}
13094

131-
function AlertDialogCancel({
132-
className,
133-
...props
134-
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
135-
return (
136-
<AlertDialogPrimitive.Cancel
137-
className={cn(buttonVariants({ variant: "outline" }), className)}
138-
{...props}
139-
/>
140-
)
95+
function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
96+
return <AlertDialogPrimitive.Cancel className={cn(buttonVariants({ variant: "outline" }), className)} {...props} />;
14197
}
14298

14399
export {
@@ -152,4 +108,4 @@ export {
152108
AlertDialogDescription,
153109
AlertDialogAction,
154110
AlertDialogCancel,
155-
}
111+
};

‎examples/shadcn/src/components/ui/alert.tsx‎

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

4-
import { cn } from "@/lib/utils"
4+
import { cn } from "@/lib/utils";
55

66
const alertVariants = cva(
77
"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
@@ -17,40 +17,23 @@ const alertVariants = cva(
1717
variant: "default",
1818
},
1919
}
20-
)
20+
);
2121

22-
function Alert({
23-
className,
24-
variant,
25-
...props
26-
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
27-
return (
28-
<div
29-
data-slot="alert"
30-
role="alert"
31-
className={cn(alertVariants({ variant }), className)}
32-
{...props}
33-
/>
34-
)
22+
function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
23+
return <div data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props} />;
3524
}
3625

3726
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
3827
return (
3928
<div
4029
data-slot="alert-title"
41-
className={cn(
42-
"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
43-
className
44-
)}
30+
className={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
4531
{...props}
4632
/>
47-
)
33+
);
4834
}
4935

50-
function AlertDescription({
51-
className,
52-
...props
53-
}: React.ComponentProps<"div">) {
36+
function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
5437
return (
5538
<div
5639
data-slot="alert-description"
@@ -60,7 +43,7 @@ function AlertDescription({
6043
)}
6144
{...props}
6245
/>
63-
)
46+
);
6447
}
6548

66-
export { Alert, AlertTitle, AlertDescription }
49+
export { Alert, AlertTitle, AlertDescription };

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
"use client"
1+
"use client";
22

3-
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
3+
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
44

5-
function AspectRatio({
6-
...props
7-
}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
8-
return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
5+
function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
6+
return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
97
}
108

11-
export { AspectRatio }
9+
export { AspectRatio };

0 commit comments

Comments
 (0)