openship 0.1.1 → 0.1.7

package/apps/dashboard/src/app/(dashboard)/(deployment)/deploy/[slug]/components/DomainSettings.tsx

@@ -1,291 +0,0 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { Globe, Shield, Server, X, Copy, Check, ChevronDown, Info } from "lucide-react";
-import { domainsApi } from "@/lib/api";
-
-interface DnsRecord {
-  type: "CNAME" | "A" | "TXT";
-  host: string;
-  value: string;
-}
-
-interface DomainSettingsProps {
-  projectName: string;
-  domain: string;
-  setDomain: (domain: string) => void;
-  customDomain: string;
-  setCustomDomain: (domain: string) => void;
-  domainType: "free" | "custom";
-  setDomainType: (type: "free" | "custom") => void;
-}
-
-const RECORD_LABELS: Record<string, string> = {
-  CNAME: "Routes traffic through the edge network",
-  A: "Points to your server IP",
-  TXT: "Verifies domain ownership",
-};
-
-const DomainSettings: React.FC<DomainSettingsProps> = ({
-  projectName,
-  domain,
-  setDomain,
-  customDomain,
-  setCustomDomain,
-  domainType,
-  setDomainType,
-}) => {
-  const [showDnsModal, setShowDnsModal] = useState(false);
-  const [dnsRecords, setDnsRecords] = useState<DnsRecord[]>([]);
-  const [dnsMode, setDnsMode] = useState<"cloud" | "selfhosted">("cloud");
-  const [loading, setLoading] = useState(false);
-  const [copied, setCopied] = useState<string | null>(null);
-
-  const copy = (text: string, id: string) => {
-    navigator.clipboard.writeText(text);
-    setCopied(id);
-    setTimeout(() => setCopied(null), 2000);
-  };
-
-  // Fetch preview records when custom domain changes (debounced)
-  const fetchRecords = useCallback(async (hostname: string) => {
-    if (!hostname || hostname.length < 3 || !hostname.includes(".")) return;
-    setLoading(true);
-    try {
-      const res = await domainsApi.previewRecords(hostname);
-      setDnsRecords(res.data.records);
-      setDnsMode(res.data.mode);
-    } catch {
-      // Silently fail — user can still deploy
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (domainType !== "custom" || !customDomain) {
-      setDnsRecords([]);
-      return;
-    }
-    const timer = setTimeout(() => fetchRecords(customDomain), 400);
-    return () => clearTimeout(timer);
-  }, [customDomain, domainType, fetchRecords]);
-
-  const hasRecords = dnsRecords.length > 0 && dnsRecords.every((r) => r.value);
-  const routeRecord = dnsRecords.find((r) => r.type !== "TXT");
-
-  return (
-    <div className="bg-card rounded-xl border border-border/50 overflow-hidden">
-      {/* Header */}
-      <div className="flex items-center gap-2.5 px-4 py-3 border-b border-border/40">
-        <div className="w-7 h-7 rounded-lg bg-primary/10 flex items-center justify-center">
-          <Globe className="size-3.5 text-primary" />
-        </div>
-        <div>
-          <h3 className="text-sm font-semibold text-foreground leading-tight">Domain</h3>
-          <p className="text-[11px] text-muted-foreground">Where your site will be accessible</p>
-        </div>
-      </div>
-
-      <div className="p-4 space-y-3">
-        {/* Toggle */}
-        <div className="flex items-center bg-border/50 rounded-lg p-0.5">
-          <button
-            type="button"
-            onClick={() => setDomainType("free")}
-            className={`flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-all ${
-              domainType === "free"
-                ? "bg-card text-foreground shadow-sm border border-border/50"
-                : "text-muted-foreground hover:text-foreground border border-transparent"
-            }`}
-          >
-            Free Subdomain
-          </button>
-          <button
-            type="button"
-            onClick={() => setDomainType("custom")}
-            className={`flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-all ${
-              domainType === "custom"
-                ? "bg-card text-foreground shadow-sm border border-border/50"
-                : "text-muted-foreground hover:text-foreground border border-transparent"
-            }`}
-          >
-            Custom Domain
-          </button>
-        </div>
-
-        {/* Input */}
-        {domainType === "free" ? (
-          <div>
-            <div className="flex items-center bg-muted/30 border border-border rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-primary/20 transition-all">
-              <input
-                type="text"
-                value={domain}
-                onChange={(e) => setDomain(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ""))}
-                placeholder={projectName || "my-project"}
-                className="flex-1 px-3 py-2 bg-transparent text-sm text-foreground placeholder:text-muted-foreground/50 focus:outline-none"
-              />
-              <div className="px-3 py-2 bg-muted/60 border-l border-border">
-                <span className="text-sm font-semibold text-foreground">.opsh.io</span>
-              </div>
-            </div>
-            <p className="text-[11px] text-muted-foreground mt-1.5 flex items-center gap-1">
-              <Shield className="size-3 text-emerald-500 shrink-0" />
-              SSL included &mdash; live at{" "}
-              <span className="font-medium text-foreground ml-0.5">
-                {domain || projectName || "my-project"}.opsh.io
-              </span>
-            </p>
-          </div>
-        ) : (
-          <div className="space-y-2">
-            <input
-              type="text"
-              value={customDomain}
-              onChange={(e) => setCustomDomain(e.target.value.toLowerCase())}
-              placeholder="example.com"
-              className="w-full px-3 py-2 bg-muted/30 border border-border rounded-lg text-sm text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all"
-            />
-
-            {/* Inline DNS hint */}
-            {customDomain && (
-              <div className="rounded-lg border border-border/50 bg-muted/20 overflow-hidden">
-                <div className="flex items-center gap-2 px-3 py-2">
-                  <Server className="size-3 text-muted-foreground shrink-0" />
-                  {loading ? (
-                    <p className="text-[11px] text-muted-foreground flex-1">Fetching DNS records...</p>
-                  ) : hasRecords ? (
-                    <p className="text-[11px] text-muted-foreground flex-1">
-                      Add a <span className="font-medium text-foreground">{routeRecord?.type}</span> and{" "}
-                      <span className="font-medium text-foreground">TXT</span> record at your DNS provider
-                    </p>
-                  ) : (
-                    <p className="text-[11px] text-muted-foreground flex-1">
-                      Enter a valid domain to see required DNS records
-                    </p>
-                  )}
-                  {hasRecords && (
-                    <button
-                      type="button"
-                      onClick={() => setShowDnsModal(true)}
-                      className="text-[11px] text-primary hover:text-primary/80 font-medium shrink-0 transition-colors"
-                    >
-                      View records
-                    </button>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-
-      {/* DNS Modal */}
-      {showDnsModal && hasRecords && (
-        <div
-          className="fixed inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center z-50 p-4"
-          onClick={() => setShowDnsModal(false)}
-        >
-          <div className="max-w-xl w-full" onClick={(e) => e.stopPropagation()}>
-            <div className="relative bg-card rounded-xl border border-border/50 shadow-lg overflow-hidden animate-in fade-in zoom-in-95 duration-200">
-              <button
-                onClick={() => setShowDnsModal(false)}
-                className="absolute top-3 right-3 w-8 h-8 bg-muted/50 rounded-lg flex items-center justify-center hover:bg-muted transition-colors z-10"
-              >
-                <X className="size-4 text-muted-foreground" />
-              </button>
-
-              {/* Header */}
-              <div className="flex items-center gap-3 px-5 py-4 border-b border-border/40">
-                <div className="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center">
-                  <Server className="size-4 text-primary" />
-                </div>
-                <div>
-                  <h3 className="text-sm font-semibold text-foreground">DNS Configuration</h3>
-                  <p className="text-xs text-muted-foreground">
-                    Add these records for{" "}
-                    <span className="font-medium text-foreground">{customDomain}</span>
-                  </p>
-                </div>
-              </div>
-
-              {/* Records */}
-              <div className="p-5 space-y-3">
-                {dnsRecords.map((record, i) => (
-                  <div key={i} className="bg-muted/30 rounded-xl border border-border/50 p-4">
-                    <div className="flex items-center gap-3 mb-3">
-                      <span className="px-2.5 py-1 bg-foreground text-background text-xs font-bold rounded-lg">
-                        {record.type}
-                      </span>
-                      <span className="text-xs text-muted-foreground">
-                        {RECORD_LABELS[record.type] ?? ""}
-                      </span>
-                    </div>
-                    <div className="grid grid-cols-2 gap-3">
-                      <div>
-                        <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-1.5">
-                          Name / Host
-                        </p>
-                        <div className="flex items-center gap-2 bg-background rounded-lg border border-border/50 px-3 py-2">
-                          <code className="flex-1 text-sm font-medium text-foreground">{record.host}</code>
-                          <button
-                            onClick={() => copy(record.host, `${i}-h`)}
-                            className="p-1 hover:bg-muted rounded-md transition-colors shrink-0"
-                          >
-                            {copied === `${i}-h` ? (
-                              <Check className="size-3.5 text-emerald-500" />
-                            ) : (
-                              <Copy className="size-3.5 text-muted-foreground" />
-                            )}
-                          </button>
-                        </div>
-                      </div>
-                      <div>
-                        <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-1.5">
-                          Value / Target
-                        </p>
-                        <div className="flex items-center gap-2 bg-background rounded-lg border border-border/50 px-3 py-2">
-                          <code className="flex-1 text-sm font-medium text-foreground truncate">
-                            {record.value}
-                          </code>
-                          <button
-                            onClick={() => copy(record.value, `${i}-v`)}
-                            className="p-1 hover:bg-muted rounded-md transition-colors shrink-0"
-                          >
-                            {copied === `${i}-v` ? (
-                              <Check className="size-3.5 text-emerald-500" />
-                            ) : (
-                              <Copy className="size-3.5 text-muted-foreground" />
-                            )}
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-
-                <div className="flex items-start gap-2 p-3 bg-primary/5 rounded-xl border border-primary/10">
-                  <Info className="size-3.5 text-primary shrink-0 mt-0.5" />
-                  <p className="text-xs text-muted-foreground leading-relaxed">
-                    {dnsMode === "selfhosted" ? (
-                      <>
-                        Add the <span className="font-medium text-foreground">A record</span> pointing to your server IP,
-                        then the <span className="font-medium text-foreground">TXT record</span> for verification.
-                      </>
-                    ) : (
-                      <>
-                        Add the <span className="font-medium text-foreground">CNAME record</span> for routing,
-                        then the <span className="font-medium text-foreground">TXT record</span> for verification.
-                      </>
-                    )}{" "}
-                    DNS changes can take up to 48 hours.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default DomainSettings;

package/apps/dashboard/src/app/(dashboard)/(deployment)/deploy/[slug]/components/Header.tsx

@@ -1,71 +0,0 @@
-import React from "react";
-import { ArrowLeft, GitBranch, Globe, Lock } from "lucide-react";
-import { HeaderProps } from "@/components/import-project/types";
-import Link from "next/link";
-import { generateIcon } from "@/utils/icons";
-
-const Header: React.FC<HeaderProps> = ({ repoData }) => {
-  return (
-    <div className="mb-6 relative mt-10">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-4">
-          {/* <Link
-            href="/deployments"
-            className="inline-flex items-center justify-center w-10 h-10 rounded-xl hover:bg-gray-100 text-gray-600 hover:text-black transition-all"
-          >
-            <ArrowLeft className="w-5 h-5" />
-          </Link>
-           */}
-          <div>
-            <h1 
-              className="font-bold text-black mb-2"
-              style={{ fontSize: '2.4rem', letterSpacing: '-0.5px' }}
-            >
-              {repoData.owner}/{repoData.repo}
-            </h1>
-            <div className="flex items-center gap-2 text-sm">
-              {repoData.private ? (
-                <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-amber-500/10 text-amber-700 ring-1 ring-amber-500/20 font-semibold text-xs">
-                  <Lock className="w-3 h-3" />
-                  Private
-                </span>
-              ) : (
-                <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-700 ring-1 ring-emerald-500/20 font-semibold text-xs">
-                  <Globe className="w-3 h-3" />
-                  Public
-                </span>
-              )}
-              <span className="text-gray-300">•</span>
-              <span className="inline-flex items-center gap-1 text-gray-500">
-                <GitBranch className="w-3 h-3" />
-                <span className="text-xs font-medium">{repoData.branch}</span>
-              </span>
-            </div>
-          </div>
-        </div>
-
-        <button
-          className="flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-600 hover:text-black text-sm font-medium rounded-[15px] transition-all"
-          type="button"
-        >
-          {generateIcon('help%20sign-50-1658435663.png', 16, 'currentColor')}
-          <span>Help</span>
-        </button>
-      </div>
-      
-      {/* Gradient underline */}
-      {/* <div 
-        className="absolute left-14"
-        style={{
-          bottom: '-1.5rem',
-          width: '100px',
-          height: '4px',
-          background: 'linear-gradient(90deg, #36b37e, #00c6ff)',
-          borderRadius: '30px',
-        }}
-      ></div> */}
-    </div>
-  );
-};
-
-export default React.memo(Header);

package/apps/dashboard/src/app/(dashboard)/(deployment)/deploy/[slug]/components/Sidebar.tsx

@@ -1,270 +0,0 @@
-import React, { useCallback } from "react";
-import { GitBranch, Rocket, Github, Loader2, Globe, Database, Container, Server, Layers, Check, AlertCircle, Key, Cloud, Monitor } from "lucide-react";
-import { CustomSelect } from "@/components/ui/CustomSelect";
-import DomainSettings from "./DomainSettings";
-import BuildSummary from "./BuildSummary";
-import { useDeployment } from "@/context/DeploymentContext";
-import { useRouter } from "next/navigation";
-import type { BuildStrategy } from "@/context/deployment/types";
-
-// ─── Deploy checklist for compose ────────────────────────────────────────────
-
-const ComposeChecklist: React.FC = () => {
-  const { config } = useDeployment();
-  const services = config.services || [];
-  if (services.length === 0) return null;
-
-  const isDb = (svc: { image?: string; name: string }) =>
-    /postgres|mysql|mariadb|mongo|redis|memcached|cassandra|clickhouse|influx|minio/i.test(
-      svc.image || svc.name,
-    );
-
-  const exposedServices = services.filter((s) => s.exposed);
-  const exposableServices = services.filter(
-    (s) => s.ports.length > 0 && !isDb(s),
-  );
-  const envConfigured = services.filter(
-    (s) => Object.keys(s.environment).length > 0,
-  ).length;
-  const totalEnvVars = services.reduce(
-    (acc, s) => acc + Object.keys(s.environment).length,
-    0,
-  );
-  const dbServices = services.filter((s) => isDb(s));
-  const buildServices = services.filter((s) => s.build);
-
-  const checks = [
-    {
-      label: "Services detected",
-      value: `${services.length} services`,
-      ok: services.length > 0,
-      icon: Layers,
-    },
-    {
-      label: "Public domains",
-      value: exposedServices.length > 0
-        ? `${exposedServices.length} of ${exposableServices.length} exposed`
-        : `${exposableServices.length} can be exposed`,
-      ok: exposedServices.length > 0,
-      warn: exposedServices.length === 0 && exposableServices.length > 0,
-      icon: Globe,
-    },
-    ...(buildServices.length > 0
-      ? [{
-          label: "Build services",
-          value: `${buildServices.length} to build`,
-          ok: true,
-          icon: Container,
-        }]
-      : []),
-    ...(dbServices.length > 0
-      ? [{
-          label: "Databases",
-          value: `${dbServices.length} ${dbServices.length === 1 ? "instance" : "instances"}`,
-          ok: true,
-          icon: Database,
-        }]
-      : []),
-    {
-      label: "Environment",
-      value: totalEnvVars > 0
-        ? `${totalEnvVars} vars across ${envConfigured} services`
-        : "No env vars set",
-      ok: totalEnvVars > 0,
-      icon: Key,
-    },
-  ];
-
-  return (
-    <div className="bg-card rounded-xl border border-border/50 p-4 space-y-3">
-      <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-        Deploy Checklist
-      </p>
-      <div className="space-y-2">
-        {checks.map((check) => {
-          const Icon = check.icon;
-          return (
-            <div key={check.label} className="flex items-start gap-2.5">
-              <div className={`mt-0.5 p-1 rounded-md ${
-                check.ok
-                  ? "bg-emerald-500/10 text-emerald-500"
-                  : (check as any).warn
-                    ? "bg-amber-500/10 text-amber-500"
-                    : "bg-muted/50 text-muted-foreground/50"
-              }`}>
-                {check.ok ? (
-                  <Check className="size-3" />
-                ) : (check as any).warn ? (
-                  <AlertCircle className="size-3" />
-                ) : (
-                  <Icon className="size-3" />
-                )}
-              </div>
-              <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium text-foreground leading-tight">
-                  {check.label}
-                </p>
-                <p className="text-xs text-muted-foreground leading-snug">
-                  {check.value}
-                </p>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-
-      {/* Exposed domains quick list */}
-      {exposedServices.length > 0 && (
-        <div className="pt-2 border-t border-border/30 space-y-1.5">
-          <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
-            Domains
-          </p>
-          {exposedServices.map((svc) => {
-            const domain =
-              svc.domainType === "custom" && svc.customDomain
-                ? svc.customDomain
-                : `${svc.domain || svc.name}.opsh.io`;
-            return (
-              <div key={svc.name} className="flex items-center gap-2">
-                <Globe className="size-3 text-primary" />
-                <span className="text-sm text-primary font-medium truncate">{domain}</span>
-                <span className="text-xs text-muted-foreground ml-auto">{svc.name}</span>
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-};
-
-// ─── Sidebar ─────────────────────────────────────────────────────────────────
-
-const Sidebar: React.FC = () => {
-  const { config, state, updateConfig, startDeployment } = useDeployment();
-  const router = useRouter();
-  const isServices = config.projectType === "services";
-
-  const handleDeploy = useCallback(async () => {
-    const deploymentId = await startDeployment();
-    if (deploymentId) {
-      router.push(`/build/${deploymentId}`);
-    }
-  }, [startDeployment, router]);
-
-  return (
-    <div className="lg:sticky lg:top-6 h-fit space-y-4">
-      {/* Repository Info */}
-      <div className="border border-border/50 rounded-xl bg-card overflow-hidden">
-        <div className="flex items-center gap-1.5 px-4 pt-3 pb-0">
-          <span className="w-2.5 h-2.5 rounded-full bg-[#ef4444]/60" />
-          <span className="w-2.5 h-2.5 rounded-full bg-[#eab308]/60" />
-          <span className="w-2.5 h-2.5 rounded-full bg-[#22c55e]/60" />
-        </div>
-        <div className="p-4 pt-3">
-          <div className="flex items-center gap-3">
-            <Github className="size-4 text-muted-foreground shrink-0" />
-            <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium text-foreground truncate">
-                {config.owner}/{config.repo}
-              </p>
-            </div>
-          </div>
-          {config.branches.length > 0 && (
-            <div className="mt-3">
-              <CustomSelect
-                value={config.branch}
-                onChange={(val) => updateConfig({ branch: val })}
-                options={config.branches.map(branch => ({
-                  value: branch,
-                  label: branch,
-                  icon: <GitBranch className="w-3.5 h-3.5" />
-                }))}
-                placeholder="Select branch"
-                className="w-full"
-              />
-            </div>
-          )}
-          {config.branches.length === 0 && config.branch && (
-            <div className="flex items-center gap-1 mt-2 text-xs text-muted-foreground">
-              <GitBranch className="size-3" />
-              {config.branch}
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Build Location — prominent toggle for where the build runs */}
-      {config.projectType === "app" && config.options.hasBuild && (
-        <div className="border border-border/50 rounded-xl bg-card p-4 space-y-2.5">
-          <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-            Build Location
-          </p>
-          <div className="flex gap-1.5 p-1 bg-muted/30 rounded-lg border border-border/50">
-            {([
-              { value: "server" as BuildStrategy, label: "Server", desc: "Build in cloud workspace", icon: <Cloud className="w-4 h-4" /> },
-              { value: "local" as BuildStrategy, label: "Local", desc: "Build on this machine", icon: <Monitor className="w-4 h-4" /> },
-            ]).map((opt) => (
-              <button
-                key={opt.value}
-                onClick={() => updateConfig({ buildStrategy: opt.value })}
-                className={`flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all ${
-                  config.buildStrategy === opt.value
-                    ? "bg-background text-foreground shadow-sm border border-border/50"
-                    : "text-muted-foreground hover:text-foreground"
-                }`}
-              >
-                {opt.icon}
-                {opt.label}
-              </button>
-            ))}
-          </div>
-          <p className="text-xs text-muted-foreground">
-            {config.buildStrategy === "local"
-              ? "Build runs on your machine, then artifacts are uploaded"
-              : "Source is sent to the server for building"}
-          </p>
-        </div>
-      )}
-
-      {/* Domain — per-service for compose, checklist for others */}
-      {isServices ? (
-        <ComposeChecklist />
-      ) : (
-        <DomainSettings
-          projectName={config.projectName}
-          domain={config.domain}
-          setDomain={(val) => updateConfig({ domain: val })}
-          customDomain={config.customDomain}
-          setCustomDomain={(val) => updateConfig({ customDomain: val })}
-          domainType={config.domainType}
-          setDomainType={(val) => updateConfig({ domainType: val })}
-        />
-      )}
-
-      {/* Deploy */}
-      <button
-        onClick={handleDeploy}
-        disabled={state.isDeploying}
-        className="w-full inline-flex items-center justify-center gap-2 px-5 py-3 bg-primary text-primary-foreground text-sm font-medium rounded-xl hover:bg-primary/90 transition-all hover:shadow-lg hover:shadow-primary/25 hover:-translate-y-0.5 disabled:opacity-50 disabled:cursor-not-allowed"
-      >
-        {state.isDeploying ? (
-          <>
-            <Loader2 className="size-4 animate-spin" />
-            Deploying…
-          </>
-        ) : (
-          <>
-            <Rocket className="size-4" />
-            Deploy
-          </>
-        )}
-      </button>
-
-      {/* Build Summary */}
-      <BuildSummary />
-    </div>
-  );
-};
-
-export default React.memo(Sidebar);