@promakeai/cli 0.9.8 → 0.9.10

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/MetriaAnalytics.tsx

@@ -1,68 +1,68 @@
-import { useEffect, useRef } from 'react';
-const DEFAULT_TRACKER_SCRIPT_URL =
-  'https://cdn.jsdelivr.net/npm/@litemetrics/tracker@latest/dist/litemetrics.global.js';
-
-function pickFirstNonEmpty(...values: Array<string | undefined>): string | undefined {
-  return values.find((value) => typeof value === 'string' && value.trim().length > 0);
-}
-
-export const analyticsConfig = {
-  siteId: pickFirstNonEmpty(import.meta.env.VITE_LITEMETRICS_SITE_ID, import.meta.env.VITE_METRIA_SITE_ID),
-  serverUrl: pickFirstNonEmpty(import.meta.env.VITE_LITEMETRICS_SERVER_URL, import.meta.env.VITE_METRIA_SERVER_URL),
-  trackerScriptUrl: pickFirstNonEmpty(import.meta.env.VITE_LITEMETRICS_SCRIPT_URL) ?? DEFAULT_TRACKER_SCRIPT_URL,
-};
-
-export const isAnalyticsEnabled = Boolean(analyticsConfig.siteId && analyticsConfig.serverUrl);
-
-type TrackerGlobal = {
-  createTracker: (config: { siteId: string; endpoint: string }) => void;
-};
-
-declare global {
-  interface Window {
-    Litemetrics?: TrackerGlobal;
-  }
-}
-
-function stripTrailingSlashes(value: string): string {
-  return value.replace(/\/+$/, '');
-}
-
-function ensureHttps(value: string): string {
-  return value.replace(/^http:\/\//i, 'https://');
-}
-
-export function MetriaAnalytics() {
-  const injected = useRef(false);
-
-  useEffect(() => {
-    if (!isAnalyticsEnabled || !analyticsConfig.siteId || !analyticsConfig.serverUrl || injected.current) {
-      return;
-    }
-    if (document.querySelector('[data-injected="litemetrics-tracker"]')) return;
-
-    injected.current = true;
-
-    const normalizedServerUrl = ensureHttps(stripTrailingSlashes(analyticsConfig.serverUrl));
-    const script = document.createElement('script');
-    script.async = true;
-    script.src = analyticsConfig.trackerScriptUrl;
-    script.setAttribute('data-injected', 'litemetrics-tracker');
-    script.onload = () => {
-      if (document.querySelector('[data-injected="litemetrics-init"]')) return;
-
-      window.Litemetrics?.createTracker({
-        siteId: analyticsConfig.siteId!,
-        endpoint: `${normalizedServerUrl}/api/collect`,
-      });
-
-      const marker = document.createElement('meta');
-      marker.setAttribute('data-injected', 'litemetrics-init');
-      document.head.appendChild(marker);
-    };
-
-    document.head.appendChild(script);
-  }, []);
-
-  return null;
-}
+import { useEffect, useRef } from 'react';
+const DEFAULT_TRACKER_SCRIPT_URL =
+  'https://cdn.jsdelivr.net/npm/@litemetrics/tracker@latest/dist/litemetrics.global.js';
+
+function pickFirstNonEmpty(...values: Array<string | undefined>): string | undefined {
+  return values.find((value) => typeof value === 'string' && value.trim().length > 0);
+}
+
+export const analyticsConfig = {
+  siteId: pickFirstNonEmpty(import.meta.env.VITE_LITEMETRICS_SITE_ID, import.meta.env.VITE_METRIA_SITE_ID),
+  serverUrl: pickFirstNonEmpty(import.meta.env.VITE_LITEMETRICS_SERVER_URL, import.meta.env.VITE_METRIA_SERVER_URL),
+  trackerScriptUrl: pickFirstNonEmpty(import.meta.env.VITE_LITEMETRICS_SCRIPT_URL) ?? DEFAULT_TRACKER_SCRIPT_URL,
+};
+
+export const isAnalyticsEnabled = Boolean(analyticsConfig.siteId && analyticsConfig.serverUrl);
+
+type TrackerGlobal = {
+  createTracker: (config: { siteId: string; endpoint: string }) => void;
+};
+
+declare global {
+  interface Window {
+    Litemetrics?: TrackerGlobal;
+  }
+}
+
+function stripTrailingSlashes(value: string): string {
+  return value.replace(/\/+$/, '');
+}
+
+function ensureHttps(value: string): string {
+  return value.replace(/^http:\/\//i, 'https://');
+}
+
+export function MetriaAnalytics() {
+  const injected = useRef(false);
+
+  useEffect(() => {
+    if (!isAnalyticsEnabled || !analyticsConfig.siteId || !analyticsConfig.serverUrl || injected.current) {
+      return;
+    }
+    if (document.querySelector('[data-injected="litemetrics-tracker"]')) return;
+
+    injected.current = true;
+
+    const normalizedServerUrl = ensureHttps(stripTrailingSlashes(analyticsConfig.serverUrl));
+    const script = document.createElement('script');
+    script.async = true;
+    script.src = analyticsConfig.trackerScriptUrl;
+    script.setAttribute('data-injected', 'litemetrics-tracker');
+    script.onload = () => {
+      if (document.querySelector('[data-injected="litemetrics-init"]')) return;
+
+      window.Litemetrics?.createTracker({
+        siteId: analyticsConfig.siteId!,
+        endpoint: `${normalizedServerUrl}/api/collect`,
+      });
+
+      const marker = document.createElement('meta');
+      marker.setAttribute('data-injected', 'litemetrics-init');
+      document.head.appendChild(marker);
+    };
+
+    document.head.appendChild(script);
+  }, []);
+
+  return null;
+}

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;
+}

package/template/src/components/Stack.tsx

@@ -1,39 +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>
-  );
-}
+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>
+  );
+}