@vizzly-testing/cli 0.1.0

package/dist/utils/logger-factory.js

@@ -0,0 +1,76 @@
+/**
+ * Logger Factory
+ * Centralized logger creation with consistent patterns
+ */
+
+import { createLogger } from './logger.js';
+import { getLogLevel } from './environment-config.js';
+
+/**
+ * Create a service logger with consistent naming and options
+ * @param {string} serviceName - Name of the service (e.g., 'TDD', 'SERVER', 'API')
+ * @param {Object} options - Logger options
+ * @returns {Logger} Configured logger instance
+ */
+export function createServiceLogger(serviceName, options = {}) {
+  return createLogger({
+    level: options.level || getLogLevel(),
+    verbose: options.verbose || false,
+    silent: options.silent || false,
+    colors: options.colors !== false,
+    logFile: options.logFile,
+    prefix: serviceName,
+    ...options
+  });
+}
+
+/**
+ * Create a component logger for CLI commands and utilities
+ * @param {string} componentName - Name of the component
+ * @param {Object} options - Logger options
+ * @returns {Logger} Configured logger instance
+ */
+export function createComponentLogger(componentName, options = {}) {
+  return createLogger({
+    level: options.level || 'info',
+    verbose: options.verbose || false,
+    silent: options.silent || false,
+    colors: options.colors !== false,
+    logFile: options.logFile,
+    prefix: componentName,
+    ...options
+  });
+}
+
+/**
+ * Create a basic logger with standard defaults
+ * @param {Object} options - Logger options
+ * @returns {Logger} Configured logger instance
+ */
+export function createStandardLogger(options = {}) {
+  return createLogger({
+    level: options.level || 'info',
+    verbose: options.verbose || false,
+    silent: options.silent || false,
+    colors: options.colors !== false,
+    logFile: options.logFile,
+    ...options
+  });
+}
+
+/**
+ * Create a logger for uploader service with specific defaults
+ * @param {Object} options - Logger options
+ * @returns {Logger} Configured logger instance
+ */
+export function createUploaderLogger(options = {}) {
+  return createLogger({
+    level: options.logLevel || 'info',
+    verbose: options.verbose || false,
+    silent: options.silent || false,
+    colors: options.colors !== false,
+    logFile: options.logFile,
+    prefix: 'UPLOADER',
+    ...options
+  });
+}

package/dist/utils/logger.js

@@ -0,0 +1,231 @@
+import { writeFileSync, appendFileSync, mkdirSync } from 'fs';
+import { join, dirname } from 'path';
+import { getEnvironmentDetails } from '../utils/environment.js';
+import { getLogLevel } from './environment-config.js';
+
+/**
+ * Structured logger with multiple output targets and log levels
+ */
+export class Logger {
+  constructor(options = {}) {
+    this.level = options.level || 'info';
+    this.logFile = options.logFile;
+    this.verbose = options.verbose || false;
+    this.silent = options.silent || false;
+    this.colors = options.colors !== false; // Default to true unless explicitly disabled
+
+    this.levels = {
+      error: 0,
+      warn: 1,
+      info: 2,
+      debug: 3
+    };
+
+    // Initialize log file if specified
+    if (this.logFile) {
+      this.initLogFile();
+    }
+  }
+
+  /**
+   * Initialize log file with session header
+   */
+  initLogFile() {
+    try {
+      mkdirSync(dirname(this.logFile), {
+        recursive: true
+      });
+      const sessionHeader = {
+        timestamp: new Date().toISOString(),
+        session_start: true,
+        environment: getEnvironmentDetails(),
+        pid: process.pid,
+        node_version: process.version,
+        platform: process.platform
+      };
+      writeFileSync(this.logFile, JSON.stringify(sessionHeader) + '\n');
+    } catch (error) {
+      console.error('Failed to initialize log file:', error.message);
+    }
+  }
+
+  /**
+   * Check if message should be logged at current level
+   */
+  shouldLog(level) {
+    return this.levels[level] <= this.levels[this.level];
+  }
+
+  /**
+   * Log a message with specified level
+   */
+  log(level, message, data = {}) {
+    if (!this.shouldLog(level)) return;
+    const logEntry = {
+      timestamp: new Date().toISOString(),
+      level,
+      message,
+      ...data
+    };
+
+    // Write to log file if configured
+    if (this.logFile) {
+      try {
+        appendFileSync(this.logFile, JSON.stringify(logEntry) + '\n');
+      } catch {
+        // Silently fail to avoid infinite loops
+      }
+    }
+
+    // Output to console unless silent
+    if (!this.silent) {
+      this.outputToConsole(level, message, data);
+    }
+  }
+
+  /**
+   * Output formatted message to console
+   */
+  outputToConsole(level, message, data) {
+    const prefix = this.getColoredPrefix(level);
+    const formattedMessage = `${prefix} ${message}`;
+
+    // Use appropriate console method
+    switch (level) {
+      case 'error':
+        console.error(formattedMessage);
+        if (this.verbose && data.stack) {
+          console.error(data.stack);
+        }
+        break;
+      case 'warn':
+        console.warn(formattedMessage);
+        break;
+      case 'debug':
+        if (this.verbose) {
+          console.log(formattedMessage);
+          if (Object.keys(data).length > 0) {
+            console.log('  Data:', JSON.stringify(data, null, 2));
+          }
+        }
+        break;
+      default:
+        console.log(formattedMessage);
+    }
+  }
+
+  /**
+   * Get colored prefix for log level
+   */
+  getColoredPrefix(level) {
+    if (!this.colors) {
+      return `[${level.toUpperCase()}]`;
+    }
+    const colors = {
+      error: '\x1b[31m✖\x1b[0m',
+      // Red X
+      warn: '\x1b[33m⚠\x1b[0m',
+      // Yellow warning
+      info: '\x1b[36mℹ\x1b[0m',
+      // Cyan info
+      debug: '\x1b[35m🔍\x1b[0m' // Magenta debug
+    };
+    return colors[level] || `[${level.toUpperCase()}]`;
+  }
+
+  /**
+   * Convenience methods
+   */
+  error(message, data = {}) {
+    this.log('error', message, data);
+  }
+  warn(message, data = {}) {
+    this.log('warn', message, data);
+  }
+  info(message, data = {}) {
+    this.log('info', message, data);
+  }
+  debug(message, data = {}) {
+    this.log('debug', message, data);
+  }
+
+  /**
+   * Log progress updates
+   */
+  progress(stage, message, data = {}) {
+    this.info(`[${stage}] ${message}`, data);
+  }
+
+  /**
+   * Log command execution
+   */
+  command(command, data = {}) {
+    this.debug(`Executing command: ${command}`, data);
+  }
+
+  /**
+   * Log performance metrics
+   */
+  perf(operation, duration, data = {}) {
+    this.debug(`${operation} completed in ${duration}ms`, data);
+  }
+
+  /**
+   * Create child logger with additional context
+   */
+  child(context = {}) {
+    return new ChildLogger(this, context);
+  }
+}
+
+/**
+ * Child logger that inherits from parent with additional context
+ */
+class ChildLogger {
+  constructor(parent, context) {
+    this.parent = parent;
+    this.context = context;
+  }
+  log(level, message, data = {}) {
+    this.parent.log(level, message, {
+      ...this.context,
+      ...data
+    });
+  }
+  error(message, data = {}) {
+    this.log('error', message, data);
+  }
+  warn(message, data = {}) {
+    this.log('warn', message, data);
+  }
+  info(message, data = {}) {
+    this.log('info', message, data);
+  }
+  debug(message, data = {}) {
+    this.log('debug', message, data);
+  }
+  progress(stage, message, data = {}) {
+    this.info(`[${stage}] ${message}`, data);
+  }
+}
+
+/**
+ * Create default logger instance
+ */
+export function createLogger(options = {}) {
+  // Auto-detect color support
+  const supportsColor = process.stdout.isTTY && process.env.TERM !== 'dumb' && !process.env.NO_COLOR && !options.noColor;
+
+  // Determine log level from environment
+  const level = options.level || getLogLevel();
+
+  // Create log file path if verbose mode
+  const logFile = options.verbose ? join(process.cwd(), '.vizzly', 'debug.log') : options.logFile;
+  return new Logger({
+    level,
+    logFile,
+    verbose: options.verbose,
+    silent: options.silent,
+    colors: supportsColor && options.colors !== false
+  });
+}

package/dist/utils/package-info.js

@@ -0,0 +1,38 @@
+/**
+ * Package information utility
+ * Centralized access to package.json data
+ */
+
+import { readFileSync } from 'fs';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+let packageJson;
+
+/**
+ * Get package.json information
+ * @returns {Object} Package.json data
+ */
+export function getPackageInfo() {
+  if (!packageJson) {
+    packageJson = JSON.parse(readFileSync(join(__dirname, '../../package.json'), 'utf-8'));
+  }
+  return packageJson;
+}
+
+/**
+ * Get package version
+ * @returns {string} Package version
+ */
+export function getPackageVersion() {
+  return getPackageInfo().version;
+}
+
+/**
+ * Get package name
+ * @returns {string} Package name
+ */
+export function getPackageName() {
+  return getPackageInfo().name;
+}

package/dist/utils/package.js

@@ -0,0 +1,9 @@
+import { readFile } from 'fs/promises';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+export async function getPackageInfo() {
+  const packagePath = resolve(__dirname, '../../package.json');
+  const content = await readFile(packagePath, 'utf-8');
+  return JSON.parse(content);
+}

package/dist/utils/project-detection.js

@@ -0,0 +1,145 @@
+/**
+ * Project Detection Utilities
+ * Automatically detect project type and framework
+ */
+
+import { readFile, access } from 'fs/promises';
+import { join } from 'path';
+
+/**
+ * Detect project type and framework
+ * @param {string} directory - Directory to analyze
+ * @returns {Promise<Object>} Project information
+ */
+export async function detectProjectType(directory = process.cwd()) {
+  const packageJsonPath = join(directory, 'package.json');
+  let packageJsonData = null;
+  try {
+    const content = await readFile(packageJsonPath, 'utf8');
+    packageJsonData = JSON.parse(content);
+  } catch {
+    // No package.json found
+  }
+
+  // Detect framework based on dependencies and files
+  const framework = await detectFramework(directory, packageJsonData);
+  const type = detectProjectTypeFromFramework(framework);
+  return {
+    type,
+    framework,
+    hasPackageJson: !!packageJsonData,
+    projectName: packageJsonData?.name || 'unknown',
+    dependencies: packageJsonData?.dependencies || {},
+    devDependencies: packageJsonData?.devDependencies || {}
+  };
+}
+
+/**
+ * Detect testing framework
+ * @param {string} directory - Directory to analyze
+ * @param {Object} packageJson - Package.json content
+ * @returns {Promise<string>} Framework name
+ */
+async function detectFramework(directory, packageJson) {
+  const dependencies = {
+    ...packageJson?.dependencies,
+    ...packageJson?.devDependencies
+  };
+
+  // Check for specific framework dependencies
+  if (dependencies.cypress) {
+    return 'cypress';
+  }
+  if (dependencies.playwright || dependencies['@playwright/test']) {
+    return 'playwright';
+  }
+  if (dependencies.webdriverio || dependencies['@wdio/cli']) {
+    return 'webdriver';
+  }
+  if (dependencies.jest || dependencies['@jest/core']) {
+    return 'jest';
+  }
+  if (dependencies.vitest) {
+    return 'vitest';
+  }
+  if (dependencies.mocha) {
+    return 'mocha';
+  }
+
+  // Check for config files
+  const configFiles = ['cypress.config.js', 'playwright.config.js', 'wdio.conf.js', 'jest.config.js', 'vitest.config.js'];
+  for (const configFile of configFiles) {
+    try {
+      await access(join(directory, configFile));
+      return configFile.split('.')[0];
+    } catch {
+      // File doesn't exist
+    }
+  }
+  return 'generic';
+}
+
+/**
+ * Determine project type from framework
+ * @param {string} framework - Framework name
+ * @returns {string} Project type
+ */
+function detectProjectTypeFromFramework(framework) {
+  const e2eFrameworks = ['cypress', 'playwright', 'webdriver'];
+  if (e2eFrameworks.includes(framework)) {
+    return 'e2e';
+  }
+  return 'web';
+}
+
+/**
+ * Get suggested test command for framework
+ * @param {string} framework - Framework name
+ * @param {Object} packageJson - Package.json content
+ * @returns {string} Suggested test command
+ */
+export function getSuggestedTestCommand(framework, packageJson) {
+  const scripts = packageJson?.scripts || {};
+
+  // Check for common script names
+  const testScripts = ['test:e2e', 'test:integration', 'e2e', 'cypress:run', 'playwright:test', 'test'];
+  for (const script of testScripts) {
+    if (scripts[script]) {
+      return `npm run ${script}`;
+    }
+  }
+
+  // Framework-specific defaults
+  switch (framework) {
+    case 'cypress':
+      return 'npx cypress run';
+    case 'playwright':
+      return 'npx playwright test';
+    case 'webdriver':
+      return 'npx wdio run';
+    case 'jest':
+      return 'npx jest';
+    case 'vitest':
+      return 'npx vitest run';
+    default:
+      return 'npm test';
+  }
+}
+
+/**
+ * Get suggested screenshots directory for framework
+ * @param {string} framework - Framework name
+ * @returns {string} Screenshots directory
+ */
+export function getSuggestedScreenshotsDir(framework) {
+  switch (framework) {
+    case 'cypress':
+      return './cypress/screenshots';
+    case 'playwright':
+      return './test-results';
+    case 'webdriver':
+      return './screenshots';
+    default:
+      return './screenshots';
+  }
+}

package/dist/utils/ui-helpers.js

@@ -0,0 +1,86 @@
+/**
+ * Color and styling utilities for Ink components
+ */
+
+/**
+ * Check if colors should be used
+ */
+export function shouldUseColors(flags = {}) {
+  return !flags.noColor && !process.env.NO_COLOR && process.stdout.isTTY && process.env.TERM !== 'dumb';
+}
+
+/**
+ * Get color for text based on type and color support
+ */
+export function getColor(type, flags = {}) {
+  if (!shouldUseColors(flags)) {
+    return undefined; // No color
+  }
+  const colors = {
+    success: 'green',
+    error: 'red',
+    warning: 'yellow',
+    info: 'blue',
+    progress: 'cyan',
+    dim: 'gray'
+  };
+  return colors[type];
+}
+
+/**
+ * Get status icon with fallback for no-color mode
+ */
+export function getStatusIcon(status, flags = {}) {
+  if (shouldUseColors(flags)) {
+    // Colored emoji icons
+    const icons = {
+      success: '✅',
+      error: '❌',
+      warning: '⚠️',
+      progress: '🔄',
+      uploading: '📤',
+      waiting: '⏳',
+      running: '🧪',
+      starting: '🚀'
+    };
+    return icons[status] || '•';
+  } else {
+    // Text-only fallback
+    const icons = {
+      success: '[OK]',
+      error: '[ERR]',
+      warning: '[WARN]',
+      progress: '[...]',
+      uploading: '[UP]',
+      waiting: '[WAIT]',
+      running: '[RUN]',
+      starting: '[START]'
+    };
+    return icons[status] || '[•]';
+  }
+}
+
+/**
+ * Responsive layout helper
+ */
+export function getLayout(columns = process.stdout.columns || 80) {
+  if (columns < 60) {
+    return {
+      type: 'compact',
+      showDetails: false,
+      maxWidth: columns - 4
+    };
+  } else if (columns < 100) {
+    return {
+      type: 'normal',
+      showDetails: true,
+      maxWidth: columns - 8
+    };
+  } else {
+    return {
+      type: 'wide',
+      showDetails: true,
+      maxWidth: Math.min(columns - 16, 120)
+    };
+  }
+}

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "@vizzly-testing/cli",
+  "version": "0.1.0",
+  "description": "Visual review platform for UI developers and designers",
+  "keywords": [
+    "visual-testing",
+    "screenshot-testing",
+    "visual-regression",
+    "visual-review",
+    "ui-testing",
+    "collaboration",
+    "testing",
+    "cli"
+  ],
+  "homepage": "https://vizzly.dev",
+  "bugs": "https://github.com/vizzly/cli/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vizzly/cli.git"
+  },
+  "license": "MIT",
+  "author": "Stubborn Mule Software <support@vizzly.dev>",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./client": {
+      "import": "./dist/client/index.js",
+      "require": "./dist/client/index.js"
+    },
+    "./sdk": {
+      "import": "./dist/sdk/index.js",
+      "require": "./dist/sdk/index.js"
+    },
+    "./config": {
+      "import": "./dist/utils/config-helpers.js",
+      "require": "./dist/utils/config-helpers.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "bin": {
+    "vizzly": "./bin/vizzly.js"
+  },
+  "files": [
+    "bin",
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "start": "node src/index.js",
+    "build": "npm run clean && npm run compile && npm run types",
+    "clean": "rimraf dist",
+    "compile": "babel src --out-dir dist --ignore '**/*.test.js'",
+    "types": "tsc --emitDeclarationOnly --outDir dist/types",
+    "prepublishOnly": "npm test && npm run build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint src tests",
+    "lint:fix": "eslint src tests --fix",
+    "format": "prettier --write src tests",
+    "format:check": "prettier --check src tests"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.23.6",
+    "@vitejs/plugin-react": "^4.7.0",
+    "commander": "^11.1.0",
+    "cosmiconfig": "^9.0.0",
+    "form-data": "^4.0.0",
+    "glob": "^10.3.10",
+    "inquirer": "^12.9.1",
+    "odiff-bin": "^3.2.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.28.0",
+    "@babel/core": "^7.23.6",
+    "@babel/preset-env": "^7.23.6",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.23.6",
+    "@eslint/js": "^9.31.0",
+    "@vitest/coverage-v8": "^3.2.4",
+    "babel-plugin-transform-remove-console": "^6.9.4",
+    "eslint": "^9.31.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.3",
+    "prettier": "^3.6.2",
+    "puppeteer": "^24.16.1",
+    "rimraf": "^5.0.5",
+    "typescript": "^5.0.4",
+    "vite": "^7.1.2",
+    "vitest": "^3.2.4"
+  }
+}