creevey 0.8.1-sb7.1 → 0.8.1-sb7.3

package/lib/esm/server/worker/worker.js

@@ -0,0 +1,238 @@
+import { promisify } from 'util';
+import fs from 'fs';
+import path from 'path';
+import chai from 'chai';
+import chalk from 'chalk';
+import Mocha from 'mocha';
+import { Key, until } from 'selenium-webdriver';
+import { isImageError } from '../../types';
+import { subscribeOn, emitTestMessage, emitWorkerMessage } from '../messages';
+import chaiImage from './chai-image';
+import { closeBrowser, getBrowser, switchStory } from '../selenium';
+import { CreeveyReporter, TeamcityReporter } from './reporter';
+import { addTestsFromStories } from './helpers';
+import { logger } from '../logger';
+const statAsync = promisify(fs.stat);
+const readdirAsync = promisify(fs.readdir);
+const readFileAsync = promisify(fs.readFile);
+const writeFileAsync = promisify(fs.writeFile);
+const mkdirAsync = promisify(fs.mkdir);
+
+async function getStat(filePath) {
+  try {
+    return await statAsync(filePath);
+  } catch (error) {
+    if (typeof error == 'object' && error && error.code === 'ENOENT') {
+      return null;
+    }
+
+    throw error;
+  }
+}
+
+async function getLastImageNumber(imageDir, imageName) {
+  const actualImagesRegexp = new RegExp(`${imageName}-actual-(\\d+)\\.png`);
+
+  try {
+    return (await readdirAsync(imageDir)).map(filename => filename.replace(actualImagesRegexp, '$1')).map(Number).filter(x => !isNaN(x)).sort((a, b) => b - a)[0] ?? 0;
+  } catch (_error) {
+    return 0;
+  }
+} // FIXME browser options hotfix
+
+
+export default async function worker(config, options) {
+  var _await$browser$getSes;
+
+  let retries = 0;
+  let images = {};
+  let error = undefined;
+  const screenshots = [];
+  const testScope = [];
+
+  function runHandler(failures) {
+    if (failures > 0 && (error || Object.values(images).some(image => (image === null || image === void 0 ? void 0 : image.error) != null))) {
+      const isTimeout = hasTimeout(error) || Object.values(images).some(image => hasTimeout(image === null || image === void 0 ? void 0 : image.error));
+      const payload = {
+        status: 'failed',
+        images,
+        error
+      };
+      isTimeout ? emitWorkerMessage({
+        type: 'error',
+        payload: {
+          error: error ?? 'Unknown error'
+        }
+      }) : emitTestMessage({
+        type: 'end',
+        payload
+      });
+    } else {
+      emitTestMessage({
+        type: 'end',
+        payload: {
+          status: 'success',
+          images
+        }
+      });
+    }
+  }
+
+  async function saveImages(imageDir, images) {
+    await mkdirAsync(imageDir, {
+      recursive: true
+    });
+
+    for (const {
+      name,
+      data
+    } of images) {
+      await writeFileAsync(path.join(imageDir, name), data);
+    }
+  }
+
+  async function getExpected(assertImageName) {
+    // context => [kind, story, test, browser]
+    // rootSuite -> kindSuite -> storyTest -> [browsers.png]
+    // rootSuite -> kindSuite -> storySuite -> test -> [browsers.png]
+    const testPath = [...testScope];
+    const imageName = assertImageName ?? testPath.pop();
+    const imagesMeta = [];
+    const reportImageDir = path.join(config.reportDir, ...testPath);
+    const imageNumber = (await getLastImageNumber(reportImageDir, imageName)) + 1;
+    const actualImageName = `${imageName}-actual-${imageNumber}.png`;
+    const image = images[imageName] = images[imageName] ?? {
+      actual: actualImageName
+    };
+
+    const onCompare = async (actual, expect, diff) => {
+      imagesMeta.push({
+        name: image.actual,
+        data: actual
+      });
+
+      if (diff && expect) {
+        image.expect = `${imageName}-expect-${imageNumber}.png`;
+        image.diff = `${imageName}-diff-${imageNumber}.png`;
+        imagesMeta.push({
+          name: image.expect,
+          data: expect
+        });
+        imagesMeta.push({
+          name: image.diff,
+          data: diff
+        });
+      }
+
+      if (options.saveReport) {
+        await saveImages(reportImageDir, imagesMeta);
+      }
+    };
+
+    const expectImageDir = path.join(config.screenDir, ...testPath);
+    const expectImageStat = await getStat(path.join(expectImageDir, `${imageName}.png`));
+    if (!expectImageStat) return {
+      expected: null,
+      onCompare
+    };
+    const expected = await readFileAsync(path.join(expectImageDir, `${imageName}.png`));
+    return {
+      expected,
+      onCompare
+    };
+  }
+
+  const mochaOptions = {
+    timeout: 30000,
+    reporter: process.env.TEAMCITY_VERSION ? TeamcityReporter : options.reporter || CreeveyReporter,
+    reporterOptions: {
+      reportDir: config.reportDir,
+      topLevelSuite: options.browser,
+
+      get willRetry() {
+        return retries < config.maxRetries;
+      },
+
+      get images() {
+        return images;
+      },
+
+      get sessionId() {
+        return sessionId;
+      }
+
+    }
+  };
+  const mocha = new Mocha(mochaOptions);
+  mocha.cleanReferencesAfterRun(false);
+  chai.use(chaiImage(getExpected, config.diffOptions));
+  if ((await getBrowser(config, options)) == null) return;
+  await addTestsFromStories(mocha.suite, config, {
+    browser: options.browser,
+    watch: options.ui,
+    debug: options.debug,
+    port: options.port
+  });
+
+  try {
+    var _await$getBrowser;
+
+    await ((_await$getBrowser = await getBrowser(config, options)) === null || _await$getBrowser === void 0 ? void 0 : _await$getBrowser.getCurrentUrl());
+  } catch (_) {
+    await closeBrowser();
+  }
+
+  const browser = await getBrowser(config, options);
+  const sessionId = (_await$browser$getSes = await (browser === null || browser === void 0 ? void 0 : browser.getSession())) === null || _await$browser$getSes === void 0 ? void 0 : _await$browser$getSes.getId();
+  if (browser == null) return;
+  const interval = setInterval(() => void browser.getCurrentUrl().then(url => {
+    if (options.debug) logger.debug(`${options.browser}:${chalk.gray(sessionId)}`, 'current url', chalk.magenta(url));
+  }), 10 * 1000);
+  subscribeOn('shutdown', () => clearInterval(interval));
+  mocha.suite.beforeAll(function () {
+    this.config = config;
+    this.browser = browser;
+    this.until = until;
+    this.keys = Key;
+    this.expect = chai.expect;
+    this.browserName = options.browser;
+    this.testScope = testScope;
+    this.screenshots = screenshots;
+  });
+  mocha.suite.beforeEach(switchStory);
+  subscribeOn('test', message => {
+    if (message.type != 'start') return;
+    const test = message.payload;
+    const testPath = test.path.join(' ').replace(/[|\\{}()[\]^$+*?.-]/g, '\\$&');
+    images = {};
+    error = undefined;
+    retries = test.retries;
+    mocha.grep(new RegExp(`^${testPath}$`));
+    const runner = mocha.run(runHandler); // TODO How handle browser corruption?
+
+    runner.on('fail', (_test, reason) => {
+      if (!(reason instanceof Error)) {
+        error = reason;
+      } else if (!isImageError(reason)) {
+        error = reason.stack ?? reason.message;
+      } else if (typeof reason.images == 'string') {
+        const image = images[testScope.slice(-1)[0]];
+        if (image) image.error = reason.images;
+      } else {
+        const imageErrors = reason.images;
+        Object.keys(imageErrors).forEach(imageName => {
+          const image = images[imageName];
+          if (image) image.error = imageErrors[imageName];
+        });
+      }
+    });
+  });
+  logger.info(`${options.browser}:${chalk.gray(sessionId)} is ready`);
+  emitWorkerMessage({
+    type: 'ready'
+  });
+}
+
+function hasTimeout(str) {
+  return str != null && str.toLowerCase().includes('timeout');
+}

package/lib/esm/shared/index.js

@@ -0,0 +1,80 @@
+/* eslint-disable */
+//@ts-nocheck
+import { mapValues, mergeWith, cloneDeepWith } from 'lodash';
+import { deserializeRegExp, isSerializedRegExp, isRegExp, serializeRegExp } from './serializeRegExp'; // NOTE: Copy-paste from storybook/api
+
+export const combineParameters = function () {
+  for (var _len = arguments.length, parameterSets = new Array(_len), _key = 0; _key < _len; _key++) {
+    parameterSets[_key] = arguments[_key];
+  }
+
+  return (// eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    mergeWith({}, ...parameterSets, (_, srcValue) => {
+      // Treat arrays as scalars:
+      if (Array.isArray(srcValue)) return srcValue;
+      return undefined;
+    })
+  );
+}; // NOTE: Copy-paste from storybook/api
+
+export const denormalizeStoryParameters = _ref => {
+  let {
+    globalParameters,
+    kindParameters,
+    stories
+  } = _ref;
+  return mapValues(stories, storyData => {
+    var _kindParameters$story;
+
+    return { ...storyData,
+      parameters: combineParameters(globalParameters, (_kindParameters$story = kindParameters[storyData.kind]) !== null && _kindParameters$story !== void 0 ? _kindParameters$story : {}, storyData.parameters)
+    };
+  });
+};
+export const serializeRawStories = stories => {
+  return mapValues(stories, storyData => {
+    const creevey = storyData.parameters.creevey;
+
+    if (creevey !== null && creevey !== void 0 && creevey.skip) {
+      return { ...storyData,
+        parameters: { ...storyData.parameters,
+          creevey: { ...creevey,
+            skip: cloneDeepWith(creevey.skip, value => {
+              if (isRegExp(value)) {
+                return serializeRegExp(value);
+              }
+
+              return undefined;
+            })
+          }
+        }
+      };
+    }
+
+    return storyData;
+  });
+};
+export const deserializeRawStories = stories => {
+  return mapValues(stories, deserializeStory);
+};
+export const deserializeStory = story => {
+  const creevey = story.parameters.creevey;
+
+  if (creevey !== null && creevey !== void 0 && creevey.skip) {
+    return { ...story,
+      parameters: { ...story.parameters,
+        creevey: { ...creevey,
+          skip: cloneDeepWith(creevey.skip, value => {
+            if (isSerializedRegExp(value)) {
+              return deserializeRegExp(value);
+            }
+
+            return undefined;
+          })
+        }
+      }
+    };
+  }
+
+  return story;
+};

package/lib/esm/shared/serializeRegExp.js

@@ -0,0 +1,24 @@
+export const isRegExp = exp => {
+  return exp instanceof RegExp;
+};
+export const isSerializedRegExp = exp => {
+  return typeof exp === 'object' && exp !== null && Reflect.get(exp, '__regexp') === true;
+};
+export const serializeRegExp = exp => {
+  const {
+    source,
+    flags
+  } = exp;
+  return {
+    __regexp: true,
+    source,
+    flags
+  };
+};
+export const deserializeRegExp = _ref => {
+  let {
+    source,
+    flags
+  } = _ref;
+  return new RegExp(source, flags);
+};

package/lib/esm/types.js

@@ -0,0 +1,46 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-nocheck
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/* eslint-enable @typescript-eslint/no-explicit-any */
+export function noop() {
+  /* noop */
+}
+export function isDefined(value) {
+  return value !== null && value !== undefined;
+}
+export function isTest(x) {
+  return isDefined(x) && 'id' in x && 'storyId' in x && typeof x.id == 'string' && typeof x.storyId == 'string';
+}
+export function isObject(x) {
+  return typeof x == 'object' && x != null;
+}
+export function isString(x) {
+  return typeof x == 'string';
+} // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+export function isFunction(x) {
+  return typeof x == 'function';
+}
+export function isImageError(error) {
+  return error instanceof Error && 'images' in error;
+}
+export function isProcessMessage(message) {
+  return isObject(message) && 'scope' in message;
+}
+export function isWorkerMessage(message) {
+  return isProcessMessage(message) && message.scope == 'worker';
+}
+export function isStoriesMessage(message) {
+  return isProcessMessage(message) && message.scope == 'stories';
+}
+export function isTestMessage(message) {
+  return isProcessMessage(message) && message.scope == 'test';
+}
+export function isWebpackMessage(message) {
+  return isProcessMessage(message) && message.scope == 'webpack';
+}
+export function isDockerMessage(message) {
+  return isProcessMessage(message) && message.scope == 'docker';
+}

package/lib/types/cli.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/lib/types/client/addon/Manager.d.ts

@@ -0,0 +1,37 @@
+import { API } from '@storybook/api';
+import { denormalizeStoryParameters } from '../../shared';
+import { CreeveyStatus, CreeveyUpdate, TestData, TestStatus, StoriesRaw } from '../../types';
+import { CreeveyClientApi } from '../shared/creeveyClientApi';
+export declare class CreeveyManager {
+    storybookApi: API;
+    storyId: string;
+    activeBrowser: string;
+    selectedTestId: string;
+    status: CreeveyStatus;
+    creeveyApi: CreeveyClientApi | null;
+    stories: StoriesRaw;
+    updateStatusListeners: Array<(update: CreeveyUpdate) => void>;
+    changeTestListeners: Array<(testId: string) => void>;
+    constructor(storybookApi: API);
+    initAll: () => Promise<void>;
+    onUpdateStatus(listener: (update: CreeveyUpdate) => void): () => void;
+    onChangeTest(listener: (testId: string) => void): () => void;
+    handleCreeveyUpdate: (update: CreeveyUpdate) => void;
+    getCurrentTest: () => TestData | undefined;
+    onStoryRendered: (storyId: string) => void;
+    onStart: () => void;
+    onStop: () => void;
+    onImageApprove: (id: string, retry: number, image: string) => void;
+    onStartAllStoryTests: () => void;
+    onStartAllTests: () => void;
+    onSetStories: (data: Parameters<typeof denormalizeStoryParameters>['0']) => void;
+    setActiveBrowser: (browser: string) => void;
+    setSelectedTestId: (testId: string) => void;
+    getStoryTests: (storyId: string) => TestData[];
+    getBrowsers: () => string[];
+    getTestsByStoryIdAndBrowser: (browser: string) => TestData[];
+    getTabTitle: (browser: string) => string;
+    setPanelsTitle: () => void;
+    addStatusesToSideBar(): Promise<void>;
+    addStatusToStoryName(name: string, status: TestStatus | undefined, skip: string | boolean): string;
+}

package/lib/types/client/addon/components/Addon.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { CreeveyManager } from '../Manager';
+interface AddonProps {
+    active?: boolean;
+    browser: string;
+    manager: CreeveyManager;
+}
+export declare const Addon: ({ active, browser, manager }: AddonProps) => JSX.Element | null;
+export {};

package/lib/types/client/addon/components/Icons.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface IconProps {
+    width?: number;
+    height?: number;
+}
+export declare const NextIcon: ({ width, height }: IconProps) => JSX.Element;
+export declare const ForwardIcon: ({ width, height }: IconProps) => JSX.Element;
+export {};

package/lib/types/client/addon/components/Panel.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TestData } from '../../../types';
+interface PanelProps {
+    tests: TestData[];
+    selectedTestId: string;
+    onChangeTest: (testId: string) => void;
+    onImageApprove: (id: string, retry: number, image: string) => void;
+}
+export declare const Panel: ({ tests, selectedTestId, onChangeTest, onImageApprove }: PanelProps) => JSX.Element;
+export {};

package/lib/types/client/addon/components/TestSelect.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TestData } from '../../../types';
+interface TestSelectProps {
+    tests: TestData[];
+    selectedTestId: string;
+    onChangeTest: (testId: string) => void;
+}
+export default function TestSelect(props: TestSelectProps): JSX.Element;
+export {};

package/lib/types/client/addon/components/Tools.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CreeveyManager } from '../Manager';
+interface ToolsProps {
+    manager: CreeveyManager;
+}
+export declare const Tools: ({ manager }: ToolsProps) => JSX.Element | null;
+export {};

package/lib/types/client/addon/decorator.d.ts

@@ -0,0 +1 @@
+export declare const decorators: import("@storybook/preview-api/dist/addons").MakeDecoratorResult[];

package/lib/types/client/addon/index.d.ts

@@ -0,0 +1,2 @@
+export * from './withCreevey';
+export * from './readyForCapture';

package/lib/types/client/addon/preset.d.ts

@@ -0,0 +1,23 @@
+import { Configuration } from 'webpack';
+export declare function config(entry?: string[]): string[];
+export declare function managerEntries(entry?: string[]): string[];
+declare global {
+    const __CREEVEY_SERVER_HOST__: string;
+    const __CREEVEY_SERVER_PORT__: number;
+    const __CREEVEY_CLIENT_PORT__: number | null;
+}
+export interface CreeveyAddonOptions {
+    creeveyConfigPath?: string;
+    creeveyPreExtract?: string;
+    creeveyHost?: string;
+    creeveyPort?: number;
+    clientPort?: number;
+    configType: string;
+    configDir: string;
+    outputDir: string;
+    skipExtract?: boolean;
+    presets?: {
+        apply: <T>(preset: string) => Promise<T | undefined>;
+    };
+}
+export declare function managerWebpack(config: Configuration, options: CreeveyAddonOptions): Promise<Configuration>;

package/lib/types/client/addon/preset.ie11.d.ts

@@ -0,0 +1,10 @@
+import type { Configuration } from 'webpack';
+import { PluginItem } from '@babel/core';
+interface BabelOptions {
+    extends: string | null;
+    presets: PluginItem[] | null;
+}
+export declare const babel: (config: BabelOptions) => BabelOptions;
+export declare const managerWebpack: (webpackConfig?: Configuration) => Configuration;
+export declare const webpack: (webpackConfig?: Configuration) => Configuration;
+export {};

package/lib/types/client/addon/readyForCapture.d.ts

@@ -0,0 +1,6 @@
+declare global {
+    interface Window {
+        __CREEVEY_SET_READY_FOR_CAPTURE__?: () => void;
+    }
+}
+export declare function readyForCapture(): void;

package/lib/types/client/addon/register.d.ts

@@ -0,0 +1,3 @@
+import { API } from '@storybook/api';
+export declare const ADDON_ID = "creevey";
+export declare function registerCreeveyPanels(storybookApi: API): Promise<void>;

package/lib/types/client/addon/utils.d.ts

@@ -0,0 +1,3 @@
+import { TestStatus } from '../../types';
+export declare function getEmojiByTestStatus(status: TestStatus | undefined, skip?: string | boolean): string;
+export declare const isInternetExplorer: boolean;

package/lib/types/client/addon/withCreevey.d.ts

@@ -0,0 +1,24 @@
+import type { PreviewWeb } from '@storybook/preview-web';
+import type { AnyFramework } from '@storybook/csf';
+import type { StoryStore } from '@storybook/client-api';
+import { MakeDecoratorResult, Channel } from '@storybook/addons';
+import { CaptureOptions, StoriesRaw, StorybookGlobals } from '../../types';
+declare global {
+    interface Window {
+        __CREEVEY_SERVER_HOST__: string;
+        __CREEVEY_SERVER_PORT__: number;
+        __CREEVEY_WORKER_ID__: number;
+        __CREEVEY_GET_STORIES__: () => Promise<StoriesRaw | void>;
+        __CREEVEY_SELECT_STORY__: (storyId: string, kind: string, name: string, shouldWaitForReady: boolean, callback: (response: [error?: string | null, isCaptureCalled?: boolean]) => void) => Promise<void>;
+        __CREEVEY_UPDATE_GLOBALS__: (globals: StorybookGlobals) => void;
+        __CREEVEY_INSERT_IGNORE_STYLES__: (ignoreElements: string[]) => HTMLStyleElement;
+        __CREEVEY_REMOVE_IGNORE_STYLES__: (ignoreStyles: HTMLStyleElement) => void;
+        __CREEVEY_HAS_PLAY_COMPLETED_YET__: (callback: (isPlayCompleted: boolean) => void) => void;
+        __CREEVEY_SET_READY_FOR_CAPTURE__?: () => void;
+        __STORYBOOK_ADDONS_CHANNEL__: Channel;
+        __STORYBOOK_STORY_STORE__: StoryStore<AnyFramework>;
+        __STORYBOOK_PREVIEW__: PreviewWeb<AnyFramework>;
+    }
+}
+export declare function withCreevey(): MakeDecoratorResult;
+export declare function capture(options?: CaptureOptions): Promise<void>;

package/lib/types/client/shared/components/ImagesView/BlendView.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ViewPropsWithTheme } from './ImagesView';
+export declare const BlendView: React.FC<Pick<ViewPropsWithTheme, "diff" | "actual" | "expect"> & {
+    theme?: import("@storybook/theming").Theme | undefined;
+}>;

package/lib/types/client/shared/components/ImagesView/ImagesView.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { Images, ImagesViewMode } from '../../../../types';
+import { Theme } from '@storybook/theming';
+export declare const themeBorderColors: {
+    actual: string;
+    expect: string;
+    diff: string;
+};
+export declare function getBorderColor(theme: Theme, color: string): string;
+interface ViewProps {
+    actual: string;
+    diff: string;
+    expect: string;
+}
+export interface ViewPropsWithTheme extends ViewProps {
+    theme: Theme;
+}
+interface ImagesViewProps {
+    url: string;
+    image: Images;
+    canApprove: boolean;
+    mode: ImagesViewMode;
+}
+export declare function ImagesView({ url, image, canApprove, mode }: ImagesViewProps): JSX.Element;
+export {};

package/lib/types/client/shared/components/ImagesView/SideBySideView.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ViewPropsWithTheme } from './ImagesView';
+export declare const SideBySideView: React.FC<Pick<ViewPropsWithTheme, "diff" | "actual" | "expect"> & {
+    theme?: import("@storybook/theming").Theme | undefined;
+}>;

package/lib/types/client/shared/components/ImagesView/SlideView.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ViewPropsWithTheme } from './ImagesView';
+export declare const SlideView: React.FC<Pick<ViewPropsWithTheme, "diff" | "actual" | "expect"> & {
+    theme?: import("@storybook/theming").Theme | undefined;
+}>;

package/lib/types/client/shared/components/ImagesView/SwapView.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ViewPropsWithTheme } from './ImagesView';
+export declare const SwapView: React.FC<Pick<ViewPropsWithTheme, "diff" | "actual" | "expect"> & {
+    theme?: import("@storybook/theming").Theme | undefined;
+}>;

package/lib/types/client/shared/components/ImagesView/index.d.ts

@@ -0,0 +1,5 @@
+export { ImagesView } from './ImagesView';
+export { BlendView } from './BlendView';
+export { SideBySideView } from './SideBySideView';
+export { SlideView } from './SlideView';
+export { SwapView } from './SwapView';

package/lib/types/client/shared/components/PageFooter/PageFooter.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface PageFooterProps {
+    canApprove: boolean;
+    retriesCount: number;
+    retry: number;
+    onRetryChange: (retry: number) => void;
+    onApprove: () => void;
+}
+export declare function PageFooter({ canApprove, retriesCount, retry, onRetryChange, onApprove, }: PageFooterProps): JSX.Element;

package/lib/types/client/shared/components/PageFooter/Paging.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface PagingProps {
+    activePage: number;
+    onPageChange: (pageNumber: number) => void;
+    pagesCount: number;
+}
+export declare type ItemType = number | '.' | 'forward';
+export declare function Paging(props: PagingProps): JSX.Element;

package/lib/types/client/shared/components/PageHeader/ImagePreview.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Theme } from '@storybook/theming';
+interface ImageSwapProps {
+    url: string;
+    isActive: boolean;
+    onClick: (imageName: string) => void;
+    imageName: string;
+    theme: Theme;
+    error?: boolean;
+}
+export declare const ImagePreview: React.FC<Pick<ImageSwapProps, "error" | "url" | "imageName" | "onClick" | "isActive"> & {
+    theme?: Theme | undefined;
+}>;
+export {};