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

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

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

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

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

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

@@ -0,0 +1,152 @@
+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 { 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, metricKey, CustomLink, failed, budgetValue } = props;
+  const metric = getGlobalMetricType(metricKey);
+  const componentLinkOptions = METRIC_COMPONENT_LINKS.get(metricKey);
+
+  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`}
+    </CustomLink>
+  );
+};
+
+Budget.propTypes = {
+  className: PropTypes.string,
+  metricKey: PropTypes.string.isRequired,
+  failed: PropTypes.bool.isRequired,
+  currentValue: PropTypes.number.isRequired,
+  budgetValue: PropTypes.number.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 (
+    <Alert kind={kind} padding="none" className={cx(css.group, css[kind], className)}>
+      <Box
+        padding={['xsmall', 'small']}
+        className={css.groupHeader}
+        as="button"
+        type="button"
+        onClick={() => setShowBudgets(!showBudgets)}
+      >
+        <FlexStack space="xxsmall" className={css.groupTitle}>
+          <Icon
+            className={css.groupIcon}
+            glyph={isFailed ? Icon.ICONS.ALERT_CIRCLE : Icon.ICONS.CHECK_CIRCLE}
+          />
+          <span>
+            <strong>{budgets.length}</strong>
+            {` budget ${budgets.length > 1 ? 'checks' : 'check'} ${isFailed ? 'failed' : 'passed'}`}
+          </span>
+          <span className={css.groupTitleToggle}>{showBudgets ? 'hide' : 'show'} all</span>
+        </FlexStack>
+      </Box>
+
+      {showBudgets && (
+        <Box padding={['xsmall', 'small']} className={css.groupContent}>
+          <Stack space="none">
+            {budgets.map(([key, budget]) => (
+              <Budget
+                key={key}
+                source={source}
+                metricKey={`${source}.${key}`}
+                CustomLink={CustomLink}
+                {...budget}
+              />
+            ))}
+          </Stack>
+        </Box>
+      )}
+    </Alert>
+  );
+};
+
+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(([key, budget]) => {
+      if (budget.failed) {
+        failed.push([key, budget]);
+      } else {
+        passed.push([key, budget]);
+      }
+    });
+
+    return [failed, passed];
+  }, [budgets]);
+
+  return (
+    <Stack className={className} space="xsmall">
+      {failedBudgets.length > 0 && (
+        <BudgetsGroup
+          kind="danger"
+          source={source}
+          budgets={failedBudgets}
+          CustomLink={CustomLink}
+        />
+      )}
+
+      {passedBudgets.length > 0 && (
+        <BudgetsGroup
+          kind="success"
+          source={source}
+          budgets={passedBudgets}
+          CustomLink={CustomLink}
+        />
+      )}
+    </Stack>
+  );
+};
+
+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/src/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/src/components/budget-insights/index.js

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

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

@@ -1,29 +1,44 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { get } from 'lodash';
 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 = ({
   className,
   jobs,
   customComponentLink: CustomComponentLink,
 }) => {
-  const items = webpack.compareBySection.sizes(jobs);
-
-  const renderRowHeader = (item) => {
-    const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
-    const { section, title, params } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
-
-    return (
-      <CustomComponentLink section={section} title={title} params={params}>
-        {item.label}
-      </CustomComponentLink>
-    );
-  };
+  const items = useMemo(() => webpack.compareBySection.sizes(jobs), [jobs]);
+  const budgets = jobs[0].insights?.webpack?.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 (
+        <CustomComponentLink section={section} title={title} params={params}>
+          <FlexStack space="xxsmall" className={css.itemTitleText}>
+            <span>{item.label}</span>
+            {budget && <BudgetInfo budget={budget} metric={metric} />}
+          </FlexStack>
+        </CustomComponentLink>
+      );
+    },
+    [CustomComponentLink],
+  );
 
   return (
     <MetricsTable

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

@@ -12,11 +12,14 @@ 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 = ({
   className,
   size,
   keys,
   data,
+  budgets,
   loading,
   showSummaryItemDelta,
   summaryItemLink: SummaryItemCustomLink,
@@ -24,13 +27,14 @@ export const Summary = ({
   <Box outline className={cx(css.root, className)}>
     <FlexStack className={css.items}>
       {Array.from(METRIC_COMPONENT_LINKS)
-        .filter(([metricId]) => keys.includes(metricId))
+        .filter(([metricId]) => keys.includes(getSourceMetricId(metricId)))
         .map(([metricId, metricOptions]) => (
           <div key={metricId} className={css.item}>
             <SummaryItem
               size={size}
               id={metricId}
               data={get(data, metricId)}
+              budget={get(budgets, getSourceMetricId(metricId))}
               loading={loading}
               showMetricDescription
               showDelta={showSummaryItemDelta && metricOptions.showDelta !== false}
@@ -49,6 +53,7 @@ export const Summary = ({
 Summary.defaultProps = {
   className: '',
   data: null,
+  budgets: null,
   loading: false,
   size: '',
   keys: METRICS_WEBPACK_GENERAL,
@@ -60,12 +65,8 @@ 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/src/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/src/components/summary-item/summary-item.jsx

@@ -9,6 +9,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 MetricInfoPopover = ({ description, url }) => {
@@ -49,6 +50,7 @@ export const SummaryItem = ({
   loading,
   showDelta,
   showMetricDescription,
+  budget,
   ...props
 }) => {
   const { baseline, current } = data || { baseline: 0, current: 0 };
@@ -56,19 +58,20 @@ export const SummaryItem = ({
   const metric = getGlobalMetricType(id);
   const runInfo = getMetricRunInfo(metric, current, baseline);
   const showMetricDescriptionTooltip = showMetricDescription && metric?.description;
-
   const rootClassName = cx(css.root, className, css[size], showDelta && css.showDelta);
 
   return (
     <Stack space="xxsmall" as={Component} className={rootClassName} {...props}>
       <FlexStack as="h3" space="xxxsmall" className={css.title}>
-        <span>{metric.label}</span>
+        <span className={css.titleLabel}>{metric.label}</span>
 
         {showMetricDescriptionTooltip && (
           <Popover className={css.icon} icon="help">
             <MetricInfoPopover {...metric} />
           </Popover>
         )}
+
+        {budget && <BudgetInfo className={css.budgetInfo} metric={metric} budget={budget} />}
       </FlexStack>
 
       {!loading ? (
@@ -108,6 +111,7 @@ SummaryItem.defaultProps = {
   loading: false,
   showMetricDescription: false,
   showDelta: true,
+  budget: undefined,
 };
 
 SummaryItem.propTypes = {
@@ -134,4 +138,11 @@ SummaryItem.propTypes = {
 
   /** Show delta */
   showDelta: PropTypes.bool,
+
+  /** Budget data */
+  budget: PropTypes.shape({
+    value: PropTypes.number,
+    budget: PropTypes.number,
+    overBudget: PropTypes.bool,
+  }),
 };

package/src/components/summary-item/summary-item.module.css

@@ -1,3 +1,8 @@
+.root {
+  position: relative;
+  padding-right: var(--space-xlarge);
+}
+
 .title {
   color: var(--color-text-ultra-light);
   font-weight: bold;
@@ -7,6 +12,10 @@
   white-space: nowrap;
 }
 
+.titleLabel {
+  flex: 0 0 auto;
+}
+
 .readMoreBtn {
   appearance: none;
   padding: 0;
@@ -26,6 +35,12 @@
   text-decoration: none;
 }
 
+.budgetInfo {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
 .currentMetric {
   display: block;
   color: var(--color-heading);

package/src/constants.js

@@ -47,11 +47,11 @@ export const ASSETS_SIZES_FILE_TYPE_MAP = FILE_TYPES.reduce(
 );
 
 export const METRICS_WEBPACK_GENERAL = [
-  'webpack.totalSizeByTypeALL',
-  'webpack.totalInitialSizeJS',
-  'webpack.totalInitialSizeCSS',
-  'webpack.cacheInvalidation',
+  'totalSizeByTypeALL',
+  'totalInitialSizeJS',
+  'totalInitialSizeCSS',
+  '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_ASSETS = ['assetCount', 'chunkCount'];
+export const METRICS_WEBPACK_MODULES = ['moduleCount'];
+export const METRICS_WEBPACK_PACKAGES = ['packageCount', 'duplicatePackagesCount'];

package/src/ui/alert/alert.jsx

@@ -6,10 +6,15 @@ import { Box } from '../../layout/box';
 import css from './alert.module.css';
 
 export const Alert = (props) => {
-  const { className, kind, children } = props;
+  const { className, kind, children, ...restProps } = props;
 
   return (
-    <Box padding={['xsmall', 'small']} outline className={cx(css.root, className, css[kind])}>
+    <Box
+      padding={['xsmall', 'small']}
+      outline
+      className={cx(css.root, className, css[kind])}
+      {...restProps}
+    >
       {children}
     </Box>
   );

package/src/ui/icon/icon.jsx

@@ -5,11 +5,13 @@ 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',