creevey 0.8.0-beta.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +30 -7
- package/README.md +9 -1
- package/addon/README.md +3 -0
- package/addon/package.json +4 -0
- package/docs/config.md +29 -26
- package/jest.config.js +6 -0
- package/lib/cjs/client/addon/Manager.js +122 -271
- package/lib/cjs/client/addon/components/Addon.js +17 -38
- package/lib/cjs/client/addon/components/Icons.js +11 -7
- package/lib/cjs/client/addon/components/Panel.js +17 -13
- package/lib/cjs/client/addon/components/TestSelect.js +11 -9
- package/lib/cjs/client/addon/components/Tools.js +21 -40
- package/lib/cjs/client/addon/decorator.js +1 -1
- package/lib/cjs/client/addon/index.js +31 -0
- package/lib/cjs/client/addon/preset.ie11.js +74 -0
- package/lib/cjs/client/addon/preset.js +13 -31
- package/lib/cjs/client/addon/readyForCapture.js +12 -0
- package/lib/cjs/client/addon/register.js +46 -70
- package/lib/cjs/client/addon/utils.js +6 -2
- package/lib/cjs/client/addon/withCreevey.js +221 -155
- package/lib/cjs/client/shared/components/ImagesView/BlendView.js +26 -24
- package/lib/cjs/client/shared/components/ImagesView/ImagesView.js +22 -18
- package/lib/cjs/client/shared/components/ImagesView/SideBySideView.js +44 -66
- package/lib/cjs/client/shared/components/ImagesView/SlideView.js +38 -50
- package/lib/cjs/client/shared/components/ImagesView/SwapView.js +26 -45
- package/lib/cjs/client/shared/components/ImagesView/index.js +9 -9
- package/lib/cjs/client/shared/components/PageFooter/PageFooter.js +12 -8
- package/lib/cjs/client/shared/components/PageFooter/Paging.js +14 -18
- package/lib/cjs/client/shared/components/PageHeader/ImagePreview.js +22 -18
- package/lib/cjs/client/shared/components/PageHeader/PageHeader.js +42 -67
- package/lib/cjs/client/shared/components/ResultsPage.js +39 -69
- package/lib/cjs/client/shared/creeveyClientApi.js +55 -82
- package/lib/cjs/client/shared/helpers.js +140 -211
- package/lib/cjs/client/shared/viewMode.js +5 -5
- package/lib/cjs/client/web/142.js +2 -0
- package/lib/cjs/client/web/142.js.LICENSE.txt +12 -0
- package/lib/cjs/client/web/32.js +1 -0
- package/lib/cjs/client/web/551.js +1 -0
- package/lib/cjs/client/web/566.js +2 -0
- package/lib/cjs/client/web/566.js.LICENSE.txt +31 -0
- package/lib/cjs/client/web/691.js +2 -0
- package/lib/cjs/client/web/691.js.LICENSE.txt +8 -0
- package/lib/cjs/client/web/725.js +1 -0
- package/lib/cjs/client/web/main.js +2 -38
- package/lib/cjs/client/web/main.js.LICENSE.txt +49 -0
- package/lib/cjs/creevey.js +3 -5
- package/lib/cjs/index.js +10 -15
- package/lib/cjs/server/config.js +5 -4
- package/lib/cjs/server/docker.js +3 -7
- package/lib/cjs/server/extract.js +7 -4
- package/lib/cjs/server/index.js +3 -5
- package/lib/cjs/server/loaders/babel/creevey-plugin.js +1 -3
- package/lib/cjs/server/loaders/babel/helpers.js +13 -23
- package/lib/cjs/server/loaders/babel/register.js +2 -4
- package/lib/cjs/server/loaders/webpack/compile.js +34 -51
- package/lib/cjs/server/loaders/webpack/creevey-loader.js +20 -22
- package/lib/cjs/server/loaders/webpack/dummy-hmr.js +2 -7
- package/lib/cjs/server/loaders/webpack/mdx-loader.js +2 -2
- package/lib/cjs/server/loaders/webpack/start.js +1 -1
- package/lib/cjs/server/logger.js +2 -1
- package/lib/cjs/server/master/index.js +4 -4
- package/lib/cjs/server/master/master.js +1 -0
- package/lib/cjs/server/master/pool.js +38 -47
- package/lib/cjs/server/master/runner.js +53 -66
- package/lib/cjs/server/master/server.js +78 -4
- package/lib/cjs/server/messages.js +128 -18
- package/lib/cjs/server/selenium/browser.js +129 -55
- package/lib/cjs/server/selenium/selenoid.js +5 -7
- package/lib/cjs/server/stories.js +58 -72
- package/lib/cjs/server/storybook/entry.js +7 -22
- package/lib/cjs/server/storybook/helpers.js +20 -27
- package/lib/cjs/server/storybook/providers/browser.js +74 -0
- package/lib/cjs/server/storybook/{nodejs-provider.js → providers/nodejs.js} +37 -20
- package/lib/cjs/server/update.js +1 -5
- package/lib/cjs/server/utils.js +26 -35
- package/lib/cjs/server/worker/helpers.js +2 -6
- package/lib/cjs/server/worker/reporter.js +8 -20
- package/lib/cjs/server/worker/worker.js +21 -19
- package/lib/cjs/shared/index.js +101 -0
- package/lib/cjs/shared/serializeRegExp.js +42 -0
- package/lib/cjs/types.js +11 -6
- package/lib/esm/client/addon/Manager.js +122 -271
- package/lib/esm/client/addon/components/Addon.js +15 -34
- package/lib/esm/client/addon/components/Icons.js +10 -6
- package/lib/esm/client/addon/components/Panel.js +17 -13
- package/lib/esm/client/addon/components/TestSelect.js +11 -9
- package/lib/esm/client/addon/components/Tools.js +19 -36
- package/lib/esm/client/addon/decorator.js +1 -1
- package/lib/esm/client/addon/index.js +2 -0
- package/lib/esm/client/addon/preset.ie11.js +59 -0
- package/lib/esm/client/addon/preset.js +12 -26
- package/lib/esm/client/addon/readyForCapture.js +5 -0
- package/lib/esm/client/addon/register.js +42 -66
- package/lib/esm/client/addon/utils.js +3 -2
- package/lib/esm/client/addon/withCreevey.js +209 -156
- package/lib/esm/client/shared/components/ImagesView/BlendView.js +23 -20
- package/lib/esm/client/shared/components/ImagesView/ImagesView.js +21 -17
- package/lib/esm/client/shared/components/ImagesView/SideBySideView.js +42 -63
- package/lib/esm/client/shared/components/ImagesView/SlideView.js +36 -47
- package/lib/esm/client/shared/components/ImagesView/SwapView.js +24 -42
- package/lib/esm/client/shared/components/PageFooter/PageFooter.js +12 -8
- package/lib/esm/client/shared/components/PageFooter/Paging.js +14 -18
- package/lib/esm/client/shared/components/PageHeader/ImagePreview.js +22 -18
- package/lib/esm/client/shared/components/PageHeader/PageHeader.js +37 -60
- package/lib/esm/client/shared/components/ResultsPage.js +36 -64
- package/lib/esm/client/shared/creeveyClientApi.js +57 -84
- package/lib/esm/client/shared/helpers.js +124 -195
- package/lib/esm/client/shared/viewMode.js +4 -4
- package/lib/esm/creevey.js +3 -5
- package/lib/esm/index.js +2 -3
- package/lib/esm/server/config.js +4 -5
- package/lib/esm/server/docker.js +2 -2
- package/lib/esm/server/extract.js +6 -4
- package/lib/esm/server/index.js +3 -4
- package/lib/esm/server/loaders/babel/creevey-plugin.js +1 -3
- package/lib/esm/server/loaders/babel/helpers.js +12 -22
- package/lib/esm/server/loaders/babel/register.js +3 -5
- package/lib/esm/server/loaders/webpack/compile.js +35 -52
- package/lib/esm/server/loaders/webpack/creevey-loader.js +9 -10
- package/lib/esm/server/loaders/webpack/dummy-hmr.js +2 -6
- package/lib/esm/server/loaders/webpack/mdx-loader.js +2 -2
- package/lib/esm/server/loaders/webpack/start.js +1 -1
- package/lib/esm/server/master/index.js +4 -4
- package/lib/esm/server/master/master.js +1 -0
- package/lib/esm/server/master/pool.js +38 -49
- package/lib/esm/server/master/runner.js +53 -66
- package/lib/esm/server/master/server.js +76 -6
- package/lib/esm/server/messages.js +118 -14
- package/lib/esm/server/selenium/browser.js +126 -57
- package/lib/esm/server/selenium/selenoid.js +4 -6
- package/lib/esm/server/stories.js +58 -70
- package/lib/esm/server/storybook/entry.js +5 -22
- package/lib/esm/server/storybook/helpers.js +11 -20
- package/lib/esm/server/storybook/providers/browser.js +60 -0
- package/lib/esm/server/storybook/{nodejs-provider.js → providers/nodejs.js} +35 -19
- package/lib/esm/server/update.js +1 -5
- package/lib/esm/server/utils.js +18 -31
- package/lib/esm/server/worker/helpers.js +2 -6
- package/lib/esm/server/worker/reporter.js +8 -20
- package/lib/esm/server/worker/worker.js +22 -20
- package/lib/esm/shared/index.js +78 -0
- package/lib/esm/shared/serializeRegExp.js +24 -0
- package/lib/esm/types.js +3 -0
- package/lib/types/client/addon/Manager.d.ts +2 -2
- package/lib/types/client/addon/components/TestSelect.d.ts +0 -1
- package/lib/types/client/addon/index.d.ts +2 -0
- package/lib/types/client/addon/preset.d.ts +2 -1
- package/lib/types/client/addon/preset.ie11.d.ts +10 -0
- package/lib/types/client/addon/readyForCapture.d.ts +6 -0
- package/lib/types/client/addon/utils.d.ts +1 -0
- package/lib/types/client/addon/withCreevey.d.ts +13 -2
- package/lib/types/client/shared/components/ImagesView/BlendView.d.ts +1 -1
- package/lib/types/client/shared/components/ImagesView/ImagesView.d.ts +0 -1
- package/lib/types/client/shared/components/ImagesView/SideBySideView.d.ts +1 -1
- package/lib/types/client/shared/components/ImagesView/SlideView.d.ts +1 -1
- package/lib/types/client/shared/components/ImagesView/SwapView.d.ts +1 -1
- package/lib/types/client/shared/components/PageFooter/PageFooter.d.ts +0 -1
- package/lib/types/client/shared/components/PageFooter/Paging.d.ts +0 -1
- package/lib/types/client/shared/components/PageHeader/ImagePreview.d.ts +1 -1
- package/lib/types/client/shared/components/PageHeader/PageHeader.d.ts +0 -1
- package/lib/types/client/shared/components/ResultsPage.d.ts +1 -1
- package/lib/types/client/web/CreeveyApp.d.ts +0 -1
- package/lib/types/client/web/CreeveyLoader.d.ts +1 -2
- package/lib/types/client/web/CreeveyView/SideBar/Checkbox.d.ts +1 -1
- package/lib/types/client/web/CreeveyView/SideBar/SideBarHeader.d.ts +0 -1
- package/lib/types/client/web/CreeveyView/SideBar/SuiteLink.d.ts +6 -6
- package/lib/types/client/web/CreeveyView/SideBar/TestLink.d.ts +0 -1
- package/lib/types/client/web/CreeveyView/SideBar/TestStatusIcon.d.ts +1 -1
- package/lib/types/client/web/CreeveyView/SideBar/TestsStatus.d.ts +1 -1
- package/lib/types/index.d.ts +0 -1
- package/lib/types/server/loaders/babel/register.d.ts +1 -1
- package/lib/types/server/loaders/webpack/creevey-loader.d.ts +4 -2
- package/lib/types/server/logger.d.ts +6 -2
- package/lib/types/server/master/master.d.ts +1 -0
- package/lib/types/server/master/pool.d.ts +1 -0
- package/lib/types/server/master/server.d.ts +1 -1
- package/lib/types/server/messages.d.ts +17 -6
- package/lib/types/server/selenium/browser.d.ts +5 -2
- package/lib/types/server/stories.d.ts +2 -2
- package/lib/types/server/storybook/entry.d.ts +2 -3
- package/lib/types/server/storybook/helpers.d.ts +1 -1
- package/lib/types/server/storybook/providers/browser.d.ts +4 -0
- package/lib/types/server/storybook/providers/nodejs.d.ts +9 -0
- package/lib/types/server/utils.d.ts +5 -1
- package/lib/types/server/worker/helpers.d.ts +2 -1
- package/lib/types/shared/index.d.ts +7 -0
- package/lib/types/shared/serializeRegExp.d.ts +9 -0
- package/lib/types/types.d.ts +32 -5
- package/package.json +120 -103
- package/preset/ie11.js +5 -0
- package/{preset.js → preset/index.js} +2 -2
- package/types/mdx.d.ts +3 -2
- package/types/mocha.d.ts +1 -0
- package/lib/cjs/client/web/1.js +0 -13
- package/lib/cjs/client/web/2.js +0 -1
- package/lib/cjs/shared.js +0 -35
- package/lib/esm/shared.js +0 -22
- package/lib/types/server/storybook/nodejs-provider.d.ts +0 -5
- package/lib/types/shared.d.ts +0 -4
@@ -1,21 +1,10 @@
|
|
1
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
2
|
-
|
3
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
4
|
-
|
5
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
6
|
-
|
7
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
8
|
-
|
9
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
10
|
-
|
11
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
12
|
-
|
13
1
|
import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
|
14
2
|
import { getBorderColor, themeBorderColors } from './ImagesView';
|
15
3
|
import { styled, withTheme } from '@storybook/theming';
|
16
4
|
import { useApplyScale, useLoadImages, useResizeObserver, getBorderSize } from '../../helpers';
|
17
5
|
import { Loader } from '@storybook/components';
|
18
|
-
|
6
|
+
import { readyForCapture } from '../../../addon/readyForCapture';
|
7
|
+
const Container = styled.div({
|
19
8
|
display: 'flex',
|
20
9
|
flexWrap: 'nowrap',
|
21
10
|
alignItems: 'center',
|
@@ -23,8 +12,10 @@ var Container = styled.div({
|
|
23
12
|
height: '100%',
|
24
13
|
width: '100%'
|
25
14
|
});
|
26
|
-
|
27
|
-
|
15
|
+
const ImagesLayout = styled.div(_ref => {
|
16
|
+
let {
|
17
|
+
layout
|
18
|
+
} = _ref;
|
28
19
|
return {
|
29
20
|
display: 'flex',
|
30
21
|
alignItems: 'flex-start',
|
@@ -36,15 +27,17 @@ var ImagesLayout = styled.div(function (_ref) {
|
|
36
27
|
}
|
37
28
|
};
|
38
29
|
});
|
39
|
-
|
30
|
+
const ImageLink = styled.a({
|
40
31
|
lineHeight: 0,
|
41
32
|
flexShrink: 0
|
42
33
|
});
|
43
|
-
|
34
|
+
const ImageDiffLink = styled.a({
|
44
35
|
lineHeight: 0
|
45
36
|
});
|
46
|
-
|
47
|
-
|
37
|
+
const Image = styled.img(_ref2 => {
|
38
|
+
let {
|
39
|
+
borderColor
|
40
|
+
} = _ref2;
|
48
41
|
return {
|
49
42
|
boxSizing: 'border-box',
|
50
43
|
border: "1px solid ".concat(borderColor),
|
@@ -52,68 +45,54 @@ var Image = styled.img(function (_ref2) {
|
|
52
45
|
flexShrink: 0
|
53
46
|
};
|
54
47
|
});
|
55
|
-
|
48
|
+
const DiffImage = styled(Image)({
|
56
49
|
flexShrink: 1
|
57
50
|
});
|
58
|
-
export
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
var actualImageRef = useRef(null);
|
78
|
-
var loaded = useLoadImages(expect, diff, actual);
|
79
|
-
var calcScale = useCallback(function () {
|
80
|
-
var containerElement = containerRef.current;
|
81
|
-
var expectImage = expectImageRef.current;
|
82
|
-
var diffImage = diffImageRef.current;
|
83
|
-
var actualImage = actualImageRef.current;
|
51
|
+
export const SideBySideView = withTheme(_ref3 => {
|
52
|
+
let {
|
53
|
+
actual,
|
54
|
+
diff,
|
55
|
+
expect,
|
56
|
+
theme
|
57
|
+
} = _ref3;
|
58
|
+
const [layout, setLayout] = useState('horizontal');
|
59
|
+
const [scale, setScale] = useState(1);
|
60
|
+
const containerRef = useRef(null);
|
61
|
+
const expectImageRef = useRef(null);
|
62
|
+
const diffImageRef = useRef(null);
|
63
|
+
const actualImageRef = useRef(null);
|
64
|
+
const loaded = useLoadImages(expect, diff, actual);
|
65
|
+
const calcScale = useCallback(() => {
|
66
|
+
const containerElement = containerRef.current;
|
67
|
+
const expectImage = expectImageRef.current;
|
68
|
+
const diffImage = diffImageRef.current;
|
69
|
+
const actualImage = actualImageRef.current;
|
84
70
|
if (!containerElement || !expectImage || !actualImage || !diffImage || !loaded) return setScale(1);
|
85
|
-
|
71
|
+
const borderSize = getBorderSize(diffImage);
|
86
72
|
|
87
73
|
if (layout == 'vertical') {
|
88
|
-
|
74
|
+
const ratio = (diffImage.getBoundingClientRect().width - borderSize * 2) / diffImage.naturalWidth;
|
89
75
|
setScale(Math.min(1, ratio));
|
90
76
|
}
|
91
77
|
|
92
78
|
if (layout == 'horizontal') {
|
93
|
-
|
94
|
-
(containerElement.getBoundingClientRect().width - 40 - borderSize * 6) / [expectImage, diffImage, actualImage].map(
|
95
|
-
|
96
|
-
}).reduce(function (a, b) {
|
97
|
-
return a + b;
|
98
|
-
}, 0);
|
99
|
-
|
100
|
-
setScale(Math.min(1, _ratio));
|
79
|
+
const ratio = // NOTE: 40px because we have two margins by 20px and 6px for borders
|
80
|
+
(containerElement.getBoundingClientRect().width - 40 - borderSize * 6) / [expectImage, diffImage, actualImage].map(image => image.naturalWidth).reduce((a, b) => a + b, 0);
|
81
|
+
setScale(Math.min(1, ratio));
|
101
82
|
}
|
102
83
|
}, [loaded, layout]);
|
103
84
|
useResizeObserver(containerRef, calcScale);
|
104
85
|
useLayoutEffect(calcScale, [calcScale]);
|
105
|
-
useLayoutEffect(
|
106
|
-
|
86
|
+
useLayoutEffect(() => {
|
87
|
+
const diffImage = diffImageRef.current;
|
107
88
|
if (!diffImage || !loaded) return;
|
108
|
-
|
89
|
+
const ratio = diffImage.naturalWidth / diffImage.naturalHeight;
|
109
90
|
setLayout(ratio >= 2 ? 'vertical' : 'horizontal');
|
110
91
|
}, [loaded]);
|
111
92
|
useApplyScale(expectImageRef, scale);
|
112
93
|
useApplyScale(actualImageRef, scale);
|
113
|
-
useEffect(
|
114
|
-
|
115
|
-
|
116
|
-
if (loaded) (_window$__CREEVEY_SET = (_window = window).__CREEVEY_SET_READY_FOR_CAPTURE__) === null || _window$__CREEVEY_SET === void 0 ? void 0 : _window$__CREEVEY_SET.call(_window);
|
94
|
+
useEffect(() => {
|
95
|
+
if (loaded) readyForCapture();
|
117
96
|
}, [loaded]);
|
118
97
|
return /*#__PURE__*/React.createElement(Container, {
|
119
98
|
ref: containerRef
|
@@ -1,25 +1,14 @@
|
|
1
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
2
|
-
|
3
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
4
|
-
|
5
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
6
|
-
|
7
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
8
|
-
|
9
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
10
|
-
|
11
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
12
|
-
|
13
1
|
import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
|
14
2
|
import { styled, withTheme } from '@storybook/theming';
|
15
3
|
import { getBorderColor, themeBorderColors } from './ImagesView';
|
16
4
|
import { useApplyScale, useCalcScale, useLoadImages } from '../../helpers';
|
17
5
|
import { Loader } from '@storybook/components';
|
18
|
-
|
6
|
+
import { readyForCapture } from '../../../addon/readyForCapture';
|
7
|
+
const Container = styled.div({
|
19
8
|
position: 'relative',
|
20
9
|
display: 'flex'
|
21
10
|
});
|
22
|
-
|
11
|
+
const Input = styled.input({
|
23
12
|
position: 'absolute',
|
24
13
|
cursor: 'ew-resize',
|
25
14
|
appearance: 'none',
|
@@ -52,14 +41,16 @@ var Input = styled.input({
|
|
52
41
|
width: '0px'
|
53
42
|
}
|
54
43
|
});
|
55
|
-
|
44
|
+
const ImageContainer = styled.div({
|
56
45
|
position: 'absolute',
|
57
46
|
width: '100%',
|
58
47
|
height: '100%',
|
59
48
|
overflow: 'hidden'
|
60
49
|
});
|
61
|
-
|
62
|
-
|
50
|
+
const ImageWrapper = withTheme(styled.div(_ref => {
|
51
|
+
let {
|
52
|
+
theme
|
53
|
+
} = _ref;
|
63
54
|
return {
|
64
55
|
background: theme.base == 'light' ? theme.color.mediumlight : theme.color.darker,
|
65
56
|
position: 'relative',
|
@@ -68,61 +59,59 @@ var ImageWrapper = withTheme(styled.div(function (_ref) {
|
|
68
59
|
display: 'flex'
|
69
60
|
};
|
70
61
|
}));
|
71
|
-
|
72
|
-
|
62
|
+
const BaseImage = styled.img(_ref2 => {
|
63
|
+
let {
|
64
|
+
borderColor
|
65
|
+
} = _ref2;
|
73
66
|
return {
|
74
67
|
boxSizing: 'border-box',
|
75
68
|
border: "1px solid ".concat(borderColor),
|
76
69
|
maxWidth: '100%'
|
77
70
|
};
|
78
71
|
});
|
79
|
-
|
72
|
+
const Image = styled(BaseImage)({
|
80
73
|
position: 'absolute'
|
81
74
|
});
|
82
|
-
|
75
|
+
const DiffImage = styled(BaseImage)({
|
83
76
|
opacity: '0'
|
84
77
|
});
|
85
|
-
export
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
var actualImageRef = useRef(null);
|
101
|
-
var loaded = useLoadImages(expect, diff, actual);
|
102
|
-
var scale = useCalcScale(diffImageRef, loaded);
|
78
|
+
export const SlideView = withTheme(_ref3 => {
|
79
|
+
let {
|
80
|
+
actual,
|
81
|
+
diff,
|
82
|
+
expect,
|
83
|
+
theme
|
84
|
+
} = _ref3;
|
85
|
+
const [step, setStep] = useState(0);
|
86
|
+
const expectedImageContainerRef = useRef(null);
|
87
|
+
const expectedImageWrapperRef = useRef(null);
|
88
|
+
const expectImageRef = useRef(null);
|
89
|
+
const diffImageRef = useRef(null);
|
90
|
+
const actualImageRef = useRef(null);
|
91
|
+
const loaded = useLoadImages(expect, diff, actual);
|
92
|
+
const scale = useCalcScale(diffImageRef, loaded);
|
103
93
|
useApplyScale(expectImageRef, scale);
|
104
94
|
useApplyScale(actualImageRef, scale);
|
105
|
-
|
95
|
+
const handleSlide = useCallback(event => {
|
106
96
|
if (!expectedImageContainerRef.current || !expectedImageWrapperRef.current) return;
|
107
|
-
|
97
|
+
const offset = Number(event.target.value);
|
108
98
|
expectedImageContainerRef.current.style.right = "".concat(100 - offset, "%");
|
109
99
|
expectedImageWrapperRef.current.style.left = "".concat(100 - offset, "%");
|
110
100
|
}, []);
|
111
|
-
useLayoutEffect(
|
101
|
+
useLayoutEffect(() => {
|
112
102
|
if (loaded && diffImageRef.current) setStep(100 / diffImageRef.current.getBoundingClientRect().width);
|
113
103
|
}, [loaded, scale]);
|
114
|
-
useLayoutEffect(
|
104
|
+
useLayoutEffect(() => {
|
115
105
|
if (loaded && expectedImageContainerRef.current && expectedImageWrapperRef.current) {
|
116
106
|
expectedImageContainerRef.current.style.right = '100%';
|
117
107
|
expectedImageWrapperRef.current.style.left = '100%';
|
118
108
|
}
|
119
109
|
}, [loaded]);
|
120
|
-
useEffect(
|
121
|
-
|
122
|
-
|
123
|
-
if (loaded) (_window$__CREEVEY_SET = (_window = window).__CREEVEY_SET_READY_FOR_CAPTURE__) === null || _window$__CREEVEY_SET === void 0 ? void 0 : _window$__CREEVEY_SET.call(_window);
|
110
|
+
useEffect(() => {
|
111
|
+
if (loaded) readyForCapture();
|
124
112
|
}, [loaded]);
|
125
113
|
return loaded ? /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Input, {
|
114
|
+
"data-testid": "slider",
|
126
115
|
type: "range",
|
127
116
|
min: 0,
|
128
117
|
max: 100,
|
@@ -1,68 +1,50 @@
|
|
1
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
2
|
-
|
3
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
4
|
-
|
5
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
6
|
-
|
7
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
8
|
-
|
9
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
10
|
-
|
11
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
12
|
-
|
13
1
|
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
14
2
|
import { getBorderColor, themeBorderColors } from './ImagesView';
|
15
3
|
import { styled, withTheme } from '@storybook/theming';
|
16
4
|
import { useApplyScale, useCalcScale, useLoadImages } from '../../helpers';
|
17
5
|
import { Loader } from '@storybook/components';
|
18
|
-
|
6
|
+
import { readyForCapture } from '../../../addon/readyForCapture';
|
7
|
+
const Container = styled.div({
|
19
8
|
position: 'relative',
|
20
9
|
display: 'flex'
|
21
10
|
});
|
22
|
-
|
23
|
-
|
11
|
+
const BaseImage = styled.img(_ref => {
|
12
|
+
let {
|
13
|
+
borderColor
|
14
|
+
} = _ref;
|
24
15
|
return {
|
25
16
|
boxSizing: 'border-box',
|
26
17
|
border: "1px solid ".concat(borderColor),
|
27
18
|
maxWidth: '100%'
|
28
19
|
};
|
29
20
|
});
|
30
|
-
|
21
|
+
const Image = styled(BaseImage)({
|
31
22
|
position: 'absolute'
|
32
23
|
});
|
33
|
-
|
24
|
+
const DiffImage = styled(BaseImage)({
|
34
25
|
cursor: 'pointer',
|
35
26
|
outline: 'none',
|
36
27
|
opacity: 0,
|
37
28
|
zIndex: 1
|
38
29
|
});
|
39
|
-
export
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
var actualImageRef = useRef(null);
|
53
|
-
var loaded = useLoadImages(expect, diff, actual);
|
54
|
-
var scale = useCalcScale(diffImageRef, loaded);
|
30
|
+
export const SwapView = withTheme(_ref2 => {
|
31
|
+
let {
|
32
|
+
theme,
|
33
|
+
expect,
|
34
|
+
actual,
|
35
|
+
diff
|
36
|
+
} = _ref2;
|
37
|
+
const [image, setImage] = useState('actual');
|
38
|
+
const expectImageRef = useRef(null);
|
39
|
+
const diffImageRef = useRef(null);
|
40
|
+
const actualImageRef = useRef(null);
|
41
|
+
const loaded = useLoadImages(expect, diff, actual);
|
42
|
+
const scale = useCalcScale(diffImageRef, loaded);
|
55
43
|
useApplyScale(expectImageRef, scale, image);
|
56
44
|
useApplyScale(actualImageRef, scale, image);
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
});
|
61
|
-
}, []);
|
62
|
-
useEffect(function () {
|
63
|
-
var _window$__CREEVEY_SET, _window;
|
64
|
-
|
65
|
-
if (loaded) (_window$__CREEVEY_SET = (_window = window).__CREEVEY_SET_READY_FOR_CAPTURE__) === null || _window$__CREEVEY_SET === void 0 ? void 0 : _window$__CREEVEY_SET.call(_window);
|
45
|
+
const handleChangeView = useCallback(() => setImage(prevImage => prevImage == 'actual' ? 'expect' : 'actual'), []);
|
46
|
+
useEffect(() => {
|
47
|
+
if (loaded) readyForCapture();
|
66
48
|
}, [loaded]);
|
67
49
|
return loaded ? /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Image, {
|
68
50
|
ref: expectImageRef,
|
@@ -2,8 +2,10 @@ import React from 'react';
|
|
2
2
|
import { Paging } from './Paging';
|
3
3
|
import { styled, withTheme } from '@storybook/theming';
|
4
4
|
import { Button } from '@storybook/components';
|
5
|
-
|
6
|
-
|
5
|
+
const Container = withTheme(styled.div(_ref => {
|
6
|
+
let {
|
7
|
+
theme
|
8
|
+
} = _ref;
|
7
9
|
return {
|
8
10
|
display: 'flex',
|
9
11
|
padding: '20px',
|
@@ -11,15 +13,17 @@ var Container = withTheme(styled.div(function (_ref) {
|
|
11
13
|
background: theme.background.content
|
12
14
|
};
|
13
15
|
}));
|
14
|
-
|
16
|
+
const StyledButton = styled(Button)({
|
15
17
|
transform: 'none'
|
16
18
|
});
|
17
19
|
export function PageFooter(_ref2) {
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
20
|
+
let {
|
21
|
+
canApprove,
|
22
|
+
retriesCount,
|
23
|
+
retry,
|
24
|
+
onRetryChange,
|
25
|
+
onApprove
|
26
|
+
} = _ref2;
|
23
27
|
return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Paging, {
|
24
28
|
activePage: retry,
|
25
29
|
onPageChange: onRetryChange,
|
@@ -2,12 +2,12 @@ import React from 'react';
|
|
2
2
|
import { Button, Icons } from '@storybook/components';
|
3
3
|
import { noop } from '../../../../types';
|
4
4
|
import { styled } from '@storybook/theming';
|
5
|
-
|
5
|
+
const StyledButton = styled(Button)({
|
6
6
|
transform: 'none',
|
7
7
|
marginLeft: '8px'
|
8
8
|
});
|
9
9
|
export function Paging(props) {
|
10
|
-
|
10
|
+
const renderItem = (item, index) => {
|
11
11
|
switch (item) {
|
12
12
|
case '.':
|
13
13
|
{
|
@@ -19,13 +19,11 @@ export function Paging(props) {
|
|
19
19
|
|
20
20
|
case 'forward':
|
21
21
|
{
|
22
|
-
|
22
|
+
const disabled = props.activePage === props.pagesCount;
|
23
23
|
return /*#__PURE__*/React.createElement(StyledButton, {
|
24
24
|
outline: true,
|
25
25
|
disabled: disabled,
|
26
|
-
onClick: disabled ? noop :
|
27
|
-
return goToPage(props.activePage + 1);
|
28
|
-
},
|
26
|
+
onClick: disabled ? noop : () => goToPage(props.activePage + 1),
|
29
27
|
key: "forward"
|
30
28
|
}, /*#__PURE__*/React.createElement("span", null, "Next ", /*#__PURE__*/React.createElement(Icons, {
|
31
29
|
icon: "arrowright"
|
@@ -38,15 +36,13 @@ export function Paging(props) {
|
|
38
36
|
outline: true,
|
39
37
|
secondary: props.activePage === item,
|
40
38
|
key: item,
|
41
|
-
onClick:
|
42
|
-
return goToPage(item);
|
43
|
-
}
|
39
|
+
onClick: () => goToPage(item)
|
44
40
|
}, item);
|
45
41
|
}
|
46
42
|
}
|
47
43
|
};
|
48
44
|
|
49
|
-
|
45
|
+
const goToPage = pageNumber => {
|
50
46
|
if (1 <= pageNumber && pageNumber !== props.activePage && pageNumber <= props.pagesCount) {
|
51
47
|
props.onPageChange(pageNumber);
|
52
48
|
}
|
@@ -56,19 +52,19 @@ export function Paging(props) {
|
|
56
52
|
}
|
57
53
|
|
58
54
|
function getItems(active, total) {
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
55
|
+
const result = [];
|
56
|
+
const left = Math.max(Math.min(active - 2, total - 4), 1);
|
57
|
+
const right = Math.min(Math.max(5, active + 2), total);
|
58
|
+
const hasLeftDots = left > 3;
|
59
|
+
const from = hasLeftDots ? left : 1;
|
60
|
+
const hasRightDots = right < total - 2;
|
61
|
+
const to = hasRightDots ? right : total;
|
66
62
|
|
67
63
|
if (hasLeftDots) {
|
68
64
|
result.push(1, '.');
|
69
65
|
}
|
70
66
|
|
71
|
-
for (
|
67
|
+
for (let i = from; i <= to; ++i) {
|
72
68
|
result.push(i);
|
73
69
|
}
|
74
70
|
|
@@ -1,9 +1,11 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { styled, withTheme } from '@storybook/theming';
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
3
|
+
const IMG_SIZE = 64;
|
4
|
+
const DIAG_LENGTH = (2 * (IMG_SIZE - 8) ** 2) ** (1 / 2);
|
5
|
+
const Button = styled.button(_ref => {
|
6
|
+
let {
|
7
|
+
borderColor
|
8
|
+
} = _ref;
|
7
9
|
return {
|
8
10
|
appearance: 'none',
|
9
11
|
background: 'none',
|
@@ -20,10 +22,12 @@ var Button = styled.button(function (_ref) {
|
|
20
22
|
}
|
21
23
|
};
|
22
24
|
});
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
25
|
+
const Image = withTheme(styled.img(_ref2 => {
|
26
|
+
let {
|
27
|
+
hasBorder,
|
28
|
+
backgroundColor,
|
29
|
+
theme
|
30
|
+
} = _ref2;
|
27
31
|
return {
|
28
32
|
maxHeight: "".concat(IMG_SIZE, "px"),
|
29
33
|
width: "".concat(IMG_SIZE, "px"),
|
@@ -40,17 +44,17 @@ var Image = withTheme(styled.img(function (_ref2) {
|
|
40
44
|
}
|
41
45
|
};
|
42
46
|
}));
|
43
|
-
export
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
47
|
+
export const ImagePreview = withTheme(_ref3 => {
|
48
|
+
let {
|
49
|
+
isActive,
|
50
|
+
onClick,
|
51
|
+
imageName,
|
52
|
+
url,
|
53
|
+
theme,
|
54
|
+
error
|
55
|
+
} = _ref3;
|
50
56
|
|
51
|
-
|
52
|
-
return onClick(imageName);
|
53
|
-
};
|
57
|
+
const handleClick = () => onClick(imageName);
|
54
58
|
|
55
59
|
return /*#__PURE__*/React.createElement(Button, {
|
56
60
|
onClick: handleClick,
|