creevey 0.9.0-beta.2 → 0.9.0-beta.21

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":"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"}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ViewPropsWithTheme } from './common.js';
+export declare const SwapView: React.FC<Pick<ViewPropsWithTheme, "diff" | "actual" | "expect"> & {
+    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

@@ -8,5 +8,7 @@ interface ImageSwapProps {
     theme: Theme;
     error?: boolean;
 }
-export declare const ImagePreview: React.SFC<import("emotion-theming/types/helper").AddOptionalTo<ImageSwapProps, "theme">>;
+export declare const ImagePreview: React.FC<Pick<ImageSwapProps, "error" | "imageName" | "url" | "onClick" | "isActive"> & {
+    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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePreview.js","sourceRoot":"","sources":["../../../../../src/client/shared/components/PageHeader/ImagePreview.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,gDAA8D;AAE9D,MAAM,QAAQ,GAAG,EAAE,CAAC;AACpB,MAAM,WAAW,GAAG,CAAC,CAAC,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AAWzD,MAAM,MAAM,GAAG,gBAAM,CAAC,MAAM,CAA2B,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC;IAC3E,UAAU,EAAE,MAAM;IAClB,UAAU,EAAE,MAAM;IAClB,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,uBAAuB;IAC/B,WAAW,EAAE,WAAW,IAAI,aAAa;IAEzC,iBAAiB,EAAE;QACjB,UAAU,EAAE,CAAC;KACd;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,KAAK,GAAG,IAAA,mBAAS,EACrB,gBAAM,CAAC,GAAG,CACR,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1C,SAAS,EAAE,GAAG,QAAQ,IAAI;IAC1B,KAAK,EAAE,GAAG,QAAQ,IAAI;IACtB,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS;IAEpD,WAAW,EAAE;QACX,OAAO,EAAE,KAAK;QACd,OAAO,EAAE,OAAO;QAChB,MAAM,EAAE,GAAG,QAAQ,GAAG,CAAC,IAAI;QAC3B,KAAK,EAAE,GAAG,QAAQ,GAAG,CAAC,IAAI;QAC1B,MAAM,EAAE,KAAK;QACb,eAAe,EAAE,eAAe;QAChC,eAAe,EAAE;;yBAEA,WAAW,GAAG,CAAC,GAAG,GAAG;QACtC,KAAK,CAAC,KAAK,CAAC,MAAM,IAAI,WAAW,GAAG,CAAC,GAAG,GAAG;QAC3C,KAAK,CAAC,KAAK,CAAC,MAAM,IAAI,WAAW,GAAG,CAAC,GAAG,GAAG;yBAC1B,WAAW,GAAG,CAAC,GAAG,GAAG;;;;yBAIrB,WAAW,GAAG,CAAC,GAAG,GAAG;QACtC,KAAK,CAAC,KAAK,CAAC,MAAM,IAAI,WAAW,GAAG,CAAC,GAAG,GAAG;QAC3C,KAAK,CAAC,KAAK,CAAC,MAAM,IAAI,WAAW,GAAG,CAAC,GAAG,GAAG;yBAC1B,WAAW,GAAG,CAAC,GAAG,GAAG;MACxC;KACC;CACF,CAAC,CACH,CACF,CAAC;AAEW,QAAA,YAAY,GAAG,IAAA,mBAAS,EACnC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAkB,EAAe,EAAE;IACnF,MAAM,WAAW,GAAG,GAAS,EAAE;QAC7B,OAAO,CAAC,SAAS,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,MAAM,IACL,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;QAEzF,8BAAC,KAAK,IAAC,SAAS,EAAE,QAAQ,IAAI,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,GAAI,CACrG,CACV,CAAC;AACJ,CAAC,CACF,CAAC"}

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

@@ -1,10 +1,7 @@
-/// <reference types="react" />
-import { ImagesViewMode, Images } from '../../../../types';
+import { ImagesViewMode, Images } from '../../../../types.js';
 interface PageHeaderProps {
     title: string[];
-    images?: Partial<{
-        [name: string]: Images;
-    }>;
+    images?: Partial<Record<string, Images>>;
     errorMessage?: string | null;
     showViewModes: boolean;
     showTitle?: boolean;

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

@@ -0,0 +1,86 @@
+"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.PageHeader = PageHeader;
+const react_1 = __importStar(require("react"));
+const components_1 = require("@storybook/components");
+const theming_1 = require("@storybook/theming");
+const helpers_js_1 = require("../../helpers.js");
+const ImagePreview_js_1 = require("./ImagePreview.js");
+const viewMode_js_1 = require("../../viewMode.js");
+const Container = theming_1.styled.div({
+    margin: '24px 44px 0',
+});
+const ErrorContainer = (0, theming_1.withTheme)(theming_1.styled.div(({ theme }) => ({
+    marginTop: '8px',
+    padding: '8px',
+    background: theme.background.negative,
+    color: theme.color.negative,
+    borderRadius: '2px',
+    display: 'flex',
+    alignItems: 'baseline',
+    '& svg': {
+        margin: '0 5px',
+        width: 8,
+        height: 8,
+    },
+    '& pre': {
+        margin: '0 4px',
+        padding: 0,
+        lineHeight: '22px',
+    },
+})));
+const H1 = theming_1.styled.h1({
+    margin: 0,
+    marginBottom: '8px',
+});
+const HeaderDivider = (0, theming_1.withTheme)(theming_1.styled.span(({ theme }) => ({
+    padding: '0 8px',
+    color: theme.color.mediumdark,
+})));
+const ImagesEntriesContainer = theming_1.styled.div({
+    display: 'flex',
+    margin: '16px 0 8px',
+});
+function PageHeader({ title, images = {}, errorMessage, showViewModes, showTitle, viewMode, imagesWithError = [], onImageChange, onViewModeChange, }) {
+    const imageEntires = Object.entries(images);
+    const [imageName, setImageName] = (0, react_1.useState)(imageEntires.at(0)?.[0] ?? '');
+    const handleImageChange = (name) => {
+        setImageName(name);
+        onImageChange(name);
+    };
+    const handleViewModeChange = (mode) => {
+        onViewModeChange(mode);
+    };
+    const error = errorMessage || imagesWithError.includes(imageName) ? (images[imageName]?.error ?? errorMessage) : null;
+    return showTitle || error || imageEntires.length > 1 || showViewModes ? (react_1.default.createElement(Container, null,
+        showTitle && (react_1.default.createElement(H1, null, title.flatMap((token) => [token, react_1.default.createElement(HeaderDivider, { key: token }, "/")]).slice(0, -1))),
+        error && (react_1.default.createElement(ErrorContainer, null,
+            react_1.default.createElement(components_1.Icons, { icon: "closeAlt" }),
+            react_1.default.createElement("pre", null, error))),
+        imageEntires.length > 1 ? (react_1.default.createElement(ImagesEntriesContainer, null, imageEntires.map(([name, image]) => (react_1.default.createElement(ImagePreview_js_1.ImagePreview, { key: name, imageName: name, url: `${(0, helpers_js_1.getImageUrl)(title, name)}/${image.actual}`, isActive: name === imageName, onClick: handleImageChange, error: imagesWithError.includes(name) }))))) : null,
+        showViewModes && (react_1.default.createElement(components_1.Tabs, { selected: viewMode, actions: { onSelect: handleViewModeChange } }, viewMode_js_1.viewModes.map((x) => (react_1.default.createElement("div", { key: x, id: x, title: x }))))))) : null;
+}
+//# sourceMappingURL=PageHeader.js.map

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

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