openship 0.1.1 → 0.1.7

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

@@ -1,160 +0,0 @@
-import React, { useCallback, useState, useMemo } from "react";
-import { frameworks, getFrameworkConfig, stackCategories } from "./Frameworks";
-import type { StackCategory } from "./Frameworks";
-import { STACKS } from "@repo/core";
-import { Sparkles, ChevronDown, ChevronUp } from "lucide-react";
-import { useDeployment } from "@/context/DeploymentContext";
-import type { FrameworkId } from "./types";
-
-const ProjectSettings: React.FC = () => {
-  const { config, updateConfig } = useDeployment();
-  const [showFrameworkPicker, setShowFrameworkPicker] = useState(false);
-
-  const isAutoDetected = config.detectedFramework != null && config.framework === config.detectedFramework;
-  const detectedFw = config.detectedFramework ? getFrameworkConfig(config.detectedFramework) : null;
-
-  const currentFwConfig = getFrameworkConfig(config.framework);
-  const [activeTab, setActiveTab] = useState<StackCategory>(currentFwConfig.category);
-
-  const filteredFrameworks = useMemo(
-    () => frameworks.filter((fw) => fw.category === activeTab),
-    [activeTab],
-  );
-
-  const handleFrameworkChange = useCallback((frameworkId: FrameworkId) => {
-    const fwConfig = getFrameworkConfig(frameworkId);
-    const stackDef = STACKS[frameworkId as keyof typeof STACKS];
-    const isStatic = fwConfig.options.isStatic;
-    updateConfig({
-      framework: frameworkId,
-      options: {
-        ...config.options,
-        buildCommand: stackDef?.defaultBuildCommand ?? fwConfig.options.buildCommand,
-        installCommand: fwConfig.options.installCommand,
-        outputDirectory: stackDef?.outputDirectory ?? fwConfig.options.outputDirectory,
-        startCommand: stackDef?.defaultStartCommand ?? "",
-        productionPort: String(stackDef?.defaultPort ?? 3000),
-        hasServer: !isStatic,
-      },
-    });
-  }, [updateConfig, config.options]);
-
-  const handleChangeClick = () => {
-    setShowFrameworkPicker(true);
-    if (detectedFw) setActiveTab(detectedFw.category);
-  };
-
-  return (
-    <div className="space-y-6">
-      {/* Framework — auto-detected state */}
-      {isAutoDetected && !showFrameworkPicker && detectedFw && (
-        <div className="bg-card rounded-2xl border border-border/50 p-5">
-          <label className="text-[15px] font-semibold text-foreground mb-3 block">
-            Framework
-          </label>
-          <div className="flex items-center justify-between p-3.5 rounded-xl border border-border/50 bg-muted/40">
-            <div className="flex items-center gap-3">
-              <div className="w-9 h-9 rounded-xl bg-primary/10 flex items-center justify-center">
-                {detectedFw.icon("hsl(var(--primary))")}
-              </div>
-              <div>
-                <p className="text-sm font-medium text-foreground">
-                  {detectedFw.name}
-                </p>
-                <div className="flex items-center gap-1.5 mt-0.5">
-                  <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-md bg-primary/10 text-[10px] font-medium text-primary">
-                    <Sparkles className="size-2.5" />
-                    Detected
-                  </span>
-                </div>
-              </div>
-            </div>
-            <button
-              type="button"
-              onClick={handleChangeClick}
-              className="flex items-center gap-1 text-sm font-medium text-primary hover:text-primary/80 transition-colors"
-            >
-              Change
-              <ChevronDown className="size-3.5" />
-            </button>
-          </div>
-        </div>
-      )}
-
-      {/* Framework — full picker */}
-      {(!isAutoDetected || showFrameworkPicker) && (
-        <div className="bg-card rounded-2xl border border-border/50 p-5">
-          <div className="flex items-center justify-between mb-3">
-            <label className="text-[15px] font-semibold text-foreground">
-              Framework
-            </label>
-            {showFrameworkPicker && detectedFw && (
-              <button
-                type="button"
-                onClick={() => {
-                  setShowFrameworkPicker(false);
-                  // Reset to detected framework
-                  if (config.detectedFramework) handleFrameworkChange(config.detectedFramework);
-                }}
-                className="flex items-center gap-1 text-xs font-medium text-primary hover:text-primary/80 transition-colors"
-              >
-                <Sparkles className="size-3" />
-                Use detected
-                <ChevronUp className="size-3" />
-              </button>
-            )}
-          </div>
-
-          {/* Category tabs */}
-          <div className="flex gap-1 p-1 bg-muted/50 rounded-lg mb-4 w-fit">
-            {stackCategories.map((cat) => (
-              <button
-                key={cat.id}
-                type="button"
-                onClick={() => setActiveTab(cat.id)}
-                className={`px-3.5 py-1.5 text-sm font-medium rounded-md transition-all ${
-                  activeTab === cat.id
-                    ? "bg-background text-foreground shadow-sm"
-                    : "text-muted-foreground hover:text-foreground"
-                }`}
-              >
-                {cat.label}
-              </button>
-            ))}
-          </div>
-
-          {/* Framework grid */}
-          <div className="grid grid-cols-3 sm:grid-cols-5 lg:grid-cols-6 gap-2.5">
-            {filteredFrameworks.map((fw) => {
-              const isSelected = config.framework === fw.id;
-              return (
-                <button
-                  key={fw.id}
-                  onClick={() => handleFrameworkChange(fw.id)}
-                  type="button"
-                  className={`flex flex-col items-center gap-2.5 p-3.5 rounded-xl border transition-all ${
-                    isSelected
-                      ? "border-primary bg-primary/5 ring-1 ring-primary/20"
-                      : "border-border/50 hover:border-border hover:bg-muted/30"
-                  }`}
-                >
-                  <div className="w-8 h-8 flex items-center justify-center">
-                    {fw.icon(isSelected ? "hsl(var(--primary))" : "hsl(var(--foreground))")}
-                  </div>
-                  <span className={`text-xs font-medium ${isSelected ? "text-primary" : "text-muted-foreground"}`}>
-                    {fw.name}
-                  </span>
-                </button>
-              );
-            })}
-          </div>
-          <p className="text-sm text-muted-foreground mt-3">
-            Select your framework to auto-configure build settings
-          </p>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default React.memo(ProjectSettings);

package/apps/dashboard/src/components/import-project/types.ts

@@ -1,82 +0,0 @@
-import type { StackId } from "@repo/core";
-
-export interface Framework {
-  id: string;
-  name: string;
-  icon: React.ReactNode;
-}
-
-export interface RepoData {
-  repo: string;
-  owner: string;
-  branch: string;
-  private: boolean | false;
-}
-
-export interface EnvironmentVariable {
-  key: string;
-  value: string;
-  visible: boolean;
-}
-
-export type StartCommand = string;
-
-export type FrameworkId = StackId;
-
-export interface ProjectSettingsProps {
-  projectName: string;
-  setProjectName: (name: string) => void;
-  framework: FrameworkId;
-  handleFrameworkChange: (frameworkId: FrameworkId) => void;
-  selectedBranch: string;
-  setSelectedBranch: (branch: string) => void;
-  branches: string[];
-  loadingBranches: boolean;
-}
-
-export interface BuildSettingsProps {
-  framework: FrameworkId;
-  buildCommand: string;
-  setBuildCommand: (command: string) => void;
-  outputDirectory: string;
-  setOutputDirectory: (directory: string) => void;
-  installCommand: string;
-  setInstallCommand: (command: string) => void;
-  startCommand: StartCommand;
-  setStartCommand: (command: string) => void;
-  rootDirectory: string;
-  setRootDirectory: (directory: string) => void;
-  productionPort: string;
-  setProductionPort: (port: string) => void;
-  hasServer: boolean;
-  setHasServer: (hasServer: boolean) => void;
-  projectName: string;
-}
-
-export interface EnvironmentVariablesProps {
-  envVars: EnvironmentVariable[];
-  setEnvVars: React.Dispatch<React.SetStateAction<EnvironmentVariable[]>>;
-  mode?: "deploy" | "settings";
-  showEditControls?: boolean;
-  isEditingMode?: boolean;
-  setIsEditingMode?: (value: boolean) => void;
-  showAddButton?: boolean;
-  onSave?: () => void;
-  onCancel?: () => void;
-  hasChanges?: boolean;
-  isSaving?: boolean;
-}
-
-export interface HeaderProps {
-  repoData: RepoData;
-}
-
-/* Re-export for backwards compat — utils/deployment.ts imports from here */
-export type { Deployment } from "@/app/(dashboard)/deployments/types";
-
-export interface SidebarProps {
-  repoData: RepoData;
-  framework: FrameworkId;
-  isDeploying: boolean;
-  handleDeploy: () => void;
-}

package/apps/dashboard/src/components/integrations/GithubPermissionModal.tsx

@@ -1,173 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { X, Lock, Unlock, Check } from "lucide-react";
-
-interface GithubPermissionModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onConnect: (scope: "public" | "all") => void;
-}
-
-const GithubPermissionModal: React.FC<GithubPermissionModalProps> = ({
-  isOpen,
-  onClose,
-  onConnect,
-}) => {
-  const [selectedScope, setSelectedScope] = useState<"public" | "all">("public");
-  const [isConnecting, setIsConnecting] = useState(false);
-
-  if (!isOpen) return null;
-
-  const handleConnect = async () => {
-    setIsConnecting(true);
-    await onConnect(selectedScope);
-    setIsConnecting(false);
-  };
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
-      <div className="bg-white rounded-lg shadow-xl max-w-lg w-full">
-        {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-gray-200">
-          <div className="flex items-center gap-3">
-            <div className="w-10 h-10 bg-gray-900 rounded-lg flex items-center justify-center">
-              <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
-                <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
-              </svg>
-            </div>
-            <div>
-              <h2 className="text-xl font-semibold text-gray-900">Connect to GitHub</h2>
-              <p className="text-sm text-gray-500">Choose repository access level</p>
-            </div>
-          </div>
-          <button
-            onClick={onClose}
-            className="text-gray-400 hover:text-gray-600 transition-colors"
-          >
-            <X className="w-5 h-5" />
-          </button>
-        </div>
-
-        {/* Body */}
-        <div className="p-6 space-y-4">
-          <p className="text-sm text-gray-600 mb-6">
-            Select which repositories Oblien can access. You can change this later in your GitHub settings.
-          </p>
-
-          {/* Public Only Option */}
-          <button
-            onClick={() => setSelectedScope("public")}
-            className={`w-full p-4 border-2 rounded-lg text-left transition-all ${
-              selectedScope === "public"
-                ? "border-gray-900 bg-gray-50"
-                : "border-gray-200 hover:border-gray-300"
-            }`}
-          >
-            <div className="flex items-start justify-between">
-              <div className="flex items-start gap-3">
-                <div className={`mt-0.5 w-5 h-5 rounded-full border-2 flex items-center justify-center ${
-                  selectedScope === "public"
-                    ? "border-gray-900 bg-gray-900"
-                    : "border-gray-300"
-                }`}>
-                  {selectedScope === "public" && <Check className="w-3 h-3 text-white" />}
-                </div>
-                <div>
-                  <div className="flex items-center gap-2 mb-1">
-                    <Unlock className="w-4 h-4 text-gray-700" />
-                    <h3 className="font-semibold text-gray-900">Public repositories only</h3>
-                  </div>
-                  <p className="text-sm text-gray-600">
-                    Access to your public repositories. Perfect for open source projects.
-                  </p>
-                  <ul className="mt-2 space-y-1 text-xs text-gray-500">
-                    <li>• Read public repository data</li>
-                    <li>• Deploy public repositories</li>
-                    <li>• Create webhooks for public repos</li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </button>
-
-          {/* All Repositories Option */}
-          <button
-            onClick={() => setSelectedScope("all")}
-            className={`w-full p-4 border-2 rounded-lg text-left transition-all ${
-              selectedScope === "all"
-                ? "border-gray-900 bg-gray-50"
-                : "border-gray-200 hover:border-gray-300"
-            }`}
-          >
-            <div className="flex items-start justify-between">
-              <div className="flex items-start gap-3">
-                <div className={`mt-0.5 w-5 h-5 rounded-full border-2 flex items-center justify-center ${
-                  selectedScope === "all"
-                    ? "border-gray-900 bg-gray-900"
-                    : "border-gray-300"
-                }`}>
-                  {selectedScope === "all" && <Check className="w-3 h-3 text-white" />}
-                </div>
-                <div>
-                  <div className="flex items-center gap-2 mb-1">
-                    <Lock className="w-4 h-4 text-gray-700" />
-                    <h3 className="font-semibold text-gray-900">Public and private repositories</h3>
-                  </div>
-                  <p className="text-sm text-gray-600">
-                    Full access to all your repositories. Required for private projects.
-                  </p>
-                  <ul className="mt-2 space-y-1 text-xs text-gray-500">
-                    <li>• Read public and private repository data</li>
-                    <li>• Deploy any repository</li>
-                    <li>• Create webhooks for all repos</li>
-                    <li>• Access organization repositories</li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </button>
-
-          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mt-4">
-            <p className="text-xs text-blue-900">
-              <strong>Note:</strong> You can revoke access at any time from your GitHub settings under Applications → Authorized OAuth Apps.
-            </p>
-          </div>
-        </div>
-
-        {/* Footer */}
-        <div className="flex items-center justify-between p-6 border-t border-gray-200 bg-gray-50">
-          <button
-            onClick={onClose}
-            disabled={isConnecting}
-            className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors disabled:opacity-50"
-          >
-            Cancel
-          </button>
-          <button
-            onClick={handleConnect}
-            disabled={isConnecting}
-            className="px-6 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
-          >
-            {isConnecting ? (
-              <>
-                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
-                Connecting...
-              </>
-            ) : (
-              <>
-                <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-                  <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
-                </svg>
-                Connect to GitHub
-              </>
-            )}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default GithubPermissionModal;
-

package/apps/dashboard/src/components/language-switcher.tsx

@@ -1,36 +0,0 @@
-"use client";
-
-import { useI18n } from "@/components/i18n-provider";
-import { locales, type Locale } from "@/i18n";
-import { Button } from "@/components/ui/button";
-import { Globe } from "lucide-react";
-
-const labels: Record<Locale, string> = {
-  en: "EN",
-  ar: "عر",
-};
-
-/**
- * Cycles through available locales on click.
- * Compact icon button — shows the current locale code.
- */
-export function LanguageSwitcher() {
-  const { locale, setLocale } = useI18n();
-
-  function next() {
-    const idx = locales.indexOf(locale);
-    setLocale(locales[(idx + 1) % locales.length]);
-  }
-
-  return (
-    <Button
-      variant="ghost"
-      size="icon"
-      onClick={next}
-      aria-label="Switch language"
-      className="text-xs font-semibold"
-    >
-      <Globe className="size-4" />
-    </Button>
-  );
-}

package/apps/dashboard/src/components/logo.tsx

@@ -1,13 +0,0 @@
-/**
- * Openship logo — a stylised "O" built with a bordered div.
- * Uses CSS border-foreground so it renders instantly (no JS theme check).
- */
-export function Logo({ size = 36, className }: { size?: number; className?: string }) {
-  return (
-    <div
-      className={`shrink-0 rounded-full border-[3px] border-foreground ${className ?? ""}`}
-      style={{ width: size, height: size }}
-      aria-hidden="true"
-    />
-  );
-}

package/apps/dashboard/src/components/network-error-handler.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import { setNetworkErrorHandler } from "@/lib/api/client";
-import { useToast } from "@/components/toast";
-
-/**
- * Mounts once in the root layout and registers a global handler so that any
- * API call that fails at the network level (server down, ECONNREFUSED, timeout)
- * automatically shows a toast — without needing per-call error handling.
- */
-export function NetworkErrorHandler() {
-  const { toast } = useToast();
-
-  useEffect(() => {
-    setNetworkErrorHandler((msg) => {
-      toast("error", msg);
-    });
-
-    return () => {
-      // Clear the handler when this component unmounts
-      setNetworkErrorHandler(null);
-    };
-  }, [toast]);
-
-  return null;
-}

package/apps/dashboard/src/components/oauth-buttons.tsx

@@ -1,81 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { signIn } from "@/lib/auth-client";
-import { useToast } from "@/components/toast";
-import { useI18n } from "@/components/i18n-provider";
-import { Button } from "@/components/ui/button";
-import { Github, Loader2 } from "lucide-react";
-
-function GoogleIcon() {
-  return (
-    <svg width="17" height="17" viewBox="0 0 24 24">
-      <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.07 5.07 0 0 1-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
-      <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
-      <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
-      <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
-    </svg>
-  );
-}
-
-function isAbortError(err: unknown): boolean {
-  return err instanceof DOMException && err.name === "AbortError";
-}
-
-/**
- * Shared OAuth buttons — GitHub + Google.
- * Includes the divider above them.
- * Pass callbackURL to override the default post-OAuth redirect.
- */
-export function OAuthButtons({ callbackURL = "/" }: { callbackURL?: string }) {
-  const { toast } = useToast();
-  const { t } = useI18n();
-  const [loading, setLoading] = useState<"github" | "google" | null>(null);
-
-  async function handleOAuth(provider: "github" | "google") {
-    setLoading(provider);
-    try {
-      await signIn.social({ provider, callbackURL });
-    } catch (err) {
-      setLoading(null);
-      const msg = isAbortError(err)
-        ? t.auth.errors.serverUnreachable
-        : t.auth.errors.oauthFailed;
-      toast("error", msg);
-    }
-  }
-
-  return (
-    <>
-      {/* Divider */}
-      <div className="my-6 flex items-center gap-3">
-        <div className="h-px flex-1 bg-border" />
-        <span className="select-none text-xs text-muted-foreground">{t.auth.oauth.or}</span>
-        <div className="h-px flex-1 bg-border" />
-      </div>
-
-      {/* OAuth buttons */}
-      <div className="space-y-2.5">
-        <Button
-          variant="ghost"
-          disabled={loading !== null}
-          onClick={() => handleOAuth("github")}
-          className="w-full border-0 bg-foreground/[0.04] hover:bg-foreground/[0.08]"
-        >
-          {loading === "github" ? <Loader2 className="animate-spin" /> : <Github />}
-          {t.auth.oauth.github}
-        </Button>
-
-        <Button
-          variant="ghost"
-          disabled={loading !== null}
-          onClick={() => handleOAuth("google")}
-          className="w-full border-0 bg-foreground/[0.04] hover:bg-foreground/[0.08]"
-        >
-          {loading === "google" ? <Loader2 className="animate-spin" /> : <GoogleIcon />}
-          {t.auth.oauth.google}
-        </Button>
-      </div>
-    </>
-  );
-}