Skip to content

Commit f2f2368

Browse files
consoledotamanconsoledotaman
committed
feat: basic CRUD frontend complete
Signed-off-by: amanraj <raj.aman4001@gmail.com>
1 parent 5f53343 commit f2f2368

24 files changed

+2076
-496
lines changed

‎apps/web/components.json‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
{
2-
"$schema": "https://ui.shadcn.com/schema.json",
3-
"style": "new-york",
4-
"rsc": false,
5-
"tsx": true,
6-
"tailwind": {
7-
"config": "",
8-
"css": "src/index.css",
9-
"baseColor": "neutral",
10-
"cssVariables": true,
11-
"prefix": ""
12-
},
13-
"aliases": {
14-
"components": "@/components",
15-
"utils": "@/lib/utils",
16-
"ui": "@/components/ui",
17-
"lib": "@/lib",
18-
"hooks": "@/hooks"
19-
},
20-
"iconLibrary": "lucide"
21-
}
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": false,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "",
8+
"css": "src/styles/globals.css",
9+
"baseColor": "neutral",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils",
16+
"ui": "@/components/ui",
17+
"lib": "@/lib",
18+
"hooks": "@/hooks"
19+
},
20+
"iconLibrary": "lucide"
21+
}

‎apps/web/package.json‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,36 +9,44 @@
99
"typecheck": "react-router typegen && tsc"
1010
},
1111
"dependencies": {
12-
"radix-ui": "^1.4.2",
12+
"@hookform/resolvers": "^5.2.2",
13+
"@radix-ui/react-alert-dialog": "^1.1.15",
14+
"@radix-ui/react-dialog": "^1.1.15",
15+
"@radix-ui/react-dropdown-menu": "^2.1.16",
16+
"@radix-ui/react-label": "^2.1.8",
17+
"@radix-ui/react-slot": "^1.2.4",
1318
"@react-router/fs-routes": "^7.6.1",
1419
"@react-router/node": "^7.6.1",
1520
"@react-router/serve": "^7.6.1",
1621
"@tanstack/react-form": "^1.12.0",
22+
"@tanstack/react-query": "^5.80.5",
1723
"class-variance-authority": "^0.7.1",
1824
"clsx": "^2.1.1",
1925
"isbot": "^5.1.28",
2026
"lucide-react": "^0.525.0",
2127
"next-themes": "^0.4.6",
28+
"radix-ui": "^1.4.2",
2229
"react": "19.1.0",
2330
"react-dom": "19.1.0",
31+
"react-hook-form": "^7.68.0",
2432
"react-router": "^7.6.1",
25-
"sonner": "^2.0.3",
33+
"sonner": "^2.0.5",
2634
"tailwind-merge": "^3.3.0",
2735
"tw-animate-css": "^1.3.2",
28-
"zod": "^3.25.42",
29-
"@tanstack/react-query": "^5.80.5"
36+
"vaul": "^1.1.2",
37+
"zod": "^3.25.67"
3038
},
3139
"devDependencies": {
3240
"@react-router/dev": "^7.6.1",
3341
"@tailwindcss/vite": "^4.1.8",
42+
"@tanstack/react-query-devtools": "^5.80.5",
3443
"@types/node": "^24",
3544
"@types/react": "^19.0.12",
3645
"@types/react-dom": "^19.0.4",
3746
"react-router-devtools": "^5.0.6",
3847
"tailwindcss": "^4.1.8",
3948
"typescript": "^5.8.3",
4049
"vite": "^7.0.0",
41-
"vite-tsconfig-paths": "^5.1.4",
42-
"@tanstack/react-query-devtools": "^5.80.5"
50+
"vite-tsconfig-paths": "^5.1.4"
4351
}
4452
}

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

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
2+
3+
import * as React from "react"
4+
5+
import { buttonVariants } from "@/components/ui/button"
6+
7+
import { cn } from "@/lib/utils"
8+
9+
function AlertDialog({
10+
...props
11+
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
12+
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
13+
}
14+
15+
function AlertDialogTrigger({
16+
...props
17+
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
18+
return (
19+
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
20+
)
21+
}
22+
23+
function AlertDialogPortal({
24+
...props
25+
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
26+
return (
27+
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
28+
)
29+
}
30+
31+
function AlertDialogOverlay({
32+
className,
33+
...props
34+
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
35+
return (
36+
<AlertDialogPrimitive.Overlay
37+
data-slot="alert-dialog-overlay"
38+
className={cn(
39+
"fixed inset-0 z-50 bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
40+
className,
41+
)}
42+
{...props}
43+
/>
44+
)
45+
}
46+
47+
function AlertDialogContent({
48+
className,
49+
...props
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-base border-2 border-border p-6 shadow-shadow duration-200 sm:max-w-lg",
58+
className,
59+
)}
60+
{...props}
61+
/>
62+
</AlertDialogPortal>
63+
)
64+
}
65+
66+
function AlertDialogHeader({
67+
className,
68+
...props
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+
}
78+
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-3 sm:flex-row sm:justify-end",
88+
className,
89+
)}
90+
{...props}
91+
/>
92+
)
93+
}
94+
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-heading", className)}
103+
{...props}
104+
/>
105+
)
106+
}
107+
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-sm font-base text-foreground", className)}
116+
{...props}
117+
/>
118+
)
119+
}
120+
121+
function AlertDialogAction({
122+
className,
123+
...props
124+
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
125+
return (
126+
<AlertDialogPrimitive.Action
127+
className={cn(buttonVariants(), className)}
128+
{...props}
129+
/>
130+
)
131+
}
132+
133+
function AlertDialogCancel({
134+
className,
135+
...props
136+
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
137+
return (
138+
<AlertDialogPrimitive.Cancel
139+
className={cn(buttonVariants({ variant: "neutral" }), className)}
140+
{...props}
141+
/>
142+
)
143+
}
144+
145+
export {
146+
AlertDialog,
147+
AlertDialogPortal,
148+
AlertDialogOverlay,
149+
AlertDialogTrigger,
150+
AlertDialogContent,
151+
AlertDialogHeader,
152+
AlertDialogFooter,
153+
AlertDialogTitle,
154+
AlertDialogDescription,
155+
AlertDialogAction,
156+
AlertDialogCancel,
157+
}

‎apps/web/src/components/ui/badge.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { Slot } from "@radix-ui/react-slot"
2+
import { cva, type VariantProps } from "class-variance-authority"
3+
4+
import * as React from "react"
5+
6+
import { cn } from "@/lib/utils"
7+
8+
const badgeVariants = cva(
9+
"inline-flex items-center justify-center rounded-base border-2 border-border px-2.5 py-0.5 text-xs font-base w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] overflow-hidden",
10+
{
11+
variants: {
12+
variant: {
13+
default: "bg-main text-main-foreground",
14+
neutral: "bg-secondary-background text-foreground",
15+
},
16+
},
17+
defaultVariants: {
18+
variant: "default",
19+
},
20+
},
21+
)
22+
23+
function Badge({
24+
className,
25+
variant,
26+
asChild = false,
27+
...props
28+
}: React.ComponentProps<"span"> &
29+
VariantProps<typeof badgeVariants> & {
30+
asChild?: boolean
31+
}) {
32+
const Comp = asChild ? Slot : "span"
33+
34+
return (
35+
<Comp
36+
data-slot="badge"
37+
className={cn(badgeVariants({ variant }), className)}
38+
{...props}
39+
/>
40+
)
41+
}
42+
43+
export { Badge, badgeVariants }

0 commit comments

Comments
 (0)