Skip to content

Commit b0c7039

Browse files
ashphyashphy
committed
Update tailwind and shadcn/ui
1 parent 359bc83 commit b0c7039

File tree

15 files changed

+1250
-1381
lines changed

15 files changed

+1250
-1381
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,23 +43,24 @@
4343
},
4444
"devDependencies": {
4545
"@eslint/js": "^9.35.0",
46+
"@tailwindcss/postcss": "^4.1.13",
47+
"@tailwindcss/vite": "^4.1.13",
4648
"@types/file-saver": "^2.0.7",
4749
"@types/node": "^22.13.14",
4850
"@types/react": "^19.1.12",
4951
"@types/react-dom": "^19.1.9",
5052
"@vitejs/plugin-react": "^4.3.4",
51-
"autoprefixer": "^10.4.20",
5253
"eslint": "^9.35.0",
5354
"eslint-plugin-react-hooks": "^5.2.0",
5455
"eslint-plugin-react-refresh": "^0.4.20",
5556
"file-saver": "^2.0.5",
5657
"globals": "^16.4.0",
5758
"peggy": "^4.2.0",
5859
"postcss": "^8.4.49",
59-
"tailwindcss": "^3.4.17",
60+
"tailwindcss": "^4.1.13",
6061
"typescript": "~5.9.2",
6162
"typescript-eslint": "^8.43.0",
6263
"vite": "^7.1.5",
6364
"vitest": "^3.2.4"
6465
}
65-
}
66+
}

‎postcss.config.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
export default {
22
plugins: {
3-
tailwindcss: {},
4-
autoprefixer: {},
3+
'@tailwindcss/postcss': {},
54
},
65
}

‎src/components/app-title.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const AppTitle = () => {
77
<div
88
className="
99
w-full h-full px-4 flex items-center justify-between
10-
bg-gradient-to-r from-joe-green-600 to-emerald-600"
10+
bg-linear-to-r from-joe-green-600 to-emerald-600"
1111
>
1212
<h1 className="py-2 text-3xl text-white">JSONPath Online Evaluator</h1>
1313
<div className="justify-self-end flex gap-1 items-center">

‎src/components/download-button.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Button, ButtonProps } from "@/components/ui/button";
1+
import { Button } from "@/components/ui/button";
22
import { saveAs } from "file-saver";
33
import { Download } from "lucide-react";
44
import {
@@ -11,7 +11,7 @@ import { cn } from "@/lib/utils";
1111
import { useJSONPath } from "@/hooks/use-jsonpath";
1212
import { format } from "@formkit/tempo";
1313

14-
export const DownloadButton = ({ className }: ButtonProps) => {
14+
export const DownloadButton = ({ className }: { className?: string }) => {
1515
const { result } = useJSONPath();
1616

1717
const handleDownload = () => {

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

Lines changed: 114 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,141 @@
1+
"use client";
2+
13
import * as React from "react";
24
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
35

46
import { cn } from "@/lib/utils";
57
import { buttonVariants } from "@/components/ui/button";
68

7-
const AlertDialog = AlertDialogPrimitive.Root;
8-
9-
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
9+
function AlertDialog({
10+
...props
11+
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
12+
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
13+
}
1014

11-
const AlertDialogPortal = AlertDialogPrimitive.Portal;
15+
function AlertDialogTrigger({
16+
...props
17+
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
18+
return (
19+
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
20+
);
21+
}
1222

13-
const AlertDialogOverlay = React.forwardRef<
14-
React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
15-
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
16-
>(({ className, ...props }, ref) => (
17-
<AlertDialogPrimitive.Overlay
18-
className={cn(
19-
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
20-
className
21-
)}
22-
{...props}
23-
ref={ref}
24-
/>
25-
));
26-
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
23+
function AlertDialogPortal({
24+
...props
25+
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
26+
return (
27+
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
28+
);
29+
}
2730

28-
const AlertDialogContent = React.forwardRef<
29-
React.ElementRef<typeof AlertDialogPrimitive.Content>,
30-
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
31-
>(({ className, ...props }, ref) => (
32-
<AlertDialogPortal>
33-
<AlertDialogOverlay />
34-
<AlertDialogPrimitive.Content
35-
ref={ref}
31+
function AlertDialogOverlay({
32+
className,
33+
...props
34+
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
35+
return (
36+
<AlertDialogPrimitive.Overlay
37+
data-slot="alert-dialog-overlay"
3638
className={cn(
37-
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
39+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
3840
className
3941
)}
4042
{...props}
4143
/>
42-
</AlertDialogPortal>
43-
));
44-
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
44+
);
45+
}
4546

46-
const AlertDialogHeader = ({
47+
function AlertDialogContent({
4748
className,
4849
...props
49-
}: React.HTMLAttributes<HTMLDivElement>) => (
50-
<div
51-
className={cn(
52-
"flex flex-col space-y-2 text-center sm:text-left",
53-
className
54-
)}
55-
{...props}
56-
/>
57-
);
58-
AlertDialogHeader.displayName = "AlertDialogHeader";
50+
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
51+
return (
52+
<AlertDialogPortal>
53+
<AlertDialogOverlay />
54+
<AlertDialogPrimitive.Content
55+
data-slot="alert-dialog-content"
56+
className={cn(
57+
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
58+
className
59+
)}
60+
{...props}
61+
/>
62+
</AlertDialogPortal>
63+
);
64+
}
5965

60-
const AlertDialogFooter = ({
66+
function AlertDialogHeader({
6167
className,
6268
...props
63-
}: React.HTMLAttributes<HTMLDivElement>) => (
64-
<div
65-
className={cn(
66-
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
67-
className
68-
)}
69-
{...props}
70-
/>
71-
);
72-
AlertDialogFooter.displayName = "AlertDialogFooter";
69+
}: React.ComponentProps<"div">) {
70+
return (
71+
<div
72+
data-slot="alert-dialog-header"
73+
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
74+
{...props}
75+
/>
76+
);
77+
}
7378

74-
const AlertDialogTitle = React.forwardRef<
75-
React.ElementRef<typeof AlertDialogPrimitive.Title>,
76-
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
77-
>(({ className, ...props }, ref) => (
78-
<AlertDialogPrimitive.Title
79-
ref={ref}
80-
className={cn("text-lg font-semibold", className)}
81-
{...props}
82-
/>
83-
));
84-
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
79+
function AlertDialogFooter({
80+
className,
81+
...props
82+
}: React.ComponentProps<"div">) {
83+
return (
84+
<div
85+
data-slot="alert-dialog-footer"
86+
className={cn(
87+
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
88+
className
89+
)}
90+
{...props}
91+
/>
92+
);
93+
}
8594

86-
const AlertDialogDescription = React.forwardRef<
87-
React.ElementRef<typeof AlertDialogPrimitive.Description>,
88-
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
89-
>(({ className, ...props }, ref) => (
90-
<AlertDialogPrimitive.Description
91-
ref={ref}
92-
className={cn("text-sm text-muted-foreground", className)}
93-
{...props}
94-
/>
95-
));
96-
AlertDialogDescription.displayName =
97-
AlertDialogPrimitive.Description.displayName;
95+
function AlertDialogTitle({
96+
className,
97+
...props
98+
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
99+
return (
100+
<AlertDialogPrimitive.Title
101+
data-slot="alert-dialog-title"
102+
className={cn("text-lg font-semibold", className)}
103+
{...props}
104+
/>
105+
);
106+
}
98107

99-
const AlertDialogAction = React.forwardRef<
100-
React.ElementRef<typeof AlertDialogPrimitive.Action>,
101-
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
102-
>(({ ...props }, ref) => <AlertDialogPrimitive.Action ref={ref} {...props} />);
103-
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
108+
function AlertDialogDescription({
109+
className,
110+
...props
111+
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
112+
return (
113+
<AlertDialogPrimitive.Description
114+
data-slot="alert-dialog-description"
115+
className={cn("text-muted-foreground text-sm", className)}
116+
{...props}
117+
/>
118+
);
119+
}
104120

105-
const AlertDialogCancel = React.forwardRef<
106-
React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
107-
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
108-
>(({ className, ...props }, ref) => (
109-
<AlertDialogPrimitive.Cancel
110-
ref={ref}
111-
className={cn(
112-
buttonVariants({ variant: "outline" }),
113-
"mt-2 sm:mt-0",
114-
className
115-
)}
116-
{...props}
117-
/>
118-
));
119-
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
121+
function AlertDialogAction({
122+
className,
123+
...props
124+
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
125+
return <AlertDialogPrimitive.Action className={className} {...props} />;
126+
}
127+
128+
function AlertDialogCancel({
129+
className,
130+
...props
131+
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
132+
return (
133+
<AlertDialogPrimitive.Cancel
134+
className={cn(buttonVariants({ variant: "outline" }), className)}
135+
{...props}
136+
/>
137+
);
138+
}
120139

121140
export {
122141
AlertDialog,

‎src/components/ui/button.tsx‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,59 @@
1-
import * as React from "react"
2-
import { Slot } from "@radix-ui/react-slot"
3-
import { cva, type VariantProps } from "class-variance-authority"
1+
import * as React from "react";
2+
import { Slot } from "@radix-ui/react-slot";
3+
import { cva, type VariantProps } from "class-variance-authority";
44

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

77
const buttonVariants = cva(
8-
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
8+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
99
{
1010
variants: {
1111
variant: {
1212
default:
13-
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
13+
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
1414
destructive:
15-
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
15+
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
1616
outline:
17-
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
17+
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
1818
secondary:
19-
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20-
ghost: "hover:bg-accent hover:text-accent-foreground",
19+
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
20+
ghost:
21+
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
2122
link: "text-primary underline-offset-4 hover:underline",
2223
},
2324
size: {
24-
default: "h-9 px-4 py-2",
25-
sm: "h-8 rounded-md px-3 text-xs",
26-
lg: "h-10 rounded-md px-8",
27-
icon: "h-9 w-9",
25+
default: "h-9 px-4 py-2 has-[>svg]:px-3",
26+
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
27+
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
28+
icon: "size-9",
2829
},
2930
},
3031
defaultVariants: {
3132
variant: "default",
3233
size: "default",
3334
},
3435
}
35-
)
36+
);
3637

37-
export interface ButtonProps
38-
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39-
VariantProps<typeof buttonVariants> {
40-
asChild?: boolean
41-
}
38+
function Button({
39+
className,
40+
variant,
41+
size,
42+
asChild = false,
43+
...props
44+
}: React.ComponentProps<"button"> &
45+
VariantProps<typeof buttonVariants> & {
46+
asChild?: boolean;
47+
}) {
48+
const Comp = asChild ? Slot : "button";
4249

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"
50+
return (
51+
<Comp
52+
data-slot="button"
53+
className={cn(buttonVariants({ variant, size, className }))}
54+
{...props}
55+
/>
56+
);
57+
}
5658

57-
export { Button, buttonVariants }
59+
export { Button, buttonVariants };

0 commit comments

Comments
 (0)