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

package/lib/components/budget-insights/budget-insights.stories.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.SingleBudget = exports.FailedBudgets = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _ = require(".");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Components/BudgetInsights',
+  component: _.BudgetInsights,
+  decorators: [function (Story) {
+    return /*#__PURE__*/_react["default"].createElement(_reactRouterDom.MemoryRouter, null, /*#__PURE__*/_react["default"].createElement(Story, null));
+  }]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_.BudgetInsights, args);
+};
+
+var Default = Template.bind();
+exports.Default = Default;
+Default.args = {
+  source: 'webpack',
+  budgets: {
+    totalSizeByTypeALL: {
+      currentValue: 2097917,
+      budgetValue: 2097152,
+      failed: true
+    },
+    totalInitialSizeJS: {
+      currentValue: 1265645,
+      budgetValue: 524288,
+      failed: true
+    },
+    totalInitialSizeCSS: {
+      currentValue: 48866,
+      budgetValue: 51200,
+      failed: false
+    },
+    chunkCount: {
+      currentValue: 12,
+      budgetValue: 50,
+      failed: false
+    },
+    moduleCount: {
+      currentValue: 1059,
+      budgetValue: 2000,
+      failed: false
+    },
+    duplicatePackagesCount: {
+      currentValue: 13,
+      budgetValue: 5,
+      failed: true
+    },
+    'sizes.totalSizeByTypeJS': {
+      currentValue: 1981470,
+      budgetValue: 2097152,
+      failed: false
+    },
+    'sizes.totalSizeByTypeCSS': {
+      currentValue: 56091,
+      budgetValue: 20480,
+      failed: true
+    }
+  }
+};
+var FailedBudgets = Template.bind();
+exports.FailedBudgets = FailedBudgets;
+FailedBudgets.args = {
+  source: 'webpack',
+  budgets: {
+    totalSizeByTypeALL: {
+      currentValue: 2097917,
+      budgetValue: 2097152,
+      failed: true
+    },
+    totalInitialSizeJS: {
+      currentValue: 1265645,
+      budgetValue: 524288,
+      failed: true
+    }
+  }
+};
+var SingleBudget = Template.bind();
+exports.SingleBudget = SingleBudget;
+SingleBudget.args = {
+  source: 'webpack',
+  budgets: {
+    totalInitialSizeJS: {
+      currentValue: 524288,
+      budgetValue: 1265645,
+      failed: false
+    }
+  }
+};

package/lib/components/budget-insights/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _budgetInsights = require("./budget-insights");
+
+Object.keys(_budgetInsights).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _budgetInsights[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _budgetInsights[key];
+    }
+  });
+});

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

@@ -7,7 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BundleAssetsTotalsTable = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -17,10 +19,16 @@ var webpack = _interopRequireWildcard(require("@bundle-stats/utils/lib-esm/webpa
 
 var _constants = require("../../constants");
 
+var _flexStack = require("../../layout/flex-stack");
+
 var _metricsTable = require("../metrics-table");
 
 var _componentLink = require("../component-link");
 
+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); }
@@ -31,19 +39,35 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 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."); }
+
+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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+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,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  var items = webpack.compareBySection.sizes(jobs);
-
-  var renderRowHeader = function renderRowHeader(item) {
+  var items = (0, _react.useMemo)(function () {
+    return webpack.compareBySection.sizes(jobs);
+  }, [jobs]);
+  var budgets = (_jobs$0$insights = jobs[0].insights) === null || _jobs$0$insights === void 0 ? void 0 : (_jobs$0$insights$webp = _jobs$0$insights.webpack) === null || _jobs$0$insights$webp === void 0 ? void 0 : _jobs$0$insights$webp.budgets;
+  var renderRowHeader = (0, _react.useCallback)(function (item) {
     var fileType = _constants.ASSETS_SIZES_FILE_TYPE_MAP[item.key];
 
     var _getBundleAssetsFileT = (0, _utils.getBundleAssetsFileTypeComponentLink)(fileType, item.label),
@@ -51,13 +75,25 @@ var BundleAssetsTotalsTable = function BundleAssetsTotalsTable(_ref) {
         title = _getBundleAssetsFileT.title,
         params = _getBundleAssetsFileT.params;
 
+    var _item$key$split = item.key.split('.'),
+        _item$key$split2 = _toArray(_item$key$split),
+        _ = _item$key$split2[0],
+        metricSlugs = _item$key$split2.slice(1);
+
+    var metricKey = metricSlugs.join('.');
+    var budget = (0, _get2["default"])(budgets, metricKey);
     return /*#__PURE__*/_react["default"].createElement(CustomComponentLink, {
       section: section,
       title: title,
       params: params
-    }, item.label);
-  };
-
+    }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+      space: "xxsmall",
+      className: _bundleAssetsTotalsTableModule["default"].itemTitleText
+    }, /*#__PURE__*/_react["default"].createElement("span", null, item.label), budget && /*#__PURE__*/_react["default"].createElement(_budgetInfo.BudgetInfo, {
+      metricId: item.key,
+      budgetInsight: budget
+    })));
+  }, [CustomComponentLink]);
   return /*#__PURE__*/_react["default"].createElement(_metricsTable.MetricsTable, _extends({
     className: className,
     runs: jobs,

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

@@ -1,3 +1,3 @@
-.title {
-  color: var(--color-text-light);
+.itemTitleText {
+  align-items: center;
 }

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.SingleJob = exports.MultipleJobs = exports.EmptyBaseline = void 0;
+exports["default"] = exports.WithBudgets = exports.SingleJob = exports.MultipleJobs = exports.EmptyBaseline = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -52,4 +52,23 @@ EmptyBaseline.args = {
   jobs: (0, _utils.createJobs)([{
     webpack: _webpackStatsCurrent["default"]
   }, null])
+};
+var WithBudgets = Template.bind();
+exports.WithBudgets = WithBudgets;
+WithBudgets.args = {
+  jobs: (0, _utils.createJobs)([{
+    webpack: _webpackStatsCurrent["default"]
+  }, {
+    webpack: _webpackStatsBaseline["default"]
+  }], {
+    webpack: {
+      budgets: [{
+        metric: 'sizes.totalSizeByTypeJS',
+        value: 2 * 1024 * 1024
+      }, {
+        metric: 'sizes.totalSizeByTypeCSS',
+        value: 20 * 1024
+      }]
+    }
+  })
 };

package/lib/components/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "BrowsertimeTable", {
     return _browsertimeTable.BrowsertimeTable;
   }
 });
+Object.defineProperty(exports, "BudgetInsights", {
+  enumerable: true,
+  get: function get() {
+    return _budgetInsights.BudgetInsights;
+  }
+});
 Object.defineProperty(exports, "BundleAssets", {
   enumerable: true,
   get: function get() {
@@ -148,6 +154,8 @@ var _bundlePackages = require("./bundle-packages");
 
 var _bundleModules = require("./bundle-modules");
 
+var _budgetInsights = require("./budget-insights");
+
 var _componentLink = require("./component-link");
 
 var _duplicatePackagesWarning = require("./duplicate-packages-warning");

package/lib/components/summary/summary.js

@@ -31,8 +31,6 @@ var _summaryModule = _interopRequireDefault(require("./summary.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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(); }
@@ -47,11 +45,16 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+var getSourceMetricId = function getSourceMetricId(fullMetricId) {
+  return fullMetricId.split('.').slice(1).join('.');
+};
+
 var Summary = function Summary(_ref) {
   var className = _ref.className,
       size = _ref.size,
       keys = _ref.keys,
       data = _ref.data,
+      budgets = _ref.budgets,
       loading = _ref.loading,
       showSummaryItemDelta = _ref.showSummaryItemDelta,
       SummaryItemCustomLink = _ref.summaryItemLink;
@@ -64,7 +67,7 @@ var Summary = function Summary(_ref) {
     var _ref3 = _slicedToArray(_ref2, 1),
         metricId = _ref3[0];
 
-    return keys.includes(metricId);
+    return keys.includes(getSourceMetricId(metricId));
   }).map(function (_ref4) {
     var _ref5 = _slicedToArray(_ref4, 2),
         metricId = _ref5[0],
@@ -77,6 +80,7 @@ var Summary = function Summary(_ref) {
       size: size,
       id: metricId,
       data: (0, _get2["default"])(data, metricId),
+      budget: (0, _get2["default"])(budgets, getSourceMetricId(metricId)),
       loading: loading,
       showMetricDescription: true,
       showDelta: showSummaryItemDelta && metricOptions.showDelta !== false
@@ -93,6 +97,7 @@ exports.Summary = Summary;
 Summary.defaultProps = {
   className: '',
   data: null,
+  budgets: null,
   loading: false,
   size: '',
   keys: _constants.METRICS_WEBPACK_GENERAL,
@@ -103,10 +108,10 @@ Summary.propTypes = {
   className: _propTypes["default"].string,
   size: _propTypes["default"].string,
   keys: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  data: _propTypes["default"].shape(_defineProperty({}, _propTypes["default"].string, _propTypes["default"].shape({
-    baseline: _propTypes["default"].number,
-    current: _propTypes["default"].number
-  }))),
+  data: _propTypes["default"].object,
+  // eslint-disable-line react/forbid-prop-types
+  budgets: _propTypes["default"].object,
+  // eslint-disable-line react/forbid-prop-types
   loading: _propTypes["default"].bool,
   showSummaryItemDelta: _propTypes["default"].bool,
   summaryItemLink: _propTypes["default"].elementType

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

@@ -4,7 +4,7 @@
 }
 
 .item {
-  padding: var(--space-small) var(--space-xxlarge) var(--space-small) var(--space-small);
+  padding: var(--space-small);
   flex: 1 0 25%; /* force equal sizes */
   position: relative;
   z-index: 1;

package/lib/components/summary/summary.stories.js

@@ -41,6 +41,35 @@ stories.add('default', function () {
     data: MULTIPLE_JOBS[0].summary
   });
 });
+stories.add('budgets', function () {
+  return /*#__PURE__*/_react["default"].createElement(_.Summary, {
+    data: MULTIPLE_JOBS[0].summary,
+    budgets: {
+      webpack: {
+        totalSizeByTypeALL: {
+          currentValue: MULTIPLE_JOBS[0].summary.webpack.totalSizeByTypeALL.current,
+          budgetValue: 1024 * 1024,
+          failed: false
+        },
+        totalInitialSizeJS: {
+          currentValue: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeJS.current,
+          budgetValue: 512 * 1024,
+          failed: true
+        },
+        totalInitialSizeCSS: {
+          currentValue: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeCSS.current,
+          budgetValue: 50 * 1024,
+          failed: false
+        },
+        chunkCount: {
+          currentValue: MULTIPLE_JOBS[0].summary.webpack.chunkCount.current,
+          budgetValue: 50,
+          failed: false
+        }
+      }
+    }
+  });
+});
 stories.add('custom keys', function () {
   return /*#__PURE__*/_react["default"].createElement(_.Summary, {
     keys: _constants.METRICS_WEBPACK_ASSETS,

package/lib/components/summary-item/summary-item.js

@@ -27,9 +27,11 @@ var _metric = require("../metric");
 
 var _delta = require("../delta");
 
+var _budgetInfo = require("../budget-info");
+
 var _summaryItemModule = _interopRequireDefault(require("./summary-item.module.css"));
 
-var _excluded = ["className", "as", "size", "id", "data", "loading", "showDelta", "showMetricDescription"];
+var _excluded = ["className", "as", "size", "id", "data", "loading", "showDelta", "showMetricDescription", "budget"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -67,6 +69,7 @@ var SummaryItem = function SummaryItem(_ref2) {
       loading = _ref2.loading,
       showDelta = _ref2.showDelta,
       showMetricDescription = _ref2.showMetricDescription,
+      budget = _ref2.budget,
       props = _objectWithoutProperties(_ref2, _excluded);
 
   var _ref3 = data || {
@@ -88,12 +91,18 @@ var SummaryItem = function SummaryItem(_ref2) {
     as: "h3",
     space: "xxxsmall",
     className: _summaryItemModule["default"].title
-  }, /*#__PURE__*/_react["default"].createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: _summaryItemModule["default"].titleLabel
+  }, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
     className: _summaryItemModule["default"].icon,
     label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
       glyph: "help"
     })
-  }, /*#__PURE__*/_react["default"].createElement(MetricInfo, metric))), !loading ? /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
+  }, /*#__PURE__*/_react["default"].createElement(MetricInfo, metric)), budget && /*#__PURE__*/_react["default"].createElement(_budgetInfo.BudgetInfo, {
+    className: _summaryItemModule["default"].budgetInfo,
+    metricId: id,
+    budgetInsight: budget
+  })), !loading ? /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
     className: _summaryItemModule["default"].currentMetric,
     value: current,
     formatter: metric.formatter,
@@ -122,7 +131,8 @@ SummaryItem.defaultProps = {
   size: 'medium',
   loading: false,
   showMetricDescription: false,
-  showDelta: true
+  showDelta: true,
+  budget: undefined
 };
 SummaryItem.propTypes = {
   /** Adopted child class name */
@@ -148,5 +158,12 @@ SummaryItem.propTypes = {
   showMetricDescription: _propTypes["default"].bool,
 
   /** Show delta */
-  showDelta: _propTypes["default"].bool
+  showDelta: _propTypes["default"].bool,
+
+  /** Budget insight data */
+  budget: _propTypes["default"].shape({
+    currentBalue: _propTypes["default"].number,
+    budgetValue: _propTypes["default"].number,
+    failed: _propTypes["default"].bool
+  })
 };

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

@@ -1,3 +1,8 @@
+.root {
+  position: relative;
+  padding-right: var(--space-xlarge);
+}
+
 .title {
   align-items: center;
   color: var(--color-text-ultra-light);
@@ -8,6 +13,12 @@
   white-space: nowrap;
 }
 
+.budgetInfo {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
 .currentMetric {
   display: block;
   color: var(--color-heading);

package/lib/components/summary-item/summary-item.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Standard = exports.SizeLarge = exports.ShowMetricDescription = exports.ShowDeltaFalse = exports.Loading = void 0;
+exports["default"] = exports.Standard = exports.SizeLarge = exports.ShowMetricDescription = exports.ShowDeltaFalse = exports.Loading = exports.BudgetSuccess = exports.BudgetError = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,70 +13,68 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var _default = {
   title: 'Components/SummaryItem',
-  component: _summaryItem.SummaryItem
-};
-exports["default"] = _default;
-
-var Standard = function Standard() {
-  return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
+  component: _summaryItem.SummaryItem,
+  decorators: [function (Story) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        maxWidth: '320px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(Story, null));
+  }],
+  args: {
     loading: false,
-    id: "webpack.totalSizeByTypeALL",
+    id: 'webpack.totalSizeByTypeALL',
     data: {
       current: 120 * 1000,
       baseline: 100 * 1000
     }
-  });
+  }
 };
+exports["default"] = _default;
 
-exports.Standard = Standard;
-
-var SizeLarge = function SizeLarge() {
-  return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
-    size: "large",
-    loading: false,
-    id: "webpack.totalSizeByTypeALL",
-    data: {
-      current: 120 * 1000,
-      baseline: 100 * 1000
-    }
-  });
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, args);
 };
 
+var Standard = Template.bind();
+exports.Standard = Standard;
+var SizeLarge = Template.bind();
 exports.SizeLarge = SizeLarge;
-
-var ShowMetricDescription = function ShowMetricDescription() {
-  return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
-    loading: false,
-    id: "webpack.totalSizeByTypeALL",
-    data: {
-      current: 120 * 1000,
-      baseline: 100 * 1000
-    },
-    showMetricDescription: true
-  });
+SizeLarge.args = {
+  size: 'large'
 };
-
+var ShowMetricDescription = Template.bind();
 exports.ShowMetricDescription = ShowMetricDescription;
-
-var ShowDeltaFalse = function ShowDeltaFalse() {
-  return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
-    loading: false,
-    id: "webpack.totalSizeByTypeALL",
-    data: {
-      current: 120 * 1000,
-      baseline: 0
-    },
-    showDelta: false
-  });
+ShowMetricDescription.args = {
+  showMetricDescription: true
 };
-
+var ShowDeltaFalse = Template.bind();
 exports.ShowDeltaFalse = ShowDeltaFalse;
-
-var Loading = function Loading() {
-  return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
-    loading: true,
-    id: "webpack.totalSizeByTypeALL"
-  });
+ShowDeltaFalse.args = {
+  showDelta: false
 };
-
-exports.Loading = Loading;
+var BudgetError = Template.bind();
+exports.BudgetError = BudgetError;
+BudgetError.args = {
+  showMetricDescription: true,
+  budget: {
+    currentValue: 120 * 1000,
+    budgetValue: 100 * 1000,
+    failed: true
+  }
+};
+var BudgetSuccess = Template.bind();
+exports.BudgetSuccess = BudgetSuccess;
+BudgetSuccess.args = {
+  showMetricDescription: true,
+  budget: {
+    currentValue: 120 * 1000,
+    budgetValue: 120 * 1024,
+    failed: false
+  }
+};
+var Loading = Template.bind();
+exports.Loading = Loading;
+Loading.args = {
+  loading: true
+};

package/lib/constants.js

@@ -52,11 +52,11 @@ var ASSETS_SIZES_FILE_TYPE_MAP = _utils.FILE_TYPES.reduce(function (agg, fileTyp
 }, {});
 
 exports.ASSETS_SIZES_FILE_TYPE_MAP = ASSETS_SIZES_FILE_TYPE_MAP;
-var METRICS_WEBPACK_GENERAL = ['webpack.totalSizeByTypeALL', 'webpack.totalInitialSizeJS', 'webpack.totalInitialSizeCSS', 'webpack.cacheInvalidation'];
+var METRICS_WEBPACK_GENERAL = ['totalSizeByTypeALL', 'totalInitialSizeJS', 'totalInitialSizeCSS', 'cacheInvalidation'];
 exports.METRICS_WEBPACK_GENERAL = METRICS_WEBPACK_GENERAL;
-var METRICS_WEBPACK_ASSETS = ['webpack.assetCount', 'webpack.chunkCount'];
+var METRICS_WEBPACK_ASSETS = ['assetCount', 'chunkCount'];
 exports.METRICS_WEBPACK_ASSETS = METRICS_WEBPACK_ASSETS;
-var METRICS_WEBPACK_MODULES = ['webpack.moduleCount', 'webpack.duplicateModulesCount', 'webpack.duplicateCode'];
+var METRICS_WEBPACK_MODULES = ['moduleCount', 'duplicateModulesCount', 'duplicateCode'];
 exports.METRICS_WEBPACK_MODULES = METRICS_WEBPACK_MODULES;
-var METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];
+var METRICS_WEBPACK_PACKAGES = ['packageCount', 'duplicatePackagesCount'];
 exports.METRICS_WEBPACK_PACKAGES = METRICS_WEBPACK_PACKAGES;

package/lib/ui/alert/alert.js

@@ -15,17 +15,27 @@ var _box = require("../../layout/box");
 
 var _alertModule = _interopRequireDefault(require("./alert.module.css"));
 
+var _excluded = ["className", "kind", "children"];
+
 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 _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 Alert = function Alert(props) {
   var className = props.className,
       kind = props.kind,
-      children = props.children;
-  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
+      children = props.children,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/_react["default"].createElement(_box.Box, _extends({
     padding: ['xsmall', 'small'],
     outline: true,
     className: (0, _classnames["default"])(_alertModule["default"].root, className, _alertModule["default"][kind])
-  }, children);
+  }, restProps), children);
 };
 
 exports.Alert = Alert;