@bundle-stats/ui 3.4.0-beta.0 → 4.0.0-alpha.9

package/lib-esm/app/app.js

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 import React, { useContext, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
@@ -8,7 +8,6 @@ import { METRICS_WEBPACK_ASSETS, METRICS_WEBPACK_GENERAL, METRICS_WEBPACK_MODULE
 import { Box } from '../layout/box';
 import { Container } from '../ui/container';
 import { DuplicatePackagesWarning } from '../components/duplicate-packages-warning';
-import { BudgetInsights } from '../components/budget-insights';
 import { Summary } from '../components/summary';
 import { BundleAssets } from '../components/bundle-assets';
 import { BundleAssetsTotalsChartBars } from '../components/bundle-assets-totals-chart-bars';
@@ -84,8 +83,6 @@ JobsProvider.propTypes = {
 };
 
 const OverviewContent = () => {
-  var _jobs$0$insights, _jobs$0$insights$webp;
-
   const {
     jobs
   } = useContext(JobsContext);
@@ -95,15 +92,10 @@ const OverviewContent = () => {
   const duplicatePackagesInsights = Boolean(duplicatePackagesCount.current || duplicatePackagesCount.baseline);
   return /*#__PURE__*/React.createElement(Stack, {
     space: "medium"
-  }, duplicatePackagesInsights && /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
-    space: "small"
-  }, /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
+  }, duplicatePackagesInsights && /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
     duplicatePackagesCount: duplicatePackagesCount,
     showDelta: jobs.length > 1
-  }), /*#__PURE__*/React.createElement(BudgetInsights, {
-    source: "webpack",
-    budgets: (_jobs$0$insights = jobs[0].insights) == null ? void 0 : (_jobs$0$insights$webp = _jobs$0$insights.webpack) == null ? void 0 : _jobs$0$insights$webp.budgets
-  }))), /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
+  })), /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
     space: "small"
   }, /*#__PURE__*/React.createElement(TotalSizeTypeTitle, null), /*#__PURE__*/React.createElement(BundleAssetsTotalsChartBars, {
     jobs: jobs
@@ -114,7 +106,7 @@ const OverviewContent = () => {
 };
 
 const AssetsContent = () => {
-  var _jobs$, _jobs$0$insights2, _jobs$0$insights2$web;
+  var _jobs$;
 
   const [bundleStatsState, bundleStatsSetState] = useComponentQueryState(COMPONENT.BUNDLE_ASSETS);
   const {
@@ -125,7 +117,6 @@ const AssetsContent = () => {
   }, /*#__PURE__*/React.createElement(Summary, {
     keys: METRICS_WEBPACK_ASSETS,
     data: jobs == null ? void 0 : (_jobs$ = jobs[0]) == null ? void 0 : _jobs$.summary,
-    budgets: (_jobs$0$insights2 = jobs[0].insights) == null ? void 0 : (_jobs$0$insights2$web = _jobs$0$insights2.webpack) == null ? void 0 : _jobs$0$insights2$web.budgets,
     showSummaryItemDelta: (jobs == null ? void 0 : jobs.length) !== 1
   }), /*#__PURE__*/React.createElement(Box, {
     outline: true
@@ -136,7 +127,7 @@ const AssetsContent = () => {
 };
 
 const ModulesContent = () => {
-  var _jobs$2, _jobs$0$insights3, _jobs$0$insights3$web;
+  var _jobs$2;
 
   const [bundleModulesState, bundleModulesSetState] = useComponentQueryState(COMPONENT.BUNDLE_MODULES);
   const {
@@ -147,7 +138,6 @@ const ModulesContent = () => {
   }, /*#__PURE__*/React.createElement(Summary, {
     keys: METRICS_WEBPACK_MODULES,
     data: jobs == null ? void 0 : (_jobs$2 = jobs[0]) == null ? void 0 : _jobs$2.summary,
-    budgets: (_jobs$0$insights3 = jobs[0].insights) == null ? void 0 : (_jobs$0$insights3$web = _jobs$0$insights3.webpack) == null ? void 0 : _jobs$0$insights3$web.budgets,
     showSummaryItemDelta: (jobs == null ? void 0 : jobs.length) !== 1
   }), /*#__PURE__*/React.createElement(Box, {
     outline: true
@@ -158,7 +148,7 @@ const ModulesContent = () => {
 };
 
 const PackagesContent = () => {
-  var _jobs$3, _jobs$0$insights4, _jobs$0$insights4$web;
+  var _jobs$3;
 
   const [bundlePackagesState, bundlePackagesSetState] = useComponentQueryState(COMPONENT.BUNDLE_PACKAGES);
   const {
@@ -169,7 +159,6 @@ const PackagesContent = () => {
   }, /*#__PURE__*/React.createElement(Summary, {
     keys: METRICS_WEBPACK_PACKAGES,
     data: jobs == null ? void 0 : (_jobs$3 = jobs[0]) == null ? void 0 : _jobs$3.summary,
-    budgets: (_jobs$0$insights4 = jobs[0].insights) == null ? void 0 : (_jobs$0$insights4$web = _jobs$0$insights4.webpack) == null ? void 0 : _jobs$0$insights4$web.budgets,
     showSummaryItemDelta: (jobs == null ? void 0 : jobs.length) !== 1
   }), /*#__PURE__*/React.createElement(Box, {
     outline: true
@@ -181,8 +170,6 @@ const PackagesContent = () => {
 };
 
 const AppComponent = _ref3 => {
-  var _jobs$0$insights5, _jobs$0$insights5$web;
-
   let {
     version,
     jobs
@@ -207,7 +194,6 @@ const AppComponent = _ref3 => {
     size: "large",
     keys: METRICS_WEBPACK_GENERAL,
     data: jobs[0].summary,
-    budgets: (_jobs$0$insights5 = jobs[0].insights) == null ? void 0 : (_jobs$0$insights5$web = _jobs$0$insights5.webpack) == null ? void 0 : _jobs$0$insights5$web.budgets,
     showSummaryItemDelta: jobs.length !== 1
   })), /*#__PURE__*/React.createElement(Container, {
     className: css.tabsContainer

package/lib-esm/app/app.stories.js

@@ -28,28 +28,7 @@ const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE], {
   webpack: {
     budgets: [{
       metric: 'totalSizeByTypeALL',
-      value: 2 * 1024 * 1024
-    }, {
-      metric: 'totalInitialSizeJS',
-      value: 512 * 1024
-    }, {
-      metric: 'totalInitialSizeCSS',
-      value: 50 * 1024
-    }, {
-      metric: 'chunkCount',
-      value: 50
-    }, {
-      metric: 'moduleCount',
-      value: 2000
-    }, {
-      metric: 'duplicatePackagesCount',
-      value: 5
-    }, {
-      metric: 'sizes.totalSizeByTypeJS',
-      value: 2 * 1024 * 1024
-    }, {
-      metric: 'sizes.totalSizeByTypeCSS',
-      value: 20 * 1024
+      value: 1024 * 1024
     }]
   }
 });

package/lib-esm/assets/icons.svg

@@ -1,8 +1,4 @@
 <svg width="16" height="16">
-<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle" viewBox="0 0 24 24" id="alert-circle" xmlns="http://www.w3.org/2000/svg">
-<circle cx="12" cy="12" r="10"/>
-<path d="M12 8v4M12 16h.01"/>
-</symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down" id="arrow" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 5v14M19 12l-7 7-7-7"/>
 </symbol>
@@ -14,10 +10,6 @@
 <circle cx="12" cy="12" r="10"/>
 <path d="M15 9l-6 6M9 9l6 6"/>
 </symbol>
-<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle" viewBox="0 0 24 24" id="check-circle" xmlns="http://www.w3.org/2000/svg">
-<path d="M22 11.08V12a10 10 0 11-5.93-9.14"/>
-<path d="M22 4L12 14.01l-3-3"/>
-</symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock" id="clock" xmlns="http://www.w3.org/2000/svg">
 <circle cx="12" cy="12" r="10"/>
 <path d="M12 6v6l4 2"/>

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

@@ -1,7 +1,7 @@
 import _map from "lodash/map";
 import _find from "lodash/find";
 
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 import React from 'react';
 import PropTypes from 'prop-types';

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

@@ -1,7 +1,7 @@
 import _map from "lodash/map";
 import _get from "lodash/get";
 
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';

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

@@ -1,4 +1,5 @@
 import _get from "lodash/get";
+import "core-js/modules/es.array.includes.js";
 import { ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, getFileType } from '@bundle-stats/utils';
 import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-assets.constants';
 export const addRowAssetFlags = row => {

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

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';

package/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js

@@ -3,7 +3,7 @@ import _max from "lodash/max";
 import _map from "lodash/map";
 import _get from "lodash/get";
 
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 import React from 'react';
 import PropTypes from 'prop-types';

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

@@ -1,51 +1,35 @@
-import _get from "lodash/get";
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _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); }
-
-import React, { useCallback, useMemo } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { getBundleAssetsFileTypeComponentLink } from '@bundle-stats/utils';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 import { ASSETS_SIZES_FILE_TYPE_MAP } from '../../constants';
-import { FlexStack } from '../../layout/flex-stack';
 import { MetricsTable } from '../metrics-table';
 import { ComponentLink } from '../component-link';
-import { BudgetInfo } from '../budget-info';
-import css from './bundle-assets-totals-table.module.css';
 export const BundleAssetsTotalsTable = _ref => {
-  var _jobs$0$insights, _jobs$0$insights$webp, _jobs$0$insights$webp2;
-
   let {
     className,
     jobs,
     customComponentLink: CustomComponentLink,
     ...restProps
   } = _ref;
-  const items = useMemo(() => webpack.compareBySection.sizes(jobs), [jobs]);
-  const budgets = (_jobs$0$insights = jobs[0].insights) == null ? void 0 : (_jobs$0$insights$webp = _jobs$0$insights.webpack) == null ? void 0 : (_jobs$0$insights$webp2 = _jobs$0$insights$webp.budgets) == null ? void 0 : _jobs$0$insights$webp2.data;
-  const renderRowHeader = useCallback(item => {
+  const items = webpack.compareBySection.sizes(jobs);
+
+  const renderRowHeader = item => {
     const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
     const {
       section,
       title,
       params
     } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
-    const [_, ...metricSlugs] = item.key.split('.');
-    const metricKey = metricSlugs.join('.');
-
-    const budget = _get(budgets, metricKey);
-
     return /*#__PURE__*/React.createElement(CustomComponentLink, {
       section: section,
       title: title,
       params: params
-    }, /*#__PURE__*/React.createElement(FlexStack, {
-      space: "xxxsmall",
-      className: css.itemTitleText
-    }, /*#__PURE__*/React.createElement("span", null, item.label), budget && /*#__PURE__*/React.createElement(BudgetInfo, {
-      budgetInsight: budget
-    })));
-  }, [CustomComponentLink]);
+    }, item.label);
+  };
+
   return /*#__PURE__*/React.createElement(MetricsTable, _extends({
     className: className,
     runs: jobs,

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

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

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

@@ -31,22 +31,4 @@ EmptyBaseline.args = {
   jobs: createJobs([{
     webpack: currentStats
   }, null])
-};
-export const WithBudgets = Template.bind();
-WithBudgets.args = {
-  jobs: createJobs([{
-    webpack: currentStats
-  }, {
-    webpack: baselineStats
-  }], {
-    webpack: {
-      budgets: [{
-        metric: 'sizes.totalSizeByTypeJS',
-        value: 2 * 1024 * 1024
-      }, {
-        metric: 'sizes.totalSizeByTypeCSS',
-        value: 20 * 1024
-      }]
-    }
-  })
 };

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

@@ -2,7 +2,7 @@ import _map from "lodash/map";
 import _isEmpty from "lodash/isEmpty";
 import _get from "lodash/get";
 
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';

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

@@ -1,7 +1,7 @@
 import _map from "lodash/map";
 import _uniqBy from "lodash/uniqBy";
 
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';

package/lib-esm/components/bundle-packages/bundle-packages.js

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';

package/lib-esm/components/bundle-packages/bundle-packages.utils.js

@@ -1,6 +1,7 @@
 import _uniq from "lodash/uniq";
 import _flatten from "lodash/flatten";
 import _get from "lodash/get";
+import "core-js/modules/es.array.includes.js";
 import { PACKAGE_FILTERS } from '@bundle-stats/utils';
 import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-packages.constants'; // Get a list of duplicate packages across jobs
 

package/lib-esm/components/bundle-packages/index.js

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';

package/lib-esm/components/component-link.js

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 import React from 'react';
 import PropTypes from 'prop-types';

package/lib-esm/components/index.js

@@ -4,7 +4,6 @@ export { BundleAssetsTotalsTable } from './bundle-assets-totals-table';
 export { BundleAssetsTotalsChartBars } from './bundle-assets-totals-chart-bars';
 export { BundlePackages } from './bundle-packages';
 export { BundleModules } from './bundle-modules';
-export { BudgetInsights } from './budget-insights';
 export { ComponentLink } from './component-link';
 export { DuplicatePackagesWarning } from './duplicate-packages-warning';
 export { Delta } from './delta';

package/lib-esm/components/job-meta/job-meta.js

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 import React from 'react';
 import PropTypes from 'prop-types';

package/lib-esm/components/job-name/job-name.js

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 import React from 'react';
 import PropTypes from 'prop-types';

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

@@ -2,7 +2,7 @@ import _sum from "lodash/sum";
 import _isEmpty from "lodash/isEmpty";
 import _get from "lodash/get";
 
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';

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

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 import React from 'react';
 import PropTypes from 'prop-types';

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

@@ -2,7 +2,7 @@ import _noop from "lodash/noop";
 import _find from "lodash/find";
 import _isEmpty from "lodash/isEmpty";
 
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 import React from 'react';
 import PropTypes from 'prop-types';

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

@@ -1,7 +1,8 @@
 import _get from "lodash/get";
 
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
+import "core-js/modules/es.array.includes.js";
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -12,16 +13,12 @@ import { FlexStack } from '../../layout/flex-stack';
 import { ComponentLink } from '../component-link';
 import { SummaryItem } from '../summary-item';
 import css from './summary.module.css';
-
-const getSourceMetricId = fullMetricId => fullMetricId.split('.').slice(1).join('.');
-
 export const Summary = _ref => {
   let {
     className,
     size,
     keys,
     data,
-    budgets,
     loading,
     showSummaryItemDelta,
     summaryItemLink: SummaryItemCustomLink
@@ -33,7 +30,7 @@ export const Summary = _ref => {
     className: css.items
   }, Array.from(METRIC_COMPONENT_LINKS).filter(_ref2 => {
     let [metricId] = _ref2;
-    return keys.includes(getSourceMetricId(metricId));
+    return keys.includes(metricId);
   }).map(_ref3 => {
     let [metricId, metricOptions] = _ref3;
     return /*#__PURE__*/React.createElement(SummaryItem, _extends({
@@ -44,7 +41,6 @@ export const Summary = _ref => {
       size: size,
       id: metricId,
       data: _get(data, metricId),
-      budget: _get(budgets, ['data', getSourceMetricId(metricId)]),
       loading: loading,
       showMetricDescription: true,
       showDelta: showSummaryItemDelta && metricOptions.showDelta !== false
@@ -54,7 +50,6 @@ export const Summary = _ref => {
 Summary.defaultProps = {
   className: '',
   data: null,
-  budgets: null,
   loading: false,
   size: '',
   keys: METRICS_WEBPACK_GENERAL,
@@ -65,10 +60,12 @@ Summary.propTypes = {
   className: PropTypes.string,
   size: PropTypes.string,
   keys: PropTypes.arrayOf(PropTypes.string),
-  data: PropTypes.object,
-  // eslint-disable-line react/forbid-prop-types
-  budgets: PropTypes.object,
-  // eslint-disable-line react/forbid-prop-types
+  data: PropTypes.shape({
+    [PropTypes.string]: PropTypes.shape({
+      baseline: PropTypes.number,
+      current: PropTypes.number
+    })
+  }),
   loading: PropTypes.bool,
   showSummaryItemDelta: PropTypes.bool,
   summaryItemLink: PropTypes.elementType

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

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 import React from 'react';
 import { storiesOf } from '@storybook/react';
@@ -21,61 +21,6 @@ stories.addDecorator(getWrapperDecorator());
 stories.add('default', () => /*#__PURE__*/React.createElement(Summary, {
   data: MULTIPLE_JOBS[0].summary
 }));
-stories.add('budgets', () => /*#__PURE__*/React.createElement(Summary, {
-  data: MULTIPLE_JOBS[0].summary,
-  budgets: {
-    data: {
-      totalSizeByTypeALL: {
-        type: 'ERROR',
-        message: {
-          text: 'Metric is over the budget',
-          md: 'Metric is over the budget'
-        },
-        data: {
-          currentValue: MULTIPLE_JOBS[0].summary.webpack.totalSizeByTypeALL.current,
-          budgetValue: 1024 * 1024,
-          failed: false
-        }
-      },
-      totalInitialSizeJS: {
-        type: 'WARNING',
-        message: {
-          text: 'Metric is over the budget',
-          md: 'Metric is over the budget'
-        },
-        data: {
-          currentValue: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeJS.current,
-          budgetValue: 512 * 1024,
-          failed: true
-        }
-      },
-      totalInitialSizeCSS: {
-        type: 'SUCCESS',
-        message: {
-          text: 'Metric is under the budget',
-          md: 'Metric is under the budget'
-        },
-        data: {
-          currentValue: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeCSS.current,
-          budgetValue: 50 * 1024,
-          failed: false
-        }
-      },
-      chunkCount: {
-        type: 'SUCCESS',
-        message: {
-          text: 'Metric is under the budget',
-          md: 'Metric is under the budget'
-        },
-        data: {
-          currentValue: MULTIPLE_JOBS[0].summary.webpack.chunkCount.current,
-          budgetValue: 50,
-          failed: false
-        }
-      }
-    }
-  }
-}));
 stories.add('custom keys', () => /*#__PURE__*/React.createElement(Summary, {
   keys: METRICS_WEBPACK_ASSETS,
   data: MULTIPLE_JOBS[0].summary

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

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -6,11 +6,9 @@ import cx from 'classnames';
 import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
 import { HoverCard } from '../../ui/hover-card';
 import { Skeleton } from '../../ui/skeleton';
-import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { Metric } from '../metric';
 import { Delta } from '../delta';
-import { BudgetInfo } from '../budget-info';
 import css from './summary-item.module.css';
 
 const MetricInfo = _ref => {
@@ -44,7 +42,6 @@ export const SummaryItem = _ref2 => {
     loading,
     showDelta,
     showMetricDescription,
-    budget,
     ...props
   } = _ref2;
   const {
@@ -62,16 +59,11 @@ export const SummaryItem = _ref2 => {
     space: "xxsmall",
     as: Component,
     className: rootClassName
-  }, props), /*#__PURE__*/React.createElement(FlexStack, {
-    space: "xxxsmall",
-    as: "h3",
+  }, props), /*#__PURE__*/React.createElement("h3", {
     className: css.title
   }, showMetricDescriptionTooltip ? /*#__PURE__*/React.createElement(HoverCard, {
     label: metric.label
-  }, /*#__PURE__*/React.createElement(MetricInfo, metric)) : metric.label, budget && /*#__PURE__*/React.createElement(BudgetInfo, {
-    className: css.budgetInfo,
-    budgetInsight: budget
-  })), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
+  }, /*#__PURE__*/React.createElement(MetricInfo, metric)) : metric.label), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
     className: css.currentMetric,
     value: current,
     formatter: metric.formatter,
@@ -98,8 +90,7 @@ SummaryItem.defaultProps = {
   size: 'medium',
   loading: false,
   showMetricDescription: false,
-  showDelta: true,
-  budget: undefined
+  showDelta: true
 };
 SummaryItem.propTypes = {
   /** Adopted child class name */
@@ -125,9 +116,5 @@ SummaryItem.propTypes = {
   showMetricDescription: PropTypes.bool,
 
   /** Show delta */
-  showDelta: PropTypes.bool,
-
-  /** Budget insight data */
-  budget: PropTypes.object // eslint-disable-line react/forbid-prop-types
-
+  showDelta: PropTypes.bool
 };

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

@@ -1,10 +1,4 @@
-.root {
-  position: relative;
-  padding-right: var(--space-xlarge);
-}
-
 .title {
-  align-items: center;
   color: var(--color-text-ultra-light);
   font-weight: bold;
   font-size: var(--size-xsmall);