@bundle-stats/ui 4.8.2 → 4.8.4-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/bundle-assets/bundle-assets.js +28 -27
- package/lib/components/bundle-assets/bundle-assets.js.map +1 -1
- package/lib/components/bundle-modules/bundle-modules.i18n.js +12 -0
- package/lib/components/bundle-modules/bundle-modules.i18n.js.map +1 -0
- package/lib/components/bundle-modules/bundle-modules.js +12 -99
- package/lib/components/bundle-modules/bundle-modules.js.map +1 -1
- package/lib/components/bundle-modules/bundle-modules.utils.js +108 -1
- package/lib/components/bundle-modules/bundle-modules.utils.js.map +1 -1
- package/lib/components/bundle-modules/index.js +6 -45
- package/lib/components/bundle-modules/index.js.map +1 -1
- package/lib/components/entry-info/entry-info.i18n.js +7 -0
- package/lib/components/entry-info/entry-info.i18n.js.map +1 -0
- package/lib/components/entry-info/entry-info.js +27 -3
- package/lib/components/entry-info/entry-info.js.map +1 -1
- package/lib/components/job-name/job-name.js +1 -1
- package/lib/components/job-name/job-name.js.map +1 -1
- package/lib/components/metric-run-info/metric-run-info.js +10 -5
- package/lib/components/metric-run-info/metric-run-info.js.map +1 -1
- package/lib/components/metrics-table/index.js +1 -1
- package/lib/components/metrics-table/index.js.map +1 -1
- package/lib/components/metrics-table/metrics-table.i18n.js +12 -0
- package/lib/components/metrics-table/metrics-table.i18n.js.map +1 -0
- package/lib/components/metrics-table/metrics-table.js +50 -69
- package/lib/components/metrics-table/metrics-table.js.map +1 -1
- package/lib/components/metrics-table/metrics-table.module.css +2 -2
- package/lib/components/sort-button/sort-button.js +10 -4
- package/lib/components/sort-button/sort-button.js.map +1 -1
- package/lib/components/sort-button/sort-button.module.css +9 -9
- package/lib/hooks/rows-sort.js.map +1 -1
- package/lib/ui/filters/filters.i18n.js +6 -0
- package/lib/ui/filters/filters.i18n.js.map +1 -0
- package/lib/ui/filters/filters.js +16 -54
- package/lib/ui/filters/filters.js.map +1 -1
- package/lib/ui/filters/filters.utils.js +27 -11
- package/lib/ui/filters/filters.utils.js.map +1 -1
- package/lib/ui/filters/index.js +0 -8
- package/lib/ui/filters/index.js.map +1 -1
- package/lib-esm/components/bundle-assets/bundle-assets.js +28 -27
- package/lib-esm/components/bundle-assets/bundle-assets.js.map +1 -1
- package/lib-esm/components/bundle-modules/bundle-modules.i18n.js +9 -0
- package/lib-esm/components/bundle-modules/bundle-modules.i18n.js.map +1 -0
- package/lib-esm/components/bundle-modules/bundle-modules.js +13 -101
- package/lib-esm/components/bundle-modules/bundle-modules.js.map +1 -1
- package/lib-esm/components/bundle-modules/bundle-modules.utils.js +83 -1
- package/lib-esm/components/bundle-modules/bundle-modules.utils.js.map +1 -1
- package/lib-esm/components/bundle-modules/index.js +9 -45
- package/lib-esm/components/bundle-modules/index.js.map +1 -1
- package/lib-esm/components/entry-info/entry-info.i18n.js +4 -0
- package/lib-esm/components/entry-info/entry-info.i18n.js.map +1 -0
- package/lib-esm/components/entry-info/entry-info.js +4 -3
- package/lib-esm/components/entry-info/entry-info.js.map +1 -1
- package/lib-esm/components/job-name/job-name.js +1 -1
- package/lib-esm/components/job-name/job-name.js.map +1 -1
- package/lib-esm/components/metric-run-info/metric-run-info.js +10 -5
- package/lib-esm/components/metric-run-info/metric-run-info.js.map +1 -1
- package/lib-esm/components/metrics-table/index.js +1 -1
- package/lib-esm/components/metrics-table/index.js.map +1 -1
- package/lib-esm/components/metrics-table/metrics-table.i18n.js +9 -0
- package/lib-esm/components/metrics-table/metrics-table.i18n.js.map +1 -0
- package/lib-esm/components/metrics-table/metrics-table.js +37 -79
- package/lib-esm/components/metrics-table/metrics-table.js.map +1 -1
- package/lib-esm/components/metrics-table/metrics-table.module.css +2 -2
- package/lib-esm/components/sort-button/sort-button.js +10 -4
- package/lib-esm/components/sort-button/sort-button.js.map +1 -1
- package/lib-esm/components/sort-button/sort-button.module.css +9 -9
- package/lib-esm/hooks/rows-sort.js.map +1 -1
- package/lib-esm/ui/filters/filters.i18n.js +3 -0
- package/lib-esm/ui/filters/filters.i18n.js.map +1 -0
- package/lib-esm/ui/filters/filters.js +16 -54
- package/lib-esm/ui/filters/filters.js.map +1 -1
- package/lib-esm/ui/filters/filters.utils.js +27 -11
- package/lib-esm/ui/filters/filters.utils.js.map +1 -1
- package/lib-esm/ui/filters/index.js +0 -8
- package/lib-esm/ui/filters/index.js.map +1 -1
- package/package.json +10 -10
- package/src/components/bundle-assets/bundle-assets.jsx +28 -30
- package/src/components/bundle-modules/bundle-modules.i18n.ts +8 -0
- package/src/components/bundle-modules/bundle-modules.tsx +200 -0
- package/src/components/bundle-modules/bundle-modules.types.d.ts +24 -0
- package/src/components/bundle-modules/bundle-modules.utils.ts +208 -0
- package/src/components/bundle-modules/index.tsx +102 -0
- package/src/components/entry-info/entry-info.i18n.ts +3 -0
- package/src/components/entry-info/entry-info.tsx +10 -4
- package/src/components/job-name/job-name.jsx +7 -1
- package/src/components/metric-run-info/metric-run-info.tsx +12 -5
- package/src/components/metrics-table/index.tsx +14 -0
- package/src/components/metrics-table/metrics-table.i18n.ts +10 -0
- package/src/components/metrics-table/metrics-table.module.css +2 -2
- package/src/components/metrics-table/metrics-table.stories.tsx +225 -0
- package/src/components/metrics-table/metrics-table.tsx +301 -0
- package/src/components/sort-button/sort-button.module.css +9 -9
- package/src/components/sort-button/sort-button.tsx +14 -6
- package/src/hooks/rows-sort.ts +8 -8
- package/src/types.d.ts +11 -0
- package/src/ui/filters/__tests__/filters.utils.ts +98 -0
- package/src/ui/filters/filters.i18n.ts +2 -0
- package/src/ui/filters/{filters.jsx → filters.tsx} +63 -72
- package/src/ui/filters/{filters.utils.js → filters.utils.ts} +38 -21
- package/src/ui/filters/{index.jsx → index.tsx} +14 -17
- package/types/components/bundle-modules/bundle-modules.d.ts +21 -62
- package/types/components/bundle-modules/bundle-modules.i18n.d.ts +8 -0
- package/types/components/bundle-modules/bundle-modules.utils.d.ts +28 -5
- package/types/components/bundle-modules/index.d.ts +13 -22
- package/types/components/entry-info/entry-info.i18n.d.ts +3 -0
- package/types/components/job-name/job-name.d.ts +1 -1
- package/types/components/metrics-table/index.d.ts +4 -1
- package/types/components/metrics-table/metrics-table.d.ts +25 -47
- package/types/components/metrics-table/metrics-table.i18n.d.ts +8 -0
- package/types/components/sort-button/sort-button.d.ts +2 -2
- package/types/hooks/rows-sort.d.ts +3 -3
- package/types/layout/box/box.d.ts +1 -1
- package/types/layout/flex-stack/flex-stack.d.ts +1 -1
- package/types/ui/filters/filters.d.ts +24 -14
- package/types/ui/filters/filters.i18n.d.ts +2 -0
- package/types/ui/filters/filters.utils.d.ts +7 -6
- package/types/ui/filters/index.d.ts +8 -12
- package/types/ui/table/table.d.ts +5 -5
- package/types/ui/tooltip/tooltip.d.ts +1 -1
- package/src/components/bundle-modules/bundle-modules.jsx +0 -291
- package/src/components/bundle-modules/bundle-modules.utils.js +0 -82
- package/src/components/bundle-modules/index.jsx +0 -113
- package/src/components/metrics-table/index.jsx +0 -11
- package/src/components/metrics-table/metrics-table.jsx +0 -309
- package/src/ui/filters/__tests__/filters-dropdown.utils.js +0 -74
|
@@ -4,7 +4,7 @@ import { SORT } from '../../constants';
|
|
|
4
4
|
import { Icon } from '../../ui/icon';
|
|
5
5
|
import { Tooltip } from '../../ui/tooltip';
|
|
6
6
|
import css from './sort-button.module.css';
|
|
7
|
-
const getToggleAction = (
|
|
7
|
+
const getToggleAction = (field, label, sort) => {
|
|
8
8
|
if ((sort === null || sort === void 0 ? void 0 : sort.field) !== field) {
|
|
9
9
|
return { direction: SORT.DESC, title: `Order ${label} descending` };
|
|
10
10
|
}
|
|
@@ -22,18 +22,24 @@ const getDescAction = (label) => {
|
|
|
22
22
|
export const SortButton = (props) => {
|
|
23
23
|
const { className = '', children, fieldPath, fieldName, label, sort, updateSort } = props;
|
|
24
24
|
const field = `${fieldPath}.${fieldName}`;
|
|
25
|
-
const toggleAction = getToggleAction(
|
|
25
|
+
const toggleAction = getToggleAction(field, label, sort);
|
|
26
26
|
const ascAction = getAscAction(label);
|
|
27
27
|
const descAction = getDescAction(label);
|
|
28
|
-
const isSorted = sort.field === field;
|
|
28
|
+
const isSorted = (sort === null || sort === void 0 ? void 0 : sort.field) === field;
|
|
29
29
|
const getOrderOnClick = useCallback((action) => () => {
|
|
30
|
+
if (!updateSort) {
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
30
33
|
if (action.direction) {
|
|
31
34
|
updateSort({ field, direction: action.direction });
|
|
32
35
|
return;
|
|
33
36
|
}
|
|
34
37
|
updateSort({ field: '', direction: '' });
|
|
35
38
|
}, [field, updateSort, toggleAction]);
|
|
36
|
-
|
|
39
|
+
if (!updateSort) {
|
|
40
|
+
return React.createElement("div", { className: cx(css.root, className) }, children);
|
|
41
|
+
}
|
|
42
|
+
return (React.createElement("div", { className: cx(css.root, css.interactive, className, isSorted && css.active) },
|
|
37
43
|
React.createElement(Tooltip, { title: toggleAction.title, as: "button", type: "button", onClick: getOrderOnClick(toggleAction), className: cx(css.button, css.toggle) }, children),
|
|
38
44
|
React.createElement(Tooltip, { title: ascAction.title, as: "button", type: "button", onClick: getOrderOnClick(ascAction), className: cx(css.button, css.direction, css.directionAsc, isSorted && sort.direction === SORT.ASC && css.directionActive) },
|
|
39
45
|
React.createElement(Icon, { glyph: Icon.ICONS.CHEVRON_UP, size: "small", className: css.directionIcon })),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sort-button.js","sourceRoot":"","sources":["../../../src/components/sort-button/sort-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,GAAG,MAAM,0BAA0B,CAAC;AAO3C,MAAM,eAAe,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"sort-button.js","sourceRoot":"","sources":["../../../src/components/sort-button/sort-button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.root {
|
|
2
|
-
--icon-dimension:
|
|
2
|
+
--icon-dimension: 13px;
|
|
3
3
|
display: inline-block;
|
|
4
4
|
margin: calc(0px - var(--space-xxxsmall));
|
|
5
5
|
margin-right: calc(0px - 1px - var(--icon-dimension));
|
|
@@ -18,13 +18,13 @@
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
.toggle {
|
|
21
|
-
padding: var(--space-xxxsmall);
|
|
21
|
+
padding: 1px var(--space-xxxsmall);
|
|
22
22
|
padding-right: calc(1px + var(--icon-dimension));
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
.direction {
|
|
26
26
|
position: absolute;
|
|
27
|
-
padding:
|
|
27
|
+
padding: 1px;
|
|
28
28
|
display: block;
|
|
29
29
|
overflow: hidden;
|
|
30
30
|
right: -2px; /* compensate for the button padding */
|
|
@@ -68,9 +68,9 @@
|
|
|
68
68
|
transform: translateY(-5px);
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
-
.
|
|
72
|
-
.
|
|
73
|
-
.
|
|
71
|
+
.interactive:hover,
|
|
72
|
+
.interactive:active,
|
|
73
|
+
.interactive:focus {
|
|
74
74
|
background: var(--color-outline);
|
|
75
75
|
}
|
|
76
76
|
|
|
@@ -80,9 +80,9 @@
|
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
.active .direction,
|
|
83
|
-
.
|
|
84
|
-
.
|
|
85
|
-
.
|
|
83
|
+
.interactive:hover .direction,
|
|
84
|
+
.interactive:hover:active .direction,
|
|
85
|
+
.interactive:hover:focus .direction {
|
|
86
86
|
pointer-events: auto;
|
|
87
87
|
opacity: 1;
|
|
88
88
|
transition: var(--transition-in);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rows-sort.js","sourceRoot":"","sources":["../../src/hooks/rows-sort.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,GAAG,MAAM,YAAY,CAAC;AAC7B,OAAO,OAAO,MAAM,gBAAgB,CAAC;AAGrC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AASpC,MAAM,CAAC,MAAM,SAAS,GACpB,CAAC,SAAiB,EAAE,aAAiD,EAAE,EAAE,CAAC,CAAC,IAAa,EAAE,EAAE;IAC1F,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,aAAa,CAAC,IAAI,CAAC,CAAC;KAC5B;IAED,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;AAC7C,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,IAAI,EACJ,YAAY,GAAG,eAAe,EAC9B,gBAAgB,GAAG,MAAM,EACzB,aAAa,GACK,EAAE,EAAE;IACtB,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,CAAC;IAE1F,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CACH,OAAO,
|
|
1
|
+
{"version":3,"file":"rows-sort.js","sourceRoot":"","sources":["../../src/hooks/rows-sort.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,GAAG,MAAM,YAAY,CAAC;AAC7B,OAAO,OAAO,MAAM,gBAAgB,CAAC;AAGrC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AASpC,MAAM,CAAC,MAAM,SAAS,GACpB,CAAC,SAAiB,EAAE,aAAiD,EAAE,EAAE,CAAC,CAAC,IAAa,EAAE,EAAE;IAC1F,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,aAAa,CAAC,IAAI,CAAC,CAAC;KAC5B;IAED,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;AAC7C,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,IAAI,EACJ,YAAY,GAAG,eAAe,EAC9B,gBAAgB,GAAG,MAAM,EACzB,aAAa,GACK,EAAE,EAAE;IACtB,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,CAAC;IAE1F,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CACH,OAAO,CACP,IAAI,EACJ,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,EAEpC,IAAI,CAAC,SAAS,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAE,IAAI,CAAC,GAAW,CAC3D,EACD,CAAC,IAAI,EAAE,IAAI,CAAC,CACb,CAAC;IAEF,OAAO;QACL,IAAI;QACJ,UAAU;QACV,KAAK,EAAE,WAAW;KACnB,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"filters.i18n.js","sourceRoot":"","sources":["../../../src/ui/filters/filters.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG,WAAW,CAAC;AACjC,MAAM,CAAC,MAAM,KAAK,GAAG,WAAW,CAAC"}
|
|
@@ -1,41 +1,25 @@
|
|
|
1
1
|
import React, { useCallback } from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
2
|
import cx from 'classnames';
|
|
4
3
|
import { FlexStack } from '../../layout/flex-stack';
|
|
5
4
|
import { Dropdown } from '../dropdown';
|
|
5
|
+
import * as I18N from './filters.i18n';
|
|
6
6
|
import { getGroupFiltersLabelSuffix, LABELS } from './filters.utils';
|
|
7
7
|
import css from './filters.module.css';
|
|
8
8
|
const Filter = (props) => {
|
|
9
|
-
const { className, as: Component = 'div', buttonClassName, label, name, getOnOnlyClick, ...inputProps } = props;
|
|
9
|
+
const { className = '', as: Component = 'div', buttonClassName = '', label, name, getOnOnlyClick, ...inputProps } = props;
|
|
10
10
|
const id = `filter-${name}`;
|
|
11
11
|
const rootClassName = cx(css.filter, className);
|
|
12
12
|
return (React.createElement(Component, { className: rootClassName },
|
|
13
13
|
React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", as: "label", className: cx(css.filterCheckbox, buttonClassName) },
|
|
14
|
-
React.createElement("input", {
|
|
15
|
-
React.createElement("span", { className: css.filterLabel
|
|
16
|
-
getOnOnlyClick && (React.createElement("button", {
|
|
17
|
-
};
|
|
18
|
-
Filter.propTypes = {
|
|
19
|
-
className: PropTypes.string,
|
|
20
|
-
as: PropTypes.elementType,
|
|
21
|
-
buttonClassName: PropTypes.string,
|
|
22
|
-
name: PropTypes.string.isRequired,
|
|
23
|
-
label: PropTypes.string.isRequired,
|
|
24
|
-
getOnOnlyClick: PropTypes.func,
|
|
25
|
-
};
|
|
26
|
-
Filter.defaultProps = {
|
|
27
|
-
className: '',
|
|
28
|
-
as: 'div',
|
|
29
|
-
buttonClassName: '',
|
|
30
|
-
getOnOnlyClick: null,
|
|
14
|
+
React.createElement("input", { type: "checkbox", id: id, name: name, ...inputProps, className: css.filterInput }),
|
|
15
|
+
React.createElement("span", { title: label, className: css.filterLabel }, label)),
|
|
16
|
+
getOnOnlyClick && (React.createElement("button", { type: "button", onClick: getOnOnlyClick(name), className: css.filterOnlyButton }, "only"))));
|
|
31
17
|
};
|
|
32
18
|
const FilterGroup = (props) => {
|
|
33
|
-
const { className, buttonClassName, groupKey, data, values, onCheckboxChange, toggleFilters } = props;
|
|
34
|
-
const { label: groupLabel,
|
|
35
|
-
const
|
|
36
|
-
|
|
37
|
-
const areAllGroupItemsChecked = groupCheckboxes
|
|
38
|
-
.map(([itemKey]) => values === null || values === void 0 ? void 0 : values[`${groupKey}.${itemKey}`])
|
|
19
|
+
const { className = '', buttonClassName = '', groupKey, data, values, onCheckboxChange, toggleFilters, } = props;
|
|
20
|
+
const { label: groupLabel, children: groupItems } = data;
|
|
21
|
+
const areAllGroupItemsChecked = groupItems
|
|
22
|
+
.map(({ key: itemKey }) => values === null || values === void 0 ? void 0 : values[`${groupKey}.${itemKey}`])
|
|
39
23
|
.reduce((agg, val) => agg && val, true);
|
|
40
24
|
const filterSuffix = getGroupFiltersLabelSuffix(groupItems);
|
|
41
25
|
const hasCustomFilterSuffix = !Object.values(LABELS).includes(filterSuffix);
|
|
@@ -44,7 +28,7 @@ const FilterGroup = (props) => {
|
|
|
44
28
|
"\u00A0",
|
|
45
29
|
React.createElement("span", { className: cx(hasCustomFilterSuffix && css.labelSuffixCustom) }, filterSuffix)));
|
|
46
30
|
const getOnGroupCheck = (value, overrides = {}) => () => {
|
|
47
|
-
const newFilters =
|
|
31
|
+
const newFilters = groupItems.reduce((agg, { key: itemKey }) => ({
|
|
48
32
|
...agg,
|
|
49
33
|
[`${groupKey}.${itemKey}`]: value,
|
|
50
34
|
}), {});
|
|
@@ -53,51 +37,29 @@ const FilterGroup = (props) => {
|
|
|
53
37
|
...overrides,
|
|
54
38
|
});
|
|
55
39
|
};
|
|
56
|
-
return (React.createElement(Dropdown, { className: className, buttonClassName: buttonClassName, label: dropdownLabel, ariaLabel: `${groupLabel}: ${filterSuffix}` }, ({ MenuItem,
|
|
40
|
+
return (React.createElement(Dropdown, { className: className, buttonClassName: buttonClassName, label: dropdownLabel, ariaLabel: `${groupLabel}: ${filterSuffix}` }, ({ MenuItem, menuItemClassName }) => {
|
|
57
41
|
return (React.createElement(React.Fragment, null,
|
|
58
|
-
React.createElement("div", { className: css.filterGroupItems }, groupItems.map((
|
|
42
|
+
React.createElement("div", { className: css.filterGroupItems }, groupItems.map(({ key: itemKey, ...itemData }) => {
|
|
59
43
|
const id = [groupKey, itemKey].join('.');
|
|
60
44
|
const getOnOnlyClick = () => getOnGroupCheck(false, { [id]: true });
|
|
61
45
|
return (React.createElement(Filter, { key: id, className: menuItemClassName, as: MenuItem, name: id, label: itemData.label, onChange: onCheckboxChange, checked: values[id], disabled: itemData.disabled, getOnOnlyClick: getOnOnlyClick }));
|
|
62
46
|
})),
|
|
63
|
-
React.createElement("div", { className: css.filterGroupActions }, areAllGroupItemsChecked ? (React.createElement(MenuItem, { id: "clear-all", as: "button", className: menuItemClassName, type: "button", onClick: getOnGroupCheck(false) },
|
|
47
|
+
React.createElement("div", { className: css.filterGroupActions }, areAllGroupItemsChecked ? (React.createElement(MenuItem, { id: "clear-all", as: "button", className: menuItemClassName, type: "button", onClick: getOnGroupCheck(false) }, I18N.CLEAR)) : (React.createElement(MenuItem, { id: "clear-all", as: "button", className: menuItemClassName, type: "button", onClick: getOnGroupCheck(true) }, I18N.CHECK)))));
|
|
64
48
|
}));
|
|
65
49
|
};
|
|
66
|
-
FilterGroup.propTypes = {
|
|
67
|
-
className: PropTypes.string,
|
|
68
|
-
buttonClassName: PropTypes.string,
|
|
69
|
-
groupKey: PropTypes.string.isRequired,
|
|
70
|
-
data: PropTypes.object.isRequired,
|
|
71
|
-
values: PropTypes.object.isRequired,
|
|
72
|
-
onCheckboxChange: PropTypes.func.isRequired,
|
|
73
|
-
toggleFilters: PropTypes.func.isRequired,
|
|
74
|
-
};
|
|
75
|
-
FilterGroup.defaultProps = {
|
|
76
|
-
className: '',
|
|
77
|
-
buttonClassName: '',
|
|
78
|
-
};
|
|
79
50
|
export const Filters = (props) => {
|
|
80
|
-
const { className, values, filters, toggleFilter, toggleFilters } = props;
|
|
51
|
+
const { className = '', values, filters, toggleFilter, toggleFilters } = props;
|
|
81
52
|
const onCheckboxChange = useCallback((event) => {
|
|
82
53
|
const { name } = event.target;
|
|
83
54
|
toggleFilter(name, !values[name]);
|
|
84
55
|
}, [toggleFilter, values]);
|
|
85
56
|
const rootClassName = cx(css.root, className);
|
|
86
57
|
return (React.createElement("form", { className: rootClassName },
|
|
87
|
-
React.createElement(FlexStack, { space: "xxsmall", alignItems: "
|
|
88
|
-
if (
|
|
58
|
+
React.createElement(FlexStack, { space: "xxsmall", alignItems: "top", className: css.items }, Object.entries(filters).map(([name, data]) => {
|
|
59
|
+
if ('defaultValue' in data) {
|
|
89
60
|
return (React.createElement(Filter, { key: name, className: cx(css.item, css.filterStandalone), buttonClassName: css.itemButton, name: name, label: data.label, onChange: onCheckboxChange, checked: values[name], disabled: data.disabled }));
|
|
90
61
|
}
|
|
91
62
|
return (React.createElement(FilterGroup, { className: css.item, buttonClassName: css.itemButton, key: name, groupKey: name, data: data, values: values, onCheckboxChange: onCheckboxChange, toggleFilters: toggleFilters }));
|
|
92
63
|
}))));
|
|
93
64
|
};
|
|
94
|
-
Filters.defaultProps = {
|
|
95
|
-
className: '',
|
|
96
|
-
};
|
|
97
|
-
Filters.propTypes = {
|
|
98
|
-
className: PropTypes.string,
|
|
99
|
-
values: PropTypes.object.isRequired,
|
|
100
|
-
filters: PropTypes.object.isRequired,
|
|
101
|
-
toggleFilter: PropTypes.func.isRequired,
|
|
102
|
-
};
|
|
103
65
|
//# sourceMappingURL=filters.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filters.js","sourceRoot":"","sources":["../../../src/ui/filters/filters.
|
|
1
|
+
{"version":3,"file":"filters.js","sourceRoot":"","sources":["../../../src/ui/filters/filters.tsx"],"names":[],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@ export const LABELS = {
|
|
|
7
7
|
};
|
|
8
8
|
export const getGroupFiltersLabelSuffix = (filters) => {
|
|
9
9
|
const filterCount = filters.length;
|
|
10
|
-
const checkedFilters = filters.filter((
|
|
10
|
+
const checkedFilters = filters.filter(({ defaultValue }) => defaultValue);
|
|
11
11
|
const filterCheckedCount = checkedFilters.length;
|
|
12
12
|
if (filterCheckedCount === 0) {
|
|
13
13
|
return LABELS.NONE;
|
|
@@ -15,7 +15,7 @@ export const getGroupFiltersLabelSuffix = (filters) => {
|
|
|
15
15
|
if (filterCheckedCount === filterCount) {
|
|
16
16
|
return LABELS.ALL;
|
|
17
17
|
}
|
|
18
|
-
const checkedFilterLabels = checkedFilters.map((
|
|
18
|
+
const checkedFilterLabels = checkedFilters.map(({ label }) => label);
|
|
19
19
|
let suffix = '';
|
|
20
20
|
let inlinedLabelCount = 0;
|
|
21
21
|
let done = false;
|
|
@@ -42,18 +42,34 @@ export const getGroupFiltersLabelSuffix = (filters) => {
|
|
|
42
42
|
const skippedLabels = filterCheckedCount - inlinedLabelCount;
|
|
43
43
|
return `${suffix}${skippedLabels > 0 ? ` +${skippedLabels}` : ''}`;
|
|
44
44
|
};
|
|
45
|
-
export const getInitialValues = (key,
|
|
46
|
-
if (typeof
|
|
45
|
+
export const getInitialValues = (key, filtersData) => {
|
|
46
|
+
if (typeof filtersData !== 'object') {
|
|
47
|
+
return {};
|
|
48
|
+
}
|
|
49
|
+
if ('defaultValue' in filtersData) {
|
|
47
50
|
return {
|
|
48
|
-
[key]:
|
|
51
|
+
[key]: filtersData.defaultValue,
|
|
49
52
|
};
|
|
50
53
|
}
|
|
51
|
-
if (
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
...
|
|
55
|
-
|
|
54
|
+
if ('children' in filtersData) {
|
|
55
|
+
const result = {};
|
|
56
|
+
filtersData.children.forEach(({ key: childKey, defaultValue }) => {
|
|
57
|
+
const fullKey = [...(key ? [key] : []), childKey].join('.');
|
|
58
|
+
result[fullKey] = defaultValue;
|
|
59
|
+
});
|
|
60
|
+
return result;
|
|
56
61
|
}
|
|
57
|
-
|
|
62
|
+
let result = {};
|
|
63
|
+
Object.entries(filtersData).forEach(([groupKey, groupFilters]) => {
|
|
64
|
+
if (typeof groupFilters === 'object') {
|
|
65
|
+
const fullKey = [...(key ? [key] : []), groupKey].join('.');
|
|
66
|
+
const groupInitialValues = getInitialValues(fullKey, groupFilters);
|
|
67
|
+
result = {
|
|
68
|
+
...result,
|
|
69
|
+
...groupInitialValues,
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
return result;
|
|
58
74
|
};
|
|
59
75
|
//# sourceMappingURL=filters.utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filters.utils.js","sourceRoot":"","sources":["../../../src/ui/filters/filters.utils.
|
|
1
|
+
{"version":3,"file":"filters.utils.js","sourceRoot":"","sources":["../../../src/ui/filters/filters.utils.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React, { useCallback, useEffect, useState } from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
2
|
import isEqual from 'lodash/isEqual';
|
|
4
3
|
import merge from 'lodash/merge';
|
|
5
4
|
import { getInitialValues } from './filters.utils';
|
|
@@ -30,11 +29,4 @@ export const Filters = (props) => {
|
|
|
30
29
|
}, [onChange, setValues, values]);
|
|
31
30
|
return (React.createElement(BaseComponent, { ...restProps, filters: filters, values: values, toggleFilter: toggleFilter, toggleFilters: toggleFilters }));
|
|
32
31
|
};
|
|
33
|
-
Filters.defaultProps = {
|
|
34
|
-
onChange: null,
|
|
35
|
-
};
|
|
36
|
-
Filters.propTypes = {
|
|
37
|
-
filters: PropTypes.object.isRequired,
|
|
38
|
-
onChange: PropTypes.func,
|
|
39
|
-
};
|
|
40
32
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/filters/index.
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/filters/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,KAAK,MAAM,cAAc,CAAC;AAGjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,WAAW,CAAC;AAWrD,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAE,EAAE;IAC7C,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAClD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,gBAAgB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC,CAAC;IAGpE,SAAS,CACP,GAAG,EAAE;QACH,MAAM,YAAY,GAAG,gBAAgB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;QAEnD,IAAI,OAAO,CAAC,YAAY,EAAE,MAAM,CAAC,EAAE;YACjC,OAAO;SACR;QAED,SAAS,CAAC,YAAY,CAAC,CAAC;IAC1B,CAAC,EAED,CAAC,OAAO,EAAE,SAAS,CAAC,CACrB,CAAC;IAEF,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,GAAW,EAAE,KAAc,EAAE,EAAE;QAC9B,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QACvD,SAAS,CAAC,UAAU,CAAC,CAAC;QAEtB,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,UAAU,CAAC,CAAC;SACtB;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,CAC9B,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,UAAmC,EAAE,EAAE;QACtC,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC;QACjD,SAAS,CAAC,UAAU,CAAC,CAAC;QAEtB,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,UAAU,CAAC,CAAC;SACtB;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,CAC9B,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,OACR,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;AACJ,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bundle-stats/ui",
|
|
3
|
-
"version": "4.8.
|
|
3
|
+
"version": "4.8.4-beta.0",
|
|
4
4
|
"description": "UI components for BundleStats projects.",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-esm/index.js",
|
|
@@ -36,17 +36,17 @@
|
|
|
36
36
|
},
|
|
37
37
|
"homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@babel/preset-env": "7.23.
|
|
39
|
+
"@babel/preset-env": "7.23.6",
|
|
40
40
|
"@babel/preset-react": "7.23.3",
|
|
41
41
|
"@babel/preset-typescript": "7.23.3",
|
|
42
|
-
"@storybook/addon-essentials": "7.
|
|
42
|
+
"@storybook/addon-essentials": "7.6.6",
|
|
43
43
|
"@storybook/preset-scss": "^1.0.3",
|
|
44
|
-
"@storybook/react": "7.
|
|
45
|
-
"@storybook/react-webpack5": "7.
|
|
46
|
-
"@types/react": "18.2.
|
|
44
|
+
"@storybook/react": "7.6.6",
|
|
45
|
+
"@storybook/react-webpack5": "7.6.6",
|
|
46
|
+
"@types/react": "18.2.45",
|
|
47
47
|
"@types/react-router-dom": "5.3.3",
|
|
48
48
|
"babel-plugin-require-context-hook": "1.0.0",
|
|
49
|
-
"classnames": "2.3.
|
|
49
|
+
"classnames": "2.3.3",
|
|
50
50
|
"colormap": "2.3.2",
|
|
51
51
|
"cross-env": "7.0.3",
|
|
52
52
|
"hex-rgb": "5.0.0",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"react-dom": "18.2.0",
|
|
61
61
|
"react-router-dom": "5.3.4",
|
|
62
62
|
"rimraf": "5.0.5",
|
|
63
|
-
"storybook": "7.
|
|
63
|
+
"storybook": "7.6.6",
|
|
64
64
|
"typescript": "5.1.6",
|
|
65
65
|
"typescript-plugin-css-modules": "5.0.2"
|
|
66
66
|
},
|
|
@@ -73,10 +73,10 @@
|
|
|
73
73
|
"react-router-dom": "^5.0.0"
|
|
74
74
|
},
|
|
75
75
|
"dependencies": {
|
|
76
|
-
"@bundle-stats/utils": "
|
|
76
|
+
"@bundle-stats/utils": "4.8.4-beta.0",
|
|
77
77
|
"ariakit": "2.0.0-next.44",
|
|
78
78
|
"modern-css-reset": "1.4.0",
|
|
79
79
|
"use-query-params": "2.2.1"
|
|
80
80
|
},
|
|
81
|
-
"gitHead": "
|
|
81
|
+
"gitHead": "f9c3bef726c62d817ff6c7d27ce1987e9b5701c8"
|
|
82
82
|
}
|
|
@@ -36,19 +36,11 @@ const RUNS_LABELS = [RUN_TITLE_CURRENT, RUN_TITLE_BASELINE];
|
|
|
36
36
|
|
|
37
37
|
const getFileTypeFilters = (filters) =>
|
|
38
38
|
Object.entries(FILE_TYPE_LABELS)
|
|
39
|
-
.map(([
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}))
|
|
45
|
-
.reduce(
|
|
46
|
-
(agg, current) => ({
|
|
47
|
-
...agg,
|
|
48
|
-
...current,
|
|
49
|
-
}),
|
|
50
|
-
{},
|
|
51
|
-
);
|
|
39
|
+
.map(([key, label]) => ({
|
|
40
|
+
key,
|
|
41
|
+
label,
|
|
42
|
+
defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true),
|
|
43
|
+
}));
|
|
52
44
|
|
|
53
45
|
const getFilters = ({ compareMode, filters }) => ({
|
|
54
46
|
[ASSET_FILTERS.CHANGED]: {
|
|
@@ -58,26 +50,32 @@ const getFilters = ({ compareMode, filters }) => ({
|
|
|
58
50
|
},
|
|
59
51
|
[ASSET_ENTRY_TYPE]: {
|
|
60
52
|
label: 'Entry type',
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
53
|
+
children: [
|
|
54
|
+
{
|
|
55
|
+
key: ASSET_FILTERS.ENTRY,
|
|
56
|
+
label: 'Entry',
|
|
57
|
+
defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`, true),
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
key: ASSET_FILTERS.INITIAL,
|
|
61
|
+
label: 'Initial',
|
|
62
|
+
defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`, true),
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
key: ASSET_FILTERS.CHUNK,
|
|
66
|
+
label: 'Chunk',
|
|
67
|
+
defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`, true),
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
key: ASSET_FILTERS.OTHER,
|
|
71
|
+
label: 'Other',
|
|
72
|
+
defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.OTHER}`, true),
|
|
73
|
+
},
|
|
74
|
+
],
|
|
77
75
|
},
|
|
78
76
|
[ASSET_FILE_TYPE]: {
|
|
79
77
|
label: 'File type',
|
|
80
|
-
|
|
78
|
+
children: getFileTypeFilters(filters),
|
|
81
79
|
},
|
|
82
80
|
});
|
|
83
81
|
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export const SEARCH = 'Search by module name';
|
|
2
|
+
export const CHANGED = 'Changed';
|
|
3
|
+
export const DUPLICATE = 'Duplicate';
|
|
4
|
+
export const CHUNK = 'Chunk';
|
|
5
|
+
export const FILE_TYPE = 'File type';
|
|
6
|
+
export const SOURCE = 'Source';
|
|
7
|
+
export const SOURCE_FIRST_PARTY = 'First party';
|
|
8
|
+
export const SOURCE_THIRD_PARTY = 'Third party';
|