chore(ui): improve template dialog

This commit is contained in:
Zakher Masri 2025-03-11 16:38:13 +03:00
parent 42302fd53d
commit 0028fcffc7
8 changed files with 282 additions and 108 deletions

View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dokploy Blueprints</title>
</head>

View File

@ -10,10 +10,20 @@
"preview": "vite preview"
},
"dependencies": {
"@codemirror/autocomplete": "^6.18.6",
"@codemirror/lang-json": "^6.0.1",
"@codemirror/lang-yaml": "^6.1.1",
"@codemirror/language": "^6.10.1",
"@codemirror/legacy-modes": "6.4.0",
"@codemirror/view": "6.29.0",
"@radix-ui/react-dialog": "^1.1.6",
"@radix-ui/react-dropdown-menu": "^2.1.6",
"@radix-ui/react-label": "^2.1.2",
"@radix-ui/react-slot": "^1.1.2",
"@radix-ui/react-tabs": "^1.1.3",
"@tailwindcss/vite": "^4.0.12",
"@uiw/codemirror-theme-github": "^4.22.1",
"@uiw/react-codemirror": "^4.22.1",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"copy-to-clipboard": "^3.3.3",
@ -25,15 +35,7 @@
"tailwind-merge": "^3.0.2",
"tailwindcss": "^4.0.12",
"tailwindcss-animate": "^1.0.7",
"vite-plugin-static-copy": "2.3.0",
"@codemirror/autocomplete": "^6.18.6",
"@codemirror/lang-json": "^6.0.1",
"@codemirror/lang-yaml": "^6.1.1",
"@codemirror/language": "^6.10.1",
"@codemirror/legacy-modes": "6.4.0",
"@codemirror/view": "6.29.0",
"@uiw/codemirror-theme-github": "^4.22.1",
"@uiw/react-codemirror": "^4.22.1"
"vite-plugin-static-copy": "2.3.0"
},
"devDependencies": {
"@types/node": "^20.8.2",

View File

@ -32,9 +32,15 @@ importers:
'@radix-ui/react-dropdown-menu':
specifier: ^2.1.6
version: 2.1.6(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@radix-ui/react-label':
specifier: ^2.1.2
version: 2.1.2(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@radix-ui/react-slot':
specifier: ^1.1.2
version: 1.1.2(@types/react@19.0.10)(react@19.0.0)
'@radix-ui/react-tabs':
specifier: ^1.1.3
version: 1.1.3(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@tailwindcss/vite':
specifier: ^4.0.12
version: 4.0.12(vite@6.2.1(@types/node@20.17.24)(jiti@2.4.2)(lightningcss@1.29.2))
@ -567,6 +573,19 @@ packages:
'@types/react':
optional: true
'@radix-ui/react-label@2.1.2':
resolution: {integrity: sha512-zo1uGMTaNlHehDyFQcDZXRJhUPDuukcnHz0/jnrup0JA6qL+AFpAnty+7VKa9esuU5xTblAZzTGYJKSKaBxBhw==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
'@radix-ui/react-menu@2.1.6':
resolution: {integrity: sha512-tBBb5CXDJW3t2mo9WlO7r6GTmWV0F0uzHZVFmlRmYpiSK1CDU5IKojP1pm7oknpBOrFZx/YgBRW9oorPO2S/Lg==}
peerDependencies:
@ -654,6 +673,19 @@ packages:
'@types/react':
optional: true
'@radix-ui/react-tabs@1.1.3':
resolution: {integrity: sha512-9mFyI30cuRDImbmFF6O2KUJdgEOsGh9Vmx9x/Dh9tOhL7BngmQPQfwW4aejKm5OHpfWIdmeV6ySyuxoOGjtNng==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
'@radix-ui/react-use-callback-ref@1.1.0':
resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
peerDependencies:
@ -1883,6 +1915,15 @@ snapshots:
optionalDependencies:
'@types/react': 19.0.10
'@radix-ui/react-label@2.1.2(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
dependencies:
'@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
react: 19.0.0
react-dom: 19.0.0(react@19.0.0)
optionalDependencies:
'@types/react': 19.0.10
'@types/react-dom': 19.0.4(@types/react@19.0.10)
'@radix-ui/react-menu@2.1.6(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
dependencies:
'@radix-ui/primitive': 1.1.1
@ -1980,6 +2021,22 @@ snapshots:
optionalDependencies:
'@types/react': 19.0.10
'@radix-ui/react-tabs@1.1.3(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
dependencies:
'@radix-ui/primitive': 1.1.1
'@radix-ui/react-context': 1.1.1(@types/react@19.0.10)(react@19.0.0)
'@radix-ui/react-direction': 1.1.0(@types/react@19.0.10)(react@19.0.0)
'@radix-ui/react-id': 1.1.0(@types/react@19.0.10)(react@19.0.0)
'@radix-ui/react-presence': 1.1.2(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@radix-ui/react-roving-focus': 1.1.2(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.0.10)(react@19.0.0)
react: 19.0.0
react-dom: 19.0.0(react@19.0.0)
optionalDependencies:
'@types/react': 19.0.10
'@types/react-dom': 19.0.4(@types/react@19.0.10)
'@radix-ui/react-use-callback-ref@1.1.0(@types/react@19.0.10)(react@19.0.0)':
dependencies:
react: 19.0.0

View File

@ -17,9 +17,11 @@ import {
import { Button } from "./ui/button";
import { toast } from "sonner";
import copy from "copy-to-clipboard";
import { ModeToggle } from "../mode-toggle";
import { CodeEditor } from "./ui/code-editor";
import { useStore } from "../store";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
import { Label } from "./ui/label";
import { Clipboard } from "lucide-react";
interface Template {
id: string;
@ -234,8 +236,8 @@ const TemplateGrid: React.FC = () => {
open={!!selectedTemplate}
onOpenChange={() => setSelectedTemplate(null)}
>
<DialogContent className="max-w-[90vw] w-full lg:max-w-7xl max-h-[85vh] overflow-y-auto p-6">
<DialogHeader className="space-y-4">
<DialogContent className="max-w-[90vw] w-full lg:max-w-[90vw] max-h-[85vh] overflow-y-auto p-0">
<DialogHeader className="space-y-4 border-b sticky top-0 p-4 bg-background z-10">
<div className="flex items-center gap-4">
{selectedTemplate?.logo && (
<img
@ -286,6 +288,9 @@ const TemplateGrid: React.FC = () => {
</div>
</div>
</div>
</DialogHeader>
<div className="p-6 pt-3 flex flex-col gap-2">
<DialogDescription className="text-base">
{selectedTemplate?.description}
</DialogDescription>
@ -299,99 +304,123 @@ const TemplateGrid: React.FC = () => {
</span>
))}
</div>
</DialogHeader>
{modalLoading ? (
<div className="py-12 text-center">
<div className="inline-block animate-spin rounded-full h-10 w-10 border-4 border-solid border-blue-500 border-r-transparent"></div>
<p className="mt-4 text-gray-600">Loading template files...</p>
</div>
) : (
<div className="grid gap-8 mt-6">
{templateFiles?.dockerCompose && (
<div className="max-w-6xl w-full relative">
<h3 className="text-xl font-semibold mb-3 flex items-center gap-2">
Docker Compose
<span className="text-xs font-normal text-gray-500">
docker-compose.yml
</span>
</h3>
<CodeEditor
value={templateFiles.dockerCompose || ""}
language="yaml"
className="font-mono"
/>
<Button
onClick={() => {
toast.success("Copied to clipboard");
copy(templateFiles.dockerCompose || "");
}}
className="absolute top-10 right-2 px-3 py-1 text-sm cursor-pointer"
>
Copy
</Button>
</div>
)}
{templateFiles?.config && (
<div className="max-w-6xl w-full relative">
<h3 className="text-xl font-semibold mb-3 flex items-center gap-2">
Configuration
<span className="text-xs font-normal text-gray-500">
template.yml
</span>
</h3>
<CodeEditor
value={templateFiles.config || ""}
language="yaml"
className="font-mono"
/>
<Button
onClick={() => {
toast.success("Copied to clipboard");
copy(templateFiles.config || "");
}}
className="absolute top-10 right-2 px-3 py-1 text-sm cursor-pointer"
>
Copy
</Button>
</div>
)}
{(templateFiles?.dockerCompose || templateFiles?.config) && (
<div className="max-w-6xl w-full">
<h3 className="text-xl font-semibold mb-3 flex items-center gap-2">
Base64 Configuration
<span className="text-xs font-normal text-gray-500">
Encoded template files
</span>
</h3>
<div className="relative">
<CodeEditor
value={getBase64Config()}
language="properties"
className="font-mono"
/>
<Button
onClick={() => {
toast.success("Copied to clipboard");
copy(getBase64Config());
}}
className="absolute top-2 right-2 px-3 py-1 text-sm cursor-pointer"
>
Copy
</Button>
{modalLoading ? (
<div className="py-12 text-center">
<div className="inline-block animate-spin rounded-full h-10 w-10 border-4 border-solid border-blue-500 border-r-transparent"></div>
<p className="mt-4 text-gray-600">Loading template files...</p>
</div>
) : (
<div className="grid gap-4 mt-6">
{(templateFiles?.dockerCompose || templateFiles?.config) && (
<div className="flex flex-col gap-3">
<Label className=" flex flex-col items-start w-fit justify-start gap-1">
<span className="leading-tight text-xl font-semibold">
Base64 Configuration
</span>
<span className="leading-tight text-sm text-gray-500">
Encoded template file
</span>
</Label>
<div className="relative">
<Button
// variant={"outline"}
className="absolute end-0
"
size={"icon"}
onClick={() => {
toast.success("Copied to clipboard");
copy(getBase64Config());
}}
>
<Clipboard />
</Button>
<Input
value={getBase64Config()}
className="max-w-6xl w-full pe-10"
/>
</div>
</div>
</div>
)}
{!templateFiles?.dockerCompose && !templateFiles?.config && (
<div className="text-center py-8">
<p className="text-gray-500">
No configuration files available for this template.
</p>
</div>
)}
</div>
)}
)}
<Tabs defaultValue="docker-compose">
<TabsList>
<TabsTrigger value="docker-compose">
Docker Compose
</TabsTrigger>
<TabsTrigger value="config">Configuration</TabsTrigger>
</TabsList>
<TabsContent value="docker-compose">
{templateFiles?.dockerCompose && (
<div className="max-w-6xl w-full relative">
<Label className=" flex mb-2 flex-col items-start w-fit justify-start gap-1">
<span className="leading-tight text-xl font-semibold">
Docker Compose
</span>
<span className="leading-tight text-sm text-gray-500">
docker-compose.yml
</span>
</Label>
<CodeEditor
value={templateFiles.dockerCompose || ""}
language="yaml"
className="font-mono"
/>
<Button
onClick={() => {
toast.success("Copied to clipboard");
copy(templateFiles.dockerCompose || "");
}}
className="absolute top-10 right-2 px-3 py-1 text-sm cursor-pointer"
>
Copy
</Button>
</div>
)}
</TabsContent>
<TabsContent value="config">
{templateFiles?.config && (
<div className="max-w-6xl w-full relative">
<Label className=" flex mb-2 flex-col items-start w-fit justify-start gap-1">
<span className="leading-tight text-xl font-semibold">
Configuration
</span>
<span className="leading-tight text-sm text-gray-500">
template.yml
</span>
</Label>
<CodeEditor
value={templateFiles.config || ""}
language="yaml"
className="font-mono"
/>
<Button
onClick={() => {
toast.success("Copied to clipboard");
copy(templateFiles.config || "");
}}
className="absolute top-10 right-2 px-3 py-1 text-sm cursor-pointer"
>
Copy
</Button>
</div>
)}
</TabsContent>
</Tabs>
{!templateFiles?.dockerCompose && !templateFiles?.config && (
<div className="text-center py-8">
<p className="text-gray-500">
No configuration files available for this template.
</p>
</div>
)}
</div>
)}
</div>
</DialogContent>
</Dialog>
</>

View File

@ -61,8 +61,8 @@ function DialogContent({
{...props}
>
{children}
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
<XIcon />
<DialogPrimitive.Close className="p-2 ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
<XIcon className="size-5"/>
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>

View File

@ -0,0 +1,22 @@
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cn } from "@/lib/utils"
function Label({
className,
...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
return (
<LabelPrimitive.Root
data-slot="label"
className={cn(
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
className
)}
{...props}
/>
)
}
export { Label }

View File

@ -0,0 +1,64 @@
import * as React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import { cn } from "@/lib/utils";
function Tabs({
className,
...props
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
return (
<TabsPrimitive.Root
data-slot="tabs"
className={cn("flex flex-col gap-2", className)}
{...props}
/>
);
}
function TabsList({
className,
...props
}: React.ComponentProps<typeof TabsPrimitive.List>) {
return (
<TabsPrimitive.List
data-slot="tabs-list"
className={cn(
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-1",
className
)}
{...props}
/>
);
}
function TabsTrigger({
className,
...props
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
return (
<TabsPrimitive.Trigger
data-slot="tabs-trigger"
className={cn(
"data-[state=active]:bg-background data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
/>
);
}
function TabsContent({
className,
...props
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
return (
<TabsPrimitive.Content
data-slot="tabs-content"
className={cn("flex-1 outline-none", className)}
{...props}
/>
);
}
export { Tabs, TabsList, TabsTrigger, TabsContent };

View File

@ -1,4 +1,4 @@
import { create } from 'zustand'
import { create } from "zustand";
interface Template {
id: string;
@ -26,4 +26,4 @@ export const useStore = create<Store>((set) => ({
setTemplates: (templates) => set({ templates }),
githubStars: 0,
setGithubStars: (count) => set({ githubStars: count }),
}))
}));