Skip to content

Commit bb3422d

Browse files
nakrovatinakrovati
authored
Migrate shadcn/ui from Radix to Base UI (#115)
1 parent a95bb5b commit bb3422d

102 files changed

Lines changed: 1922 additions & 2882 deletions

File tree

Some content is hidden

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

‎.editorconfig‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
end_of_line = lf
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.md]
12+
trim_trailing_whitespace = false
13+

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ A modern, responsive web management console for RustFS distributed file system,
3232
### UI & Styling
3333

3434
- **[Tailwind CSS v4](https://tailwindcss.com/)** - Utility-first CSS framework
35-
- **[shadcn/ui](https://ui.shadcn.com/)** - High-quality component library based on Radix UI
35+
- **[shadcn/ui](https://ui.shadcn.com/)** - High-quality component library based on Base UI
3636
- **[Remix Icon](https://remixicon.com/)** - Icon library
3737
- **[next-themes](https://github.com/pacocoursey/next-themes)** - Theme switching support
3838

‎app/(dashboard)/_components/performance-server-list.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export function PerformanceServerList({ servers, t }: { servers: ServerInfo[]; t
3535
</span>
3636
</CardHeader>
3737
<CardContent>
38-
<Accordion type="single" collapsible className="space-y-2">
38+
<Accordion className="space-y-2">
3939
{servers.map((server, index) => (
4040
<AccordionItem key={server.endpoint ?? index} value={String(index)}>
4141
<AccordionTrigger>

‎app/(dashboard)/site-replication/page.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -354,12 +354,14 @@ export default function SiteReplicationPage() {
354354

355355
return (
356356
<DropdownMenu>
357-
<DropdownMenuTrigger asChild>
358-
<Button type="button" variant="ghost" size="icon-sm" disabled={isBusy}>
359-
<RiMore2Line className="size-4" aria-hidden />
360-
<span className="sr-only">{t("Actions")}</span>
361-
</Button>
362-
</DropdownMenuTrigger>
357+
<DropdownMenuTrigger
358+
render={
359+
<Button type="button" variant="ghost" size="icon-sm" disabled={isBusy}>
360+
<RiMore2Line className="size-4" aria-hidden />
361+
<span className="sr-only">{t("Actions")}</span>
362+
</Button>
363+
}
364+
/>
363365
<DropdownMenuContent align="end">
364366
<DropdownMenuLabel>{peer.name || t("Peer site")}</DropdownMenuLabel>
365367
{canManageSites ? (

‎app/(dashboard)/sse/page.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -700,11 +700,13 @@ export default function SSEPage() {
700700

701701
{hasConfiguration && (
702702
<DropdownMenu>
703-
<DropdownMenuTrigger asChild>
704-
<Button size="sm" variant="outline">
705-
{t("Advanced Actions")}
706-
</Button>
707-
</DropdownMenuTrigger>
703+
<DropdownMenuTrigger
704+
render={
705+
<Button size="sm" variant="outline">
706+
{t("Advanced Actions")}
707+
</Button>
708+
}
709+
/>
708710
<DropdownMenuContent align="end">
709711
<DropdownMenuItem disabled={!isRunning || clearingCache} onClick={handleClearCache}>
710712
{clearingCache ? t("Clearing cache...") : t("Clear Cache")}
@@ -1069,11 +1071,13 @@ export default function SSEPage() {
10691071
<TableCell>
10701072
<div className="flex justify-end">
10711073
<DropdownMenu>
1072-
<DropdownMenuTrigger asChild>
1073-
<Button size="sm" variant="outline">
1074-
{t("Actions")}
1075-
</Button>
1076-
</DropdownMenuTrigger>
1074+
<DropdownMenuTrigger
1075+
render={
1076+
<Button size="sm" variant="outline">
1077+
{t("Actions")}
1078+
</Button>
1079+
}
1080+
/>
10771081
<DropdownMenuContent align="end">
10781082
<DropdownMenuItem onClick={() => setSelectedKeyId(key.key_id)}>
10791083
{t("View Details")}

‎app/globals.css‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@
77
@theme inline {
88
--color-background: var(--background);
99
--color-foreground: var(--foreground);
10-
--font-sans: var(--font-sans);
11-
--font-mono: var(--font-geist-mono);
1210
--color-sidebar-ring: var(--sidebar-ring);
1311
--color-sidebar-border: var(--sidebar-border);
1412
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -45,11 +43,11 @@
4543
--radius-2xl: calc(var(--radius) + 8px);
4644
--radius-3xl: calc(var(--radius) + 12px);
4745
--radius-4xl: calc(var(--radius) + 16px);
46+
--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
47+
--font-heading: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
4848
}
4949

5050
:root {
51-
--background: oklch(1 0 0);
52-
--foreground: oklch(0.145 0 0);
5351
--card: oklch(1 0 0);
5452
--card-foreground: oklch(0.145 0 0);
5553
--popover: oklch(1 0 0);
@@ -62,7 +60,7 @@
6260
--muted-foreground: oklch(0.556 0 0);
6361
--accent: oklch(0.97 0 0);
6462
--accent-foreground: oklch(0.205 0 0);
65-
--destructive: oklch(0.58 0.22 27);
63+
--destructive: oklch(0.577 0.245 27.325);
6664
--border: oklch(0.922 0 0);
6765
--input: oklch(0.922 0 0);
6866
--ring: oklch(0.708 0 0);
@@ -71,7 +69,7 @@
7169
--chart-3: oklch(0.546 0.245 262.881);
7270
--chart-4: oklch(0.488 0.243 264.376);
7371
--chart-5: oklch(0.424 0.199 265.638);
74-
--radius: 0;
72+
--radius: 0.625rem;
7573
--sidebar: oklch(0.985 0 0);
7674
--sidebar-foreground: oklch(0.145 0 0);
7775
--sidebar-primary: oklch(0.205 0 0);
@@ -80,8 +78,8 @@
8078
--sidebar-accent-foreground: oklch(0.205 0 0);
8179
--sidebar-border: oklch(0.922 0 0);
8280
--sidebar-ring: oklch(0.708 0 0);
83-
--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
84-
--font-geist-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
81+
--background: oklch(1 0 0);
82+
--foreground: oklch(0.145 0 0);
8583
}
8684

8785
.dark {
@@ -91,13 +89,13 @@
9189
--card-foreground: oklch(0.985 0 0);
9290
--popover: oklch(0.205 0 0);
9391
--popover-foreground: oklch(0.985 0 0);
94-
--primary: oklch(0.87 0 0);
92+
--primary: oklch(0.922 0 0);
9593
--primary-foreground: oklch(0.205 0 0);
9694
--secondary: oklch(0.269 0 0);
9795
--secondary-foreground: oklch(0.985 0 0);
9896
--muted: oklch(0.269 0 0);
9997
--muted-foreground: oklch(0.708 0 0);
100-
--accent: oklch(0.371 0 0);
98+
--accent: oklch(0.269 0 0);
10199
--accent-foreground: oklch(0.985 0 0);
102100
--destructive: oklch(0.704 0.191 22.216);
103101
--border: oklch(1 0 0 / 10%);
@@ -125,6 +123,9 @@
125123
body {
126124
@apply bg-background text-foreground;
127125
}
126+
html {
127+
@apply font-sans;
128+
}
128129
}
129130

130131
@keyframes fadeInWord {

‎components.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"$schema": "https://ui.shadcn.com/schema.json",
3-
"style": "radix-lyra",
3+
"style": "base-lyra",
44
"rsc": true,
55
"tsx": true,
66
"tailwind": {

‎components/access-keys/edit-item.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -100,12 +100,8 @@ export function AccessKeysEditItem({ open, onOpenChange, row, onSuccess }: Acces
100100
}
101101

102102
return (
103-
<Dialog open={open} onOpenChange={closeModal}>
104-
<DialogContent
105-
className="sm:max-w-6xl"
106-
onPointerDownOutside={(e) => e.preventDefault()}
107-
onInteractOutside={(e) => e.preventDefault()}
108-
>
103+
<Dialog open={open} onOpenChange={closeModal} disablePointerDismissal>
104+
<DialogContent className="sm:max-w-6xl">
109105
<DialogHeader>
110106
<DialogTitle>{t("Edit Key")}</DialogTitle>
111107
</DialogHeader>

‎components/access-keys/new-item.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -147,12 +147,8 @@ export function AccessKeysNewItem({ visible, onVisibleChange, onSuccess, onNotic
147147
}
148148

149149
return (
150-
<Dialog open={visible} onOpenChange={closeModal}>
151-
<DialogContent
152-
className={cn("sm:max-w-xl", !impliedPolicy && "sm:max-w-6xl")}
153-
onPointerDownOutside={(e) => e.preventDefault()}
154-
onInteractOutside={(e) => e.preventDefault()}
155-
>
150+
<Dialog open={visible} onOpenChange={closeModal} disablePointerDismissal>
151+
<DialogContent className={cn("sm:max-w-xl", !impliedPolicy && "sm:max-w-6xl")}>
156152
<DialogHeader>
157153
<DialogTitle>{t("Create Key")}</DialogTitle>
158154
</DialogHeader>

‎components/app-sidebar.tsx‎

Lines changed: 87 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -170,79 +170,95 @@ export function AppSidebar() {
170170
{group.map((item) => (
171171
<Collapsible
172172
key={item.label}
173-
asChild
174173
defaultOpen={hasChildren(item) && isRouteActive(item)}
175174
className="group/collapsible"
176-
>
177-
{hasChildren(item) ? (
178-
<SidebarMenuItem>
179-
<CollapsibleTrigger asChild>
180-
<SidebarMenuButton
181-
isActive={isRouteActive(item)}
182-
tooltip={getLabel(item)}
183-
className="gap-3"
184-
>
185-
<NavIcon name={item.icon} />
186-
<span className="flex-1 truncate">{getLabel(item)}</span>
187-
<RiArrowRightSLine className="size-4 shrink-0 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
188-
</SidebarMenuButton>
189-
</CollapsibleTrigger>
190-
<CollapsibleContent>
191-
<SidebarMenuSub className="border-l-0 border-s rtl:-translate-x-px">
192-
{item.children!.map((child) => (
193-
<SidebarMenuSubItem key={child.label}>
194-
{isExternal(child) ? (
195-
<SidebarMenuSubButton asChild size="sm">
196-
<a
197-
href={normalizedTo(child)}
198-
target="_blank"
199-
rel="noopener noreferrer"
200-
className="flex w-full items-center gap-2"
201-
>
202-
<NavIcon name={child.icon} />
203-
<span className="truncate">{getLabel(child)}</span>
204-
<RiExternalLinkLine className="ms-auto size-3 text-muted-foreground" />
205-
</a>
206-
</SidebarMenuSubButton>
207-
) : (
208-
<SidebarMenuSubButton asChild size="sm" isActive={isRouteActive(child)}>
209-
<Link href={normalizedTo(child)} className="flex w-full items-center gap-2">
210-
<NavIcon name={child.icon} />
211-
<span className="truncate">{getLabel(child)}</span>
212-
</Link>
213-
</SidebarMenuSubButton>
214-
)}
215-
</SidebarMenuSubItem>
216-
))}
217-
</SidebarMenuSub>
218-
</CollapsibleContent>
219-
</SidebarMenuItem>
220-
) : (
221-
<SidebarMenuItem>
222-
{isExternal(item) ? (
223-
<SidebarMenuButton asChild tooltip={getLabel(item)}>
224-
<a
225-
href={normalizedTo(item)}
226-
target="_blank"
227-
rel="noopener noreferrer"
228-
className="flex w-full items-center gap-3"
229-
>
230-
<NavIcon name={item.icon} />
231-
<span className="flex-1 truncate">{getLabel(item)}</span>
232-
<RiExternalLinkLine className="size-3.5 text-muted-foreground" />
233-
</a>
234-
</SidebarMenuButton>
235-
) : (
236-
<SidebarMenuButton asChild isActive={isRouteActive(item)} tooltip={getLabel(item)}>
237-
<Link href={normalizedTo(item)} className="flex w-full items-center gap-3">
238-
<NavIcon name={item.icon} />
239-
<span className="flex-1 truncate">{getLabel(item)}</span>
240-
</Link>
241-
</SidebarMenuButton>
242-
)}
243-
</SidebarMenuItem>
244-
)}
245-
</Collapsible>
175+
render={
176+
hasChildren(item) ? (
177+
<SidebarMenuItem>
178+
<CollapsibleTrigger
179+
render={
180+
<SidebarMenuButton
181+
isActive={isRouteActive(item)}
182+
tooltip={getLabel(item)}
183+
className="gap-3"
184+
>
185+
<NavIcon name={item.icon} />
186+
<span className="flex-1 truncate">{getLabel(item)}</span>
187+
<RiArrowRightSLine className="size-4 shrink-0 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
188+
</SidebarMenuButton>
189+
}
190+
/>
191+
<CollapsibleContent>
192+
<SidebarMenuSub className="border-l-0 border-s rtl:-translate-x-px">
193+
{item.children!.map((child) => (
194+
<SidebarMenuSubItem key={child.label}>
195+
{isExternal(child) ? (
196+
<SidebarMenuSubButton
197+
size="sm"
198+
render={
199+
<a
200+
href={normalizedTo(child)}
201+
target="_blank"
202+
rel="noopener noreferrer"
203+
className="flex w-full items-center gap-2"
204+
>
205+
<NavIcon name={child.icon} />
206+
<span className="truncate">{getLabel(child)}</span>
207+
<RiExternalLinkLine className="ms-auto size-3 text-muted-foreground" />
208+
</a>
209+
}
210+
/>
211+
) : (
212+
<SidebarMenuSubButton
213+
size="sm"
214+
isActive={isRouteActive(child)}
215+
render={
216+
<Link href={normalizedTo(child)} className="flex w-full items-center gap-2">
217+
<NavIcon name={child.icon} />
218+
<span className="truncate">{getLabel(child)}</span>
219+
</Link>
220+
}
221+
/>
222+
)}
223+
</SidebarMenuSubItem>
224+
))}
225+
</SidebarMenuSub>
226+
</CollapsibleContent>
227+
</SidebarMenuItem>
228+
) : (
229+
<SidebarMenuItem>
230+
{isExternal(item) ? (
231+
<SidebarMenuButton
232+
tooltip={getLabel(item)}
233+
render={
234+
<a
235+
href={normalizedTo(item)}
236+
target="_blank"
237+
rel="noopener noreferrer"
238+
className="flex w-full items-center gap-3"
239+
>
240+
<NavIcon name={item.icon} />
241+
<span className="flex-1 truncate">{getLabel(item)}</span>
242+
<RiExternalLinkLine className="size-3.5 text-muted-foreground" />
243+
</a>
244+
}
245+
/>
246+
) : (
247+
<SidebarMenuButton
248+
isActive={isRouteActive(item)}
249+
tooltip={getLabel(item)}
250+
render={
251+
<Link href={normalizedTo(item)} className="flex w-full items-center gap-3">
252+
<NavIcon name={item.icon} />
253+
<span className="flex-1 truncate">{getLabel(item)}</span>
254+
</Link>
255+
}
256+
/>
257+
)}
258+
</SidebarMenuItem>
259+
)
260+
}
261+
/>
246262
))}
247263
</SidebarMenu>
248264
</SidebarGroupContent>

0 commit comments

Comments
 (0)