Skip to content

Commit b72fdc5

Browse files
florianbgtflorianbgt
committed
start migrating to shadcn
1 parent af37485 commit b72fdc5

38 files changed

+3126
-620
lines changed

‎packages/app/components.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
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+
}

‎packages/app/deno.json‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@
55
"imports": {
66
"@napi/shared": "../shared/src/index.ts",
77
"@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.4",
8+
"@radix-ui/react-dialog": "npm:@radix-ui/react-dialog@^1.1.13",
9+
"@radix-ui/react-dropdown-menu": "npm:@radix-ui/react-dropdown-menu@^2.1.14",
10+
"@radix-ui/react-scroll-area": "npm:@radix-ui/react-scroll-area@^1.2.8",
11+
"@radix-ui/react-separator": "npm:@radix-ui/react-separator@^1.1.6",
12+
"@radix-ui/react-slot": "npm:@radix-ui/react-slot@^1.2.2",
13+
"@radix-ui/react-toast": "npm:@radix-ui/react-toast@^1.2.13",
14+
"@radix-ui/react-tooltip": "npm:@radix-ui/react-tooltip@^1.2.6",
815
"@radix-ui/themes": "npm:@radix-ui/themes@^3.2.1",
916
"@tailwindcss/vite": "npm:@tailwindcss/vite@^4.1.5",
1017
"@types/cytoscape-fcose": "npm:@types/cytoscape-fcose@^2.2.4",
@@ -13,15 +20,20 @@
1320
"@types/react-router": "npm:@types/react-router@^5.1.20",
1421
"@vitejs/plugin-react": "npm:@vitejs/plugin-react@^4.4.1",
1522
"autoprefixer": "npm:autoprefixer@^10.4.21",
23+
"class-variance-authority": "npm:class-variance-authority@^0.7.1",
24+
"clsx": "npm:clsx@^2.1.1",
1625
"cytoscape-fcose": "npm:cytoscape-fcose@^2.2.0",
26+
"lucide-react": "npm:lucide-react@^0.508.0",
1727
"react": "npm:react@^19.1.0",
1828
"react-dom": "npm:react-dom@^19.1.0",
1929
"react-icons": "npm:[email protected]",
2030
"react-router": "npm:react-router@^7.5.3",
2131
"react-toastify": "npm:react-toastify@^11.0.5",
22-
"react-resizable-panels": "npm:react-resizable-panels@2.1.8",
32+
"react-resizable-panels": "npm:react-resizable-panels@^3.0.1",
2333
"cytoscape": "npm:[email protected]",
34+
"tailwind-merge": "npm:tailwind-merge@^3.2.0",
2435
"tailwindcss": "npm:tailwindcss@^4.1.5",
36+
"tw-animate-css": "npm:tw-animate-css@^1.2.9",
2537
"vite": "npm:vite@^6.3.5"
2638
},
2739
"tasks": {

‎packages/app/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<link rel="icon" href="/favicon.ico" />
6+
<link rel="stylesheet" href="src/styles/index.css" />
67
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
78
<title>NanoAPI</title>
89
</head>

‎packages/app/src/components/Cytoscape/ControlExtensions/MetricsExtension.tsx‎

Lines changed: 47 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { Button, DropdownMenu } from "@radix-ui/themes";
2-
import { LuChevronUp } from "react-icons/lu";
31
import {
42
type Metric,
53
metricCharacterCount,
@@ -10,6 +8,19 @@ import {
108
metricDependentCount,
119
metricLinesCount,
1210
} from "@napi/shared";
11+
import {
12+
Tooltip,
13+
TooltipContent,
14+
TooltipTrigger,
15+
} from "../../shadcn/Tooltip.tsx";
16+
import { Button } from "../../shadcn/Button.tsx";
17+
import {
18+
DropdownMenu,
19+
DropdownMenuContent,
20+
DropdownMenuItem,
21+
DropdownMenuTrigger,
22+
} from "../../shadcn/Dropdownmenu.tsx";
23+
import { ChevronUp } from "lucide-react";
1324

1425
// Extension for the controls in the project view
1526
export default function MetricsExtension(props: {
@@ -48,49 +59,42 @@ export default function MetricsExtension(props: {
4859
}
4960

5061
return (
51-
<DropdownMenu.Root>
52-
<DropdownMenu.Trigger>
53-
<Button
54-
size="1"
55-
variant="ghost"
56-
color="violet"
57-
highContrast
58-
disabled={props.busy}
59-
className="py-1.5"
60-
>
61-
{getMetricLabel(metric)}
62-
<LuChevronUp />
63-
</Button>
64-
</DropdownMenu.Trigger>
65-
<DropdownMenu.Content color="violet" variant="soft">
66-
<DropdownMenu.Item
67-
onClick={() => props.metricState?.setMetric?.(undefined)}
68-
disabled={props.busy}
69-
>
70-
No Metric
71-
</DropdownMenu.Item>
72-
{(
73-
[
74-
{ metric: metricLinesCount, label: "Total Lines" },
62+
<Tooltip delayDuration={500}>
63+
<DropdownMenu>
64+
<DropdownMenuTrigger asChild>
65+
<TooltipTrigger asChild>
66+
<Button
67+
variant="ghost"
68+
disabled={props.busy}
69+
>
70+
<ChevronUp />
71+
{getMetricLabel(metric)}
72+
</Button>
73+
</TooltipTrigger>
74+
</DropdownMenuTrigger>
75+
<DropdownMenuContent>
76+
{([
77+
{ metric: undefined, label: "No Metric" },
78+
{ metric: metricLinesCount, label: "Lines" },
7579
{ metric: metricCodeLineCount, label: "Code Lines" },
7680
{ metric: metricCharacterCount, label: "Total Characters" },
7781
{ metric: metricCodeCharacterCount, label: "Code Characters" },
78-
{ metric: metricDependencyCount, label: "Dependencies Count" },
79-
{ metric: metricDependentCount, label: "Dependents Count" },
80-
{
81-
metric: metricCyclomaticComplexity,
82-
label: "Cyclomatic Complexity",
83-
},
84-
] as { metric: Metric; label: string }[]
85-
).map(({ metric, label }) => (
86-
<DropdownMenu.Item
87-
key={metric}
88-
onClick={() => props.metricState?.setMetric?.(metric)}
89-
>
90-
{label}
91-
</DropdownMenu.Item>
92-
))}
93-
</DropdownMenu.Content>
94-
</DropdownMenu.Root>
82+
{ metric: metricDependencyCount, label: "Dependencies" },
83+
{ metric: metricDependentCount, label: "Dependents" },
84+
{ metric: metricCyclomaticComplexity, label: "Complexity" },
85+
] as { metric: Metric | undefined; label: string }[]).map((val) => (
86+
<DropdownMenuItem
87+
key={val.metric}
88+
onClick={() => props.metricState?.setMetric?.(val.metric)}
89+
>
90+
{val.label}
91+
</DropdownMenuItem>
92+
))}
93+
</DropdownMenuContent>
94+
</DropdownMenu>
95+
<TooltipContent>
96+
Select a metric to display on the graph
97+
</TooltipContent>
98+
</Tooltip>
9599
);
96100
}

‎packages/app/src/components/Cytoscape/Controls.tsx‎

Lines changed: 60 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
import type { ReactNode } from "react";
2-
import { Button, Tooltip } from "@radix-ui/themes";
2+
import { Button } from "../shadcn/Button.tsx";
3+
import { Tooltip, TooltipContent, TooltipTrigger } from "../shadcn/Tooltip.tsx";
34
import type { Core } from "cytoscape";
4-
import {
5-
MdFilterCenterFocus,
6-
MdOutlineAccountTree,
7-
MdOutlineZoomIn,
8-
MdOutlineZoomOut,
9-
} from "react-icons/md";
5+
import { Focus, Network, ZoomIn, ZoomOut } from "lucide-react";
106

117
export default function Controls(props: {
128
busy: boolean;
@@ -36,54 +32,66 @@ export default function Controls(props: {
3632
return (
3733
<div className="absolute bottom-6 inset-x-4 z-10 flex justify-around">
3834
<div className="flex gap-3 items-center">
39-
<div className="bg-background-light dark:bg-background-dark flex gap-4 py-2 px-3 rounded-lg">
40-
<Tooltip content="Fit to screen" side="top">
41-
<Button
42-
size="1"
43-
variant="ghost"
44-
color="violet"
45-
highContrast
46-
disabled={props.busy}
47-
onClick={handleFit}
48-
>
49-
<MdFilterCenterFocus className="text-2xl h-5 w-5" />
50-
</Button>
35+
<div className="flex space-x-1 p-1 rounded-lg border bg-background">
36+
<Tooltip delayDuration={500}>
37+
<TooltipTrigger asChild>
38+
<Button
39+
size="icon"
40+
variant="ghost"
41+
disabled={props.busy}
42+
onClick={handleFit}
43+
>
44+
<Focus />
45+
</Button>
46+
</TooltipTrigger>
47+
<TooltipContent>
48+
Fit to screen
49+
</TooltipContent>
5150
</Tooltip>
52-
<Tooltip content="Reset layout" side="top">
53-
<Button
54-
size="1"
55-
variant="ghost"
56-
color="violet"
57-
highContrast
58-
disabled={props.busy}
59-
onClick={() => props.onLayout()}
60-
>
61-
<MdOutlineAccountTree className="text-xl h-5 w-5" />
62-
</Button>
51+
<Tooltip delayDuration={500}>
52+
<TooltipTrigger asChild>
53+
<Button
54+
size="icon"
55+
variant="ghost"
56+
disabled={props.busy}
57+
onClick={() => props.onLayout()}
58+
>
59+
<Network />
60+
</Button>
61+
</TooltipTrigger>
62+
<TooltipContent>
63+
Reset layout
64+
</TooltipContent>
6365
</Tooltip>
64-
<Tooltip content="Zoom out" side="top">
65-
<Button
66-
size="1"
67-
variant="ghost"
68-
color="violet"
69-
highContrast
70-
disabled={props.busy}
71-
onClick={() => handleZoom(0.9)}
72-
>
73-
<MdOutlineZoomOut className="text-2xl h-5 w-5" />
74-
</Button>
66+
<Tooltip delayDuration={500}>
67+
<TooltipTrigger asChild>
68+
<Button
69+
size="icon"
70+
variant="ghost"
71+
disabled={props.busy}
72+
onClick={() => handleZoom(0.9)}
73+
>
74+
<ZoomOut />
75+
</Button>
76+
</TooltipTrigger>
77+
<TooltipContent>
78+
Zoom out
79+
</TooltipContent>
7580
</Tooltip>
76-
<Tooltip content="Zoom in" side="top">
77-
<Button
78-
size="1"
79-
variant="ghost"
80-
color="violet"
81-
highContrast
82-
disabled={props.busy}
83-
onClick={() => handleZoom(1.1)}
84-
>
85-
<MdOutlineZoomIn className="text-2xl h-5 w-5" />
86-
</Button>
81+
<Tooltip delayDuration={500}>
82+
<TooltipTrigger asChild>
83+
<Button
84+
size="icon"
85+
variant="ghost"
86+
disabled={props.busy}
87+
onClick={() => handleZoom(1.1)}
88+
>
89+
<ZoomIn />
90+
</Button>
91+
</TooltipTrigger>
92+
<TooltipContent>
93+
Zoom in
94+
</TooltipContent>
8795
</Tooltip>
8896
{/* Used to pass extensions into the controls */}
8997
{props.children}

‎packages/app/src/components/Cytoscape/Skeleton.tsx‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

0 commit comments

Comments
 (0)