@bundle-stats/ui 3.3.0-alpha.1 → 3.4.0-alpha.1

package/lib/components/bundle-assets/bundle-assets.js

@@ -29,10 +29,12 @@ var _icon = require("../../ui/icon");
 
 var _fileName = require("../../ui/file-name");
 
-var _popover = require("../../ui/popover");
+var _hoverCard = require("../../ui/hover-card");
 
 var _tooltip = require("../../ui/tooltip");
 
+var _tag = require("../../ui/tag");
+
 var _filters = require("../../ui/filters");
 
 var _sortDropdown = require("../../ui/sort-dropdown");
@@ -126,53 +128,99 @@ TooltipNotPredictive.propTypes = {
 
 };
 
-var getRenderRowHeader = function getRenderRowHeader(_ref6) {
-  var labels = _ref6.labels,
-      CustomComponentLink = _ref6.CustomComponentLink,
-      chunks = _ref6.chunks;
-  return function (item) {
-    var label = item.label,
-        isNotPredictive = item.isNotPredictive,
-        runs = item.runs,
-        isChunk = item.isChunk,
-        isEntry = item.isEntry,
-        isInitial = item.isInitial;
-    return /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
-      label: /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
-        name: label
-      }),
-      icon: /*#__PURE__*/_react["default"].createElement("div", {
-        className: _bundleAssetsModule["default"].assetInfoFlags
-      }, isNotPredictive && /*#__PURE__*/_react["default"].createElement(_tooltip.Tooltip, {
-        className: _bundleAssetsModule["default"].notPredictive,
-        title: /*#__PURE__*/_react["default"].createElement(TooltipNotPredictive, {
-          runs: runs
-        })
-      }, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
-        className: _bundleAssetsModule["default"].notPredictiveIcon,
-        glyph: "warning"
-      })), isChunk && /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Chunk",
-        className: _bundleAssetsModule["default"].flagChunk
-      }, "c"), isEntry && /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Entrypoint",
-        className: _bundleAssetsModule["default"].flagEntry
-      }, "e"), isInitial && /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Initial",
-        className: _bundleAssetsModule["default"].flagInitial
-      }, "i"))
-    }, /*#__PURE__*/_react["default"].createElement(_assetInfo.AssetInfo, {
-      className: _bundleAssetsModule["default"].assetInfo,
-      item: item,
-      labels: labels,
-      chunks: chunks,
-      CustomComponentLink: CustomComponentLink
+var RowHeader = function RowHeader(_ref6) {
+  var row = _ref6.row,
+      labels = _ref6.labels,
+      chunks = _ref6.chunks,
+      CustomComponentLink = _ref6.CustomComponentLink;
+  var label = row.label,
+      isNotPredictive = row.isNotPredictive,
+      runs = row.runs,
+      isChunk = row.isChunk,
+      isEntry = row.isEntry,
+      isInitial = row.isInitial;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showHoverCard = _useState2[0],
+      setHoverCard = _useState2[1];
+
+  var handleOnMouseEnter = (0, _react.useCallback)(function () {
+    return setHoverCard(true);
+  }, [showHoverCard]);
+  var content = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      className: _bundleAssetsModule["default"].assetName
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: _bundleAssetsModule["default"].assetNameTags
+    }, isNotPredictive && /*#__PURE__*/_react["default"].createElement(_tooltip.Tooltip, {
+      className: _bundleAssetsModule["default"].notPredictive,
+      title: /*#__PURE__*/_react["default"].createElement(TooltipNotPredictive, {
+        runs: runs
+      })
+    }, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+      className: _bundleAssetsModule["default"].notPredictiveIcon,
+      glyph: "warning"
+    })), isChunk && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
+      className: (0, _classnames["default"])(_bundleAssetsModule["default"].assetNameTag, _bundleAssetsModule["default"].assetNameTagChunk),
+      title: "Chunk",
+      size: _tag.Tag.SIZES.SMALL,
+      kind: _tag.Tag.KINDS.INFO
+    }), isEntry && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
+      className: (0, _classnames["default"])(_bundleAssetsModule["default"].assetNameTag, _bundleAssetsModule["default"].assetNameTagEntry),
+      title: "Entrypoint",
+      size: _tag.Tag.SIZES.SMALL,
+      kind: _tag.Tag.KINDS.INFO
+    }), isInitial && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
+      className: (0, _classnames["default"])(_bundleAssetsModule["default"].assetNameTag, _bundleAssetsModule["default"].assetNameTagInitial),
+      title: "Initial",
+      size: _tag.Tag.SIZES.SMALL,
+      kind: _tag.Tag.KINDS.INFO
+    })), /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
+      className: _bundleAssetsModule["default"].assetNameText,
+      name: label
     }));
-  };
+  }, [isChunk, isEntry, isInitial, isNotPredictive, runs]);
+
+  if (!showHoverCard) {
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      onMouseEnter: handleOnMouseEnter
+    }, content);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+    label: content
+  }, /*#__PURE__*/_react["default"].createElement(_assetInfo.AssetInfo, {
+    className: _bundleAssetsModule["default"].assetInfo,
+    item: row,
+    labels: labels,
+    chunks: chunks,
+    CustomComponentLink: CustomComponentLink
+  }));
+};
+
+RowHeader.propTypes = {
+  row: _propTypes["default"].shape({
+    label: _propTypes["default"].string,
+    isNotPredictive: _propTypes["default"].bool,
+    isChunk: _propTypes["default"].bool,
+    isInitial: _propTypes["default"].bool,
+    isEntry: _propTypes["default"].bool,
+    runs: _propTypes["default"].arrayOf(_propTypes["default"].object)
+  }).isRequired,
+  chunks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    id: _propTypes["default"].string,
+    name: _propTypes["default"].string
+  })),
+  labels: _propTypes["default"].arrayOf(_propTypes["default"].string).isRequired,
+  CustomComponentLink: _propTypes["default"].elementType.isRequired
+};
+RowHeader.defaultProps = {
+  chunks: []
 };
 
 var BundleAssets = function BundleAssets(props) {
-  var _jobs$, _jobs$$meta, _jobs$$meta$webpack, _ASSET_ENTRY_TYPE, _ref8;
+  var _ASSET_ENTRY_TYPE, _ref8;
 
   var className = props.className,
       jobs = props.jobs,
@@ -197,14 +245,16 @@ var BundleAssets = function BundleAssets(props) {
     handleViewAll: resetAllFilters
   });
 
-  var chunks = ((_jobs$ = jobs[0]) === null || _jobs$ === void 0 ? void 0 : (_jobs$$meta = _jobs$.meta) === null || _jobs$$meta === void 0 ? void 0 : (_jobs$$meta$webpack = _jobs$$meta.webpack) === null || _jobs$$meta$webpack === void 0 ? void 0 : _jobs$$meta$webpack.chunks) || [];
-  var renderRowHeader = (0, _react.useMemo)(function () {
-    return getRenderRowHeader({
+  var renderRowHeader = (0, _react.useCallback)(function (row) {
+    var _jobs$, _jobs$$meta, _jobs$$meta$webpack;
+
+    return /*#__PURE__*/_react["default"].createElement(RowHeader, {
+      row: row,
       labels: (0, _map2["default"])(jobs, 'label'),
-      CustomComponentLink: CustomComponentLink,
-      chunks: chunks
+      chunks: ((_jobs$ = jobs[0]) === null || _jobs$ === void 0 ? void 0 : (_jobs$$meta = _jobs$.meta) === null || _jobs$$meta === void 0 ? void 0 : (_jobs$$meta$webpack = _jobs$$meta.webpack) === null || _jobs$$meta$webpack === void 0 ? void 0 : _jobs$$meta$webpack.chunks) || [],
+      CustomComponentLink: CustomComponentLink
     });
-  }, [jobs, chunks]);
+  }, [jobs, CustomComponentLink]);
   return /*#__PURE__*/_react["default"].createElement("section", {
     className: (0, _classnames["default"])(_bundleAssetsModule["default"].root, className)
   }, /*#__PURE__*/_react["default"].createElement(_toolbar.Toolbar, {
@@ -212,7 +262,7 @@ var BundleAssets = function BundleAssets(props) {
     renderActions: function renderActions(_ref7) {
       var actionClassName = _ref7.actionClassName;
       return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-        space: "xsmall",
+        space: "xxsmall",
         className: (0, _classnames["default"])(_bundleAssetsModule["default"].dropdown, actionClassName)
       }, /*#__PURE__*/_react["default"].createElement(_sortDropdown.SortDropdown, _extends({
         fields: sortFields
@@ -223,7 +273,9 @@ var BundleAssets = function BundleAssets(props) {
         handleResetFilters: resetFilters
       }));
     }
-  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, null, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
+  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "xxsmall"
+  }, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
     className: _bundleAssetsModule["default"].toolbarSearch,
     placeholder: "Search by name",
     search: search,

package/lib/components/bundle-assets/bundle-assets.module.css

@@ -8,6 +8,8 @@
   margin-right: -1px; /** collapse border */
 }
 
+.assetName {}
+
 .notPredictive {
   margin-right: var(--space-xxsmall);
   display: inline-block;
@@ -21,50 +23,46 @@
   vertical-align: top;
 }
 
-.assetInfoFlags {
-  display: inline-block;
+.assetNameTags {
+  display: inline;
   margin-right: var(--space-xxxsmall);
 }
 
-.assetInfoFlags:empty {
+.assetNameTags:empty {
   display: none;
 }
 
-.flag {
-  display: inline-block;
-  width: var(--space-xsmall);
-  height: var(--space-xsmall);
-  font-family: var(--font-family);
-  font-size: 8px;
-  font-weight: bold;
-  background: var(--color-highlight);
-  color: var(--color-text-light);
-  line-height: var(--space-xsmall);
-  text-align: center;
-  text-transform: uppercase;
+.assetNameTag {
   vertical-align: middle;
 }
 
-.flag + .flag {
+.assetNameTag + .assetNameTag {
   margin-left: 2px;
 }
 
-.flagEntry {
-  composes: flag;
+.assetNameTagEntry {
   background: var(--color-info-light);
-  color: var(--color-background);
 }
 
-.flagInitial {
-  composes: flag;
+.assetNameTagEntry::before {
+  content: 'e';
+}
+
+.assetNameTagInitial {
   background: var(--color-info-light);
-  color: var(--color-background);
 }
 
-.flagChunk {
-  composes: flag;
-  background: var(--color-info);
-  color: var(--color-background);
+.assetNameTagInitial::before {
+  content: 'i';
+}
+
+.assetNameTagChunk::before {
+  content: 'c';
+}
+
+.assetNameText {
+  display: inline;
+  vertical-align: middle;
 }
 
 /* Tooltip not predictive */

package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.js

@@ -29,12 +29,16 @@ var _budgetInfo = require("../budget-info");
 
 var _bundleAssetsTotalsTableModule = _interopRequireDefault(require("./bundle-assets-totals-table.module.css"));
 
+var _excluded = ["className", "jobs", "customComponentLink"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -47,12 +51,18 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var BundleAssetsTotalsTable = function BundleAssetsTotalsTable(_ref) {
   var _jobs$0$insights, _jobs$0$insights$webp;
 
   var className = _ref.className,
       jobs = _ref.jobs,
-      CustomComponentLink = _ref.customComponentLink;
+      CustomComponentLink = _ref.customComponentLink,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
   var items = (0, _react.useMemo)(function () {
     return webpack.compareBySection.sizes(jobs);
   }, [jobs]);
@@ -84,13 +94,13 @@ var BundleAssetsTotalsTable = function BundleAssetsTotalsTable(_ref) {
       budgetInsight: budget
     })));
   }, [CustomComponentLink]);
-  return /*#__PURE__*/_react["default"].createElement(_metricsTable.MetricsTable, {
+  return /*#__PURE__*/_react["default"].createElement(_metricsTable.MetricsTable, _extends({
     className: className,
     runs: jobs,
     items: items,
     renderRowHeader: renderRowHeader,
     showHeaderSum: true
-  });
+  }, restProps));
 };
 
 exports.BundleAssetsTotalsTable = BundleAssetsTotalsTable;

package/lib/components/bundle-modules/bundle-modules.js

@@ -35,7 +35,7 @@ var _fileName = require("../../ui/file-name");
 
 var _filters = require("../../ui/filters");
 
-var _popover = require("../../ui/popover");
+var _hoverCard = require("../../ui/hover-card");
 
 var _sortDropdown = require("../../ui/sort-dropdown");
 
@@ -88,33 +88,33 @@ var RowHeader = function RowHeader(_ref) {
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
-      showPopopver = _useState2[0],
-      setPopover = _useState2[1];
+      showHoverCard = _useState2[0],
+      setHoverCard = _useState2[1];
 
   var handleOnMouseEnter = (0, _react.useCallback)(function () {
-    return setPopover(true);
-  }, [showPopopver]);
+    return setHoverCard(true);
+  }, [showHoverCard]);
+  var content = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
+      name: row.label
+    });
+  }, [row.label]);
 
-  var content = /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
-    name: row.label
-  });
+  if (!showHoverCard) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      onMouseEnter: handleOnMouseEnter
+    }, content);
+  }
 
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    onMouseEnter: handleOnMouseEnter
-  }, !showPopopver ? content : /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
-    ariaLabel: "View module info",
+  return /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
     label: content
-  }, function (_ref2) {
-    var popoverToggle = _ref2.popoverToggle;
-    return /*#__PURE__*/_react["default"].createElement(_moduleInfo.ModuleInfo, {
-      className: _bundleModulesModule["default"].namePopover,
-      item: row,
-      chunks: chunks,
-      chunkIds: chunkIds,
-      labels: labels,
-      customComponentLink: CustomComponentLink,
-      onClick: popoverToggle
-    });
+  }, /*#__PURE__*/_react["default"].createElement(_moduleInfo.ModuleInfo, {
+    className: _bundleModulesModule["default"].namePopover,
+    item: row,
+    chunks: chunks,
+    chunkIds: chunkIds,
+    labels: labels,
+    customComponentLink: CustomComponentLink
   }));
 };
 
@@ -133,50 +133,34 @@ RowHeader.defaultProps = {
   chunks: []
 };
 
-var getRenderRowHeader = function getRenderRowHeader(_ref3) {
-  var labels = _ref3.labels,
-      chunks = _ref3.chunks,
-      CustomComponentLink = _ref3.CustomComponentLink;
-  return function (row) {
-    return /*#__PURE__*/_react["default"].createElement(RowHeader, {
-      row: row,
-      chunks: chunks,
-      labels: labels,
-      CustomComponentLink: CustomComponentLink
-    });
-  };
-};
-
-var BundleModules = function BundleModules(_ref4) {
+var BundleModules = function BundleModules(_ref2) {
   var _MODULE_SOURCE_TYPE, _objectSpread2;
 
-  var className = _ref4.className,
-      jobs = _ref4.jobs,
-      items = _ref4.items,
-      chunks = _ref4.chunks,
-      totalRowCount = _ref4.totalRowCount,
-      updateFilters = _ref4.updateFilters,
-      resetFilters = _ref4.resetFilters,
-      resetAllFilters = _ref4.resetAllFilters,
-      filters = _ref4.filters,
-      sortFields = _ref4.sortFields,
-      sort = _ref4.sort,
-      updateSort = _ref4.updateSort,
-      search = _ref4.search,
-      updateSearch = _ref4.updateSearch,
-      hasActiveFilters = _ref4.hasActiveFilters,
-      CustomComponentLink = _ref4.customComponentLink;
+  var className = _ref2.className,
+      jobs = _ref2.jobs,
+      items = _ref2.items,
+      chunks = _ref2.chunks,
+      totalRowCount = _ref2.totalRowCount,
+      updateFilters = _ref2.updateFilters,
+      resetFilters = _ref2.resetFilters,
+      resetAllFilters = _ref2.resetAllFilters,
+      filters = _ref2.filters,
+      sortFields = _ref2.sortFields,
+      sort = _ref2.sort,
+      updateSort = _ref2.updateSort,
+      search = _ref2.search,
+      updateSearch = _ref2.updateSearch,
+      hasActiveFilters = _ref2.hasActiveFilters,
+      CustomComponentLink = _ref2.customComponentLink;
   var rootClassName = (0, _classnames["default"])(_bundleModulesModule["default"].root, className);
-  var labels = (0, _react.useMemo)(function () {
-    return (0, _map2["default"])(jobs, 'label');
-  }, [jobs]);
-  var renderRowHeader = (0, _react.useMemo)(function () {
-    return getRenderRowHeader({
-      labels: labels,
+  var renderRowHeader = (0, _react.useCallback)(function (row) {
+    return /*#__PURE__*/_react["default"].createElement(RowHeader, {
+      row: row,
       chunks: chunks,
+      labels: (0, _map2["default"])(jobs, 'label'),
       CustomComponentLink: CustomComponentLink
     });
-  }, [labels, chunks]);
+  }, [jobs, chunks, CustomComponentLink]);
 
   var emptyMessage = /*#__PURE__*/_react["default"].createElement(_emptySet.EmptySet, {
     resources: "modules",
@@ -199,9 +183,9 @@ var BundleModules = function BundleModules(_ref4) {
     defaultValue: (0, _get2["default"])(filters, "".concat(_utils.MODULE_SOURCE_TYPE, ".").concat(_utils.MODULE_FILTERS.THIRD_PARTY), true)
   }), _MODULE_SOURCE_TYPE)), _objectSpread2), !(0, _isEmpty2["default"])(chunks) && _defineProperty({}, _utils.MODULE_CHUNK, _objectSpread({
     label: 'Chunk'
-  }, chunks.reduce(function (chunkFilters, _ref5) {
-    var id = _ref5.id,
-        name = _ref5.name;
+  }, chunks.reduce(function (chunkFilters, _ref3) {
+    var id = _ref3.id,
+        name = _ref3.name;
     return _objectSpread(_objectSpread({}, chunkFilters), {}, _defineProperty({}, id, {
       label: name,
       defaultValue: (0, _get2["default"])(filters, "".concat(_utils.MODULE_CHUNK, ".").concat(id), true)
@@ -219,8 +203,8 @@ var BundleModules = function BundleModules(_ref4) {
     className: rootClassName
   }, /*#__PURE__*/_react["default"].createElement(_toolbar.Toolbar, {
     className: _bundleModulesModule["default"].toolbar,
-    renderActions: function renderActions(_ref7) {
-      var actionClassName = _ref7.actionClassName;
+    renderActions: function renderActions(_ref5) {
+      var actionClassName = _ref5.actionClassName;
       return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
         space: "xxsmall",
         className: (0, _classnames["default"])(_bundleModulesModule["default"].dropdown, actionClassName)
@@ -233,7 +217,9 @@ var BundleModules = function BundleModules(_ref4) {
         handleResetFilters: resetFilters
       }));
     }
-  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, null, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
+  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "xxsmall"
+  }, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
     className: _bundleModulesModule["default"].toolbarSearch,
     search: search,
     updateSearch: updateSearch,