Skip to content

Commit 4f6942b

Browse files
BramSuurdjeBramSuurdje
authored
Refactor ScriptItem and Buttons components to enhance layout and integrate dropdown for links. Update InterFaces component for improved styling and structure. (#3567)
* Refactor ScriptItem and Buttons components to enhance layout and integrate dropdown for links. Update InterFaces component for improved styling and structure. * Add React Query integration and enhance component structure - Introduced `@tanstack/react-query` for data fetching and state management. - Added `QueryProvider` component to wrap the application with QueryClient. - Refactored `ScriptItem` to utilize `useVersions` hook for fetching versions. - Created `ResourceDisplay` and `VersionBadge` components for better resource representation. - Improved layout and styling across various components, including `Alerts`, `Buttons`, and `DefaultPassword`. - Updated `layout.tsx` to include the new `QueryProvider` for global state management. * Remove bun.lock file to streamline dependency management and prevent potential conflicts. * Update dependencies in package.json and package-lock.json - Removed `@vercel/analytics` from dependencies. - Upgraded `vitest` and related packages to version `3.1.1`. - Updated various packages to their latest versions for improved performance and compatibility. - Adjusted Node.js engine requirements to support newer versions. * Update dependencies in package.json and package-lock.json - Upgraded various Radix UI components to their latest versions for improved functionality and performance. - Updated `chart.js`, `class-variance-authority`, `cmdk`, `framer-motion`, `fuse.js`, `nuqs`, `pocketbase`, and other packages to their latest versions. - Enhanced TypeScript and ESLint packages for better type checking and linting capabilities. - Updated Tailwind CSS and related plugins for improved styling and utility classes. - Adjusted Node.js engine requirements in several packages to support newer versions.
1 parent 1e4544e commit 4f6942b

File tree

16 files changed

+1365
-1317
lines changed

16 files changed

+1365
-1317
lines changed

‎frontend/package-lock.json‎

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

‎frontend/package.json‎

Lines changed: 41 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -20,70 +20,71 @@
2020
"typecheck": "tsc --noEmit"
2121
},
2222
"dependencies": {
23-
"@radix-ui/react-accordion": "^1.1.2",
24-
"@radix-ui/react-dialog": "^1.0.5",
25-
"@radix-ui/react-dropdown-menu": "^2.0.6",
26-
"@radix-ui/react-icons": "^1.3.1",
27-
"@radix-ui/react-label": "^2.1.0",
28-
"@radix-ui/react-navigation-menu": "^1.1.4",
29-
"@radix-ui/react-popover": "^1.1.2",
30-
"@radix-ui/react-select": "^2.1.2",
31-
"@radix-ui/react-separator": "^1.1.0",
32-
"@radix-ui/react-slot": "^1.1.0",
33-
"@radix-ui/react-switch": "^1.1.1",
34-
"@radix-ui/react-tabs": "^1.1.0",
35-
"@radix-ui/react-tooltip": "^1.1.2",
36-
"@vercel/analytics": "^1.2.2",
37-
"chart.js": "^4.4.1",
23+
"@radix-ui/react-accordion": "^1.2.3",
24+
"@radix-ui/react-dialog": "^1.1.6",
25+
"@radix-ui/react-dropdown-menu": "^2.1.6",
26+
"@radix-ui/react-icons": "^1.3.2",
27+
"@radix-ui/react-label": "^2.1.2",
28+
"@radix-ui/react-navigation-menu": "^1.2.5",
29+
"@radix-ui/react-popover": "^1.1.6",
30+
"@radix-ui/react-select": "^2.1.6",
31+
"@radix-ui/react-separator": "^1.1.2",
32+
"@radix-ui/react-slot": "^1.1.2",
33+
"@radix-ui/react-switch": "^1.1.3",
34+
"@radix-ui/react-tabs": "^1.1.3",
35+
"@radix-ui/react-tooltip": "^1.1.8",
36+
"@tanstack/react-query": "^5.71.1",
37+
"chart.js": "^4.4.8",
3838
"chartjs-plugin-datalabels": "^2.2.0",
39-
"class-variance-authority": "^0.7.0",
39+
"class-variance-authority": "^0.7.1",
4040
"clsx": "^2.1.1",
41-
"cmdk": "^1.0.0",
41+
"cmdk": "^1.1.1",
4242
"date-fns": "^4.1.0",
43-
"framer-motion": "^11.11.11",
44-
"fuse.js": "^7.0.0",
43+
"framer-motion": "^11.18.2",
44+
"fuse.js": "^7.1.0",
4545
"lucide-react": "^0.453.0",
4646
"mini-svg-data-uri": "^1.4.4",
4747
"next": "15.2.3",
4848
"next-themes": "^0.3.0",
49-
"nuqs": "^2.1.1",
50-
"pocketbase": "^0.21.4",
49+
"nuqs": "^2.4.1",
50+
"pocketbase": "^0.21.5",
5151
"prettier-plugin-organize-imports": "^4.1.0",
52-
"react": "19.0.0-rc-02c0e824-20241028",
52+
"react": "19.0.0",
5353
"react-chartjs-2": "^5.3.0",
5454
"react-code-blocks": "^0.1.6",
5555
"react-datepicker": "^7.6.0",
5656
"react-day-picker": "8.10.1",
57-
"react-dom": "19.0.0-rc-02c0e824-20241028",
58-
"react-icons": "^5.1.0",
57+
"react-dom": "19.0.0",
58+
"react-icons": "^5.5.0",
5959
"react-simple-typewriter": "^5.0.1",
6060
"sharp": "^0.33.5",
61-
"simple-icons": "^13.5.0",
62-
"sonner": "^1.5.0",
63-
"tailwind-merge": "^2.3.0",
64-
"zod": "^3.23.8"
61+
"simple-icons": "^13.21.0",
62+
"sonner": "^1.7.4",
63+
"tailwind-merge": "^2.6.0",
64+
"zod": "^3.24.2"
6565
},
6666
"devDependencies": {
67+
"@tanstack/eslint-plugin-query": "^5.68.0",
6768
"@testing-library/dom": "^10.4.0",
68-
"@testing-library/react": "^16.0.1",
69-
"@types/node": "^22",
69+
"@testing-library/react": "^16.2.0",
70+
"@types/node": "^22.13.16",
7071
"@types/react": "npm:[email protected]",
7172
"@types/react-dom": "npm:[email protected]",
72-
"@typescript-eslint/eslint-plugin": "^8.8.1",
73-
"@typescript-eslint/parser": "^8.8.1",
73+
"@typescript-eslint/eslint-plugin": "^8.29.0",
74+
"@typescript-eslint/parser": "^8.29.0",
7475
"@vitejs/plugin-react": "^4.3.4",
75-
"eslint": "^9.13.0",
76+
"eslint": "^9.23.0",
7677
"eslint-config-next": "15.0.2",
7778
"jsdom": "^25.0.1",
78-
"postcss": "^8",
79-
"prettier": "^3.2.5",
80-
"prettier-plugin-tailwindcss": "^0.6.5",
81-
"tailwindcss": "^3.4.9",
79+
"postcss": "^8.5.3",
80+
"prettier": "^3.5.3",
81+
"prettier-plugin-tailwindcss": "^0.6.11",
82+
"tailwindcss": "^3.4.17",
8283
"tailwindcss-animate": "^1.0.7",
8384
"tailwindcss-animated": "^1.1.2",
84-
"typescript": "^5",
85-
"vite-tsconfig-paths": "^5.1.3",
86-
"vitest": "^2.1.9"
85+
"typescript": "^5.8.2",
86+
"vite-tsconfig-paths": "^5.1.4",
87+
"vitest": "^3.1.1"
8788
},
8889
"overrides": {
8990
"@types/react": "npm:[email protected]",

‎frontend/src/app/layout.tsx‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Footer from "@/components/Footer";
22
import Navbar from "@/components/Navbar";
3+
import QueryProvider from "@/components/query-provider";
34
import { ThemeProvider } from "@/components/theme-provider";
45
import { Toaster } from "@/components/ui/sonner";
56
import { analytics, basePath } from "@/config/siteConfig";
@@ -15,15 +16,7 @@ export const metadata = {
1516
generator: "Next.js",
1617
applicationName: "Proxmox VE Helper-Scripts",
1718
referrer: "origin-when-cross-origin",
18-
keywords: [
19-
"Proxmox VE",
20-
"Helper-Scripts",
21-
"tteck",
22-
"helper",
23-
"scripts",
24-
"proxmox",
25-
"VE",
26-
],
19+
keywords: ["Proxmox VE", "Helper-Scripts", "tteck", "helper", "scripts", "proxmox", "VE"],
2720
authors: { name: "Bram Suurd" },
2821
creator: "Bram Suurd",
2922
publisher: "Bram Suurd",
@@ -59,28 +52,21 @@ export default function RootLayout({
5952
return (
6053
<html lang="en" suppressHydrationWarning>
6154
<head>
62-
<script
63-
defer
64-
src={`https://${analytics.url}/script.js`}
65-
data-website-id={analytics.token}
66-
></script>
55+
<script defer src={`https://${analytics.url}/script.js`} data-website-id={analytics.token}></script>
6756
<link rel="canonical" href={metadata.metadataBase.href} />
6857
<link rel="manifest" href="manifest.webmanifest" />
6958
<link rel="preconnect" href="https://api.github.com" />
7059
</head>
7160
<body className={inter.className}>
72-
<ThemeProvider
73-
attribute="class"
74-
defaultTheme="dark"
75-
enableSystem
76-
disableTransitionOnChange
77-
>
61+
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
7862
<div className="flex w-full flex-col justify-center">
7963
<Navbar />
8064
<div className="flex min-h-screen flex-col justify-center">
8165
<div className="flex w-full justify-center">
8266
<div className="w-full max-w-7xl ">
83-
<NuqsAdapter>{children}</NuqsAdapter>
67+
<QueryProvider>
68+
<NuqsAdapter>{children}</NuqsAdapter>
69+
</QueryProvider>
8470
<Toaster richColors />
8571
</div>
8672
</div>

‎frontend/src/app/scripts/_components/ResourceDisplay.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { CPUIcon, HDDIcon, RAMIcon } from "@/components/icons/resource-icons";
2+
import { getDisplayValueFromRAM } from "@/lib/utils/resource-utils";
3+
4+
interface ResourceDisplayProps {
5+
title: string;
6+
cpu: number | null;
7+
ram: number | null;
8+
hdd: number | null;
9+
}
10+
11+
interface IconTextProps {
12+
icon: React.ReactNode;
13+
label: string;
14+
}
15+
16+
function IconText({ icon, label }: IconTextProps) {
17+
return (
18+
<span className="inline-flex items-center gap-1.5 rounded-md bg-accent/20 px-2 py-1 text-sm">
19+
{icon}
20+
<span className="text-foreground/90">{label}</span>
21+
</span>
22+
);
23+
}
24+
25+
export function ResourceDisplay({ title, cpu, ram, hdd }: ResourceDisplayProps) {
26+
const hasCPU = typeof cpu === "number" && cpu > 0;
27+
const hasRAM = typeof ram === "number" && ram > 0;
28+
const hasHDD = typeof hdd === "number" && hdd > 0;
29+
30+
if (!hasCPU && !hasRAM && !hasHDD) return null;
31+
32+
return (
33+
<div className="flex flex-wrap items-center gap-2">
34+
<span className="text-sm font-medium text-muted-foreground">{title}</span>
35+
<div className="flex flex-wrap gap-2">
36+
{hasCPU && <IconText icon={<CPUIcon />} label={`${cpu} vCPU`} />}
37+
{hasRAM && <IconText icon={<RAMIcon />} label={getDisplayValueFromRAM(ram!)} />}
38+
{hasHDD && <IconText icon={<HDDIcon />} label={`${hdd} GB`} />}
39+
</div>
40+
</div>
41+
);
42+
}

0 commit comments

Comments
 (0)