Skip to content

Commit 8d595c3

Browse files
DevanshuNEUDevanshuNEU
committed
feat(ui): add shadcn component library
Components added: - Button: Multiple variants (default, destructive, outline, secondary, ghost, link) - Input: Accessible form inputs with focus states - Card: Container with header, content, footer sections - Label: Form labels with proper accessibility - Alert: Alert messages with variants (default, destructive) - Avatar: User profile pictures with fallback initials - DropdownMenu: Accessible dropdown menus with submenus Dependencies: - @radix-ui/react-slot - Component composition - @radix-ui/react-label - Accessible labels - @radix-ui/react-avatar - Avatar primitives - @radix-ui/react-dropdown-menu - Dropdown primitives All components follow shadcn/ui design system with: - Tailwind CSS styling - Dark mode support - Accessibility (WCAG compliant) - TypeScript types - Customizable variants
1 parent 7e65265 commit 8d595c3

9 files changed

Lines changed: 1754 additions & 51 deletions

File tree

‎frontend/package-lock.json‎

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

‎frontend/package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,12 @@
99
"preview": "vite preview"
1010
},
1111
"dependencies": {
12+
"@radix-ui/react-avatar": "^1.1.11",
13+
"@radix-ui/react-dropdown-menu": "^2.1.16",
14+
"@radix-ui/react-label": "^2.1.8",
1215
"@radix-ui/react-progress": "^1.1.8",
16+
"@radix-ui/react-slot": "^1.2.4",
17+
"@supabase/supabase-js": "^2.39.0",
1318
"@types/dagre": "^0.7.53",
1419
"@types/react-syntax-highlighter": "^15.5.13",
1520
"class-variance-authority": "^0.7.1",
@@ -19,6 +24,7 @@
1924
"next-themes": "^0.4.6",
2025
"react": "^18.2.0",
2126
"react-dom": "^18.2.0",
27+
"react-router-dom": "^6.21.0",
2228
"react-syntax-highlighter": "^16.1.0",
2329
"reactflow": "^11.11.4",
2430
"sonner": "^2.0.7",

‎frontend/src/components/ui/alert.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import * as React from "react"
2+
import { cva, type VariantProps } from "class-variance-authority"
3+
4+
import { cn } from "@/lib/utils"
5+
6+
const alertVariants = cva(
7+
"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
8+
{
9+
variants: {
10+
variant: {
11+
default: "bg-background text-foreground",
12+
destructive:
13+
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14+
},
15+
},
16+
defaultVariants: {
17+
variant: "default",
18+
},
19+
}
20+
)
21+
22+
const Alert = React.forwardRef<
23+
HTMLDivElement,
24+
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
25+
>(({ className, variant, ...props }, ref) => (
26+
<div
27+
ref={ref}
28+
role="alert"
29+
className={cn(alertVariants({ variant }), className)}
30+
{...props}
31+
/>
32+
))
33+
Alert.displayName = "Alert"
34+
35+
const AlertTitle = React.forwardRef<
36+
HTMLParagraphElement,
37+
React.HTMLAttributes<HTMLHeadingElement>
38+
>(({ className, ...props }, ref) => (
39+
<h5
40+
ref={ref}
41+
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
42+
{...props}
43+
/>
44+
))
45+
AlertTitle.displayName = "AlertTitle"
46+
47+
const AlertDescription = React.forwardRef<
48+
HTMLParagraphElement,
49+
React.HTMLAttributes<HTMLParagraphElement>
50+
>(({ className, ...props }, ref) => (
51+
<div
52+
ref={ref}
53+
className={cn("text-sm [&_p]:leading-relaxed", className)}
54+
{...props}
55+
/>
56+
))
57+
AlertDescription.displayName = "AlertDescription"
58+
59+
export { Alert, AlertTitle, AlertDescription }

‎frontend/src/components/ui/avatar.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import * as React from "react"
2+
import * as AvatarPrimitive from "@radix-ui/react-avatar"
3+
4+
import { cn } from "@/lib/utils"
5+
6+
const Avatar = React.forwardRef<
7+
React.ElementRef<typeof AvatarPrimitive.Root>,
8+
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
9+
>(({ className, ...props }, ref) => (
10+
<AvatarPrimitive.Root
11+
ref={ref}
12+
className={cn(
13+
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
14+
className
15+
)}
16+
{...props}
17+
/>
18+
))
19+
Avatar.displayName = AvatarPrimitive.Root.displayName
20+
21+
const AvatarImage = React.forwardRef<
22+
React.ElementRef<typeof AvatarPrimitive.Image>,
23+
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
24+
>(({ className, ...props }, ref) => (
25+
<AvatarPrimitive.Image
26+
ref={ref}
27+
className={cn("aspect-square h-full w-full", className)}
28+
{...props}
29+
/>
30+
))
31+
AvatarImage.displayName = AvatarPrimitive.Image.displayName
32+
33+
const AvatarFallback = React.forwardRef<
34+
React.ElementRef<typeof AvatarPrimitive.Fallback>,
35+
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
36+
>(({ className, ...props }, ref) => (
37+
<AvatarPrimitive.Fallback
38+
ref={ref}
39+
className={cn(
40+
"flex h-full w-full items-center justify-center rounded-full bg-muted",
41+
className
42+
)}
43+
{...props}
44+
/>
45+
))
46+
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
47+
48+
export { Avatar, AvatarImage, AvatarFallback }

‎frontend/src/components/ui/button.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import * as React from "react"
2+
import { Slot } from "@radix-ui/react-slot"
3+
import { cva, type VariantProps } from "class-variance-authority"
4+
5+
import { cn } from "@/lib/utils"
6+
7+
const buttonVariants = cva(
8+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
9+
{
10+
variants: {
11+
variant: {
12+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
13+
destructive:
14+
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
15+
outline:
16+
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17+
secondary:
18+
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
19+
ghost: "hover:bg-accent hover:text-accent-foreground",
20+
link: "text-primary underline-offset-4 hover:underline",
21+
},
22+
size: {
23+
default: "h-10 px-4 py-2",
24+
sm: "h-9 rounded-md px-3",
25+
lg: "h-11 rounded-md px-8",
26+
icon: "h-10 w-10",
27+
},
28+
},
29+
defaultVariants: {
30+
variant: "default",
31+
size: "default",
32+
},
33+
}
34+
)
35+
36+
export interface ButtonProps
37+
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38+
VariantProps<typeof buttonVariants> {
39+
asChild?: boolean
40+
}
41+
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+
Button.displayName = "Button"
55+
56+
export { Button, buttonVariants }

‎frontend/src/components/ui/card.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import * as React from "react"
2+
3+
import { cn } from "@/lib/utils"
4+
5+
const Card = React.forwardRef<
6+
HTMLDivElement,
7+
React.HTMLAttributes<HTMLDivElement>
8+
>(({ className, ...props }, ref) => (
9+
<div
10+
ref={ref}
11+
className={cn(
12+
"rounded-lg border bg-card text-card-foreground shadow-sm",
13+
className
14+
)}
15+
{...props}
16+
/>
17+
))
18+
Card.displayName = "Card"
19+
20+
const CardHeader = React.forwardRef<
21+
HTMLDivElement,
22+
React.HTMLAttributes<HTMLDivElement>
23+
>(({ className, ...props }, ref) => (
24+
<div
25+
ref={ref}
26+
className={cn("flex flex-col space-y-1.5 p-6", className)}
27+
{...props}
28+
/>
29+
))
30+
CardHeader.displayName = "CardHeader"
31+
32+
const CardTitle = React.forwardRef<
33+
HTMLDivElement,
34+
React.HTMLAttributes<HTMLDivElement>
35+
>(({ className, ...props }, ref) => (
36+
<div
37+
ref={ref}
38+
className={cn(
39+
"text-2xl font-semibold leading-none tracking-tight",
40+
className
41+
)}
42+
{...props}
43+
/>
44+
))
45+
CardTitle.displayName = "CardTitle"
46+
47+
const CardDescription = React.forwardRef<
48+
HTMLDivElement,
49+
React.HTMLAttributes<HTMLDivElement>
50+
>(({ className, ...props }, ref) => (
51+
<div
52+
ref={ref}
53+
className={cn("text-sm text-muted-foreground", className)}
54+
{...props}
55+
/>
56+
))
57+
CardDescription.displayName = "CardDescription"
58+
59+
const CardContent = React.forwardRef<
60+
HTMLDivElement,
61+
React.HTMLAttributes<HTMLDivElement>
62+
>(({ className, ...props }, ref) => (
63+
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64+
))
65+
CardContent.displayName = "CardContent"
66+
67+
const CardFooter = React.forwardRef<
68+
HTMLDivElement,
69+
React.HTMLAttributes<HTMLDivElement>
70+
>(({ className, ...props }, ref) => (
71+
<div
72+
ref={ref}
73+
className={cn("flex items-center p-6 pt-0", className)}
74+
{...props}
75+
/>
76+
))
77+
CardFooter.displayName = "CardFooter"
78+
79+
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

0 commit comments

Comments
 (0)