test

web/src/App.tsx

@@ -16,6 +16,7 @@ import { AnsibleLayout } from './pages/ansible/components/layout';
 import DockerAnsible from './pages/ansible/docker/docker';
 import NginxAnsible from './pages/ansible/nginx/nginx';
 import KubernetesAnsible from './pages/ansible/kuber/kuber';
+import DockerCompose from './pages/docker-compose/docker-compose';
 
 function App() {
   const location = useLocation();
@@ -27,6 +28,7 @@ function App() {
             <Route index element={<Basic />} />
             <Route path="bug-fix" element={<BugFix />} />
             <Route path="helm-template" element={<HelmTemplate />} />
+            <Route path="docker-compose" element={<DockerCompose />} />
             <Route path="terraform-template" element={<TerraformTemplate />}>
               <Route path="docker" element={<Docker />} />
               <Route path="ec2" element={<EC2 />} />

web/src/components/navbar/navbar.tsx

@@ -23,6 +23,10 @@ const navbar = [
     url: '/helm-template',
     title: 'Helm Template',
   },
+  {
+    url: '/docker-compose',
+    title: 'Docker Compose',
+  },
   {
     url: '/ansible-template',
     title: 'Ansible Template',

web/src/enums/api.enums.ts

@@ -11,6 +11,7 @@ export enum API {
   BugFix = '/IaC-bugfix',
   Installation = '/IaC-install',
   HelmTemplate = '/Helm-template',
+  DockerCompose = "/docker-compose"
 }
 
 export enum AnsibleTemplateAPI {

web/src/lib/helper.ts

@@ -1,3 +1,36 @@
+import { IServiceConfig } from '@/pages/docker-compose/docker-compose.type';
+
 export const getNestedValue = (obj: any, path: string) => {
   return path.split('.').reduce((acc, part) => acc && acc[part], obj);
 };
+
+export const convertKVtoObject = (
+  kvArray: Array<{ key: string; value: string } | null>,
+) => {
+  return kvArray?.reduce(
+    (acc, curr) => {
+
+      if (curr && acc) {
+        acc[curr.key] = curr?.value;
+
+      }
+      return acc;
+    },
+    {} as Record<string, string> | null,
+  );
+};
+
+interface Service {
+  name: string;
+  [key: string]: any;
+}
+
+export const convertServicesToObject = (
+  services: Service[],
+): IServiceConfig => {
+  return services.reduce((acc, service) => {
+    const { name, ...serviceWithoutName } = service;
+    acc[name] = serviceWithoutName as IServiceConfig[string];
+    return acc;
+  }, {} as IServiceConfig);
+};

web/src/pages/docker-compose/components/network-fields.tsx

@@ -0,0 +1,116 @@
+import { FC } from 'react';
+import { Plus, Trash2 } from 'lucide-react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { FormInput } from '@/components/form/form-input';
+import { FormCheckbox } from '@/components/form/form-checkbox';
+import { FormSelect } from '@/components/form/form-select';
+
+const defaultNetworkDrivers = ['bridge', 'host', 'none', 'overlay'] as const;
+
+const NetworkFields: FC = () => {
+  const { control, watch } = useFormContext();
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'networks.app_network',
+  });
+
+  const customNetwork = watch('networks.custom');
+
+  const handleRemoveNetwork = (index: number) => {
+    remove(index);
+  };
+
+  const handleAppendNetwork = () => {
+    const networkData = customNetwork
+      ? {
+          network_name: '',
+          external: false,
+          name: '',
+        }
+      : {
+          network_name: '',
+          driver: {
+            label: 'bridge',
+            value: 'bridge',
+          },
+        };
+
+    append(networkData);
+  };
+
+  return (
+    <div>
+      <div className="mb-4 flex items-center justify-between">
+        <div className="flex items-center">
+          <p className="text-2xl font-bold">Networks</p>
+          <button
+            type="button"
+            onClick={handleAppendNetwork}
+            className="btn btn-xs ml-4"
+          >
+            Add <Plus className="size-3" />
+          </button>
+        </div>
+        <FormCheckbox label="Custom" name="networks.custom" />
+      </div>
+
+      <div className="space-y-4">
+        <div className="w-full rounded-md border border-gray-500 p-5">
+          {fields.map((field, index) => (
+            <div key={field.id} className="mb-4">
+              <div className="mb-4 flex items-center justify-between">
+                <p className="font-semibold">Network #{index + 1}</p>
+                {index > 0 && (
+                  <button
+                    type="button"
+                    onClick={() => handleRemoveNetwork(index)}
+                  >
+                    <Trash2 className="size-4" color="red" />
+                  </button>
+                )}
+              </div>
+
+              <div>
+                {customNetwork && (
+                  <div className="mb-2 flex justify-end">
+                    <FormCheckbox
+                      name={`networks.app_network.${index}.external`}
+                      label="External Network"
+                    />
+                  </div>
+                )}
+                <div className="flex items-center gap-3 [&>div]:flex-1">
+                  <FormInput
+                    name={`networks.app_network.${index}.network_name`}
+                    label="App Network"
+                    placeholder="network_name"
+                  />
+                  {!customNetwork && (
+                    <FormSelect
+                      name={`networks.app_network.${index}.driver`}
+                      label="Network Driver"
+                      options={defaultNetworkDrivers.map((driver) => ({
+                        label: driver,
+                        value: driver,
+                      }))}
+                    />
+                  )}
+                  {customNetwork && (
+                    <FormInput
+                      name={`networks.app_network.${index}.name`}
+                      label="Name"
+                      placeholder="Name"
+                    />
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NetworkFields;

web/src/pages/docker-compose/components/service-build-fields.tsx

@@ -0,0 +1,101 @@
+import { FC } from 'react';
+import { Plus, Trash2 } from 'lucide-react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { FormInput } from '@/components/form/form-input';
+import { FormCheckbox } from '@/components/form/form-checkbox';
+import { cn } from '@/lib/utils';
+
+type ServiceBuildFieldsProps = {
+  serviceIndex: number;
+};
+
+export const ServiceBuildFields: FC<ServiceBuildFieldsProps> = ({
+  serviceIndex,
+}) => {
+  const { control, watch } = useFormContext();
+  const buildEnabled = watch(`services.${serviceIndex}.build.enabled`);
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: `services.${serviceIndex}.build.args`,
+  });
+
+  return (
+    <div className="mb-2 mt-6">
+      <div className="mb-4 flex items-center justify-between">
+        <p className="text-base font-bold">Build Configuration</p>
+        <FormCheckbox
+          name={`services.${serviceIndex}.build.enabled`}
+          label="Enable Build"
+        />
+      </div>
+
+      {buildEnabled && (
+        <div className="space-y-4 rounded-md border border-gray-200 p-4 dark:border-gray-500">
+          <div className="flex gap-2 [&>div]:flex-1">
+            <FormInput
+              name={`services.${serviceIndex}.build.context`}
+              label="Context"
+              placeholder="."
+            />
+            <FormInput
+              name={`services.${serviceIndex}.build.dockerfile`}
+              label="Dockerfile"
+              placeholder="Dockerfile"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center">
+              <p className="text-sm font-semibold">Build Arguments</p>
+              <button
+                type="button"
+                onClick={() => append({ key: '', value: '' })}
+                className="btn btn-xs ml-4"
+              >
+                Add <Plus className="size-3" />
+              </button>
+            </div>
+
+            {fields.map((field, idx) => (
+              <div className="flex items-center" key={field.id}>
+                <div
+                  className={cn(
+                    'flex items-center divide-x divide-gray-200 rounded-md border border-gray-200 dark:divide-gray-500 dark:border-gray-500',
+                    {
+                      'divide-red-500 border-red-500 dark:divide-red-500 dark:border-red-500':
+                        control.getFieldState(
+                          `services.${serviceIndex}.volumes.${idx}`,
+                        ).invalid,
+                    },
+                  )}
+                  key={field.id}
+                >
+                  <FormInput
+                    label=""
+                    name={`services.${serviceIndex}.build.args.${idx}.key`}
+                    placeholder="Key"
+                    className="h-12 w-full rounded-s-md px-2"
+                  />
+                  <FormInput
+                    label=""
+                    name={`services.${serviceIndex}.build.args.${idx}.value`}
+                    placeholder="Value"
+                    className="h-12 w-full rounded-e-md px-2"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => remove(idx)}
+                    className="btn btn-error rounded-e-md rounded-s-none"
+                  >
+                    <Trash2 />
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

web/src/pages/docker-compose/components/service-depends-on-fields.tsx

@@ -0,0 +1,63 @@
+import { FC } from 'react';
+import { Plus, Trash2 } from 'lucide-react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { FormInput } from '@/components/form/form-input';
+import { cn } from '@/lib/utils';
+
+type ServiceDependsOnFieldsProps = {
+  serviceIndex: number;
+};
+
+const ServiceDependsOnFields: FC<ServiceDependsOnFieldsProps> = ({
+  serviceIndex,
+}) => {
+  const { control } = useFormContext();
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: `services.${serviceIndex}.depends_on`,
+  });
+
+  return (
+    <div className="mb-2 mt-6">
+      <div className="mb-2 flex items-center">
+        <p className="text-base font-bold">Depends On</p>
+
+        <button
+          type="button"
+          onClick={() => append('')}
+          className="btn btn-xs ml-4"
+        >
+          Add <Plus className="size-3" />
+        </button>
+      </div>
+      <div className="flex gap-4">
+        {fields.map((field, depIdx) => (
+          <div
+            className={cn(
+              'mb-4 flex items-center divide-x divide-gray-200 rounded-md border border-gray-200 dark:divide-gray-500 dark:border-gray-500 [&>div]:mb-0',
+            )}
+            key={field.id}
+          >
+            <FormInput
+              id={`depends_on_${depIdx}`}
+              name={`services.${serviceIndex}.depends_on.${depIdx}`}
+              label=""
+              placeholder="Service name"
+              className="h-12 w-full rounded-s-md px-2 outline-none"
+            />
+
+            <button
+              onClick={() => remove(depIdx)}
+              className="btn btn-error rounded-e-md rounded-s-none"
+            >
+              <Trash2 />
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ServiceDependsOnFields;