@bundle-stats/ui 3.4.0-alpha.5 → 4.0.0-alpha.7

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 (143) hide show
  1. package/lib/app/app.js +6 -21
  2. package/lib/app/app.stories.js +1 -22
  3. package/lib/assets/icons.svg +0 -8
  4. package/lib/components/asset-info/asset-info.js +1 -1
  5. package/lib/components/bundle-assets/bundle-assets.js +1 -1
  6. package/lib/components/bundle-assets/index.js +1 -1
  7. package/lib/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js +1 -1
  8. package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.js +8 -44
  9. package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.module.css +2 -2
  10. package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.js +1 -20
  11. package/lib/components/bundle-modules/bundle-modules.js +1 -1
  12. package/lib/components/bundle-modules/index.js +1 -1
  13. package/lib/components/bundle-packages/bundle-packages.js +1 -1
  14. package/lib/components/bundle-packages/index.js +1 -1
  15. package/lib/components/component-link.js +1 -1
  16. package/lib/components/index.js +0 -8
  17. package/lib/components/job-meta/job-meta.js +1 -1
  18. package/lib/components/job-name/job-name.js +1 -1
  19. package/lib/components/metrics-table/metrics-table.js +1 -1
  20. package/lib/components/metrics-table-options/metrics-table-options.js +1 -1
  21. package/lib/components/module-info/module-info.js +1 -1
  22. package/lib/components/summary/summary.js +13 -24
  23. package/lib/components/summary/summary.module.css +1 -45
  24. package/lib/components/summary/summary.stories.js +1 -30
  25. package/lib/components/summary-item/summary-item.js +14 -37
  26. package/lib/components/summary-item/summary-item.module.css +25 -13
  27. package/lib/components/summary-item/summary-item.stories.js +53 -51
  28. package/lib/constants.js +4 -4
  29. package/lib/layout/box/box.js +1 -1
  30. package/lib/layout/flex-stack/flex-stack.js +1 -1
  31. package/lib/layout/footer/footer.js +1 -1
  32. package/lib/layout/separator.js +1 -1
  33. package/lib/layout/stack/stack.js +1 -1
  34. package/lib/query-state.js +1 -1
  35. package/lib/ui/alert/alert.js +3 -13
  36. package/lib/ui/container/container.js +1 -1
  37. package/lib/ui/filters/filters.container.js +3 -3
  38. package/lib/ui/filters/filters.js +1 -1
  39. package/lib/ui/horizontal-bar-chart/horizontal-bar-chart.js +2 -2
  40. package/lib/ui/hover-card/hover-card.js +8 -2
  41. package/lib/ui/hover-card/hover-card.stories.js +1 -1
  42. package/lib/ui/icon/icon.js +1 -3
  43. package/lib/ui/input/input.js +1 -1
  44. package/lib/ui/loader/loader.js +1 -1
  45. package/lib/ui/logo/logo.js +1 -1
  46. package/lib/ui/panels/panels.js +1 -1
  47. package/lib/ui/skeleton/skeleton.js +1 -1
  48. package/lib/ui/sort-dropdown/sort-dropdown.js +1 -1
  49. package/lib/ui/tag/tag.js +1 -1
  50. package/lib/ui/tooltip/tooltip.js +1 -1
  51. package/lib-esm/app/app.js +6 -20
  52. package/lib-esm/app/app.stories.js +1 -22
  53. package/lib-esm/assets/icons.svg +0 -8
  54. package/lib-esm/components/asset-info/asset-info.js +1 -1
  55. package/lib-esm/components/bundle-assets/bundle-assets.js +1 -1
  56. package/lib-esm/components/bundle-assets/bundle-assets.utils.js +1 -0
  57. package/lib-esm/components/bundle-assets/index.js +1 -1
  58. package/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js +1 -1
  59. package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.js +8 -25
  60. package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.module.css +2 -2
  61. package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.js +0 -18
  62. package/lib-esm/components/bundle-modules/bundle-modules.js +1 -1
  63. package/lib-esm/components/bundle-modules/index.js +1 -1
  64. package/lib-esm/components/bundle-packages/bundle-packages.js +1 -1
  65. package/lib-esm/components/bundle-packages/bundle-packages.utils.js +1 -0
  66. package/lib-esm/components/bundle-packages/index.js +1 -1
  67. package/lib-esm/components/component-link.js +1 -1
  68. package/lib-esm/components/index.js +0 -1
  69. package/lib-esm/components/job-meta/job-meta.js +1 -1
  70. package/lib-esm/components/job-name/job-name.js +1 -1
  71. package/lib-esm/components/metrics-table/metrics-table.js +1 -1
  72. package/lib-esm/components/metrics-table-options/metrics-table-options.js +1 -1
  73. package/lib-esm/components/module-info/module-info.js +1 -1
  74. package/lib-esm/components/summary/summary.js +14 -22
  75. package/lib-esm/components/summary/summary.module.css +1 -45
  76. package/lib-esm/components/summary/summary.stories.js +1 -28
  77. package/lib-esm/components/summary-item/summary-item.js +11 -33
  78. package/lib-esm/components/summary-item/summary-item.module.css +25 -13
  79. package/lib-esm/components/summary-item/summary-item.stories.js +38 -50
  80. package/lib-esm/constants.js +4 -4
  81. package/lib-esm/layout/box/box.js +1 -1
  82. package/lib-esm/layout/flex-stack/flex-stack.js +1 -1
  83. package/lib-esm/layout/footer/footer.js +1 -1
  84. package/lib-esm/layout/separator.js +1 -1
  85. package/lib-esm/layout/stack/stack.js +1 -1
  86. package/lib-esm/query-state.js +1 -1
  87. package/lib-esm/ui/alert/alert.js +3 -6
  88. package/lib-esm/ui/container/container.js +1 -1
  89. package/lib-esm/ui/filters/filters.container.js +1 -1
  90. package/lib-esm/ui/filters/filters.js +2 -1
  91. package/lib-esm/ui/hover-card/hover-card.js +8 -2
  92. package/lib-esm/ui/hover-card/hover-card.stories.js +1 -1
  93. package/lib-esm/ui/icon/icon.js +1 -3
  94. package/lib-esm/ui/input/input.js +1 -1
  95. package/lib-esm/ui/loader/loader.js +1 -1
  96. package/lib-esm/ui/logo/logo.js +1 -1
  97. package/lib-esm/ui/panels/panels.js +1 -1
  98. package/lib-esm/ui/skeleton/skeleton.js +1 -1
  99. package/lib-esm/ui/sort-dropdown/sort-dropdown.js +1 -1
  100. package/lib-esm/ui/tag/tag.js +1 -1
  101. package/lib-esm/ui/tooltip/tooltip.js +1 -1
  102. package/package.json +26 -26
  103. package/src/app/app.jsx +5 -12
  104. package/src/assets/icons.svg +0 -8
  105. package/src/components/bundle-assets-totals-table/bundle-assets-totals-table.jsx +13 -27
  106. package/src/components/bundle-assets-totals-table/bundle-assets-totals-table.module.css +2 -2
  107. package/src/components/index.js +0 -1
  108. package/src/components/summary/summary.jsx +19 -24
  109. package/src/components/summary/summary.module.css +1 -45
  110. package/src/components/summary-item/summary-item.jsx +10 -23
  111. package/src/components/summary-item/summary-item.module.css +25 -13
  112. package/src/constants.js +11 -7
  113. package/src/ui/alert/alert.jsx +2 -7
  114. package/src/ui/hover-card/hover-card.jsx +5 -0
  115. package/src/ui/icon/icon.jsx +0 -2
  116. package/lib/assets/icons/alert-circle.svg +0 -1
  117. package/lib/assets/icons/check-circle.svg +0 -1
  118. package/lib/components/budget-info/budget-info.js +0 -80
  119. package/lib/components/budget-info/budget-info.module.css +0 -40
  120. package/lib/components/budget-info/budget-info.stories.js +0 -44
  121. package/lib/components/budget-info/index.js +0 -18
  122. package/lib/components/budget-insights/budget-insights.js +0 -200
  123. package/lib/components/budget-insights/budget-insights.module.css +0 -53
  124. package/lib/components/budget-insights/budget-insights.stories.js +0 -104
  125. package/lib/components/budget-insights/index.js +0 -18
  126. package/lib-esm/assets/icons/alert-circle.svg +0 -1
  127. package/lib-esm/assets/icons/check-circle.svg +0 -1
  128. package/lib-esm/components/budget-info/budget-info.js +0 -58
  129. package/lib-esm/components/budget-info/budget-info.module.css +0 -40
  130. package/lib-esm/components/budget-info/budget-info.stories.js +0 -30
  131. package/lib-esm/components/budget-info/index.js +0 -1
  132. package/lib-esm/components/budget-insights/budget-insights.js +0 -148
  133. package/lib-esm/components/budget-insights/budget-insights.module.css +0 -53
  134. package/lib-esm/components/budget-insights/budget-insights.stories.js +0 -84
  135. package/lib-esm/components/budget-insights/index.js +0 -1
  136. package/src/assets/icons/alert-circle.svg +0 -1
  137. package/src/assets/icons/check-circle.svg +0 -1
  138. package/src/components/budget-info/budget-info.jsx +0 -65
  139. package/src/components/budget-info/budget-info.module.css +0 -40
  140. package/src/components/budget-info/index.js +0 -1
  141. package/src/components/budget-insights/budget-insights.jsx +0 -157
  142. package/src/components/budget-insights/budget-insights.module.css +0 -53
  143. package/src/components/budget-insights/index.js +0 -1
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import React from 'react';
4
4
  import { storiesOf } from '@storybook/react';
@@ -21,33 +21,6 @@ stories.addDecorator(getWrapperDecorator());
21
21
  stories.add('default', () => /*#__PURE__*/React.createElement(Summary, {
22
22
  data: MULTIPLE_JOBS[0].summary
23
23
  }));
24
- stories.add('budgets', () => /*#__PURE__*/React.createElement(Summary, {
25
- data: MULTIPLE_JOBS[0].summary,
26
- budgets: {
27
- webpack: {
28
- totalSizeByTypeALL: {
29
- currentValue: MULTIPLE_JOBS[0].summary.webpack.totalSizeByTypeALL.current,
30
- budgetValue: 1024 * 1024,
31
- failed: false
32
- },
33
- totalInitialSizeJS: {
34
- currentValue: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeJS.current,
35
- budgetValue: 512 * 1024,
36
- failed: true
37
- },
38
- totalInitialSizeCSS: {
39
- currentValue: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeCSS.current,
40
- budgetValue: 50 * 1024,
41
- failed: false
42
- },
43
- chunkCount: {
44
- currentValue: MULTIPLE_JOBS[0].summary.webpack.chunkCount.current,
45
- budgetValue: 50,
46
- failed: false
47
- }
48
- }
49
- }
50
- }));
51
24
  stories.add('custom keys', () => /*#__PURE__*/React.createElement(Summary, {
52
25
  keys: METRICS_WEBPACK_ASSETS,
53
26
  data: MULTIPLE_JOBS[0].summary
@@ -1,17 +1,14 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import React from 'react';
4
4
  import PropTypes from 'prop-types';
5
5
  import cx from 'classnames';
6
6
  import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
7
7
  import { HoverCard } from '../../ui/hover-card';
8
- import { Icon } from '../../ui/icon';
9
8
  import { Skeleton } from '../../ui/skeleton';
10
9
  import { Stack } from '../../layout/stack';
11
- import { FlexStack } from '../../layout/flex-stack';
12
10
  import { Metric } from '../metric';
13
11
  import { Delta } from '../delta';
14
- import { BudgetInfo } from '../budget-info';
15
12
  import css from './summary-item.module.css';
16
13
 
17
14
  const MetricInfo = _ref => {
@@ -21,8 +18,9 @@ const MetricInfo = _ref => {
21
18
  } = _ref;
22
19
  return /*#__PURE__*/React.createElement(Stack, {
23
20
  space: "xxxsmall"
24
- }, /*#__PURE__*/React.createElement("p", null, description), url && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {
25
- href: url,
21
+ }, /*#__PURE__*/React.createElement("p", null, description), url && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("button", {
22
+ type: "button",
23
+ onClick: () => window.open(url),
26
24
  className: css.readMoreLink
27
25
  }, "Read more")));
28
26
  };
@@ -44,7 +42,6 @@ export const SummaryItem = _ref2 => {
44
42
  loading,
45
43
  showDelta,
46
44
  showMetricDescription,
47
- budget,
48
45
  ...props
49
46
  } = _ref2;
50
47
  const {
@@ -59,25 +56,14 @@ export const SummaryItem = _ref2 => {
59
56
  const showMetricDescriptionTooltip = showMetricDescription && (metric == null ? void 0 : metric.description);
60
57
  const rootClassName = cx(css.root, className, css[size], showDelta && css.showDelta);
61
58
  return /*#__PURE__*/React.createElement(Stack, _extends({
62
- space: "xxxsmall",
59
+ space: "xxsmall",
63
60
  as: Component,
64
61
  className: rootClassName
65
- }, props), /*#__PURE__*/React.createElement(FlexStack, {
66
- as: "h3",
67
- space: "xxxsmall",
62
+ }, props), /*#__PURE__*/React.createElement("h3", {
68
63
  className: css.title
69
- }, /*#__PURE__*/React.createElement("span", {
70
- className: css.titleLabel
71
- }, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(HoverCard, {
72
- className: css.icon,
73
- label: /*#__PURE__*/React.createElement(Icon, {
74
- glyph: "help"
75
- })
76
- }, /*#__PURE__*/React.createElement(MetricInfo, metric)), budget && /*#__PURE__*/React.createElement(BudgetInfo, {
77
- className: css.budgetInfo,
78
- metricId: id,
79
- budgetInsight: budget
80
- })), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
64
+ }, showMetricDescriptionTooltip ? /*#__PURE__*/React.createElement(HoverCard, {
65
+ label: metric.label
66
+ }, /*#__PURE__*/React.createElement(MetricInfo, metric)) : metric.label), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
81
67
  className: css.currentMetric,
82
68
  value: current,
83
69
  formatter: metric.formatter,
@@ -104,8 +90,7 @@ SummaryItem.defaultProps = {
104
90
  size: 'medium',
105
91
  loading: false,
106
92
  showMetricDescription: false,
107
- showDelta: true,
108
- budget: undefined
93
+ showDelta: true
109
94
  };
110
95
  SummaryItem.propTypes = {
111
96
  /** Adopted child class name */
@@ -131,12 +116,5 @@ SummaryItem.propTypes = {
131
116
  showMetricDescription: PropTypes.bool,
132
117
 
133
118
  /** Show delta */
134
- showDelta: PropTypes.bool,
135
-
136
- /** Budget insight data */
137
- budget: PropTypes.shape({
138
- currentBalue: PropTypes.number,
139
- budgetValue: PropTypes.number,
140
- failed: PropTypes.bool
141
- })
119
+ showDelta: PropTypes.bool
142
120
  };
@@ -1,24 +1,12 @@
1
- .root {
2
- position: relative;
3
- padding-right: var(--space-xlarge);
4
- }
5
-
6
1
  .title {
7
- align-items: center;
8
2
  color: var(--color-text-ultra-light);
9
3
  font-weight: bold;
10
4
  font-size: var(--size-xsmall);
11
- line-height: var(--space-small);
5
+ line-height: 1;
12
6
  text-transform: uppercase;
13
7
  white-space: nowrap;
14
8
  }
15
9
 
16
- .budgetInfo {
17
- position: absolute;
18
- right: 0;
19
- top: 0;
20
- }
21
-
22
10
  .currentMetric {
23
11
  display: block;
24
12
  color: var(--color-heading);
@@ -39,6 +27,30 @@
39
27
  line-height: var(--space-small);
40
28
  }
41
29
 
30
+ .readMoreLink {
31
+ appearance: none;
32
+ background: none;
33
+ margin: 0;
34
+ border: 0;
35
+ padding: 0;
36
+ color: var(--color-primary);
37
+ text-decoration: underline;
38
+ cursor: pointer;
39
+ }
40
+
41
+ .readMoreLink:hover,
42
+ .readMoreLink:active,
43
+ .readMoreLink:focus {
44
+ color: var(--color-primary-dark);
45
+ text-decoration: none;
46
+ }
47
+
48
+ /* Hover state */
49
+ .root:hover .title {
50
+ color: var(--color-text-light);
51
+ }
52
+
53
+
42
54
  /* Loading state */
43
55
  .loading.currentMetric {
44
56
  width: 8em;
@@ -2,56 +2,44 @@ import React from 'react';
2
2
  import { SummaryItem } from './summary-item';
3
3
  export default {
4
4
  title: 'Components/SummaryItem',
5
- component: SummaryItem,
6
- decorators: [Story => /*#__PURE__*/React.createElement("div", {
7
- style: {
8
- maxWidth: '320px'
9
- }
10
- }, /*#__PURE__*/React.createElement(Story, null))],
11
- args: {
12
- loading: false,
13
- id: 'webpack.totalSizeByTypeALL',
14
- data: {
15
- current: 120 * 1000,
16
- baseline: 100 * 1000
17
- }
18
- }
19
- };
20
-
21
- const Template = args => /*#__PURE__*/React.createElement(SummaryItem, args);
22
-
23
- export const Standard = Template.bind();
24
- export const SizeLarge = Template.bind();
25
- SizeLarge.args = {
26
- size: 'large'
27
- };
28
- export const ShowMetricDescription = Template.bind();
29
- ShowMetricDescription.args = {
30
- showMetricDescription: true
31
- };
32
- export const ShowDeltaFalse = Template.bind();
33
- ShowDeltaFalse.args = {
34
- showDelta: false
5
+ component: SummaryItem
35
6
  };
36
- export const BudgetError = Template.bind();
37
- BudgetError.args = {
38
- showMetricDescription: true,
39
- budget: {
40
- currentValue: 120 * 1000,
41
- budgetValue: 100 * 1000,
42
- failed: true
7
+ export const Standard = () => /*#__PURE__*/React.createElement(SummaryItem, {
8
+ loading: false,
9
+ id: "webpack.totalSizeByTypeALL",
10
+ data: {
11
+ current: 120 * 1000,
12
+ baseline: 100 * 1000
43
13
  }
44
- };
45
- export const BudgetSuccess = Template.bind();
46
- BudgetSuccess.args = {
47
- showMetricDescription: true,
48
- budget: {
49
- currentValue: 120 * 1000,
50
- budgetValue: 120 * 1024,
51
- failed: false
14
+ });
15
+ export const SizeLarge = () => /*#__PURE__*/React.createElement(SummaryItem, {
16
+ size: "large",
17
+ loading: false,
18
+ id: "webpack.totalSizeByTypeALL",
19
+ data: {
20
+ current: 120 * 1000,
21
+ baseline: 100 * 1000
52
22
  }
53
- };
54
- export const Loading = Template.bind();
55
- Loading.args = {
56
- loading: true
57
- };
23
+ });
24
+ export const ShowMetricDescription = () => /*#__PURE__*/React.createElement(SummaryItem, {
25
+ loading: false,
26
+ id: "webpack.totalSizeByTypeALL",
27
+ data: {
28
+ current: 120 * 1000,
29
+ baseline: 100 * 1000
30
+ },
31
+ showMetricDescription: true
32
+ });
33
+ export const ShowDeltaFalse = () => /*#__PURE__*/React.createElement(SummaryItem, {
34
+ loading: false,
35
+ id: "webpack.totalSizeByTypeALL",
36
+ data: {
37
+ current: 120 * 1000,
38
+ baseline: 0
39
+ },
40
+ showDelta: false
41
+ });
42
+ export const Loading = () => /*#__PURE__*/React.createElement(SummaryItem, {
43
+ loading: true,
44
+ id: "webpack.totalSizeByTypeALL"
45
+ });
@@ -25,7 +25,7 @@ export const SECTION_URLS = {
25
25
  export const ASSETS_SIZES_FILE_TYPE_MAP = FILE_TYPES.reduce((agg, fileType) => ({ ...agg,
26
26
  [`webpack.sizes.totalSizeByType${fileType}`]: fileType
27
27
  }), {});
28
- export const METRICS_WEBPACK_GENERAL = ['totalSizeByTypeALL', 'totalInitialSizeJS', 'totalInitialSizeCSS', 'cacheInvalidation'];
29
- export const METRICS_WEBPACK_ASSETS = ['assetCount', 'chunkCount'];
30
- export const METRICS_WEBPACK_MODULES = ['moduleCount', 'duplicateModulesCount', 'duplicateCode'];
31
- export const METRICS_WEBPACK_PACKAGES = ['packageCount', 'duplicatePackagesCount'];
28
+ export const METRICS_WEBPACK_GENERAL = ['webpack.totalSizeByTypeALL', 'webpack.totalInitialSizeJS', 'webpack.totalInitialSizeCSS', 'webpack.cacheInvalidation'];
29
+ export const METRICS_WEBPACK_ASSETS = ['webpack.assetCount', 'webpack.chunkCount'];
30
+ export const METRICS_WEBPACK_MODULES = ['webpack.moduleCount', 'webpack.duplicateModulesCount', 'webpack.duplicateCode'];
31
+ export const METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import React from 'react';
4
4
  import PropTypes from 'prop-types';
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import React from 'react';
4
4
  import PropTypes from 'prop-types';
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import React from 'react';
4
4
  import PropTypes from 'prop-types';
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import React from 'react';
4
4
  import PropTypes from 'prop-types';
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import React from 'react';
4
4
  import PropTypes from 'prop-types';
@@ -1,7 +1,7 @@
1
1
  import _merge from "lodash/merge";
2
2
  import _isEqual from "lodash/isEqual";
3
3
 
4
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
5
5
 
6
6
  import React, { useCallback } from 'react';
7
7
  import { Route, useHistory, useLocation } from 'react-router-dom';
@@ -1,5 +1,3 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
1
  import React from 'react';
4
2
  import cx from 'classnames';
5
3
  import PropTypes from 'prop-types';
@@ -9,14 +7,13 @@ export const Alert = props => {
9
7
  const {
10
8
  className,
11
9
  kind,
12
- children,
13
- ...restProps
10
+ children
14
11
  } = props;
15
- return /*#__PURE__*/React.createElement(Box, _extends({
12
+ return /*#__PURE__*/React.createElement(Box, {
16
13
  padding: ['xsmall', 'small'],
17
14
  outline: true,
18
15
  className: cx(css.root, className, css[kind])
19
- }, restProps), children);
16
+ }, children);
20
17
  };
21
18
  Alert.propTypes = {
22
19
  className: PropTypes.string,
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import React from 'react';
4
4
  import PropTypes from 'prop-types';
@@ -1,6 +1,6 @@
1
1
  import _isEqual from "lodash/isEqual";
2
2
 
3
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
3
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
4
 
5
5
  import React from 'react';
6
6
  import PropTypes from 'prop-types';
@@ -1,6 +1,7 @@
1
1
  import _get from "lodash/get";
2
+ import "core-js/modules/es.array.includes.js";
2
3
 
3
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
5
 
5
6
  import React from 'react';
6
7
  import PropTypes from 'prop-types';
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import React, { useCallback } from 'react';
4
4
  import PropTypes from 'prop-types';
@@ -36,6 +36,11 @@ export const HoverCard = props => {
36
36
  }); // Fallback to span if no href
37
37
 
38
38
  const Component = resolveComponent(as, href);
39
+
40
+ const handleOnClick = event => {
41
+ event.preventDefault();
42
+ };
43
+
39
44
  return /*#__PURE__*/React.createElement("div", {
40
45
  className: cx(css.root, className)
41
46
  }, /*#__PURE__*/React.createElement(HovercardAnchor, {
@@ -48,7 +53,8 @@ export const HoverCard = props => {
48
53
  className: cx(css.hoverCard, hoverCardClassName),
49
54
  style: {
50
55
  zIndex: 10000
51
- }
56
+ },
57
+ onClick: handleOnClick
52
58
  }), /*#__PURE__*/React.createElement(HovercardArrow, {
53
59
  size: 24
54
60
  }), typeof children === 'function' ? children({
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import React from 'react';
4
4
  import { HoverCard } from '.';
@@ -1,17 +1,15 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import React from 'react';
4
4
  import PropTypes from 'prop-types';
5
5
  import cx from 'classnames';
6
6
  import css from './icon.module.css';
7
7
  const ICONS = {
8
- ALERT_CIRCLE: 'alert-circle',
9
8
  ARROW: 'arrow',
10
9
  ARROW_RIGHT_CIRLCE: 'arrow-right-circle',
11
10
  CANCEL: 'cancel',
12
11
  CLOSE: 'close',
13
12
  CLOCK: 'clock',
14
- CHECK_CIRCLE: 'check-circle',
15
13
  COMMIT: 'commit',
16
14
  FILTER: 'filter',
17
15
  HELP: 'help',
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import React from 'react';
4
4
  import cx from 'classnames';
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import React from 'react';
4
4
  import PropTypes from 'prop-types';
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import React from 'react';
4
4
  import PropTypes from 'prop-types';
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import React from 'react';
4
4
  import PropTypes from 'prop-types';
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import React from 'react';
4
4
  import PropTypes from 'prop-types';
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import React from 'react';
4
4
  import PropTypes from 'prop-types';
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import React from 'react';
4
4
  import PropTypes from 'prop-types';
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import React from 'react';
4
4
  import PropTypes from 'prop-types';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bundle-stats/ui",
3
- "version": "3.4.0-alpha.5",
3
+ "version": "4.0.0-alpha.7",
4
4
  "description": "UI components for BundleStats projects.",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-esm/index.js",
@@ -36,28 +36,28 @@
36
36
  },
37
37
  "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
38
38
  "devDependencies": {
39
- "@babel/cli": "7.17.6",
40
- "@babel/core": "7.17.7",
41
- "@babel/plugin-proposal-class-properties": "7.16.7",
42
- "@babel/preset-env": "7.16.11",
43
- "@babel/preset-react": "7.16.7",
39
+ "@babel/cli": "7.17.10",
40
+ "@babel/core": "7.18.5",
41
+ "@babel/plugin-proposal-class-properties": "7.17.12",
42
+ "@babel/preset-env": "7.18.2",
43
+ "@babel/preset-react": "7.17.12",
44
44
  "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
45
- "@storybook/addon-essentials": "6.4.19",
45
+ "@storybook/addon-essentials": "6.5.9",
46
46
  "@storybook/addon-knobs": "6.4.0",
47
47
  "@storybook/addon-postcss": "2.0.0",
48
- "@storybook/addon-storyshots": "6.4.19",
49
- "@storybook/addons": "6.4.19",
50
- "@storybook/builder-webpack5": "6.4.19",
51
- "@storybook/manager-webpack5": "6.4.19",
52
- "@storybook/react": "6.4.19",
48
+ "@storybook/addon-storyshots": "6.5.9",
49
+ "@storybook/addons": "6.5.9",
50
+ "@storybook/builder-webpack5": "6.5.9",
51
+ "@storybook/manager-webpack5": "6.5.9",
52
+ "@storybook/react": "6.5.9",
53
53
  "babel-core": "7.0.0-bridge.0",
54
- "babel-jest": "27.5.1",
54
+ "babel-jest": "28.1.1",
55
55
  "babel-plugin-lodash": "3.3.4",
56
56
  "babel-plugin-require-context-hook": "1.0.0",
57
- "chromatic": "6.5.3",
57
+ "chromatic": "6.6.3",
58
58
  "classnames": "2.3.1",
59
59
  "colormap": "2.3.2",
60
- "core-js": "3.20.2",
60
+ "core-js": "3.23.1",
61
61
  "cross-env": "7.0.3",
62
62
  "enzyme": "3.11.0",
63
63
  "enzyme-adapter-react-16": "1.15.6",
@@ -67,11 +67,11 @@
67
67
  "jest": "27.5.1",
68
68
  "jest-date-mock": "1.0.8",
69
69
  "lodash": "4.17.21",
70
- "postcss": "8.4.12",
70
+ "postcss": "8.4.14",
71
71
  "prop-types": "15.8.1",
72
72
  "react": "16.14.0",
73
73
  "react-dom": "16.14.0",
74
- "react-router-dom": "5.3.0",
74
+ "react-router-dom": "5.3.1",
75
75
  "react-test-renderer": "16.14.0",
76
76
  "rimraf": "3.0.2"
77
77
  },
@@ -80,17 +80,17 @@
80
80
  "core-js": "^3.0.0",
81
81
  "lodash": "^4.0.0",
82
82
  "prop-types": "^15.0.0",
83
- "react": "^16.0.0",
84
- "react-dom": "^16.0.0",
83
+ "react": "^16.0.0 | ^17.0.0",
84
+ "react-dom": "^16.0.0 | ^17.0.0",
85
85
  "react-router-dom": "^5.0.0"
86
86
  },
87
87
  "dependencies": {
88
- "@bundle-stats/utils": "^3.4.0-alpha.5",
89
- "ariakit": "2.0.0-alpha.19",
90
- "date-fns": "2.28.0",
91
- "modern-css-reset": "1.4.0",
92
- "query-string": "7.1.1",
93
- "use-query-params": "1.2.3"
88
+ "@bundle-stats/utils": "^4.0.0-alpha.7",
89
+ "ariakit": "2.0.0-next.30",
90
+ "date-fns": "^2.28.0",
91
+ "modern-css-reset": "^1.4.0",
92
+ "query-string": "^7.1.0",
93
+ "use-query-params": "^1.2.3"
94
94
  },
95
- "gitHead": "8cf4f784d15aed35e09a911a2fc9646a3fb9b06c"
95
+ "gitHead": "89c6eeff0863047a918468600104854fa073617a"
96
96
  }