openship 0.1.0 → 0.1.1

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

@@ -0,0 +1,376 @@
+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

@@ -0,0 +1,161 @@
+"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;
+