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

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

@@ -1,272 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.capture = capture;
-exports.withCreevey = withCreevey;
-var Events = _interopRequireWildcard(require("@storybook/core-events"));
-var _previewApi = require("@storybook/preview-api");
-var _types = require("../../types");
-var _shared = require("../../shared");
-var _helpers = require("../shared/helpers");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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;
-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 = (0, _shared.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://${(0, _helpers.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 : (0, _types.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__ = _types.noop;
-  return (0, _previewApi.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);
-    }
-  });
-}
-async function capture(options) {
-  if (!isTestBrowser) return;
-  captureResolver();
-  waitForCreevey = new Promise(resolve => creeveyReady = resolve);
-  await fetch(`http://${(0, _helpers.getConnectionUrl)()}/capture`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({
-      workerId: window.__CREEVEY_WORKER_ID__,
-      options
-    })
-  });
-  await waitForCreevey;
-}

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

@@ -1,75 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BlendView = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _ImagesView = require("./ImagesView");
-var _theming = require("@storybook/theming");
-var _helpers = require("../../helpers");
-var _readyForCapture = require("../../../addon/readyForCapture");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const Container = _theming.styled.div({
-  position: 'relative',
-  display: 'flex',
-  filter: 'invert(100%)'
-});
-const ImageContainer = _theming.styled.div({
-  position: 'absolute',
-  width: '100%',
-  height: '100%',
-  display: 'flex'
-});
-const Image = _theming.styled.img(_ref => {
-  let {
-    borderColor
-  } = _ref;
-  return {
-    boxSizing: 'border-box',
-    border: `1px solid ${borderColor}`,
-    maxWidth: '100%',
-    filter: 'invert(100%)'
-  };
-});
-const ActualImage = (0, _theming.styled)(Image)({
-  mixBlendMode: 'difference'
-});
-const DiffImage = (0, _theming.styled)(Image)({
-  opacity: '0'
-});
-const BlendView = exports.BlendView = (0, _theming.withTheme)(_ref2 => {
-  let {
-    actual,
-    diff,
-    expect,
-    theme
-  } = _ref2;
-  const expectImageRef = (0, _react.useRef)(null);
-  const diffImageRef = (0, _react.useRef)(null);
-  const actualImageRef = (0, _react.useRef)(null);
-  const loaded = (0, _helpers.useLoadImages)(expect, diff, actual);
-  const scale = (0, _helpers.useCalcScale)(diffImageRef, loaded);
-  (0, _helpers.useApplyScale)(expectImageRef, scale, loaded);
-  (0, _helpers.useApplyScale)(actualImageRef, scale, loaded);
-  (0, _react.useEffect)(() => {
-    if (loaded) (0, _readyForCapture.readyForCapture)();
-  }, [loaded]);
-  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(ImageContainer, null, /*#__PURE__*/_react.default.createElement(Image, {
-    ref: expectImageRef,
-    borderColor: (0, _ImagesView.getBorderColor)(theme, _ImagesView.themeBorderColors.expect),
-    alt: "expect",
-    src: expect
-  })), /*#__PURE__*/_react.default.createElement(DiffImage, {
-    ref: diffImageRef,
-    borderColor: 'transparent',
-    alt: "diff",
-    src: diff
-  }), /*#__PURE__*/_react.default.createElement(ImageContainer, null, /*#__PURE__*/_react.default.createElement(ActualImage, {
-    ref: actualImageRef,
-    borderColor: (0, _ImagesView.getBorderColor)(theme, _ImagesView.themeBorderColors.actual),
-    alt: "actual",
-    src: actual
-  })));
-});

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

@@ -1,76 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ImagesView = ImagesView;
-exports.getBorderColor = getBorderColor;
-exports.themeBorderColors = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _SideBySideView = require("./SideBySideView");
-var _SwapView = require("./SwapView");
-var _SlideView = require("./SlideView");
-var _BlendView = require("./BlendView");
-var _theming = require("@storybook/theming");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const themeBorderColors = exports.themeBorderColors = {
-  actual: 'negative',
-  expect: 'positive',
-  diff: 'secondary'
-};
-const isColor = (theme, color) => color in theme.color;
-function getBorderColor(theme, color) {
-  return isColor(theme, color) ? theme.color[color] : color;
-}
-const views = {
-  'side-by-side': _SideBySideView.SideBySideView,
-  swap: _SwapView.SwapView,
-  slide: _SlideView.SlideView,
-  blend: _BlendView.BlendView
-};
-const Container = _theming.styled.div({
-  height: '100%',
-  display: 'flex',
-  textAlign: 'center',
-  alignItems: 'center',
-  justifyContent: 'center',
-  padding: '0 20px'
-});
-const ImageLink = _theming.styled.a({
-  lineHeight: 0
-});
-const ActualImage = (0, _theming.withTheme)(_theming.styled.img(_ref => {
-  let {
-    theme
-  } = _ref;
-  return {
-    border: `1px solid ${getBorderColor(theme, themeBorderColors.expect)}`,
-    maxWidth: '100%'
-  };
-}));
-function ImagesView(_ref2) {
-  let {
-    url,
-    image,
-    canApprove,
-    mode
-  } = _ref2;
-  const ViewComponent = views[mode];
-  const {
-    actual,
-    diff,
-    expect
-  } = image;
-  return /*#__PURE__*/_react.default.createElement(Container, null, canApprove && diff && expect ? /*#__PURE__*/_react.default.createElement(ViewComponent, {
-    actual: `${url}/${actual}`,
-    diff: `${url}/${diff}`,
-    expect: `${url}/${expect}`
-  }) : /*#__PURE__*/_react.default.createElement(ImageLink, {
-    href: `${url}/${actual}`,
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }, /*#__PURE__*/_react.default.createElement(ActualImage, {
-    alt: "actual",
-    src: `${url}/${actual}`
-  })));
-}

package/lib/cjs/client/shared/components/ImagesView/SideBySideView.js

@@ -1,139 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SideBySideView = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _ImagesView = require("./ImagesView");
-var _theming = require("@storybook/theming");
-var _helpers = require("../../helpers");
-var _components = require("@storybook/components");
-var _readyForCapture = require("../../../addon/readyForCapture");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const Container = _theming.styled.div({
-  display: 'flex',
-  flexWrap: 'nowrap',
-  alignItems: 'center',
-  justifyContent: 'center',
-  height: '100%',
-  width: '100%'
-});
-const ImagesLayout = _theming.styled.div(_ref => {
-  let {
-    layout
-  } = _ref;
-  return {
-    display: 'flex',
-    alignItems: 'flex-start',
-    justifyContent: 'flex-start',
-    flexDirection: layout == 'horizontal' ? 'row' : 'column',
-    '& > :not(:first-of-type)': {
-      marginLeft: layout == 'horizontal' ? '20px' : 0,
-      marginTop: layout == 'horizontal' ? 0 : '20px'
-    }
-  };
-});
-const ImageLink = _theming.styled.a({
-  lineHeight: 0,
-  flexShrink: 0
-});
-const ImageDiffLink = _theming.styled.a({
-  lineHeight: 0
-});
-const Image = _theming.styled.img(_ref2 => {
-  let {
-    borderColor
-  } = _ref2;
-  return {
-    boxSizing: 'border-box',
-    border: `1px solid ${borderColor}`,
-    maxWidth: '100%',
-    flexShrink: 0
-  };
-});
-const DiffImage = (0, _theming.styled)(Image)({
-  flexShrink: 1
-});
-const SideBySideView = exports.SideBySideView = (0, _theming.withTheme)(_ref3 => {
-  let {
-    actual,
-    diff,
-    expect,
-    theme
-  } = _ref3;
-  const [layout, setLayout] = (0, _react.useState)('horizontal');
-  const [scale, setScale] = (0, _react.useState)(1);
-  const containerRef = (0, _react.useRef)(null);
-  const expectImageRef = (0, _react.useRef)(null);
-  const diffImageRef = (0, _react.useRef)(null);
-  const actualImageRef = (0, _react.useRef)(null);
-  const loaded = (0, _helpers.useLoadImages)(expect, diff, actual);
-  const calcScale = (0, _react.useCallback)(() => {
-    const containerElement = containerRef.current;
-    const expectImage = expectImageRef.current;
-    const diffImage = diffImageRef.current;
-    const actualImage = actualImageRef.current;
-    if (!containerElement || !expectImage || !actualImage || !diffImage || !loaded) return setScale(1);
-    const borderSize = (0, _helpers.getBorderSize)(diffImage);
-    if (layout == 'vertical') {
-      const ratio = (diffImage.getBoundingClientRect().width - borderSize * 2) / diffImage.naturalWidth;
-      setScale(Math.min(1, ratio));
-    }
-    if (layout == 'horizontal') {
-      const ratio =
-      // NOTE: 40px because we have two margins by 20px and 6px for borders
-      (containerElement.getBoundingClientRect().width - 40 - borderSize * 6) / [expectImage, diffImage, actualImage].map(image => image.naturalWidth).reduce((a, b) => a + b, 0);
-      setScale(Math.min(1, ratio));
-    }
-  }, [loaded, layout]);
-  (0, _helpers.useResizeObserver)(containerRef, calcScale);
-  (0, _react.useLayoutEffect)(calcScale, [calcScale]);
-  (0, _react.useLayoutEffect)(() => {
-    // TODO Check image height and viewport
-    const diffImage = diffImageRef.current;
-    if (!diffImage || !loaded) return;
-    const ratio = diffImage.naturalWidth / diffImage.naturalHeight;
-    setLayout(ratio >= 2 ? 'vertical' : 'horizontal');
-  }, [loaded]);
-  (0, _helpers.useApplyScale)(expectImageRef, scale);
-  (0, _helpers.useApplyScale)(actualImageRef, scale);
-  (0, _react.useEffect)(() => {
-    if (loaded) (0, _readyForCapture.readyForCapture)();
-  }, [loaded]);
-  return /*#__PURE__*/_react.default.createElement(Container, {
-    ref: containerRef
-  }, loaded ? /*#__PURE__*/_react.default.createElement(ImagesLayout, {
-    layout: layout
-  }, /*#__PURE__*/_react.default.createElement(ImageLink, {
-    href: expect,
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }, /*#__PURE__*/_react.default.createElement(Image, {
-    ref: expectImageRef,
-    borderColor: (0, _ImagesView.getBorderColor)(theme, _ImagesView.themeBorderColors.expect),
-    alt: "expect",
-    src: expect
-  })), /*#__PURE__*/_react.default.createElement(ImageDiffLink, {
-    href: diff,
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }, /*#__PURE__*/_react.default.createElement(DiffImage, {
-    ref: diffImageRef,
-    borderColor: (0, _ImagesView.getBorderColor)(theme, _ImagesView.themeBorderColors.diff),
-    alt: "diff",
-    src: diff
-  })), /*#__PURE__*/_react.default.createElement(ImageLink, {
-    href: actual,
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }, /*#__PURE__*/_react.default.createElement(Image, {
-    ref: actualImageRef,
-    borderColor: (0, _ImagesView.getBorderColor)(theme, _ImagesView.themeBorderColors.actual),
-    alt: "actual",
-    src: actual
-  }))) : /*#__PURE__*/_react.default.createElement(_components.Loader, {
-    size: 64
-  }));
-});