@promakeai/cli 0.5.8 → 0.6.0

package/template/src/components/FormField.tsx

@@ -1,49 +1,49 @@
-import { Stack } from "./Stack";
-import { Label } from "./ui/label";
-
-// FormField.tsx
-export interface FormFieldProps {
-  label: React.ReactNode;
-  htmlFor?: string;
-  error?: string;
-  required?: boolean;
-  description?: string;
-  children: React.ReactNode;
-  gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 10 | 12;
-  className?: string;
-  labelAction?: React.ReactNode; // YENİ
-}
-
-export function FormField({ 
-  label, 
-  htmlFor,
-  error, 
-  required, 
-  children, 
-  description,
-  gap = 2,
-  className,
-  labelAction, // YENİ
-}: FormFieldProps) {
-  return (
-    <Stack gap={gap} className={className}>
-      <div className="flex items-center justify-between">
-        <Label htmlFor={htmlFor}>
-          {label} {required && <span className="text-destructive">*</span>}
-        </Label>
-        {labelAction}
-      </div>
-      {children}
-      {description && (
-        <p className="text-sm text-muted-foreground">
-          {description}
-        </p>
-      )}
-      {error && (
-        <p className="text-sm text-destructive" role="alert">
-          {error}
-        </p>
-      )}
-    </Stack>
-  );
+import { Stack } from "./Stack";
+import { Label } from "./ui/label";
+
+// FormField.tsx
+export interface FormFieldProps {
+  label: React.ReactNode;
+  htmlFor?: string;
+  error?: string;
+  required?: boolean;
+  description?: string;
+  children: React.ReactNode;
+  gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 10 | 12;
+  className?: string;
+  labelAction?: React.ReactNode; // YENİ
+}
+
+export function FormField({ 
+  label, 
+  htmlFor,
+  error, 
+  required, 
+  children, 
+  description,
+  gap = 2,
+  className,
+  labelAction, // YENİ
+}: FormFieldProps) {
+  return (
+    <Stack gap={gap} className={className}>
+      <div className="flex items-center justify-between">
+        <Label htmlFor={htmlFor}>
+          {label} {required && <span className="text-destructive">*</span>}
+        </Label>
+        {labelAction}
+      </div>
+      {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

@@ -1,76 +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>
-    );
+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/GoogleAnalytics.tsx

@@ -1,34 +1,34 @@
-import { useEffect, useRef } from "react";
-import constants from "@/constants/constants.json";
-
-export function GoogleAnalytics() {
-  const injected = useRef(false);
-  const gaId = constants.scripts.gaId;
-
-  useEffect(() => {
-    if (!gaId || injected.current) return;
-    if (document.querySelector(`[data-injected="gtag"]`)) return;
-
-    injected.current = true;
-
-    // Inject gtag.js script
-    const script = document.createElement("script");
-    script.async = true;
-    script.src = `https://www.googletagmanager.com/gtag/js?id=${gaId}`;
-    script.setAttribute("data-injected", "gtag");
-    document.head.appendChild(script);
-
-    // Inject inline config script
-    const inlineScript = document.createElement("script");
-    inlineScript.setAttribute("data-injected", "gtag-config");
-    inlineScript.innerHTML = `
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-      gtag('config', '${gaId}');
-    `;
-    document.head.appendChild(inlineScript);
-  }, []);
-
-  return null;
-}
+import { useEffect, useRef } from "react";
+import constants from "@/constants/constants.json";
+
+export function GoogleAnalytics() {
+  const injected = useRef(false);
+  const gaId = constants.scripts.gaId;
+
+  useEffect(() => {
+    if (!gaId || injected.current) return;
+    if (document.querySelector(`[data-injected="gtag"]`)) return;
+
+    injected.current = true;
+
+    // Inject gtag.js script
+    const script = document.createElement("script");
+    script.async = true;
+    script.src = `https://www.googletagmanager.com/gtag/js?id=${gaId}`;
+    script.setAttribute("data-injected", "gtag");
+    document.head.appendChild(script);
+
+    // Inject inline config script
+    const inlineScript = document.createElement("script");
+    inlineScript.setAttribute("data-injected", "gtag-config");
+    inlineScript.innerHTML = `
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', '${gaId}');
+    `;
+    document.head.appendChild(inlineScript);
+  }, []);
+
+  return null;
+}

package/template/src/components/LanguageSwitcher.tsx

@@ -1,53 +1,53 @@
-import { useTranslation } from "react-i18next";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { changeLanguage } from "@/lang";
-import { cn } from "@/lib/utils";
-import constants from "@/constants/constants.json";
-
-interface LanguageSwitcherProps {
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-const languages: Record<string, string> =
-  constants?.site?.availableLanguages || {};
-
-export function LanguageSwitcher({ className, style }: LanguageSwitcherProps) {
-  const { i18n } = useTranslation();
-  const currentLang = i18n.language;
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="ghost"
-          size="sm"
-          className={cn("h-9 px-2 text-sm font-medium", className)}
-          style={style}
-        >
-          {languages?.[currentLang] || currentLang.toUpperCase()}
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        {Object.entries(languages).map(([lang, label]) => (
-          <DropdownMenuItem
-            key={lang}
-            onClick={() => changeLanguage(lang)}
-            className={cn(
-              currentLang === lang ? "bg-accent" : "",
-              "hover:text-primary focus:text-primary",
-            )}
-          >
-            {label || lang.toUpperCase()}
-          </DropdownMenuItem>
-        ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { changeLanguage } from "@/lang";
+import { cn } from "@/lib/utils";
+import constants from "@/constants/constants.json";
+
+interface LanguageSwitcherProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const languages: Record<string, string> =
+  constants?.site?.availableLanguages || {};
+
+export function LanguageSwitcher({ className, style }: LanguageSwitcherProps) {
+  const { i18n } = useTranslation();
+  const currentLang = i18n.language;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className={cn("h-9 px-2 text-sm font-medium", className)}
+          style={style}
+        >
+          {languages?.[currentLang] || currentLang.toUpperCase()}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {Object.entries(languages).map(([lang, label]) => (
+          <DropdownMenuItem
+            key={lang}
+            onClick={() => changeLanguage(lang)}
+            className={cn(
+              currentLang === lang ? "bg-accent" : "",
+              "hover:text-primary focus:text-primary",
+            )}
+          >
+            {label || lang.toUpperCase()}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/template/src/components/PasswordInput.tsx

@@ -1,61 +1,61 @@
-import { useState } from "react";
-import { Input } from "@/components/ui/input";
-import { Eye, EyeOff } from "lucide-react";
-
-interface PasswordInputProps {
-  id?: string;
-  name?: string;
-  value: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  placeholder?: string;
-  required?: boolean;
-  autoComplete?: string;
-  className?: string;
-  disabled?: boolean;
-  minLength?: number;
-}
-
-export function PasswordInput({
-  id = "password",
-  name = "password",
-  value,
-  onChange,
-  placeholder = "Enter password",
-  required = false,
-  autoComplete = "current-password",
-  disabled = false,
-  minLength = undefined,
-  className = "",
-}: PasswordInputProps) {
-  const [showPassword, setShowPassword] = useState(false);
-
-  return (
-      <div className="relative">
-        <Input
-          id={id}
-          name={name}
-          type={showPassword ? "text" : "password"}
-          value={value}
-          onChange={onChange}
-          placeholder={placeholder}
-          required={required}
-          className={`mt-1 pr-10 ${className}`}
-          autoComplete={autoComplete}
-          disabled={disabled}
-          minLength={minLength}
-        />
-        <button
-          type="button"
-          onClick={() => setShowPassword(!showPassword)}
-          className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-          aria-label={showPassword ? "Hide password" : "Show password"}
-        >
-          {showPassword ? (
-            <EyeOff className="w-4 h-4" />
-          ) : (
-            <Eye className="w-4 h-4" />
-          )}
-        </button>
-      </div>
-  );
+import { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Eye, EyeOff } from "lucide-react";
+
+interface PasswordInputProps {
+  id?: string;
+  name?: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  required?: boolean;
+  autoComplete?: string;
+  className?: string;
+  disabled?: boolean;
+  minLength?: number;
+}
+
+export function PasswordInput({
+  id = "password",
+  name = "password",
+  value,
+  onChange,
+  placeholder = "Enter password",
+  required = false,
+  autoComplete = "current-password",
+  disabled = false,
+  minLength = undefined,
+  className = "",
+}: PasswordInputProps) {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+      <div className="relative">
+        <Input
+          id={id}
+          name={name}
+          type={showPassword ? "text" : "password"}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          required={required}
+          className={`mt-1 pr-10 ${className}`}
+          autoComplete={autoComplete}
+          disabled={disabled}
+          minLength={minLength}
+        />
+        <button
+          type="button"
+          onClick={() => setShowPassword(!showPassword)}
+          className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          aria-label={showPassword ? "Hide password" : "Show password"}
+        >
+          {showPassword ? (
+            <EyeOff className="w-4 h-4" />
+          ) : (
+            <Eye className="w-4 h-4" />
+          )}
+        </button>
+      </div>
+  );
 }

package/template/src/components/ScriptInjector.tsx

@@ -1,62 +1,62 @@
-import { useEffect, useRef } from "react";
-import constants from "@/constants/constants.json";
-
-function injectScript(html: string, target: "head" | "body", position: "start" | "end", marker: string) {
-  if (!html) return;
-
-  // Check if already injected
-  if (document.querySelector(`[data-injected="${marker}"]`)) return;
-
-  const container = document.createElement("div");
-  container.innerHTML = html;
-
-  const targetElement = target === "head" ? document.head : document.body;
-
-  // Create wrapper with marker
-  const wrapper = document.createDocumentFragment();
-
-  Array.from(container.childNodes).forEach((node) => {
-    if (node.nodeName === "SCRIPT") {
-      // Recreate script for execution
-      const script = node as HTMLScriptElement;
-      const newScript = document.createElement("script");
-      newScript.setAttribute("data-injected", marker);
-      Array.from(script.attributes).forEach((attr) => {
-        newScript.setAttribute(attr.name, attr.value);
-      });
-      if (script.innerHTML) {
-        newScript.innerHTML = script.innerHTML;
-      }
-      wrapper.appendChild(newScript);
-    } else {
-      const clone = node.cloneNode(true) as HTMLElement;
-      if (clone.setAttribute) {
-        clone.setAttribute("data-injected", marker);
-      }
-      wrapper.appendChild(clone);
-    }
-  });
-
-  if (position === "start") {
-    targetElement.insertBefore(wrapper, targetElement.firstChild);
-  } else {
-    targetElement.appendChild(wrapper);
-  }
-}
-
-export function ScriptInjector() {
-  const injected = useRef(false);
-  const { headStart, headEnd, bodyStart, bodyEnd } = constants.scripts;
-
-  useEffect(() => {
-    if (injected.current) return;
-    injected.current = true;
-
-    injectScript(headStart, "head", "start", "head-start");
-    injectScript(headEnd, "head", "end", "head-end");
-    injectScript(bodyStart, "body", "start", "body-start");
-    injectScript(bodyEnd, "body", "end", "body-end");
-  }, []);
-
-  return null;
-}
+import { useEffect, useRef } from "react";
+import constants from "@/constants/constants.json";
+
+function injectScript(html: string, target: "head" | "body", position: "start" | "end", marker: string) {
+  if (!html) return;
+
+  // Check if already injected
+  if (document.querySelector(`[data-injected="${marker}"]`)) return;
+
+  const container = document.createElement("div");
+  container.innerHTML = html;
+
+  const targetElement = target === "head" ? document.head : document.body;
+
+  // Create wrapper with marker
+  const wrapper = document.createDocumentFragment();
+
+  Array.from(container.childNodes).forEach((node) => {
+    if (node.nodeName === "SCRIPT") {
+      // Recreate script for execution
+      const script = node as HTMLScriptElement;
+      const newScript = document.createElement("script");
+      newScript.setAttribute("data-injected", marker);
+      Array.from(script.attributes).forEach((attr) => {
+        newScript.setAttribute(attr.name, attr.value);
+      });
+      if (script.innerHTML) {
+        newScript.innerHTML = script.innerHTML;
+      }
+      wrapper.appendChild(newScript);
+    } else {
+      const clone = node.cloneNode(true) as HTMLElement;
+      if (clone.setAttribute) {
+        clone.setAttribute("data-injected", marker);
+      }
+      wrapper.appendChild(clone);
+    }
+  });
+
+  if (position === "start") {
+    targetElement.insertBefore(wrapper, targetElement.firstChild);
+  } else {
+    targetElement.appendChild(wrapper);
+  }
+}
+
+export function ScriptInjector() {
+  const injected = useRef(false);
+  const { headStart, headEnd, bodyStart, bodyEnd } = constants.scripts;
+
+  useEffect(() => {
+    if (injected.current) return;
+    injected.current = true;
+
+    injectScript(headStart, "head", "start", "head-start");
+    injectScript(headEnd, "head", "end", "head-end");
+    injectScript(bodyStart, "body", "start", "body-start");
+    injectScript(bodyEnd, "body", "end", "body-end");
+  }, []);
+
+  return null;
+}