openship 0.1.0 → 0.1.1

package/apps/dashboard/src/components/import-project/EnvironmentVariables.tsx

@@ -0,0 +1,481 @@
+"use client";
+import React, { useCallback, useRef, useState } from "react";
+import { Eye, EyeOff, Trash2, Plus, Upload, X, Key, Pencil } from "lucide-react";
+import { useDeployment } from "@/context/DeploymentContext";
+import { useToast } from "@/context/ToastContext";
+
+interface EnvironmentVariablesPropsOptional {
+  mode?: "deploy" | "settings";
+  showEditControls?: boolean;
+  isEditingMode?: boolean;
+  setIsEditingMode?: (editing: boolean) => void;
+  onSave?: () => void;
+  onCancel?: () => void;
+  hasChanges?: boolean;
+  isSaving?: boolean;
+  /** When true, removes the outer card border and inner divider — for embedding inside another card. */
+  borderless?: boolean;
+  // For settings mode - external env vars
+  envVars?: Array<{ key: string; value: string; visible: boolean }>;
+  onEnvVarsChange?: (envVars: Array<{ key: string; value: string; visible: boolean }>) => void;
+}
+
+const EnvironmentVariables: React.FC<EnvironmentVariablesPropsOptional> = ({
+  mode = "deploy",
+  showEditControls = true,
+  isEditingMode: externalIsEditingMode,
+  setIsEditingMode: externalSetIsEditingMode,
+  onSave,
+  onCancel,
+  hasChanges,
+  isSaving = false,
+  borderless = false,
+  envVars: externalEnvVars,
+  onEnvVarsChange,
+}) => {
+  const { config, updateConfig } = useDeployment();
+  const { showToast } = useToast();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [internalIsEditingMode, setInternalIsEditingMode] = useState(mode === "deploy");
+  
+  // Use external state if provided, otherwise use internal state
+  const isEditingMode = externalIsEditingMode !== undefined ? externalIsEditingMode : internalIsEditingMode;
+  const setIsEditingMode = externalSetIsEditingMode || setInternalIsEditingMode;
+
+  // Use external env vars in settings mode, deployment context in deploy mode
+  const currentEnvVars = mode === "settings" && externalEnvVars ? externalEnvVars : config.envVars;
+  const updateEnvVars = mode === "settings" && onEnvVarsChange ? onEnvVarsChange : 
+    (newVars: Array<{ key: string; value: string; visible: boolean }>) => updateConfig({ envVars: newVars });
+
+  const addEnvVar = useCallback(() => {
+    const newEnvVars = [...currentEnvVars, { key: "", value: "", visible: false }];
+    updateEnvVars(newEnvVars);
+    // Auto-enable editing mode when adding in settings mode
+    if (mode === "settings") {
+      setIsEditingMode(true);
+    }
+  }, [currentEnvVars, updateEnvVars, mode, setIsEditingMode]);
+
+  const removeEnvVar = useCallback(
+    (index: number) => {
+      const newEnvVars = currentEnvVars.filter((_, i) => i !== index);
+      updateEnvVars(newEnvVars);
+    },
+    [currentEnvVars, updateEnvVars]
+  );
+
+  const updateEnvVar = useCallback(
+    (
+      index: number,
+      field: keyof (typeof currentEnvVars)[0],
+      value: string | boolean
+    ) => {
+      const newEnvVars = currentEnvVars.map((env, i) => (i === index ? { ...env, [field]: value } : env));
+      updateEnvVars(newEnvVars);
+    },
+    [currentEnvVars, updateEnvVars]
+  );
+
+  const toggleEnvVisibility = useCallback(
+    (index: number) => {
+      const newEnvVars = currentEnvVars.map((env, i) =>
+        i === index ? { ...env, visible: !env.visible } : env
+      );
+      updateEnvVars(newEnvVars);
+    },
+    [currentEnvVars, updateEnvVars]
+  );
+
+  const handleKeyChange = (index: number, value: string) => {
+    updateEnvVar(index, "key", value);
+  };
+
+  const handleValueChange = (index: number, value: string) => {
+    updateEnvVar(index, "value", value);
+  };
+
+  // Smart paste: intercept paste in KEY/VALUE inputs, detect multi-line KEY=VALUE format
+  const handlePaste = useCallback((e: React.ClipboardEvent<HTMLInputElement>, index: number) => {
+    const text = e.clipboardData.getData('text');
+    if (!text) return;
+
+    // Check if pasted text looks like env format (has at least one KEY=VALUE line)
+    const lines = text.split('\n').filter(l => l.trim() && !l.trim().startsWith('#'));
+    const envLines = lines.filter(l => {
+      const eqIdx = l.indexOf('=');
+      if (eqIdx <= 0) return false;
+      const key = l.substring(0, eqIdx).trim();
+      return /^[A-Za-z_][A-Za-z0-9_]*$/.test(key);
+    });
+
+    // Only intercept if we detect multiple env lines, or a single KEY=VALUE that differs from a plain value
+    if (envLines.length < 2 && (envLines.length === 0 || !text.includes('\n'))) return;
+
+    e.preventDefault();
+
+    const parsed = parseEnvFile(text);
+    if (parsed.length === 0) return;
+
+    // Merge: update existing keys, add new ones
+    const existingMap = new Map(currentEnvVars.map((v, i) => [v.key, i]));
+    const merged = [...currentEnvVars];
+
+    // Remove the current empty row if it was the target of the paste
+    const currentRow = merged[index];
+    const isEmptyRow = currentRow && !currentRow.key && !currentRow.value;
+
+    let added = 0;
+    let updated = 0;
+    for (const pv of parsed) {
+      const existingIdx = existingMap.get(pv.key);
+      if (existingIdx !== undefined) {
+        merged[existingIdx] = { ...merged[existingIdx], value: pv.value };
+        updated++;
+      } else {
+        merged.push(pv);
+        added++;
+      }
+    }
+
+    // Remove the empty row that triggered the paste
+    if (isEmptyRow) {
+      merged.splice(index, 1);
+    }
+
+    updateEnvVars(merged);
+
+    const parts: string[] = [];
+    if (added > 0) parts.push(`${added} added`);
+    if (updated > 0) parts.push(`${updated} updated`);
+    showToast(`Pasted ${parsed.length} variable${parsed.length !== 1 ? 's' : ''}${parts.length ? ` (${parts.join(', ')})` : ''}`, "success", "Environment Variables");
+  }, [currentEnvVars, updateEnvVars, showToast]);
+
+  const parseEnvFile = (content: string) => {
+    const lines = content.split('\n');
+    const parsed: Array<{ key: string; value: string; visible: boolean }> = [];
+
+    lines.forEach((line) => {
+      // Skip empty lines
+      const trimmedLine = line.trim();
+      if (!trimmedLine) return;
+
+      // Skip comment lines (lines starting with #)
+      if (trimmedLine.startsWith('#')) return;
+
+      // Find the first = sign to split key and value
+      const equalIndex = trimmedLine.indexOf('=');
+      if (equalIndex === -1) return; // No = sign, skip this line
+
+      // Extract key and value
+      const key = trimmedLine.substring(0, equalIndex).trim();
+      let value = trimmedLine.substring(equalIndex + 1).trim();
+
+      // Validate key format (must start with letter or underscore, followed by alphanumeric or underscore)
+      if (!/^[A-Za-z_][A-Za-z0-9_]*$/.test(key)) return;
+
+      // Handle quoted values
+      if (value.startsWith('"')) {
+        // Double-quoted value - find the closing quote
+        const closingQuoteIndex = value.indexOf('"', 1);
+        if (closingQuoteIndex !== -1) {
+          value = value.substring(1, closingQuoteIndex);
+        } else {
+          // No closing quote, take everything after opening quote
+          value = value.substring(1);
+        }
+      } else if (value.startsWith("'")) {
+        // Single-quoted value - find the closing quote
+        const closingQuoteIndex = value.indexOf("'", 1);
+        if (closingQuoteIndex !== -1) {
+          value = value.substring(1, closingQuoteIndex);
+        } else {
+          // No closing quote, take everything after opening quote
+          value = value.substring(1);
+        }
+      } else {
+        // Unquoted value - remove inline comments
+        // Split by # but only if it's preceded by whitespace (to avoid breaking values with #)
+        const commentMatch = value.match(/\s+#/);
+        if (commentMatch && commentMatch.index !== undefined) {
+          value = value.substring(0, commentMatch.index).trim();
+        }
+      }
+
+      // Only add if we have a valid key (value can be empty)
+      if (key) {
+        parsed.push({ key, value, visible: false });
+      }
+    });
+
+    return parsed;
+  };
+
+  const handleFileUpload = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const content = e.target?.result as string;
+      const parsedVars = parseEnvFile(content);
+      
+      if (parsedVars.length > 0) {
+        // Merge with existing vars, avoiding duplicates
+        const existingKeys = new Set(currentEnvVars.map(v => v.key));
+        const newVars = parsedVars.filter(v => !existingKeys.has(v.key));
+        updateEnvVars([...currentEnvVars, ...newVars]);
+      }
+    };
+    reader.readAsText(file);
+    
+    // Reset input so same file can be uploaded again
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  }, [updateEnvVars, currentEnvVars]);
+
+  const handleUploadClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  // Check if a file is a .env file
+  const isEnvFile = (file: File) => {
+    const name = file.name.toLowerCase();
+    return name === '.env' || 
+           name.startsWith('.env.') || 
+           name === 'env' || 
+           name.startsWith('env.');
+  };
+
+  // Process dropped file
+  const processFile = (file: File) => {
+    if (!isEnvFile(file)) {
+      return; // Only accept .env files
+    }
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const content = e.target?.result as string;
+      const parsedVars = parseEnvFile(content);
+      
+      if (parsedVars.length > 0) {
+        const existingKeys = new Set(currentEnvVars.map(v => v.key));
+        const newVars = parsedVars.filter(v => !existingKeys.has(v.key));
+        updateEnvVars([...currentEnvVars, ...newVars]);
+      }
+    };
+    reader.readAsText(file);
+  };
+
+  // Drag handlers
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    // Check if dragged items contain files
+    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
+      setIsDragging(true);
+    }
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    // Only set dragging to false if we're leaving the component entirely
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX;
+    const y = e.clientY;
+    
+    if (x <= rect.left || x >= rect.right || y <= rect.top || y >= rect.bottom) {
+      setIsDragging(false);
+    }
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // Set the drop effect
+    e.dataTransfer.dropEffect = 'copy';
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    const files = Array.from(e.dataTransfer.files);
+    
+    // Process only .env files
+    files.forEach(file => {
+      if (isEnvFile(file)) {
+        processFile(file);
+      }
+    });
+  }, [currentEnvVars, updateEnvVars]);
+
+  return (
+    <div className={borderless ? '' : 'bg-card rounded-2xl border border-border/50'}>
+      <div className="flex items-center justify-between px-5 py-4">
+        <div className="flex items-center gap-3">
+          <div className="w-9 h-9 rounded-xl bg-violet-500/10 flex items-center justify-center">
+            <Key className="size-[18px] text-violet-500" />
+          </div>
+          <div>
+            <p className="text-sm font-medium text-foreground">Environment Variables</p>
+            <p className="text-xs text-muted-foreground">
+              {currentEnvVars.length === 0 ? 'None set' : `${currentEnvVars.length} variable${currentEnvVars.length !== 1 ? 's' : ''}`}
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          {mode === "settings" && !isEditingMode && (
+            <button
+              onClick={() => setIsEditingMode(true)}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground bg-muted/50 hover:bg-muted rounded-lg transition-colors"
+            >
+              <Pencil className="size-3.5" />
+              Edit
+            </button>
+          )}
+          {mode === "settings" && isEditingMode && (
+            <>
+              <button
+                onClick={onCancel}
+                className="p-2 text-muted-foreground hover:text-red-500 hover:bg-red-500/10 rounded-lg transition-colors"
+                title="Cancel"
+              >
+                <X className="size-4" />
+              </button>
+              <button
+                onClick={handleUploadClick}
+                className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground bg-muted/50 hover:bg-muted rounded-lg transition-colors"
+              >
+                <Upload className="size-3.5" />
+                Upload .env
+              </button>
+              <button
+                onClick={onSave}
+                disabled={isSaving}
+                className="px-4 py-1.5 bg-primary text-primary-foreground text-xs font-medium rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {isSaving ? 'Saving...' : 'Save Changes'}
+              </button>
+            </>
+          )}
+          {mode === "deploy" && isEditingMode && (
+            <button
+              onClick={handleUploadClick}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground bg-muted/50 hover:bg-muted rounded-lg transition-colors"
+            >
+              <Upload className="size-3.5" />
+              Upload .env
+            </button>
+          )}
+        </div>
+      </div>
+      
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".env,.env.local,.env.production,.env.development,text/plain"
+        onChange={handleFileUpload}
+        className="hidden"
+      />
+
+      <div
+        className={`px-5 pb-5 space-y-3 pt-4 transition-all ${
+          borderless ? 'rounded-b-xl' : 'border-t border-border/50 rounded-b-2xl'
+        } ${
+          isDragging ? 'ring-2 ring-primary/30 bg-primary/5' : ''
+        }`}
+        onDragEnter={handleDragEnter}
+        onDragLeave={handleDragLeave}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+      >
+        {currentEnvVars.map((env, index) => (
+          <div key={index} className="flex items-center gap-2">
+            <input
+              type="text"
+              value={env.key}
+              onChange={(e) => handleKeyChange(index, e.target.value)}
+              onPaste={(e) => handlePaste(e, index)}
+              placeholder="KEY"
+              readOnly={!isEditingMode}
+              className={`flex-1 px-3.5 py-2.5 border border-border/50 rounded-lg text-sm font-mono text-foreground placeholder:text-muted-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all ${
+                !isEditingMode ? 'cursor-default bg-muted/20' : 'bg-muted/30'
+              }`}
+            />
+            <div className="relative flex-1">
+              <input
+                type={env.visible ? "text" : "password"}
+                value={env.value}
+                onChange={(e) => handleValueChange(index, e.target.value)}
+                onPaste={(e) => handlePaste(e, index)}
+                placeholder="value"
+                readOnly={!isEditingMode}
+                className={`w-full px-3.5 py-2.5 pr-9 border border-border/50 rounded-lg text-sm font-mono text-foreground placeholder:text-muted-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all ${
+                  !isEditingMode ? 'cursor-default bg-muted/20' : 'bg-muted/30'
+                }`}
+              />
+              <button
+                onClick={() => toggleEnvVisibility(index)}
+                className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground/50 hover:text-muted-foreground transition-colors"
+                type="button"
+              >
+                {env.visible ? <EyeOff className="size-3.5" /> : <Eye className="size-3.5" />}
+              </button>
+            </div>
+
+            {showEditControls && isEditingMode && (
+              <button
+                onClick={() => removeEnvVar(index)}
+                className="flex size-8 items-center justify-center rounded-lg text-muted-foreground/50 hover:text-red-500 hover:bg-red-500/10 transition-colors"
+                type="button"
+                title="Delete"
+              >
+                <Trash2 className="size-3.5" />
+              </button>
+            )}
+          </div>
+        ))}
+
+        {currentEnvVars.length === 0 && (
+          <div
+            className={`text-center flex flex-col items-center justify-center py-10 px-6 border-2 border-dashed rounded-xl transition-all ${
+              isDragging
+                ? 'border-primary bg-primary/5'
+                : 'border-border/50 bg-muted/20'
+            }`}
+          >
+            <Key className={`size-10 mb-3 ${isDragging ? 'text-primary' : 'text-muted-foreground/30'}`} />
+            <p className={`text-sm font-medium mb-1 ${isDragging ? 'text-primary' : 'text-foreground'}`}>
+              {isDragging ? 'Drop .env file here' : 'No environment variables'}
+            </p>
+            <p className="text-xs text-muted-foreground max-w-xs">
+              {isEditingMode
+                ? 'Click "Add Variable" below, "Upload .env", or drag and drop a .env file here'
+                : 'Click "Edit" to manage environment variables'}
+            </p>
+          </div>
+        )}
+
+        {isEditingMode && (
+          <div className="flex items-center gap-2">
+            <button
+              onClick={addEnvVar}
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground bg-muted/50 hover:bg-muted rounded-lg transition-colors"
+            >
+              <Plus className="size-3.5" />
+              Add Variable
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(EnvironmentVariables);

package/apps/dashboard/src/components/import-project/Frameworks.tsx

@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+import { STACKS, STACK_ICONS, type StackId, type StackCategory as CoreStackCategory } from "@repo/core";
+
+export type StackCategory = CoreStackCategory;
+
+export interface FrameworkConfig {
+  id: StackId;
+  name: string;
+  category: StackCategory;
+  options: {
+    buildCommand: string;
+    installCommand: string;
+    outputDirectory: string;
+    isStatic?: boolean;
+  };
+  icon: (color: string) => React.ReactNode;
+}
+
+// ─── Icon rendering (uses STACK_ICONS from core as source of truth) ─────────
+
+const StackIconImg: React.FC<{ name: string; url: string }> = ({ name, url }) => {
+  const [failed, setFailed] = useState(false);
+  if (failed) {
+    return (
+      <div className="w-full h-full rounded bg-muted flex items-center justify-center text-[10px] font-bold text-muted-foreground">
+        {name.charAt(0)}
+      </div>
+    );
+  }
+  return (
+    <img
+      src={url}
+      alt={name}
+      className="w-full h-full object-contain"
+      loading="lazy"
+      onError={() => setFailed(true)}
+    />
+  );
+};
+
+function makeIcon(stackId: StackId) {
+  const url = STACK_ICONS[stackId];
+  if (!url) {
+    return (_color: string) => (
+      <div className="w-full h-full rounded bg-muted flex items-center justify-center text-[10px] font-bold text-muted-foreground">
+        {STACKS[stackId].name.charAt(0)}
+      </div>
+    );
+  }
+
+  return (_color: string) => (
+    <StackIconImg url={url} name={STACKS[stackId].name} />
+  );
+}
+
+// ─── Categories shown in the UI tabs ────────────────────────────────────────
+
+export const stackCategories: { id: StackCategory; label: string }[] = [
+  { id: "frontend", label: "Frontend" },
+  { id: "backend", label: "Backend" },
+  { id: "fullstack", label: "Fullstack" },
+  { id: "static", label: "Static" },
+];
+
+// ─── App-only stacks (excludes docker, services, unknown) ──────────────────
+
+const EXCLUDED_STACKS = new Set<string>(["unknown", "docker", "docker-compose"]);
+
+export const frameworks: FrameworkConfig[] = (Object.entries(STACKS) as [StackId, (typeof STACKS)[StackId]][])
+  .filter(([id, def]) => !EXCLUDED_STACKS.has(id) && def.category !== "docker" && def.category !== "services")
+  .map(([id, def]) => ({
+    id,
+    name: def.name,
+    category: def.category,
+    options: {
+      buildCommand: def.defaultBuildCommand,
+      installCommand: "",
+      outputDirectory: def.outputDirectory,
+      isStatic: def.category === "static" || (def.category === "frontend" && !def.defaultStartCommand),
+    },
+    icon: makeIcon(id),
+  }));
+
+/**
+ * Get framework configuration by ID
+ */
+export const getFrameworkConfig = (frameworkId: string): FrameworkConfig => {
+  return frameworks.find(fw => fw.id === frameworkId) || frameworks.find(fw => fw.id === "static")!;
+};
+