@bundle-stats/ui 4.0.0-alpha.10 → 4.0.0-alpha.15
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/components/summary/summary.js +6 -3
- package/lib/components/summary/summary.module.css +6 -2
- package/lib/components/summary-item/summary-item.module.css +1 -1
- package/lib/css/variables.css +11 -11
- package/lib-esm/components/summary/summary.js +6 -3
- package/lib-esm/components/summary/summary.module.css +6 -2
- package/lib-esm/components/summary-item/summary-item.module.css +1 -1
- package/lib-esm/css/variables.css +11 -11
- package/package.json +12 -12
- package/src/components/summary/summary.jsx +16 -11
- package/src/components/summary/summary.module.css +6 -2
- package/src/components/summary-item/summary-item.module.css +1 -1
- package/src/css/variables.css +11 -11
|
@@ -54,9 +54,9 @@ var Summary = function Summary(_ref) {
|
|
|
54
54
|
showSummaryItemDelta = _ref.showSummaryItemDelta,
|
|
55
55
|
SummaryItemCustomLink = _ref.summaryItemLink;
|
|
56
56
|
return /*#__PURE__*/_react["default"].createElement(_box.Box, {
|
|
57
|
-
outline: true,
|
|
58
57
|
className: (0, _classnames["default"])(_summaryModule["default"].root, className)
|
|
59
58
|
}, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
|
|
59
|
+
space: "small",
|
|
60
60
|
className: _summaryModule["default"].items
|
|
61
61
|
}, Array.from(_utils.METRIC_COMPONENT_LINKS).filter(function (_ref2) {
|
|
62
62
|
var _ref3 = _slicedToArray(_ref2, 1),
|
|
@@ -68,11 +68,14 @@ var Summary = function Summary(_ref) {
|
|
|
68
68
|
metricId = _ref5[0],
|
|
69
69
|
metricOptions = _ref5[1];
|
|
70
70
|
|
|
71
|
-
return /*#__PURE__*/_react["default"].createElement(
|
|
71
|
+
return /*#__PURE__*/_react["default"].createElement(_box.Box, _extends({
|
|
72
72
|
key: metricId,
|
|
73
|
-
|
|
73
|
+
outline: true,
|
|
74
|
+
padding: "small",
|
|
74
75
|
as: SummaryItemCustomLink
|
|
75
76
|
}, metricOptions.link, {
|
|
77
|
+
className: _summaryModule["default"].item
|
|
78
|
+
}), /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
|
|
76
79
|
size: size,
|
|
77
80
|
id: metricId,
|
|
78
81
|
data: (0, _get2["default"])(data, metricId),
|
package/lib/css/variables.css
CHANGED
|
@@ -28,19 +28,19 @@
|
|
|
28
28
|
/*
|
|
29
29
|
* Color scheme:
|
|
30
30
|
* https://coolors.co/3385d6-dd555e-63bf5e-f7e37d-192339
|
|
31
|
-
* http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%
|
|
31
|
+
* http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23535558&mcgpalette4=%233385d6&themename=mcgtheme
|
|
32
32
|
*/
|
|
33
33
|
--color-gray-25: #fafafa;
|
|
34
|
-
--color-gray-50: #
|
|
35
|
-
--color-gray-100: #
|
|
36
|
-
--color-gray-200: #
|
|
37
|
-
--color-gray-300: #
|
|
38
|
-
--color-gray-400: #
|
|
39
|
-
--color-gray-500: #
|
|
40
|
-
--color-gray-600: #
|
|
41
|
-
--color-gray-700: #
|
|
42
|
-
--color-gray-800: #
|
|
43
|
-
--color-gray-900: #
|
|
34
|
+
--color-gray-50: #eaebeb;
|
|
35
|
+
--color-gray-100: #cbcccd;
|
|
36
|
+
--color-gray-200: #a9aaac;
|
|
37
|
+
--color-gray-300: #87888a;
|
|
38
|
+
--color-gray-400: #6d6f71;
|
|
39
|
+
--color-gray-500: #535558;
|
|
40
|
+
--color-gray-600: #4c4e50;
|
|
41
|
+
--color-gray-700: #424447;
|
|
42
|
+
--color-gray-800: #393b3d;
|
|
43
|
+
--color-gray-900: #292a2d;
|
|
44
44
|
|
|
45
45
|
--color-gray-ultra-light: var(--color-gray-200);
|
|
46
46
|
--color-gray-light: var(--color-gray-300);
|
|
@@ -24,20 +24,23 @@ export const Summary = _ref => {
|
|
|
24
24
|
summaryItemLink: SummaryItemCustomLink
|
|
25
25
|
} = _ref;
|
|
26
26
|
return /*#__PURE__*/React.createElement(Box, {
|
|
27
|
-
outline: true,
|
|
28
27
|
className: cx(css.root, className)
|
|
29
28
|
}, /*#__PURE__*/React.createElement(FlexStack, {
|
|
29
|
+
space: "small",
|
|
30
30
|
className: css.items
|
|
31
31
|
}, Array.from(METRIC_COMPONENT_LINKS).filter(_ref2 => {
|
|
32
32
|
let [metricId] = _ref2;
|
|
33
33
|
return keys.includes(metricId);
|
|
34
34
|
}).map(_ref3 => {
|
|
35
35
|
let [metricId, metricOptions] = _ref3;
|
|
36
|
-
return /*#__PURE__*/React.createElement(
|
|
36
|
+
return /*#__PURE__*/React.createElement(Box, _extends({
|
|
37
37
|
key: metricId,
|
|
38
|
-
|
|
38
|
+
outline: true,
|
|
39
|
+
padding: "small",
|
|
39
40
|
as: SummaryItemCustomLink
|
|
40
41
|
}, metricOptions.link, {
|
|
42
|
+
className: css.item
|
|
43
|
+
}), /*#__PURE__*/React.createElement(SummaryItem, {
|
|
41
44
|
size: size,
|
|
42
45
|
id: metricId,
|
|
43
46
|
data: _get(data, metricId),
|
|
@@ -28,19 +28,19 @@
|
|
|
28
28
|
/*
|
|
29
29
|
* Color scheme:
|
|
30
30
|
* https://coolors.co/3385d6-dd555e-63bf5e-f7e37d-192339
|
|
31
|
-
* http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%
|
|
31
|
+
* http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23535558&mcgpalette4=%233385d6&themename=mcgtheme
|
|
32
32
|
*/
|
|
33
33
|
--color-gray-25: #fafafa;
|
|
34
|
-
--color-gray-50: #
|
|
35
|
-
--color-gray-100: #
|
|
36
|
-
--color-gray-200: #
|
|
37
|
-
--color-gray-300: #
|
|
38
|
-
--color-gray-400: #
|
|
39
|
-
--color-gray-500: #
|
|
40
|
-
--color-gray-600: #
|
|
41
|
-
--color-gray-700: #
|
|
42
|
-
--color-gray-800: #
|
|
43
|
-
--color-gray-900: #
|
|
34
|
+
--color-gray-50: #eaebeb;
|
|
35
|
+
--color-gray-100: #cbcccd;
|
|
36
|
+
--color-gray-200: #a9aaac;
|
|
37
|
+
--color-gray-300: #87888a;
|
|
38
|
+
--color-gray-400: #6d6f71;
|
|
39
|
+
--color-gray-500: #535558;
|
|
40
|
+
--color-gray-600: #4c4e50;
|
|
41
|
+
--color-gray-700: #424447;
|
|
42
|
+
--color-gray-800: #393b3d;
|
|
43
|
+
--color-gray-900: #292a2d;
|
|
44
44
|
|
|
45
45
|
--color-gray-ultra-light: var(--color-gray-200);
|
|
46
46
|
--color-gray-light: var(--color-gray-300);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bundle-stats/ui",
|
|
3
|
-
"version": "4.0.0-alpha.
|
|
3
|
+
"version": "4.0.0-alpha.15",
|
|
4
4
|
"description": "UI components for BundleStats projects.",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-esm/index.js",
|
|
@@ -36,11 +36,11 @@
|
|
|
36
36
|
},
|
|
37
37
|
"homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@babel/cli": "7.
|
|
40
|
-
"@babel/core": "7.18.
|
|
41
|
-
"@babel/plugin-proposal-class-properties": "7.
|
|
42
|
-
"@babel/preset-env": "7.18.
|
|
43
|
-
"@babel/preset-react": "7.
|
|
39
|
+
"@babel/cli": "7.18.6",
|
|
40
|
+
"@babel/core": "7.18.6",
|
|
41
|
+
"@babel/plugin-proposal-class-properties": "7.18.6",
|
|
42
|
+
"@babel/preset-env": "7.18.6",
|
|
43
|
+
"@babel/preset-react": "7.18.6",
|
|
44
44
|
"@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
|
|
45
45
|
"@storybook/addon-essentials": "6.5.9",
|
|
46
46
|
"@storybook/addon-knobs": "6.4.0",
|
|
@@ -51,13 +51,13 @@
|
|
|
51
51
|
"@storybook/manager-webpack5": "6.5.9",
|
|
52
52
|
"@storybook/react": "6.5.9",
|
|
53
53
|
"babel-core": "7.0.0-bridge.0",
|
|
54
|
-
"babel-jest": "28.1.
|
|
54
|
+
"babel-jest": "28.1.2",
|
|
55
55
|
"babel-plugin-lodash": "3.3.4",
|
|
56
56
|
"babel-plugin-require-context-hook": "1.0.0",
|
|
57
|
-
"chromatic": "6.
|
|
57
|
+
"chromatic": "6.7.0",
|
|
58
58
|
"classnames": "2.3.1",
|
|
59
59
|
"colormap": "2.3.2",
|
|
60
|
-
"core-js": "3.23.
|
|
60
|
+
"core-js": "3.23.3",
|
|
61
61
|
"cross-env": "7.0.3",
|
|
62
62
|
"enzyme": "3.11.0",
|
|
63
63
|
"enzyme-adapter-react-16": "1.15.6",
|
|
@@ -85,12 +85,12 @@
|
|
|
85
85
|
"react-router-dom": "^5.0.0"
|
|
86
86
|
},
|
|
87
87
|
"dependencies": {
|
|
88
|
-
"@bundle-stats/utils": "^4.0.0-alpha.
|
|
89
|
-
"ariakit": "2.0.0-next.
|
|
88
|
+
"@bundle-stats/utils": "^4.0.0-alpha.15",
|
|
89
|
+
"ariakit": "2.0.0-next.31",
|
|
90
90
|
"date-fns": "^2.28.0",
|
|
91
91
|
"modern-css-reset": "^1.4.0",
|
|
92
92
|
"query-string": "^7.1.0",
|
|
93
93
|
"use-query-params": "^1.2.3"
|
|
94
94
|
},
|
|
95
|
-
"gitHead": "
|
|
95
|
+
"gitHead": "d076065ddbf0eb25cf871b527c141b867de10272"
|
|
96
96
|
}
|
|
@@ -20,23 +20,28 @@ export const Summary = ({
|
|
|
20
20
|
showSummaryItemDelta,
|
|
21
21
|
summaryItemLink: SummaryItemCustomLink,
|
|
22
22
|
}) => (
|
|
23
|
-
<Box
|
|
24
|
-
<FlexStack className={css.items}>
|
|
23
|
+
<Box className={cx(css.root, className)}>
|
|
24
|
+
<FlexStack space="small" className={css.items}>
|
|
25
25
|
{Array.from(METRIC_COMPONENT_LINKS)
|
|
26
26
|
.filter(([metricId]) => keys.includes(metricId))
|
|
27
27
|
.map(([metricId, metricOptions]) => (
|
|
28
|
-
<
|
|
28
|
+
<Box
|
|
29
29
|
key={metricId}
|
|
30
|
-
|
|
30
|
+
outline
|
|
31
|
+
padding="small"
|
|
31
32
|
as={SummaryItemCustomLink}
|
|
32
33
|
{...metricOptions.link}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
34
|
+
className={css.item}
|
|
35
|
+
>
|
|
36
|
+
<SummaryItem
|
|
37
|
+
size={size}
|
|
38
|
+
id={metricId}
|
|
39
|
+
data={get(data, metricId)}
|
|
40
|
+
loading={loading}
|
|
41
|
+
showMetricDescription
|
|
42
|
+
showDelta={showSummaryItemDelta && metricOptions.showDelta !== false}
|
|
43
|
+
/>
|
|
44
|
+
</Box>
|
|
40
45
|
))}
|
|
41
46
|
</FlexStack>
|
|
42
47
|
</Box>
|
package/src/css/variables.css
CHANGED
|
@@ -28,19 +28,19 @@
|
|
|
28
28
|
/*
|
|
29
29
|
* Color scheme:
|
|
30
30
|
* https://coolors.co/3385d6-dd555e-63bf5e-f7e37d-192339
|
|
31
|
-
* http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%
|
|
31
|
+
* http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23535558&mcgpalette4=%233385d6&themename=mcgtheme
|
|
32
32
|
*/
|
|
33
33
|
--color-gray-25: #fafafa;
|
|
34
|
-
--color-gray-50: #
|
|
35
|
-
--color-gray-100: #
|
|
36
|
-
--color-gray-200: #
|
|
37
|
-
--color-gray-300: #
|
|
38
|
-
--color-gray-400: #
|
|
39
|
-
--color-gray-500: #
|
|
40
|
-
--color-gray-600: #
|
|
41
|
-
--color-gray-700: #
|
|
42
|
-
--color-gray-800: #
|
|
43
|
-
--color-gray-900: #
|
|
34
|
+
--color-gray-50: #eaebeb;
|
|
35
|
+
--color-gray-100: #cbcccd;
|
|
36
|
+
--color-gray-200: #a9aaac;
|
|
37
|
+
--color-gray-300: #87888a;
|
|
38
|
+
--color-gray-400: #6d6f71;
|
|
39
|
+
--color-gray-500: #535558;
|
|
40
|
+
--color-gray-600: #4c4e50;
|
|
41
|
+
--color-gray-700: #424447;
|
|
42
|
+
--color-gray-800: #393b3d;
|
|
43
|
+
--color-gray-900: #292a2d;
|
|
44
44
|
|
|
45
45
|
--color-gray-ultra-light: var(--color-gray-200);
|
|
46
46
|
--color-gray-light: var(--color-gray-300);
|