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: minor ui fixes

Browse Source
This commit is contained in:
Zakher Masri
2025-03-11 18:10:55 +03:00
parent 8edfd658f6
commit f84929af35
3 changed files with 158 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -259,7 +259,7 @@ const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
open={!!selectedTemplate} open={!!selectedTemplate}
onOpenChange={() => setSelectedTemplate(null)} onOpenChange={() => setSelectedTemplate(null)}
> >
<DialogContent className="max-w-[90vw] w-full lg:max-w-[90vw] max-h-[85vh] overflow-y-auto p-0"> <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"> <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 && (
@@ -313,7 +313,7 @@ const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
</div> </div>
</DialogHeader> </DialogHeader>
<div className="p-6 pt-3 flex flex-col gap-2"> <div className="p-6 pt-3 max-w-[100%] flex flex-col gap-2">
<DialogDescription className="text-base"> <DialogDescription className="text-base">
{selectedTemplate?.description} {selectedTemplate?.description}
</DialogDescription> </DialogDescription>
@@ -374,7 +374,7 @@ const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
</TabsList> </TabsList>
<TabsContent value="docker-compose"> <TabsContent value="docker-compose">
{templateFiles?.dockerCompose && ( {templateFiles?.dockerCompose && (
<div className="max-w-6xl w-full relative"> <div className=" flex flex-col relative">
<Label className=" flex mb-2 flex-col items-start w-fit justify-start gap-1"> <Label className=" flex mb-2 flex-col items-start w-fit justify-start gap-1">
<span className="leading-tight text-xl font-semibold"> <span className="leading-tight text-xl font-semibold">
Docker Compose Docker Compose

278
app/src/components/ui/code-editor.tsx
View File

@@ -9,168 +9,168 @@ import { EditorView } from "@codemirror/view";
import { githubDark, githubLight } from "@uiw/codemirror-theme-github"; import { githubDark, githubLight } from "@uiw/codemirror-theme-github";
import CodeMirror, { type ReactCodeMirrorProps } from "@uiw/react-codemirror"; import CodeMirror, { type ReactCodeMirrorProps } from "@uiw/react-codemirror";
import { import {
autocompletion, autocompletion,
type CompletionContext, type CompletionContext,
type CompletionResult, type CompletionResult,
type Completion, type Completion,
} from "@codemirror/autocomplete"; } from "@codemirror/autocomplete";
import { useTheme } from "@/theme-provider"; import { useTheme } from "@/theme-provider";
// Docker Compose completion options // Docker Compose completion options
const dockerComposeServices = [ const dockerComposeServices = [
{ label: "services", type: "keyword", info: "Define services" }, { label: "services", type: "keyword", info: "Define services" },
{ label: "version", type: "keyword", info: "Specify compose file version" }, { label: "version", type: "keyword", info: "Specify compose file version" },
{ label: "volumes", type: "keyword", info: "Define volumes" }, { label: "volumes", type: "keyword", info: "Define volumes" },
{ label: "networks", type: "keyword", info: "Define networks" }, { label: "networks", type: "keyword", info: "Define networks" },
{ label: "configs", type: "keyword", info: "Define configuration files" }, { label: "configs", type: "keyword", info: "Define configuration files" },
{ label: "secrets", type: "keyword", info: "Define secrets" }, { label: "secrets", type: "keyword", info: "Define secrets" },
].map((opt) => ({ ].map((opt) => ({
...opt, ...opt,
apply: (view: EditorView, completion: Completion) => { apply: (view: EditorView, completion: Completion) => {
const insert = `${completion.label}:`; const insert = `${completion.label}:`;
view.dispatch({ view.dispatch({
changes: { changes: {
from: view.state.selection.main.from, from: view.state.selection.main.from,
to: view.state.selection.main.to, to: view.state.selection.main.to,
insert, insert,
}, },
selection: { anchor: view.state.selection.main.from + insert.length }, selection: { anchor: view.state.selection.main.from + insert.length },
}); });
}, },
})); }));
const dockerComposeServiceOptions = [ const dockerComposeServiceOptions = [
{ {
label: "image", label: "image",
type: "keyword", type: "keyword",
info: "Specify the image to start the container from", info: "Specify the image to start the container from",
}, },
{ label: "build", type: "keyword", info: "Build configuration" }, { label: "build", type: "keyword", info: "Build configuration" },
{ label: "command", type: "keyword", info: "Override the default command" }, { label: "command", type: "keyword", info: "Override the default command" },
{ label: "container_name", type: "keyword", info: "Custom container name" }, { label: "container_name", type: "keyword", info: "Custom container name" },
{ {
label: "depends_on", label: "depends_on",
type: "keyword", type: "keyword",
info: "Express dependency between services", info: "Express dependency between services",
}, },
{ label: "environment", type: "keyword", info: "Add environment variables" }, { label: "environment", type: "keyword", info: "Add environment variables" },
{ {
label: "env_file", label: "env_file",
type: "keyword", type: "keyword",
info: "Add environment variables from a file", info: "Add environment variables from a file",
}, },
{ {
label: "expose", label: "expose",
type: "keyword", type: "keyword",
info: "Expose ports without publishing them", info: "Expose ports without publishing them",
}, },
{ label: "ports", type: "keyword", info: "Expose ports" }, { label: "ports", type: "keyword", info: "Expose ports" },
{ {
label: "volumes", label: "volumes",
type: "keyword", type: "keyword",
info: "Mount host paths or named volumes", info: "Mount host paths or named volumes",
}, },
{ label: "restart", type: "keyword", info: "Restart policy" }, { label: "restart", type: "keyword", info: "Restart policy" },
{ label: "networks", type: "keyword", info: "Networks to join" }, { label: "networks", type: "keyword", info: "Networks to join" },
].map((opt) => ({ ].map((opt) => ({
...opt, ...opt,
apply: (view: EditorView, completion: Completion) => { apply: (view: EditorView, completion: Completion) => {
const insert = `${completion.label}: `; const insert = `${completion.label}: `;
view.dispatch({ view.dispatch({
changes: { changes: {
from: view.state.selection.main.from, from: view.state.selection.main.from,
to: view.state.selection.main.to, to: view.state.selection.main.to,
insert, insert,
}, },
selection: { anchor: view.state.selection.main.from + insert.length }, selection: { anchor: view.state.selection.main.from + insert.length },
}); });
}, },
})); }));
function dockerComposeComplete( function dockerComposeComplete(
context: CompletionContext, context: CompletionContext
): CompletionResult | null { ): CompletionResult | null {
const word = context.matchBefore(/\w*/); const word = context.matchBefore(/\w*/);
if (!word) return null; if (!word) return null;
if (!word.text && !context.explicit) return null; if (!word.text && !context.explicit) return null;
// Check if we're at the root level // Check if we're at the root level
const line = context.state.doc.lineAt(context.pos); const line = context.state.doc.lineAt(context.pos);
const indentation = /^\s*/.exec(line.text)?.[0].length || 0; const indentation = /^\s*/.exec(line.text)?.[0].length || 0;
if (indentation === 0) { if (indentation === 0) {
return { return {
from: word.from, from: word.from,
options: dockerComposeServices, options: dockerComposeServices,
validFor: /^\w*$/, validFor: /^\w*$/,
}; };
} }
// If we're inside a service definition // If we're inside a service definition
if (indentation === 4) { if (indentation === 4) {
return { return {
from: word.from, from: word.from,
options: dockerComposeServiceOptions, options: dockerComposeServiceOptions,
validFor: /^\w*$/, validFor: /^\w*$/,
}; };
} }
return null; return null;
} }
interface Props extends ReactCodeMirrorProps { interface Props extends ReactCodeMirrorProps {
wrapperClassName?: string; wrapperClassName?: string;
disabled?: boolean; disabled?: boolean;
language?: "yaml" | "json" | "properties" | "shell"; language?: "yaml" | "json" | "properties" | "shell";
lineWrapping?: boolean; lineWrapping?: boolean;
lineNumbers?: boolean; lineNumbers?: boolean;
} }
export const CodeEditor = ({ export const CodeEditor = ({
className, className,
wrapperClassName, wrapperClassName,
language = "yaml", language = "yaml",
lineNumbers = true, lineNumbers = true,
...props ...props
}: Props) => { }: Props) => {
const { theme } = useTheme(); const { theme } = useTheme();
return ( return (
<div className={cn("relative overflow-auto", wrapperClassName)}> <div className={cn("relative overflow-auto", wrapperClassName)}>
<CodeMirror <CodeMirror
basicSetup={{ basicSetup={{
lineNumbers, lineNumbers,
foldGutter: true, foldGutter: true,
highlightSelectionMatches: true, highlightSelectionMatches: true,
highlightActiveLine: !props.disabled, highlightActiveLine: !props.disabled,
allowMultipleSelections: true, allowMultipleSelections: true,
}} }}
theme={theme === "dark" ? githubDark : githubLight} theme={theme === "dark" ? githubDark : githubLight}
extensions={[ extensions={[
language === "yaml" language === "yaml"
? yaml() ? yaml()
: language === "json" : language === "json"
? json() ? json()
: language === "shell" : language === "shell"
? StreamLanguage.define(shell) ? StreamLanguage.define(shell)
: StreamLanguage.define(properties), : StreamLanguage.define(properties),
props.lineWrapping ? EditorView.lineWrapping : [], props.lineWrapping ? EditorView.lineWrapping : [],
language === "yaml" language === "yaml"
? autocompletion({ ? autocompletion({
override: [dockerComposeComplete], override: [dockerComposeComplete],
}) })
: [], : [],
]} ]}
{...props} {...props}
editable={!props.disabled} editable={!props.disabled}
className={cn( className={cn(
"w-full h-full text-sm leading-relaxed", "w-full h-full text-sm leading-relaxed",
`cm-theme-${theme}`, `cm-theme-${theme}`,
className, className
)} )}
/> />
{props.disabled && ( {props.disabled && (
<div className="absolute top-0 rounded-md left-0 w-full h-full flex items-center justify-center z-[10] [background:var(--overlay)] h-full" /> <div className="absolute top-0 rounded-md left-0 w-full flex items-center justify-center z-[10] [background:var(--overlay)] h-full" />
)} )}
</div> </div>
); );
}; };

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

@@ -1,31 +1,31 @@
import * as React from "react" import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog" import * as DialogPrimitive from "@radix-ui/react-dialog";
import { XIcon } from "lucide-react" import { XIcon } from "lucide-react";
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils";
function Dialog({ function Dialog({
...props ...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) { }: React.ComponentProps<typeof DialogPrimitive.Root>) {
return <DialogPrimitive.Root data-slot="dialog" {...props} /> return <DialogPrimitive.Root data-slot="dialog" {...props} />;
} }
function DialogTrigger({ function DialogTrigger({
...props ...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) { }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} /> return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
} }
function DialogPortal({ function DialogPortal({
...props ...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) { }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} /> return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
} }
function DialogClose({ function DialogClose({
...props ...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) { }: React.ComponentProps<typeof DialogPrimitive.Close>) {
return <DialogPrimitive.Close data-slot="dialog-close" {...props} /> return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
} }
function DialogOverlay({ function DialogOverlay({
@@ -41,7 +41,7 @@ function DialogOverlay({
)} )}
{...props} {...props}
/> />
) );
} }
function DialogContent({ function DialogContent({
@@ -62,12 +62,12 @@ function DialogContent({
> >
{children} {children}
<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 z-20 cursor-pointer"> <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 z-20 cursor-pointer">
<XIcon className="size-5"/> <XIcon className="size-5" />
<span className="sr-only">Close</span> <span className="sr-only">Close</span>
</DialogPrimitive.Close> </DialogPrimitive.Close>
</DialogPrimitive.Content> </DialogPrimitive.Content>
</DialogPortal> </DialogPortal>
) );
} }
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) { function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -77,7 +77,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
className={cn("flex flex-col gap-2 text-center sm:text-left", className)} className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
{...props} {...props}
/> />
) );
} }
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) { function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -90,7 +90,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
)} )}
{...props} {...props}
/> />
) );
} }
function DialogTitle({ function DialogTitle({
@@ -103,7 +103,7 @@ function DialogTitle({
className={cn("text-lg leading-none font-semibold", className)} className={cn("text-lg leading-none font-semibold", className)}
{...props} {...props}
/> />
) );
} }
function DialogDescription({ function DialogDescription({
@@ -116,7 +116,7 @@ function DialogDescription({
className={cn("text-muted-foreground text-sm", className)} className={cn("text-muted-foreground text-sm", className)}
{...props} {...props}
/> />
) );
} }
export { export {
@@ -130,4 +130,4 @@ export {
DialogPortal, DialogPortal,
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} };