openship 0.1.0 → 0.1.1

package/apps/dashboard/src/context/ToastContext.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import React, { createContext, useState, useContext, ReactNode, useCallback, memo } from 'react';
+import styles from '@/styles/Toast.module.css';
+
+interface ToastContextProps {
+  showToast: (message: string, type: 'success' | 'error', title?: string) => void;
+}
+
+const ToastContext = createContext<ToastContextProps | undefined>(undefined);
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+};
+
+interface ToastProviderProps {
+  children: ReactNode;
+}
+
+interface ToastNotification {
+  id: string;
+  message: string;
+  type: 'success' | 'error';
+  title?: string;
+}
+
+// Memoized Toast component to prevent unnecessary re-renders
+const ToastItem = memo(({ toast, onRemove }: { toast: ToastNotification, onRemove: (id: string) => void }) => {
+  return (
+    <div className={`${styles.toastWrapper} ${styles[toast.type]}`}>
+      {toast.title && <h4 className={styles.toastTitle}>{toast.title}</h4>}
+      <p className={styles.toastMessage}>{toast.message}</p>
+      <button onClick={() => onRemove(toast.id)} className={styles.closeButton}>
+        ×
+      </button>
+    </div>
+  );
+});
+
+ToastItem.displayName = 'ToastItem';
+
+// Memoized toast container to prevent unnecessary re-renders
+const ToastContainer = memo(({ toasts, removeToast }: { toasts: ToastNotification[], removeToast: (id: string) => void }) => {
+  return (
+    <div className={styles.toastContainer}>
+      {toasts.map((toast) => (
+        <ToastItem key={toast.id} toast={toast} onRemove={removeToast} />
+      ))}
+    </div>
+  );
+});
+
+ToastContainer.displayName = 'ToastContainer';
+
+export const ToastProvider: React.FC<ToastProviderProps> = ({ children }) => {
+  const [toasts, setToasts] = useState<ToastNotification[]>([]);
+  const toastCounterRef = React.useRef(0);
+  const timeoutRefs = React.useRef<Map<string, NodeJS.Timeout>>(new Map());
+
+  // Generate truly unique ID using counter + timestamp
+  const generateUniqueId = useCallback(() => {
+    toastCounterRef.current += 1;
+    return `toast-${Date.now()}-${toastCounterRef.current}`;
+  }, []);
+
+  // Memoize the showToast function to prevent re-renders
+  const showToast = useCallback((message: string, type: 'success' | 'error', title?: string) => {
+    // Check for duplicate messages (prevent showing identical toasts)
+    setToasts((prev) => {
+      const isDuplicate = prev.some(
+        (toast) => toast.message === message && toast.type === type && toast.title === title
+      );
+      
+      if (isDuplicate) {
+        console.log('[Toast] Ignoring duplicate toast:', message);
+        return prev; // Don't add duplicate
+      }
+
+      const id = generateUniqueId();
+      
+      // Auto-remove the toast after 5 seconds
+      const timeoutId = setTimeout(() => {
+        setToasts((current) => current.filter((toast) => toast.id !== id));
+        timeoutRefs.current.delete(id);
+      }, 5000);
+      
+      // Store timeout reference for cleanup
+      timeoutRefs.current.set(id, timeoutId);
+      
+      return [...prev, { id, message, type, title }];
+    });
+  }, [generateUniqueId]);
+
+  // Memoize the removeToast function to prevent re-renders
+  const removeToast = useCallback((id: string) => {
+    // Clear the auto-remove timeout if it exists
+    const timeoutId = timeoutRefs.current.get(id);
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutRefs.current.delete(id);
+    }
+    
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+
+  // Cleanup all timeouts on unmount
+  React.useEffect(() => {
+    return () => {
+      timeoutRefs.current.forEach((timeoutId) => clearTimeout(timeoutId));
+      timeoutRefs.current.clear();
+    };
+  }, []);
+
+  // Value is memoized to prevent context consumers from re-rendering unnecessarily
+  const contextValue = React.useMemo(() => ({ showToast }), [showToast]);
+
+  return (
+    <ToastContext.Provider value={contextValue}>
+      {children}
+      <ToastContainer toasts={toasts} removeToast={removeToast} />
+    </ToastContext.Provider>
+  );
+};
+
+export default ToastProvider; 

package/apps/dashboard/src/context/deployment/index.ts

@@ -0,0 +1,3 @@
+export { useDeploymentConfig } from "./useDeploymentConfig";
+export { useDeploymentBuild } from "./useDeploymentBuild";
+export * from "./types";

package/apps/dashboard/src/context/deployment/types.ts

@@ -0,0 +1,183 @@
+import type { Terminal } from "@xterm/xterm";
+import type { FrameworkId, EnvironmentVariable } from "@/components/import-project/types";
+import type { ProjectType } from "@repo/core";
+import type { BuildLog } from "@/utils/deploymentPhaseDetector";
+
+// ─── Screenshots ─────────────────────────────────────────────────────────────
+
+export interface Screenshot {
+  url: string;
+  variants: Array<{ variant: string; url: string }>;
+  size: number;
+  mime: string;
+}
+
+// ─── Compose service (matches API response) ─────────────────────────────────
+
+export interface ComposeServiceInfo {
+  name: string;
+  image?: string;
+  build?: string;
+  ports: string[];
+  dependsOn: string[];
+  environment: Record<string, string>;
+  volumes: string[];
+  // Per-service exposure settings (set by user in UI)
+  exposed?: boolean;
+  exposedPort?: string;
+  domain?: string;
+  customDomain?: string;
+  domainType?: "free" | "custom";
+}
+
+// ─── Build Strategy ──────────────────────────────────────────────────────────
+
+export type BuildStrategy = "server" | "local";
+
+// ─── Config ──────────────────────────────────────────────────────────────────
+
+export interface DeploymentConfig {
+  projectName: string;
+  repo: string;
+  owner: string;
+  /** Absolute path for local projects (mutually exclusive with owner/repo git source) */
+  localPath?: string;
+  /** Where the build runs: "server" (default, build in cloud/workspace) or "local" (build on host machine) */
+  buildStrategy: BuildStrategy;
+  projectType: ProjectType;
+  framework: FrameworkId;
+  detectedFramework: FrameworkId | null;
+  packageManager: string;
+  buildImage: string;
+  domain: string;
+  customDomain: string;
+  domainType: "free" | "custom";
+  envVars: EnvironmentVariable[];
+  branch: string;
+  branches: string[];
+  services: ComposeServiceInfo[];
+  options: {
+    buildCommand: string;
+    outputDirectory: string;
+    productionPaths: string;
+    installCommand: string;
+    startCommand: string;
+    productionPort: string;
+    rootDirectory: string;
+    hasServer: boolean;
+    hasBuild: boolean;
+  };
+}
+
+export const DEFAULT_CONFIG: DeploymentConfig = {
+  projectName: "",
+  repo: "",
+  owner: "",
+  localPath: undefined,
+  buildStrategy: "server",
+  projectType: "app",
+  framework: "nextjs",
+  detectedFramework: null,
+  packageManager: "npm",
+  buildImage: "node:22",
+  domain: "",
+  customDomain: "",
+  domainType: "free",
+  branch: "main",
+  branches: [],
+  services: [],
+  options: {
+    buildCommand: "",
+    outputDirectory: "",
+    productionPaths: "",
+    installCommand: "",
+    startCommand: "",
+    productionPort: "",
+    rootDirectory: "./",
+    hasServer: true,
+    hasBuild: true,
+  },
+  envVars: [],
+};
+
+// ─── State ───────────────────────────────────────────────────────────────────
+
+export interface DeploymentState {
+  deploymentId: string | null;
+  isDeploying: boolean;
+  isStopping: boolean;
+  deploymentSuccess: boolean;
+  deploymentFailed: boolean;
+  deploymentCanceled: boolean;
+  failureMessage: string;
+  buildLogs: BuildLog[];
+  currentProgress: number;
+  currentStepIndex: number;
+  screenshots: Screenshot[];
+  projectId: string | null;
+  /** Final build duration in ms (set when build finishes). */
+  buildDurationMs: number | null;
+  /** ISO timestamp when the build started (for elapsed timer). */
+  buildStartedAt: string | null;
+}
+
+export const INITIAL_STATE: DeploymentState = {
+  deploymentId: null,
+  isDeploying: false,
+  isStopping: false,
+  deploymentSuccess: false,
+  deploymentFailed: false,
+  deploymentCanceled: false,
+  failureMessage: "",
+  buildLogs: [],
+  currentProgress: 0,
+  currentStepIndex: 0,
+  screenshots: [],
+  projectId: null,
+  buildDurationMs: null,
+  buildStartedAt: null,
+};
+
+// ─── Status ──────────────────────────────────────────────────────────────────
+
+export type DeploymentStatus = "building" | "deploying" | "ready" | "failed" | "cancelled";
+
+// ─── Context type ────────────────────────────────────────────────────────────
+
+export interface DeploymentContextType {
+  // Single source of truth
+  config: DeploymentConfig;
+  state: DeploymentState;
+  terminalRef: React.MutableRefObject<Terminal | null>;
+  canStreamContainer: React.MutableRefObject<boolean>;
+
+  // Config updates
+  updateConfig: (updates: Partial<DeploymentConfig>) => void;
+  updateOptions: (updates: Partial<DeploymentConfig["options"]>) => void;
+
+  // Prepare (resolve project info)
+  initializeFromRepo: (
+    owner: string,
+    repo: string,
+    force?: string,
+  ) => Promise<{ success: boolean; error?: string; errorType?: string; buildInProgress?: boolean }>;
+  initializeFromLocal: (
+    path: string,
+  ) => Promise<{ success: boolean; error?: string; errorType?: string }>;
+
+  // Build lifecycle
+  startDeployment: () => Promise<string | null>;
+  connectToBuild: (deploymentId?: string) => Promise<void>;
+  loadBuildSession: (deploymentId: string) => Promise<{ success: boolean; error?: string }>;
+  stopDeployment: () => Promise<void>;
+  redeploy: (deploymentId: string) => Promise<string | null>;
+  reset: () => void;
+
+  // Terminal
+  onTerminalReady: () => void;
+
+  // Internal
+  _setContainerFailed: (message: string) => void;
+  steps: { label: string; icon: string }[];
+  deploymentStatus: DeploymentStatus;
+}