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

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'];
-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'];
+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.2.9",
+  "version": "3.4.0-alpha.1",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -85,12 +85,12 @@
     "react-router-dom": "5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.2.9",
+    "@bundle-stats/utils": "^3.4.0-alpha.1",
     "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": "f2fe3a81b73db8cd9e65f145f1b420c78f74f186"
+  "gitHead": "a7ba8010b047028c4e56e407719616fde7d8ea88"
 }

package/src/app/app.jsx

@@ -13,6 +13,7 @@ import {
 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';
@@ -77,10 +78,13 @@ const OverviewContent = () => {
     <Stack space="medium">
       {duplicatePackagesInsights && (
         <Container>
-          <DuplicatePackagesWarning
-            duplicatePackagesCount={duplicatePackagesCount}
-            showDelta={jobs.length > 1}
-          />
+          <Stack space="small">
+            <DuplicatePackagesWarning
+              duplicatePackagesCount={duplicatePackagesCount}
+              showDelta={jobs.length > 1}
+            />
+            <BudgetInsights source="webpack" budgets={jobs[0].insights?.webpack?.budgets} />
+          </Stack>
         </Container>
       )}
       <Container>
@@ -104,6 +108,7 @@ const AssetsContent = () => {
         <Summary
           keys={METRICS_WEBPACK_ASSETS}
           data={jobs?.[0]?.summary}
+          budgets={jobs[0].insights?.webpack?.budgets}
           showSummaryItemDelta={jobs?.length !== 1}
         />
         <Box outline>
@@ -126,6 +131,7 @@ const ModulesContent = () => {
         <Summary
           keys={METRICS_WEBPACK_MODULES}
           data={jobs?.[0]?.summary}
+          budgets={jobs[0].insights?.webpack?.budgets}
           showSummaryItemDelta={jobs?.length !== 1}
         />
         <Box outline>
@@ -148,6 +154,7 @@ const PackagesContent = () => {
         <Summary
           keys={METRICS_WEBPACK_PACKAGES}
           data={jobs?.[0]?.summary}
+          budgets={jobs[0].insights?.webpack?.budgets}
           showSummaryItemDelta={jobs?.length !== 1}
         />
         <Box outline>
@@ -177,10 +184,10 @@ const AppComponent = ({ version, jobs }) => {
             size="large"
             keys={METRICS_WEBPACK_GENERAL}
             data={jobs[0].summary}
+            budgets={jobs[0].insights?.webpack?.budgets}
             showSummaryItemDelta={jobs.length !== 1}
           />
         </Container>
-
         <Container className={css.tabsContainer}>
           <Tabs className={css.tabs}>
             <NavLink exact to={URLS.OVERVIEW} activeClassName={css.tabActive}>

package/src/assets/icons/alert-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>

package/src/assets/icons/check-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>

package/src/assets/icons.svg

@@ -1,4 +1,8 @@
 <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>
@@ -10,6 +14,10 @@
 <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/src/components/budget-info/budget-info.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { InsightType } from '@bundle-stats/utils';
+import * as budgetsInsightsTransformer from '@bundle-stats/utils/lib-esm/transformers/budgets-insights';
+
+import { Icon } from '../../ui/icon';
+import { Tooltip } from '../../ui/tooltip';
+
+import css from './budget-info.module.css';
+
+const INSIGHT_TYPE_MAP = {
+  [InsightType.SUCCESS]: {
+    className: css.success,
+    glyph: Icon.ICONS.CHECK_CIRCLE,
+  },
+  [InsightType.ERROR]: {
+    className: css.error,
+    glyph: Icon.ICONS.ALERT_CIRCLE,
+  },
+  [InsightType.WARNING]: {
+    className: css.warning,
+    glyph: Icon.ICONS.WARNING,
+  },
+};
+
+export const BudgetInfo = ({ className = '', metricId, budgetInsight }) => {
+  const budgetInsightInfo = budgetsInsightsTransformer.getInfo(metricId, budgetInsight);
+  const { className: insightTypeClassName, glyph } = INSIGHT_TYPE_MAP[budgetInsightInfo.type];
+
+  const rootClassName = cx(css.root, insightTypeClassName, className);
+  const { data: messageData } = budgetInsightInfo.message;
+
+  return (
+    <Tooltip
+      className={rootClassName}
+      title={
+        <>
+          <strong>{messageData.metricLabel}</strong>
+          {` value (`}
+          <strong>{messageData.currentValue}</strong>
+          {`) is ${messageData.diffLabel} `}
+          <strong>{messageData.budgetValue}</strong>
+          {` budget `}
+        </>
+      }
+    >
+      <Icon className={css.icon} glyph={glyph} size="medium" />
+    </Tooltip>
+  );
+};
+
+BudgetInfo.propTypes = {
+  metricId: PropTypes.string.isRequired,
+  budgetInsight: PropTypes.shape({
+    currentValue: PropTypes.number,
+    budgetValue: PropTypes.number,
+    failed: PropTypes.bool,
+  }).isRequired,
+  className: PropTypes.string,
+};
+
+BudgetInfo.defaultProps = {
+  className: '',
+};

package/src/components/budget-info/budget-info.module.css

@@ -0,0 +1,40 @@
+.root {
+  display: inline-block;
+  line-height: 1em;
+}
+
+/* Budget error */
+.error .icon {
+  color: var(--color-danger);
+}
+
+.error .icon:hover,
+.error .icon:focus,
+.error .icon:active
+{
+  color: var(--color-danger-light);
+}
+
+/* Budget success */
+.success .icon {
+  color: var(--color-success);
+}
+
+.success .icon:hover,
+.success .icon:focus,
+.success .icon:active
+{
+  color: var(--color-success-light);
+}
+
+/* Budget warning */
+.warning .icon {
+  color: var(--color-warning-dark);
+}
+
+.warning .icon:hover,
+.warning .icon:focus,
+.warning .icon:active
+{
+  color: var(--color-warning);
+}

package/src/components/budget-info/index.js

@@ -0,0 +1 @@
+export * from './budget-info';