creevey 0.9.0-non-webpack.2.fix-capture-element → 0.9.0

package/dist/client/addon/withCreevey.js

@@ -0,0 +1,286 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withCreevey = withCreevey;
+exports.capture = capture;
+const Events = __importStar(require("@storybook/core-events"));
+const preview_api_1 = require("@storybook/preview-api");
+const types_js_1 = require("../../types.js");
+const index_js_1 = require("../../shared/index.js");
+const helpers_js_1 = require("../shared/helpers.js");
+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;
+}
+`;
+function catchRenderError(channel) {
+    let rejectCallback;
+    const promise = new Promise((_resolve, reject) => (rejectCallback = reject));
+    function errorHandler({ title, description }) {
+        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() {
+    // TODO Use document.fonts.ready instead
+    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 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, index_js_1.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_js_1.getConnectionUrl)()}/stories`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ setStoriesCounter, stories: [...storiesByFiles.entries()] }),
+        });
+        return stories;
+    }
+    // TODO Use Events.STORY_RENDER_PHASE_CHANGED: `loading/rendering/completed` with storyId
+    // TODO Check other statuses and statuses with play function
+    async function selectStory(storyId, shouldWaitForReady, callback) {
+        const currentStory = window.__STORYBOOK_PREVIEW__.currentSelection?.storyId ?? '';
+        if (!isAnimationDisabled)
+            disableAnimation();
+        isTestBrowser = true;
+        const channel = addonsChannel();
+        const waitForReady = shouldWaitForReady
+            ? new Promise((resolve) => (window.__CREEVEY_SET_READY_FOR_CAPTURE__ = resolve))
+            : Promise.resolve();
+        let isCaptureCalled = false;
+        const renderPromise = waitForStoryRendered(channel);
+        const errorPromise = catchRenderError(channel);
+        const capturePromise = waitForCaptureCall().then(() => (isCaptureCalled = true));
+        setTimeout(() => {
+            if (storyId == currentStory)
+                channel.emit(Events.FORCE_REMOUNT, { storyId });
+            else
+                channel.emit(Events.SET_CURRENT_STORY, { storyId });
+        }, 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_js_1.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_js_1.noop;
+    return (0, preview_api_1.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_js_1.getConnectionUrl)()}/capture`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ workerId: window.__CREEVEY_WORKER_ID__, options }),
+    });
+    await waitForCreevey;
+}
+//# sourceMappingURL=withCreevey.js.map

package/dist/client/addon/withCreevey.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withCreevey.js","sourceRoot":"","sources":["../../../src/client/addon/withCreevey.ts"],"names":[],"mappings":"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"}

package/dist/client/shared/components/ImagesView/BlendView.d.ts

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

package/dist/client/shared/components/ImagesView/BlendView.js

@@ -0,0 +1,74 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlendView = void 0;
+const react_1 = __importStar(require("react"));
+const theming_1 = require("@storybook/theming");
+const common_js_1 = require("./common.js");
+const helpers_js_1 = require("../../helpers.js");
+const readyForCapture_js_1 = require("../../../addon/readyForCapture.js");
+const Container = theming_1.styled.div({
+    position: 'relative',
+    display: 'flex',
+    filter: 'invert(100%)',
+});
+const ImageContainer = theming_1.styled.div({
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+});
+const Image = theming_1.styled.img(({ borderColor }) => ({
+    boxSizing: 'border-box',
+    border: `1px solid ${borderColor}`,
+    maxWidth: '100%',
+    filter: 'invert(100%)',
+}));
+const ActualImage = (0, theming_1.styled)(Image)({
+    mixBlendMode: 'difference',
+});
+const DiffImage = (0, theming_1.styled)(Image)({
+    opacity: '0',
+});
+exports.BlendView = (0, theming_1.withTheme)(({ actual, diff, expect, theme }) => {
+    const expectImageRef = (0, react_1.useRef)(null);
+    const diffImageRef = (0, react_1.useRef)(null);
+    const actualImageRef = (0, react_1.useRef)(null);
+    const loaded = (0, helpers_js_1.useLoadImages)(expect, diff, actual);
+    const scale = (0, helpers_js_1.useCalcScale)(diffImageRef, loaded);
+    (0, helpers_js_1.useApplyScale)(expectImageRef, scale, loaded);
+    (0, helpers_js_1.useApplyScale)(actualImageRef, scale, loaded);
+    (0, react_1.useEffect)(() => {
+        if (loaded)
+            (0, readyForCapture_js_1.readyForCapture)();
+    }, [loaded]);
+    return (react_1.default.createElement(Container, null,
+        react_1.default.createElement(ImageContainer, null,
+            react_1.default.createElement(Image, { ref: expectImageRef, borderColor: (0, common_js_1.getBorderColor)(theme, common_js_1.themeBorderColors.expect), alt: "expect", src: expect })),
+        react_1.default.createElement(DiffImage, { ref: diffImageRef, borderColor: 'transparent', alt: "diff", src: diff }),
+        react_1.default.createElement(ImageContainer, null,
+            react_1.default.createElement(ActualImage, { ref: actualImageRef, borderColor: (0, common_js_1.getBorderColor)(theme, common_js_1.themeBorderColors.actual), alt: "actual", src: actual }))));
+});
+//# sourceMappingURL=BlendView.js.map

package/dist/client/shared/components/ImagesView/BlendView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlendView.js","sourceRoot":"","sources":["../../../../../src/client/shared/components/ImagesView/BlendView.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiD;AACjD,gDAAuD;AACvD,2CAAoF;AACpF,iDAA8E;AAC9E,0EAAoE;AAEpE,MAAM,SAAS,GAAG,gBAAM,CAAC,GAAG,CAAC;IAC3B,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,cAAc;CACvB,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,gBAAM,CAAC,GAAG,CAAC;IAChC,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,MAAM;CAChB,CAAC,CAAC;AAEH,MAAM,KAAK,GAAG,gBAAM,CAAC,GAAG,CAA0B,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC;IACtE,SAAS,EAAE,YAAY;IACvB,MAAM,EAAE,aAAa,WAAW,EAAE;IAClC,QAAQ,EAAE,MAAM;IAChB,MAAM,EAAE,cAAc;CACvB,CAAC,CAAC,CAAC;AAEJ,MAAM,WAAW,GAAG,IAAA,gBAAM,EAAC,KAAK,CAAC,CAAC;IAChC,YAAY,EAAE,YAAY;CAC3B,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,IAAA,gBAAM,EAAC,KAAK,CAAC,CAAC;IAC9B,OAAO,EAAE,GAAG;CACb,CAAC,CAAC;AAEU,QAAA,SAAS,GAAG,IAAA,mBAAS,EAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAsB,EAAe,EAAE;IACtG,MAAM,cAAc,GAAG,IAAA,cAAM,EAA0B,IAAI,CAAC,CAAC;IAC7D,MAAM,YAAY,GAAG,IAAA,cAAM,EAA0B,IAAI,CAAC,CAAC;IAC3D,MAAM,cAAc,GAAG,IAAA,cAAM,EAA0B,IAAI,CAAC,CAAC;IAE7D,MAAM,MAAM,GAAG,IAAA,0BAAa,EAAC,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;IACnD,MAAM,KAAK,GAAG,IAAA,yBAAY,EAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IAEjD,IAAA,0BAAa,EAAC,cAAc,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;IAC7C,IAAA,0BAAa,EAAC,cAAc,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;IAE7C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,MAAM;YAAE,IAAA,oCAAe,GAAE,CAAC;IAChC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACL,8BAAC,SAAS;QACR,8BAAC,cAAc;YACb,8BAAC,KAAK,IACJ,GAAG,EAAE,cAAc,EACnB,WAAW,EAAE,IAAA,0BAAc,EAAC,KAAK,EAAE,6BAAiB,CAAC,MAAM,CAAC,EAC5D,GAAG,EAAC,QAAQ,EACZ,GAAG,EAAE,MAAM,GACX,CACa;QACjB,8BAAC,SAAS,IAAC,GAAG,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,EAAC,MAAM,EAAC,GAAG,EAAE,IAAI,GAAI;QAClF,8BAAC,cAAc;YACb,8BAAC,WAAW,IACV,GAAG,EAAE,cAAc,EACnB,WAAW,EAAE,IAAA,0BAAc,EAAC,KAAK,EAAE,6BAAiB,CAAC,MAAM,CAAC,EAC5D,GAAG,EAAC,QAAQ,EACZ,GAAG,EAAE,MAAM,GACX,CACa,CACP,CACb,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/client/shared/components/ImagesView/ImagesView.d.ts

@@ -0,0 +1,9 @@
+import { Images, ImagesViewMode } from '../../../../types.js';
+interface ImagesViewProps {
+    url?: string;
+    image: Images;
+    canApprove: boolean;
+    mode: ImagesViewMode;
+}
+export declare function ImagesView({ url, image, canApprove, mode }: ImagesViewProps): JSX.Element;
+export {};

package/dist/client/shared/components/ImagesView/ImagesView.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImagesView = ImagesView;
+const react_1 = __importDefault(require("react"));
+const theming_1 = require("@storybook/theming");
+const SideBySideView_js_1 = require("./SideBySideView.js");
+const SwapView_js_1 = require("./SwapView.js");
+const SlideView_js_1 = require("./SlideView.js");
+const BlendView_js_1 = require("./BlendView.js");
+const common_js_1 = require("./common.js");
+const views = {
+    'side-by-side': SideBySideView_js_1.SideBySideView,
+    swap: SwapView_js_1.SwapView,
+    slide: SlideView_js_1.SlideView,
+    blend: BlendView_js_1.BlendView,
+};
+const Container = theming_1.styled.div({
+    height: '100%',
+    display: 'flex',
+    textAlign: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '0 20px',
+});
+const ImageLink = theming_1.styled.a({
+    lineHeight: 0,
+});
+const ActualImage = (0, theming_1.withTheme)(theming_1.styled.img(({ theme }) => {
+    return {
+        border: `1px solid ${(0, common_js_1.getBorderColor)(theme, common_js_1.themeBorderColors.expect)}`,
+        maxWidth: '100%',
+    };
+}));
+function normalizeUrl(image, url) {
+    return url ? `${url}/${image}` : image;
+}
+function ImagesView({ url, image, canApprove, mode }) {
+    const ViewComponent = views[mode];
+    const { actual, diff, expect } = image;
+    return (react_1.default.createElement(Container, null, canApprove && diff && expect ? (react_1.default.createElement(ViewComponent, { actual: normalizeUrl(actual, url), diff: normalizeUrl(diff, url), expect: normalizeUrl(expect, url) })) : (react_1.default.createElement(ImageLink, { href: normalizeUrl(actual, url), target: "_blank", rel: "noopener noreferrer" },
+        react_1.default.createElement(ActualImage, { alt: "actual", src: normalizeUrl(actual, url) })))));
+}
+//# sourceMappingURL=ImagesView.js.map

package/dist/client/shared/components/ImagesView/ImagesView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagesView.js","sourceRoot":"","sources":["../../../../../src/client/shared/components/ImagesView/ImagesView.tsx"],"names":[],"mappings":";;;;;AAiDA,gCAoBC;AArED,kDAAiD;AACjD,gDAAuD;AACvD,2DAAqD;AACrD,+CAAyC;AACzC,iDAA2C;AAC3C,iDAA2C;AAE3C,2CAA2E;AAS3E,MAAM,KAAK,GAA+D;IACxE,cAAc,EAAE,kCAAc;IAC9B,IAAI,EAAE,sBAAQ;IACd,KAAK,EAAE,wBAAS;IAChB,KAAK,EAAE,wBAAS;CACjB,CAAC;AAEF,MAAM,SAAS,GAAG,gBAAM,CAAC,GAAG,CAAC;IAC3B,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,MAAM;IACf,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,OAAO,EAAE,QAAQ;CAClB,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,gBAAM,CAAC,CAAC,CAAC;IACzB,UAAU,EAAE,CAAC;CACd,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG,IAAA,mBAAS,EAC3B,gBAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvB,OAAO;QACL,MAAM,EAAE,aAAa,IAAA,0BAAc,EAAC,KAAK,EAAE,6BAAiB,CAAC,MAAM,CAAC,EAAE;QACtE,QAAQ,EAAE,MAAM;KACjB,CAAC;AACJ,CAAC,CAAC,CACH,CAAC;AAEF,SAAS,YAAY,CAAC,KAAa,EAAE,GAAY;IAC/C,OAAO,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;AACzC,CAAC;AAED,SAAgB,UAAU,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAmB;IAC1E,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;IAElC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAEvC,OAAO,CACL,8BAAC,SAAS,QACP,UAAU,IAAI,IAAI,IAAI,MAAM,CAAC,CAAC,CAAC,CAC9B,8BAAC,aAAa,IACZ,MAAM,EAAE,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,EACjC,IAAI,EAAE,YAAY,CAAC,IAAI,EAAE,GAAG,CAAC,EAC7B,MAAM,EAAE,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,GACjC,CACH,CAAC,CAAC,CAAC,CACF,8BAAC,SAAS,IAAC,IAAI,EAAE,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB;QACnF,8BAAC,WAAW,IAAC,GAAG,EAAC,QAAQ,EAAC,GAAG,EAAE,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,GAAI,CAClD,CACb,CACS,CACb,CAAC;AACJ,CAAC"}

package/dist/client/shared/components/ImagesView/SideBySideView.d.ts

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

package/dist/client/shared/components/ImagesView/SideBySideView.js

@@ -0,0 +1,121 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideBySideView = void 0;
+const react_1 = __importStar(require("react"));
+const components_1 = require("@storybook/components");
+const theming_1 = require("@storybook/theming");
+const common_js_1 = require("./common.js");
+const helpers_js_1 = require("../../helpers.js");
+const readyForCapture_js_1 = require("../../../addon/readyForCapture.js");
+const Container = theming_1.styled.div({
+    display: 'flex',
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+    width: '100%',
+});
+const ImagesLayout = theming_1.styled.div(({ layout }) => ({
+    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_1.styled.a({
+    lineHeight: 0,
+    flexShrink: 0,
+});
+const ImageDiffLink = theming_1.styled.a({
+    lineHeight: 0,
+});
+const Image = theming_1.styled.img(({ borderColor }) => ({
+    boxSizing: 'border-box',
+    border: `1px solid ${borderColor}`,
+    maxWidth: '100%',
+    flexShrink: 0,
+}));
+const DiffImage = (0, theming_1.styled)(Image)({
+    flexShrink: 1,
+});
+exports.SideBySideView = (0, theming_1.withTheme)(({ actual, diff, expect, theme }) => {
+    const [layout, setLayout] = (0, react_1.useState)('horizontal');
+    const [scale, setScale] = (0, react_1.useState)(1);
+    const containerRef = (0, react_1.useRef)(null);
+    const expectImageRef = (0, react_1.useRef)(null);
+    const diffImageRef = (0, react_1.useRef)(null);
+    const actualImageRef = (0, react_1.useRef)(null);
+    const loaded = (0, helpers_js_1.useLoadImages)(expect, diff, actual);
+    const calcScale = (0, react_1.useCallback)(() => {
+        const containerElement = containerRef.current;
+        const expectImage = expectImageRef.current;
+        const diffImage = diffImageRef.current;
+        const actualImage = actualImageRef.current;
+        if (!containerElement || !expectImage || !actualImage || !diffImage || !loaded) {
+            setScale(1);
+            return;
+        }
+        const borderSize = (0, helpers_js_1.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_js_1.useResizeObserver)(containerRef, calcScale);
+    (0, react_1.useLayoutEffect)(calcScale, [calcScale]);
+    (0, react_1.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_js_1.useApplyScale)(expectImageRef, scale);
+    (0, helpers_js_1.useApplyScale)(actualImageRef, scale);
+    (0, react_1.useEffect)(() => {
+        if (loaded)
+            (0, readyForCapture_js_1.readyForCapture)();
+    }, [loaded]);
+    return (react_1.default.createElement(Container, { ref: containerRef }, loaded ? (react_1.default.createElement(ImagesLayout, { layout: layout },
+        react_1.default.createElement(ImageLink, { href: expect, target: "_blank", rel: "noopener noreferrer" },
+            react_1.default.createElement(Image, { ref: expectImageRef, borderColor: (0, common_js_1.getBorderColor)(theme, common_js_1.themeBorderColors.expect), alt: "expect", src: expect })),
+        react_1.default.createElement(ImageDiffLink, { href: diff, target: "_blank", rel: "noopener noreferrer" },
+            react_1.default.createElement(DiffImage, { ref: diffImageRef, borderColor: (0, common_js_1.getBorderColor)(theme, common_js_1.themeBorderColors.diff), alt: "diff", src: diff })),
+        react_1.default.createElement(ImageLink, { href: actual, target: "_blank", rel: "noopener noreferrer" },
+            react_1.default.createElement(Image, { ref: actualImageRef, borderColor: (0, common_js_1.getBorderColor)(theme, common_js_1.themeBorderColors.actual), alt: "actual", src: actual })))) : (react_1.default.createElement(components_1.Loader, { size: 64 }))));
+});
+//# sourceMappingURL=SideBySideView.js.map

package/dist/client/shared/components/ImagesView/SideBySideView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideBySideView.js","sourceRoot":"","sources":["../../../../../src/client/shared/components/ImagesView/SideBySideView.tsx"],"names":[],"mappings":"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"}

package/dist/client/shared/components/ImagesView/SlideView.d.ts

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