Configuration & Constants

/**
 * Chromatic index URL from environment variable
 * Falls back to derived URL from base URL
 */
declare const CHROMATIC_INDEX_URL: string;

/**
 * Base Chromatic service URL
 * Default: 'https://www.chromatic.com'
 * Can be overridden via CHROMATIC_BASE_URL environment variable
 */
declare const CHROMATIC_BASE_URL: string;

/**
 * Chromatic API URL derived from base URL
 * Typically: baseUrl + '/api'
 */
declare const CHROMATIC_API_URL: string;

// Environment variable configuration
process.env.CHROMATIC_BASE_URL = 'https://www.staging-chromatic.com';

// URLs are automatically configured based on environment
console.log(CHROMATIC_BASE_URL); // 'https://www.staging-chromatic.com'
console.log(CHROMATIC_API_URL); // 'https://www.staging-chromatic.com/api'

/**
 * Package name as defined in package.json
 */
declare const PACKAGE_NAME: '@chromatic-com/storybook';

/**
 * Storybook addon identifier for registration
 */
declare const ADDON_ID: 'chromaui/addon-visual-tests';

/**
 * Panel identifier for Storybook UI integration
 */
declare const PANEL_ID: string;

/**
 * Test provider identifier for Storybook testing integration
 */
declare const TEST_PROVIDER_ID: string;

/**
 * Parameter key for story-level configuration
 * Used in story parameters: { chromatic: { ... } }
 */
declare const PARAM_KEY: 'chromatic';

/**
 * Build control events
 */
declare const START_BUILD: string;
declare const STOP_BUILD: string;

/**
 * Build progress tracking events
 */
declare const LOCAL_BUILD_PROGRESS: string;

/**
 * Configuration and state events
 */
declare const CONFIG_INFO: string;
declare const GIT_INFO: string;

/**
 * Analytics and addon management events
 */
declare const TELEMETRY: string;
declare const REMOVE_ADDON: string;

/**
 * Network request handling events
 */
declare const FETCH_REQUEST: string;
declare const FETCH_RESPONSE: string;
declare const FETCH_ABORTED: string;

import { addons } from '@storybook/manager-api';
import { START_BUILD, STOP_BUILD, LOCAL_BUILD_PROGRESS } from '@chromatic-com/storybook';

// Listen for build events
const channel = addons.getChannel();

channel.on(START_BUILD, (data) => {
  console.log('Build started:', data);
});

channel.on(LOCAL_BUILD_PROGRESS, (progress) => {
  console.log('Build progress:', progress);
});

// Emit build control events
channel.emit(START_BUILD, { projectToken: 'token' });
channel.emit(STOP_BUILD);

/**
 * Configuration overrides applied to Chromatic CLI for local builds
 * Provides sensible defaults for addon usage
 */
declare const CONFIG_OVERRIDES: {
  /** Skip build step optimization */
  skip?: string;
  /** Exit code behavior on changes */
  exitOnceUploaded?: boolean;
  /** Exit code behavior on zero changes */
  exitZeroOnChanges?: boolean;
  /** External build directory flag */
  externaldisplays?: boolean;
  /** Auto-accept changes flag */
  allowConsoleErrors?: boolean;
  [key: string]: any;
};

/**
 * Official documentation URL for the addon
 */
declare const DOCS_URL: 'https://www.chromatic.com/docs/visual-tests-addon';

/**
 * Configuration update payload structure
 */
interface ConfigurationUpdate {
  [key: string]: any;
}

/**
 * Configuration information with validation results
 */
interface ConfigInfoPayload {
  /** Current configuration object */
  configuration: Record<string, any>;
  /** Configuration validation problems */
  problems: string[];
  /** Configuration improvement suggestions */
  suggestions: string[];
  /** Whether configuration is valid */
  isValid: boolean;
}

/**
 * Project setup information
 */
interface ProjectInfoPayload {
  /** Chromatic project identifier */
  projectId: string;
  /** Project authentication token */
  projectToken: string;
  /** Human-readable project name */
  projectName: string;
  /** Project owner/organization */
  projectOwner?: string;
  /** Project repository URL */
  repositoryUrl?: string;
}

/**
 * Git repository information (excludes sensitive committer details)
 */
interface GitInfoPayload {
  /** Current branch name */
  branch: string;
  /** Current commit SHA */
  commit: string;
  /** Uncommitted changes hash */
  uncommittedHash?: string;
  /** Parent commit SHAs */
  parentCommits: string[];
  /** Repository slug (owner/repo) */
  slug?: string;
  /** Whether repository has uncommitted changes */
  hasUncommittedChanges?: boolean;
}

import type { ConfigInfoPayload, GitInfoPayload } from '@chromatic-com/storybook';

// Handle configuration updates
const handleConfigUpdate = (config: ConfigInfoPayload) => {
  if (!config.isValid) {
    console.warn('Configuration issues:', config.problems);
    console.log('Suggestions:', config.suggestions);
  }
};

// Handle git information
const handleGitInfo = (gitInfo: GitInfoPayload) => {
  console.log(`Testing branch: ${gitInfo.branch}`);
  console.log(`Commit: ${gitInfo.commit}`);
  
  if (gitInfo.hasUncommittedChanges) {
    console.warn('Repository has uncommitted changes');
  }
};

/**
 * Environment variables recognized by the addon
 */
interface ChromaticEnvironment {
  /** Base URL for Chromatic service */
  CHROMATIC_BASE_URL?: string;
  /** Project authentication token */
  CHROMATIC_PROJECT_TOKEN?: string;
  /** Custom addon name for development */
  CHROMATIC_ADDON_NAME?: string;
  /** Use distributed version flag */
  CHROMATIC_USE_DIST_VERSION?: string;
  /** Custom index URL */
  CHROMATIC_INDEX_URL?: string;
}

# Environment configuration for different stages
CHROMATIC_BASE_URL=https://www.staging-chromatic.com yarn storybook
CHROMATIC_PROJECT_TOKEN=your-token yarn chromatic