Dokploy/templates
1
0
Fork 0
mirror of https://github.com/Dokploy/templates synced 2025-06-26 18:16:07 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore(ui): improve template dialog

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/index.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dokploy Blueprints</title> <title>Dokploy Blueprints</title>
</head> </head>

20
app/package.json
View File

@ -10,10 +10,20 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "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-dialog": "^1.1.6",
"@radix-ui/react-dropdown-menu": "^2.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-slot": "^1.1.2",
"@radix-ui/react-tabs": "^1.1.3",
"@tailwindcss/vite": "^4.0.12", "@tailwindcss/vite": "^4.0.12",
"@uiw/codemirror-theme-github": "^4.22.1",
"@uiw/react-codemirror": "^4.22.1",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"copy-to-clipboard": "^3.3.3", "copy-to-clipboard": "^3.3.3",
@ -25,15 +35,7 @@
"tailwind-merge": "^3.0.2", "tailwind-merge": "^3.0.2",
"tailwindcss": "^4.0.12", "tailwindcss": "^4.0.12",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"vite-plugin-static-copy": "2.3.0", "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"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^20.8.2", "@types/node": "^20.8.2",

57
app/pnpm-lock.yaml
View File

@ -32,9 +32,15 @@ importers:
'@radix-ui/react-dropdown-menu': '@radix-ui/react-dropdown-menu':
specifier: ^2.1.6 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) 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': '@radix-ui/react-slot':
specifier: ^1.1.2 specifier: ^1.1.2
version: 1.1.2(@types/react@19.0.10)(react@19.0.0) 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': '@tailwindcss/vite':
specifier: ^4.0.12 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)) 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': '@types/react':
optional: true 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': '@radix-ui/react-menu@2.1.6':
resolution: {integrity: sha512-tBBb5CXDJW3t2mo9WlO7r6GTmWV0F0uzHZVFmlRmYpiSK1CDU5IKojP1pm7oknpBOrFZx/YgBRW9oorPO2S/Lg==} resolution: {integrity: sha512-tBBb5CXDJW3t2mo9WlO7r6GTmWV0F0uzHZVFmlRmYpiSK1CDU5IKojP1pm7oknpBOrFZx/YgBRW9oorPO2S/Lg==}
peerDependencies: peerDependencies:
@ -654,6 +673,19 @@ packages:
'@types/react': '@types/react':
optional: true 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': '@radix-ui/react-use-callback-ref@1.1.0':
resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==} resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
peerDependencies: peerDependencies:
@ -1883,6 +1915,15 @@ snapshots:
optionalDependencies: optionalDependencies:
'@types/react': 19.0.10 '@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)': '@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: dependencies:
'@radix-ui/primitive': 1.1.1 '@radix-ui/primitive': 1.1.1
@ -1980,6 +2021,22 @@ snapshots:
optionalDependencies: optionalDependencies:
'@types/react': 19.0.10 '@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)': '@radix-ui/react-use-callback-ref@1.1.0(@types/react@19.0.10)(react@19.0.0)':
dependencies: dependencies:
react: 19.0.0 react: 19.0.0

217
app/src/components/TemplateGrid.tsx
View File

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

4
app/src/components/ui/dialog.tsx
View File

@ -61,8 +61,8 @@ function DialogContent({
{...props} {...props}
> >
{children} {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"> <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 /> <XIcon className="size-5"/>
<span className="sr-only">Close</span> <span className="sr-only">Close</span>
</DialogPrimitive.Close> </DialogPrimitive.Close>
</DialogPrimitive.Content> </DialogPrimitive.Content>

22
app/src/components/ui/label.tsx Normal file
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 }

64
app/src/components/ui/tabs.tsx Normal file
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 };

4
app/src/store/index.ts
View File

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