appclean 1.9.0 → 2.0.2

package/src/ui/client/styles/variables.css

@@ -0,0 +1,140 @@
+/* Design System - CSS Variables */
+
+:root {
+  /* Colors - Primary */
+  --color-primary: #3b82f6;
+  --color-primary-hover: #2563eb;
+  --color-primary-light: #dbeafe;
+  --color-primary-dark: #1e40af;
+
+  /* Colors - Semantic */
+  --color-success: #10b981;
+  --color-success-light: #d1fae5;
+  --color-warning: #f59e0b;
+  --color-warning-light: #fef3c7;
+  --color-danger: #ef4444;
+  --color-danger-light: #fee2e2;
+  --color-info: #0ea5e9;
+  --color-info-light: #cffafe;
+
+  /* Colors - Neutral */
+  --color-neutral-0: #ffffff;
+  --color-neutral-50: #f9fafb;
+  --color-neutral-100: #f3f4f6;
+  --color-neutral-200: #e5e7eb;
+  --color-neutral-300: #d1d5db;
+  --color-neutral-400: #9ca3af;
+  --color-neutral-500: #6b7280;
+  --color-neutral-600: #4b5563;
+  --color-neutral-700: #374151;
+  --color-neutral-800: #1f2937;
+  --color-neutral-900: #111827;
+
+  /* Background & Surface */
+  --bg-primary: var(--color-neutral-0);
+  --bg-secondary: var(--color-neutral-50);
+  --bg-hover: var(--color-neutral-100);
+  --text-primary: var(--color-neutral-900);
+  --text-secondary: var(--color-neutral-600);
+  --text-muted: var(--color-neutral-500);
+  --border-color: var(--color-neutral-200);
+  --border-color-hover: var(--color-neutral-300);
+
+  /* Dark Mode */
+  --dark-bg-primary: var(--color-neutral-900);
+  --dark-bg-secondary: var(--color-neutral-800);
+  --dark-bg-hover: var(--color-neutral-700);
+  --dark-text-primary: var(--color-neutral-0);
+  --dark-text-secondary: var(--color-neutral-300);
+  --dark-text-muted: var(--color-neutral-400);
+  --dark-border-color: var(--color-neutral-700);
+  --dark-border-color-hover: var(--color-neutral-600);
+
+  /* Typography */
+  --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
+
+  /* Font Sizes */
+  --font-xs: 0.75rem;     /* 12px */
+  --font-sm: 0.875rem;    /* 14px */
+  --font-base: 1rem;      /* 16px */
+  --font-lg: 1.125rem;    /* 18px */
+  --font-xl: 1.25rem;     /* 20px */
+  --font-2xl: 1.5rem;     /* 24px */
+  --font-3xl: 1.875rem;   /* 30px */
+
+  /* Font Weights */
+  --fw-regular: 400;
+  --fw-medium: 500;
+  --fw-semibold: 600;
+  --fw-bold: 700;
+
+  /* Line Heights */
+  --lh-tight: 1.25;
+  --lh-normal: 1.5;
+  --lh-relaxed: 1.625;
+  --lh-loose: 2;
+
+  /* Spacing Scale (4px base unit) */
+  --space-0: 0;
+  --space-1: 0.25rem;   /* 4px */
+  --space-2: 0.5rem;    /* 8px */
+  --space-3: 0.75rem;   /* 12px */
+  --space-4: 1rem;      /* 16px */
+  --space-6: 1.5rem;    /* 24px */
+  --space-8: 2rem;      /* 32px */
+  --space-12: 3rem;     /* 48px */
+  --space-16: 4rem;     /* 64px */
+
+  /* Border Radius */
+  --radius-none: 0;
+  --radius-sm: 0.375rem;    /* 6px */
+  --radius-md: 0.5rem;      /* 8px */
+  --radius-lg: 0.75rem;     /* 12px */
+  --radius-xl: 1rem;        /* 16px */
+  --radius-2xl: 1.5rem;     /* 24px */
+  --radius-full: 9999px;    /* Pill-shaped */
+
+  /* Shadows */
+  --shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+  /* Transitions */
+  --transition-fast: 150ms ease-out;
+  --transition-normal: 250ms ease-out;
+  --transition-slow: 350ms ease-out;
+
+  /* Layout */
+  --max-width-sm: 640px;
+  --max-width-md: 768px;
+  --max-width-lg: 1024px;
+  --max-width-xl: 1280px;
+  --max-width-2xl: 1536px;
+
+  /* Z-index */
+  --z-hide: -1;
+  --z-auto: auto;
+  --z-base: 0;
+  --z-dropdown: 1000;
+  --z-sticky: 1020;
+  --z-fixed: 1030;
+  --z-modal-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+}
+
+/* Dark mode */
+body.dark-mode {
+  --bg-primary: var(--dark-bg-primary);
+  --bg-secondary: var(--dark-bg-secondary);
+  --bg-hover: var(--dark-bg-hover);
+  --text-primary: var(--dark-text-primary);
+  --text-secondary: var(--dark-text-secondary);
+  --text-muted: var(--dark-text-muted);
+  --border-color: var(--dark-border-color);
+  --border-color-hover: var(--dark-border-color-hover);
+}

package/src/ui/client/utils/events.ts

@@ -0,0 +1,74 @@
+/**
+ * Simple Event Emitter for Reactive State Management
+ * Provides publish/subscribe pattern for state changes
+ */
+
+export type EventListener<T = any> = (data: T) => void;
+
+export class EventEmitter<T = any> {
+  private listeners: EventListener<T>[] = [];
+
+  on(listener: EventListener<T>): () => void {
+    this.listeners.push(listener);
+
+    // Return unsubscribe function
+    return () => {
+      this.listeners = this.listeners.filter((l) => l !== listener);
+    };
+  }
+
+  once(listener: EventListener<T>): void {
+    const unsubscribe = this.on((data: T) => {
+      listener(data);
+      unsubscribe();
+    });
+  }
+
+  emit(data: T): void {
+    this.listeners.forEach((listener) => {
+      try {
+        listener(data);
+      } catch (error) {
+        console.error('Event listener error:', error);
+      }
+    });
+  }
+
+  clear(): void {
+    this.listeners = [];
+  }
+
+  getListenerCount(): number {
+    return this.listeners.length;
+  }
+}
+
+/**
+ * Base Store class with reactive updates
+ */
+export abstract class Store<T> {
+  protected state: T;
+  protected stateChanged = new EventEmitter<T>();
+
+  constructor(initialState: T) {
+    this.state = initialState;
+  }
+
+  getState(): T {
+    return this.state;
+  }
+
+  setState(newState: Partial<T>): void {
+    this.state = { ...this.state, ...newState };
+    this.stateChanged.emit(this.state);
+  }
+
+  subscribe(listener: EventListener<T>): () => void {
+    return this.stateChanged.on(listener);
+  }
+
+  protected updateState(updater: (state: T) => T): void {
+    this.state = updater(this.state);
+    this.stateChanged.emit(this.state);
+  }
+}

package/src/ui/client/utils/formatting.ts

@@ -0,0 +1,157 @@
+/**
+ * Formatting utilities for displaying data
+ */
+
+/**
+ * Format bytes to human-readable format
+ */
+export function formatBytes(bytes: number, decimals = 2): string {
+  if (bytes === 0) return '0 Bytes';
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
+/**
+ * Format date to readable string
+ */
+export function formatDate(timestamp: number | string | Date): string {
+  const date = new Date(timestamp);
+  const today = new Date();
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+
+  const isToday = date.toDateString() === today.toDateString();
+  const isYesterday = date.toDateString() === yesterday.toDateString();
+
+  if (isToday) {
+    return 'Today at ' + date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
+  }
+
+  if (isYesterday) {
+    return 'Yesterday at ' + date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
+  }
+
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: date.getFullYear() !== today.getFullYear() ? 'numeric' : undefined,
+  });
+}
+
+/**
+ * Format relative time (e.g., "2 hours ago")
+ */
+export function formatRelativeTime(timestamp: number | string | Date): string {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSecs = Math.floor(diffMs / 1000);
+  const diffMins = Math.floor(diffSecs / 60);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+
+  if (diffSecs < 60) return 'just now';
+  if (diffMins < 60) return `${diffMins} minute${diffMins > 1 ? 's' : ''} ago`;
+  if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
+  if (diffDays < 7) return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
+
+  return formatDate(timestamp);
+}
+
+/**
+ * Truncate string to max length with ellipsis
+ */
+export function truncate(str: string, maxLength: number): string {
+  if (str.length <= maxLength) return str;
+  return str.slice(0, maxLength - 3) + '...';
+}
+
+/**
+ * Capitalize first letter
+ */
+export function capitalize(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+/**
+ * Format install method name for display
+ */
+export function formatInstallMethod(method: string): string {
+  const methodMap: Record<string, string> = {
+    npm: 'npm',
+    yarn: 'Yarn',
+    pnpm: 'pnpm',
+    brew: 'Homebrew',
+    apt: 'apt',
+    yum: 'yum',
+    dnf: 'dnf',
+    custom: 'Custom',
+  };
+
+  return methodMap[method] || capitalize(method);
+}
+
+/**
+ * Get color for install method badge
+ */
+export function getMethodBadgeColor(method: string): string {
+  const colorMap: Record<string, string> = {
+    npm: 'badge-primary',
+    yarn: 'badge-primary',
+    pnpm: 'badge-primary',
+    brew: 'badge-success',
+    apt: 'badge-warning',
+    yum: 'badge-warning',
+    dnf: 'badge-warning',
+    custom: 'badge-neutral',
+  };
+
+  return colorMap[method] || 'badge-neutral';
+}
+
+/**
+ * Format percentage for display
+ */
+export function formatPercent(value: number, decimals = 1): string {
+  return parseFloat(value.toFixed(decimals)) + '%';
+}
+
+/**
+ * Debounce function for search/filter
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout | null = null;
+
+  return function (...args: Parameters<T>) {
+    if (timeout) clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      func(...args);
+    }, wait);
+  };
+}
+
+/**
+ * Throttle function
+ */
+export function throttle<T extends (...args: any[]) => any>(
+  func: T,
+  limit: number
+): (...args: Parameters<T>) => void {
+  let lastRun = 0;
+
+  return function (...args: Parameters<T>) {
+    const now = Date.now();
+    if (now - lastRun >= limit) {
+      lastRun = now;
+      func(...args);
+    }
+  };
+}

package/src/ui/client/utils/router.ts

@@ -0,0 +1,161 @@
+/**
+ * Simple Hash-Based Router for SPA
+ */
+
+export type RouteHandler = (params: Record<string, string>) => void;
+
+export interface Route {
+  path: string;
+  handler: RouteHandler;
+  title?: string;
+}
+
+export class Router {
+  private routes: Route[] = [];
+  private currentRoute: Route | null = null;
+  private onRouteChange: ((route: Route) => void) | null = null;
+
+  constructor() {
+    this.listenToHashChanges();
+  }
+
+  /**
+   * Register a route
+   */
+  register(path: string, handler: RouteHandler, title?: string): void {
+    this.routes.push({ path, handler, title });
+  }
+
+  /**
+   * Navigate to a route
+   */
+  navigate(path: string): void {
+    window.location.hash = `#/${path}`.replace('##', '#');
+  }
+
+  /**
+   * Get current route path
+   */
+  getCurrentPath(): string {
+    return window.location.hash.slice(2) || '';
+  }
+
+  /**
+   * Listen to hash changes and trigger handlers
+   */
+  private listenToHashChanges(): void {
+    window.addEventListener('hashchange', () => {
+      this.route();
+    });
+
+    // Initial route on load
+    this.route();
+  }
+
+  /**
+   * Route the current hash to a handler
+   */
+  private route(): void {
+    const path = this.getCurrentPath();
+    const route = this.matchRoute(path);
+
+    if (route) {
+      const params = this.extractParams(route.path, path);
+      this.currentRoute = route;
+
+      if (route.title) {
+        document.title = route.title;
+      }
+
+      try {
+        route.handler(params);
+      } catch (error) {
+        console.error('Route handler error:', error);
+      }
+
+      if (this.onRouteChange) {
+        this.onRouteChange(route);
+      }
+    } else {
+      console.warn(`No route found for: ${path}`);
+    }
+  }
+
+  /**
+   * Match a path to a registered route
+   */
+  private matchRoute(path: string): Route | null {
+    // Exact match first
+    const exactMatch = this.routes.find((r) => r.path === path || r.path === `/${path}`);
+    if (exactMatch) return exactMatch;
+
+    // Dynamic route match
+    for (const route of this.routes) {
+      if (this.pathMatches(route.path, path)) {
+        return route;
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Check if a route path matches a given path
+   * Supports dynamic segments like /apps/:appName
+   */
+  private pathMatches(routePath: string, actualPath: string): boolean {
+    const routeParts = routePath.split('/').filter(Boolean);
+    const actualParts = actualPath.split('/').filter(Boolean);
+
+    if (routeParts.length !== actualParts.length) {
+      return false;
+    }
+
+    return routeParts.every((part, i) => {
+      return part.startsWith(':') || part === actualParts[i];
+    });
+  }
+
+  /**
+   * Extract params from a path
+   * Example: /apps/:appName with path /apps/myapp returns { appName: 'myapp' }
+   */
+  private extractParams(routePath: string, actualPath: string): Record<string, string> {
+    const params: Record<string, string> = {};
+    const routeParts = routePath.split('/').filter(Boolean);
+    const actualParts = actualPath.split('/').filter(Boolean);
+
+    routeParts.forEach((part, i) => {
+      if (part.startsWith(':')) {
+        const paramName = part.slice(1);
+        params[paramName] = decodeURIComponent(actualParts[i]);
+      }
+    });
+
+    return params;
+  }
+
+  /**
+   * Register a callback for route changes
+   */
+  onchange(callback: (route: Route) => void): void {
+    this.onRouteChange = callback;
+  }
+
+  /**
+   * Get all registered routes
+   */
+  getRoutes(): Route[] {
+    return this.routes;
+  }
+
+  /**
+   * Get current route
+   */
+  getCurrentRoute(): Route | null {
+    return this.currentRoute;
+  }
+}
+
+// Export singleton instance
+export const router = new Router();