@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.
- package/lib/app/app.js +6 -21
- package/lib/app/app.stories.js +1 -22
- package/lib/assets/icons.svg +0 -8
- package/lib/components/asset-info/asset-info.js +1 -1
- package/lib/components/bundle-assets/bundle-assets.js +1 -1
- package/lib/components/bundle-assets/index.js +1 -1
- package/lib/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js +1 -1
- package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.js +8 -44
- package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.module.css +2 -2
- package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.js +1 -20
- package/lib/components/bundle-modules/bundle-modules.js +1 -1
- package/lib/components/bundle-modules/index.js +1 -1
- package/lib/components/bundle-packages/bundle-packages.js +1 -1
- package/lib/components/bundle-packages/index.js +1 -1
- package/lib/components/component-link.js +1 -1
- package/lib/components/index.js +0 -8
- package/lib/components/job-meta/job-meta.js +1 -1
- package/lib/components/job-name/job-name.js +1 -1
- package/lib/components/metrics-table/metrics-table.js +1 -1
- package/lib/components/metrics-table-options/metrics-table-options.js +1 -1
- package/lib/components/module-info/module-info.js +1 -1
- package/lib/components/summary/summary.js +13 -24
- package/lib/components/summary/summary.module.css +1 -45
- package/lib/components/summary/summary.stories.js +1 -30
- package/lib/components/summary-item/summary-item.js +14 -37
- package/lib/components/summary-item/summary-item.module.css +25 -13
- package/lib/components/summary-item/summary-item.stories.js +53 -51
- package/lib/constants.js +4 -4
- package/lib/layout/box/box.js +1 -1
- package/lib/layout/flex-stack/flex-stack.js +1 -1
- package/lib/layout/footer/footer.js +1 -1
- package/lib/layout/separator.js +1 -1
- package/lib/layout/stack/stack.js +1 -1
- package/lib/query-state.js +1 -1
- package/lib/ui/alert/alert.js +3 -13
- package/lib/ui/container/container.js +1 -1
- package/lib/ui/filters/filters.container.js +3 -3
- package/lib/ui/filters/filters.js +1 -1
- package/lib/ui/horizontal-bar-chart/horizontal-bar-chart.js +2 -2
- package/lib/ui/hover-card/hover-card.js +8 -2
- package/lib/ui/hover-card/hover-card.stories.js +1 -1
- package/lib/ui/icon/icon.js +1 -3
- package/lib/ui/input/input.js +1 -1
- package/lib/ui/loader/loader.js +1 -1
- package/lib/ui/logo/logo.js +1 -1
- package/lib/ui/panels/panels.js +1 -1
- package/lib/ui/skeleton/skeleton.js +1 -1
- package/lib/ui/sort-dropdown/sort-dropdown.js +1 -1
- package/lib/ui/tag/tag.js +1 -1
- package/lib/ui/tooltip/tooltip.js +1 -1
- package/lib-esm/app/app.js +6 -20
- package/lib-esm/app/app.stories.js +1 -22
- package/lib-esm/assets/icons.svg +0 -8
- package/lib-esm/components/asset-info/asset-info.js +1 -1
- package/lib-esm/components/bundle-assets/bundle-assets.js +1 -1
- package/lib-esm/components/bundle-assets/bundle-assets.utils.js +1 -0
- package/lib-esm/components/bundle-assets/index.js +1 -1
- package/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js +1 -1
- package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.js +8 -25
- package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.module.css +2 -2
- package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.js +0 -18
- package/lib-esm/components/bundle-modules/bundle-modules.js +1 -1
- package/lib-esm/components/bundle-modules/index.js +1 -1
- package/lib-esm/components/bundle-packages/bundle-packages.js +1 -1
- package/lib-esm/components/bundle-packages/bundle-packages.utils.js +1 -0
- package/lib-esm/components/bundle-packages/index.js +1 -1
- package/lib-esm/components/component-link.js +1 -1
- package/lib-esm/components/index.js +0 -1
- package/lib-esm/components/job-meta/job-meta.js +1 -1
- package/lib-esm/components/job-name/job-name.js +1 -1
- package/lib-esm/components/metrics-table/metrics-table.js +1 -1
- package/lib-esm/components/metrics-table-options/metrics-table-options.js +1 -1
- package/lib-esm/components/module-info/module-info.js +1 -1
- package/lib-esm/components/summary/summary.js +14 -22
- package/lib-esm/components/summary/summary.module.css +1 -45
- package/lib-esm/components/summary/summary.stories.js +1 -28
- package/lib-esm/components/summary-item/summary-item.js +11 -33
- package/lib-esm/components/summary-item/summary-item.module.css +25 -13
- package/lib-esm/components/summary-item/summary-item.stories.js +38 -50
- package/lib-esm/constants.js +4 -4
- package/lib-esm/layout/box/box.js +1 -1
- package/lib-esm/layout/flex-stack/flex-stack.js +1 -1
- package/lib-esm/layout/footer/footer.js +1 -1
- package/lib-esm/layout/separator.js +1 -1
- package/lib-esm/layout/stack/stack.js +1 -1
- package/lib-esm/query-state.js +1 -1
- package/lib-esm/ui/alert/alert.js +3 -6
- package/lib-esm/ui/container/container.js +1 -1
- package/lib-esm/ui/filters/filters.container.js +1 -1
- package/lib-esm/ui/filters/filters.js +2 -1
- package/lib-esm/ui/hover-card/hover-card.js +8 -2
- package/lib-esm/ui/hover-card/hover-card.stories.js +1 -1
- package/lib-esm/ui/icon/icon.js +1 -3
- package/lib-esm/ui/input/input.js +1 -1
- package/lib-esm/ui/loader/loader.js +1 -1
- package/lib-esm/ui/logo/logo.js +1 -1
- package/lib-esm/ui/panels/panels.js +1 -1
- package/lib-esm/ui/skeleton/skeleton.js +1 -1
- package/lib-esm/ui/sort-dropdown/sort-dropdown.js +1 -1
- package/lib-esm/ui/tag/tag.js +1 -1
- package/lib-esm/ui/tooltip/tooltip.js +1 -1
- package/package.json +26 -26
- package/src/app/app.jsx +5 -12
- package/src/assets/icons.svg +0 -8
- package/src/components/bundle-assets-totals-table/bundle-assets-totals-table.jsx +13 -27
- package/src/components/bundle-assets-totals-table/bundle-assets-totals-table.module.css +2 -2
- package/src/components/index.js +0 -1
- package/src/components/summary/summary.jsx +19 -24
- package/src/components/summary/summary.module.css +1 -45
- package/src/components/summary-item/summary-item.jsx +10 -23
- package/src/components/summary-item/summary-item.module.css +25 -13
- package/src/constants.js +11 -7
- package/src/ui/alert/alert.jsx +2 -7
- package/src/ui/hover-card/hover-card.jsx +5 -0
- package/src/ui/icon/icon.jsx +0 -2
- package/lib/assets/icons/alert-circle.svg +0 -1
- package/lib/assets/icons/check-circle.svg +0 -1
- package/lib/components/budget-info/budget-info.js +0 -80
- package/lib/components/budget-info/budget-info.module.css +0 -40
- package/lib/components/budget-info/budget-info.stories.js +0 -44
- package/lib/components/budget-info/index.js +0 -18
- package/lib/components/budget-insights/budget-insights.js +0 -200
- package/lib/components/budget-insights/budget-insights.module.css +0 -53
- package/lib/components/budget-insights/budget-insights.stories.js +0 -104
- package/lib/components/budget-insights/index.js +0 -18
- package/lib-esm/assets/icons/alert-circle.svg +0 -1
- package/lib-esm/assets/icons/check-circle.svg +0 -1
- package/lib-esm/components/budget-info/budget-info.js +0 -58
- package/lib-esm/components/budget-info/budget-info.module.css +0 -40
- package/lib-esm/components/budget-info/budget-info.stories.js +0 -30
- package/lib-esm/components/budget-info/index.js +0 -1
- package/lib-esm/components/budget-insights/budget-insights.js +0 -148
- package/lib-esm/components/budget-insights/budget-insights.module.css +0 -53
- package/lib-esm/components/budget-insights/budget-insights.stories.js +0 -84
- package/lib-esm/components/budget-insights/index.js +0 -1
- package/src/assets/icons/alert-circle.svg +0 -1
- package/src/assets/icons/check-circle.svg +0 -1
- package/src/components/budget-info/budget-info.jsx +0 -65
- package/src/components/budget-info/budget-info.module.css +0 -40
- package/src/components/budget-info/index.js +0 -1
- package/src/components/budget-insights/budget-insights.jsx +0 -157
- package/src/components/budget-insights/budget-insights.module.css +0 -53
- package/src/components/budget-insights/index.js +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign
|
|
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
|
|
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("
|
|
25
|
-
|
|
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: "
|
|
59
|
+
space: "xxsmall",
|
|
63
60
|
as: Component,
|
|
64
61
|
className: rootClassName
|
|
65
|
-
}, props), /*#__PURE__*/React.createElement(
|
|
66
|
-
as: "h3",
|
|
67
|
-
space: "xxxsmall",
|
|
62
|
+
}, props), /*#__PURE__*/React.createElement("h3", {
|
|
68
63
|
className: css.title
|
|
69
|
-
}, /*#__PURE__*/React.createElement(
|
|
70
|
-
|
|
71
|
-
}, metric.label),
|
|
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:
|
|
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
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
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
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
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
|
|
55
|
-
|
|
56
|
-
|
|
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
|
+
});
|
package/lib-esm/constants.js
CHANGED
|
@@ -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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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/lib-esm/query-state.js
CHANGED
|
@@ -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
|
|
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,
|
|
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
|
-
},
|
|
16
|
+
}, children);
|
|
20
17
|
};
|
|
21
18
|
Alert.propTypes = {
|
|
22
19
|
className: PropTypes.string,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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 '.';
|
package/lib-esm/ui/icon/icon.js
CHANGED
|
@@ -1,17 +1,15 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign
|
|
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
|
|
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
|
|
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/lib-esm/ui/logo/logo.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign
|
|
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
|
|
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
|
|
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
|
|
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/lib-esm/ui/tag/tag.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign
|
|
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
|
|
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
|
+
"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.
|
|
40
|
-
"@babel/core": "7.
|
|
41
|
-
"@babel/plugin-proposal-class-properties": "7.
|
|
42
|
-
"@babel/preset-env": "7.
|
|
43
|
-
"@babel/preset-react": "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.
|
|
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.
|
|
49
|
-
"@storybook/addons": "6.
|
|
50
|
-
"@storybook/builder-webpack5": "6.
|
|
51
|
-
"@storybook/manager-webpack5": "6.
|
|
52
|
-
"@storybook/react": "6.
|
|
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": "
|
|
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.
|
|
57
|
+
"chromatic": "6.6.3",
|
|
58
58
|
"classnames": "2.3.1",
|
|
59
59
|
"colormap": "2.3.2",
|
|
60
|
-
"core-js": "3.
|
|
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.
|
|
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.
|
|
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": "^
|
|
89
|
-
"ariakit": "2.0.0-
|
|
90
|
-
"date-fns": "2.28.0",
|
|
91
|
-
"modern-css-reset": "1.4.0",
|
|
92
|
-
"query-string": "7.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": "
|
|
95
|
+
"gitHead": "89c6eeff0863047a918468600104854fa073617a"
|
|
96
96
|
}
|