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

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

@@ -5,22 +5,26 @@ import { BudgetInfo } from '.';
 const stories = storiesOf('Components/BudgetInfo', module);
 stories.addDecorator(getWrapperDecorator());
 stories.add('default', () => /*#__PURE__*/React.createElement(BudgetInfo, {
-  budget: {
-    budget: 300,
-    value: 250,
-    overBudget: false
-  },
-  metric: {
-    formatter: v => v
+  metricId: "webpack.assetCount",
+  budgetInsight: {
+    budgetValue: 300,
+    currentValue: 250,
+    failed: false
   }
 }));
-stories.add('over', () => /*#__PURE__*/React.createElement(BudgetInfo, {
-  budget: {
-    budget: 300,
-    value: 350,
-    overBudget: true
-  },
-  metric: {
-    formatter: v => v
+stories.add('error', () => /*#__PURE__*/React.createElement(BudgetInfo, {
+  metricId: "webpack.assetCount",
+  budgetInsight: {
+    budgetValue: 300,
+    currentValue: 350,
+    failed: true
+  }
+}));
+stories.add('warning', () => /*#__PURE__*/React.createElement(BudgetInfo, {
+  metricId: "webpack.assetCount",
+  budgetInsight: {
+    budgetValue: 300,
+    currentValue: 300,
+    failed: false
   }
 }));

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

@@ -3,7 +3,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { METRIC_COMPONENT_LINKS, getGlobalMetricType } from '@bundle-stats/utils';
+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';
@@ -15,28 +16,28 @@ import css from './budget-insights.module.css';
 const Budget = props => {
   const {
     className,
-    metricKey,
-    CustomLink,
-    failed,
-    budgetValue
+    metricId,
+    budgetInsight,
+    CustomLink
   } = props;
-  const metric = getGlobalMetricType(metricKey);
-  const componentLinkOptions = METRIC_COMPONENT_LINKS.get(metricKey);
+  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("span", {
-    className: css.budgetLabel
-  }, metric.label), ` is ${failed ? 'over' : 'under'} `, /*#__PURE__*/React.createElement("span", {
-    className: css.budgetValue
-  }, metric.formatter(budgetValue)), ` budget`);
+  }, 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,
-  metricKey: PropTypes.string.isRequired,
-  failed: PropTypes.bool.isRequired,
-  currentValue: PropTypes.number.isRequired,
-  budgetValue: PropTypes.number.isRequired,
+  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 = {
@@ -78,12 +79,12 @@ const BudgetsGroup = props => {
     space: "none"
   }, budgets.map(_ref => {
     let [key, budget] = _ref;
-    return /*#__PURE__*/React.createElement(Budget, _extends({
+    return /*#__PURE__*/React.createElement(Budget, {
       key: key,
-      source: source,
-      metricKey: `${source}.${key}`,
+      metricId: `${source}.${key}`,
+      budgetInsight: budget,
       CustomLink: CustomLink
-    }, budget));
+    });
   }))));
 };
 

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

@@ -14,44 +14,44 @@ Default.args = {
   source: 'webpack',
   budgets: {
     totalSizeByTypeALL: {
-      value: 2097917,
-      budget: 2097152,
-      overBudget: true
+      currentValue: 2097917,
+      budgetValue: 2097152,
+      failed: true
     },
     totalInitialSizeJS: {
-      value: 1265645,
-      budget: 524288,
-      overBudget: true
+      currentValue: 1265645,
+      budgetValue: 524288,
+      failed: true
     },
     totalInitialSizeCSS: {
-      value: 48866,
-      budget: 51200,
-      overBudget: false
+      currentValue: 48866,
+      budgetValue: 51200,
+      failed: false
     },
     chunkCount: {
-      value: 12,
-      budget: 50,
-      overBudget: false
+      currentValue: 12,
+      budgetValue: 50,
+      failed: false
     },
     moduleCount: {
-      value: 1059,
-      budget: 2000,
-      overBudget: false
+      currentValue: 1059,
+      budgetValue: 2000,
+      failed: false
     },
     duplicatePackagesCount: {
-      value: 13,
-      budget: 5,
-      overBudget: true
+      currentValue: 13,
+      budgetValue: 5,
+      failed: true
     },
     'sizes.totalSizeByTypeJS': {
-      value: 1981470,
-      budget: 2097152,
-      overBudget: false
+      currentValue: 1981470,
+      budgetValue: 2097152,
+      failed: false
     },
     'sizes.totalSizeByTypeCSS': {
-      value: 56091,
-      budget: 20480,
-      overBudget: true
+      currentValue: 56091,
+      budgetValue: 20480,
+      failed: true
     }
   }
 };
@@ -60,14 +60,14 @@ FailedBudgets.args = {
   source: 'webpack',
   budgets: {
     totalSizeByTypeALL: {
-      value: 2097917,
-      budget: 2097152,
-      overBudget: true
+      currentValue: 2097917,
+      budgetValue: 2097152,
+      failed: true
     },
     totalInitialSizeJS: {
-      value: 1265645,
-      budget: 524288,
-      overBudget: true
+      currentValue: 1265645,
+      budgetValue: 524288,
+      failed: true
     }
   }
 };
@@ -76,9 +76,9 @@ SingleBudget.args = {
   source: 'webpack',
   budgets: {
     totalInitialSizeJS: {
-      value: 524288,
-      budget: 1265645,
-      overBudget: false
+      currentValue: 524288,
+      budgetValue: 1265645,
+      failed: false
     }
   }
 };

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

@@ -31,7 +31,6 @@ export const BundleAssetsTotalsTable = _ref => {
 
     const budget = _get(budgets, metricKey);
 
-    const metric = webpack.getMetricType(metricKey);
     return /*#__PURE__*/React.createElement(CustomComponentLink, {
       section: section,
       title: title,
@@ -40,8 +39,8 @@ export const BundleAssetsTotalsTable = _ref => {
       space: "xxsmall",
       className: css.itemTitleText
     }, /*#__PURE__*/React.createElement("span", null, item.label), budget && /*#__PURE__*/React.createElement(BudgetInfo, {
-      budget: budget,
-      metric: metric
+      metricId: item.key,
+      budgetInsight: budget
     })));
   }, [CustomComponentLink]);
   return /*#__PURE__*/React.createElement(MetricsTable, {

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

@@ -44,7 +44,7 @@ export const Summary = _ref => {
       size: size,
       id: metricId,
       data: _get(data, metricId),
-      budget: _get(budgets, getSourceMetricId(metricId)),
+      budget: _get(budgets, metricId),
       loading: loading,
       showMetricDescription: true,
       showDelta: showSummaryItemDelta && metricOptions.showDelta !== false

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

@@ -26,24 +26,24 @@ stories.add('budgets', () => /*#__PURE__*/React.createElement(Summary, {
   budgets: {
     webpack: {
       totalSizeByTypeALL: {
-        value: MULTIPLE_JOBS[0].summary.webpack.totalSizeByTypeALL,
-        budget: 1024 * 1024,
-        overBudget: false
+        currentValue: MULTIPLE_JOBS[0].summary.webpack.totalSizeByTypeALL.current,
+        budgetValue: 1024 * 1024,
+        failed: false
       },
       totalInitialSizeJS: {
-        value: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeJS,
-        budget: 512 * 1024,
-        overBudget: true
+        currentValue: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeJS.current,
+        budgetValue: 512 * 1024,
+        failed: true
       },
       totalInitialSizeCSS: {
-        value: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeCSS,
-        budget: 50 * 1024,
-        overBudget: false
+        currentValue: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeCSS.current,
+        budgetValue: 50 * 1024,
+        failed: false
       },
       chunkCount: {
-        value: MULTIPLE_JOBS[0].summary.webpack.chunkCount,
-        budget: 50,
-        overBudget: false
+        currentValue: MULTIPLE_JOBS[0].summary.webpack.chunkCount.current,
+        budgetValue: 50,
+        failed: false
       }
     }
   }

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

@@ -79,8 +79,8 @@ export const SummaryItem = _ref2 => {
     icon: "help"
   }, /*#__PURE__*/React.createElement(MetricInfoPopover, metric)), budget && /*#__PURE__*/React.createElement(BudgetInfo, {
     className: css.budgetInfo,
-    metric: metric,
-    budget: budget
+    metricId: id,
+    budgetInsight: budget
   })), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
     className: css.currentMetric,
     value: current,
@@ -137,10 +137,10 @@ SummaryItem.propTypes = {
   /** Show delta */
   showDelta: PropTypes.bool,
 
-  /** Budget data */
+  /** Budget insight data */
   budget: PropTypes.shape({
-    value: PropTypes.number,
-    budget: PropTypes.number,
-    overBudget: PropTypes.bool
+    currentBalue: PropTypes.number,
+    budgetValue: PropTypes.number,
+    failed: PropTypes.bool
   })
 };

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

@@ -33,22 +33,22 @@ export const ShowDeltaFalse = Template.bind();
 ShowDeltaFalse.args = {
   showDelta: false
 };
-export const BudgetOver = Template.bind();
-BudgetOver.args = {
+export const BudgetError = Template.bind();
+BudgetError.args = {
   showMetricDescription: true,
   budget: {
-    value: 120 * 1000,
-    budget: 100 * 1000,
-    overBudget: true
+    currentValue: 120 * 1000,
+    budgetValue: 100 * 1000,
+    failed: true
   }
 };
-export const BudgetUnder = Template.bind();
-BudgetUnder.args = {
+export const BudgetSuccess = Template.bind();
+BudgetSuccess.args = {
   showMetricDescription: true,
   budget: {
-    value: 120 * 1000,
-    budget: 120 * 1024,
-    overBudget: false
+    currentValue: 120 * 1000,
+    budgetValue: 120 * 1024,
+    failed: false
   }
 };
 export const Loading = Template.bind();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.3.0-alpha.0",
+  "version": "3.3.0-alpha.1",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -84,11 +84,11 @@
     "react-router-dom": "^5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.3.0-alpha.0",
+    "@bundle-stats/utils": "^3.3.0-alpha.1",
     "date-fns": "^2.6.0",
     "query-string": "^7.0.0",
     "reakit": "^1.3.6",
     "use-query-params": "^1.2.2"
   },
-  "gitHead": "7c7e664296ad7aed38a6972f4421d754098119eb"
+  "gitHead": "b510975b373ee38b66899a990c7341d1a29a69e2"
 }

package/src/components/budget-info/budget-info.jsx

@@ -1,46 +1,62 @@
 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';
 
-export const BudgetInfo = ({ className = '', budget, metric }) => {
-  const rootClassName = cx(css.root, budget.failed ? css.over : css.under, className);
+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>{metric.label}</strong>
-          {` is ${budget.failed ? 'over' : 'under'} `}
-          {metric.formatter(budget.budgetValue)}
-          {` budget`}
+          <strong>{messageData.metricLabel}</strong>
+          {` value (`}
+          <strong>{messageData.currentValue}</strong>
+          {`) is ${messageData.diffLabel} `}
+          <strong>{messageData.budgetValue}</strong>
+          {` budget `}
         </>
       }
     >
-      <Icon
-        className={css.icon}
-        glyph={budget.failed ? Icon.ICONS.ALERT_CIRCLE : Icon.ICONS.CHECK_CIRCLE}
-        size="medium"
-      />
+      <Icon className={css.icon} glyph={glyph} size="medium" />
     </Tooltip>
   );
 };
 
 BudgetInfo.propTypes = {
-  budget: PropTypes.shape({
+  metricId: PropTypes.string.isRequired,
+  budgetInsight: PropTypes.shape({
     currentValue: PropTypes.number,
     budgetValue: PropTypes.number,
     failed: PropTypes.bool,
   }).isRequired,
-  metric: PropTypes.shape({
-    label: PropTypes.string,
-    formatter: PropTypes.func,
-  }).isRequired,
   className: PropTypes.string,
 };
 

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

@@ -3,26 +3,38 @@
   line-height: 1em;
 }
 
-/* Budget over */
-.over .icon {
-  color: var(--color-danger-light);
+/* Budget error */
+.error .icon {
+  color: var(--color-danger);
 }
 
-.over .icon:hover,
-.over .icon:focus,
-.over .icon:active
+.error .icon:hover,
+.error .icon:focus,
+.error .icon:active
 {
-  color: var(--color-danger);
+  color: var(--color-danger-light);
 }
 
-/* Budget under */
-.under .icon {
+/* Budget success */
+.success .icon {
+  color: var(--color-success);
+}
+
+.success .icon:hover,
+.success .icon:focus,
+.success .icon:active
+{
   color: var(--color-success-light);
 }
 
-.under .icon:hover,
-.under .icon:focus,
-.under .icon:active
+/* Budget warning */
+.warning .icon {
+  color: var(--color-warning-dark);
+}
+
+.warning .icon:hover,
+.warning .icon:focus,
+.warning .icon:active
 {
-  color: var(--color-success);
+  color: var(--color-warning);
 }

package/src/components/budget-insights/budget-insights.jsx

@@ -1,7 +1,8 @@
 import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { METRIC_COMPONENT_LINKS, getGlobalMetricType } from '@bundle-stats/utils';
+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';
@@ -12,26 +13,31 @@ import { ComponentLink } from '../component-link';
 import css from './budget-insights.module.css';
 
 const Budget = (props) => {
-  const { className, metricKey, CustomLink, failed, budgetValue } = props;
-  const metric = getGlobalMetricType(metricKey);
-  const componentLinkOptions = METRIC_COMPONENT_LINKS.get(metricKey);
+  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 (
     <CustomLink className={cx(css.budget, className)} {...componentLinkOptions?.link}>
-      <span className={css.budgetLabel}>{metric.label}</span>
-      {` is ${failed ? 'over' : 'under'} `}
-      <span className={css.budgetValue}>{metric.formatter(budgetValue)}</span>
-      {` budget`}
+      <strong>{messageData.metricLabel}</strong>
+      {` value (`}
+      <strong>{messageData.currentValue}</strong>
+      {`) is ${messageData.diffLabel} `}
+      <strong>{messageData.budgetValue}</strong>
+      {` budget `}
     </CustomLink>
   );
 };
 
 Budget.propTypes = {
   className: PropTypes.string,
-  metricKey: PropTypes.string.isRequired,
-  failed: PropTypes.bool.isRequired,
-  currentValue: PropTypes.number.isRequired,
-  budgetValue: PropTypes.number.isRequired,
+  metricId: PropTypes.string.isRequired,
+  budgetInsight: PropTypes.shape({
+    currentValue: PropTypes.number.isRequired,
+    budgetValue: PropTypes.number.isRequired,
+    failed: PropTypes.bool.isRequired,
+  }).isRequired,
   CustomLink: PropTypes.elementType.isRequired,
 };
 
@@ -73,10 +79,9 @@ const BudgetsGroup = (props) => {
             {budgets.map(([key, budget]) => (
               <Budget
                 key={key}
-                source={source}
-                metricKey={`${source}.${key}`}
+                metricId={`${source}.${key}`}
+                budgetInsight={budget}
                 CustomLink={CustomLink}
-                {...budget}
               />
             ))}
           </Stack>

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

@@ -26,13 +26,12 @@ export const BundleAssetsTotalsTable = ({
       const [_, ...metricSlugs] = item.key.split('.');
       const metricKey = metricSlugs.join('.');
       const budget = get(budgets, metricKey);
-      const metric = webpack.getMetricType(metricKey);
 
       return (
         <CustomComponentLink section={section} title={title} params={params}>
           <FlexStack space="xxsmall" className={css.itemTitleText}>
             <span>{item.label}</span>
-            {budget && <BudgetInfo budget={budget} metric={metric} />}
+            {budget && <BudgetInfo metricId={item.key} budgetInsight={budget} />}
           </FlexStack>
         </CustomComponentLink>
       );

package/src/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/src/components/summary/summary.jsx

@@ -34,7 +34,7 @@ export const Summary = ({
               size={size}
               id={metricId}
               data={get(data, metricId)}
-              budget={get(budgets, getSourceMetricId(metricId))}
+              budget={get(budgets, metricId)}
               loading={loading}
               showMetricDescription
               showDelta={showSummaryItemDelta && metricOptions.showDelta !== false}

package/src/components/summary-item/summary-item.jsx

@@ -71,7 +71,7 @@ export const SummaryItem = ({
           </Popover>
         )}
 
-        {budget && <BudgetInfo className={css.budgetInfo} metric={metric} budget={budget} />}
+        {budget && <BudgetInfo className={css.budgetInfo} metricId={id} budgetInsight={budget} />}
       </FlexStack>
 
       {!loading ? (
@@ -139,10 +139,10 @@ SummaryItem.propTypes = {
   /** Show delta */
   showDelta: PropTypes.bool,
 
-  /** Budget data */
+  /** Budget insight data */
   budget: PropTypes.shape({
-    value: PropTypes.number,
-    budget: PropTypes.number,
-    overBudget: PropTypes.bool,
+    currentBalue: PropTypes.number,
+    budgetValue: PropTypes.number,
+    failed: PropTypes.bool,
   }),
 };