@bundle-stats/ui 4.2.3-beta.0 → 4.2.3-beta.1

package/lib/components/run-info/run-info.module.css

@@ -0,0 +1,94 @@
+.title {
+  color: var(--color-text-ultra-light);
+  font-weight: bold;
+  font-size: var(--size-xsmall);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.titleText {
+  max-width: 100%;
+  flex: 0 1 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.titleIcon {
+  flex: 0 0 var(--space-small);
+  margin-top: -3px !important;
+  margin-bottom: -3px !important;
+}
+
+.title + .info {
+  margin-top: var(--space-xxsmall);
+}
+
+.currentMetric {
+  color: var(--color-heading);
+  white-space: nowrap;
+  font-weight: bold;
+  line-height: var(--line-height-number);
+  height: var(--line-height-number);
+}
+
+.delta {
+  font-weight: bold;
+}
+
+.deltaValue + .deltaValue::before {
+  margin-left: calc(var(--space-xxxsmall) / 2);
+  margin-right: calc(var(--space-xxxsmall) / 2);
+  content: '/';
+  color: var(--color-text-ultra-light);
+}
+
+.baselineMetric {
+  color: var(--color-text-ultra-light);
+  font-size: var(--size-small);
+  line-height: var(--line-height-number);
+  height: var(--line-height-number);
+}
+
+/* Loading state */
+.loading.currentMetric {
+  min-width: 0;
+  max-width: 8em;
+}
+
+.loading.baselineMetric {
+  min-width: 0;
+  max-width: 8em;
+}
+
+/* Hover state */
+.titleHoverCardIcon span[aria-controls=""],
+.titleTooltipIcon[aria-controls=""] {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--transition-duration-out) ease-out, color var(--transition-duration-out) ease-out, visibility 0s;
+}
+
+.root:hover .titleHoverCardIcon span,
+.root:hover .titleTooltipIcon {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity var(--transition-duration-in) ease-in, color var(--transition-duration-in) ease-in, visibility 0s;
+}
+
+/* Size variation */
+.currentMetric {
+  font-size: var(--size-xxlarge);
+}
+
+.small .currentMetric {
+  font-size: var(--size-medium);
+}
+
+.large .currentMetric {
+  font-size: var(--size-xxxlarge);
+}
+
+.xlarge .currentMetric {
+  font-size: var(--size-xxxxlarge);
+}

package/lib/components/sort-button/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./sort-button"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/sort-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/sort-button/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAA8B"}

package/lib/components/sort-button/sort-button.js

@@ -0,0 +1,93 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SortButton = void 0;
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const constants_1 = require("../../constants");
+const button_1 = require("../../ui/button");
+const icon_1 = require("../../ui/icon");
+const tooltip_1 = require("../../ui/tooltip");
+const sort_button_module_css_1 = __importDefault(require("./sort-button.module.css"));
+const getToggleAction = (field, label, sort) => {
+    if (sort?.field !== field) {
+        return { direction: constants_1.SORT.DESC, title: `Order ${label} descending` };
+    }
+    if (sort?.direction === constants_1.SORT.DESC) {
+        return { direction: constants_1.SORT.ASC, title: `Order ${label} ascending` };
+    }
+    return { direction: '', title: 'Reset order' };
+};
+const getAscAction = (label) => {
+    return { direction: constants_1.SORT.ASC, title: `Order ${label} ascending` };
+};
+const getDescAction = (label) => {
+    return { direction: constants_1.SORT.DESC, title: `Order ${label} descending` };
+};
+const SortButton = (props) => {
+    const { className = '', children, fieldPath, fieldName, label, sort, updateSort } = props;
+    const field = `${fieldPath}.${fieldName}`;
+    const toggleAction = getToggleAction(field, label, sort);
+    const ascAction = getAscAction(label);
+    const descAction = getDescAction(label);
+    const isSorted = sort?.field === field;
+    const getOrderOnClick = (0, react_1.useCallback)((action) => () => {
+        if (!updateSort) {
+            return;
+        }
+        if (action.direction) {
+            updateSort({ field, direction: action.direction });
+            return;
+        }
+        updateSort({ field: '', direction: '' });
+    }, [field, updateSort, toggleAction]);
+    if (!updateSort) {
+        return react_1.default.createElement("div", { className: (0, classnames_1.default)(sort_button_module_css_1.default.root, className) }, children);
+    }
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(sort_button_module_css_1.default.root, sort_button_module_css_1.default.interactive, className, isSorted && sort_button_module_css_1.default.active) },
+        react_1.default.createElement(button_1.Button, { type: "button", onClick: getOrderOnClick(toggleAction), className: sort_button_module_css_1.default.toggle },
+            react_1.default.createElement(tooltip_1.Tooltip, { title: toggleAction.title }, children)),
+        react_1.default.createElement(button_1.Button, { type: "button", onClick: getOrderOnClick(ascAction), className: (0, classnames_1.default)(sort_button_module_css_1.default.direction, sort_button_module_css_1.default.directionAsc, isSorted && sort.direction === constants_1.SORT.ASC && sort_button_module_css_1.default.directionActive) },
+            react_1.default.createElement(tooltip_1.Tooltip, { title: ascAction.title },
+                react_1.default.createElement(icon_1.Icon, { glyph: icon_1.Icon.ICONS.CHEVRON_UP, size: "small", className: sort_button_module_css_1.default.directionIcon }))),
+        react_1.default.createElement(button_1.Button, { type: "button", onClick: getOrderOnClick(descAction), className: (0, classnames_1.default)(sort_button_module_css_1.default.direction, sort_button_module_css_1.default.directionDesc, isSorted && sort.direction === constants_1.SORT.DESC && sort_button_module_css_1.default.directionActive) },
+            react_1.default.createElement(tooltip_1.Tooltip, { title: descAction.title },
+                react_1.default.createElement(icon_1.Icon, { glyph: icon_1.Icon.ICONS.CHEVRON_DOWN, size: "small", className: sort_button_module_css_1.default.directionIcon })))));
+};
+exports.SortButton = SortButton;
+//# sourceMappingURL=sort-button.js.map

package/lib/components/sort-button/sort-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-button.js","sourceRoot":"","sources":["../../../src/components/sort-button/sort-button.tsx"],"names":[],"mappings":"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"}

package/lib/components/sort-button/sort-button.module.css

@@ -0,0 +1,83 @@
+.root {
+  --icon-dimension: 13px;
+  display: inline-block;
+  border-radius: var(--radius-small);
+  position: relative;
+  color: var(--color-text-ultra-light);
+}
+
+.toggle {
+  padding: 1px var(--space-xxxsmall);
+  padding-right: calc(1px + var(--icon-dimension));
+}
+
+.direction {
+  position: absolute;
+  padding: 1px;
+  display: block;
+  overflow: hidden;
+  right: -2px; /* compensate for the button padding */
+  color: var(--color-text-ultra-light);
+  transition: var(--transition-out);
+}
+
+.directionIcon {
+  display: block;
+  width: var(--icon-dimension);
+  height: var(--icon-dimension);
+}
+
+.directionActive {
+  color: var(--color-text);
+  transition: var(--transition-in);
+}
+
+.direction:hover,
+.direction:active,
+.direction:focus {
+  color: var(--color-text-dark);
+  transition: var(--transition-in);
+}
+
+.directionAsc {
+  padding-bottom: 0;
+  bottom: 50%;
+}
+
+.directionAsc .directionIcon {
+  transform: translateY(3px);
+}
+
+.directionDesc {
+  padding-top: 0;
+  top: 50%;
+}
+
+.directionDesc .directionIcon {
+  transform: translateY(-5px);
+}
+
+.interactive {
+  margin: calc(0px - var(--space-xxxsmall));
+  margin-right: calc(0px - 1px - var(--icon-dimension));
+}
+
+.interactive:hover,
+.interactive:active,
+.interactive:focus {
+  background: var(--color-outline);
+}
+
+.direction {
+  pointer-events: none;
+  opacity: 0;
+}
+
+.active .direction,
+.interactive:hover .direction,
+.interactive:hover:active .direction,
+.interactive:hover:focus .direction {
+  pointer-events: auto;
+  opacity: 1;
+  transition: var(--transition-in);
+}

package/lib/components/summary/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/summary/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,4CAA0B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/summary/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,4CAA0B"}

package/lib/components/summary/summary.js

@@ -5,43 +5,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Summary = void 0;
 const react_1 = __importDefault(require("react"));
-const prop_types_1 = __importDefault(require("prop-types"));
 const classnames_1 = __importDefault(require("classnames"));
 const get_1 = __importDefault(require("lodash/get"));
 const utils_1 = require("@bundle-stats/utils");
 const constants_1 = require("../../constants");
 const box_1 = require("../../layout/box");
-const flex_stack_1 = require("../../layout/flex-stack");
 const component_link_1 = require("../component-link");
-const summary_item_1 = require("../summary-item");
+const metric_run_info_1 = require("../metric-run-info");
 const summary_module_css_1 = __importDefault(require("./summary.module.css"));
-const Summary = ({ className, size, keys, data, loading, showSummaryItemDelta, summaryItemLink: SummaryItemCustomLink, }) => (react_1.default.createElement(box_1.Box, { className: (0, classnames_1.default)(summary_module_css_1.default.root, className) },
-    react_1.default.createElement(flex_stack_1.FlexStack, { space: "small", className: summary_module_css_1.default.items }, Array.from(utils_1.METRIC_COMPONENT_LINKS)
-        .filter(([metricId]) => keys.includes(metricId))
-        .map(([metricId, metricOptions]) => (react_1.default.createElement(box_1.Box, { key: metricId, outline: true, outlineHover: true, padding: "small", as: SummaryItemCustomLink, ...metricOptions.link, className: summary_module_css_1.default.item },
-        react_1.default.createElement(summary_item_1.SummaryItem, { size: size, id: metricId, data: (0, get_1.default)(data, metricId), loading: loading, showMetricDescription: true, showDelta: showSummaryItemDelta && metricOptions.showDelta !== false })))))));
-exports.Summary = Summary;
-exports.Summary.defaultProps = {
-    className: '',
-    data: null,
-    loading: false,
-    size: '',
-    keys: constants_1.METRICS_WEBPACK_GENERAL,
-    showSummaryItemDelta: true,
-    summaryItemLink: component_link_1.ComponentLink,
-};
-exports.Summary.propTypes = {
-    className: prop_types_1.default.string,
-    size: prop_types_1.default.string,
-    keys: prop_types_1.default.arrayOf(prop_types_1.default.string),
-    data: prop_types_1.default.shape({
-        [prop_types_1.default.string]: prop_types_1.default.shape({
-            baseline: prop_types_1.default.number,
-            current: prop_types_1.default.number,
-        }),
-    }),
-    loading: prop_types_1.default.bool,
-    showSummaryItemDelta: prop_types_1.default.bool,
-    summaryItemLink: prop_types_1.default.elementType,
+const METRICS_WEBPACK_OTHERS = [
+    ...constants_1.METRICS_WEBPACK_ASSETS,
+    ...constants_1.METRICS_WEBPACK_MODULES,
+    ...constants_1.METRICS_WEBPACK_PACKAGES,
+];
+const SummaryItem = (props) => {
+    const { className = '', metricId, data, customLink: SummaryItemCustomLink, size, loading, showDelta, showBaseline, } = props;
+    const componentLink = utils_1.METRIC_COMPONENT_LINKS.get(metricId);
+    const metricData = (0, get_1.default)(data, metricId, { current: 0, baseline: 0 });
+    return (react_1.default.createElement(box_1.Box, { key: metricId, outline: true, outlineHover: true, padding: "small", as: SummaryItemCustomLink, ...componentLink?.link, className: className },
+        react_1.default.createElement(metric_run_info_1.MetricRunInfo, { metricId: metricId, current: metricData.current, baseline: metricData.baseline, showDelta: showDelta, showBaseline: showBaseline, size: size, loading: loading })));
 };
+const Summary = ({ className = '', data = null, loading = false, showSummaryItemDelta = true, showSummaryItemBaseline = true, summaryItemLink = component_link_1.ComponentLink, }) => (react_1.default.createElement(box_1.Box, { className: (0, classnames_1.default)(summary_module_css_1.default.root, className) },
+    react_1.default.createElement("div", { className: summary_module_css_1.default.wrapper },
+        react_1.default.createElement("div", { className: summary_module_css_1.default.items }, constants_1.METRICS_WEBPACK_GENERAL.map((metricId) => (react_1.default.createElement(SummaryItem, { key: metricId, className: summary_module_css_1.default.item, metricId: metricId, data: data, size: "large", loading: loading, customLink: summaryItemLink, showDelta: showSummaryItemDelta, showBaseline: showSummaryItemBaseline }))))),
+    react_1.default.createElement("div", { className: summary_module_css_1.default.wrapper },
+        react_1.default.createElement("div", { className: summary_module_css_1.default.items }, METRICS_WEBPACK_OTHERS.map((metricId) => (react_1.default.createElement(SummaryItem, { key: metricId, className: (0, classnames_1.default)(summary_module_css_1.default.item, summary_module_css_1.default.itemSmall), metricId: metricId, data: data, customLink: summaryItemLink, loading: loading, showDelta: showSummaryItemDelta, showBaseline: false })))))));
+exports.Summary = Summary;
 //# sourceMappingURL=summary.js.map

package/lib/components/summary/summary.js.map

@@ -1 +1 @@
-{"version":3,"file":"summary.js","sourceRoot":"","sources":["../../../src/components/summary/summary.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAmC;AACnC,4DAA4B;AAC5B,qDAA6B;AAC7B,+CAA6D;AAE7D,+CAA0D;AAC1D,0CAAuC;AACvC,wDAAoD;AACpD,sDAAkD;AAClD,kDAA8C;AAC9C,8EAAuC;AAEhC,MAAM,OAAO,GAAG,CAAC,EACtB,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,oBAAoB,EACpB,eAAe,EAAE,qBAAqB,GACvC,EAAE,EAAE,CAAC,CACJ,8BAAC,SAAG,IAAC,SAAS,EAAE,IAAA,oBAAE,EAAC,4BAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IACrC,8BAAC,sBAAS,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAE,4BAAG,CAAC,KAAK,IAC1C,KAAK,CAAC,IAAI,CAAC,8BAAsB,CAAC;SAChC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;SAC/C,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,aAAa,CAAC,EAAE,EAAE,CAAC,CAClC,8BAAC,SAAG,IACF,GAAG,EAAE,QAAQ,EACb,OAAO,QACP,YAAY,QACZ,OAAO,EAAC,OAAO,EACf,EAAE,EAAE,qBAAqB,KACrB,aAAa,CAAC,IAAI,EACtB,SAAS,EAAE,4BAAG,CAAC,IAAI;QAEnB,8BAAC,0BAAW,IACV,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,QAAQ,EACZ,IAAI,EAAE,IAAA,aAAG,EAAC,IAAI,EAAE,QAAQ,CAAC,EACzB,OAAO,EAAE,OAAO,EAChB,qBAAqB,QACrB,SAAS,EAAE,oBAAoB,IAAI,aAAa,CAAC,SAAS,KAAK,KAAK,GACpE,CACE,CACP,CAAC,CACM,CACR,CACP,CAAC;AAnCW,QAAA,OAAO,WAmClB;AAEF,eAAO,CAAC,YAAY,GAAG;IACrB,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,IAAI;IACV,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,mCAAuB;IAC7B,oBAAoB,EAAE,IAAI;IAC1B,eAAe,EAAE,8BAAa;CAC/B,CAAC;AAEF,eAAO,CAAC,SAAS,GAAG;IAClB,SAAS,EAAE,oBAAS,CAAC,MAAM;IAC3B,IAAI,EAAE,oBAAS,CAAC,MAAM;IACtB,IAAI,EAAE,oBAAS,CAAC,OAAO,CAAC,oBAAS,CAAC,MAAM,CAAC;IACzC,IAAI,EAAE,oBAAS,CAAC,KAAK,CAAC;QACpB,CAAC,oBAAS,CAAC,MAAM,CAAC,EAAE,oBAAS,CAAC,KAAK,CAAC;YAClC,QAAQ,EAAE,oBAAS,CAAC,MAAM;YAC1B,OAAO,EAAE,oBAAS,CAAC,MAAM;SAC1B,CAAC;KACH,CAAC;IACF,OAAO,EAAE,oBAAS,CAAC,IAAI;IACvB,oBAAoB,EAAE,oBAAS,CAAC,IAAI;IACpC,eAAe,EAAE,oBAAS,CAAC,WAAW;CACvC,CAAC"}
+{"version":3,"file":"summary.js","sourceRoot":"","sources":["../../../src/components/summary/summary.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,qDAA6B;AAC7B,+CAA6D;AAE7D,+CAKyB;AACzB,0CAAuC;AACvC,sDAAkD;AAClD,wDAAuE;AACvE,8EAAuC;AAEvC,MAAM,sBAAsB,GAAG;IAC7B,GAAG,kCAAsB;IACzB,GAAG,mCAAuB;IAC1B,GAAG,oCAAwB;CAC5B,CAAC;AAYF,MAAM,WAAW,GAAG,CAAC,KAAqD,EAAE,EAAE;IAC5E,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,IAAI,EACJ,UAAU,EAAE,qBAAqB,EACjC,IAAI,EACJ,OAAO,EACP,SAAS,EACT,YAAY,GACb,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,8BAAsB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC3D,MAAM,UAAU,GAAG,IAAA,aAAG,EAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;IAEpE,OAAO,CACL,8BAAC,SAAG,IACF,GAAG,EAAE,QAAQ,EACb,OAAO,QACP,YAAY,QACZ,OAAO,EAAC,OAAO,EACf,EAAE,EAAE,qBAAqB,KACrB,aAAa,EAAE,IAAI,EACvB,SAAS,EAAE,SAAS;QAEpB,8BAAC,+BAAa,IACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,UAAU,CAAC,OAAO,EAC3B,QAAQ,EAAE,UAAU,CAAC,QAAQ,EAC7B,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,GAChB,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAeK,MAAM,OAAO,GAAG,CAAC,EACtB,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,KAAK,EACf,oBAAoB,GAAG,IAAI,EAC3B,uBAAuB,GAAG,IAAI,EAC9B,eAAe,GAAG,8BAAa,GACY,EAAE,EAAE,CAAC,CAChD,8BAAC,SAAG,IAAC,SAAS,EAAE,IAAA,oBAAE,EAAC,4BAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IACrC,uCAAK,SAAS,EAAE,4BAAG,CAAC,OAAO;QACzB,uCAAK,SAAS,EAAE,4BAAG,CAAC,KAAK,IACtB,mCAAuB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACzC,8BAAC,WAAW,IACV,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,4BAAG,CAAC,IAAI,EACnB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,eAAe,EAC3B,SAAS,EAAE,oBAAoB,EAC/B,YAAY,EAAE,uBAAuB,GACrC,CACH,CAAC,CACE,CACF;IACN,uCAAK,SAAS,EAAE,4BAAG,CAAC,OAAO;QACzB,uCAAK,SAAS,EAAE,4BAAG,CAAC,KAAK,IACtB,sBAAsB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACxC,8BAAC,WAAW,IACV,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAA,oBAAE,EAAC,4BAAG,CAAC,IAAI,EAAE,4BAAG,CAAC,SAAS,CAAC,EACtC,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,eAAe,EAC3B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,oBAAoB,EAC/B,YAAY,EAAE,KAAK,GACnB,CACH,CAAC,CACE,CACF,CACF,CACP,CAAC;AA3CW,QAAA,OAAO,WA2ClB"}

package/lib/components/summary/summary.module.css

@@ -1,9 +1,31 @@
 .root {
+  --summary-gap: var(--space-small);
   width: 100%;
 }
 
+.wrapper {
+  width: 100%;
+}
+
+.wrapper + .wrapper {
+  margin-top: var(--summary-gap);
+}
+
+.items {
+  display: flex;
+  flex-wrap: wrap;
+  width: calc(100% + var(--summary-gap));
+  margin-top: calc(0px - var(--summary-gap));
+  margin-left: calc(0px - var(--summary-gap));
+}
+
 .item {
+  margin: var(--summary-gap) 0 0 var(--summary-gap);
   flex: 1 0 10%; /* force equal sizes */
-  min-width: 16em;
+  min-width: 12em;
   text-decoration: none;
 }
+
+.itemSmall {
+  min-width: 8em;
+}

package/lib/config.json

@@ -1,7 +1,7 @@
 {
   "appName": "RelativeCI",
   "siteUrl": "https://relative-ci.com",
-  "githubUrl": "https://github.com/relative-ci/bundle-stats",
+  "gitHubUrl": "https://github.com/relative-ci/bundle-stats",
   "documentation" : {
     "assets": "https://relative-ci.com/documentation/metrics-and-data#assets",
     "modules": "https://relative-ci.com/documentation/metrics-and-data#modules",

package/lib/constants.js

@@ -1,29 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.METRICS_WEBPACK_PACKAGES = exports.METRICS_WEBPACK_MODULES = exports.METRICS_WEBPACK_ASSETS = exports.METRICS_WEBPACK_GENERAL = exports.ASSETS_SIZES_FILE_TYPE_MAP = exports.SECTION_URLS = exports.URLS = exports.SPACES = exports.SPACE_XXXLARGE = exports.SPACE_XXLARGE = exports.SPACE_XLARGE = exports.SPACE_LARGE = exports.SPACE_MEDIUM = exports.SPACE_SMALL = exports.SPACE_XSMALL = exports.SPACE_XXSMALL = exports.SPACE_XXXSMALL = exports.NO_SPACE = void 0;
+exports.ModuleSizeMetrics = exports.ModuleSizeMetric = exports.MetricsDisplayGroupByDefault = exports.MetricsDisplayGroupBy = exports.MetricsDisplayTypeDefault = exports.MetricsDisplayType = exports.SORT = exports.METRICS_WEBPACK_PACKAGES = exports.METRICS_WEBPACK_MODULES = exports.METRICS_WEBPACK_ASSETS = exports.METRICS_WEBPACK_GENERAL = exports.ASSETS_SIZES_FILE_TYPE_MAP = exports.SECTION_URLS = exports.URLS = void 0;
 const utils_1 = require("@bundle-stats/utils");
-exports.NO_SPACE = 'no-space';
-exports.SPACE_XXXSMALL = 'xxxsmall';
-exports.SPACE_XXSMALL = 'xxsmall';
-exports.SPACE_XSMALL = 'xsmall';
-exports.SPACE_SMALL = 'small';
-exports.SPACE_MEDIUM = 'medium';
-exports.SPACE_LARGE = 'large';
-exports.SPACE_XLARGE = 'xlarge';
-exports.SPACE_XXLARGE = 'xxlarge';
-exports.SPACE_XXXLARGE = 'xxxlarge';
-exports.SPACES = [
-    exports.NO_SPACE,
-    exports.SPACE_XXXSMALL,
-    exports.SPACE_XXSMALL,
-    exports.SPACE_XSMALL,
-    exports.SPACE_SMALL,
-    exports.SPACE_MEDIUM,
-    exports.SPACE_LARGE,
-    exports.SPACE_XLARGE,
-    exports.SPACE_XXLARGE,
-    exports.SPACE_XXXLARGE,
-];
 exports.URLS = {
     OVERVIEW: '/',
     ASSETS: '/assets',
@@ -53,4 +31,40 @@ exports.METRICS_WEBPACK_MODULES = [
     'webpack.duplicateCode',
 ];
 exports.METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];
+exports.SORT = {
+    ASC: 'asc',
+    DESC: 'desc',
+};
+var MetricsDisplayType;
+(function (MetricsDisplayType) {
+    MetricsDisplayType["TREEMAP"] = "treemap";
+    MetricsDisplayType["TABLE"] = "table";
+})(MetricsDisplayType || (exports.MetricsDisplayType = MetricsDisplayType = {}));
+exports.MetricsDisplayTypeDefault = MetricsDisplayType.TABLE;
+var MetricsDisplayGroupBy;
+(function (MetricsDisplayGroupBy) {
+    MetricsDisplayGroupBy["FOLDER"] = "folder";
+    MetricsDisplayGroupBy["NONE"] = "no-group";
+})(MetricsDisplayGroupBy || (exports.MetricsDisplayGroupBy = MetricsDisplayGroupBy = {}));
+exports.MetricsDisplayGroupByDefault = MetricsDisplayGroupBy.FOLDER;
+var ModuleSizeMetric;
+(function (ModuleSizeMetric) {
+    ModuleSizeMetric["SIZE"] = "value";
+    ModuleSizeMetric["DUPLICATE_SIZE"] = "duplicateSize";
+    ModuleSizeMetric["TOTAL_SIZE"] = "totalSize";
+})(ModuleSizeMetric || (exports.ModuleSizeMetric = ModuleSizeMetric = {}));
+exports.ModuleSizeMetrics = {
+    [ModuleSizeMetric.SIZE]: {
+        label: 'Size',
+        tooltip: 'Module size (excluding duplicate modules)',
+    },
+    [ModuleSizeMetric.TOTAL_SIZE]: {
+        label: 'Total size',
+        tooltip: 'Module total size (including duplicate modules)',
+    },
+    [ModuleSizeMetric.DUPLICATE_SIZE]: {
+        label: 'Duplicate size',
+        tooltip: 'Module duplicate size',
+    },
+};
 //# sourceMappingURL=constants.js.map

package/lib/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.js"],"names":[],"mappings":";;;AAAA,+CAA2D;AAE9C,QAAA,QAAQ,GAAG,UAAU,CAAC;AACtB,QAAA,cAAc,GAAG,UAAU,CAAC;AAC5B,QAAA,aAAa,GAAG,SAAS,CAAC;AAC1B,QAAA,YAAY,GAAG,QAAQ,CAAC;AACxB,QAAA,WAAW,GAAG,OAAO,CAAC;AACtB,QAAA,YAAY,GAAG,QAAQ,CAAC;AACxB,QAAA,WAAW,GAAG,OAAO,CAAC;AACtB,QAAA,YAAY,GAAG,QAAQ,CAAC;AACxB,QAAA,aAAa,GAAG,SAAS,CAAC;AAC1B,QAAA,cAAc,GAAG,UAAU,CAAC;AAE5B,QAAA,MAAM,GAAG;IACpB,gBAAQ;IACR,sBAAc;IACd,qBAAa;IACb,oBAAY;IACZ,mBAAW;IACX,oBAAY;IACZ,mBAAW;IACX,oBAAY;IACZ,qBAAa;IACb,sBAAc;CACf,CAAC;AAEW,QAAA,IAAI,GAAG;IAClB,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,WAAW;CACtB,CAAC;AAEW,QAAA,YAAY,GAAG;IAC1B,CAAC,gBAAQ,CAAC,MAAM,CAAC,EAAE,YAAI,CAAC,QAAQ;IAChC,CAAC,gBAAQ,CAAC,MAAM,CAAC,EAAE,YAAI,CAAC,MAAM;IAC9B,CAAC,gBAAQ,CAAC,OAAO,CAAC,EAAE,YAAI,CAAC,OAAO;IAChC,CAAC,gBAAQ,CAAC,QAAQ,CAAC,EAAE,YAAI,CAAC,QAAQ;CACnC,CAAC;AAEW,QAAA,0BAA0B,GAAG,kBAAU,CAAC,MAAM,CACzD,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC;IAClB,GAAG,GAAG;IACN,CAAC,gCAAgC,QAAQ,EAAE,CAAC,EAAE,QAAQ;CACvD,CAAC,EACF,EAAE,CACH,CAAC;AAEW,QAAA,uBAAuB,GAAG;IACrC,4BAA4B;IAC5B,4BAA4B;IAC5B,6BAA6B;IAC7B,2BAA2B;CAC5B,CAAC;AACW,QAAA,sBAAsB,GAAG,CAAC,oBAAoB,EAAE,oBAAoB,CAAC,CAAC;AACtE,QAAA,uBAAuB,GAAG;IACrC,qBAAqB;IACrB,+BAA+B;IAC/B,uBAAuB;CACxB,CAAC;AACW,QAAA,wBAAwB,GAAG,CAAC,sBAAsB,EAAE,gCAAgC,CAAC,CAAC"}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":";;;AAAA,+CAA2D;AAE9C,QAAA,IAAI,GAAG;IAClB,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,WAAW;CACtB,CAAC;AAEW,QAAA,YAAY,GAAG;IAC1B,CAAC,gBAAQ,CAAC,MAAM,CAAC,EAAE,YAAI,CAAC,QAAQ;IAChC,CAAC,gBAAQ,CAAC,MAAM,CAAC,EAAE,YAAI,CAAC,MAAM;IAC9B,CAAC,gBAAQ,CAAC,OAAO,CAAC,EAAE,YAAI,CAAC,OAAO;IAChC,CAAC,gBAAQ,CAAC,QAAQ,CAAC,EAAE,YAAI,CAAC,QAAQ;CACnC,CAAC;AAEW,QAAA,0BAA0B,GAAG,kBAAU,CAAC,MAAM,CACzD,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC;IAClB,GAAG,GAAG;IACN,CAAC,gCAAgC,QAAQ,EAAE,CAAC,EAAE,QAAQ;CACvD,CAAC,EACF,EAAE,CACH,CAAC;AAEW,QAAA,uBAAuB,GAAG;IACrC,4BAA4B;IAC5B,4BAA4B;IAC5B,6BAA6B;IAC7B,2BAA2B;CAC5B,CAAC;AACW,QAAA,sBAAsB,GAAG,CAAC,oBAAoB,EAAE,oBAAoB,CAAC,CAAC;AACtE,QAAA,uBAAuB,GAAG;IACrC,qBAAqB;IACrB,+BAA+B;IAC/B,uBAAuB;CACxB,CAAC;AACW,QAAA,wBAAwB,GAAG,CAAC,sBAAsB,EAAE,gCAAgC,CAAC,CAAC;AAEtF,QAAA,IAAI,GAAG;IAClB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;CACJ,CAAC;AAEX,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,yCAAmB,CAAA;IACnB,qCAAe,CAAA;AACjB,CAAC,EAHW,kBAAkB,kCAAlB,kBAAkB,QAG7B;AAEY,QAAA,yBAAyB,GAAG,kBAAkB,CAAC,KAAK,CAAC;AAElE,IAAY,qBAGX;AAHD,WAAY,qBAAqB;IAC/B,0CAAiB,CAAA;IACjB,0CAAiB,CAAA;AACnB,CAAC,EAHW,qBAAqB,qCAArB,qBAAqB,QAGhC;AAEY,QAAA,4BAA4B,GAAG,qBAAqB,CAAC,MAAM,CAAC;AAEzE,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IAC1B,kCAAc,CAAA;IACd,oDAAgC,CAAA;IAChC,4CAAwB,CAAA;AAC1B,CAAC,EAJW,gBAAgB,gCAAhB,gBAAgB,QAI3B;AAEY,QAAA,iBAAiB,GAAG;IAC/B,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE;QACvB,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,2CAA2C;KACrD;IACD,CAAC,gBAAgB,CAAC,UAAU,CAAC,EAAE;QAC7B,KAAK,EAAE,YAAY;QACnB,OAAO,EAAE,iDAAiD;KAC3D;IACD,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE;QACjC,KAAK,EAAE,gBAAgB;QACvB,OAAO,EAAE,uBAAuB;KACjC;CACF,CAAC"}

package/lib/css/default.css

@@ -53,7 +53,6 @@ code {
   font-family: var(--font-family-fixed);
 }
 
-/** Orbit updates */
 a {
   color: var(--color-primary);
 }
@@ -64,69 +63,3 @@ a:focus {
   color: var(--color-primary-dark);
   outline: none;
 }
-
-.ui-button--primary {
-  background: var(--color-primary);
-}
-
-.ui-button--primary:active,
-.ui-button--primary:focus,
-.ui-button--primary:hover {
-  background: var(--color-primary-dark);
-}
-
-.ui-button--secondary {
-  background: var(--color-secondary);
-}
-
-.ui-button--secondary:active,
-.ui-button--secondary:focus,
-.ui-button--secondary:hover {
-  background: var(--color-secondary-dark);
-}
-
-.ui-button--info {
-  background: var(--color-info);
-}
-
-.ui-button--info:active,
-.ui-button--info:focus,
-.ui-button--info:hover {
-  background: var(--color-info-dark);
-}
-
-.ui-button--success {
-  background: var(--color-success);
-}
-
-.ui-button--success:active,
-.ui-button--success:focus,
-.ui-button--success:hover {
-  background: var(--color-success-dark);
-}
-
-
-.ui-button--warning {
-  background: var(--color-warning);
-}
-
-.ui-button--warning:active,
-.ui-button--warning:focus,
-.ui-button--warning:hover {
-  background: var(--color-warning-dark);
-}
-
-.ui-button--danger {
-  background: var(--color-danger);
-}
-
-.ui-button--danger:active,
-.ui-button--danger:focus,
-.ui-button--danger:hover {
-  background: var(--color-danger-dark);
-}
-
-.__reakit-portal {
-  z-index: var(--layer-xhigh);
-  position: relative;
-}