@bundle-stats/ui 3.2.1-beta.9 → 3.3.0-alpha.0

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { BudgetInsights } from '.';
+export default {
+  title: 'Components/BudgetInsights',
+  component: BudgetInsights,
+  decorators: [Story => /*#__PURE__*/React.createElement(MemoryRouter, null, /*#__PURE__*/React.createElement(Story, null))]
+};
+
+const Template = args => /*#__PURE__*/React.createElement(BudgetInsights, args);
+
+export const Default = Template.bind();
+Default.args = {
+  source: 'webpack',
+  budgets: {
+    totalSizeByTypeALL: {
+      value: 2097917,
+      budget: 2097152,
+      overBudget: true
+    },
+    totalInitialSizeJS: {
+      value: 1265645,
+      budget: 524288,
+      overBudget: true
+    },
+    totalInitialSizeCSS: {
+      value: 48866,
+      budget: 51200,
+      overBudget: false
+    },
+    chunkCount: {
+      value: 12,
+      budget: 50,
+      overBudget: false
+    },
+    moduleCount: {
+      value: 1059,
+      budget: 2000,
+      overBudget: false
+    },
+    duplicatePackagesCount: {
+      value: 13,
+      budget: 5,
+      overBudget: true
+    },
+    'sizes.totalSizeByTypeJS': {
+      value: 1981470,
+      budget: 2097152,
+      overBudget: false
+    },
+    'sizes.totalSizeByTypeCSS': {
+      value: 56091,
+      budget: 20480,
+      overBudget: true
+    }
+  }
+};
+export const FailedBudgets = Template.bind();
+FailedBudgets.args = {
+  source: 'webpack',
+  budgets: {
+    totalSizeByTypeALL: {
+      value: 2097917,
+      budget: 2097152,
+      overBudget: true
+    },
+    totalInitialSizeJS: {
+      value: 1265645,
+      budget: 524288,
+      overBudget: true
+    }
+  }
+};
+export const SingleBudget = Template.bind();
+SingleBudget.args = {
+  source: 'webpack',
+  budgets: {
+    totalInitialSizeJS: {
+      value: 524288,
+      budget: 1265645,
+      overBudget: false
+    }
+  }
+};

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

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

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

@@ -1,32 +1,49 @@
-import React from 'react';
+import _get from "lodash/get";
+import React, { useCallback, useMemo } 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;
+
   let {
     className,
     jobs,
     customComponentLink: CustomComponentLink
   } = _ref;
-  const items = webpack.compareBySection.sizes(jobs);
-
-  const renderRowHeader = item => {
+  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$webp.budgets;
+  const renderRowHeader = useCallback(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);
+
+    const metric = webpack.getMetricType(metricKey);
     return /*#__PURE__*/React.createElement(CustomComponentLink, {
       section: section,
       title: title,
       params: params
-    }, item.label);
-  };
-
+    }, /*#__PURE__*/React.createElement(FlexStack, {
+      space: "xxsmall",
+      className: css.itemTitleText
+    }, /*#__PURE__*/React.createElement("span", null, item.label), budget && /*#__PURE__*/React.createElement(BudgetInfo, {
+      budget: budget,
+      metric: metric
+    })));
+  }, [CustomComponentLink]);
   return /*#__PURE__*/React.createElement(MetricsTable, {
     className: className,
     runs: jobs,

package/lib-esm/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-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.js

@@ -1,27 +1,52 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { createJobs } from '@bundle-stats/utils';
 import baselineStats from '../../../__mocks__/webpack-stats.baseline.json';
 import currentStats from '../../../__mocks__/webpack-stats.current.json';
 import { getWrapperDecorator } from '../../stories';
 import { BundleAssetsTotalsTable } from '.';
-const JOBS = createJobs([{
-  webpack: currentStats
-}, {
-  webpack: baselineStats
-}]);
-const [currentJob] = JOBS;
-const stories = storiesOf('Components/BundleAssetsTotalsTable', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
-  jobs: [currentJob]
-}));
-stories.add('multiple jobs', () => /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
-  jobs: JOBS
-}));
-const JOBS_EMPTY_BASELINE = createJobs([{
-  webpack: currentStats
-}, null]);
-stories.add('empty baseline', () => /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
-  jobs: JOBS_EMPTY_BASELINE
-}));
+export default {
+  title: 'Components/BundleAssetsTotalsTable',
+  component: BundleAssetsTotalsTable,
+  decorators: [getWrapperDecorator()]
+};
+
+const Template = args => /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, args);
+
+export const SingleJob = Template.bind();
+SingleJob.args = {
+  jobs: createJobs([{
+    webpack: currentStats
+  }])
+};
+export const MultipleJobs = Template.bind();
+MultipleJobs.args = {
+  jobs: createJobs([{
+    webpack: currentStats
+  }, {
+    webpack: baselineStats
+  }])
+};
+export const EmptyBaseline = Template.bind();
+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/summary/summary.js

@@ -7,76 +7,59 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
 import { METRICS_WEBPACK_GENERAL } from '../../constants';
+import { Icon } from '../../ui/icon';
 import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
 import { ComponentLink } from '../component-link';
 import { SummaryItem } from '../summary-item';
 import css from './summary.module.css';
 
-const CustomSummaryItem = _ref => {
-  let {
-    className,
-    metricOptions,
-    SummaryItemCustomLink,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    padding: ['xsmall', 'small'],
-    className: cx(className, css.summaryItemLink)
-  }, props, {
-    as: SummaryItemCustomLink
-  }, metricOptions.link));
-};
-
-CustomSummaryItem.propTypes = {
-  className: PropTypes.string,
-  metricOptions: PropTypes.shape({
-    link: PropTypes.any // eslint-disable-line react/forbid-prop-types
+const getSourceMetricId = fullMetricId => fullMetricId.split('.').slice(1).join('.');
 
-  }).isRequired,
-  SummaryItemCustomLink: PropTypes.elementType.isRequired
-};
-CustomSummaryItem.defaultProps = {
-  className: ''
-};
-export const Summary = _ref2 => {
+export const Summary = _ref => {
   let {
     className,
     size,
     keys,
     data,
+    budgets,
     loading,
     showSummaryItemDelta,
     summaryItemLink: SummaryItemCustomLink
-  } = _ref2;
+  } = _ref;
   return /*#__PURE__*/React.createElement(Box, {
     outline: true,
     className: cx(css.root, className)
   }, /*#__PURE__*/React.createElement(FlexStack, {
     className: css.items
-  }, Array.from(METRIC_COMPONENT_LINKS).filter(_ref3 => {
-    let [metricId] = _ref3;
-    return keys.includes(metricId);
-  }).map(_ref4 => {
-    let [metricId, metricOptions] = _ref4;
-    return /*#__PURE__*/React.createElement(SummaryItem, {
-      as: CustomSummaryItem,
-      className: css.item,
-      metricOptions: metricOptions,
-      SummaryItemCustomLink: SummaryItemCustomLink,
-      size: size,
+  }, Array.from(METRIC_COMPONENT_LINKS).filter(_ref2 => {
+    let [metricId] = _ref2;
+    return keys.includes(getSourceMetricId(metricId));
+  }).map(_ref3 => {
+    let [metricId, metricOptions] = _ref3;
+    return /*#__PURE__*/React.createElement("div", {
       key: metricId,
+      className: css.item
+    }, /*#__PURE__*/React.createElement(SummaryItem, {
+      size: size,
       id: metricId,
       data: _get(data, metricId),
+      budget: _get(budgets, getSourceMetricId(metricId)),
       loading: loading,
       showMetricDescription: true,
       showDelta: showSummaryItemDelta && metricOptions.showDelta !== false
-    });
+    }), !loading && /*#__PURE__*/React.createElement(SummaryItemCustomLink, _extends({}, metricOptions.link, {
+      className: css.readMore
+    }), /*#__PURE__*/React.createElement(Icon, {
+      className: css.readMoreIcon,
+      glyph: Icon.ICONS.ARROW_RIGHT_CIRLCE
+    })));
   })));
 };
 Summary.defaultProps = {
   className: '',
   data: null,
+  budgets: null,
   loading: false,
   size: '',
   keys: METRICS_WEBPACK_GENERAL,
@@ -87,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

@@ -3,35 +3,52 @@
   overflow: auto;
 }
 
-.items {}
-
 .item {
+  padding: var(--space-small);
   flex: 1 0 25%; /* force equal sizes */
   position: relative;
   z-index: 1;
 }
 
-.item:focus-visible {
-  background: var(--color-highlight);
-  outline: none;
-}
-
 .item::before {
   content: '';
   display: block;
   width: 1px;
   position: absolute;
   left: -1px;
-  top: var(--space-xsmall);
-  bottom: var(--space-xsmall);
+  top: var(--space-small);
+  bottom: var(--space-small);
   background: var(--color-outline);
 }
 
-.item:hover {
-  background: var(--color-highlight);
+.readMore {
+  display: block;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: var(--space-small);
+  color: var(--color-text-ultra-light);
+  transition: var(--transition-out);
+}
+
+.readMore:hover,
+.readMore:focus {
+  color: var(--color-primary);
+  transition: var(--transition-in);
+}
+
+.readMoreIcon {
+  display: block;
+}
+
+/** hover state */
+.readMore {
+  opacity: 0;
 }
 
-.summaryItemLink {
-  color: inherit;
-  text-decoration: none;
+.item:hover .readMore,
+.item:active .readMore,
+.item:focus .readMore {
+  opacity: 1;
+  transition: var(--transition-in);
 }

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: {
+        value: MULTIPLE_JOBS[0].summary.webpack.totalSizeByTypeALL,
+        budget: 1024 * 1024,
+        overBudget: false
+      },
+      totalInitialSizeJS: {
+        value: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeJS,
+        budget: 512 * 1024,
+        overBudget: true
+      },
+      totalInitialSizeCSS: {
+        value: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeCSS,
+        budget: 50 * 1024,
+        overBudget: false
+      },
+      chunkCount: {
+        value: MULTIPLE_JOBS[0].summary.webpack.chunkCount,
+        budget: 50,
+        overBudget: 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

@@ -10,9 +10,10 @@ 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 => {
+const MetricInfoPopover = _ref => {
   let {
     description,
     url
@@ -32,11 +33,11 @@ const MetricInfo = _ref => {
   }, "Read more")));
 };
 
-MetricInfo.propTypes = {
+MetricInfoPopover.propTypes = {
   description: PropTypes.string.isRequired,
   url: PropTypes.string
 };
-MetricInfo.defaultProps = {
+MetricInfoPopover.defaultProps = {
   url: ''
 };
 export const SummaryItem = _ref2 => {
@@ -49,6 +50,7 @@ export const SummaryItem = _ref2 => {
     loading,
     showDelta,
     showMetricDescription,
+    budget,
     ...props
   } = _ref2;
   const {
@@ -61,7 +63,7 @@ export const SummaryItem = _ref2 => {
   const metric = getGlobalMetricType(id);
   const runInfo = getMetricRunInfo(metric, current, baseline);
   const showMetricDescriptionTooltip = showMetricDescription && (metric == null ? void 0 : metric.description);
-  const rootClassName = cx(css.root, className, css[size], showMetricDescription && css.showMetricDescription, showMetricDescriptionTooltip && css.showMetricDescription, showDelta && css.showDelta);
+  const rootClassName = cx(css.root, className, css[size], showDelta && css.showDelta);
   return /*#__PURE__*/React.createElement(Stack, _extends({
     space: "xxsmall",
     as: Component,
@@ -70,10 +72,16 @@ export const SummaryItem = _ref2 => {
     as: "h3",
     space: "xxxsmall",
     className: css.title
-  }, /*#__PURE__*/React.createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(Popover, {
+  }, /*#__PURE__*/React.createElement("span", {
+    className: css.titleLabel
+  }, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(Popover, {
     className: css.icon,
     icon: "help"
-  }, /*#__PURE__*/React.createElement(MetricInfo, metric))), /*#__PURE__*/React.createElement(Stack, null, !loading ? /*#__PURE__*/React.createElement(Metric, {
+  }, /*#__PURE__*/React.createElement(MetricInfoPopover, metric)), budget && /*#__PURE__*/React.createElement(BudgetInfo, {
+    className: css.budgetInfo,
+    metric: metric,
+    budget: budget
+  })), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
     className: css.currentMetric,
     value: current,
     formatter: metric.formatter,
@@ -83,13 +91,13 @@ export const SummaryItem = _ref2 => {
     className: css.delta,
     displayValue: runInfo.displayDeltaPercentage,
     deltaType: runInfo.deltaType
-  })) : /*#__PURE__*/React.createElement(Skeleton, {
-    className: cx(css.currentMetric, css.loading)
-  }), !loading ? /*#__PURE__*/React.createElement(Metric, {
+  })), /*#__PURE__*/React.createElement(Metric, {
     className: css.baselineMetric,
     value: baseline,
     formatter: metric.formatter
-  }) : /*#__PURE__*/React.createElement(Skeleton, {
+  })) : /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Skeleton, {
+    className: cx(css.currentMetric, css.loading)
+  }), /*#__PURE__*/React.createElement(Skeleton, {
     className: cx(css.baselineMetric, css.loading)
   })));
 };
@@ -100,7 +108,8 @@ SummaryItem.defaultProps = {
   size: 'medium',
   loading: false,
   showMetricDescription: false,
-  showDelta: true
+  showDelta: true,
+  budget: undefined
 };
 SummaryItem.propTypes = {
   /** Adopted child class name */
@@ -126,5 +135,12 @@ SummaryItem.propTypes = {
   showMetricDescription: PropTypes.bool,
 
   /** Show delta */
-  showDelta: PropTypes.bool
+  showDelta: PropTypes.bool,
+
+  /** Budget data */
+  budget: PropTypes.shape({
+    value: PropTypes.number,
+    budget: PropTypes.number,
+    overBudget: PropTypes.bool
+  })
 };

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

@@ -1,5 +1,9 @@
+.root {
+  position: relative;
+  padding-right: var(--space-xlarge);
+}
+
 .title {
-  margin: 0;
   color: var(--color-text-ultra-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
@@ -8,6 +12,10 @@
   white-space: nowrap;
 }
 
+.titleLabel {
+  flex: 0 0 auto;
+}
+
 .readMoreBtn {
   appearance: none;
   padding: 0;
@@ -27,24 +35,30 @@
   text-decoration: none;
 }
 
+.budgetInfo {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
 .currentMetric {
   display: block;
   color: var(--color-heading);
   font-size: var(--size-large);
-  line-height: 1.3;
+  line-height: var(--space-medium);
   white-space: nowrap;
   font-weight: bold;
 }
 
 .delta {
-  margin: var(--space-xxxsmall) 0 0;
   font-size: var(--size-small);
+  line-height: var(--space-medium);
 }
 
 .baselineMetric {
   color: var(--color-text-light);
   font-size: var(--size-small);
-  line-height: 1.3;
+  line-height: var(--space-small);
 }
 
 /* Loading state */
@@ -60,9 +74,4 @@
 .large .currentMetric {
   font-size: var(--size-xxxlarge);
   line-height: var(--space-medium);
-  min-height: var(--space-medium);
-}
-
-.large .baselineMetric {
-  font-size: var(--size-medium);
 }