openship 0.1.0 → 0.1.1

package/apps/dashboard/src/components/ui/Modal.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { useEffect, useState, type ReactNode } from 'react';
+import { X } from 'lucide-react';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  width?: string;
+  maxWidth?: string;
+  minWidth?: string;
+  maxHeight?: string;
+  minHeight?: string;
+  height?: string;
+  showCloseButton?: boolean;
+  closable?: boolean; // If false, prevents backdrop clicks from closing
+  footer?: ReactNode;
+  zIndex?: number; // Support custom z-index for modal layering
+  overflow?: 'hidden' | 'auto';
+}
+
+export function Modal({
+  isOpen,
+  onClose,
+  children,
+  width = 'auto',
+  maxWidth = '80vw',
+  minWidth = 'auto',
+  minHeight = 'auto',
+  maxHeight = '90vh',
+  height = 'auto',
+  showCloseButton = true,
+  closable = true,
+  footer = null,
+  zIndex = 10000,
+  overflow = 'auto'
+}: ModalProps) {
+  console.log('Modal props:', { isOpen, onClose, children, width, maxWidth, maxHeight, height, showCloseButton, footer, zIndex });
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      // Use requestAnimationFrame to ensure initial state is painted before animation
+      const frame = requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setIsVisible(true);
+        });
+      });
+      return () => cancelAnimationFrame(frame);
+    } else {
+      setIsVisible(false);
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (closable && e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  const handleBackdropDivClick = () => {
+    if (closable) {
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 flex items-center justify-center p-4"
+      style={{ zIndex }}
+      onClick={handleBackdropClick}
+    >
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-300"
+        style={{ opacity: isVisible ? 1 : 0 }}
+        onClick={handleBackdropDivClick}
+      />
+
+      {/* Modal Container */}
+      <div
+        className="relative w-full bg-card rounded-2xl shadow-2xl flex flex-col transition-all duration-300 !overflow-x-hidden"
+        style={{
+          width,
+          overflow,
+          maxWidth,
+          maxHeight,
+          height,
+          minWidth,
+          minHeight,
+          opacity: isVisible ? 1 : 0,
+          transform: isVisible ? 'scale(1) translateY(0)' : 'scale(0.95) translateY(10px)'
+        }}
+      >
+        {/* Close Button */}
+        {showCloseButton && (
+          <button
+            onClick={onClose}
+            className="absolute top-4 right-4 z-10 p-1.5 rounded-lg bg-card hover:bg-muted transition-colors text-muted-foreground hover:text-foreground shadow-sm"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        )}
+
+        {/* Content */}
+        <div className={`w-full h-full flex flex-col`}>
+          {children}
+        </div>
+        {footer}
+      </div>
+    </div>
+  );
+}
+

package/apps/dashboard/src/components/ui/PageContainer.tsx

@@ -0,0 +1,12 @@
+interface PageContainerProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function PageContainer({ children, className = "" }: PageContainerProps) {
+  return (
+    <div className={`max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8 py-6 ${className}`}>
+      {children}
+    </div>
+  );
+}

package/apps/dashboard/src/components/ui/SectionContainer.jsx

@@ -0,0 +1,7 @@
+export const SectionContainer = ({ children, className = '' }) => {
+    return (
+        <div className={`max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-5 ${className}`}>
+            {children}
+        </div>
+    )
+}

package/apps/dashboard/src/components/ui/SlidingToggle.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import React, { useRef, useEffect, useState } from "react";
+
+export type ToggleOption<T = string> = {
+  value: T;
+  label?: string;
+  icon?: React.ReactNode;
+};
+
+export interface SlidingToggleProps<T = string> {
+  options: ToggleOption<T>[];
+  value: T;
+  onChange: (value: T) => void;
+  variant?: "rounded" | "square";
+  selectedBg?: string;
+  selectedTextColor?: string;
+  unselectedTextColor?: string;
+  backgroundColor?: string;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+export function SlidingToggle<T extends string = string>({
+  options,
+  value,
+  onChange,
+  variant = "rounded",
+  selectedBg = "bg-primary",
+  selectedTextColor = "text-primary-foreground",
+  unselectedTextColor = "text-muted-foreground",
+  backgroundColor = "bg-card",
+  size = "md",
+  className = "",
+}: SlidingToggleProps<T>) {
+  const selectedIndex = options.findIndex((opt) => opt.value === value);
+  const buttonsRef = useRef<(HTMLButtonElement | null)[]>([]);
+  const [pillStyle, setPillStyle] = useState({ width: 0, left: 0 });
+
+  // Size configurations
+  const sizeConfig = {
+    sm: {
+      buttonSize: "w-8 h-8",
+      iconSize: "w-3.5 h-3.5",
+      textSize: "text-xs",
+      gap: "gap-1.5",
+    },
+    md: {
+      buttonSize: "w-10 h-10",
+      iconSize: "w-4 h-4",
+      textSize: "text-sm",
+      gap: "gap-2",
+    },
+    lg: {
+      buttonSize: "w-12 h-12",
+      iconSize: "w-5 h-5",
+      textSize: "text-base",
+      gap: "gap-2",
+    },
+  };
+
+  const config = sizeConfig[size];
+
+  // Border radius based on variant
+  const borderRadius = variant === "rounded" ? "rounded-full" : "rounded-xl";
+  const pillRadius = variant === "rounded" ? "rounded-full" : "rounded-lg";
+
+  // Update pill position when selection changes
+  useEffect(() => {
+    const selectedButton = buttonsRef.current[selectedIndex];
+    if (selectedButton) {
+      setPillStyle({
+        width: selectedButton.offsetWidth,
+        left: selectedButton.offsetLeft,
+      });
+    }
+  }, [selectedIndex, options]);
+
+  return (
+    <div
+      className={`relative inline-flex items-center ${backgroundColor} ${borderRadius} p-1 gap-1.5 ${className}`}
+    >
+      {/* Sliding Background Pill */}
+      <div
+        className={`absolute ${selectedBg} ${pillRadius} -ml-1 transition-all duration-300 ease-out shadow-sm`}
+        style={{
+          width: `${pillStyle.width}px`,
+          height: 'calc(100% - 0.5rem)',
+          transform: `translateX(${pillStyle.left}px)`,
+          top: '0.25rem',
+        }}
+      />
+
+      {/* Option Buttons */}
+      {options.map((option, index) => {
+        const isSelected = option.value === value;
+        const hasLabel = !!option.label;
+        const hasIcon = !!option.icon;
+
+        return (
+          <button
+            key={option.value}
+            ref={(el) => { buttonsRef.current[index] = el; }}
+            onClick={() => onChange(option.value)}
+            className={`relative z-10 ${
+              hasLabel ? 'px-4 py-2' : config.buttonSize
+            } transition-all duration-300 ${pillRadius} ${
+              isSelected ? selectedTextColor : unselectedTextColor
+            } hover:opacity-80 font-medium ${config.textSize} flex items-center justify-center flex-shrink-0`}
+          >
+            <div
+              className={`flex items-center justify-center ${
+                hasLabel && hasIcon ? config.gap : ""
+              }`}
+            >
+              {hasIcon && (
+                <span className={config.iconSize}>
+                  {option.icon}
+                </span>
+              )}
+              {hasLabel && <span className="whitespace-nowrap">{option.label}</span>}
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/apps/dashboard/src/components/ui/Toast.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import styles from './Toast.module.css';
+
+interface ToastProps {
+  message: string;
+  type: 'success' | 'error';
+  onClose: () => void;
+}
+
+const Toast: React.FC<ToastProps> = ({ message, type, onClose }) => {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onClose();
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, [onClose]);
+
+  return (
+    <div className={`${styles.toast} ${styles[type]}`}>
+      <p>{message}</p>
+      <button onClick={onClose} className={styles.closeButton}>×</button>
+    </div>
+  );
+};
+
+export default Toast; 

package/apps/dashboard/src/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium cursor-pointer transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/80",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background text-foreground/60 hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "text-foreground/60 hover:bg-accent hover:text-accent-foreground",
+        link:
+          "text-foreground underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-8 rounded-lg px-3 text-xs",
+        lg: "h-12 rounded-xl px-8 text-[15px]",
+        icon: "h-9 w-9 rounded-xl",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/apps/dashboard/src/components/ui/card.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+/* ------------------------------------------------------------------ */
+/*  Card                                                              */
+/* ------------------------------------------------------------------ */
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("rounded-2xl border border-border bg-card text-card-foreground shadow-sm", className)}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("font-semibold leading-none tracking-tight", className)} {...props} />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+));
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/apps/dashboard/src/components/ui/input.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Input = React.forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement>
+>(({ className, type, ...props }, ref) => (
+  <input
+    type={type}
+    className={cn(
+      "flex h-11 w-full rounded-xl border border-input bg-background px-3.5 py-2 text-sm text-foreground transition-all duration-150 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+      className,
+    )}
+    ref={ref}
+    {...props}
+  />
+));
+Input.displayName = "Input";
+
+export { Input };

package/apps/dashboard/src/components/ui/label.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Label = React.forwardRef<
+  HTMLLabelElement,
+  React.LabelHTMLAttributes<HTMLLabelElement>
+>(({ className, ...props }, ref) => (
+  <label
+    ref={ref}
+    className={cn(
+      "text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className,
+    )}
+    {...props}
+  />
+));
+Label.displayName = "Label";
+
+export { Label };

package/apps/dashboard/src/components/ui/select.tsx

@@ -0,0 +1,10 @@
+interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}
+
+export const Select = ({ children, className = "", ...props }: SelectProps) => (
+  <select
+    className={`w-full px-3 py-2 bg-background border border-border rounded-md text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent ${className}`}
+    {...props}
+  >
+    {children}
+  </select>
+);

package/apps/dashboard/src/components/ui/textarea.tsx

@@ -0,0 +1,9 @@
+interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+export const Textarea = ({ className = "", ...props }: TextareaProps) => (
+  <textarea
+    className={`w-full px-3 py-2 bg-background border border-border rounded-md text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent resize-none ${className}`}
+    {...props}
+  />
+);

package/apps/dashboard/src/constants/lang-colors.ts

@@ -0,0 +1,25 @@
+/**
+ * GitHub language → color mapping.
+ * Source: https://github.com/github-linguist/linguist/blob/main/lib/linguist/languages.yml
+ */
+export const LANG_COLORS: Record<string, string> = {
+  TypeScript: "#3178c6",
+  JavaScript: "#f1e05a",
+  Python: "#3572A5",
+  Rust: "#dea584",
+  Go: "#00ADD8",
+  Java: "#b07219",
+  Ruby: "#701516",
+  PHP: "#4F5D95",
+  CSS: "#563d7c",
+  HTML: "#e34c26",
+  Vue: "#41b883",
+  Svelte: "#ff3e00",
+  Swift: "#F05138",
+  Kotlin: "#A97BFF",
+  C: "#555555",
+  "C++": "#f34b7d",
+  "C#": "#178600",
+  Shell: "#89e051",
+  Dart: "#00B4AB",
+};

package/apps/dashboard/src/constants/mock.ts

@@ -0,0 +1,38 @@
+/**
+ * Shared domain types used across the dashboard.
+ *
+ * Lightweight Project / Deployment shapes used by listing pages and
+ * card components. Richer deployment data lives in
+ *   @/app/(dashboard)/deployments/types.ts
+ */
+
+export interface Project {
+  id: string;
+  name: string;
+  description: string;
+  framework: string;
+  url: string;
+  status: "live" | "paused" | "draft";
+  lastDeployed: string;
+  domain: string;
+  isCustomDomain: boolean;
+  deploymentCount: number;
+  visitors: string;
+  repo: string;
+  /** Latest deployment ID (any status) — used to navigate drafts */
+  latestDeploymentId?: string | null;
+}
+
+/** Simplified deployment record used in project-scoped deployment cards. */
+export interface Deployment {
+  id: string | number;
+  projectName: string;
+  /** Short commit hash or identifier */
+  commit: string;
+  status: "success" | "failed" | "building" | "pending" | "canceled" | "cancelled";
+  branch: string;
+  createdAt: string;
+  /** Human-readable build duration, e.g. "1m 23s" */
+  duration: string;
+  url: string;
+}

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

@@ -0,0 +1,91 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useCallback,
+  type ReactNode,
+} from "react";
+import { useSession, signOut } from "@/lib/auth-client";
+import { useRouter } from "next/navigation";
+
+/* ------------------------------------------------------------------ */
+/*  Types                                                             */
+/* ------------------------------------------------------------------ */
+
+export type AuthUser = {
+  id: string;
+  name: string;
+  email: string;
+  emailVerified: boolean;
+  image?: string | null;
+  role?: string;
+};
+
+type AuthState = {
+  /** The authenticated user, or `null` when logged-out / loading. */
+  user: AuthUser | null;
+  /** Whether a session request is currently in flight. */
+  isLoading: boolean;
+  /** Shorthand: `!!user` — safe to use after `isLoading` is false. */
+  isLoggedIn: boolean;
+  /** Sign the user out and redirect to `/login`. */
+  logout: () => Promise<void>;
+};
+
+/* ------------------------------------------------------------------ */
+/*  Context                                                           */
+/* ------------------------------------------------------------------ */
+
+const AuthContext = createContext<AuthState | undefined>(undefined);
+
+/* ------------------------------------------------------------------ */
+/*  Provider                                                          */
+/* ------------------------------------------------------------------ */
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const router = useRouter();
+
+  /*
+   * `useSession()` is Better Auth's React hook.
+   * It sends the httpOnly cookie to the API and returns:
+   *   data  – { user, session } | null
+   *   isPending – true while the request is in flight
+   *   error – set if the request failed
+   */
+  const { data: session, isPending } = useSession();
+
+  const user: AuthUser | null = session?.user ?? null;
+  const isLoading = isPending;
+  const isLoggedIn = !!user;
+
+  const logout = useCallback(async () => {
+    await signOut();
+    router.push("/login");
+  }, [router]);
+
+  return (
+    <AuthContext.Provider value={{ user, isLoading, isLoggedIn, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Hook                                                              */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Access the current authentication state from any client component.
+ *
+ * ```tsx
+ * const { user, isLoggedIn, isLoading, logout } = useAuth();
+ * ```
+ */
+export function useAuth(): AuthState {
+  const ctx = useContext(AuthContext);
+  if (ctx === undefined) {
+    throw new Error("useAuth must be used within an <AuthProvider>");
+  }
+  return ctx;
+}