@bundle-stats/ui 3.3.0 → 3.3.1-beta.8

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

@@ -31,4 +31,22 @@ 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/index.js

@@ -4,6 +4,7 @@ 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/summary/summary.js

@@ -13,12 +13,16 @@ 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
@@ -30,7 +34,7 @@ export const Summary = _ref => {
     className: css.items
   }, Array.from(METRIC_COMPONENT_LINKS).filter(_ref2 => {
     let [metricId] = _ref2;
-    return keys.includes(metricId);
+    return keys.includes(getSourceMetricId(metricId));
   }).map(_ref3 => {
     let [metricId, metricOptions] = _ref3;
     return /*#__PURE__*/React.createElement("div", {
@@ -40,6 +44,7 @@ export const Summary = _ref => {
       size: size,
       id: metricId,
       data: _get(data, metricId),
+      budget: _get(budgets, getSourceMetricId(metricId)),
       loading: loading,
       showMetricDescription: true,
       showDelta: showSummaryItemDelta && metricOptions.showDelta !== false
@@ -54,6 +59,7 @@ export const Summary = _ref => {
 Summary.defaultProps = {
   className: '',
   data: null,
+  budgets: null,
   loading: false,
   size: '',
   keys: METRICS_WEBPACK_GENERAL,
@@ -64,12 +70,10 @@ Summary.propTypes = {
   className: PropTypes.string,
   size: PropTypes.string,
   keys: PropTypes.arrayOf(PropTypes.string),
-  data: PropTypes.shape({
-    [PropTypes.string]: PropTypes.shape({
-      baseline: PropTypes.number,
-      current: PropTypes.number
-    })
-  }),
+  data: PropTypes.object,
+  // eslint-disable-line react/forbid-prop-types
+  budgets: PropTypes.object,
+  // eslint-disable-line react/forbid-prop-types
   loading: PropTypes.bool,
   showSummaryItemDelta: PropTypes.bool,
   summaryItemLink: PropTypes.elementType

package/lib-esm/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-esm/components/summary/summary.stories.js

@@ -21,6 +21,33 @@ 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: {
+    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', () => /*#__PURE__*/React.createElement(Summary, {
   keys: METRICS_WEBPACK_ASSETS,
   data: MULTIPLE_JOBS[0].summary

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

@@ -11,6 +11,7 @@ import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
 import { Metric } from '../metric';
 import { Delta } from '../delta';
+import { BudgetInfo } from '../budget-info';
 import css from './summary-item.module.css';
 
 const MetricInfo = _ref => {
@@ -43,6 +44,7 @@ export const SummaryItem = _ref2 => {
     loading,
     showDelta,
     showMetricDescription,
+    budget,
     ...props
   } = _ref2;
   const {
@@ -64,12 +66,18 @@ export const SummaryItem = _ref2 => {
     as: "h3",
     space: "xxxsmall",
     className: css.title
-  }, /*#__PURE__*/React.createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(HoverCard, {
+  }, /*#__PURE__*/React.createElement("span", {
+    className: css.titleLabel
+  }, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(HoverCard, {
     className: css.icon,
     label: /*#__PURE__*/React.createElement(Icon, {
       glyph: "help"
     })
-  }, /*#__PURE__*/React.createElement(MetricInfo, metric))), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
+  }, /*#__PURE__*/React.createElement(MetricInfo, metric)), budget && /*#__PURE__*/React.createElement(BudgetInfo, {
+    className: css.budgetInfo,
+    metricId: id,
+    budgetInsight: budget
+  })), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
     className: css.currentMetric,
     value: current,
     formatter: metric.formatter,
@@ -96,7 +104,8 @@ SummaryItem.defaultProps = {
   size: 'medium',
   loading: false,
   showMetricDescription: false,
-  showDelta: true
+  showDelta: true,
+  budget: undefined
 };
 SummaryItem.propTypes = {
   /** Adopted child class name */
@@ -122,5 +131,12 @@ SummaryItem.propTypes = {
   showMetricDescription: PropTypes.bool,
 
   /** Show delta */
-  showDelta: PropTypes.bool
+  showDelta: PropTypes.bool,
+
+  /** Budget insight data */
+  budget: PropTypes.shape({
+    currentBalue: PropTypes.number,
+    budgetValue: PropTypes.number,
+    failed: PropTypes.bool
+  })
 };

package/lib-esm/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-esm/components/summary-item/summary-item.stories.js

@@ -2,44 +2,56 @@ import React from 'react';
 import { SummaryItem } from './summary-item';
 export default {
   title: 'Components/SummaryItem',
-  component: SummaryItem
-};
-export const Standard = () => /*#__PURE__*/React.createElement(SummaryItem, {
-  loading: false,
-  id: "webpack.totalSizeByTypeALL",
-  data: {
-    current: 120 * 1000,
-    baseline: 100 * 1000
-  }
-});
-export const SizeLarge = () => /*#__PURE__*/React.createElement(SummaryItem, {
-  size: "large",
-  loading: false,
-  id: "webpack.totalSizeByTypeALL",
-  data: {
-    current: 120 * 1000,
-    baseline: 100 * 1000
+  component: SummaryItem,
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: '320px'
+    }
+  }, /*#__PURE__*/React.createElement(Story, null))],
+  args: {
+    loading: false,
+    id: 'webpack.totalSizeByTypeALL',
+    data: {
+      current: 120 * 1000,
+      baseline: 100 * 1000
+    }
   }
-});
-export const ShowMetricDescription = () => /*#__PURE__*/React.createElement(SummaryItem, {
-  loading: false,
-  id: "webpack.totalSizeByTypeALL",
-  data: {
-    current: 120 * 1000,
-    baseline: 100 * 1000
-  },
+};
+
+const Template = args => /*#__PURE__*/React.createElement(SummaryItem, args);
+
+export const Standard = Template.bind();
+export const SizeLarge = Template.bind();
+SizeLarge.args = {
+  size: 'large'
+};
+export const ShowMetricDescription = Template.bind();
+ShowMetricDescription.args = {
   showMetricDescription: true
-});
-export const ShowDeltaFalse = () => /*#__PURE__*/React.createElement(SummaryItem, {
-  loading: false,
-  id: "webpack.totalSizeByTypeALL",
-  data: {
-    current: 120 * 1000,
-    baseline: 0
-  },
+};
+export const ShowDeltaFalse = Template.bind();
+ShowDeltaFalse.args = {
   showDelta: false
-});
-export const Loading = () => /*#__PURE__*/React.createElement(SummaryItem, {
-  loading: true,
-  id: "webpack.totalSizeByTypeALL"
-});
+};
+export const BudgetError = Template.bind();
+BudgetError.args = {
+  showMetricDescription: true,
+  budget: {
+    currentValue: 120 * 1000,
+    budgetValue: 100 * 1000,
+    failed: true
+  }
+};
+export const BudgetSuccess = Template.bind();
+BudgetSuccess.args = {
+  showMetricDescription: true,
+  budget: {
+    currentValue: 120 * 1000,
+    budgetValue: 120 * 1024,
+    failed: false
+  }
+};
+export const Loading = Template.bind();
+Loading.args = {
+  loading: true
+};

package/lib-esm/constants.js

@@ -25,7 +25,7 @@ export const SECTION_URLS = {
 export const ASSETS_SIZES_FILE_TYPE_MAP = FILE_TYPES.reduce((agg, fileType) => ({ ...agg,
   [`webpack.sizes.totalSizeByType${fileType}`]: fileType
 }), {});
-export const METRICS_WEBPACK_GENERAL = ['webpack.totalSizeByTypeALL', 'webpack.totalInitialSizeJS', 'webpack.totalInitialSizeCSS', 'webpack.cacheInvalidation'];
-export const METRICS_WEBPACK_ASSETS = ['webpack.assetCount', 'webpack.chunkCount'];
-export const METRICS_WEBPACK_MODULES = ['webpack.moduleCount', 'webpack.duplicateModulesCount', 'webpack.duplicateCode'];
-export const METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];
+export const METRICS_WEBPACK_GENERAL = ['totalSizeByTypeALL', 'totalInitialSizeJS', 'totalInitialSizeCSS', 'cacheInvalidation'];
+export const METRICS_WEBPACK_ASSETS = ['assetCount', 'chunkCount'];
+export const METRICS_WEBPACK_MODULES = ['moduleCount', 'duplicateModulesCount', 'duplicateCode'];
+export const METRICS_WEBPACK_PACKAGES = ['packageCount', 'duplicatePackagesCount'];

package/lib-esm/ui/alert/alert.js

@@ -1,3 +1,5 @@
+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 from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -7,13 +9,14 @@ export const Alert = props => {
   const {
     className,
     kind,
-    children
+    children,
+    ...restProps
   } = props;
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
     padding: ['xsmall', 'small'],
     outline: true,
     className: cx(css.root, className, css[kind])
-  }, children);
+  }, restProps), children);
 };
 Alert.propTypes = {
   className: PropTypes.string,

package/lib-esm/ui/icon/icon.js

@@ -5,11 +5,13 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import css from './icon.module.css';
 const ICONS = {
+  ALERT_CIRCLE: 'alert-circle',
   ARROW: 'arrow',
   ARROW_RIGHT_CIRLCE: 'arrow-right-circle',
   CANCEL: 'cancel',
   CLOSE: 'close',
   CLOCK: 'clock',
+  CHECK_CIRCLE: 'check-circle',
   COMMIT: 'commit',
   FILTER: 'filter',
   HELP: 'help',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.3.0",
+  "version": "3.3.1-beta.8",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -37,7 +37,7 @@
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
     "@babel/cli": "7.17.6",
-    "@babel/core": "7.17.5",
+    "@babel/core": "7.17.7",
     "@babel/plugin-proposal-class-properties": "7.16.7",
     "@babel/preset-env": "7.16.11",
     "@babel/preset-react": "7.16.7",
@@ -54,7 +54,7 @@
     "babel-jest": "27.5.1",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.5.1",
+    "chromatic": "6.5.3",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
     "core-js": "3.20.2",
@@ -67,7 +67,7 @@
     "jest": "27.5.1",
     "jest-date-mock": "1.0.8",
     "lodash": "4.17.21",
-    "postcss": "8.4.7",
+    "postcss": "8.4.12",
     "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -76,21 +76,21 @@
     "rimraf": "3.0.2"
   },
   "peerDependencies": {
-    "classnames": "2.2.6",
-    "core-js": "3.20.2",
-    "lodash": "4.17.21",
-    "prop-types": "15.7.2",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-router-dom": "5.3.0"
+    "classnames": "^2.0.0",
+    "core-js": "^3.0.0",
+    "lodash": "^4.0.0",
+    "prop-types": "^15.0.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.3.0",
+    "@bundle-stats/utils": "^3.3.1-beta.8",
     "ariakit": "2.0.0-alpha.19",
     "date-fns": "2.28.0",
     "modern-css-reset": "1.4.0",
     "query-string": "7.1.1",
     "use-query-params": "1.2.3"
   },
-  "gitHead": "deb44e2ce6e24626147917c578ade82cf8ad36b6"
+  "gitHead": "f9c5ac2bd0cd6019e8a32586fe4c23b38757efe9"
 }

package/src/app/app.jsx

@@ -47,7 +47,7 @@ const Layout = ({ jobs, version, ...props }) => (
 );
 
 Layout.propTypes = {
-  jobs: PropTypes.arrayOf(PropTypes.object),
+  jobs: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   version: PropTypes.string,
 };
 
@@ -63,7 +63,7 @@ const JobsProvider = ({ jobs, ...restProps }) => {
 };
 
 JobsProvider.propTypes = {
-  jobs: PropTypes.arrayOf(PropTypes.object).isRequired,
+  jobs: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
 };
 
 const OverviewContent = () => {

package/src/app/header/header.jsx

@@ -16,7 +16,7 @@ export const Header = ({ className, jobs }) => (
 
 Header.propTypes = {
   className: PropTypes.string,
-  jobs: PropTypes.arrayOf(PropTypes.object),
+  jobs: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
 };
 
 Header.defaultProps = {

package/src/components/bundle-assets/bundle-assets.jsx

@@ -146,7 +146,7 @@ RowHeader.propTypes = {
     isChunk: PropTypes.bool,
     isInitial: PropTypes.bool,
     isEntry: PropTypes.bool,
-    runs: PropTypes.arrayOf(PropTypes.object),
+    runs: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   }).isRequired,
   chunks: PropTypes.arrayOf(
     PropTypes.shape({