creevey 0.9.0-beta.20 → 0.9.0-beta.21

package/lib/esm/client/addon/components/Panel.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import { Loader } from '@storybook/components';
-import { ResultsPage } from '../../shared/components/ResultsPage';
-import { styled } from '@storybook/theming';
-import { getTestPath } from '../../shared/helpers';
-import TestSelect from './TestSelect';
-const Wrapper = styled.div(_ref => {
-  let {
-    isRunning
-  } = _ref;
-  return {
-    opacity: isRunning ? 0.5 : 1,
-    height: '100%'
-  };
-});
-const TestSelectContainer = styled.div(_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return {
-    padding: '8px',
-    border: `1px solid ${theme.appBorderColor}`
-  };
-});
-export const Panel = _ref3 => {
-  let {
-    tests,
-    selectedTestId,
-    onChangeTest,
-    onImageApprove
-  } = _ref3;
-  const result = tests.find(x => x.id === selectedTestId);
-  const isRunning = result?.status === 'running';
-  return /*#__PURE__*/React.createElement("div", null, tests.length > 1 && /*#__PURE__*/React.createElement(TestSelectContainer, null, /*#__PURE__*/React.createElement(TestSelect, {
-    tests: tests,
-    selectedTestId: selectedTestId,
-    onChangeTest: onChangeTest
-  })), isRunning && /*#__PURE__*/React.createElement(Loader, null), result?.results?.length ? /*#__PURE__*/React.createElement(Wrapper, {
-    isRunning: isRunning
-  }, /*#__PURE__*/React.createElement(ResultsPage, {
-    height: '100%',
-    key: `${result.id}_${result.results?.length ?? 0}` // TODO
-    ,
-    id: result.id,
-    path: getTestPath(result) // TODO Memo?
-    ,
-    results: result.results,
-    approved: result.approved,
-    onImageApprove: onImageApprove
-  })) : null);
-};

package/lib/esm/client/addon/components/TestSelect.js

@@ -1,45 +0,0 @@
-import { Button, Icons, TooltipLinkList, WithTooltip } from '@storybook/components';
-import { styled } from '@storybook/theming';
-import React from 'react';
-import { getEmojiByTestStatus } from '../utils';
-const LinkIconContainer = styled.span(_ref => {
-  let {
-    theme
-  } = _ref;
-  return {
-    display: 'inline-block',
-    width: '20px',
-    color: theme.color.defaultText,
-    textAlign: 'center'
-  };
-});
-export default function TestSelect(props) {
-  const testName = props.tests.find(x => x.id === props.selectedTestId)?.testName ?? '';
-  return /*#__PURE__*/React.createElement(WithTooltip, {
-    trigger: "click",
-    placement: "bottom",
-    closeOnClick: true,
-    tooltip: _ref2 => {
-      let {
-        onHide
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(TooltipLinkList, {
-        links: props.tests.map(x => ({
-          id: x.id,
-          title: x.testName ?? '',
-          active: props.selectedTestId === x.id,
-          onClick: () => {
-            props.onChangeTest(x.id);
-            onHide();
-          },
-          left: /*#__PURE__*/React.createElement(LinkIconContainer, null, getEmojiByTestStatus(x.status, x.skip))
-        }))
-      });
-    }
-  }, /*#__PURE__*/React.createElement(Button, {
-    outline: true,
-    small: true
-  }, /*#__PURE__*/React.createElement(Icons, {
-    icon: "menu"
-  }), testName));
-}

package/lib/esm/client/addon/components/Tools.js

@@ -1,75 +0,0 @@
-import React, { Fragment, useState, useEffect } from 'react';
-import { IconButton, Icons, Separator } from '@storybook/components';
-import { ForwardIcon, NextIcon } from './Icons';
-import { stringify } from 'qs';
-import { styled } from '@storybook/theming';
-import { isDefined } from '../../../types';
-import { getTestPath, useForceUpdate } from '../../shared/helpers';
-const Button = styled(IconButton)({
-  '&:disabled': {
-    opacity: 0.5,
-    cursor: 'default'
-  },
-  '&:disabled:hover': {
-    color: 'inherit'
-  }
-});
-export const Tools = _ref => {
-  let {
-    manager
-  } = _ref;
-  const [buttonClicked, setButtonClicked] = useState();
-  const [isRunning, setRunning] = useState(manager.status.isRunning);
-  const forceUpdate = useForceUpdate();
-  const test = manager.getCurrentTest();
-  useEffect(() => {
-    const unsubscribe = manager.onChangeTest(() => {
-      forceUpdate();
-    });
-    return unsubscribe;
-  }, [manager, forceUpdate]);
-  useEffect(() => {
-    const unsubscribe = manager.onUpdateStatus(_ref2 => {
-      let {
-        isRunning
-      } = _ref2;
-      if (isDefined(isRunning)) setRunning(isRunning);
-    });
-    return unsubscribe;
-  }, [manager]);
-  if (!test) return null;
-  function renderButton(type, title, onClick, icon) {
-    const handleClick = () => {
-      setButtonClicked(type);
-      onClick();
-    };
-    const disabled = isRunning && buttonClicked != null && buttonClicked !== type;
-    return (
-      /*#__PURE__*/
-      // @ts-expect-error Fixed in https://github.com/storybookjs/storybook/pull/26623
-      React.createElement(Button, {
-        onClick: () => {
-          isRunning ? manager.onStop() : handleClick();
-        },
-        title: disabled ? '' : title,
-        disabled: disabled
-      }, buttonClicked === type && isRunning ? /*#__PURE__*/React.createElement(Icons, {
-        icon: 'stop'
-      }) : icon)
-    );
-  }
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(IconButton, {
-    href: `http://localhost:${__CREEVEY_CLIENT_PORT__ || __CREEVEY_SERVER_PORT__ || 3000}/?${stringify({
-      testPath: getTestPath(test)
-    })}`,
-    target: "_blank",
-    title: "Show in Creevey UI"
-  }, /*#__PURE__*/React.createElement(Icons, {
-    icon: "sharealt"
-  })), /*#__PURE__*/React.createElement(Separator, null), renderButton('RunAll', 'Run all', manager.onStartAllTests, /*#__PURE__*/React.createElement(ForwardIcon, null)), renderButton('RunStoryTests', 'Run all story tests', manager.onStartAllStoryTests, /*#__PURE__*/React.createElement(NextIcon, {
-    width: 15,
-    height: 11
-  })), renderButton('RunTest', 'Run', manager.onStart, /*#__PURE__*/React.createElement(Icons, {
-    icon: "play"
-  })));
-};

package/lib/esm/client/addon/decorator.js

@@ -1,2 +0,0 @@
-import { withCreevey } from './withCreevey';
-export const decorators = [withCreevey()];

package/lib/esm/client/addon/index.js

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

package/lib/esm/client/addon/preview.js

@@ -1,5 +0,0 @@
-import { withCreevey } from './withCreevey';
-const preview = {
-  decorators: [withCreevey()]
-};
-export default preview;

package/lib/esm/client/addon/readyForCapture.js

@@ -1,3 +0,0 @@
-export function readyForCapture() {
-  window.__CREEVEY_SET_READY_FOR_CAPTURE__?.();
-}

package/lib/esm/client/addon/register.js

@@ -1,49 +0,0 @@
-import { addons, types } from '@storybook/manager-api';
-import React from 'react';
-import { Addon } from './components/Addon';
-import { Tools } from './components/Tools';
-import { CreeveyManager } from './Manager';
-export const ADDON_ID = 'creevey';
-addons.register(ADDON_ID, api => {
-  void registerCreeveyPanels(api);
-});
-export async function registerCreeveyPanels(storybookApi) {
-  const manager = new CreeveyManager(storybookApi);
-  addons.add(`${ADDON_ID}/panel/run`, {
-    title: `Creevey/Run`,
-    match: _ref => {
-      let {
-        viewMode
-      } = _ref;
-      return !!(viewMode && /^story$/.exec(viewMode));
-    },
-    type: types.TOOL,
-    // eslint-disable-next-line react/display-name
-    render: () => /*#__PURE__*/React.createElement(Tools, {
-      manager
-    })
-  });
-  await manager.initAll();
-  const browsers = manager.getBrowsers();
-  browsers.forEach(browser => {
-    const panelId = `${ADDON_ID}/panel/${browser}`;
-    const title = manager.getTabTitle(browser);
-    addons.add(panelId, {
-      title,
-      type: types.PANEL,
-      paramKey: browser,
-      // NOTE key = PANEL_ID needs to correct render button in addons panel
-      // eslint-disable-next-line react/display-name
-      render: _ref2 => {
-        let {
-          active
-        } = _ref2;
-        return /*#__PURE__*/React.createElement(Addon, {
-          active,
-          manager,
-          browser
-        });
-      }
-    });
-  });
-}

package/lib/esm/client/addon/utils.js

@@ -1,27 +0,0 @@
-export function getEmojiByTestStatus(status) {
-  let skip = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  switch (status) {
-    case 'failed':
-      {
-        return '❌';
-      }
-    case 'success':
-      {
-        return '✔';
-      }
-    case 'running':
-      {
-        return '🟡';
-      }
-    case 'pending':
-      {
-        return '🕗';
-      }
-    default:
-      {
-        if (skip) return '⏸';
-        return '';
-      }
-  }
-}
-export const isInternetExplorer = navigator.userAgent.includes('Trident/');

package/lib/esm/client/addon/withCreevey.js

@@ -1,263 +0,0 @@
-import * as Events from '@storybook/core-events';
-import { makeDecorator } from '@storybook/preview-api';
-import { isObject, noop } from '../../types';
-import { serializeRawStories } from '../../shared';
-import { getConnectionUrl } from '../shared/helpers';
-const disableAnimationsStyles = `
-*,
-*:hover,
-*::before,
-*::after {
-  animation-delay: -0.0001ms !important;
-  animation-duration: 0s !important;
-  animation-play-state: paused !important;
-  cursor: none !important;
-  caret-color: transparent !important;
-  transition: 0s !important;
-}
-`;
-async function resetCurrentStory(channel) {
-  setTimeout(() => channel.emit(Events.SET_CURRENT_STORY, {
-    storyId: true,
-    name: '',
-    kind: ''
-  }), 0);
-  return new Promise(resolve => channel.once(Events.STORY_MISSING, resolve));
-}
-function catchRenderError(channel) {
-  let rejectCallback;
-  const promise = new Promise((_resolve, reject) => rejectCallback = reject);
-  function errorHandler(_ref) {
-    let {
-      title,
-      description
-    } = _ref;
-    rejectCallback({
-      message: title,
-      stack: description
-    });
-  }
-  function exceptionHandler(exception) {
-    rejectCallback(exception);
-  }
-  function removeHandlers() {
-    channel.off(Events.STORY_ERRORED, errorHandler);
-    channel.off(Events.STORY_THREW_EXCEPTION, errorHandler);
-  }
-  channel.once(Events.STORY_ERRORED, errorHandler);
-  channel.once(Events.STORY_THREW_EXCEPTION, exceptionHandler);
-  return Object.assign(promise, {
-    cancel: removeHandlers
-  });
-}
-function waitForStoryRendered(channel) {
-  let resolveCallback;
-  const promise = new Promise(resolve => resolveCallback = resolve);
-  function renderHandler() {
-    resolveCallback();
-  }
-  function removeHandlers() {
-    channel.off(Events.STORY_RENDERED, renderHandler);
-  }
-  channel.once(Events.STORY_RENDERED, renderHandler);
-  return Object.assign(promise, {
-    cancel: removeHandlers
-  });
-}
-function waitForFontsLoaded() {
-  if (!document.fonts) return;
-  const areFontsLoading = Array.from(document.fonts).some(font => font.status == 'loading');
-  if (areFontsLoading) {
-    return new Promise(resolve => {
-      const fontsLoadedHandler = () => {
-        document.fonts.removeEventListener('loadingdone', fontsLoadedHandler);
-        resolve();
-      };
-      document.fonts.addEventListener('loadingdone', fontsLoadedHandler);
-    });
-  }
-}
-function waitForCaptureCall() {
-  return new Promise(resolve => captureResolver = resolve);
-}
-function initCreeveyState() {
-  const prevState = JSON.parse(window.localStorage.getItem('Creevey_Tests') ?? '{}');
-  if (prevState.creeveyHost) window.__CREEVEY_SERVER_HOST__ = prevState.creeveyHost;
-  if (prevState.creeveyPort) window.__CREEVEY_SERVER_PORT__ = prevState.creeveyPort;
-  if (prevState.setStoriesCounter) setStoriesCounter = prevState.setStoriesCounter;
-  if (prevState.isTestBrowser) isTestBrowser = prevState.isTestBrowser;
-  window.addEventListener('beforeunload', () => {
-    window.localStorage.setItem('Creevey_Tests', JSON.stringify({
-      creeveyHost: window.__CREEVEY_SERVER_HOST__,
-      creeveyPort: window.__CREEVEY_SERVER_PORT__,
-      setStoriesCounter,
-      isTestBrowser
-    }));
-  });
-}
-let isTestBrowser = false;
-let captureResolver;
-let waitForCreevey;
-let creeveyReady;
-let setStoriesCounter = 0;
-export function withCreevey() {
-  const addonsChannel = () => window.__STORYBOOK_ADDONS_CHANNEL__;
-  let currentStory = '';
-  let isAnimationDisabled = false;
-  initCreeveyState();
-  function disableAnimation() {
-    isAnimationDisabled = true;
-    const style = document.createElement('style');
-    const textNode = document.createTextNode(disableAnimationsStyles);
-    style.setAttribute('type', 'text/css');
-    style.appendChild(textNode);
-    document.head.appendChild(style);
-  }
-  async function getStories() {
-    const stories = serializeRawStories(await window.__STORYBOOK_PREVIEW__.extract());
-    const storiesByFiles = new Map();
-    Object.values(stories).forEach(story => {
-      const fileName = story.parameters.fileName;
-      const storiesFromFile = storiesByFiles.get(fileName);
-      if (storiesFromFile) storiesFromFile.push(story);else storiesByFiles.set(fileName, [story]);
-    });
-    void fetch(`http://${getConnectionUrl()}/stories`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        setStoriesCounter,
-        stories: [...storiesByFiles.entries()]
-      })
-    });
-    return stories;
-  }
-  async function selectStory(storyId, kind, name, shouldWaitForReady, callback) {
-    if (!isAnimationDisabled) disableAnimation();
-    isTestBrowser = true;
-    const channel = addonsChannel();
-    const waitForReady = shouldWaitForReady ? new Promise(resolve => window.__CREEVEY_SET_READY_FOR_CAPTURE__ = resolve) : Promise.resolve();
-    if (storyId == currentStory) await resetCurrentStory(channel);else currentStory = storyId;
-    let isCaptureCalled = false;
-    const renderPromise = waitForStoryRendered(channel);
-    const errorPromise = catchRenderError(channel);
-    const capturePromise = waitForCaptureCall().then(() => isCaptureCalled = true);
-    setTimeout(() => channel.emit(Events.SET_CURRENT_STORY, {
-      storyId,
-      name,
-      kind
-    }), 0);
-    try {
-      await Promise.race([(async () => {
-        await Promise.race([renderPromise, capturePromise]);
-        await waitForFontsLoaded();
-        await waitForReady;
-      })(), errorPromise]);
-      callback([null, isCaptureCalled]);
-    } catch (reason) {
-      // NOTE Event `STORY_THREW_EXCEPTION` triggered only in react and vue frameworks and return Error instance
-      // NOTE Event `STORY_ERRORED` return error-like object without `name` field
-      const errorMessage = reason instanceof Error ? reason.stack ?? reason.message : isObject(reason) ? `${reason.message}\n    ${reason.stack}` : reason;
-      callback([errorMessage]);
-    } finally {
-      renderPromise.cancel();
-      errorPromise.cancel();
-    }
-  }
-  function updateGlobals(globals) {
-    addonsChannel().emit(Events.UPDATE_GLOBALS, {
-      globals
-    });
-  }
-  function insertIgnoreStyles(ignoreSelectors) {
-    const stylesElement = document.createElement('style');
-    stylesElement.setAttribute('type', 'text/css');
-    document.head.appendChild(stylesElement);
-    ignoreSelectors.forEach(selector => {
-      stylesElement.innerHTML += `
-        ${selector} {
-          background: #000 !important;
-          box-shadow: none !important;
-          text-shadow: none !important;
-          outline: 0 !important;
-          color: rgba(0,0,0,0) !important;
-        }
-        ${selector} *, ${selector}::before, ${selector}::after {
-          visibility: hidden !important;
-        }
-      `;
-    });
-    return stylesElement;
-  }
-  function removeIgnoreStyles(ignoreStyles) {
-    ignoreStyles.parentNode?.removeChild(ignoreStyles);
-  }
-  function hasPlayCompletedYet(callback) {
-    creeveyReady();
-    let isCaptureCalled = false;
-    let isPlayCompleted = false;
-    const channel = addonsChannel();
-    void waitForStoryRendered(channel).then(() => {
-      if (isCaptureCalled) return;
-      isPlayCompleted = true;
-      callback(true);
-    });
-    void waitForCaptureCall().then(() => {
-      if (isPlayCompleted) return;
-      isCaptureCalled = true;
-      callback(false);
-    });
-  }
-  window.__CREEVEY_GET_STORIES__ = getStories;
-  window.__CREEVEY_SELECT_STORY__ = selectStory;
-  window.__CREEVEY_UPDATE_GLOBALS__ = updateGlobals;
-  window.__CREEVEY_INSERT_IGNORE_STYLES__ = insertIgnoreStyles;
-  window.__CREEVEY_REMOVE_IGNORE_STYLES__ = removeIgnoreStyles;
-  window.__CREEVEY_HAS_PLAY_COMPLETED_YET__ = hasPlayCompletedYet;
-  window.__CREEVEY_SET_READY_FOR_CAPTURE__ = noop;
-  return makeDecorator({
-    name: 'withCreevey',
-    parameterName: 'creevey',
-    wrapper: (getStory, context) => {
-      // TODO Define proper types, like captureElement is a promise
-      const {
-        captureElement
-      } = context.parameters.creevey = context.parameters.creevey ?? {};
-      Object.defineProperty(context.parameters.creevey, 'captureElement', {
-        get() {
-          switch (true) {
-            case captureElement === undefined:
-              return Promise.resolve(context.canvasElement);
-            case captureElement === null:
-              return Promise.resolve(document.documentElement);
-            case typeof captureElement == 'string':
-              return Promise.resolve(context.canvasElement.querySelector(captureElement));
-            case typeof captureElement == 'function':
-              // TODO Define type for it
-              return Promise.resolve(captureElement(context));
-          }
-        },
-        enumerable: true,
-        configurable: true
-      });
-      return getStory(context);
-    }
-  });
-}
-export async function capture(options) {
-  if (!isTestBrowser) return;
-  captureResolver();
-  waitForCreevey = new Promise(resolve => creeveyReady = resolve);
-  await fetch(`http://${getConnectionUrl()}/capture`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({
-      workerId: window.__CREEVEY_WORKER_ID__,
-      options
-    })
-  });
-  await waitForCreevey;
-}

package/lib/esm/client/shared/components/ImagesView/BlendView.js

@@ -1,67 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { getBorderColor, themeBorderColors } from './ImagesView';
-import { styled, withTheme } from '@storybook/theming';
-import { useApplyScale, useCalcScale, useLoadImages } from '../../helpers';
-import { readyForCapture } from '../../../addon/readyForCapture';
-const Container = styled.div({
-  position: 'relative',
-  display: 'flex',
-  filter: 'invert(100%)'
-});
-const ImageContainer = styled.div({
-  position: 'absolute',
-  width: '100%',
-  height: '100%',
-  display: 'flex'
-});
-const Image = styled.img(_ref => {
-  let {
-    borderColor
-  } = _ref;
-  return {
-    boxSizing: 'border-box',
-    border: `1px solid ${borderColor}`,
-    maxWidth: '100%',
-    filter: 'invert(100%)'
-  };
-});
-const ActualImage = styled(Image)({
-  mixBlendMode: 'difference'
-});
-const DiffImage = styled(Image)({
-  opacity: '0'
-});
-export const BlendView = withTheme(_ref2 => {
-  let {
-    actual,
-    diff,
-    expect,
-    theme
-  } = _ref2;
-  const expectImageRef = useRef(null);
-  const diffImageRef = useRef(null);
-  const actualImageRef = useRef(null);
-  const loaded = useLoadImages(expect, diff, actual);
-  const scale = useCalcScale(diffImageRef, loaded);
-  useApplyScale(expectImageRef, scale, loaded);
-  useApplyScale(actualImageRef, scale, loaded);
-  useEffect(() => {
-    if (loaded) readyForCapture();
-  }, [loaded]);
-  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(ImageContainer, null, /*#__PURE__*/React.createElement(Image, {
-    ref: expectImageRef,
-    borderColor: getBorderColor(theme, themeBorderColors.expect),
-    alt: "expect",
-    src: expect
-  })), /*#__PURE__*/React.createElement(DiffImage, {
-    ref: diffImageRef,
-    borderColor: 'transparent',
-    alt: "diff",
-    src: diff
-  }), /*#__PURE__*/React.createElement(ImageContainer, null, /*#__PURE__*/React.createElement(ActualImage, {
-    ref: actualImageRef,
-    borderColor: getBorderColor(theme, themeBorderColors.actual),
-    alt: "actual",
-    src: actual
-  })));
-});

package/lib/esm/client/shared/components/ImagesView/ImagesView.js

@@ -1,67 +0,0 @@
-import React from 'react';
-import { SideBySideView } from './SideBySideView';
-import { SwapView } from './SwapView';
-import { SlideView } from './SlideView';
-import { BlendView } from './BlendView';
-import { styled, withTheme } from '@storybook/theming';
-export const themeBorderColors = {
-  actual: 'negative',
-  expect: 'positive',
-  diff: 'secondary'
-};
-const isColor = (theme, color) => color in theme.color;
-export function getBorderColor(theme, color) {
-  return isColor(theme, color) ? theme.color[color] : color;
-}
-const views = {
-  'side-by-side': SideBySideView,
-  swap: SwapView,
-  slide: SlideView,
-  blend: BlendView
-};
-const Container = styled.div({
-  height: '100%',
-  display: 'flex',
-  textAlign: 'center',
-  alignItems: 'center',
-  justifyContent: 'center',
-  padding: '0 20px'
-});
-const ImageLink = styled.a({
-  lineHeight: 0
-});
-const ActualImage = withTheme(styled.img(_ref => {
-  let {
-    theme
-  } = _ref;
-  return {
-    border: `1px solid ${getBorderColor(theme, themeBorderColors.expect)}`,
-    maxWidth: '100%'
-  };
-}));
-export function ImagesView(_ref2) {
-  let {
-    url,
-    image,
-    canApprove,
-    mode
-  } = _ref2;
-  const ViewComponent = views[mode];
-  const {
-    actual,
-    diff,
-    expect
-  } = image;
-  return /*#__PURE__*/React.createElement(Container, null, canApprove && diff && expect ? /*#__PURE__*/React.createElement(ViewComponent, {
-    actual: `${url}/${actual}`,
-    diff: `${url}/${diff}`,
-    expect: `${url}/${expect}`
-  }) : /*#__PURE__*/React.createElement(ImageLink, {
-    href: `${url}/${actual}`,
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }, /*#__PURE__*/React.createElement(ActualImage, {
-    alt: "actual",
-    src: `${url}/${actual}`
-  })));
-}