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

package/src/client/shared/components/ImagesView/BlendView.tsx

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

package/src/client/shared/components/ImagesView/ImagesView.tsx

@@ -0,0 +1,62 @@
+import React, { FunctionComponent } from 'react';
+import { styled, withTheme } from '@storybook/theming';
+import { SideBySideView } from './SideBySideView.js';
+import { SwapView } from './SwapView.js';
+import { SlideView } from './SlideView.js';
+import { BlendView } from './BlendView.js';
+import { Images, ImagesViewMode } from '../../../../types.js';
+import { getBorderColor, themeBorderColors, ViewProps } from './common.js';
+
+interface ImagesViewProps {
+  url: string;
+  image: Images;
+  canApprove: boolean;
+  mode: ImagesViewMode;
+}
+
+const views: { [mode in ImagesViewMode]: FunctionComponent<ViewProps> } = {
+  'side-by-side': SideBySideView,
+  swap: SwapView,
+  slide: SlideView,
+  blend: BlendView,
+};
+
+const Container = styled.div({
+  height: '100%',
+  display: 'flex',
+  textAlign: 'center',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '0 20px',
+});
+
+const ImageLink = styled.a({
+  lineHeight: 0,
+});
+
+const ActualImage = withTheme(
+  styled.img(({ theme }) => {
+    return {
+      border: `1px solid ${getBorderColor(theme, themeBorderColors.expect)}`,
+      maxWidth: '100%',
+    };
+  }),
+);
+
+export function ImagesView({ url, image, canApprove, mode }: ImagesViewProps): JSX.Element {
+  const ViewComponent = views[mode];
+
+  const { actual, diff, expect } = image;
+
+  return (
+    <Container>
+      {canApprove && diff && expect ? (
+        <ViewComponent actual={`${url}/${actual}`} diff={`${url}/${diff}`} expect={`${url}/${expect}`} />
+      ) : (
+        <ImageLink href={`${url}/${actual}`} target="_blank" rel="noopener noreferrer">
+          <ActualImage alt="actual" src={`${url}/${actual}`} />
+        </ImageLink>
+      )}
+    </Container>
+  );
+}

package/src/client/shared/components/ImagesView/SideBySideView.tsx

@@ -0,0 +1,139 @@
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Loader } from '@storybook/components';
+import { styled, withTheme } from '@storybook/theming';
+import { ViewPropsWithTheme, getBorderColor, themeBorderColors } from './common.js';
+import { useApplyScale, useLoadImages, useResizeObserver, getBorderSize } from '../../helpers.js';
+import { readyForCapture } from '../../../addon/readyForCapture.js';
+
+type LayoutDirection = 'horizontal' | 'vertical';
+
+const Container = styled.div({
+  display: 'flex',
+  flexWrap: 'nowrap',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%',
+  width: '100%',
+});
+
+const ImagesLayout = styled.div<{ layout: LayoutDirection }>(({ 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 = styled.a({
+  lineHeight: 0,
+  flexShrink: 0,
+});
+
+const ImageDiffLink = styled.a({
+  lineHeight: 0,
+});
+
+const Image = styled.img<{ borderColor: string }>(({ borderColor }) => ({
+  boxSizing: 'border-box',
+  border: `1px solid ${borderColor}`,
+  maxWidth: '100%',
+  flexShrink: 0,
+}));
+
+const DiffImage = styled(Image)({
+  flexShrink: 1,
+});
+
+export const SideBySideView = withTheme(({ actual, diff, expect, theme }: ViewPropsWithTheme): JSX.Element => {
+  const [layout, setLayout] = useState<LayoutDirection>('horizontal');
+  const [scale, setScale] = useState(1);
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const expectImageRef = useRef<HTMLImageElement | null>(null);
+  const diffImageRef = useRef<HTMLImageElement | null>(null);
+  const actualImageRef = useRef<HTMLImageElement | null>(null);
+
+  const loaded = useLoadImages(expect, diff, actual);
+
+  const calcScale = 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 = 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]);
+
+  useResizeObserver(containerRef, calcScale);
+  useLayoutEffect(calcScale, [calcScale]);
+  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]);
+
+  useApplyScale(expectImageRef, scale);
+  useApplyScale(actualImageRef, scale);
+
+  useEffect(() => {
+    if (loaded) readyForCapture();
+  }, [loaded]);
+
+  return (
+    <Container ref={containerRef}>
+      {loaded ? (
+        <ImagesLayout layout={layout}>
+          <ImageLink href={expect} target="_blank" rel="noopener noreferrer">
+            <Image
+              ref={expectImageRef}
+              borderColor={getBorderColor(theme, themeBorderColors.expect)}
+              alt="expect"
+              src={expect}
+            />
+          </ImageLink>
+          <ImageDiffLink href={diff} target="_blank" rel="noopener noreferrer">
+            <DiffImage
+              ref={diffImageRef}
+              borderColor={getBorderColor(theme, themeBorderColors.diff)}
+              alt="diff"
+              src={diff}
+            />
+          </ImageDiffLink>
+          <ImageLink href={actual} target="_blank" rel="noopener noreferrer">
+            <Image
+              ref={actualImageRef}
+              borderColor={getBorderColor(theme, themeBorderColors.actual)}
+              alt="actual"
+              src={actual}
+            />
+          </ImageLink>
+        </ImagesLayout>
+      ) : (
+        <Loader size={64} />
+      )}
+    </Container>
+  );
+});

package/{lib/esm/client/shared/components/ImagesView/SlideView.js → src/client/shared/components/ImagesView/SlideView.tsx}

@@ -1,13 +1,15 @@
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { styled, withTheme } from '@storybook/theming';
-import { getBorderColor, themeBorderColors } from './ImagesView';
-import { useApplyScale, useCalcScale, useLoadImages } from '../../helpers';
 import { Loader } from '@storybook/components';
-import { readyForCapture } from '../../../addon/readyForCapture';
+import { styled, withTheme } from '@storybook/theming';
+import { getBorderColor, themeBorderColors, ViewPropsWithTheme } from './common.js';
+import { useApplyScale, useCalcScale, useLoadImages } from '../../helpers.js';
+import { readyForCapture } from '../../../addon/readyForCapture.js';
+
 const Container = styled.div({
   position: 'relative',
-  display: 'flex'
+  display: 'flex',
 });
+
 const Input = styled.input({
   position: 'absolute',
   cursor: 'ew-resize',
@@ -19,125 +21,126 @@ const Input = styled.input({
   width: '100%',
   margin: '0',
   zIndex: 1,
+
   '&::-webkit-slider-runnable-track': {
-    height: '100%'
+    height: '100%',
   },
   '&::-webkit-slider-thumb': {
     boxShadow: '0 0 0 0.5px #888',
     height: '100%',
     width: '0px',
-    appearance: 'none'
+    appearance: 'none',
   },
+
   '&::-moz-focus-outer': {
-    border: '0'
+    border: '0',
   },
   '&::-moz-range-track': {
-    height: '0'
+    height: '0',
   },
   '&::-moz-range-thumb': {
     border: 'none',
     boxShadow: '0 0 0 0.5px #888',
     height: '100%',
-    width: '0px'
-  }
+    width: '0px',
+  },
 });
+
 const ImageContainer = styled.div({
   position: 'absolute',
   width: '100%',
   height: '100%',
-  overflow: 'hidden'
+  overflow: 'hidden',
 });
-const ImageWrapper = withTheme(styled.div(_ref => {
-  let {
-    theme
-  } = _ref;
-  return {
+
+const ImageWrapper = withTheme(
+  styled.div(({ theme }) => ({
     background: theme.base == 'light' ? theme.color.mediumlight : theme.color.darker,
     position: 'relative',
     width: '100%',
     height: '100%',
-    display: 'flex'
-  };
+    display: 'flex',
+  })),
+);
+
+const BaseImage = styled.img<{ borderColor: string }>(({ borderColor }) => ({
+  boxSizing: 'border-box',
+  border: `1px solid ${borderColor}`,
+  maxWidth: '100%',
 }));
-const BaseImage = styled.img(_ref2 => {
-  let {
-    borderColor
-  } = _ref2;
-  return {
-    boxSizing: 'border-box',
-    border: `1px solid ${borderColor}`,
-    maxWidth: '100%'
-  };
-});
+
 const Image = styled(BaseImage)({
-  position: 'absolute'
+  position: 'absolute',
 });
+
 const DiffImage = styled(BaseImage)({
-  opacity: '0'
+  opacity: '0',
 });
-export const SlideView = withTheme(_ref3 => {
-  let {
-    actual,
-    diff,
-    expect,
-    theme
-  } = _ref3;
+
+export const SlideView = withTheme(({ actual, diff, expect, theme }: ViewPropsWithTheme): JSX.Element => {
   const [step, setStep] = useState(0);
-  const expectedImageContainerRef = useRef(null);
-  const expectedImageWrapperRef = useRef(null);
-  const expectImageRef = useRef(null);
-  const diffImageRef = useRef(null);
-  const actualImageRef = useRef(null);
+
+  const expectedImageContainerRef = useRef<HTMLDivElement | null>(null);
+  const expectedImageWrapperRef = useRef<HTMLDivElement | null>(null);
+
+  const expectImageRef = useRef<HTMLImageElement | null>(null);
+  const diffImageRef = useRef<HTMLImageElement | null>(null);
+  const actualImageRef = useRef<HTMLImageElement | null>(null);
+
   const loaded = useLoadImages(expect, diff, actual);
   const scale = useCalcScale(diffImageRef, loaded);
+
   useApplyScale(expectImageRef, scale);
   useApplyScale(actualImageRef, scale);
-  const handleSlide = useCallback(event => {
+
+  const handleSlide = useCallback((event: React.ChangeEvent<HTMLInputElement>): void => {
     if (!expectedImageContainerRef.current || !expectedImageWrapperRef.current) return;
     const offset = Number(event.target.value);
     expectedImageContainerRef.current.style.right = `${100 - offset}%`;
     expectedImageWrapperRef.current.style.left = `${100 - offset}%`;
   }, []);
+
   useLayoutEffect(() => {
     if (loaded && diffImageRef.current) setStep(100 / diffImageRef.current.getBoundingClientRect().width);
   }, [loaded, scale]);
+
   useLayoutEffect(() => {
     if (loaded && expectedImageContainerRef.current && expectedImageWrapperRef.current) {
       expectedImageContainerRef.current.style.right = '100%';
       expectedImageWrapperRef.current.style.left = '100%';
     }
   }, [loaded]);
+
   useEffect(() => {
     if (loaded) readyForCapture();
   }, [loaded]);
-  return loaded ? /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Input, {
-    "data-testid": "slider",
-    type: "range",
-    min: 0,
-    max: 100,
-    defaultValue: 0,
-    step: step,
-    onChange: handleSlide
-  }), /*#__PURE__*/React.createElement(ImageContainer, null, /*#__PURE__*/React.createElement(ImageWrapper, null, /*#__PURE__*/React.createElement(Image, {
-    ref: actualImageRef,
-    borderColor: getBorderColor(theme, themeBorderColors.actual),
-    alt: "actual",
-    src: actual
-  }))), /*#__PURE__*/React.createElement(ImageContainer, {
-    ref: expectedImageContainerRef
-  }, /*#__PURE__*/React.createElement(ImageWrapper, {
-    ref: expectedImageWrapperRef
-  }, /*#__PURE__*/React.createElement(Image, {
-    ref: expectImageRef,
-    borderColor: getBorderColor(theme, themeBorderColors.expect),
-    alt: "expect",
-    src: expect
-  }))), /*#__PURE__*/React.createElement(DiffImage, {
-    ref: diffImageRef,
-    borderColor: 'transparent',
-    alt: "diff",
-    src: diff
-  })) : /*#__PURE__*/React.createElement(Loader, {
-    size: 64
-  });
-});
+
+  return loaded ? (
+    <Container>
+      <Input data-testid="slider" type="range" min={0} max={100} defaultValue={0} step={step} onChange={handleSlide} />
+      <ImageContainer>
+        <ImageWrapper>
+          <Image
+            ref={actualImageRef}
+            borderColor={getBorderColor(theme, themeBorderColors.actual)}
+            alt="actual"
+            src={actual}
+          />
+        </ImageWrapper>
+      </ImageContainer>
+      <ImageContainer ref={expectedImageContainerRef}>
+        <ImageWrapper ref={expectedImageWrapperRef}>
+          <Image
+            ref={expectImageRef}
+            borderColor={getBorderColor(theme, themeBorderColors.expect)}
+            alt="expect"
+            src={expect}
+          />
+        </ImageWrapper>
+      </ImageContainer>
+      <DiffImage ref={diffImageRef} borderColor={'transparent'} alt="diff" src={diff} />
+    </Container>
+  ) : (
+    <Loader size={64} />
+  );
+});

package/src/client/shared/components/ImagesView/SwapView.tsx

@@ -0,0 +1,81 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Loader } from '@storybook/components';
+import { styled, withTheme } from '@storybook/theming';
+import { ViewPropsWithTheme, getBorderColor, themeBorderColors } from './common.js';
+import { useApplyScale, useCalcScale, useLoadImages } from '../../helpers.js';
+import { readyForCapture } from '../../../addon/readyForCapture.js';
+
+type ImageState = keyof typeof themeBorderColors;
+
+const Container = styled.div({
+  position: 'relative',
+  display: 'flex',
+});
+
+const BaseImage = styled.img<{ borderColor: string }>(({ borderColor }) => ({
+  boxSizing: 'border-box',
+  border: `1px solid ${borderColor}`,
+  maxWidth: '100%',
+}));
+
+const Image = styled(BaseImage)({
+  position: 'absolute',
+});
+
+const DiffImage = styled(BaseImage)({
+  cursor: 'pointer',
+  outline: 'none',
+  opacity: 0,
+  zIndex: 1,
+});
+
+export const SwapView = withTheme(({ theme, expect, actual, diff }: ViewPropsWithTheme): JSX.Element => {
+  const [image, setImage] = useState<ImageState>('actual');
+
+  const expectImageRef = useRef<HTMLImageElement | null>(null);
+  const diffImageRef = useRef<HTMLImageElement | null>(null);
+  const actualImageRef = useRef<HTMLImageElement | null>(null);
+
+  const loaded = useLoadImages(expect, diff, actual);
+  const scale = useCalcScale(diffImageRef, loaded);
+
+  useApplyScale(expectImageRef, scale, image);
+  useApplyScale(actualImageRef, scale, image);
+
+  const handleChangeView = useCallback((): void => {
+    setImage((prevImage) => (prevImage == 'actual' ? 'expect' : 'actual'));
+  }, []);
+
+  useEffect(() => {
+    if (loaded) readyForCapture();
+  }, [loaded]);
+
+  return loaded ? (
+    <Container>
+      <Image
+        ref={expectImageRef}
+        borderColor={getBorderColor(theme, themeBorderColors.expect)}
+        alt={'expect'}
+        src={expect}
+        hidden={image != 'expect'}
+      />
+      <DiffImage
+        ref={diffImageRef}
+        borderColor={'transparent'}
+        tabIndex={0}
+        alt="diff"
+        src={diff}
+        onClick={handleChangeView}
+      />
+      <Image
+        ref={actualImageRef}
+        borderColor={getBorderColor(theme, themeBorderColors.actual)}
+        alt={'actual'}
+        src={actual}
+        hidden={image != 'actual'}
+      />
+    </Container>
+  ) : (
+    <Loader size={64} />
+  );
+});

package/src/client/shared/components/ImagesView/common.ts

@@ -0,0 +1,23 @@
+import { Color, Theme } from '@storybook/theming';
+
+export const themeBorderColors = {
+  actual: 'negative',
+  expect: 'positive',
+  diff: 'secondary',
+};
+
+const isColor = (theme: Theme, color: string): color is keyof Color => color in theme.color;
+
+export function getBorderColor(theme: Theme, color: string): string {
+  return isColor(theme, color) ? theme.color[color] : color;
+}
+
+export interface ViewProps {
+  actual: string;
+  diff: string;
+  expect: string;
+}
+
+export interface ViewPropsWithTheme extends ViewProps {
+  theme: Theme;
+}

package/src/client/shared/components/ImagesView/index.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/src/client/shared/components/PageFooter/PageFooter.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Button } from '@storybook/components';
+import { styled, withTheme } from '@storybook/theming';
+import { Paging } from './Paging.js';
+
+export interface PageFooterProps {
+  canApprove: boolean;
+  retriesCount: number;
+  retry: number;
+  onRetryChange: (retry: number) => void;
+  onApprove: () => void;
+}
+
+const Container = withTheme(
+  styled.div(({ theme }) => ({
+    display: 'flex',
+    padding: '20px',
+    justifyContent: 'space-between',
+    background: theme.background.content,
+  })),
+);
+
+const StyledButton = styled(Button)({
+  transform: 'none',
+});
+
+export function PageFooter({
+  canApprove,
+  retriesCount,
+  retry,
+  onRetryChange,
+  onApprove,
+}: PageFooterProps): JSX.Element {
+  return (
+    <Container>
+      <Paging activePage={retry} onPageChange={onRetryChange} pagesCount={retriesCount} />
+      {canApprove ? (
+        <StyledButton secondary outline onClick={onApprove}>
+          {'Approve'}
+        </StyledButton>
+      ) : null}
+    </Container>
+  );
+}