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

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/{lib/types → dist}/client/shared/components/ImagesView/SlideView.d.ts

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

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

@@ -0,0 +1,136 @@
+"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.SlideView = 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({
+    position: 'relative',
+    display: 'flex',
+});
+const Input = theming_1.styled.input({
+    position: 'absolute',
+    cursor: 'ew-resize',
+    appearance: 'none',
+    background: 'none',
+    boxShadow: 'none',
+    outline: 'none',
+    height: '100%',
+    width: '100%',
+    margin: '0',
+    zIndex: 1,
+    '&::-webkit-slider-runnable-track': {
+        height: '100%',
+    },
+    '&::-webkit-slider-thumb': {
+        boxShadow: '0 0 0 0.5px #888',
+        height: '100%',
+        width: '0px',
+        appearance: 'none',
+    },
+    '&::-moz-focus-outer': {
+        border: '0',
+    },
+    '&::-moz-range-track': {
+        height: '0',
+    },
+    '&::-moz-range-thumb': {
+        border: 'none',
+        boxShadow: '0 0 0 0.5px #888',
+        height: '100%',
+        width: '0px',
+    },
+});
+const ImageContainer = theming_1.styled.div({
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+});
+const ImageWrapper = (0, theming_1.withTheme)(theming_1.styled.div(({ theme }) => ({
+    background: theme.base == 'light' ? theme.color.mediumlight : theme.color.darker,
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+})));
+const BaseImage = theming_1.styled.img(({ borderColor }) => ({
+    boxSizing: 'border-box',
+    border: `1px solid ${borderColor}`,
+    maxWidth: '100%',
+}));
+const Image = (0, theming_1.styled)(BaseImage)({
+    position: 'absolute',
+});
+const DiffImage = (0, theming_1.styled)(BaseImage)({
+    opacity: '0',
+});
+exports.SlideView = (0, theming_1.withTheme)(({ actual, diff, expect, theme }) => {
+    const [step, setStep] = (0, react_1.useState)(0);
+    const expectedImageContainerRef = (0, react_1.useRef)(null);
+    const expectedImageWrapperRef = (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 scale = (0, helpers_js_1.useCalcScale)(diffImageRef, loaded);
+    (0, helpers_js_1.useApplyScale)(expectImageRef, scale);
+    (0, helpers_js_1.useApplyScale)(actualImageRef, scale);
+    const handleSlide = (0, react_1.useCallback)((event) => {
+        if (!expectedImageContainerRef.current || !expectedImageWrapperRef.current)
+            return;
+        const offset = Number(event.target.value);
+        expectedImageContainerRef.current.style.right = `${100 - offset}%`;
+        expectedImageWrapperRef.current.style.left = `${100 - offset}%`;
+    }, []);
+    (0, react_1.useLayoutEffect)(() => {
+        if (loaded && diffImageRef.current)
+            setStep(100 / diffImageRef.current.getBoundingClientRect().width);
+    }, [loaded, scale]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (loaded && expectedImageContainerRef.current && expectedImageWrapperRef.current) {
+            expectedImageContainerRef.current.style.right = '100%';
+            expectedImageWrapperRef.current.style.left = '100%';
+        }
+    }, [loaded]);
+    (0, react_1.useEffect)(() => {
+        if (loaded)
+            (0, readyForCapture_js_1.readyForCapture)();
+    }, [loaded]);
+    return loaded ? (react_1.default.createElement(Container, null,
+        react_1.default.createElement(Input, { "data-testid": "slider", type: "range", min: 0, max: 100, defaultValue: 0, step: step, onChange: handleSlide }),
+        react_1.default.createElement(ImageContainer, null,
+            react_1.default.createElement(ImageWrapper, null,
+                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(ImageContainer, { ref: expectedImageContainerRef },
+            react_1.default.createElement(ImageWrapper, { ref: expectedImageWrapperRef },
+                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(components_1.Loader, { size: 64 }));
+});
+//# sourceMappingURL=SlideView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SlideView.js","sourceRoot":"","sources":["../../../../../src/client/shared/components/ImagesView/SlideView.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAyF;AACzF,sDAA+C;AAC/C,gDAAuD;AACvD,2CAAoF;AACpF,iDAA8E;AAC9E,0EAAoE;AAEpE,MAAM,SAAS,GAAG,gBAAM,CAAC,GAAG,CAAC;IAC3B,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,MAAM;CAChB,CAAC,CAAC;AAEH,MAAM,KAAK,GAAG,gBAAM,CAAC,KAAK,CAAC;IACzB,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,WAAW;IACnB,UAAU,EAAE,MAAM;IAClB,UAAU,EAAE,MAAM;IAClB,SAAS,EAAE,MAAM;IACjB,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,GAAG;IACX,MAAM,EAAE,CAAC;IAET,kCAAkC,EAAE;QAClC,MAAM,EAAE,MAAM;KACf;IACD,yBAAyB,EAAE;QACzB,SAAS,EAAE,kBAAkB;QAC7B,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,KAAK;QACZ,UAAU,EAAE,MAAM;KACnB;IAED,qBAAqB,EAAE;QACrB,MAAM,EAAE,GAAG;KACZ;IACD,qBAAqB,EAAE;QACrB,MAAM,EAAE,GAAG;KACZ;IACD,qBAAqB,EAAE;QACrB,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,kBAAkB;QAC7B,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,KAAK;KACb;CACF,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,gBAAM,CAAC,GAAG,CAAC;IAChC,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,QAAQ;CACnB,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,IAAA,mBAAS,EAC5B,gBAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACzB,UAAU,EAAE,KAAK,CAAC,IAAI,IAAI,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM;IAChF,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,MAAM;CAChB,CAAC,CAAC,CACJ,CAAC;AAEF,MAAM,SAAS,GAAG,gBAAM,CAAC,GAAG,CAA0B,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1E,SAAS,EAAE,YAAY;IACvB,MAAM,EAAE,aAAa,WAAW,EAAE;IAClC,QAAQ,EAAE,MAAM;CACjB,CAAC,CAAC,CAAC;AAEJ,MAAM,KAAK,GAAG,IAAA,gBAAM,EAAC,SAAS,CAAC,CAAC;IAC9B,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,IAAA,gBAAM,EAAC,SAAS,CAAC,CAAC;IAClC,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,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAEpC,MAAM,yBAAyB,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IACtE,MAAM,uBAAuB,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IAEpE,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,CAAC,CAAC;IACrC,IAAA,0BAAa,EAAC,cAAc,EAAE,KAAK,CAAC,CAAC;IAErC,MAAM,WAAW,GAAG,IAAA,mBAAW,EAAC,CAAC,KAA0C,EAAQ,EAAE;QACnF,IAAI,CAAC,yBAAyB,CAAC,OAAO,IAAI,CAAC,uBAAuB,CAAC,OAAO;YAAE,OAAO;QACnF,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC1C,yBAAyB,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,GAAG,GAAG,MAAM,GAAG,CAAC;QACnE,uBAAuB,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,GAAG,GAAG,MAAM,GAAG,CAAC;IAClE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,IAAI,MAAM,IAAI,YAAY,CAAC,OAAO;YAAE,OAAO,CAAC,GAAG,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC;IACxG,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;IAEpB,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,IAAI,MAAM,IAAI,yBAAyB,CAAC,OAAO,IAAI,uBAAuB,CAAC,OAAO,EAAE,CAAC;YACnF,yBAAyB,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;YACvD,uBAAuB,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC;QACtD,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,MAAM;YAAE,IAAA,oCAAe,GAAE,CAAC;IAChC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,MAAM,CAAC,CAAC,CAAC,CACd,8BAAC,SAAS;QACR,8BAAC,KAAK,mBAAa,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,YAAY,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,GAAI;QACjH,8BAAC,cAAc;YACb,8BAAC,YAAY;gBACX,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,CACW,CACA;QACjB,8BAAC,cAAc,IAAC,GAAG,EAAE,yBAAyB;YAC5C,8BAAC,YAAY,IAAC,GAAG,EAAE,uBAAuB;gBACxC,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,CACW,CACA;QACjB,8BAAC,SAAS,IAAC,GAAG,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,EAAC,MAAM,EAAC,GAAG,EAAE,IAAI,GAAI,CACxE,CACb,CAAC,CAAC,CAAC,CACF,8BAAC,mBAAM,IAAC,IAAI,EAAE,EAAE,GAAI,CACrB,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/{lib/types → dist}/client/shared/components/ImagesView/SwapView.d.ts

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

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

@@ -0,0 +1,72 @@
+"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.SwapView = 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({
+    position: 'relative',
+    display: 'flex',
+});
+const BaseImage = theming_1.styled.img(({ borderColor }) => ({
+    boxSizing: 'border-box',
+    border: `1px solid ${borderColor}`,
+    maxWidth: '100%',
+}));
+const Image = (0, theming_1.styled)(BaseImage)({
+    position: 'absolute',
+});
+const DiffImage = (0, theming_1.styled)(BaseImage)({
+    cursor: 'pointer',
+    outline: 'none',
+    opacity: 0,
+    zIndex: 1,
+});
+exports.SwapView = (0, theming_1.withTheme)(({ theme, expect, actual, diff }) => {
+    const [image, setImage] = (0, react_1.useState)('actual');
+    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, image);
+    (0, helpers_js_1.useApplyScale)(actualImageRef, scale, image);
+    const handleChangeView = (0, react_1.useCallback)(() => {
+        setImage((prevImage) => (prevImage == 'actual' ? 'expect' : 'actual'));
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (loaded)
+            (0, readyForCapture_js_1.readyForCapture)();
+    }, [loaded]);
+    return loaded ? (react_1.default.createElement(Container, null,
+        react_1.default.createElement(Image, { ref: expectImageRef, borderColor: (0, common_js_1.getBorderColor)(theme, common_js_1.themeBorderColors.expect), alt: 'expect', src: expect, hidden: image != 'expect' }),
+        react_1.default.createElement(DiffImage, { ref: diffImageRef, borderColor: 'transparent', tabIndex: 0, alt: "diff", src: diff, onClick: handleChangeView }),
+        react_1.default.createElement(Image, { ref: actualImageRef, borderColor: (0, common_js_1.getBorderColor)(theme, common_js_1.themeBorderColors.actual), alt: 'actual', src: actual, hidden: image != 'actual' }))) : (react_1.default.createElement(components_1.Loader, { size: 64 }));
+});
+//# sourceMappingURL=SwapView.js.map

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

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

package/{lib/types/client/shared/components/ImagesView/ImagesView.d.ts → dist/client/shared/components/ImagesView/common.d.ts}

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-import { Images, ImagesViewMode } from '../../../../types';
 import { Theme } from '@storybook/theming';
 export declare const themeBorderColors: {
     actual: string;
@@ -7,7 +5,7 @@ export declare const themeBorderColors: {
     diff: string;
 };
 export declare function getBorderColor(theme: Theme, color: string): string;
-interface ViewProps {
+export interface ViewProps {
     actual: string;
     diff: string;
     expect: string;
@@ -15,11 +13,3 @@ interface ViewProps {
 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/dist/client/shared/components/ImagesView/common.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themeBorderColors = void 0;
+exports.getBorderColor = getBorderColor;
+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;
+}
+//# sourceMappingURL=common.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"common.js","sourceRoot":"","sources":["../../../../../src/client/shared/components/ImagesView/common.ts"],"names":[],"mappings":";;;AAUA,wCAEC;AAVY,QAAA,iBAAiB,GAAG;IAC/B,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE,UAAU;IAClB,IAAI,EAAE,WAAW;CAClB,CAAC;AAEF,MAAM,OAAO,GAAG,CAAC,KAAY,EAAE,KAAa,EAAwB,EAAE,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC;AAE5F,SAAgB,cAAc,CAAC,KAAY,EAAE,KAAa;IACxD,OAAO,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;AAC5D,CAAC"}

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwapView = exports.SlideView = exports.SideBySideView = exports.BlendView = exports.ImagesView = void 0;
+var ImagesView_js_1 = require("./ImagesView.js");
+Object.defineProperty(exports, "ImagesView", { enumerable: true, get: function () { return ImagesView_js_1.ImagesView; } });
+var BlendView_js_1 = require("./BlendView.js");
+Object.defineProperty(exports, "BlendView", { enumerable: true, get: function () { return BlendView_js_1.BlendView; } });
+var SideBySideView_js_1 = require("./SideBySideView.js");
+Object.defineProperty(exports, "SideBySideView", { enumerable: true, get: function () { return SideBySideView_js_1.SideBySideView; } });
+var SlideView_js_1 = require("./SlideView.js");
+Object.defineProperty(exports, "SlideView", { enumerable: true, get: function () { return SlideView_js_1.SlideView; } });
+var SwapView_js_1 = require("./SwapView.js");
+Object.defineProperty(exports, "SwapView", { enumerable: true, get: function () { return SwapView_js_1.SwapView; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/client/shared/components/ImagesView/index.ts"],"names":[],"mappings":";;;AAAA,iDAA6C;AAApC,2GAAA,UAAU,OAAA;AACnB,+CAA2C;AAAlC,yGAAA,SAAS,OAAA;AAClB,yDAAqD;AAA5C,mHAAA,cAAc,OAAA;AACvB,+CAA2C;AAAlC,yGAAA,SAAS,OAAA;AAClB,6CAAyC;AAAhC,uGAAA,QAAQ,OAAA"}

package/{lib/types → dist}/client/shared/components/PageFooter/PageFooter.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface PageFooterProps {
     canApprove: boolean;
     retriesCount: number;

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

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageFooter = PageFooter;
+const react_1 = __importDefault(require("react"));
+const components_1 = require("@storybook/components");
+const theming_1 = require("@storybook/theming");
+const Paging_js_1 = require("./Paging.js");
+const Container = (0, theming_1.withTheme)(theming_1.styled.div(({ theme }) => ({
+    display: 'flex',
+    padding: '20px',
+    justifyContent: 'space-between',
+    background: theme.background.content,
+})));
+const StyledButton = (0, theming_1.styled)(components_1.Button)({
+    transform: 'none',
+});
+function PageFooter({ canApprove, retriesCount, retry, onRetryChange, onApprove, }) {
+    return (react_1.default.createElement(Container, null,
+        react_1.default.createElement(Paging_js_1.Paging, { activePage: retry, onPageChange: onRetryChange, pagesCount: retriesCount }),
+        canApprove ? (react_1.default.createElement(StyledButton, { secondary: true, outline: true, onClick: onApprove }, 'Approve')) : null));
+}
+//# sourceMappingURL=PageFooter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageFooter.js","sourceRoot":"","sources":["../../../../../src/client/shared/components/PageFooter/PageFooter.tsx"],"names":[],"mappings":";;;;;AA0BA,gCAiBC;AA3CD,kDAA0B;AAC1B,sDAA+C;AAC/C,gDAAuD;AACvD,2CAAqC;AAUrC,MAAM,SAAS,GAAG,IAAA,mBAAS,EACzB,gBAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACzB,OAAO,EAAE,MAAM;IACf,OAAO,EAAE,MAAM;IACf,cAAc,EAAE,eAAe;IAC/B,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO;CACrC,CAAC,CAAC,CACJ,CAAC;AAEF,MAAM,YAAY,GAAG,IAAA,gBAAM,EAAC,mBAAM,CAAC,CAAC;IAClC,SAAS,EAAE,MAAM;CAClB,CAAC,CAAC;AAEH,SAAgB,UAAU,CAAC,EACzB,UAAU,EACV,YAAY,EACZ,KAAK,EACL,aAAa,EACb,SAAS,GACO;IAChB,OAAO,CACL,8BAAC,SAAS;QACR,8BAAC,kBAAM,IAAC,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,GAAI;QACnF,UAAU,CAAC,CAAC,CAAC,CACZ,8BAAC,YAAY,IAAC,SAAS,QAAC,OAAO,QAAC,OAAO,EAAE,SAAS,IAC/C,SAAS,CACG,CAChB,CAAC,CAAC,CAAC,IAAI,CACE,CACb,CAAC;AACJ,CAAC"}

package/{lib/types → dist}/client/shared/components/PageFooter/Paging.d.ts

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

package/dist/client/shared/components/PageFooter/Paging.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Paging = Paging;
+const react_1 = __importDefault(require("react"));
+const components_1 = require("@storybook/components");
+const theming_1 = require("@storybook/theming");
+const types_js_1 = require("../../../../types.js");
+const StyledButton = (0, theming_1.styled)(components_1.Button)({
+    transform: 'none',
+    marginLeft: '8px',
+});
+function Paging(props) {
+    const renderItem = (item, index) => {
+        switch (item) {
+            case '.': {
+                return (react_1.default.createElement(StyledButton, { disabled: true, key: `dots${index < 5 ? 'Left' : 'Right'}` }, '...'));
+            }
+            case 'forward': {
+                const disabled = props.activePage === props.pagesCount;
+                return (react_1.default.createElement(StyledButton, { outline: true, disabled: disabled, onClick: disabled
+                        ? types_js_1.noop
+                        : () => {
+                            goToPage(props.activePage + 1);
+                        }, key: "forward" },
+                    react_1.default.createElement("span", null,
+                        "Next ",
+                        react_1.default.createElement(components_1.Icons, { icon: "arrowright" }))));
+            }
+            default: {
+                return (react_1.default.createElement(StyledButton, { outline: true, secondary: props.activePage === item, key: item, onClick: () => {
+                        goToPage(item);
+                    } }, item));
+            }
+        }
+    };
+    const goToPage = (pageNumber) => {
+        if (1 <= pageNumber && pageNumber !== props.activePage && pageNumber <= props.pagesCount) {
+            props.onPageChange(pageNumber);
+        }
+    };
+    return react_1.default.createElement("div", null, getItems(props.activePage, props.pagesCount).map(renderItem));
+}
+function getItems(active, total) {
+    const result = [];
+    const left = Math.max(Math.min(active - 2, total - 4), 1);
+    const right = Math.min(Math.max(5, active + 2), total);
+    const hasLeftDots = left > 3;
+    const from = hasLeftDots ? left : 1;
+    const hasRightDots = right < total - 2;
+    const to = hasRightDots ? right : total;
+    if (hasLeftDots) {
+        result.push(1, '.');
+    }
+    for (let i = from; i <= to; ++i) {
+        result.push(i);
+    }
+    if (hasRightDots) {
+        result.push('.');
+    }
+    if (hasRightDots && isFinite(total)) {
+        result.push(total);
+    }
+    return result.concat('forward');
+}
+//# sourceMappingURL=Paging.js.map

package/dist/client/shared/components/PageFooter/Paging.js.map

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

package/{lib/types → dist}/client/shared/components/PageHeader/ImagePreview.d.ts

@@ -9,6 +9,6 @@ interface ImageSwapProps {
     error?: boolean;
 }
 export declare const ImagePreview: React.FC<Pick<ImageSwapProps, "error" | "imageName" | "url" | "onClick" | "isActive"> & {
-    theme?: Theme | undefined;
+    theme?: Theme;
 }>;
 export {};

package/dist/client/shared/components/PageHeader/ImagePreview.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImagePreview = void 0;
+const react_1 = __importDefault(require("react"));
+const theming_1 = require("@storybook/theming");
+const IMG_SIZE = 64;
+const DIAG_LENGTH = (2 * (IMG_SIZE - 8) ** 2) ** (1 / 2);
+const Button = theming_1.styled.button(({ borderColor }) => ({
+    appearance: 'none',
+    background: 'none',
+    color: 'inherit',
+    font: 'inherit',
+    cursor: 'pointer',
+    outline: 'none',
+    zIndex: 1,
+    margin: '0 10px',
+    border: '2px solid transparent',
+    borderColor: borderColor ?? 'transparent',
+    '&:first-of-type': {
+        marginLeft: 0,
+    },
+}));
+const Image = (0, theming_1.withTheme)(theming_1.styled.img(({ hasBorder, backgroundColor, theme }) => ({
+    maxHeight: `${IMG_SIZE}px`,
+    width: `${IMG_SIZE}px`,
+    overflow: 'hidden',
+    transform: hasBorder ? 'translateY(2px)' : undefined,
+    '&::before': {
+        content: "' '",
+        display: 'block',
+        height: `${IMG_SIZE - 8}px`,
+        width: `${IMG_SIZE - 8}px`,
+        margin: '4px',
+        backgroundColor: backgroundColor,
+        backgroundImage: `linear-gradient(
+      45deg,
+      rgba(0, 0, 0, 0) ${DIAG_LENGTH / 2 - 0.5}px,
+      ${theme.color.medium} ${DIAG_LENGTH / 2 - 0.5}px,
+      ${theme.color.medium} ${DIAG_LENGTH / 2 + 0.5}px,
+      rgba(0, 0, 0, 0) ${DIAG_LENGTH / 2 + 0.5}px
+    ),
+    linear-gradient(
+      315deg,
+      rgba(0, 0, 0, 0) ${DIAG_LENGTH / 2 + 0.2}px,
+      ${theme.color.medium} ${DIAG_LENGTH / 2 + 0.2}px,
+      ${theme.color.medium} ${DIAG_LENGTH / 2 + 1.2}px,
+      rgba(0, 0, 0, 0) ${DIAG_LENGTH / 2 + 1.2}px
+    )`,
+    },
+})));
+exports.ImagePreview = (0, theming_1.withTheme)(({ isActive, onClick, imageName, url, theme, error }) => {
+    const handleClick = () => {
+        onClick(imageName);
+    };
+    return (react_1.default.createElement(Button, { onClick: handleClick, borderColor: isActive ? theme.barSelectedColor : error ? theme.color.negative : undefined },
+        react_1.default.createElement(Image, { hasBorder: isActive || error, src: url, alt: imageName, backgroundColor: theme.background.content })));
+});
+//# sourceMappingURL=ImagePreview.js.map