mirror of
https://github.com/Dokploy/templates
synced 2025-06-26 18:16:07 +00:00
chore(ui): improve template dialog
This commit is contained in:
Zakher Masri
parent
42302fd53d
commit
0028fcffc7
@ -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>
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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,7 +304,6 @@ const TemplateGrid: React.FC = () => {
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</DialogHeader>
|
||||
|
||||
{modalLoading ? (
|
||||
<div className="py-12 text-center">
|
||||
@ -307,15 +311,56 @@ const TemplateGrid: React.FC = () => {
|
||||
<p className="mt-4 text-gray-600">Loading template files...</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-8 mt-6">
|
||||
<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>
|
||||
)}
|
||||
<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">
|
||||
<h3 className="text-xl font-semibold mb-3 flex items-center gap-2">
|
||||
<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 className="text-xs font-normal text-gray-500">
|
||||
</span>
|
||||
<span className="leading-tight text-sm text-gray-500">
|
||||
docker-compose.yml
|
||||
</span>
|
||||
</h3>
|
||||
</Label>
|
||||
|
||||
<CodeEditor
|
||||
value={templateFiles.dockerCompose || ""}
|
||||
language="yaml"
|
||||
@ -332,14 +377,20 @@ const TemplateGrid: React.FC = () => {
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="config">
|
||||
{templateFiles?.config && (
|
||||
<div className="max-w-6xl w-full relative">
|
||||
<h3 className="text-xl font-semibold mb-3 flex items-center gap-2">
|
||||
<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 className="text-xs font-normal text-gray-500">
|
||||
</span>
|
||||
<span className="leading-tight text-sm text-gray-500">
|
||||
template.yml
|
||||
</span>
|
||||
</h3>
|
||||
</Label>
|
||||
|
||||
<CodeEditor
|
||||
value={templateFiles.config || ""}
|
||||
language="yaml"
|
||||
@ -357,32 +408,9 @@ const TemplateGrid: React.FC = () => {
|
||||
</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>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
{!templateFiles?.dockerCompose && !templateFiles?.config && (
|
||||
<div className="text-center py-8">
|
||||
<p className="text-gray-500">
|
||||
@ -392,6 +420,7 @@ const TemplateGrid: React.FC = () => {
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
|
||||
@ -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>
|
||||
|
||||
22
app/src/components/ui/label.tsx
Normal file
22
app/src/components/ui/label.tsx
Normal 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
64
app/src/components/ui/tabs.tsx
Normal 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 };
|
||||
@ -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 }),
|
||||
}))
|
||||
}));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user