openship 0.1.1 → 0.1.8

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

@@ -1,376 +0,0 @@
-import React, { useState } from "react";
-import { Terminal, FolderOutput, Server, Package, Play, Hash, Settings2, ChevronDown, ChevronUp, Pencil, Hammer, BoxSelect, ShieldCheck } from "lucide-react";
-import { Toggle } from "@/components/project-settings/ServerSideSwitch";
-import { useDeployment } from "@/context/DeploymentContext";
-
-interface InputField {
-  key: string;
-  label: string;
-  placeholder: string;
-  description: string;
-  type: 'text' | 'number';
-  min?: number;
-  max?: number;
-  optional?: boolean;
-  icon: React.ReactNode;
-}
-
-interface BuildSettingsProps {
-  variant?: 'deploy' | 'import';
-  mode?: 'simple' | 'advanced';
-  buildData?: any;
-  onSave?: (field: string, value: string) => Promise<void>;
-  loading?: { [key: string]: boolean };
-  buildConfig?: any;
-  updateOptions?: (options: any) => void;
-}
-
-const BuildSettings: React.FC<BuildSettingsProps> = ({
-  mode = 'simple',
-  buildData: externalBuildData,
-  onSave,
-  loading = {},
-  buildConfig,
-  updateOptions: externalUpdateOptions
-}) => {
-  const deploymentContext = mode === 'simple' ? useDeployment() : { config: buildConfig || {}, updateOptions: () => { }, updateConfig: () => {} };
-  const { config, updateOptions, updateConfig } = deploymentContext || { config: buildConfig || {}, updateOptions: externalUpdateOptions, updateConfig: () => {} };
-
-  const [isEditing] = useState(mode === 'simple');
-
-  const [editingField, setEditingField] = useState<string | null>(null);
-  const [tempValues, setTempValues] = useState<{ [key: string]: string }>({});
-  const [expanded, setExpanded] = useState(true);
-  const [advancedOpen, setAdvancedOpen] = useState(false);
-
-  const buildData = mode === 'advanced' ? externalBuildData : config?.options;
-  const needsBuild = config?.framework !== "node" && config?.framework !== "static";
-
-  const hasBuild = buildData?.hasBuild !== false;
-  const hasServer = !!buildData?.hasServer;
-
-  // ── Build-group fields (shown when Build is ON) ──────────────────
-  const buildFields: InputField[] = [
-    {
-      key: 'installCommand',
-      label: 'Install Command',
-      placeholder: 'bun install',
-      description: 'Command to install dependencies',
-      type: 'text',
-      icon: <Package className="size-4" />
-    },
-    ...(needsBuild ? [
-      {
-        key: 'buildCommand',
-        label: 'Build Command',
-        placeholder: 'npm run build',
-        description: 'Command to build your project',
-        type: 'text' as const,
-        icon: <Terminal className="size-4" />
-      },
-      {
-        key: 'outputDirectory',
-        label: 'Output Directory',
-        placeholder: '.next',
-        description: 'Directory with build output',
-        type: 'text' as const,
-        icon: <FolderOutput className="size-4" />
-      },
-    ] : []),
-  ];
-
-  // ── Advanced fields (hidden behind toggle) ───────────────────────
-  const advancedFields: InputField[] = needsBuild ? [
-    {
-      key: 'productionPaths',
-      label: 'Production Paths',
-      placeholder: 'dist, node_modules, package.json',
-      description: 'Only deploy these files/dirs after build — hides source code from runtime. Leave empty to run in-place.',
-      type: 'text',
-      optional: true,
-      icon: <ShieldCheck className="size-4" />
-    },
-  ] : [];
-
-  // ── Start-group fields (shown when Start is ON) ──────────────────
-  const startFields: InputField[] = [
-    {
-      key: 'startCommand',
-      label: 'Start Command',
-      placeholder: 'npm start',
-      description: 'Command to start your application',
-      type: 'text',
-      icon: <Play className="size-4" />
-    },
-    {
-      key: 'productionPort',
-      label: 'Production Port',
-      placeholder: '3000',
-      description: 'Production port for your application',
-      type: 'number',
-      min: 1,
-      max: 65535,
-      optional: true,
-      icon: <Hash className="size-4" />
-    },
-  ];
-
-  // ── General fields (always visible) ──────────────────────────────
-  const generalFields: InputField[] = [
-    {
-      key: 'rootDirectory',
-      label: 'Root Directory',
-      placeholder: './',
-      description: 'Deploy a subdirectory of your repository',
-      type: 'text',
-      optional: true,
-      icon: <FolderOutput className="size-4" />
-    },
-  ];
-
-  const handleEdit = (field: string, currentValue: string) => {
-    setEditingField(field);
-    setTempValues({ ...tempValues, [field]: currentValue || '' });
-  };
-
-  const handleSave = async (field: string) => {
-    if (mode === 'advanced' && onSave) {
-      await onSave(field, tempValues[field]);
-      setEditingField(null);
-    }
-  };
-
-  const handleCancel = (field: string, originalValue: string) => {
-    setEditingField(null);
-    setTempValues({ ...tempValues, [field]: originalValue });
-  };
-
-  const handleChange = (field: string, value: string) => {
-    if (mode === 'simple' && updateOptions) {
-      updateOptions({ [field]: value } as any);
-    } else {
-      setTempValues({ ...tempValues, [field]: value });
-    }
-  };
-
-  const renderInput = (field: InputField) => {
-    const value = mode === 'simple' ? (config?.options as any)?.[field.key] : buildData?.[field.key];
-    const isCurrentlyEditing = mode === 'advanced' && editingField === field.key;
-    const displayValue = isCurrentlyEditing ? tempValues[field.key] : value;
-
-    if (mode === 'simple') {
-      return (
-        <div key={field.key}>
-          <label className="text-xs font-medium text-muted-foreground mb-1.5 block">
-            {field.label}
-            {field.optional && (
-              <span className="text-muted-foreground/50 ml-1">(Optional)</span>
-            )}
-          </label>
-          <input
-            type={field.type}
-            min={field.min}
-            max={field.max}
-            value={displayValue || ''}
-            onChange={(e) => handleChange(field.key, e.target.value)}
-            readOnly={!isEditing}
-            placeholder={field.placeholder}
-            className={`w-full px-3.5 py-2.5 border border-border/50 rounded-lg text-sm text-foreground transition-all ${isEditing
-              ? 'bg-muted/30 focus:outline-none focus:ring-2 focus:ring-primary/20 cursor-text'
-              : 'bg-muted/20 cursor-not-allowed text-muted-foreground'
-              }`}
-          />
-        </div>
-      );
-    }
-
-    // Advanced mode
-    return (
-      <div key={field.key}>
-        <div className="mb-3">
-          <h3 className="text-sm font-medium text-foreground">{field.label}</h3>
-          <p className="text-xs text-muted-foreground mt-1">{field.description}</p>
-        </div>
-
-        {isCurrentlyEditing ? (
-          <div className="space-y-3">
-            <div className="flex items-center gap-3 p-3 bg-muted/50 rounded-xl border border-border/50">
-              {field.icon}
-              <input
-                type={field.type}
-                min={field.min}
-                max={field.max}
-                value={displayValue || ''}
-                onChange={(e) => setTempValues({ ...tempValues, [field.key]: e.target.value })}
-                placeholder={field.placeholder}
-                className="flex-1 text-sm bg-transparent border-0 outline-none text-foreground placeholder:text-muted-foreground/50"
-                autoFocus
-              />
-            </div>
-            <div className="flex gap-2">
-              <button
-                onClick={() => handleSave(field.key)}
-                disabled={loading[field.key]}
-                className="px-4 py-2 bg-primary text-primary-foreground rounded-xl text-sm font-medium hover:bg-primary/90 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                Save
-              </button>
-              <button
-                onClick={() => handleCancel(field.key, value)}
-                className="px-4 py-2 bg-muted hover:bg-muted/80 text-foreground rounded-xl text-sm font-medium transition-all"
-              >
-                Cancel
-              </button>
-            </div>
-          </div>
-        ) : (
-          <div className="relative p-3 bg-muted/30 rounded-xl group hover:bg-muted/50 transition-all">
-            <div className="flex items-center gap-3">
-              {field.icon}
-              <p className="text-sm font-medium text-foreground flex-1">{displayValue || field.placeholder}</p>
-            </div>
-            <button
-              onClick={() => handleEdit(field.key, value)}
-              className="absolute right-3 top-1/2 -translate-y-1/2 p-1.5 text-muted-foreground/50 hover:text-primary transition-colors"
-            >
-              <Pencil className="size-4" />
-            </button>
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  const visibleBuildFields = hasBuild ? buildFields : [];
-  const visibleStartFields = hasServer ? startFields : [];
-
-  if (mode === 'simple') {
-    return (
-      <div className="bg-card rounded-2xl border border-border/50">
-        <button
-          onClick={() => setExpanded(!expanded)}
-          className="w-full flex items-center justify-between px-5 py-4 text-left"
-        >
-          <div className="flex items-center gap-3">
-            <div className="w-9 h-9 rounded-xl bg-orange-500/10 flex items-center justify-center">
-              <Settings2 className="size-[18px] text-orange-500" />
-            </div>
-            <div>
-              <p className="text-[15px] font-semibold text-foreground">Deploy Configuration</p>
-              <p className="text-sm text-muted-foreground">
-                {config?.framework ? `${config.framework} defaults applied` : 'Configure build options'}
-              </p>
-            </div>
-          </div>
-          {expanded ? (
-            <ChevronUp className="size-4 text-muted-foreground" />
-          ) : (
-            <ChevronDown className="size-4 text-muted-foreground" />
-          )}
-        </button>
-
-        {expanded && (
-          <div className="px-5 pb-5 border-t border-border/50 pt-4">
-            <div className="grid md:grid-cols-2 gap-4">
-              {/* ── Build column ──────────────────────────────── */}
-              <div className="space-y-3">
-                <div className="flex items-center justify-between p-2.5 bg-muted/30 rounded-lg border border-border/50">
-                  <div className="flex items-center gap-2">
-                    <Hammer className="w-3.5 h-3.5 text-muted-foreground" />
-                    <div>
-                      <p className="text-sm font-medium text-foreground">Build</p>
-                      <p className="text-[11px] text-muted-foreground leading-tight">
-                        {hasBuild ? 'Install & build commands' : 'Deploy source directly'}
-                      </p>
-                    </div>
-                  </div>
-                  <Toggle checked={hasBuild} onChange={(v: boolean) => updateOptions?.({ hasBuild: v })} />
-                </div>
-                {visibleBuildFields.map(renderInput)}
-                {generalFields.map(renderInput)}
-
-                {/* ── Advanced (collapsible) ──────────────────── */}
-                {advancedFields.length > 0 && (
-                  <div className="border border-border/30 rounded-lg overflow-hidden">
-                    <button
-                      onClick={() => setAdvancedOpen(!advancedOpen)}
-                      className="w-full flex items-center justify-between px-3 py-2 text-left hover:bg-muted/30 transition-colors"
-                    >
-                      <div className="flex items-center gap-2">
-                        <ShieldCheck className="w-3.5 h-3.5 text-muted-foreground" />
-                        <span className="text-xs font-medium text-muted-foreground">Advanced</span>
-                      </div>
-                      {advancedOpen ? (
-                        <ChevronUp className="size-3 text-muted-foreground" />
-                      ) : (
-                        <ChevronDown className="size-3 text-muted-foreground" />
-                      )}
-                    </button>
-                    {advancedOpen && (
-                      <div className="px-3 pb-3 space-y-3">
-                        {advancedFields.map(renderInput)}
-                      </div>
-                    )}
-                  </div>
-                )}
-              </div>
-
-              {/* ── Start column ──────────────────────────────── */}
-              <div className="space-y-3">
-                <div className="flex items-center justify-between p-2.5 bg-muted/30 rounded-lg border border-border/50">
-                  <div className="flex items-center gap-2">
-                    <Play className="w-3.5 h-3.5 text-muted-foreground" />
-                    <div>
-                      <p className="text-sm font-medium text-foreground">Start</p>
-                      <p className="text-[11px] text-muted-foreground leading-tight">
-                        {hasServer ? `Server on port ${buildData?.productionPort || '3000'}` : 'Static from edge'}
-                      </p>
-                    </div>
-                  </div>
-                  <Toggle checked={hasServer} onChange={(v: boolean) => updateOptions?.({ hasServer: v })} />
-                </div>
-                {visibleStartFields.map(renderInput)}
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  // Advanced mode
-  const allVisibleFields = [...visibleBuildFields, ...visibleStartFields, ...generalFields];
-  return (
-    <div className="bg-card rounded-2xl border border-border/50 p-6">
-      <h2 className="text-lg font-semibold text-foreground mb-6">
-        Build Settings
-      </h2>
-      <div className="grid gap-5 mb-6">
-        <div className="grid md:grid-cols-2 gap-5">
-          {allVisibleFields.map(renderInput)}
-        </div>
-      </div>
-
-      {/* ── Advanced section ──────────────────────────── */}
-      {advancedFields.length > 0 && (
-        <div className="border-t border-border/50 pt-4">
-          <button
-            onClick={() => setAdvancedOpen(!advancedOpen)}
-            className="flex items-center gap-2 mb-4 text-sm text-muted-foreground hover:text-foreground transition-colors"
-          >
-            <ShieldCheck className="size-4" />
-            <span className="font-medium">Advanced</span>
-            {advancedOpen ? <ChevronUp className="size-3.5" /> : <ChevronDown className="size-3.5" />}
-          </button>
-          {advancedOpen && (
-            <div className="grid md:grid-cols-2 gap-5">
-              {advancedFields.map(renderInput)}
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default React.memo(BuildSettings);

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

@@ -1,161 +0,0 @@
-"use client";
-
-import React from "react";
-
-/**
- * BuildSkeleton - Loading state for build page
- * Matches the layout of DeploymentProcessing
- */
-const BuildSkeleton: React.FC = () => {
-  return (
-    <div className="min-h-screen mx-auto md:px-12 bg-background">
-      {/* Header Skeleton */}
-      <div className="bg-background">
-        <div className="py-5 relative">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-4">
-              <div>
-                {/* Title skeleton */}
-                <div className="h-7 w-48 bg-gradient-to-r from-muted via-muted/50 to-muted rounded-lg mb-2 animate-pulse" />
-                {/* Subtitle skeleton */}
-                <div className="h-4 w-32 bg-gradient-to-r from-muted via-muted/50 to-muted rounded-lg animate-pulse" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="w-full">
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-          {/* Main Content - Left Side (2/3) */}
-          <div className="lg:col-span-2 space-y-6">
-            {/* Progress Steps Skeleton */}
-            <div className="bg-card rounded-2xl border border-border/50 p-8">
-              {/* Title */}
-              <div className="h-5 w-40 bg-gradient-to-r from-muted via-muted/50 to-muted rounded-lg mb-6 animate-pulse" />
-
-              {/* Steps */}
-              <div className="relative">
-                {/* Progress Line */}
-                <div className="absolute top-6 left-0 right-0 z-0 h-0.5 bg-border/50">
-                  <div className="h-full w-1/4 bg-gradient-to-r from-muted-foreground/30 via-muted-foreground/20 to-muted/50 animate-pulse" />
-                </div>
-
-                {/* Step Items */}
-                <div className="relative flex justify-between z-10">
-                  {[0, 1, 2, 3, 4].map((index) => (
-                    <div key={index} className="flex flex-col items-center bg-card z-10 px-2">
-                      {/* Circle skeleton */}
-                      <div
-                        className={`w-12 h-12 rounded-full flex items-center justify-center transition-all duration-300 animate-pulse ${
-                          index === 0 ? 'bg-muted' : 'bg-card border-2 border-border'
-                        }`}
-                      />
-                      {/* Label skeleton */}
-                      <div className="h-3 w-16 bg-gradient-to-r from-muted via-muted/50 to-muted rounded mt-3 animate-pulse" />
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-
-            {/* Terminal Skeleton */}
-            <div className="bg-card rounded-2xl border border-border/50 overflow-hidden">
-              {/* Terminal Header */}
-              <div className="flex items-center justify-between px-6 py-3 border-b border-border/50 bg-muted/50">
-                <div className="flex items-center gap-3">
-                  <div className="flex gap-2">
-                    <div className="w-3 h-3 rounded-full bg-destructive/40 animate-pulse"></div>
-                    <div className="w-3 h-3 rounded-full bg-yellow-400/50 animate-pulse"></div>
-                    <div className="w-3 h-3 rounded-full bg-green-400/50 animate-pulse"></div>
-                  </div>
-                  <div className="h-4 w-24 bg-gradient-to-r from-muted via-muted/50 to-muted rounded animate-pulse" />
-                </div>
-                <div className="h-4 w-16 bg-gradient-to-r from-muted via-muted/50 to-muted rounded animate-pulse" />
-              </div>
-
-              {/* Terminal Body */}
-              <div className="bg-card p-6 min-h-[400px] space-y-3">
-                {/* Log line skeletons */}
-                {[...Array(8)].map((_, i) => {
-                  const widths = [98, 97, 92, 93, 73, 71, 62, 85];
-                  return (
-                    <div
-                      key={i}
-                      className="h-4 bg-gradient-to-r from-muted via-muted/50 to-muted rounded animate-pulse"
-                      style={{
-                        width: `${widths[i] || 80}%`,
-                        animationDelay: `${i * 0.1}s`,
-                      }}
-                    />
-                  );
-                })}
-              </div>
-            </div>
-          </div>
-
-          {/* Sidebar - Right Side (1/3) */}
-          <div className="space-y-6">
-            {/* Project Info Skeleton */}
-            <div className="bg-card rounded-2xl border border-border/50 p-6">
-              {/* Title */}
-              <div className="h-5 w-32 bg-gradient-to-r from-muted via-muted/50 to-muted rounded-lg mb-4 animate-pulse" />
-              
-              {/* Info rows */}
-              <div className="space-y-4">
-                {[...Array(4)].map((_, i) => (
-                  <div key={i} className="flex items-center justify-between">
-                    <div className="h-4 w-24 bg-gradient-to-r from-muted via-muted/50 to-muted rounded animate-pulse" />
-                    <div className="h-4 w-32 bg-gradient-to-r from-muted via-muted/50 to-muted rounded animate-pulse" />
-                  </div>
-                ))}
-              </div>
-            </div>
-
-            {/* Domain Skeleton */}
-            <div className="bg-card rounded-2xl border border-border/50 p-6">
-              {/* Title */}
-              <div className="h-5 w-28 bg-gradient-to-r from-muted via-muted/50 to-muted rounded-lg mb-4 animate-pulse" />
-              
-              {/* Domain box */}
-              <div className="h-12 w-full bg-gradient-to-r from-muted via-muted/50 to-muted rounded-xl animate-pulse" />
-              
-              {/* Copy button */}
-              <div className="h-10 w-full bg-gradient-to-r from-muted via-muted/50 to-muted rounded-full mt-3 animate-pulse" />
-            </div>
-
-            {/* Build Time Skeleton */}
-            <div className="bg-card rounded-2xl border border-border/50 p-6">
-              <div className="h-5 w-24 bg-gradient-to-r from-muted via-muted/50 to-muted rounded-lg mb-4 animate-pulse" />
-              <div className="h-8 w-20 bg-gradient-to-r from-muted via-muted/50 to-muted rounded-lg animate-pulse" />
-            </div>
-
-            {/* Actions Skeleton */}
-            <div className="bg-card rounded-2xl border border-border/50 p-6">
-              <div className="h-5 w-20 bg-gradient-to-r from-muted via-muted/50 to-muted rounded-lg mb-4 animate-pulse" />
-              <div className="space-y-3">
-                <div className="h-10 w-full bg-gradient-to-r from-muted via-muted/50 to-muted rounded-xl animate-pulse" />
-                <div className="h-10 w-full bg-gradient-to-r from-muted via-muted/50 to-muted rounded-xl animate-pulse" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Loading Indicator Overlay */}
-      <div className="fixed bottom-8 right-8 bg-card rounded-2xl border border-border/50 px-6 py-4 shadow-2xl">
-        <div className="flex items-center gap-3">
-          <div className="relative">
-            <div className="w-5 h-5 border-3 border-foreground/10 border-t-foreground rounded-full animate-spin"></div>
-          </div>
-          <div>
-          <span className="text-sm text-muted-foreground">Loading build session...</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default BuildSkeleton;
-