prettier and build form optimization

apps/dokploy/.prettierignore

@@ -0,0 +1,9 @@
+node_modules
+.next
+.docker
+coverage
+.prettierignore
+.stylelintignore
+.eslintignore
+*.log
+docs

apps/dokploy/.prettierrc

@@ -0,0 +1,5 @@
+{
+	"plugins": ["prettier-plugin-tailwindcss"],
+	"useTabs": true,
+	"printWidth": 80
+}

apps/dokploy/components/dashboard/application/build/show.tsx

@@ -20,7 +20,7 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 
-enum BuildType {
+export enum BuildType {
 	dockerfile = "dockerfile",
 	heroku_buildpacks = "heroku_buildpacks",
 	paketo_buildpacks = "paketo_buildpacks",
@@ -29,9 +29,18 @@ enum BuildType {
 	railpack = "railpack",
 }
 
+const buildTypeDisplayMap: Record<BuildType, string> = {
+	[BuildType.dockerfile]: "Dockerfile",
+	[BuildType.railpack]: "Railpack",
+	[BuildType.nixpacks]: "Nixpacks",
+	[BuildType.heroku_buildpacks]: "Heroku Buildpacks",
+	[BuildType.paketo_buildpacks]: "Paketo Buildpacks",
+	[BuildType.static]: "Static",
+};
+
 const mySchema = z.discriminatedUnion("buildType", [
 	z.object({
-		buildType: z.literal("dockerfile"),
+		buildType: z.literal(BuildType.dockerfile),
 		dockerfile: z
 			.string({
 				required_error: "Dockerfile path is required",
@@ -42,18 +51,18 @@ const mySchema = z.discriminatedUnion("buildType", [
 		dockerBuildStage: z.string().nullable().default(""),
 	}),
 	z.object({
-		buildType: z.literal("heroku_buildpacks"),
+		buildType: z.literal(BuildType.heroku_buildpacks),
 		herokuVersion: z.string().nullable().default(""),
 	}),
 	z.object({
-		buildType: z.literal("paketo_buildpacks"),
+		buildType: z.literal(BuildType.paketo_buildpacks),
 	}),
 	z.object({
-		buildType: z.literal("nixpacks"),
+		buildType: z.literal(BuildType.nixpacks),
 		publishDirectory: z.string().optional(),
 	}),
 	z.object({
-		buildType: z.literal("static"),
+		buildType: z.literal(BuildType.static),
 	}),
 	z.object({
 		buildType: z.literal("railpack"),
@@ -61,20 +70,39 @@ const mySchema = z.discriminatedUnion("buildType", [
 ]);
 
 type AddTemplate = z.infer<typeof mySchema>;
+
 interface Props {
 	applicationId: string;
 }
 
+const resetData = (data: any): AddTemplate => {
+	switch (data.buildType) {
+		case BuildType.dockerfile:
+			return {
+				buildType: BuildType.dockerfile,
+				dockerfile: data.dockerfile || "",
+				dockerContextPath: data.dockerContextPath || "",
+				dockerBuildStage: data.dockerBuildStage || "",
+			};
+		case BuildType.heroku_buildpacks:
+			return {
+				buildType: BuildType.heroku_buildpacks,
+				herokuVersion: data.herokuVersion || "",
+			};
+		default:
+			return {
+				buildType: data.buildType,
+				publishDirectory: data.publishDirectory || undefined,
+			};
+	}
+};
+
 export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 	const { mutateAsync, isLoading } =
 		api.application.saveBuildType.useMutation();
 	const { data, refetch } = api.application.one.useQuery(
-		{
+		{ applicationId },
-			applicationId,
+		{ enabled: !!applicationId },
-		},
-		{
-			enabled: !!applicationId,
-		},
 	);
 
 	const form = useForm<AddTemplate>({
@@ -85,46 +113,29 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 	});
 
 	const buildType = form.watch("buildType");
+
 	useEffect(() => {
 		if (data) {
-			if (data.buildType === "dockerfile") {
+			form.reset(resetData(data));
-				form.reset({
-					buildType: data.buildType,
-					...(data.buildType && {
-						dockerfile: data.dockerfile || "",
-						dockerContextPath: data.dockerContextPath || "",
-						dockerBuildStage: data.dockerBuildStage || "",
-					}),
-				});
-			} else if (data.buildType === "heroku_buildpacks") {
-				form.reset({
-					buildType: data.buildType,
-					...(data.buildType && {
-						herokuVersion: data.herokuVersion || "",
-					}),
-				});
-			} else {
-				form.reset({
-					buildType: data.buildType,
-					publishDirectory: data.publishDirectory || undefined,
-				});
 		}
-		}
+	}, [data, form]);
-	}, [form.formState.isSubmitSuccessful, form.reset, data, form]);
 
 	const onSubmit = async (data: AddTemplate) => {
 		await mutateAsync({
 			applicationId,
 			buildType: data.buildType,
 			publishDirectory:
-				data.buildType === "nixpacks" ? data.publishDirectory : null,
+				data.buildType === BuildType.nixpacks ? data.publishDirectory : null,
-			dockerfile: data.buildType === "dockerfile" ? data.dockerfile : null,
+			dockerfile:
+				data.buildType === BuildType.dockerfile ? data.dockerfile : null,
 			dockerContextPath:
-				data.buildType === "dockerfile" ? data.dockerContextPath : null,
+				data.buildType === BuildType.dockerfile ? data.dockerContextPath : null,
 			dockerBuildStage:
-				data.buildType === "dockerfile" ? data.dockerBuildStage : null,
+				data.buildType === BuildType.dockerfile ? data.dockerBuildStage : null,
 			herokuVersion:
-				data.buildType === "heroku_buildpacks" ? data.herokuVersion : null,
+				data.buildType === BuildType.heroku_buildpacks
+					? data.herokuVersion
+					: null,
 		})
 			.then(async () => {
 				toast.success("Build type saved");
@@ -160,8 +171,7 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 							control={form.control}
 							name="buildType"
 							defaultValue={form.control._defaultValues.buildType}
-							render={({ field }) => {
+							render={({ field }) => (
-								return (
 								<FormItem className="space-y-3">
 									<FormLabel>Build Type</FormLabel>
 									<FormControl>
@@ -170,183 +180,134 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 											value={field.value}
 											className="flex flex-col space-y-1"
 										>
-												<FormItem className="flex items-center space-x-3 space-y-0">
+											{Object.entries(buildTypeDisplayMap).map(
+												([value, label]) => (
+													<FormItem
+														key={value}
+														className="flex items-center space-x-3 space-y-0"
+													>
 														<FormControl>
-														<RadioGroupItem value="dockerfile" />
+															<RadioGroupItem value={value} />
 														</FormControl>
 														<FormLabel className="font-normal">
-														Dockerfile
+															{label}
+															{value === BuildType.railpack && (
+																<Badge className="ml-2 px-1 text-xs">New</Badge>
+															)}
 														</FormLabel>
 													</FormItem>
-												<FormItem className="flex items-center space-x-3 space-y-0">
+												),
-													<FormControl>
+											)}
-														<RadioGroupItem value="railpack" />
-													</FormControl>
-													<FormLabel className="font-normal">
-														Railpack{" "}
-														<Badge className="ml-1 text-xs px-1">New</Badge>
-													</FormLabel>
-												</FormItem>
-												<FormItem className="flex items-center space-x-3 space-y-0">
-													<FormControl>
-														<RadioGroupItem value="nixpacks" />
-													</FormControl>
-													<FormLabel className="font-normal">
-														Nixpacks
-													</FormLabel>
-												</FormItem>
-												<FormItem className="flex items-center space-x-3 space-y-0">
-													<FormControl>
-														<RadioGroupItem value="heroku_buildpacks" />
-													</FormControl>
-													<FormLabel className="font-normal">
-														Heroku Buildpacks
-													</FormLabel>
-												</FormItem>
-												<FormItem className="flex items-center space-x-3 space-y-0">
-													<FormControl>
-														<RadioGroupItem value="paketo_buildpacks" />
-													</FormControl>
-													<FormLabel className="font-normal">
-														Paketo Buildpacks
-													</FormLabel>
-												</FormItem>
-												<FormItem className="flex items-center space-x-3 space-y-0">
-													<FormControl>
-														<RadioGroupItem value="static" />
-													</FormControl>
-													<FormLabel className="font-normal">Static</FormLabel>
-												</FormItem>
 										</RadioGroup>
 									</FormControl>
 									<FormMessage />
 								</FormItem>
-								);
+							)}
-							}}
 						/>
-						{buildType === "heroku_buildpacks" && (
+						{buildType === BuildType.heroku_buildpacks && (
 							<FormField
 								control={form.control}
 								name="herokuVersion"
-								render={({ field }) => {
+								render={({ field }) => (
-									return (
 									<FormItem>
 										<FormLabel>Heroku Version (Optional)</FormLabel>
 										<FormControl>
 											<Input
-													placeholder={"Heroku Version (Default: 24)"}
+												placeholder="Heroku Version (Default: 24)"
 												{...field}
 												value={field.value ?? ""}
 											/>
 										</FormControl>
-
 										<FormMessage />
 									</FormItem>
-									);
+								)}
-								}}
 							/>
 						)}
-						{buildType === "dockerfile" && (
+						{buildType === BuildType.dockerfile && (
 							<>
 								<FormField
 									control={form.control}
 									name="dockerfile"
-									render={({ field }) => {
+									render={({ field }) => (
-										return (
 										<FormItem>
 											<FormLabel>Docker File</FormLabel>
 											<FormControl>
 												<Input
-														placeholder={"Path of your docker file"}
+													placeholder="Path of your docker file"
 													{...field}
 													value={field.value ?? ""}
 												/>
 											</FormControl>
-
 											<FormMessage />
 										</FormItem>
-										);
+									)}
-									}}
 								/>
-
 								<FormField
 									control={form.control}
 									name="dockerContextPath"
-									render={({ field }) => {
+									render={({ field }) => (
-										return (
 										<FormItem>
 											<FormLabel>Docker Context Path</FormLabel>
 											<FormControl>
 												<Input
-														placeholder={
+													placeholder="Path of your docker context (default: .)"
-															"Path of your docker context default: ."
-														}
 													{...field}
 													value={field.value ?? ""}
 												/>
 											</FormControl>
-
 											<FormMessage />
 										</FormItem>
-										);
+									)}
-									}}
 								/>
-
 								<FormField
 									control={form.control}
 									name="dockerBuildStage"
-									render={({ field }) => {
+									render={({ field }) => (
-										return (
 										<FormItem>
 											<div className="space-y-0.5">
 												<FormLabel>Docker Build Stage</FormLabel>
 												<FormDescription>
-														Allows you to target a specific stage in a
+													Allows you to target a specific stage in a Multi-stage
-														Multi-stage Dockerfile. If empty, Docker defaults to
+													Dockerfile. If empty, Docker defaults to build the
-														build the last defined stage.
+													last defined stage.
 												</FormDescription>
 											</div>
 											<FormControl>
 												<Input
-														placeholder={"E.g. production"}
+													placeholder="E.g. production"
 													{...field}
 													value={field.value ?? ""}
 												/>
 											</FormControl>
 										</FormItem>
-										);
+									)}
-									}}
 								/>
 							</>
 						)}
-
+						{buildType === BuildType.nixpacks && (
-						{buildType === "nixpacks" && (
 							<FormField
 								control={form.control}
 								name="publishDirectory"
-								render={({ field }) => {
+								render={({ field }) => (
-									return (
 									<FormItem>
 										<div className="space-y-0.5">
 											<FormLabel>Publish Directory</FormLabel>
 											<FormDescription>
 												Allows you to serve a single directory via NGINX after
-													the build phase. Useful if the final build assets
+												the build phase. Useful if the final build assets should
-													should be served as a static site.
+												be served as a static site.
 											</FormDescription>
 										</div>
 										<FormControl>
 											<Input
-													placeholder={"Publish Directory"}
+												placeholder="Publish Directory"
 												{...field}
 												value={field.value ?? ""}
 											/>
 										</FormControl>
-
 										<FormMessage />
 									</FormItem>
-									);
+								)}
-								}}
 							/>
 						)}
 						<div className="flex w-full justify-end">

apps/dokploy/package.json

@@ -176,6 +176,8 @@
 		"esbuild": "0.20.2",
 		"lint-staged": "^15.2.7",
 		"memfs": "^4.11.0",
+		"prettier": "^3.5.3",
+		"prettier-plugin-tailwindcss": "^0.6.11",
 		"tailwindcss": "^3.4.1",
 		"tsx": "^4.7.0",
 		"typescript": "^5.4.2",
@@ -196,6 +198,8 @@
 		]
 	},
 	"commitlint": {
-		"extends": ["@commitlint/config-conventional"]
+		"extends": [
+			"@commitlint/config-conventional"
+		]
 	}
 }

pnpm-lock.yaml

@@ -512,6 +512,12 @@ importers:
       memfs:
         specifier: ^4.11.0
         version: 4.11.0
+      prettier:
+        specifier: ^3.5.3
+        version: 3.5.3
+      prettier-plugin-tailwindcss:
+        specifier: ^0.6.11
+        version: 0.6.11(prettier@3.5.3)
       tailwindcss:
         specifier: ^3.4.1
         version: 3.4.7(ts-node@10.9.2(@types/node@18.19.42)(typescript@5.5.3))
@@ -6386,6 +6392,66 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  prettier-plugin-tailwindcss@0.6.11:
+    resolution: {integrity: sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+
+  prettier@3.5.3:
+    resolution: {integrity: sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   pretty-format@29.7.0:
     resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -13505,6 +13571,12 @@ snapshots:
       tunnel-agent: 0.6.0
     optional: true
 
+  prettier-plugin-tailwindcss@0.6.11(prettier@3.5.3):
+    dependencies:
+      prettier: 3.5.3
+
+  prettier@3.5.3: {}
+
   pretty-format@29.7.0:
     dependencies:
       '@jest/schemas': 29.6.3