@promakeai/cli 0.4.4 → 0.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promakeai/cli",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "type": "module",
   "bin": {
     "promake": "dist/index.js"
@@ -51,4 +51,4 @@
     "@types/prompts": "^2.4.9",
     "typescript": "^5.7.2"
   }
-}
+}

package/template/src/components/FormField.tsx

@@ -0,0 +1,43 @@
+import { Stack } from "./Stack";
+import { Label } from "./ui/label";
+
+export interface FormFieldProps {
+  label: string;
+  htmlFor?: string;
+  error?: string;
+  required?: boolean;
+  description?: string;
+  children: React.ReactNode;
+  gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 10 | 12; // Stack gap override
+  className?: string;
+}
+
+export function FormField({ 
+  label, 
+  htmlFor,
+  error, 
+  required, 
+  children, 
+  description,
+  gap = 2,
+  className,
+}: FormFieldProps) {
+  return (
+    <Stack gap={gap} className={className}>
+      <Label htmlFor={htmlFor}>
+        {label} {required && <span className="text-destructive">*</span>}
+      </Label>
+      {children}
+      {description && (
+        <p className="text-sm text-muted-foreground">
+          {description}
+        </p>
+      )}
+      {error && (
+        <p className="text-sm text-destructive" role="alert">
+          {error}
+        </p>
+      )}
+    </Stack>
+  );
+}

package/template/src/components/FormFileInput.tsx

@@ -0,0 +1,76 @@
+import { useRef } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Stack } from "./Stack";
+import { Upload } from "lucide-react";
+
+interface FormFileInputProps {
+    files: File[];
+    onFilesChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    maxFiles?: number;
+    accept?: string;
+    disabled?: boolean;
+    uploadButtonText?: string;
+    maxFilesReachedText?: string;
+    className?: string;
+    handleRemoveFile: (index: number) => void;
+  }
+  
+  export const FormFileInput: React.FC<FormFileInputProps> = ({
+    files,
+    onFilesChange,
+    maxFiles = 5,
+    accept = ".pdf,.doc,.docx,.jpg,.jpeg,.png",
+    disabled = false,
+    uploadButtonText = "Add Files",
+    maxFilesReachedText = "Max files reached",
+    className,
+    handleRemoveFile,
+  }) => {
+    const fileInputRef = useRef<HTMLInputElement>(null);
+  
+    
+  
+    const isMaxReached = files.length >= maxFiles;
+  
+    return (
+      <Stack gap={2} className={className}>
+        <Input
+          ref={fileInputRef}
+          type="file"
+          className="hidden"
+          multiple
+          disabled={isMaxReached || disabled}
+          onChange={onFilesChange}
+          accept={accept}
+        />
+        <Button
+          type="button"
+          variant="outline"
+          className="w-full"
+          disabled={isMaxReached || disabled}
+          onClick={() => fileInputRef.current?.click()}
+        >
+          <Upload className="w-4 h-4 mr-2" />
+          {isMaxReached ? maxFilesReachedText : uploadButtonText}
+        </Button>
+        
+        {files.length > 0 && (
+          <div className="flex flex-wrap gap-2 mt-2">
+            {files.map((file, index) => (
+              <div key={index} className="flex items-center gap-2 px-3 py-1 bg-muted rounded-md text-sm">
+                <span className="text-muted-foreground">{file.name}</span>
+                <button
+                  type="button"
+                  onClick={() => handleRemoveFile(index)}
+                  className="text-destructive hover:text-destructive/80"
+                >
+                  ×
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </Stack>
+    );
+  };

package/template/src/components/Stack.tsx

@@ -0,0 +1,39 @@
+import clsx from "clsx";
+import { Children } from "react";
+
+type StackProps = {
+  as?: keyof HTMLElementTagNameMap;   // "div", "ul", "section" vs can be any valid HTML element
+  gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 10 | 12; //Tailwind spacing scale
+  direction?: "vertical" | "horizontal";
+  className?: string;
+  children: React.ReactNode;
+  wrapChildren?: boolean; // If true, wraps each child in a Stack with the same gap
+  childGap?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 10 | 12; // Gap for wrapped children
+};
+
+export function Stack({
+  as: Component = "div",
+  gap = 2,
+  direction = "vertical",
+  className,
+  children,
+  wrapChildren = false,
+  childGap = 2,
+}: StackProps) {
+  const gapClass =
+    direction === "vertical" ? `space-y-${gap}` : `space-x-${gap}`;
+
+  const content = wrapChildren
+    ? Children.map(children, (child, index) => (
+        <Stack key={index} gap={childGap} direction={direction}>
+          {child}
+        </Stack>
+      ))
+    : children;
+
+  return (
+    <Component className={clsx(gapClass, className)}>
+      {content}
+    </Component>
+  );
+}

package/template/src/constants/constants.json

@@ -1,64 +1,68 @@
-{
-  "site": {
-    "name": "Site Name",
-    "tagline": "Your Site Tagline",
-    "description": "A modern, responsive site template for businesses, blogs, ecommerce stores, or portfolios.",
-    "logo": "",
-    "favicon": "./favicon.svg",
-    "currency": "USD",
-    "country": "United States",
-    "countryCode": "US",
-    "defaultLanguage": "en",
-    "availableLanguages": {
-      "en": "EN"
-    },
-    "overrideBrowserLanguage": true,
-    "timezone": "America/New_York",
-    "slug": "site-name",
-    "taxName": "Tax"
-  },
-  "api": {
-    "baseUrl": "https://backend.promake.ai/api",
-    "endpoints": {
-      "contact": "/contact",
-      "services": "/services"
-    },
-    "timeout": 30000
-  },
-  "seo": {
-    "title": "Site Name",
-    "description": "Your site description",
-    "author": "Site Name",
-    "ogTitle": "Site Name",
-    "ogDescription": "Your site description",
-    "ogImage": "",
-    "twitterSite": "",
-    "twitterImage": "",
-    "googleVerification": ""
-  },
-  "scripts": {
-    "gaId": "",
-    "headStart": "",
-    "headEnd": "",
-    "bodyStart": "",
-    "bodyEnd": ""
-  },
-  "email": "hello@example.com",
-  "supportEmail": "support@example.com",
-  "phone": "+1 (555) 010-0000",
-  "whatsapp": "+1 (555) 010-0001",
-  "address": {
-    "line1": "123 Main Street",
-    "line2": "Suite 100",
-    "city": "City",
-    "state": "State",
-    "postalCode": "00000",
-    "country": "Country"
-  },
-  "socialMedia": {
-    "twitter": "",
-    "facebook": "",
-    "instagram": "",
-    "linkedin": ""
-  }
+{
+  "site": {
+    "name": "Site Name",
+    "tagline": "Your Site Tagline",
+    "description": "A modern, responsive site template for businesses, blogs, ecommerce stores, or portfolios.",
+    "logo": "",
+    "favicon": "./favicon.svg",
+    "currency": "USD",
+    "country": "United States",
+    "countryCode": "US",
+    "defaultLanguage": "en",
+    "availableLanguages": {
+      "en": "EN"
+    },
+    "overrideBrowserLanguage": true,
+    "timezone": "America/New_York",
+    "slug": "site-name",
+    "taxName": "Tax"
+  },
+  "api": {
+    "baseUrl": "https://backend.promake.ai/api",
+    "endpoints": {
+      "contact": "/contact",
+      "services": "/services"
+    },
+    "timeout": 30000
+  },
+  "seo": {
+    "title": "Site Name",
+    "description": "Your site description",
+    "author": "Site Name",
+    "ogTitle": "Site Name",
+    "ogDescription": "Your site description",
+    "ogImage": "",
+    "twitterSite": "",
+    "twitterImage": "",
+    "googleVerification": ""
+  },
+  "scripts": {
+    "gaId": "",
+    "headStart": "",
+    "headEnd": "",
+    "bodyStart": "",
+    "bodyEnd": ""
+  },
+  "email": "hello@example.com",
+  "supportEmail": "support@example.com",
+  "phone": "+1 (555) 010-0000",
+  "whatsapp": "+1 (555) 010-0001",
+  "address": {
+    "line1": "123 Main Street",
+    "line2": "Suite 100",
+    "city": "City",
+    "state": "State",
+    "postalCode": "00000",
+    "country": "Country"
+  },
+  "socialMedia": {
+    "twitter": "",
+    "facebook": "",
+    "instagram": "",
+    "linkedin": ""
+  },
+  "file":{
+    "maxFiles": 5,
+    "accept": ".pdf,.doc,.docx,.jpg,.jpeg,.png"
+  }
 }