From b72fdc537597ebea91757d62b81e95ac3b0ecae0 Mon Sep 17 00:00:00 2001 From: florianbgt Date: Thu, 8 May 2025 18:25:35 +0200 Subject: [PATCH 01/12] start migrating to shadcn --- packages/app/components.json | 21 + packages/app/deno.json | 14 +- packages/app/index.html | 1 + .../ControlExtensions/MetricsExtension.tsx | 90 +- .../app/src/components/Cytoscape/Controls.tsx | 112 +-- .../app/src/components/Cytoscape/Skeleton.tsx | 19 - .../Cytoscape/contextMenu/FileContextMenu.tsx | 168 ++-- .../app/src/components/shadcn/Breadcrumb.tsx | 115 +++ packages/app/src/components/shadcn/Button.tsx | 58 ++ .../src/components/shadcn/Dropdownmenu.tsx | 201 +++++ packages/app/src/components/shadcn/Input.tsx | 22 + packages/app/src/components/shadcn/README.md | 20 + .../app/src/components/shadcn/Resizable.tsx | 45 + .../app/src/components/shadcn/Scrollarea.tsx | 48 ++ .../app/src/components/shadcn/Separator.tsx | 31 + packages/app/src/components/shadcn/Sheet.tsx | 143 ++++ .../app/src/components/shadcn/Sidebar.tsx | 776 ++++++++++++++++++ .../app/src/components/shadcn/Skeleton.tsx | 15 + packages/app/src/components/shadcn/Toast.tsx | 129 +++ .../app/src/components/shadcn/Toaster.tsx | 35 + .../app/src/components/shadcn/Tooltip.tsx | 32 + .../components/shadcn/hooks/use-mobile.tsx | 23 + .../src/components/shadcn/hooks/use-toast.tsx | 191 +++++ packages/app/src/contexts/ThemeContext.tsx | 46 -- packages/app/src/contexts/ThemeProvider.tsx | 69 ++ .../src/helpers/cytoscape/metrics/index.ts | 26 +- .../projectDependencyVisualizer/index.ts | 52 +- packages/app/src/helpers/cytoscape/styles.ts | 61 ++ packages/app/src/index.css | 46 -- packages/app/src/layout/GraphLayout.tsx | 174 ++-- packages/app/src/lib/utils.ts | 6 + packages/app/src/main.tsx | 44 +- packages/app/src/pages/audit/base.tsx | 681 ++++++++++++--- packages/app/src/pages/audit/index.tsx | 76 +- packages/app/src/styles/global.css | 151 ++++ packages/app/src/styles/index.css | 1 + packages/app/tailwind.config.js | 1 - packages/app/vite.config.ts | 3 - 38 files changed, 3126 insertions(+), 620 deletions(-) create mode 100644 packages/app/components.json delete mode 100644 packages/app/src/components/Cytoscape/Skeleton.tsx create mode 100644 packages/app/src/components/shadcn/Breadcrumb.tsx create mode 100644 packages/app/src/components/shadcn/Button.tsx create mode 100644 packages/app/src/components/shadcn/Dropdownmenu.tsx create mode 100644 packages/app/src/components/shadcn/Input.tsx create mode 100644 packages/app/src/components/shadcn/README.md create mode 100644 packages/app/src/components/shadcn/Resizable.tsx create mode 100644 packages/app/src/components/shadcn/Scrollarea.tsx create mode 100644 packages/app/src/components/shadcn/Separator.tsx create mode 100644 packages/app/src/components/shadcn/Sheet.tsx create mode 100644 packages/app/src/components/shadcn/Sidebar.tsx create mode 100644 packages/app/src/components/shadcn/Skeleton.tsx create mode 100644 packages/app/src/components/shadcn/Toast.tsx create mode 100644 packages/app/src/components/shadcn/Toaster.tsx create mode 100644 packages/app/src/components/shadcn/Tooltip.tsx create mode 100644 packages/app/src/components/shadcn/hooks/use-mobile.tsx create mode 100644 packages/app/src/components/shadcn/hooks/use-toast.tsx delete mode 100644 packages/app/src/contexts/ThemeContext.tsx create mode 100644 packages/app/src/contexts/ThemeProvider.tsx create mode 100644 packages/app/src/helpers/cytoscape/styles.ts delete mode 100644 packages/app/src/index.css create mode 100644 packages/app/src/lib/utils.ts create mode 100644 packages/app/src/styles/global.css create mode 100644 packages/app/src/styles/index.css delete mode 100644 packages/app/tailwind.config.js diff --git a/packages/app/components.json b/packages/app/components.json new file mode 100644 index 00000000..285033d3 --- /dev/null +++ b/packages/app/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": false, + "tsx": true, + "tailwind": { + "config": "", + "css": "src/styles/globals.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "iconLibrary": "lucide" +} diff --git a/packages/app/deno.json b/packages/app/deno.json index 23d155d5..f90b5669 100644 --- a/packages/app/deno.json +++ b/packages/app/deno.json @@ -5,6 +5,13 @@ "imports": { "@napi/shared": "../shared/src/index.ts", "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.4", + "@radix-ui/react-dialog": "npm:@radix-ui/react-dialog@^1.1.13", + "@radix-ui/react-dropdown-menu": "npm:@radix-ui/react-dropdown-menu@^2.1.14", + "@radix-ui/react-scroll-area": "npm:@radix-ui/react-scroll-area@^1.2.8", + "@radix-ui/react-separator": "npm:@radix-ui/react-separator@^1.1.6", + "@radix-ui/react-slot": "npm:@radix-ui/react-slot@^1.2.2", + "@radix-ui/react-toast": "npm:@radix-ui/react-toast@^1.2.13", + "@radix-ui/react-tooltip": "npm:@radix-ui/react-tooltip@^1.2.6", "@radix-ui/themes": "npm:@radix-ui/themes@^3.2.1", "@tailwindcss/vite": "npm:@tailwindcss/vite@^4.1.5", "@types/cytoscape-fcose": "npm:@types/cytoscape-fcose@^2.2.4", @@ -13,15 +20,20 @@ "@types/react-router": "npm:@types/react-router@^5.1.20", "@vitejs/plugin-react": "npm:@vitejs/plugin-react@^4.4.1", "autoprefixer": "npm:autoprefixer@^10.4.21", + "class-variance-authority": "npm:class-variance-authority@^0.7.1", + "clsx": "npm:clsx@^2.1.1", "cytoscape-fcose": "npm:cytoscape-fcose@^2.2.0", + "lucide-react": "npm:lucide-react@^0.508.0", "react": "npm:react@^19.1.0", "react-dom": "npm:react-dom@^19.1.0", "react-icons": "npm:react-icons@5.5.0", "react-router": "npm:react-router@^7.5.3", "react-toastify": "npm:react-toastify@^11.0.5", - "react-resizable-panels": "npm:react-resizable-panels@2.1.8", + "react-resizable-panels": "npm:react-resizable-panels@^3.0.1", "cytoscape": "npm:cytoscape@3.31.1", + "tailwind-merge": "npm:tailwind-merge@^3.2.0", "tailwindcss": "npm:tailwindcss@^4.1.5", + "tw-animate-css": "npm:tw-animate-css@^1.2.9", "vite": "npm:vite@^6.3.5" }, "tasks": { diff --git a/packages/app/index.html b/packages/app/index.html index be954c35..723f8983 100644 --- a/packages/app/index.html +++ b/packages/app/index.html @@ -3,6 +3,7 @@ + NanoAPI diff --git a/packages/app/src/components/Cytoscape/ControlExtensions/MetricsExtension.tsx b/packages/app/src/components/Cytoscape/ControlExtensions/MetricsExtension.tsx index 7debbe64..f07b65a6 100644 --- a/packages/app/src/components/Cytoscape/ControlExtensions/MetricsExtension.tsx +++ b/packages/app/src/components/Cytoscape/ControlExtensions/MetricsExtension.tsx @@ -1,5 +1,3 @@ -import { Button, DropdownMenu } from "@radix-ui/themes"; -import { LuChevronUp } from "react-icons/lu"; import { type Metric, metricCharacterCount, @@ -10,6 +8,19 @@ import { metricDependentCount, metricLinesCount, } from "@napi/shared"; +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "../../shadcn/Tooltip.tsx"; +import { Button } from "../../shadcn/Button.tsx"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "../../shadcn/Dropdownmenu.tsx"; +import { ChevronUp } from "lucide-react"; // Extension for the controls in the project view export default function MetricsExtension(props: { @@ -48,49 +59,42 @@ export default function MetricsExtension(props: { } return ( - - - - - - props.metricState?.setMetric?.(undefined)} - disabled={props.busy} - > - No Metric - - {( - [ - { metric: metricLinesCount, label: "Total Lines" }, + + + + + + + + + {([ + { metric: undefined, label: "No Metric" }, + { metric: metricLinesCount, label: "Lines" }, { metric: metricCodeLineCount, label: "Code Lines" }, { metric: metricCharacterCount, label: "Total Characters" }, { metric: metricCodeCharacterCount, label: "Code Characters" }, - { metric: metricDependencyCount, label: "Dependencies Count" }, - { metric: metricDependentCount, label: "Dependents Count" }, - { - metric: metricCyclomaticComplexity, - label: "Cyclomatic Complexity", - }, - ] as { metric: Metric; label: string }[] - ).map(({ metric, label }) => ( - props.metricState?.setMetric?.(metric)} - > - {label} - - ))} - - + { metric: metricDependencyCount, label: "Dependencies" }, + { metric: metricDependentCount, label: "Dependents" }, + { metric: metricCyclomaticComplexity, label: "Complexity" }, + ] as { metric: Metric | undefined; label: string }[]).map((val) => ( + props.metricState?.setMetric?.(val.metric)} + > + {val.label} + + ))} + + + + Select a metric to display on the graph + + ); } diff --git a/packages/app/src/components/Cytoscape/Controls.tsx b/packages/app/src/components/Cytoscape/Controls.tsx index 1cff5af1..f3f15f29 100644 --- a/packages/app/src/components/Cytoscape/Controls.tsx +++ b/packages/app/src/components/Cytoscape/Controls.tsx @@ -1,12 +1,8 @@ import type { ReactNode } from "react"; -import { Button, Tooltip } from "@radix-ui/themes"; +import { Button } from "../shadcn/Button.tsx"; +import { Tooltip, TooltipContent, TooltipTrigger } from "../shadcn/Tooltip.tsx"; import type { Core } from "cytoscape"; -import { - MdFilterCenterFocus, - MdOutlineAccountTree, - MdOutlineZoomIn, - MdOutlineZoomOut, -} from "react-icons/md"; +import { Focus, Network, ZoomIn, ZoomOut } from "lucide-react"; export default function Controls(props: { busy: boolean; @@ -36,54 +32,66 @@ export default function Controls(props: { return (
-
- - +
+ + + + + + Fit to screen + - - + + + + + + Reset layout + - - + + + + + + Zoom out + - - + + + + + + Zoom in + {/* Used to pass extensions into the controls */} {props.children} diff --git a/packages/app/src/components/Cytoscape/Skeleton.tsx b/packages/app/src/components/Cytoscape/Skeleton.tsx deleted file mode 100644 index 11bdddd8..00000000 --- a/packages/app/src/components/Cytoscape/Skeleton.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Skeleton } from "@radix-ui/themes"; - -export function CytoscapeSkeleton() { - return ( -
- -
- - -
-
- - - - -
-
- ); -} diff --git a/packages/app/src/components/Cytoscape/contextMenu/FileContextMenu.tsx b/packages/app/src/components/Cytoscape/contextMenu/FileContextMenu.tsx index b3c11f20..763f6430 100644 --- a/packages/app/src/components/Cytoscape/contextMenu/FileContextMenu.tsx +++ b/packages/app/src/components/Cytoscape/contextMenu/FileContextMenu.tsx @@ -1,5 +1,4 @@ import { Link } from "react-router"; -import { DropdownMenu } from "@radix-ui/themes"; import { LuFolderSearch2, LuGitGraph, @@ -7,99 +6,106 @@ import { LuSearchCode, } from "react-icons/lu"; import type { FileDependencyManifest } from "@napi/shared"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "../../shadcn/Dropdownmenu.tsx"; +import { Button } from "../../shadcn/Button.tsx"; +import { PanelRight, Pickaxe, SearchCode } from "lucide-react"; export default function FileContextMenu(props: { - position: { x: number; y: number }; - fileDependencyManifest: FileDependencyManifest; - open: boolean; - showInSidebar: (filename: string) => void; - onOpenChange: (open: boolean) => void; - setDetailsPaneOpen: (open: boolean) => void; - setExtractionNodes: ( - filePath: string, - symbols: string[], - action: "add" | "remove", - ) => void; + context: { + position: { x: number; y: number }; + fileDependencyManifest: FileDependencyManifest; + } | undefined; + onClose: () => void; + onOpenDetails: (filePath: string) => void; + // showInSidebar: (filename: string) => void; + // setDetailsPaneOpen: (open: boolean) => void; + // setExtractionNodes: ( + // filePath: string, + // symbols: string[], + // action: "add" | "remove", + // ) => void; }) { - function handleOnExtract() { - props.setExtractionNodes( - props.fileDependencyManifest.filePath, - Object.values(props.fileDependencyManifest.symbols).map( - (symbol) => symbol.id, - ), - "add", - ); - } + // function handleOnExtract() { + // props.setExtractionNodes( + // props.fileDependencyManifest.filePath, + // Object.values(props.fileDependencyManifest.symbols).map( + // (symbol) => symbol.id, + // ), + // "add", + // ); + // } return (
props.onOpenChange(false)} // Optional auto-close > - - + props.onClose()} + > +
- + - - - {props.fileDependencyManifest.filePath.split("/").pop()} - - - props.setDetailsPaneOpen(true)} - > -
- Show details - -
- - - + + {props.context?.fileDependencyManifest.filePath.split("/").pop()} + + + + + + + + + + + + + +
); } diff --git a/packages/app/src/components/shadcn/Breadcrumb.tsx b/packages/app/src/components/shadcn/Breadcrumb.tsx new file mode 100644 index 00000000..05f4a7f6 --- /dev/null +++ b/packages/app/src/components/shadcn/Breadcrumb.tsx @@ -0,0 +1,115 @@ +import * as React from "react"; +import { Slot } from "@radix-ui/react-slot"; +import { ChevronRight, MoreHorizontal } from "lucide-react"; + +import { cn } from "../../lib/utils.ts"; + +const Breadcrumb = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<"nav"> & { + separator?: React.ReactNode; + } +>(({ ...props }, ref) =>