Merge branch 'master' into master

Author: abolfazl8131

app/media/MyCompose/docker-compose.yaml

@@ -1,16 +0,0 @@
-version: '3'
-services:
-  web:
-    build:
-      context: .
-      dockerfile: Dockerfile
-      args: {}
-    image: nginx:latest
-    container_name: x
-    ports:
-    - 80:80
-    - 90:90
-    - 70:70
-networks:
-  p:
-    driver: bridge

app/models/compose_models.py

@@ -33,5 +33,4 @@ class DockerCompose(BaseModel):
     version: str = "3"
     services: Dict[str, Service] = {"web":Service(), "web2":Service()}
     networks: Union[Optional[Dict[str, PreCreatedNetwork]],Optional[Dict[str, Network]]] = {"app_network": {"driver":"bridge"}}
-    
-   
+

web/.env.example

@@ -0,0 +1 @@
+VITE_API_CLIENT_BASE_URL=""

web/package-lock.json

@@ -10,7 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.9.1",
     "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-form": "^0.1.0",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.4",
@@ -21,12 +23,14 @@
     "lucide-react": "^0.462.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.2",
     "react-router": "^7.0.1",
     "react-select": "^5.8.3",
     "react-spinners": "^0.14.1",
     "sonner": "^1.7.0",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.23.8",
     "zustand": "^5.0.1"
   },
   "devDependencies": {

web/package.json

@@ -12,24 +12,35 @@ import {
   Installation,
   S3,
 } from '@/pages';
+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();
   return (
     <div>
-      <div className="container mx-auto border-l border-r border-gray-700 h-dvh max-w-7xl">
+      <div className="container mx-auto h-dvh max-w-7xl border-l border-r border-gray-700">
         <Routes location={location}>
           <Route element={<MainLayout />}>
             <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 />} />
               <Route path="s3" element={<S3 />} />
               <Route path="iam" element={<IAM />} />
               <Route path="argocd" element={<Argocd />} />
             </Route>
+            <Route path="ansible-template" element={<AnsibleLayout />}>
+              <Route path="docker" element={<DockerAnsible />} />
+              <Route path="nginx" element={<NginxAnsible />} />
+              <Route path="kuber" element={<KubernetesAnsible />} />
+            </Route>
             <Route path="installation" element={<Installation />} />
           </Route>
         </Routes>

web/src/App.tsx

@@ -0,0 +1,55 @@
+
+import * as Form from '@radix-ui/react-form';
+import { useFormContext } from 'react-hook-form';
+import { FormFieldProps } from '../../types/form.types';
+import { cn } from '@/lib/utils';
+
+interface FormCheckboxProps extends FormFieldProps {
+  labelPosition?: 'left' | 'right';
+  checkboxClassName?: string;
+}
+
+export const FormCheckbox = ({
+  name,
+  label,
+  error,
+  labelPosition = 'right',
+  checkboxClassName,
+  ...props
+}: FormCheckboxProps) => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
+
+  const fieldError = errors[name];
+  const errorMessage = fieldError?.message as string;
+
+  return (
+    <Form.Field className="form-field" name={name}>
+      <div className={cn(
+        'flex items-center gap-2',
+        labelPosition === 'right' ? 'flex-row' : 'flex-row-reverse justify-end'
+      )}>
+        <Form.Control asChild>
+          <input
+            type="checkbox"
+            className={cn(
+              'toggle border-gray-500 bg-gray-500',
+              'checked:bg-orange-base checked:hover:bg-orange-base/70',
+              checkboxClassName
+            )}
+            {...register(name)}
+            {...props}
+          />
+        </Form.Control>
+        <Form.Label className="form-label cursor-pointer">{label}</Form.Label>
+      </div>
+      {errorMessage && (
+        <Form.Message className="form-message mt-1 text-red-500">
+          {errorMessage}
+        </Form.Message>
+      )}
+    </Form.Field>
+  );
+};

web/src/components/form/form-checkbox.tsx

@@ -0,0 +1,59 @@
+import * as Form from '@radix-ui/react-form';
+import { useFormContext } from 'react-hook-form';
+import { FormFieldProps } from '../../types/form.types';
+import { getNestedValue } from '@/lib/helper';
+import { cn } from '@/lib/utils';
+
+export const FormInput = ({
+  name,
+  label,
+  error,
+  isNumber,
+  inputType,
+  inputClass,
+  ...props
+}: FormFieldProps) => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
+
+  const fieldError = getNestedValue(errors, name);
+  const errorMessage = fieldError?.message as string;
+
+  return (
+    <Form.Field
+      className={cn('form-field relative', {
+        'mb-6': errorMessage,
+      })}
+      name={name}
+    >
+      {label && (
+        <div className="flex items-baseline justify-between mb-1">
+          <Form.Label className="form-label">{label}</Form.Label>
+        </div>
+      )}
+      <Form.Control asChild>
+        <input
+          type={inputType}
+          className={cn(
+            'w-full rounded-md border border-gray-500 px-3 py-2 outline-none transition-all focus:border-orange-base',
+            props.className,
+            {
+              'border-red-500 dark:border': errorMessage,
+            },
+          )}
+          {...register(name, { ...(isNumber && { valueAsNumber: true }) })}
+          {...props}
+        />
+      </Form.Control>
+      {errorMessage && (
+        <div className="absolute left-0 top-full">
+          <Form.Message className="ml-auto text-sm text-red-500 form-message">
+            {errorMessage}
+          </Form.Message>
+        </div>
+      )}
+    </Form.Field>
+  );
+};