@bundle-stats/ui 3.2.1 → 3.3.0-alpha.1

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

@@ -0,0 +1,148 @@
+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, { useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
+import * as budgetsInsightsTransformer from '@bundle-stats/utils/lib-esm/transformers/budgets-insights';
+import { Box } from '../../layout/box';
+import { Stack } from '../../layout/stack';
+import { FlexStack } from '../../layout/flex-stack';
+import { Alert } from '../../ui/alert';
+import { Icon } from '../../ui/icon';
+import { ComponentLink } from '../component-link';
+import css from './budget-insights.module.css';
+
+const Budget = props => {
+  const {
+    className,
+    metricId,
+    budgetInsight,
+    CustomLink
+  } = props;
+  const componentLinkOptions = METRIC_COMPONENT_LINKS.get(metricId);
+  const budgetInsightInfo = budgetsInsightsTransformer.getInfo(metricId, budgetInsight);
+  const {
+    data: messageData
+  } = budgetInsightInfo.message;
+  return /*#__PURE__*/React.createElement(CustomLink, _extends({
+    className: cx(css.budget, className)
+  }, componentLinkOptions == null ? void 0 : componentLinkOptions.link), /*#__PURE__*/React.createElement("strong", null, messageData.metricLabel), ` value (`, /*#__PURE__*/React.createElement("strong", null, messageData.currentValue), `) is ${messageData.diffLabel} `, /*#__PURE__*/React.createElement("strong", null, messageData.budgetValue), ` budget `);
+};
+
+Budget.propTypes = {
+  className: PropTypes.string,
+  metricId: PropTypes.string.isRequired,
+  budgetInsight: PropTypes.shape({
+    currentValue: PropTypes.number.isRequired,
+    budgetValue: PropTypes.number.isRequired,
+    failed: PropTypes.bool.isRequired
+  }).isRequired,
+  CustomLink: PropTypes.elementType.isRequired
+};
+Budget.defaultProps = {
+  className: ''
+};
+
+const BudgetsGroup = props => {
+  const {
+    className,
+    kind,
+    source,
+    budgets,
+    CustomLink
+  } = props;
+  const [showBudgets, setShowBudgets] = useState(false);
+  const isFailed = kind === 'danger';
+  return /*#__PURE__*/React.createElement(Alert, {
+    kind: kind,
+    padding: "none",
+    className: cx(css.group, css[kind], className)
+  }, /*#__PURE__*/React.createElement(Box, {
+    padding: ['xsmall', 'small'],
+    className: css.groupHeader,
+    as: "button",
+    type: "button",
+    onClick: () => setShowBudgets(!showBudgets)
+  }, /*#__PURE__*/React.createElement(FlexStack, {
+    space: "xxsmall",
+    className: css.groupTitle
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: css.groupIcon,
+    glyph: isFailed ? Icon.ICONS.ALERT_CIRCLE : Icon.ICONS.CHECK_CIRCLE
+  }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, budgets.length), ` budget ${budgets.length > 1 ? 'checks' : 'check'} ${isFailed ? 'failed' : 'passed'}`), /*#__PURE__*/React.createElement("span", {
+    className: css.groupTitleToggle
+  }, showBudgets ? 'hide' : 'show', " all"))), showBudgets && /*#__PURE__*/React.createElement(Box, {
+    padding: ['xsmall', 'small'],
+    className: css.groupContent
+  }, /*#__PURE__*/React.createElement(Stack, {
+    space: "none"
+  }, budgets.map(_ref => {
+    let [key, budget] = _ref;
+    return /*#__PURE__*/React.createElement(Budget, {
+      key: key,
+      metricId: `${source}.${key}`,
+      budgetInsight: budget,
+      CustomLink: CustomLink
+    });
+  }))));
+};
+
+BudgetsGroup.propTypes = {
+  className: PropTypes.string,
+  kind: PropTypes.oneOf(['success', 'danger']).isRequired,
+  source: PropTypes.string.isRequired,
+  budgets: PropTypes.object.isRequired,
+  // eslint-disable-line react/forbid-prop-types
+  CustomLink: PropTypes.elementType.isRequired
+};
+BudgetsGroup.defaultProps = {
+  className: ''
+};
+export const BudgetInsights = props => {
+  const {
+    className,
+    source,
+    budgets,
+    CustomLink
+  } = props;
+  const [failedBudgets, passedBudgets] = useMemo(() => {
+    const passed = [];
+    const failed = [];
+    Object.entries(budgets).forEach(_ref2 => {
+      let [key, budget] = _ref2;
+
+      if (budget.failed) {
+        failed.push([key, budget]);
+      } else {
+        passed.push([key, budget]);
+      }
+    });
+    return [failed, passed];
+  }, [budgets]);
+  return /*#__PURE__*/React.createElement(Stack, {
+    className: className,
+    space: "xsmall"
+  }, failedBudgets.length > 0 && /*#__PURE__*/React.createElement(BudgetsGroup, {
+    kind: "danger",
+    source: source,
+    budgets: failedBudgets,
+    CustomLink: CustomLink
+  }), passedBudgets.length > 0 && /*#__PURE__*/React.createElement(BudgetsGroup, {
+    kind: "success",
+    source: source,
+    budgets: passedBudgets,
+    CustomLink: CustomLink
+  }));
+};
+BudgetInsights.propTypes = {
+  className: PropTypes.string,
+  source: PropTypes.string.isRequired,
+  budgets: PropTypes.object.isRequired,
+  // eslint-disable-line react/forbid-prop-types
+  CustomLink: PropTypes.elementType
+};
+BudgetInsights.defaultProps = {
+  className: '',
+  CustomLink: ComponentLink
+};

package/lib-esm/components/budget-insights/budget-insights.module.css

@@ -0,0 +1,53 @@
+.groupHeader {
+  width: 100%;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: inherit;
+}
+
+.groupTitle {
+  width: 100%;
+  align-items: center;
+}
+
+.groupTitle:hover {
+  color: var(--color-text-dark);
+  text-decoration: underline;
+}
+
+.groupTitleToggle {
+  margin: 0 0 0 auto !important;
+}
+
+.danger .groupIcon {
+  color: var(--color-danger);
+}
+
+.success .groupIcon {
+  color: var(--color-success);
+}
+
+.groupContent {
+  padding-top: 0px;
+  background: transparent;
+}
+
+.budget {
+  display: block;
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.budgetLabel,
+.budgetValue {
+  color: var(--color-text-dark);
+  font-weight: 500;
+}
+
+.budget:hover,
+.budget:focus,
+.budget:active {
+  color: var(--color-text);
+  text-decoration: underline;
+}

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: {
+      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
+    }
+  }
+};
+export const FailedBudgets = Template.bind();
+FailedBudgets.args = {
+  source: 'webpack',
+  budgets: {
+    totalSizeByTypeALL: {
+      currentValue: 2097917,
+      budgetValue: 2097152,
+      failed: true
+    },
+    totalInitialSizeJS: {
+      currentValue: 1265645,
+      budgetValue: 524288,
+      failed: true
+    }
+  }
+};
+export const SingleBudget = Template.bind();
+SingleBudget.args = {
+  source: 'webpack',
+  budgets: {
+    totalInitialSizeJS: {
+      currentValue: 524288,
+      budgetValue: 1265645,
+      failed: 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,48 @@
-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);
+
     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, {
+      metricId: item.key,
+      budgetInsight: budget
+    })));
+  }, [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/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

@@ -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, 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: {
+        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