@bundle-stats/ui 3.3.0-alpha.1 → 3.3.1-beta.8

package/lib-esm/components/job-header/job-header.module.css

@@ -1,22 +1,20 @@
 .title {
+  font-size: var(--size-xlarge);
   line-height: 1;
   font-weight: bold;
   vertical-align: top;
 }
 
 .tag {
-  padding: var(--space-xxxsmall);
-  margin-left: var(--space-xxxsmall);
-  background-color: var(--color-highlight);
-  color: var(--color-text-light);
-  display: inline-block;
-  font-size: 9px;
-  line-height: var(--space-xxsmall);
-  font-weight: normal;
+  margin-left: var(--space-xxsmall);
   vertical-align: top;
+  outline: 1px solid var(--color-outline);
+  background: var(--color-highlight);
+  color: var(--color-text-light);
 }
 
 .meta {
+  font-size: var(--size-small);
   color: var(--color-text-light);
 }
 

package/lib-esm/components/jobs-header/jobs-header.module.css

@@ -9,3 +9,8 @@
   padding: 0 var(--space-medium);
   border-left: 1px solid var(--color-outline);
 }
+
+.item:first-child {
+  border-left: 0;
+  padding-left: 0;
+}

package/lib-esm/components/metrics-table/metrics-table.js

@@ -1,6 +1,9 @@
 import _sum from "lodash/sum";
 import _isEmpty from "lodash/isEmpty";
 import _get from "lodash/get";
+
+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 } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -85,47 +88,60 @@ const getHeaderRows = (runs, items, showHeaderSum, title) => [{
   cells: runs.map(getHeaderTotalCells(items)).flat()
 }] : [])];
 
-const generateRowCells = (item, index, items) => {
-  const isBaseline = index === items.length - 1; // eslint-disable-next-line react/destructuring-assignment
-
-  if (!item || typeof item.value === 'undefined') {
-    return ['-', ...(!isBaseline ? [''] : [])];
-  }
+const MetricsTableRow = _ref => {
+  let {
+    item,
+    renderRowHeader
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Table.Tr, {
+    className: cx(!item.changed && styles.unchanged)
+  }, /*#__PURE__*/React.createElement(Table.Th, {
+    className: styles.metricName
+  }, renderRowHeader(item)), item.runs.map((run, index) => {
+    const isBaseline = index === item.runs.length - 1;
+    const valueClassName = cx(styles.value, !isBaseline && styles.current); // Empty cells if no value
 
-  const {
-    displayValue,
-    deltaPercentage,
-    displayDeltaPercentage,
-    deltaType
-  } = item;
-  const cells = [/*#__PURE__*/React.createElement(Metric, {
-    value: displayValue
-  })];
+    if (!run || typeof run.value === 'undefined') {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Table.Td, {
+        className: valueClassName
+      }, "-"), !isBaseline && /*#__PURE__*/React.createElement(Table.Td, {
+        className: styles.delta
+      }));
+    }
 
-  if (!isBaseline) {
-    cells.push(typeof deltaPercentage === 'number' && /*#__PURE__*/React.createElement(Delta, {
+    const {
+      displayValue,
+      deltaPercentage,
+      displayDeltaPercentage,
+      deltaType
+    } = run;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Table.Td, {
+      className: valueClassName
+    }, /*#__PURE__*/React.createElement(Metric, {
+      value: displayValue
+    })), !isBaseline && typeof deltaPercentage === 'number' && /*#__PURE__*/React.createElement(Table.Td, {
+      className: styles.delta
+    }, /*#__PURE__*/React.createElement(Delta, {
       displayValue: displayDeltaPercentage,
       deltaType: deltaType
-    }));
-  }
-
-  return cells;
+    })));
+  }));
 };
 
-const getRows = (runs, items, renderRowHeader) => items.map((item, index) => {
-  const {
-    changed
-  } = item;
-  return {
-    key: (item == null ? void 0 : item.key) || index,
-    className: changed ? '' : styles.unchanged,
-    cells: [// Metric name
-    renderRowHeader(item), // Metric item values
-    ...item.runs.map(generateRowCells).flat()]
-  };
-});
-
-export const MetricsTable = _ref => {
+MetricsTableRow.propTypes = {
+  item: PropTypes.shape({
+    changed: PropTypes.bool,
+    runs: PropTypes.arrayOf(PropTypes.shape({
+      value: PropTypes.number,
+      displayValue: PropTypes.string,
+      deltaPercentage: PropTypes.number,
+      displayDeltaPercentage: PropTypes.string,
+      deltaType: PropTypes.string
+    }))
+  }).isRequired,
+  renderRowHeader: PropTypes.func.isRequired
+};
+export const MetricsTable = _ref2 => {
   let {
     className,
     renderRowHeader,
@@ -134,8 +150,9 @@ export const MetricsTable = _ref => {
     emptyMessage,
     showHeaderSum,
     headerRows,
-    title
-  } = _ref;
+    title,
+    ...restProps
+  } = _ref2;
   const {
     headers,
     columnClassNames
@@ -147,12 +164,11 @@ export const MetricsTable = _ref => {
       columnClassNames: headerColumns[0].cells.map(headerColumn => headerColumn.className)
     };
   }, [headerRows, runs, items, showHeaderSum, title]);
-  const rows = useMemo(() => getRows(runs, items, renderRowHeader), [runs, items, renderRowHeader]);
   const rootClassName = cx(styles.root, className, runs.length > 1 && styles.multipleRuns, showHeaderSum && styles.showHeaderSum);
-  return /*#__PURE__*/React.createElement(Table, {
+  return /*#__PURE__*/React.createElement(Table, _extends({
     className: rootClassName,
     compact: true
-  }, /*#__PURE__*/React.createElement(Table.THead, null, headers.map(headerRow => {
+  }, restProps), /*#__PURE__*/React.createElement(Table.THead, null, headers.map(headerRow => {
     const {
       cells,
       className: rowClassName
@@ -162,19 +178,11 @@ export const MetricsTable = _ref => {
     return /*#__PURE__*/React.createElement(Table.Tr, {
       className: rowClassName
     }, cells.map(header => /*#__PURE__*/React.createElement(Table.Th, header)));
-  })), /*#__PURE__*/React.createElement(Table.TBody, null, !_isEmpty(rows) ? rows.map(_ref2 => {
-    let {
-      key,
-      className: rowClassName,
-      cells
-    } = _ref2;
-    return /*#__PURE__*/React.createElement(Table.Tr, {
-      key: key,
-      className: rowClassName
-    }, cells.map((cell, index) => /*#__PURE__*/React.createElement(Table.Td, {
-      className: columnClassNames[index]
-    }, cell)));
-  }) : /*#__PURE__*/React.createElement(Table.Tr, null, /*#__PURE__*/React.createElement(Table.Td, {
+  })), /*#__PURE__*/React.createElement(Table.TBody, null, !_isEmpty(items) ? items.map(item => /*#__PURE__*/React.createElement(MetricsTableRow, {
+    key: item.key,
+    item: item,
+    renderRowHeader: renderRowHeader
+  })) : /*#__PURE__*/React.createElement(Table.Tr, null, /*#__PURE__*/React.createElement(Table.Td, {
     className: styles.empty,
     colSpan: (columnClassNames == null ? void 0 : columnClassNames.length) || 1
   }, emptyMessage))));

package/lib-esm/components/metrics-table/metrics-table.module.css

@@ -1,11 +1,11 @@
-.jobName a {
+.root a {
   color: inherit;
   text-decoration: none;
 }
 
-.jobName a:hover,
-.jobName a:active,
-.jobName a:focus {
+.root a:hover,
+.root a:active,
+.root a:focus {
   color: var(--color-primary);
   text-decoration: underline;
 }
@@ -15,21 +15,31 @@
   width: 100%;
 }
 
-.value {
+.root .value {
   padding-left: var(--space-large);
   text-align: right;
+  vertical-align: baseline;
 }
 
-.delta {
+.root .delta {
   padding-left: 0;
   text-align: left;
   font-size: var(--size-xsmall);
+  vertical-align: baseline;
 }
 
-.value.current {
+.root tbody .delta {
+  line-height: 1.6rem; /* baseline alignment with the value */
+}
+
+.root .value.current {
   padding-right: var(--space-xxsmall);
 }
 
+.jobName {
+  white-space: nowrap;
+}
+
 /* columns overrides for showHeaderSum */
 .showHeaderSum .headerRowColumns .value,
 .showHeaderSum .headerRowColumns .delta {
@@ -45,6 +55,7 @@
 }
 
 /** rows */
+.multipleRuns .unchanged th,
 .multipleRuns .unchanged td {
   color: var(--color-text-light);
 }

package/lib-esm/components/metrics-table-search/metrics-table-search.module.css

@@ -5,6 +5,7 @@
 }
 
 .input {
+  border-radius: var(--radius-small);
   height: var(--space-large);
   border-color: var(--color-outline);
 }
@@ -21,12 +22,12 @@
   cursor: pointer;
   border-radius: 50%;
   position: absolute;
-  right: 0;
+  right: 2px;
   top: 50%;
   transform: translateY(-50%);
-  padding: var(--space-xxsmall);
-  width: var(--space-large);
-  height: var(--space-large);
+  padding: var(--space-xxxsmall);
+  width: var(--space-medium);
+  height: var(--space-medium);
   background: radial-gradient(var(--color-background) 50%, transparent);
   color: var(--color-text-ultra-light);
   transition: var(--transition-in);

package/lib-esm/components/metrics-table-title/metrics-table-title.js

@@ -4,7 +4,8 @@ import cx from 'classnames';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
-import { Popover } from '../../ui/popover';
+import { Icon } from '../../ui/icon';
+import { HoverCard } from '../../ui/hover-card';
 import css from './metrics-table-title.module.css';
 export const MetricsTableTitle = props => {
   const {
@@ -15,22 +16,22 @@ export const MetricsTableTitle = props => {
     popoverHref
   } = props;
   const rootClassName = cx(css.root, className);
-  return /*#__PURE__*/React.createElement(Stack, {
+  return /*#__PURE__*/React.createElement(FlexStack, {
     space: "xxxsmall",
     className: rootClassName
-  }, /*#__PURE__*/React.createElement(FlexStack, {
-    space: "xxxsmall"
   }, /*#__PURE__*/React.createElement("span", null, title), info && /*#__PURE__*/React.createElement("span", {
     className: css.info
-  }, info), (popoverInfo || popoverHref) && /*#__PURE__*/React.createElement(Popover, {
-    icon: "help"
+  }, info), (popoverInfo || popoverHref) && /*#__PURE__*/React.createElement(HoverCard, {
+    label: /*#__PURE__*/React.createElement(Icon, {
+      glyph: "help"
+    })
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "xxxsmall"
   }, popoverInfo && /*#__PURE__*/React.createElement("p", null, popoverInfo), popoverHref && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {
     href: popoverHref,
     target: "_blank",
     rel: "noreferrer"
-  }, I18N.READ_MORE))))));
+  }, I18N.READ_MORE)))));
 };
 MetricsTableTitle.propTypes = {
   className: PropTypes.string,

package/lib-esm/components/metrics-table-title/metrics-table-title.module.css

@@ -1,5 +1,7 @@
 .root {
+  align-items: center;
   font-weight: bold;
+  line-height: var(--space-small);
   text-transform: uppercase;
   color: var(--color-text-light);
 }

package/lib-esm/components/module-info/module-info.js

@@ -22,7 +22,7 @@ export const ModuleInfo = props => {
     onClick
   } = props;
   return /*#__PURE__*/React.createElement(Stack, {
-    space: "small",
+    space: "xsmall",
     className: className
   }, item.runs.map((run, index) => {
     const TitleComponent = index !== 0 ? 'h4' : 'h3';
@@ -32,7 +32,7 @@ export const ModuleInfo = props => {
       key: key
     }, /*#__PURE__*/React.createElement(TitleComponent, null, labels[index]), index === 0 && !_isEmpty(run == null ? void 0 : run.chunkIds) && /*#__PURE__*/React.createElement("div", {
       className: css.chunks
-    }, /*#__PURE__*/React.createElement("strong", {
+    }, /*#__PURE__*/React.createElement("span", {
       className: css.chunksTitle
     }, "Chunks:"), run.chunkIds.map(chunkId => {
       const chunk = _find(chunks, {

package/lib-esm/components/module-info/module-info.module.css

@@ -15,6 +15,7 @@
 }
 
 .fileName {
+  max-width: 100%;
   padding: 2px;
   background: var(--color-highlight-warning);
 }

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, metricId),
+      budget: _get(budgets, getSourceMetricId(metricId)),
       loading: loading,
       showMetricDescription: true,
       showDelta: showSummaryItemDelta && metricOptions.showDelta !== false

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

@@ -4,7 +4,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
-import { Popover } from '../../ui/popover';
+import { HoverCard } from '../../ui/hover-card';
+import { Icon } from '../../ui/icon';
 import { Skeleton } from '../../ui/skeleton';
 import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
@@ -13,31 +14,24 @@ import { Delta } from '../delta';
 import { BudgetInfo } from '../budget-info';
 import css from './summary-item.module.css';
 
-const MetricInfoPopover = _ref => {
+const MetricInfo = _ref => {
   let {
     description,
     url
   } = _ref;
-
-  // Workaround cases where the parent is a link
-  const readMoreOnClick = () => {
-    window.open(url);
-  };
-
   return /*#__PURE__*/React.createElement(Stack, {
     space: "xxxsmall"
-  }, /*#__PURE__*/React.createElement("p", null, description), url && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: css.readMoreBtn,
-    onClick: readMoreOnClick
+  }, /*#__PURE__*/React.createElement("p", null, description), url && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {
+    href: url,
+    className: css.readMoreLink
   }, "Read more")));
 };
 
-MetricInfoPopover.propTypes = {
+MetricInfo.propTypes = {
   description: PropTypes.string.isRequired,
   url: PropTypes.string
 };
-MetricInfoPopover.defaultProps = {
+MetricInfo.defaultProps = {
   url: ''
 };
 export const SummaryItem = _ref2 => {
@@ -65,7 +59,7 @@ export const SummaryItem = _ref2 => {
   const showMetricDescriptionTooltip = showMetricDescription && (metric == null ? void 0 : metric.description);
   const rootClassName = cx(css.root, className, css[size], showDelta && css.showDelta);
   return /*#__PURE__*/React.createElement(Stack, _extends({
-    space: "xxsmall",
+    space: "xxxsmall",
     as: Component,
     className: rootClassName
   }, props), /*#__PURE__*/React.createElement(FlexStack, {
@@ -74,10 +68,12 @@ export const SummaryItem = _ref2 => {
     className: css.title
   }, /*#__PURE__*/React.createElement("span", {
     className: css.titleLabel
-  }, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(Popover, {
+  }, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(HoverCard, {
     className: css.icon,
-    icon: "help"
-  }, /*#__PURE__*/React.createElement(MetricInfoPopover, metric)), budget && /*#__PURE__*/React.createElement(BudgetInfo, {
+    label: /*#__PURE__*/React.createElement(Icon, {
+      glyph: "help"
+    })
+  }, /*#__PURE__*/React.createElement(MetricInfo, metric)), budget && /*#__PURE__*/React.createElement(BudgetInfo, {
     className: css.budgetInfo,
     metricId: id,
     budgetInsight: budget

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

@@ -4,6 +4,7 @@
 }
 
 .title {
+  align-items: center;
   color: var(--color-text-ultra-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
@@ -12,29 +13,6 @@
   white-space: nowrap;
 }
 
-.titleLabel {
-  flex: 0 0 auto;
-}
-
-.readMoreBtn {
-  appearance: none;
-  padding: 0;
-  border: 0;
-  background: none;
-  cursor: pointer;
-  /* simulate link */
-  color: var(--color-primary);
-  text-decoration: underline;
-  line-height: var(--space-small);
-}
-
-.readMoreBtn:hover,
-.readMoreBtn:active,
-.readMoreBtn:focus {
-  color: var(--color-primary-dark);
-  text-decoration: none;
-}
-
 .budgetInfo {
   position: absolute;
   right: 0;

package/lib-esm/components/total-size-type-title/total-size-type-title.js

@@ -5,7 +5,8 @@ import config from '../../config.json';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
-import { Popover } from '../../ui/popover';
+import { Icon } from '../../ui/icon';
+import { HoverCard } from '../../ui/hover-card';
 import css from './total-size-type-title.module.css';
 export const TotalSizeTypeTitle = _ref => {
   let {
@@ -14,8 +15,10 @@ export const TotalSizeTypeTitle = _ref => {
   return /*#__PURE__*/React.createElement(FlexStack, {
     space: "xxxsmall",
     className: cx(css.title, className)
-  }, /*#__PURE__*/React.createElement("span", null, I18N.ASSET_TOTALS), /*#__PURE__*/React.createElement(Popover, {
-    icon: "help"
+  }, /*#__PURE__*/React.createElement("span", null, I18N.ASSET_TOTALS), /*#__PURE__*/React.createElement(HoverCard, {
+    label: /*#__PURE__*/React.createElement(Icon, {
+      glyph: "help"
+    })
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "xxxsmall"
   }, /*#__PURE__*/React.createElement("p", null, I18N.ASSET_TOTALS_INFO), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {

package/lib-esm/constants.js

@@ -27,5 +27,5 @@ export const ASSETS_SIZES_FILE_TYPE_MAP = FILE_TYPES.reduce((agg, fileType) => (
 }), {});
 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_MODULES = ['moduleCount', 'duplicateModulesCount', 'duplicateCode'];
 export const METRICS_WEBPACK_PACKAGES = ['packageCount', 'duplicatePackagesCount'];

package/lib-esm/css/default.css

@@ -1,18 +1,29 @@
+@import url("~modern-css-reset/dist/reset.css");
+
 :root {
   --chart-height: 180px;
 }
 
+/** modern-css-reset updates */
+pre,
+ul,
+ol,
+button {
+  margin: 0;
+}
+
 html {
+  font-family: var(--font-family);
   font-size: 81.25%;
-  line-height: 1.8461;
+  line-height: 1.6;
 }
 
 body {
+  background: var(--color-background);
   color: var(--color-text);
 }
 
-h1, h2, h3, h4, h5 {
-  margin-bottom: var(--space-small);
+h1, h2, h3, h4, h5, h6 {
   color: var(--color-heading);
   font-weight: 500;
 }

package/lib-esm/css/variables.css

@@ -23,30 +23,30 @@
   --size-xxlarge: 1.424rem;
   --size-xxxlarge: 1.602rem;
 
-  --line-height: var(--space-medium);
+  --line-height: 1.6em;
 
   /*
    * Color scheme:
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23636568&mcgpalette4=%233385d6&themename=mcgtheme
    * https://coolors.co/3385d6-dd555e-63bf5e-f7e37d-192339
+   * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%235b5d60&mcgpalette4=%233385d6&themename=mcgtheme
    */
   --color-gray-25: #fafafa;
-  --color-gray-50: #eceded;
-  --color-gray-100: #d0d1d2;
-  --color-gray-200: #b1b2b4;
-  --color-gray-300: #929395;
-  --color-gray-400: #7a7c7f;
-  --color-gray-500: #636568;
-  --color-gray-600: #5b5d60;
-  --color-gray-700: #515355;
-  --color-gray-800: #47494b;
-  --color-gray-900: #35373a;
+  --color-gray-50: #e4e4e5;
+  --color-gray-100: #cececf;
+  --color-gray-200: #adaeb0;
+  --color-gray-300: #8c8e90;
+  --color-gray-400: #747578;
+  --color-gray-500: #5b5d60;
+  --color-gray-600: #535558;
+  --color-gray-700: #494b4e;
+  --color-gray-800: #404144;
+  --color-gray-900: #2f3033;
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
   --color-gray: var(--color-gray-500);
-  --color-gray-dark: var(--color-gray-700);
-  --color-gray-ultra-dark: var(--color-gray-900);
+  --color-gray-dark: var(--color-gray-600);
+  --color-gray-ultra-dark: var(--color-gray-700);
 
   --color-red-25: #fdf5f6;
   --color-red-50: #fbebec;
@@ -181,9 +181,9 @@
   --layer-high: 1000;
   --layer-xhigh: 10000;
 
-  --radius-small: var(--space-xxxsmall);
-  --radius-medium: var(--space-xxsmall);
-  --radius-large: var(--space-small);
+  --radius-small: 3px;
+  --radius-medium: var(--space-xxxsmall);
+  --radius-large: var(--space-xxsmall);
 
   /** Layout */
   --max-width: 80rem;