@bundle-stats/ui 3.1.4-alpha.0 → 3.2.1-alpha.0

package/lib/components/duplicate-packages-warning/duplicate-packages-warning.js

@@ -28,12 +28,13 @@ var numberMetric = _utils.METRIC_TYPES[_utils.METRIC_TYPE_NUMERIC];
 var DuplicatePackagesWarning = function DuplicatePackagesWarning(props) {
   var className = props.className,
       duplicatePackagesCount = props.duplicatePackagesCount,
-      CustomComponentLink = props.customComponentLink;
+      CustomComponentLink = props.customComponentLink,
+      showDelta = props.showDelta;
   var metricRunInfo = (0, _utils.getMetricRunInfo)(numberMetric, duplicatePackagesCount.current, duplicatePackagesCount.baseline);
   return /*#__PURE__*/_react["default"].createElement(_alert.Alert, {
     kind: "warning",
     className: (0, _classnames["default"])(_duplicatePackagesWarningModule["default"].root, className)
-  }, "Bundle contains ", /*#__PURE__*/_react["default"].createElement(CustomComponentLink, _utils.BUNDLE_PACKAGES_DUPLICATE, metricRunInfo.value, metricRunInfo.delta !== 0 && /*#__PURE__*/_react["default"].createElement(_delta.Delta, {
+  }, "Bundle contains ", /*#__PURE__*/_react["default"].createElement(CustomComponentLink, _utils.BUNDLE_PACKAGES_DUPLICATE, metricRunInfo.value, showDelta && metricRunInfo.delta !== 0 && /*#__PURE__*/_react["default"].createElement(_delta.Delta, {
     className: _duplicatePackagesWarningModule["default"].titleDelta,
     inverted: true,
     displayValue: metricRunInfo.displayDelta,
@@ -48,9 +49,11 @@ DuplicatePackagesWarning.propTypes = {
   duplicatePackagesCount: _propTypes["default"].shape({
     current: _propTypes["default"].number,
     baseline: _propTypes["default"].number
-  }).isRequired
+  }).isRequired,
+  showDelta: _propTypes["default"].bool
 };
 DuplicatePackagesWarning.defaultProps = {
   className: '',
-  customComponentLink: _componentLink.ComponentLink
+  customComponentLink: _componentLink.ComponentLink,
+  showDelta: true
 };

package/lib/components/duplicate-packages-warning/duplicate-packages-warning.stories.js

@@ -12,15 +12,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var stories = (0, _react2.storiesOf)('Components/DuplicatePackagesWarning', module);
 stories.addDecorator((0, _stories.getWrapperDecorator)());
-stories.add('single duplicate packages', function () {
+stories.add('single job', function () {
   return /*#__PURE__*/_react["default"].createElement(_.DuplicatePackagesWarning, {
     duplicatePackagesCount: {
       current: 1,
       baseline: 0
-    }
+    },
+    showDelta: false
   });
 });
-stories.add('multiple duplicate packages', function () {
+stories.add('multiple jobs', function () {
   return /*#__PURE__*/_react["default"].createElement(_.DuplicatePackagesWarning, {
     duplicatePackagesCount: {
       current: 2,

package/lib/components/index.js

@@ -15,22 +15,16 @@ Object.defineProperty(exports, "BundleAssets", {
     return _bundleAssets.BundleAssets;
   }
 });
-Object.defineProperty(exports, "BundleAssetsTotalsTable", {
-  enumerable: true,
-  get: function get() {
-    return _bundleAssetsTotalsTable.BundleAssetsTotalsTable;
-  }
-});
 Object.defineProperty(exports, "BundleAssetsTotalsChartBars", {
   enumerable: true,
   get: function get() {
     return _bundleAssetsTotalsChartBars.BundleAssetsTotalsChartBars;
   }
 });
-Object.defineProperty(exports, "BundlePackages", {
+Object.defineProperty(exports, "BundleAssetsTotalsTable", {
   enumerable: true,
   get: function get() {
-    return _bundlePackages.BundlePackages;
+    return _bundleAssetsTotalsTable.BundleAssetsTotalsTable;
   }
 });
 Object.defineProperty(exports, "BundleModules", {
@@ -39,16 +33,16 @@ Object.defineProperty(exports, "BundleModules", {
     return _bundleModules.BundleModules;
   }
 });
-Object.defineProperty(exports, "ComponentLink", {
+Object.defineProperty(exports, "BundlePackages", {
   enumerable: true,
   get: function get() {
-    return _componentLink.ComponentLink;
+    return _bundlePackages.BundlePackages;
   }
 });
-Object.defineProperty(exports, "DuplicatePackagesWarning", {
+Object.defineProperty(exports, "ComponentLink", {
   enumerable: true,
   get: function get() {
-    return _duplicatePackagesWarning.DuplicatePackagesWarning;
+    return _componentLink.ComponentLink;
   }
 });
 Object.defineProperty(exports, "Delta", {
@@ -57,10 +51,10 @@ Object.defineProperty(exports, "Delta", {
     return _delta.Delta;
   }
 });
-Object.defineProperty(exports, "JobName", {
+Object.defineProperty(exports, "DuplicatePackagesWarning", {
   enumerable: true,
   get: function get() {
-    return _jobName.JobName;
+    return _duplicatePackagesWarning.DuplicatePackagesWarning;
   }
 });
 Object.defineProperty(exports, "JobHeader", {
@@ -69,6 +63,12 @@ Object.defineProperty(exports, "JobHeader", {
     return _jobHeader.JobHeader;
   }
 });
+Object.defineProperty(exports, "JobName", {
+  enumerable: true,
+  get: function get() {
+    return _jobName.JobName;
+  }
+});
 Object.defineProperty(exports, "JobsHeader", {
   enumerable: true,
   get: function get() {
@@ -117,16 +117,16 @@ Object.defineProperty(exports, "ModuleInfo", {
     return _moduleInfo.ModuleInfo;
   }
 });
-Object.defineProperty(exports, "SummaryItem", {
+Object.defineProperty(exports, "Summary", {
   enumerable: true,
   get: function get() {
-    return _summaryItem.SummaryItem;
+    return _summary.Summary;
   }
 });
-Object.defineProperty(exports, "Summary", {
+Object.defineProperty(exports, "SummaryItem", {
   enumerable: true,
   get: function get() {
-    return _summary.Summary;
+    return _summaryItem.SummaryItem;
   }
 });
 Object.defineProperty(exports, "TotalSizeTypeTitle", {

package/lib/components/metrics-table/metrics-table.js

@@ -7,11 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MetricsTable = void 0;
 
-var _sum2 = _interopRequireDefault(require("lodash/fp/sum"));
-
-var _map2 = _interopRequireDefault(require("lodash/fp/map"));
-
-var _flow2 = _interopRequireDefault(require("lodash/fp/flow"));
+var _sum2 = _interopRequireDefault(require("lodash/sum"));
 
 var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
 
@@ -56,9 +52,9 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 var METRIC_TYPE_DATA = (0, _utils.getGlobalMetricType)(null, _utils.METRIC_TYPE_FILE_SIZE);
 
 var getRowsRunTotal = function getRowsRunTotal(rows, runIndex) {
-  return (0, _flow2["default"])((0, _map2["default"])(function (row) {
+  return (0, _sum2["default"])(rows.map(function (row) {
     return (0, _get2["default"])(row, "runs[".concat(runIndex, "].value"), 0);
-  }), _sum2["default"])(rows);
+  }));
 };
 
 var getHeaderLabelCells = function getHeaderLabelCells(rows) {

package/lib/components/metrics-table-search/metrics-table-search.js

@@ -76,7 +76,8 @@ var MetricsTableSearch = function MetricsTableSearch(props) {
     placeholder: placeholder,
     onChange: handleChangeValue,
     value: value,
-    size: "small"
+    size: "small",
+    autoComplete: "off"
   }), search && /*#__PURE__*/_react["default"].createElement("button", {
     className: _metricsTableSearchModule["default"].cancelButton,
     type: "button",

package/lib/components/metrics-table-search/metrics-table-search.module.css

@@ -5,6 +5,7 @@
 }
 
 .input {
+  height: var(--space-large);
   border-color: var(--color-outline);
 }
 
@@ -26,7 +27,7 @@
   padding: var(--space-xxsmall);
   width: var(--space-large);
   height: var(--space-large);
-  background: radial-gradient(var(--color-background), transparent 75%);
+  background: radial-gradient(var(--color-background) 50%, transparent);
   color: var(--color-text-ultra-light);
   transition: var(--transition-in);
 }

package/lib/constants.js

@@ -3,7 +3,7 @@
 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.URLS = exports.SPACE_XXXSMALL = exports.SPACE_XXXLARGE = exports.SPACE_XXSMALL = exports.SPACE_XXLARGE = exports.SPACE_XSMALL = exports.SPACE_XLARGE = exports.SPACE_SMALL = exports.SPACE_MEDIUM = exports.SPACE_LARGE = exports.SPACES = exports.SECTION_URLS = exports.NO_SPACE = exports.METRICS_WEBPACK_PACKAGES = exports.METRICS_WEBPACK_MODULES = exports.METRICS_WEBPACK_GENERAL = exports.METRICS_WEBPACK_ASSETS = exports.ASSETS_SIZES_FILE_TYPE_MAP = void 0;
 
 var _utils = require("@bundle-stats/utils");
 

package/lib/hooks/rows-filter.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRowsFilter = void 0;
+
+var _react = require("react");
+
+var useRowsFilter = function useRowsFilter(_ref) {
+  var rows = _ref.rows,
+      searchPattern = _ref.searchPattern,
+      filters = _ref.filters,
+      getRowFilter = _ref.getRowFilter;
+  var filteredRows = (0, _react.useMemo)(function () {
+    var filterRow = getRowFilter(filters);
+    return rows.filter(function (row) {
+      if (searchPattern && !searchPattern.test(row === null || row === void 0 ? void 0 : row.key)) {
+        return false;
+      }
+
+      return filterRow(row);
+    });
+  }, [rows, searchPattern, filters, getRowFilter]);
+  return filteredRows;
+};
+
+exports.useRowsFilter = useRowsFilter;

package/lib/hooks/rows-sort.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRowsSort = void 0;
+
+var _orderBy2 = _interopRequireDefault(require("lodash/orderBy"));
+
+var _react = require("react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var useRowsSort = function useRowsSort(_ref) {
+  var rows = _ref.rows,
+      sortFields = _ref.sortFields,
+      _ref$sortBy = _ref.sortBy,
+      sortBy = _ref$sortBy === void 0 ? 'size' : _ref$sortBy,
+      _ref$sortDirection = _ref.sortDirection,
+      sortDirection = _ref$sortDirection === void 0 ? 'desc' : _ref$sortDirection,
+      getCustomSort = _ref.getCustomSort;
+
+  var _useState = (0, _react.useState)({
+    field: sortBy,
+    direction: sortDirection
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      sort = _useState2[0],
+      updateSort = _useState2[1];
+
+  var orderedRows = (0, _react.useMemo)(function () {
+    return (0, _orderBy2["default"])(rows, getCustomSort(sort.field), sort.direction);
+  }, [rows, sort]);
+  return {
+    sortFields: sortFields,
+    sort: sort,
+    updateSort: updateSort,
+    items: orderedRows
+  };
+};
+
+exports.useRowsSort = useRowsSort;

package/lib/{hocs/with-search.js → hooks/search-params.js}

@@ -1,30 +1,18 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withSearch = exports.useSearch = exports.generateState = void 0;
-
-var _noop2 = _interopRequireDefault(require("lodash/noop"));
+exports.useSearchParams = exports.generateState = void 0;
 
 var _merge2 = _interopRequireDefault(require("lodash/merge"));
 
 var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-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; }
+var _react = require("react");
 
 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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."); }
@@ -145,13 +133,13 @@ var generateState = function generateState(filters, search) {
 
 exports.generateState = generateState;
 
-var useSearch = function useSearch(_ref2) {
-  var setParentState = _ref2.setState,
-      parentSearch = _ref2.search,
+var useSearchParams = function useSearchParams(_ref2) {
+  var parentSearch = _ref2.search,
       parentFilters = _ref2.filters,
       defaultFilters = _ref2.defaultFilters,
-      allEntriesFilters = _ref2.allEntriesFilters;
-  // When we pass custom filters, set the other flags to true(allEntries)
+      allEntriesFilters = _ref2.allEntriesFilters,
+      setParentState = _ref2.setState;
+  // When we pass custom filters, set the other flags to true (allEntries)
   var initialFilters = parentFilters ? (0, _merge2["default"])({}, allEntriesFilters, parentFilters) : defaultFilters;
 
   var _useReducer = (0, _react.useReducer)(getSearchReducer({
@@ -167,7 +155,7 @@ var useSearch = function useSearch(_ref2) {
       dispatch = _useReducer2[1]; // Update state when the custom filters/search are changing - initial load or route updates
 
 
-  (0, _react.useEffect)(function () {
+  (0, _react.useLayoutEffect)(function () {
     // Run a deep comparison to prevent circular setState triggering
     if (parentSearch === search || (0, _isEqual2["default"])(parentFilters, filters)) {
       return;
@@ -178,6 +166,8 @@ var useSearch = function useSearch(_ref2) {
       payload: generateState(initialFilters, parentSearch)
     });
   }, [search, filters, parentFilters, parentSearch]);
+  /** Callbacks */
+
   var handleUpdateSearch = (0, _react.useCallback)(function (newValue) {
     dispatch({
       type: ACTION_SET_SEARCH,
@@ -202,53 +192,14 @@ var useSearch = function useSearch(_ref2) {
   }, []);
   return {
     search: search,
-    updateSearch: handleUpdateSearch,
     searchPattern: searchPattern,
+    filters: filters,
+    hasActiveFilters: !(0, _isEqual2["default"])(allEntriesFilters, filters),
+    updateSearch: handleUpdateSearch,
     updateFilters: handleUpdateFilters,
     resetFilters: handleResetFilters,
-    resetAllFilters: handleResetAllFilters,
-    filters: filters,
-    hasActiveFilters: !(0, _isEqual2["default"])(allEntriesFilters, filters)
-  };
-};
-
-exports.useSearch = useSearch;
-
-var withSearch = function withSearch() {
-  return function (BaseComponent) {
-    var WithSearch = function WithSearch(props) {
-      var allEntriesFilters = props.allEntriesFilters,
-          defaultFilters = props.defaultFilters,
-          filters = props.filters,
-          search = props.search,
-          setState = props.setState;
-      var searchProps = useSearch({
-        search: search,
-        filters: filters,
-        setState: setState,
-        defaultFilters: defaultFilters,
-        allEntriesFilters: allEntriesFilters
-      });
-      return /*#__PURE__*/_react["default"].createElement(BaseComponent, _extends({}, props, searchProps));
-    };
-
-    WithSearch.defaultProps = {
-      filters: null,
-      setState: _noop2["default"],
-      search: ''
-    };
-    WithSearch.propTypes = {
-      allEntriesFilters: _propTypes["default"].object.isRequired,
-      // eslint-disable-line react/forbid-prop-types
-      defaultFilters: _propTypes["default"].object.isRequired,
-      // eslint-disable-line react/forbid-prop-types
-      filters: _propTypes["default"].object,
-      // eslint-disable-line react/forbid-prop-types
-      search: _propTypes["default"].string,
-      setState: _propTypes["default"].func
-    };
-    return WithSearch;
+    resetAllFilters: handleResetAllFilters
   };
 };
 
-exports.withSearch = withSearch;
+exports.useSearchParams = useSearchParams;

package/lib/layout/index.js

@@ -9,22 +9,22 @@ Object.defineProperty(exports, "Box", {
     return _box.Box;
   }
 });
-Object.defineProperty(exports, "Footer", {
+Object.defineProperty(exports, "FlexStack", {
   enumerable: true,
   get: function get() {
-    return _footer.Footer;
+    return _flexStack.FlexStack;
   }
 });
-Object.defineProperty(exports, "Header", {
+Object.defineProperty(exports, "Footer", {
   enumerable: true,
   get: function get() {
-    return _header.Header;
+    return _footer.Footer;
   }
 });
-Object.defineProperty(exports, "SubHeader", {
+Object.defineProperty(exports, "Header", {
   enumerable: true,
   get: function get() {
-    return _subHeader.SubHeader;
+    return _header.Header;
   }
 });
 Object.defineProperty(exports, "Stack", {
@@ -33,10 +33,10 @@ Object.defineProperty(exports, "Stack", {
     return _stack.Stack;
   }
 });
-Object.defineProperty(exports, "FlexStack", {
+Object.defineProperty(exports, "SubHeader", {
   enumerable: true,
   get: function get() {
-    return _flexStack.FlexStack;
+    return _subHeader.SubHeader;
   }
 });