@bundle-stats/ui 4.4.0-beta.0 → 4.4.0-beta.3

package/lib/components/module-info/module-info.js

@@ -1,70 +1,70 @@
 "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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.ModuleInfo = void 0;
-const react_1 = __importDefault(require("react"));
-const prop_types_1 = __importDefault(require("prop-types"));
+const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
 const noop_1 = __importDefault(require("lodash/noop"));
 const utils_1 = require("@bundle-stats/utils");
 const stack_1 = require("../../layout/stack");
-const flex_stack_1 = require("../../layout/flex-stack");
-const file_name_1 = require("../../ui/file-name");
 const tag_1 = require("../../ui/tag");
 const component_link_1 = require("../component-link");
+const entry_info_1 = require("../entry-info");
 const module_info_module_css_1 = __importDefault(require("./module-info.module.css"));
 const ModuleInfo = (props) => {
-    const { className, item, labels, chunks, chunkIds, customComponentLink: CustomComponentLink, onClick, } = props;
-    return (react_1.default.createElement(stack_1.Stack, { space: "small", className: (0, classnames_1.default)(module_info_module_css_1.default.root, className) }, item.runs.map((run, index) => (react_1.default.createElement(stack_1.Stack, { space: "xsmall", key: `module-info-${run?.name || index}-${index}`, className: module_info_module_css_1.default.run },
+    const { className = '', item, labels, chunks = [], chunkIds = [], customComponentLink: CustomComponentLink = component_link_1.ComponentLink, onClick = noop_1.default, onClose, } = props;
+    const rootClassName = (0, classnames_1.default)(module_info_module_css_1.default.root, className);
+    const currentRun = item.runs?.[0];
+    const tags = (0, react_1.useMemo)(() => {
+        if (!item.duplicated) {
+            return null;
+        }
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement(tag_1.Tag, { as: CustomComponentLink, ...utils_1.BUNDLE_MODULES_DUPLICATE, kind: "danger" }, "Duplicate")));
+    }, [item]);
+    const fileTypeLabel = utils_1.FILE_TYPE_LABELS[item.fileType];
+    const sourceTypeLabel = item.thirdParty
+        ? utils_1.MODULE_SOURCE_TYPE_LABELS.THIRD_PARTY
+        : utils_1.MODULE_SOURCE_TYPE_LABELS.FIRST_PARTY;
+    return (react_1.default.createElement(entry_info_1.EntryInfo, { item: item, labels: labels, tags: tags, onClose: onClose, className: rootClassName },
         react_1.default.createElement(stack_1.Stack, { space: "xxxsmall" },
-            react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", as: "h4", className: module_info_module_css_1.default.title },
-                react_1.default.createElement("span", null, labels[index]),
-                react_1.default.createElement(tag_1.Tag, { className: module_info_module_css_1.default.titleTag }, index === 0 ? 'current' : 'baseline')),
-            react_1.default.createElement(file_name_1.FileName, { className: module_info_module_css_1.default.fileName, as: "code", name: run?.name || '-' })),
-        index === 0 && !(0, isEmpty_1.default)(run?.chunkIds) && (react_1.default.createElement(stack_1.Stack, { className: module_info_module_css_1.default.chunks },
-            react_1.default.createElement("h5", null, "Chunks"),
-            react_1.default.createElement("ul", { className: module_info_module_css_1.default.list }, run.chunkIds.map((chunkId) => {
+            !(0, isEmpty_1.default)(currentRun?.chunkIds) && (react_1.default.createElement(entry_info_1.EntryInfo.Meta, { label: "Chunks", className: module_info_module_css_1.default.chunks }, currentRun.chunkIds.map((chunkId) => {
                 const chunk = chunks?.find(({ id }) => id === chunkId);
                 if (!chunk) {
                     return null;
                 }
-                return (react_1.default.createElement("li", null,
-                    react_1.default.createElement(CustomComponentLink, { ...(0, utils_1.getBundleModulesByChunk)(chunkIds, chunkId), onClick: onClick, className: module_info_module_css_1.default.chunksItem }, chunk.name)));
-            })))),
-        run?.reasons && (react_1.default.createElement(stack_1.Stack, null,
-            react_1.default.createElement("h5", null, "Reasons"),
-            react_1.default.createElement("ul", { className: module_info_module_css_1.default.list }, run.reasons.map((reason) => (react_1.default.createElement("li", { key: reason },
-                react_1.default.createElement(CustomComponentLink, { ...(0, utils_1.getBundleModulesBySearch)(`^${reason}$`), onClick: onClick, className: module_info_module_css_1.default.reasonLink },
-                    react_1.default.createElement(file_name_1.FileName, { name: reason, className: module_info_module_css_1.default.reason })))))))))))));
+                return (react_1.default.createElement(CustomComponentLink, { ...(0, utils_1.getBundleModulesByChunk)(chunkIds, chunkId), className: module_info_module_css_1.default.chunksItem }, chunk.name));
+            }))),
+            item?.fileType && (react_1.default.createElement(entry_info_1.EntryInfo.Meta, { label: "File type" },
+                react_1.default.createElement(CustomComponentLink, { ...(0, utils_1.getBundleModulesByFileTpe)(item.fileType, fileTypeLabel) }, fileTypeLabel))),
+            react_1.default.createElement(entry_info_1.EntryInfo.Meta, { label: "Source" },
+                react_1.default.createElement(CustomComponentLink, { ...(0, utils_1.getBundleModulesBySource)(item.thirdParty || false, sourceTypeLabel), onClick: onClick }, sourceTypeLabel)))));
 };
 exports.ModuleInfo = ModuleInfo;
-exports.ModuleInfo.propTypes = {
-    className: prop_types_1.default.string,
-    item: prop_types_1.default.shape({
-        key: prop_types_1.default.string,
-        runs: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-            key: prop_types_1.default.string,
-            name: prop_types_1.default.string,
-            chunkIds: prop_types_1.default.arrayOf(prop_types_1.default.string),
-        })),
-    }).isRequired,
-    labels: prop_types_1.default.arrayOf(prop_types_1.default.string).isRequired,
-    chunks: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-        id: prop_types_1.default.string,
-        name: prop_types_1.default.string,
-    })),
-    chunkIds: prop_types_1.default.arrayOf(prop_types_1.default.string),
-    customComponentLink: prop_types_1.default.elementType,
-    onClick: prop_types_1.default.func,
-};
-exports.ModuleInfo.defaultProps = {
-    className: '',
-    chunks: [],
-    chunkIds: [],
-    customComponentLink: component_link_1.ComponentLink,
-    onClick: noop_1.default,
-};
 //# sourceMappingURL=module-info.js.map

package/lib/components/module-info/module-info.js.map

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

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

@@ -1,40 +1,15 @@
-.titleTag {
-  border: 1px solid var(--color-outline);
-  background: var(--color-highlight);
-  color: var(--color-text-light);
-}
-
-.run:first-child .title {
-  font-size: var(--size-xlarge);
+.chunksItems {
+  display: inline;
 }
 
 .chunksItem {
   overflow-wrap: break-word;
+  text-decoration: none;
+  text-transform: none;
+  font-weight: normal;
+  font-size: 1em;
 }
 
-.fileName {
-  max-width: 100%;
-  padding: 2px;
-  background: var(--color-highlight-warning);
-}
-
-.reasonLink {
-  text-decoration: underline;
-}
-
-.reasonLink .reason {
-  text-decoration: inherit;
-}
-
-.reason {
-  display: inline;
-}
-
-.list {
-  padding: 0 0 0 var(--space-small);
-  list-style: outside;
-}
-
-.list li::marker {
-  color: var(--color-text-ultra-light);
+.chunksItem + .chunksItem {
+  margin-left: var(--space-xxxsmall);
 }

package/lib/components/package-info/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("./package-info"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/package-info/index.js.map

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

package/lib/components/package-info/package-info.js

@@ -0,0 +1,77 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.PackageInfo = void 0;
+const react_1 = __importStar(require("react"));
+const utils_1 = require("@bundle-stats/utils");
+const flex_stack_1 = require("../../layout/flex-stack");
+const stack_1 = require("../../layout/stack");
+const component_link_1 = require("../component-link");
+const file_name_1 = require("../../ui/file-name");
+const tag_1 = require("../../ui/tag");
+const entry_info_1 = require("../entry-info");
+const package_info_module_css_1 = __importDefault(require("./package-info.module.css"));
+const ui_1 = require("../../ui");
+const PackageInfo = (props) => {
+    const { className = '', item, labels, customComponentLink: CustomComponentLink = component_link_1.ComponentLink, onClose, } = props;
+    const packages = item.label.split(utils_1.PACKAGES_SEPARATOR);
+    const name = packages[packages.length - 1];
+    const fallbackPackagePath = `node_modules/${item.label
+        .split(utils_1.PACKAGES_SEPARATOR)
+        .join('/node_modules/')}`;
+    const normalizedPackagePath = `${item.runs?.[0]?.path || fallbackPackagePath}/`;
+    const [normalizedName, packageId] = name.split(utils_1.PACKAGE_ID_SEPARATOR);
+    const packageTitle = (0, react_1.useMemo)(() => (react_1.default.createElement("span", { className: package_info_module_css_1.default.packageTitle },
+        react_1.default.createElement("span", { className: package_info_module_css_1.default.packageTitleText }, normalizedName),
+        packageId && (react_1.default.createElement("span", { className: package_info_module_css_1.default.packageTitleId },
+            utils_1.PACKAGE_ID_SEPARATOR,
+            packageId)))), [normalizedName, packageId]);
+    const tags = (0, react_1.useMemo)(() => {
+        if (!item.duplicate) {
+            return null;
+        }
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement(tag_1.Tag, { as: CustomComponentLink, ...utils_1.BUNDLE_PACKAGES_DUPLICATE, kind: "danger" }, "Duplicate")));
+    }, [item]);
+    return (react_1.default.createElement(entry_info_1.EntryInfo, { itemTitle: packageTitle, item: item, labels: labels, tags: tags, runNameSelector: "path", onClose: onClose, className: className },
+        react_1.default.createElement(entry_info_1.EntryInfo.Meta, { label: "Path" },
+            react_1.default.createElement(file_name_1.FileName, { name: normalizedPackagePath, className: package_info_module_css_1.default.fileName })),
+        react_1.default.createElement(stack_1.Stack, { space: "xxxsmall" },
+            item.duplicate && (react_1.default.createElement("div", null,
+                react_1.default.createElement(CustomComponentLink, { ...(0, utils_1.getBundlePackagesByNameComponentLink)(normalizedName) }, "View all duplicate instances"))),
+            react_1.default.createElement(CustomComponentLink, { ...(0, utils_1.getBundleModulesBySearch)(normalizedPackagePath) }, "Search modules by package path")),
+        react_1.default.createElement(flex_stack_1.FlexStack, { space: "xsmall", alignItems: "center", className: package_info_module_css_1.default.external },
+            react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", as: "a", href: `https://www.npmjs.com/package/${normalizedName}`, target: "_blank", rel: "noreferrer", className: package_info_module_css_1.default.externalLink },
+                react_1.default.createElement("span", null, "npmjs.com"),
+                react_1.default.createElement(ui_1.Icon, { glyph: ui_1.Icon.ICONS.EXTERNAL_LINK, size: "small" })),
+            react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", as: "a", href: `https://bundlephobia.com/result?p=${normalizedName}`, target: "_blank", rel: "noreferrer", className: package_info_module_css_1.default.externalLink },
+                react_1.default.createElement("span", null, "bundlephobia.com"),
+                react_1.default.createElement(ui_1.Icon, { glyph: ui_1.Icon.ICONS.EXTERNAL_LINK, size: "small" })))));
+};
+exports.PackageInfo = PackageInfo;
+//# sourceMappingURL=package-info.js.map

package/lib/components/package-info/package-info.js.map

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

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

@@ -0,0 +1,13 @@
+.fileName {
+  padding: 0 2px;
+  background: var(--color-highlight-warning);
+}
+
+.external {
+  padding: 0;
+  list-style: inside disc;
+}
+
+.packageTitleId {
+  color: var(--color-text-ultra-light);
+}

package/lib/components/run-info/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("./run-info"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/run-info/index.js.map

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

package/lib/components/run-info/run-info.js

@@ -0,0 +1,70 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.RunInfo = void 0;
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const icon_1 = require("../../ui/icon");
+const hover_card_1 = require("../../ui/hover-card");
+const tooltip_1 = require("../../ui/tooltip");
+const skeleton_1 = require("../../ui/skeleton");
+const flex_stack_1 = require("../../layout/flex-stack");
+const stack_1 = require("../../layout/stack");
+const metric_1 = require("../metric");
+const delta_1 = require("../delta");
+const run_info_module_css_1 = __importDefault(require("./run-info.module.css"));
+const EXTRACT_VALUE_UNIT_PATTERN = /([\d|.|,| ]*)(\w*|%)$/;
+const getMetricParams = (value) => {
+    const matches = value.match(EXTRACT_VALUE_UNIT_PATTERN);
+    if (!matches) {
+        return [value];
+    }
+    return [matches[1], matches[2]];
+};
+const RunInfo = ({ className = '', title = '', titleHoverCard = null, titleTooltip = null, current = '', baseline = '', delta = '', deltaType = '', as: Component = 'div', size = 'medium', showBaseline = true, loading = false, enhance = false, ...restProps }) => {
+    const rootClassName = (0, classnames_1.default)(run_info_module_css_1.default.root, className, run_info_module_css_1.default[size], delta && run_info_module_css_1.default.showDelta);
+    const currentValueParams = (0, react_1.useMemo)(() => {
+        if (!enhance || typeof current !== 'string') {
+            return [current];
+        }
+        return getMetricParams(current);
+    }, [current, enhance]);
+    return (react_1.default.createElement(Component, { className: rootClassName, ...restProps },
+        title && (react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", as: "h3", className: run_info_module_css_1.default.title },
+            react_1.default.createElement("span", null, title),
+            titleHoverCard && (react_1.default.createElement(hover_card_1.HoverCard, { label: react_1.default.createElement(icon_1.Icon, { glyph: icon_1.Icon.ICONS.HELP }), className: (0, classnames_1.default)(run_info_module_css_1.default.titleIcon, run_info_module_css_1.default.titleHoverCardIcon) }, titleHoverCard)),
+            titleTooltip && (react_1.default.createElement(tooltip_1.Tooltip, { title: titleTooltip, className: (0, classnames_1.default)(run_info_module_css_1.default.titleIcon, run_info_module_css_1.default.titleTooltipIcon) },
+                react_1.default.createElement(icon_1.Icon, { glyph: icon_1.Icon.ICONS.HELP }))))),
+        !loading ? (react_1.default.createElement(stack_1.Stack, { className: run_info_module_css_1.default.info },
+            react_1.default.createElement(metric_1.Metric, { className: run_info_module_css_1.default.currentMetric, value: currentValueParams[0], unit: currentValueParams[1], inline: true }, delta && react_1.default.createElement(delta_1.Delta, { className: run_info_module_css_1.default.delta, displayValue: delta, deltaType: deltaType })),
+            showBaseline && react_1.default.createElement(metric_1.Metric, { className: run_info_module_css_1.default.baselineMetric, value: baseline }))) : (react_1.default.createElement(stack_1.Stack, { className: run_info_module_css_1.default.info },
+            react_1.default.createElement(skeleton_1.Skeleton, { as: "p", className: (0, classnames_1.default)(run_info_module_css_1.default.currentMetric, run_info_module_css_1.default.loading) }),
+            showBaseline && react_1.default.createElement(skeleton_1.Skeleton, { as: "p", className: (0, classnames_1.default)(run_info_module_css_1.default.baselineMetric, run_info_module_css_1.default.loading) })))));
+};
+exports.RunInfo = RunInfo;
+//# sourceMappingURL=run-info.js.map

package/lib/components/run-info/run-info.js.map

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

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

@@ -0,0 +1,76 @@
+.title {
+  color: var(--color-text-ultra-light);
+  font-weight: bold;
+  font-size: var(--size-xsmall);
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.titleIcon {
+  flex: 0 0 var(--space-small);
+  margin-top: -4px !important;
+  margin-bottom: -4px !important;
+}
+
+.info {
+  margin-top: var(--space-xxsmall);
+}
+
+.currentMetric {
+  color: var(--color-heading);
+  font-size: var(--size-xxlarge);
+  line-height: var(--line-height-heading);
+  white-space: nowrap;
+  font-weight: bold;
+}
+
+.baselineMetric {
+  color: var(--color-text-light);
+  font-size: var(--size-small);
+  line-height: var(--line-height-heading);
+}
+
+/* Loading state */
+.loading.currentMetric {
+  width: 8em;
+}
+
+.loading.baselineMetric {
+  width: 5em;
+}
+
+/* Hover state */
+.titleHoverCardIcon span[aria-controls=""],
+.titleTooltipIcon[aria-controls=""] {
+  opacity: 0;
+  visibility: none;
+  transition: var(--ui-transition-out);
+}
+
+.root:hover .titleHoverCardIcon span,
+.root:hover .titleTooltipIcon {
+  opacity: 1;
+  visibility: visible;
+  transition: var(--ui-transition-in);
+}
+
+/* Size variation */
+.small .info {
+  margin-top: var(--space-xxxsmall);
+}
+
+.small .currentMetric {
+  font-size: var(--size-xlarge);
+}
+
+.large .info {
+  margin-top: var(--space-xxsmall);
+}
+
+.large .currentMetric {
+  font-size: var(--size-xxxlarge);
+}
+
+.large .baselineMetric {
+  font-size: var(--size-medium);
+}

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,22 @@ 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, 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 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 && componentLink?.showDelta, showBaseline: showBaseline, size: size, loading: loading })));
 };
+const Summary = ({ className = '', size = 'medium', keys = constants_1.METRICS_WEBPACK_GENERAL, 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.items }, keys.map((metricId) => (react_1.default.createElement(SummaryItem, { key: metricId, className: summary_module_css_1.default.item, metricId: metricId, data: data, customLink: summaryItemLink, size: size, loading: loading, showDelta: showSummaryItemDelta, showBaseline: showSummaryItemBaseline }))))));
+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,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;AAlCW,QAAA,OAAO,WAkClB;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,kDAA2C;AAC3C,4DAA4B;AAC5B,qDAA6B;AAC7B,+CAA6D;AAE7D,+CAA0D;AAC1D,0CAAuC;AAEvC,sDAAkD;AAClD,wDAAuE;AACvE,8EAAuC;AAYvC,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,IAAI,aAAa,EAAE,SAAS,EAChD,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,GAChB,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAiBK,MAAM,OAAO,GAAG,CAAC,EACtB,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,mCAAuB,EAC9B,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,KAAK,IACpB,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACtB,8BAAC,WAAW,IACV,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,4BAAG,CAAC,IAAI,EACnB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,eAAe,EAC3B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,oBAAoB,EAC/B,YAAY,EAAE,uBAAuB,GACrC,CACH,CAAC,CACE,CACJ,CACP,CAAC;AA3BW,QAAA,OAAO,WA2BlB"}

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

@@ -1,17 +1,37 @@
 .root {
+  --summary-gap: var(--space-small);
   width: 100%;
-  overflow: auto;
+}
+
+.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: 14em;
   text-decoration: none;
 }
 
-.item:hover,
-.item:active,
-.item:focus {
-  border-color: var(--color-outline-dark);
-  outline: none;
+.readMoreLink {
+  appearance: none;
+  background: none;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.readMoreLink:hover,
+.readMoreLink:active,
+.readMoreLink:focus {
+  color: var(--color-primary-dark);
+  text-decoration: none;
 }