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

Merge pull request #8 from zaaakher/ui/loading

Browse Source 
chore(ui): improve search UI
This commit is contained in:
Mauricio Siu 2025-03-11 20:50:18 -06:00 committed by GitHub
commit 96ee890079
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 314 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/package.json
View File

@ -38,7 +38,8 @@
"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",
"zustand": "^5.0.3"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^20.8.2", "@types/node": "^20.8.2",

5
app/src/App.tsx
View File

@ -1,14 +1,17 @@
import TemplateGrid from "./components/TemplateGrid"; import TemplateGrid from "./components/TemplateGrid";
import Navigation from "./components/Navigation"; import Navigation from "./components/Navigation";
import Search from "./components/Search"; import Search from "./components/Search";
import { useStore } from "./store";
import "./App.css"; import "./App.css";
function App() { function App() {
const view = useStore((state) => state.view);
return ( return (
<div className="min-h-screen"> <div className="min-h-screen">
<Navigation /> <Navigation />
<Search /> <Search />
<TemplateGrid /> <TemplateGrid view={view} />
</div> </div>
); );
} }

58
app/src/components/Search.tsx
View File

@ -1,7 +1,6 @@
import { Input } from "./ui/input"; import { Input } from "./ui/input";
import { useStore } from "../store"; import { useStore } from "../store";
import { SearchIcon, XIcon } from "lucide-react"; import { Grid, List, SearchIcon, XIcon } from "lucide-react";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover"; import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
import { import {
@ -15,14 +14,16 @@ import {
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Check, ChevronsUpDown } from "lucide-react"; import { Check, ChevronsUpDown } from "lucide-react";
import React from "react"; import React from "react";
import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
import SelectedTags from "./SelectedTags";
const Search = () => { const Search = () => {
const { templates, searchQuery, setSearchQuery } = useStore(); const { templates, searchQuery, setSearchQuery, setView } = useStore();
const selectedTags = useStore((state) => state.selectedTags); const selectedTags = useStore((state) => state.selectedTags);
const addSelectedTag = useStore((state) => state.addSelectedTag); const addSelectedTag = useStore((state) => state.addSelectedTag);
const removeSelectedTag = useStore((state) => state.removeSelectedTag); const removeSelectedTag = useStore((state) => state.removeSelectedTag);
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
const [tagSearch, setTagSearch] = React.useState(""); const [tagSearch, setTagSearch] = React.useState("");
const view = useStore((state) => state.view);
// Get all unique tags, safely handle empty templates // Get all unique tags, safely handle empty templates
const uniqueTags = React.useMemo(() => { const uniqueTags = React.useMemo(() => {
@ -41,25 +42,21 @@ const Search = () => {
}, [uniqueTags, tagSearch]); }, [uniqueTags, tagSearch]);
return ( return (
<div className="max-w-xl mx-auto p-12"> <div className=" mx-auto p-12 border-b w-full">
<h1 className="text-2xl md:text-3xl xl:text-4xl font-bold text-center mb-8"> <h1 className="text-2xl md:text-3xl xl:text-4xl font-bold text-center mb-8">
Available Templates ({templates?.length || 0}) Available Templates ({templates?.length || 0})
</h1> </h1>
<div className="max-w-xl mx-auto"> <div className="max-w-xl mx-auto flex flex-col gap-2">
<div className="flex flex-row gap-2">
<div className="relative w-full"> <div className="relative w-full">
<Input <Input
type="text" type="text"
placeholder="Search templates..." placeholder="Search templates..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="w-full" className="w-full p-6"
/> />
{searchQuery.length > 0 ? ( {searchQuery.length > 0 ? (
<div <div className="cursor-pointer" onClick={() => setSearchQuery("")}>
className="cursor-pointer"
onClick={() => setSearchQuery("")}
>
<XIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" /> <XIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
</div> </div>
) : ( ) : (
@ -67,6 +64,23 @@ const Search = () => {
)} )}
</div> </div>
<div className="flex flex-row gap-2 justify-between">
<Tabs
defaultValue={view}
onValueChange={(value) => {
setView(value as "grid" | "rows");
}}
>
<TabsList>
<TabsTrigger value="grid">
<Grid /> <span className="text-xs p-1">Grid</span>
</TabsTrigger>
<TabsTrigger value="rows">
<List /> <span className="text-xs p-1">List</span>
</TabsTrigger>
</TabsList>
</Tabs>
<Popover open={open} onOpenChange={setOpen}> <Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button <Button
@ -118,25 +132,7 @@ const Search = () => {
</PopoverContent> </PopoverContent>
</Popover> </Popover>
</div> </div>
{selectedTags.length > 0 && ( {selectedTags.length > 0 && <SelectedTags />}
<div className="flex flex-wrap gap-2 mt-4">
{selectedTags.map((tag) => (
<Badge
key={tag}
variant="default"
className="cursor-pointer pr-1 flex items-center gap-1"
>
{tag}
<div
className="hover:bg-primary-foreground/20 rounded-full p-1"
onClick={() => removeSelectedTag(tag)}
>
<XIcon className="h-3 w-3" />
</div>
</Badge>
))}
</div>
)}
</div> </div>
</div> </div>
); );

30
app/src/components/SelectedTags.tsx Normal file
View File

@ -0,0 +1,30 @@
import { XIcon } from "lucide-react";
import { useStore } from "../store";
import { Badge } from "./ui/badge";
const SelectedTags = () => {
const selectedTags = useStore((state) => state.selectedTags);
const removeSelectedTag = useStore((state) => state.removeSelectedTag);
return (
<div className="flex flex-wrap gap-2 mt-4 border-t pt-4">
{selectedTags.map((tag) => (
<Badge
key={tag}
variant="default"
className="cursor-pointer pr-1 flex items-center gap-1"
>
{tag}
<div
className="hover:bg-primary-foreground/20 rounded-full p-1"
onClick={() => removeSelectedTag(tag)}
>
<XIcon className="h-3 w-3" />
</div>
</Badge>
))}
</div>
);
};
export default SelectedTags;

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

@ -22,6 +22,8 @@ import { useStore } from "../store";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
import { Label } from "./ui/label"; import { Label } from "./ui/label";
import { Clipboard } from "lucide-react"; import { Clipboard } from "lucide-react";
import { Skeleton } from "./ui/skeleton";
import { cn } from "@/lib/utils";
interface Template { interface Template {
id: string; id: string;
@ -42,11 +44,17 @@ interface TemplateFiles {
config: string | null; config: string | null;
} }
const TemplateGrid: React.FC = () => { interface TemplateGridProps {
view: "grid" | "rows";
}
const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
const { templates, setTemplates } = useStore(); const { templates, setTemplates } = useStore();
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const { addSelectedTag, searchQuery, selectedTags } = useStore(); const searchQuery = useStore((state) => state.searchQuery);
const selectedTags = useStore((state) => state.selectedTags);
const { addSelectedTag } = useStore();
const [selectedTemplate, setSelectedTemplate] = useState<Template | null>( const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(
null null
@ -133,9 +141,23 @@ const TemplateGrid: React.FC = () => {
if (loading) { if (loading) {
return ( return (
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<h1 className="text-4xl font-bold text-center text-gray-900 mb-8"> <div
Loading templates... className={cn("", {
</h1> "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6":
view === "grid",
"grid grid-cols-1 gap-4": view === "rows",
})}
>
{[1, 2, 3].map((item) => (
<Skeleton
key={item}
className={cn({
"h-[300px]": view === "grid",
"h-[135px]": view === "rows",
})}
></Skeleton>
))}
</div>
</div> </div>
); );
} }
@ -154,14 +176,27 @@ const TemplateGrid: React.FC = () => {
return ( return (
<> <>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> <div
className={cn("", {
"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6":
view === "grid",
"grid grid-cols-1 gap-4": view === "rows",
})}
>
{filteredTemplates.length > 0 ? ( {filteredTemplates.length > 0 ? (
filteredTemplates.map((template) => ( filteredTemplates.map((template) => (
<Card <Card
key={template.id} key={template.id}
className=" cursor-pointer hover:shadow-lg transition-all duration-200 h-full max-h-[300px]" onClick={() => handleTemplateClick(template)}
className={cn(
" cursor-pointer hover:shadow-lg transition-all duration-200 h-full max-h-[300px]",
{
"flex-col": view === "grid",
"flex-row": view === "rows",
}
)}
> >
<CardHeader onClick={() => handleTemplateClick(template)}> <CardHeader>
<CardTitle className="text-xl "> <CardTitle className="text-xl ">
<img <img
src={`/blueprints/${template.id}/${template.logo}`} src={`/blueprints/${template.id}/${template.logo}`}
@ -175,10 +210,13 @@ const TemplateGrid: React.FC = () => {
<p className="text-sm text-muted-foreground line-clamp-2"> <p className="text-sm text-muted-foreground line-clamp-2">
{template.description} {template.description}
</p> </p>
<div className="mt-2 flex flex-wrap gap-1"> <div className="mt-2 flex flex-wrap gap-1 w-fit">
{template.tags.slice(0, 3).map((tag) => ( {template.tags.slice(0, 3).map((tag) => (
<span <span
onClick={() => addSelectedTag(tag)} onClick={(e) => {
e.stopPropagation();
addSelectedTag(tag);
}}
key={tag} key={tag}
className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-blue-100 text-blue-800" className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-blue-100 text-blue-800"
> >
@ -187,10 +225,7 @@ const TemplateGrid: React.FC = () => {
))} ))}
</div> </div>
</CardContent> </CardContent>
<CardFooter <CardFooter className="flex justify-between items-center">
className="flex justify-between items-center"
onClick={() => handleTemplateClick(template)}
>
<span className="text-sm text-gray-500"> <span className="text-sm text-gray-500">
{template.version} {template.version}
</span> </span>
@ -224,7 +259,7 @@ const TemplateGrid: React.FC = () => {
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 && (
@ -278,7 +313,7 @@ const TemplateGrid: React.FC = () => {
</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>
@ -339,7 +374,7 @@ const TemplateGrid: React.FC = () => {
</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

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

@ -87,7 +87,7 @@ const dockerComposeServiceOptions = [
})); }));
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;
@ -165,11 +165,11 @@ export const CodeEditor = ({
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>
); );

30
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({
@ -67,7 +67,7 @@ function DialogContent({
</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,
} };

17
app/src/store.ts
View File

@ -1,4 +1,5 @@
import { create } from "zustand"; import { create } from "zustand";
import { persist } from "zustand/middleware";
interface Template { interface Template {
id: string; id: string;
@ -22,9 +23,13 @@ interface TemplateStore {
selectedTags: string[]; selectedTags: string[];
addSelectedTag: (tag: string) => void; addSelectedTag: (tag: string) => void;
removeSelectedTag: (tag: string) => void; removeSelectedTag: (tag: string) => void;
view: "grid" | "rows";
setView: (view: "grid" | "rows") => void;
} }
export const useStore = create<TemplateStore>((set) => ({ export const useStore = create<TemplateStore>()(
persist(
(set) => ({
templates: [], templates: [],
setTemplates: (templates) => set({ templates }), setTemplates: (templates) => set({ templates }),
searchQuery: "", searchQuery: "",
@ -40,4 +45,12 @@ export const useStore = create<TemplateStore>((set) => ({
set((state) => ({ set((state) => ({
selectedTags: state.selectedTags.filter((t) => t !== tag), selectedTags: state.selectedTags.filter((t) => t !== tag),
})), })),
})); view: "grid",
setView: (view) => set({ view }),
}),
{
name: "template-store",
partialize: (state) => ({ view: state.view }), // Only persist the view preference
}
)
);