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.
Files changed (199) hide show
  1. package/CHANGELOG.md +30 -7
  2. package/README.md +9 -1
  3. package/addon/README.md +3 -0
  4. package/addon/package.json +4 -0
  5. package/docs/config.md +29 -26
  6. package/jest.config.js +6 -0
  7. package/lib/cjs/client/addon/Manager.js +122 -271
  8. package/lib/cjs/client/addon/components/Addon.js +17 -38
  9. package/lib/cjs/client/addon/components/Icons.js +11 -7
  10. package/lib/cjs/client/addon/components/Panel.js +17 -13
  11. package/lib/cjs/client/addon/components/TestSelect.js +11 -9
  12. package/lib/cjs/client/addon/components/Tools.js +21 -40
  13. package/lib/cjs/client/addon/decorator.js +1 -1
  14. package/lib/cjs/client/addon/index.js +31 -0
  15. package/lib/cjs/client/addon/preset.ie11.js +74 -0
  16. package/lib/cjs/client/addon/preset.js +13 -31
  17. package/lib/cjs/client/addon/readyForCapture.js +12 -0
  18. package/lib/cjs/client/addon/register.js +46 -70
  19. package/lib/cjs/client/addon/utils.js +6 -2
  20. package/lib/cjs/client/addon/withCreevey.js +221 -155
  21. package/lib/cjs/client/shared/components/ImagesView/BlendView.js +26 -24
  22. package/lib/cjs/client/shared/components/ImagesView/ImagesView.js +22 -18
  23. package/lib/cjs/client/shared/components/ImagesView/SideBySideView.js +44 -66
  24. package/lib/cjs/client/shared/components/ImagesView/SlideView.js +38 -50
  25. package/lib/cjs/client/shared/components/ImagesView/SwapView.js +26 -45
  26. package/lib/cjs/client/shared/components/ImagesView/index.js +9 -9
  27. package/lib/cjs/client/shared/components/PageFooter/PageFooter.js +12 -8
  28. package/lib/cjs/client/shared/components/PageFooter/Paging.js +14 -18
  29. package/lib/cjs/client/shared/components/PageHeader/ImagePreview.js +22 -18
  30. package/lib/cjs/client/shared/components/PageHeader/PageHeader.js +42 -67
  31. package/lib/cjs/client/shared/components/ResultsPage.js +39 -69
  32. package/lib/cjs/client/shared/creeveyClientApi.js +55 -82
  33. package/lib/cjs/client/shared/helpers.js +140 -211
  34. package/lib/cjs/client/shared/viewMode.js +5 -5
  35. package/lib/cjs/client/web/142.js +2 -0
  36. package/lib/cjs/client/web/142.js.LICENSE.txt +12 -0
  37. package/lib/cjs/client/web/32.js +1 -0
  38. package/lib/cjs/client/web/551.js +1 -0
  39. package/lib/cjs/client/web/566.js +2 -0
  40. package/lib/cjs/client/web/566.js.LICENSE.txt +31 -0
  41. package/lib/cjs/client/web/691.js +2 -0
  42. package/lib/cjs/client/web/691.js.LICENSE.txt +8 -0
  43. package/lib/cjs/client/web/725.js +1 -0
  44. package/lib/cjs/client/web/main.js +2 -38
  45. package/lib/cjs/client/web/main.js.LICENSE.txt +49 -0
  46. package/lib/cjs/creevey.js +3 -5
  47. package/lib/cjs/index.js +10 -15
  48. package/lib/cjs/server/config.js +5 -4
  49. package/lib/cjs/server/docker.js +3 -7
  50. package/lib/cjs/server/extract.js +7 -4
  51. package/lib/cjs/server/index.js +3 -5
  52. package/lib/cjs/server/loaders/babel/creevey-plugin.js +1 -3
  53. package/lib/cjs/server/loaders/babel/helpers.js +13 -23
  54. package/lib/cjs/server/loaders/babel/register.js +2 -4
  55. package/lib/cjs/server/loaders/webpack/compile.js +34 -51
  56. package/lib/cjs/server/loaders/webpack/creevey-loader.js +20 -22
  57. package/lib/cjs/server/loaders/webpack/dummy-hmr.js +2 -7
  58. package/lib/cjs/server/loaders/webpack/mdx-loader.js +2 -2
  59. package/lib/cjs/server/loaders/webpack/start.js +1 -1
  60. package/lib/cjs/server/logger.js +2 -1
  61. package/lib/cjs/server/master/index.js +4 -4
  62. package/lib/cjs/server/master/master.js +1 -0
  63. package/lib/cjs/server/master/pool.js +38 -47
  64. package/lib/cjs/server/master/runner.js +53 -66
  65. package/lib/cjs/server/master/server.js +78 -4
  66. package/lib/cjs/server/messages.js +128 -18
  67. package/lib/cjs/server/selenium/browser.js +129 -55
  68. package/lib/cjs/server/selenium/selenoid.js +5 -7
  69. package/lib/cjs/server/stories.js +58 -72
  70. package/lib/cjs/server/storybook/entry.js +7 -22
  71. package/lib/cjs/server/storybook/helpers.js +20 -27
  72. package/lib/cjs/server/storybook/providers/browser.js +74 -0
  73. package/lib/cjs/server/storybook/{nodejs-provider.js → providers/nodejs.js} +37 -20
  74. package/lib/cjs/server/update.js +1 -5
  75. package/lib/cjs/server/utils.js +26 -35
  76. package/lib/cjs/server/worker/helpers.js +2 -6
  77. package/lib/cjs/server/worker/reporter.js +8 -20
  78. package/lib/cjs/server/worker/worker.js +21 -19
  79. package/lib/cjs/shared/index.js +101 -0
  80. package/lib/cjs/shared/serializeRegExp.js +42 -0
  81. package/lib/cjs/types.js +11 -6
  82. package/lib/esm/client/addon/Manager.js +122 -271
  83. package/lib/esm/client/addon/components/Addon.js +15 -34
  84. package/lib/esm/client/addon/components/Icons.js +10 -6
  85. package/lib/esm/client/addon/components/Panel.js +17 -13
  86. package/lib/esm/client/addon/components/TestSelect.js +11 -9
  87. package/lib/esm/client/addon/components/Tools.js +19 -36
  88. package/lib/esm/client/addon/decorator.js +1 -1
  89. package/lib/esm/client/addon/index.js +2 -0
  90. package/lib/esm/client/addon/preset.ie11.js +59 -0
  91. package/lib/esm/client/addon/preset.js +12 -26
  92. package/lib/esm/client/addon/readyForCapture.js +5 -0
  93. package/lib/esm/client/addon/register.js +42 -66
  94. package/lib/esm/client/addon/utils.js +3 -2
  95. package/lib/esm/client/addon/withCreevey.js +209 -156
  96. package/lib/esm/client/shared/components/ImagesView/BlendView.js +23 -20
  97. package/lib/esm/client/shared/components/ImagesView/ImagesView.js +21 -17
  98. package/lib/esm/client/shared/components/ImagesView/SideBySideView.js +42 -63
  99. package/lib/esm/client/shared/components/ImagesView/SlideView.js +36 -47
  100. package/lib/esm/client/shared/components/ImagesView/SwapView.js +24 -42
  101. package/lib/esm/client/shared/components/PageFooter/PageFooter.js +12 -8
  102. package/lib/esm/client/shared/components/PageFooter/Paging.js +14 -18
  103. package/lib/esm/client/shared/components/PageHeader/ImagePreview.js +22 -18
  104. package/lib/esm/client/shared/components/PageHeader/PageHeader.js +37 -60
  105. package/lib/esm/client/shared/components/ResultsPage.js +36 -64
  106. package/lib/esm/client/shared/creeveyClientApi.js +57 -84
  107. package/lib/esm/client/shared/helpers.js +124 -195
  108. package/lib/esm/client/shared/viewMode.js +4 -4
  109. package/lib/esm/creevey.js +3 -5
  110. package/lib/esm/index.js +2 -3
  111. package/lib/esm/server/config.js +4 -5
  112. package/lib/esm/server/docker.js +2 -2
  113. package/lib/esm/server/extract.js +6 -4
  114. package/lib/esm/server/index.js +3 -4
  115. package/lib/esm/server/loaders/babel/creevey-plugin.js +1 -3
  116. package/lib/esm/server/loaders/babel/helpers.js +12 -22
  117. package/lib/esm/server/loaders/babel/register.js +3 -5
  118. package/lib/esm/server/loaders/webpack/compile.js +35 -52
  119. package/lib/esm/server/loaders/webpack/creevey-loader.js +9 -10
  120. package/lib/esm/server/loaders/webpack/dummy-hmr.js +2 -6
  121. package/lib/esm/server/loaders/webpack/mdx-loader.js +2 -2
  122. package/lib/esm/server/loaders/webpack/start.js +1 -1
  123. package/lib/esm/server/master/index.js +4 -4
  124. package/lib/esm/server/master/master.js +1 -0
  125. package/lib/esm/server/master/pool.js +38 -49
  126. package/lib/esm/server/master/runner.js +53 -66
  127. package/lib/esm/server/master/server.js +76 -6
  128. package/lib/esm/server/messages.js +118 -14
  129. package/lib/esm/server/selenium/browser.js +126 -57
  130. package/lib/esm/server/selenium/selenoid.js +4 -6
  131. package/lib/esm/server/stories.js +58 -70
  132. package/lib/esm/server/storybook/entry.js +5 -22
  133. package/lib/esm/server/storybook/helpers.js +11 -20
  134. package/lib/esm/server/storybook/providers/browser.js +60 -0
  135. package/lib/esm/server/storybook/{nodejs-provider.js → providers/nodejs.js} +35 -19
  136. package/lib/esm/server/update.js +1 -5
  137. package/lib/esm/server/utils.js +18 -31
  138. package/lib/esm/server/worker/helpers.js +2 -6
  139. package/lib/esm/server/worker/reporter.js +8 -20
  140. package/lib/esm/server/worker/worker.js +22 -20
  141. package/lib/esm/shared/index.js +78 -0
  142. package/lib/esm/shared/serializeRegExp.js +24 -0
  143. package/lib/esm/types.js +3 -0
  144. package/lib/types/client/addon/Manager.d.ts +2 -2
  145. package/lib/types/client/addon/components/TestSelect.d.ts +0 -1
  146. package/lib/types/client/addon/index.d.ts +2 -0
  147. package/lib/types/client/addon/preset.d.ts +2 -1
  148. package/lib/types/client/addon/preset.ie11.d.ts +10 -0
  149. package/lib/types/client/addon/readyForCapture.d.ts +6 -0
  150. package/lib/types/client/addon/utils.d.ts +1 -0
  151. package/lib/types/client/addon/withCreevey.d.ts +13 -2
  152. package/lib/types/client/shared/components/ImagesView/BlendView.d.ts +1 -1
  153. package/lib/types/client/shared/components/ImagesView/ImagesView.d.ts +0 -1
  154. package/lib/types/client/shared/components/ImagesView/SideBySideView.d.ts +1 -1
  155. package/lib/types/client/shared/components/ImagesView/SlideView.d.ts +1 -1
  156. package/lib/types/client/shared/components/ImagesView/SwapView.d.ts +1 -1
  157. package/lib/types/client/shared/components/PageFooter/PageFooter.d.ts +0 -1
  158. package/lib/types/client/shared/components/PageFooter/Paging.d.ts +0 -1
  159. package/lib/types/client/shared/components/PageHeader/ImagePreview.d.ts +1 -1
  160. package/lib/types/client/shared/components/PageHeader/PageHeader.d.ts +0 -1
  161. package/lib/types/client/shared/components/ResultsPage.d.ts +1 -1
  162. package/lib/types/client/web/CreeveyApp.d.ts +0 -1
  163. package/lib/types/client/web/CreeveyLoader.d.ts +1 -2
  164. package/lib/types/client/web/CreeveyView/SideBar/Checkbox.d.ts +1 -1
  165. package/lib/types/client/web/CreeveyView/SideBar/SideBarHeader.d.ts +0 -1
  166. package/lib/types/client/web/CreeveyView/SideBar/SuiteLink.d.ts +6 -6
  167. package/lib/types/client/web/CreeveyView/SideBar/TestLink.d.ts +0 -1
  168. package/lib/types/client/web/CreeveyView/SideBar/TestStatusIcon.d.ts +1 -1
  169. package/lib/types/client/web/CreeveyView/SideBar/TestsStatus.d.ts +1 -1
  170. package/lib/types/index.d.ts +0 -1
  171. package/lib/types/server/loaders/babel/register.d.ts +1 -1
  172. package/lib/types/server/loaders/webpack/creevey-loader.d.ts +4 -2
  173. package/lib/types/server/logger.d.ts +6 -2
  174. package/lib/types/server/master/master.d.ts +1 -0
  175. package/lib/types/server/master/pool.d.ts +1 -0
  176. package/lib/types/server/master/server.d.ts +1 -1
  177. package/lib/types/server/messages.d.ts +17 -6
  178. package/lib/types/server/selenium/browser.d.ts +5 -2
  179. package/lib/types/server/stories.d.ts +2 -2
  180. package/lib/types/server/storybook/entry.d.ts +2 -3
  181. package/lib/types/server/storybook/helpers.d.ts +1 -1
  182. package/lib/types/server/storybook/providers/browser.d.ts +4 -0
  183. package/lib/types/server/storybook/providers/nodejs.d.ts +9 -0
  184. package/lib/types/server/utils.d.ts +5 -1
  185. package/lib/types/server/worker/helpers.d.ts +2 -1
  186. package/lib/types/shared/index.d.ts +7 -0
  187. package/lib/types/shared/serializeRegExp.d.ts +9 -0
  188. package/lib/types/types.d.ts +32 -5
  189. package/package.json +120 -103
  190. package/preset/ie11.js +5 -0
  191. package/{preset.js → preset/index.js} +2 -2
  192. package/types/mdx.d.ts +3 -2
  193. package/types/mocha.d.ts +1 -0
  194. package/lib/cjs/client/web/1.js +0 -13
  195. package/lib/cjs/client/web/2.js +0 -1
  196. package/lib/cjs/shared.js +0 -35
  197. package/lib/esm/shared.js +0 -22
  198. package/lib/types/server/storybook/nodejs-provider.d.ts +0 -5
  199. 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
- var Container = styled.div({
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
- var ImagesLayout = styled.div(function (_ref) {
27
- var layout = _ref.layout;
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
- var ImageLink = styled.a({
30
+ const ImageLink = styled.a({
40
31
  lineHeight: 0,
41
32
  flexShrink: 0
42
33
  });
43
- var ImageDiffLink = styled.a({
34
+ const ImageDiffLink = styled.a({
44
35
  lineHeight: 0
45
36
  });
46
- var Image = styled.img(function (_ref2) {
47
- var borderColor = _ref2.borderColor;
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
- var DiffImage = styled(Image)({
48
+ const DiffImage = styled(Image)({
56
49
  flexShrink: 1
57
50
  });
58
- export var SideBySideView = withTheme(function (_ref3) {
59
- var actual = _ref3.actual,
60
- diff = _ref3.diff,
61
- expect = _ref3.expect,
62
- theme = _ref3.theme;
63
-
64
- var _useState = useState('horizontal'),
65
- _useState2 = _slicedToArray(_useState, 2),
66
- layout = _useState2[0],
67
- setLayout = _useState2[1];
68
-
69
- var _useState3 = useState(1),
70
- _useState4 = _slicedToArray(_useState3, 2),
71
- scale = _useState4[0],
72
- setScale = _useState4[1];
73
-
74
- var containerRef = useRef(null);
75
- var expectImageRef = useRef(null);
76
- var diffImageRef = useRef(null);
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
- var borderSize = getBorderSize(diffImage);
71
+ const borderSize = getBorderSize(diffImage);
86
72
 
87
73
  if (layout == 'vertical') {
88
- var ratio = (diffImage.getBoundingClientRect().width - borderSize * 2) / diffImage.naturalWidth;
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
- var _ratio = // NOTE: 40px because we have two margins by 20px and 6px for borders
94
- (containerElement.getBoundingClientRect().width - 40 - borderSize * 6) / [expectImage, diffImage, actualImage].map(function (image) {
95
- return image.naturalWidth;
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(function () {
106
- var diffImage = diffImageRef.current;
86
+ useLayoutEffect(() => {
87
+ const diffImage = diffImageRef.current;
107
88
  if (!diffImage || !loaded) return;
108
- var ratio = diffImage.naturalWidth / diffImage.naturalHeight;
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(function () {
114
- var _window$__CREEVEY_SET, _window;
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
- var Container = styled.div({
6
+ import { readyForCapture } from '../../../addon/readyForCapture';
7
+ const Container = styled.div({
19
8
  position: 'relative',
20
9
  display: 'flex'
21
10
  });
22
- var Input = styled.input({
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
- var ImageContainer = styled.div({
44
+ const ImageContainer = styled.div({
56
45
  position: 'absolute',
57
46
  width: '100%',
58
47
  height: '100%',
59
48
  overflow: 'hidden'
60
49
  });
61
- var ImageWrapper = withTheme(styled.div(function (_ref) {
62
- var theme = _ref.theme;
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
- var BaseImage = styled.img(function (_ref2) {
72
- var borderColor = _ref2.borderColor;
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
- var Image = styled(BaseImage)({
72
+ const Image = styled(BaseImage)({
80
73
  position: 'absolute'
81
74
  });
82
- var DiffImage = styled(BaseImage)({
75
+ const DiffImage = styled(BaseImage)({
83
76
  opacity: '0'
84
77
  });
85
- export var SlideView = withTheme(function (_ref3) {
86
- var actual = _ref3.actual,
87
- diff = _ref3.diff,
88
- expect = _ref3.expect,
89
- theme = _ref3.theme;
90
-
91
- var _useState = useState(0),
92
- _useState2 = _slicedToArray(_useState, 2),
93
- step = _useState2[0],
94
- setStep = _useState2[1];
95
-
96
- var expectedImageContainerRef = useRef(null);
97
- var expectedImageWrapperRef = useRef(null);
98
- var expectImageRef = useRef(null);
99
- var diffImageRef = useRef(null);
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
- var handleSlide = useCallback(function (event) {
95
+ const handleSlide = useCallback(event => {
106
96
  if (!expectedImageContainerRef.current || !expectedImageWrapperRef.current) return;
107
- var offset = Number(event.target.value);
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(function () {
101
+ useLayoutEffect(() => {
112
102
  if (loaded && diffImageRef.current) setStep(100 / diffImageRef.current.getBoundingClientRect().width);
113
103
  }, [loaded, scale]);
114
- useLayoutEffect(function () {
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(function () {
121
- var _window$__CREEVEY_SET, _window;
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
- var Container = styled.div({
6
+ import { readyForCapture } from '../../../addon/readyForCapture';
7
+ const Container = styled.div({
19
8
  position: 'relative',
20
9
  display: 'flex'
21
10
  });
22
- var BaseImage = styled.img(function (_ref) {
23
- var borderColor = _ref.borderColor;
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
- var Image = styled(BaseImage)({
21
+ const Image = styled(BaseImage)({
31
22
  position: 'absolute'
32
23
  });
33
- var DiffImage = styled(BaseImage)({
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 var SwapView = withTheme(function (_ref2) {
40
- var theme = _ref2.theme,
41
- expect = _ref2.expect,
42
- actual = _ref2.actual,
43
- diff = _ref2.diff;
44
-
45
- var _useState = useState('actual'),
46
- _useState2 = _slicedToArray(_useState, 2),
47
- image = _useState2[0],
48
- setImage = _useState2[1];
49
-
50
- var expectImageRef = useRef(null);
51
- var diffImageRef = useRef(null);
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
- var handleChangeView = useCallback(function () {
58
- return setImage(function (prevImage) {
59
- return prevImage == 'actual' ? 'expect' : 'actual';
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
- var Container = withTheme(styled.div(function (_ref) {
6
- var theme = _ref.theme;
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
- var StyledButton = styled(Button)({
16
+ const StyledButton = styled(Button)({
15
17
  transform: 'none'
16
18
  });
17
19
  export function PageFooter(_ref2) {
18
- var canApprove = _ref2.canApprove,
19
- retriesCount = _ref2.retriesCount,
20
- retry = _ref2.retry,
21
- onRetryChange = _ref2.onRetryChange,
22
- onApprove = _ref2.onApprove;
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
- var StyledButton = styled(Button)({
5
+ const StyledButton = styled(Button)({
6
6
  transform: 'none',
7
7
  marginLeft: '8px'
8
8
  });
9
9
  export function Paging(props) {
10
- var renderItem = function renderItem(item, index) {
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
- var disabled = props.activePage === props.pagesCount;
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 : function () {
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: function onClick() {
42
- return goToPage(item);
43
- }
39
+ onClick: () => goToPage(item)
44
40
  }, item);
45
41
  }
46
42
  }
47
43
  };
48
44
 
49
- var goToPage = function goToPage(pageNumber) {
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
- var result = [];
60
- var left = Math.max(Math.min(active - 2, total - 4), 1);
61
- var right = Math.min(Math.max(5, active + 2), total);
62
- var hasLeftDots = left > 3;
63
- var from = hasLeftDots ? left : 1;
64
- var hasRightDots = right < total - 2;
65
- var to = hasRightDots ? right : total;
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 (var i = from; i <= to; ++i) {
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
- var IMG_SIZE = 64;
4
- var DIAG_LENGTH = Math.pow(2 * Math.pow(IMG_SIZE - 8, 2), 1 / 2);
5
- var Button = styled.button(function (_ref) {
6
- var borderColor = _ref.borderColor;
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
- var Image = withTheme(styled.img(function (_ref2) {
24
- var hasBorder = _ref2.hasBorder,
25
- backgroundColor = _ref2.backgroundColor,
26
- theme = _ref2.theme;
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 var ImagePreview = withTheme(function (_ref3) {
44
- var isActive = _ref3.isActive,
45
- onClick = _ref3.onClick,
46
- imageName = _ref3.imageName,
47
- url = _ref3.url,
48
- theme = _ref3.theme,
49
- error = _ref3.error;
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
- var handleClick = function handleClick() {
52
- return onClick(imageName);
53
- };
57
+ const handleClick = () => onClick(imageName);
54
58
 
55
59
  return /*#__PURE__*/React.createElement(Button, {
56
60
  onClick: handleClick,