tessl/npm-chromatic-com--storybook

Catch unexpected visual changes & UI bugs in your stories

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Storybook Integration

Name: tessl/npm-chromatic-com--storybook
Author: tessl

Core Storybook addon functionality including preset configuration, manager UI registration, and automatic setup for visual testing capabilities.

Capabilities

Preset Configuration

Server-side Storybook preset that configures the addon for visual testing. Automatically loaded via package.json exports.

/**
 * Default preset configuration object exported from preset entry
 * Configures Storybook server-side integration
 */
interface PresetConfig {
  /** Function returning paths to manager-side bundle files */
  managerEntries: () => string[];
  /** Server channel handler for addon communication */
  experimental_serverChannel: (channel: any) => void;
  /** Static directory configuration for addon assets */
  staticDirs: () => string[];
  /** Environment variable configuration */
  env: () => Record<string, string>;
}

declare const preset: PresetConfig;
export default preset;

Usage Example:

// .storybook/main.ts
export default {
  addons: [
    '@chromatic-com/storybook', // Automatically loads preset
  ],
};

Manager Registration

Registers the Visual Tests panel in Storybook's manager UI and sets up addon functionality.

/**
 * Manager-side addon registration
 * Automatically executed when Storybook loads the manager bundle
 */
interface ManagerRegistration {
  /** Register addon with Storybook's addon API */
  register(): void;
  /** Add Visual Tests panel to Storybook UI */
  addPanel(): void;
  /** Configure test provider for development mode */
  configureTestProvider(): void;
}

The manager integration provides:

Visual Tests panel in Storybook sidebar
Real-time build progress display
Integration with Storybook's experimental status store
Automatic addon discovery and configuration

Main Entry Point

Minimal main entry point for the package.

/**
 * Main package entry point
 * Currently provides empty default export
 */
declare const main: {};
export default main;

Development Entry

Development-specific configuration extending the base preset for local development.

/**
 * Development preset configuration
 * Extends base preset with development-specific manager entries
 */
interface DevPresetConfig extends PresetConfig {
  managerEntries: () => string[];
}

declare const devPreset: DevPresetConfig;
export default devPreset;

Usage Example:

// For local development
// CHROMATIC_ADDON_NAME='../src/dev.ts' storybook dev

Package Exports

The addon provides multiple entry points through package.json exports:

{
  "exports": {
    ".": "./dist/index.js",           // Main entry
    "./manager": "./dist/manager.js", // Manager UI
    "./preset": "./dist/preset.js",   // Server preset
    "./package.json": "./package.json"
  }
}

Story Parameters

Configure visual testing behavior on individual stories or globally.

interface ChromaticParameters {
  /** Visual test mode configurations */
  modes?: Record<string, VisualTestMode>;
  /** Disable visual testing for this story */
  disable?: boolean;
  /** Force snapshot for this story */
  force?: boolean;
  /** Delay before taking snapshot (ms) */
  delay?: number;
  /** Pause animation during snapshot */
  pauseAnimationAtEnd?: boolean;
}

interface StoryParameters {
  chromatic?: ChromaticParameters;
}

Usage Examples:

// Global configuration in .storybook/main.ts
export default {
  parameters: {
    chromatic: {
      modes: {
        light: { theme: 'light' },
        dark: { theme: 'dark' },
        mobile: { viewport: { width: 375, height: 667 } },
      },
    },
  },
};

// Story-specific configuration
export const MyStory = {
  parameters: {
    chromatic: {
      disable: true, // Skip visual testing for this story
    },
  },
};

export const AnimatedStory = {
  parameters: {
    chromatic: {
      delay: 1000, // Wait 1 second before snapshot
      pauseAnimationAtEnd: true,
    },
  },
};