@bundle-stats/ui 3.3.0-alpha.1 → 3.4.0-alpha.3

package/src/components/bundle-packages/bundle-packages.jsx

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import {
@@ -15,8 +15,9 @@ import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
 import { EmptySet } from '../../ui/empty-set';
 import { Filters } from '../../ui/filters';
-import { Popover } from '../../ui/popover';
+import { HoverCard } from '../../ui/hover-card';
 import { SortDropdown } from '../../ui/sort-dropdown';
+import { Tag } from '../../ui/tag';
 import { Toolbar } from '../../ui/toolbar';
 import { FileName } from '../../ui/file-name';
 import { ComponentLink } from '../component-link';
@@ -27,27 +28,28 @@ import { MetricsTableTitle } from '../metrics-table-title';
 import css from './bundle-packages.module.css';
 
 const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponentLink }) => {
-  const normalizedPackagePath = path || `node_modules/${fullName.split(PACKAGES_SEPARATOR).join('/node_modules/')}/`;
+  const normalizedPackagePath =
+    path || `node_modules/${fullName.split(PACKAGES_SEPARATOR).join('/node_modules/')}/`;
   const [normalizedName, packageId] = name.split(PACKAGE_ID_SEPARATOR);
 
   return (
-    <Stack space="xxsmall" className={css.packagePopover}>
+    <Stack space="xsmall" className={css.packageHoverCard}>
       <Stack space="xxxsmall">
-        <h3 className={css.packagePopoverTitle}>
+        <h3 className={css.packageHoverCardTitle}>
           {normalizedName}
           {packageId && (
-            <span className={css.packagePopoverTitleIndex}>
+            <span className={css.packageHoverCardTitleIndex}>
               {`${PACKAGE_ID_SEPARATOR}${packageId}`}
             </span>
           )}
         </h3>
-        <p className={css.packagePopoverPath}>
-          <FileName className={css.packagePopoverPathValue} name={normalizedPackagePath} />
+        <p className={css.packageHoverCardPath}>
+          <FileName className={css.packageHoverCardPathValue} name={normalizedPackagePath} />
         </p>
       </Stack>
 
-      <ul className={css.packagePopoverList}>
-        <li className={css.packagePopoverItem}>
+      <ul className={css.packageHoverCardList}>
+        <li className={css.packageHoverCardItem}>
           <a
             href={`https://www.npmjs.com/package/${normalizedName}`}
             target="_blank"
@@ -56,7 +58,7 @@ const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponen
             npmjs.com
           </a>
         </li>
-        <li className={css.packagePopoverItem}>
+        <li className={css.packageHoverCardItem}>
           <a
             href={`https://bundlephobia.com/result?p=${normalizedName}`}
             target="_blank"
@@ -67,7 +69,7 @@ const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponen
         </li>
       </ul>
 
-      <Stack space="xxxsmall" className={css.packagePopover.actions}>
+      <Stack space="xxxsmall" className={css.packageHoverCardActions}>
         {duplicate && (
           <div>
             <CustomComponentLink {...getBundlePackagesByNameComponentLink(normalizedName)}>
@@ -96,38 +98,86 @@ PackagePopoverContent.defaultProps = {
   path: '',
 };
 
-const PackageRowHeader = ({ item, CustomComponentLink }) => {
-  const packageNames = item.label.split(PACKAGES_SEPARATOR);
-  const { path } = item.runs[0] || {};
+const PackageName = ({ packageName, path, showDuplicateFlag, row, CustomComponentLink }) => {
+  const [showHoverCard, setHoverCard] = useState(false);
+  const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
+
+  const label = useMemo(
+    () => (
+      <>
+        {showDuplicateFlag && row.duplicate && (
+          <Tag
+            className={css.packageNameTagDuplicate}
+            title="Duplicate package"
+            kind={Tag.KINDS.DANGER}
+            size={Tag.SIZES.SMALL}
+          />
+        )}
+        <span className={css.packageNameLabel}>{packageName}</span>
+      </>
+    ),
+    [packageName, showDuplicateFlag, row],
+  );
+
+  if (!showHoverCard) {
+    return (
+      <span className={css.packageName} onMouseEnter={handleOnMouseEnter}>
+        {label}
+      </span>
+    );
+  }
 
   return (
-    <span className={css.packageNames}>
-      {packageNames.map((packageName, index) => {
-        // Render duplicate flag only for the last entry
-        const duplicateFlag = index === packageNames.length - 1 && item.duplicate && (
-          <span className={css.duplicate} title="Duplicate package">
-            D
-          </span>
-        );
+    <HoverCard className={css.packageName} label={<span className={css.packageName}>{label}</span>}>
+      <PackagePopoverContent
+        name={packageName}
+        path={path}
+        fullName={row.label}
+        duplicate={row.duplicate}
+        CustomComponentLink={CustomComponentLink}
+      />
+    </HoverCard>
+  );
+};
 
-        return (
-          <Popover className={css.packageName} icon={duplicateFlag} label={packageName}>
-            <PackagePopoverContent
-              name={packageName}
-              path={path}
-              fullName={item.label}
-              duplicate={item.duplicate}
-              CustomComponentLink={CustomComponentLink}
-            />
-          </Popover>
-        );
-      })}
+PackageName.propTypes = {
+  packageName: PropTypes.string.isRequired,
+  path: PropTypes.string.isRequired,
+  showDuplicateFlag: PropTypes.bool.isRequired,
+  row: PropTypes.shape({
+    label: PropTypes.string,
+    duplicate: PropTypes.bool,
+    runs: PropTypes.arrayOf(
+      PropTypes.shape({
+        path: PropTypes.string,
+      }),
+    ).isRequired,
+  }).isRequired,
+  CustomComponentLink: PropTypes.elementType.isRequired,
+};
+
+const RowHeader = ({ row, CustomComponentLink }) => {
+  const packageNames = row.label.split(PACKAGES_SEPARATOR);
+  const { path } = row.runs[0] || {};
+
+  return (
+    <span className={css.packageNames}>
+      {packageNames.map((packageName, index) => (
+        <PackageName
+          packageName={packageName}
+          path={path}
+          // Render duplicate flag only for the last entry
+          showDuplicateFlag={index === packageNames.length - 1}
+          row={row}
+          CustomComponentLink={CustomComponentLink}
+        />
+      ))}
     </span>
   );
 };
 
-PackageRowHeader.propTypes = {
-  item: PropTypes.shape({
+RowHeader.propTypes = {
+  row: PropTypes.shape({
     label: PropTypes.string,
     duplicate: PropTypes.bool,
     runs: PropTypes.arrayOf(
@@ -168,7 +218,7 @@ export const BundlePackages = (props) => {
   );
 
   const renderRowHeader = useCallback(
-    (item) => <PackageRowHeader item={item} CustomComponentLink={CustomComponentLink} />,
+    (row) => <RowHeader row={row} CustomComponentLink={CustomComponentLink} />,
     [CustomComponentLink],
   );
 
@@ -186,7 +236,7 @@ export const BundlePackages = (props) => {
           </FlexStack>
         )}
       >
-        <FlexStack>
+        <FlexStack space="xxsmall">
           <MetricsTableSearch
             className={css.toolbarSearch}
             placeholder="Search by name"

package/src/components/bundle-packages/bundle-packages.module.css

@@ -12,23 +12,8 @@
   margin-right: -1px; /** collapse border */
 }
 
-.duplicate {
-  margin-right: var(--space-xxxsmall);
-  display: inline-block;
-  width: var(--space-small);
-  height: var(--space-small);
-  font-size: 10px;
-  font-weight: bold;
-  line-height: var(--space-small);
-  text-align: center;
-  text-transform: uppercase;
-  vertical-align: middle;
-
-  background: var(--color-danger);
-  color: var(--color-light);
-}
-
 .packageName {
+  display: inline-block;
   color: var(--color-text-light);
 }
 
@@ -43,22 +28,33 @@
   color: var(--color-text-ultra-light);
 }
 
-.packagePopover {
-  min-width: 320px;
+.packageNameTagDuplicate {
+  margin-right: var(--space-xxxsmall);
+  vertical-align: middle;
+}
+
+.packageNameLabel {
+  vertical-align: middle;
+}
+
+.packageNameTagDuplicate::before {
+  content: 'd';
 }
 
-.packagePopoverTitleIndex {
+
+.packageHoverCardTitleIndex {
   color: var(--color-text-light);
   font-weight: normal;
 }
 
-.packagePopoverPathValue {
+.packageHoverCardPathValue {
+  width: 100%;
   padding: var(--space-xxxsmall);
   background: var(--color-highlight-warning);
   font-family: var(--font-family-monospace);
 }
 
-.packagePopoverList {
+.packageHoverCardList {
   padding: 0;
   list-style: inside;
 }

package/src/components/delta/delta.module.css

@@ -28,6 +28,7 @@
 }
 
 .inverted {
+  border-radius: var(--radius-small);
   background-color: var(--color-gray-ultra-light);
   color: var(--color-light);
 }

package/src/components/job-header/job-header.jsx

@@ -8,6 +8,7 @@ import { SOURCE_PATH_WEBPACK_STATS, formatDate, formatTime } from '@bundle-stats
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { Icon } from '../../ui/icon';
+import { Tag } from '../../ui/tag';
 import css from './job-header.module.css';
 
 export const JobHeader = (props) => {
@@ -20,7 +21,7 @@ export const JobHeader = (props) => {
     <Stack className={rootClassName} space="xxsmall">
       <h1 className={css.title}>
         <span>{`#${job.internalBuildNumber}`}</span>
-        {tag && <span className={css.tag}>{tag}</span>}
+        {tag && <Tag className={css.tag}>{tag}</Tag>}
       </h1>
       <FlexStack className={css.meta} space="xxsmall">
         {builtAt && (

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

@@ -12,7 +12,8 @@ import styles from './metrics-table.module.css';
 
 const METRIC_TYPE_DATA = getGlobalMetricType(null, METRIC_TYPE_FILE_SIZE);
 
-const getRowsRunTotal = (rows, runIndex) => sum(rows.map((row) => get(row, `runs[${runIndex}].value`, 0)));
+const getRowsRunTotal = (rows, runIndex) =>
+  sum(rows.map((row) => get(row, `runs[${runIndex}].value`, 0)));
 
 const getHeaderLabelCells = (rows) => (run, runIndex, runs) => {
   const isBaseline = runIndex === runs.length - 1;
@@ -102,46 +103,58 @@ const getHeaderRows = (runs, items, showHeaderSum, title) => [
     : []),
 ];
 
-const generateRowCells = (item, index, items) => {
-  const isBaseline = index === items.length - 1;
+const MetricsTableRow = ({ item, renderRowHeader }) => (
+  <Table.Tr className={cx(!item.changed && styles.unchanged)}>
+    <Table.Th className={styles.metricName}>{renderRowHeader(item)}</Table.Th>
 
-  // eslint-disable-next-line react/destructuring-assignment
-  if (!item || typeof item.value === 'undefined') {
-    return ['-', ...(!isBaseline ? [''] : [])];
-  }
+    {item.runs.map((run, index) => {
+      const isBaseline = index === item.runs.length - 1;
+      const valueClassName = cx(styles.value, !isBaseline && styles.current);
 
-  const { displayValue, deltaPercentage, displayDeltaPercentage, deltaType } = item;
+      // Empty cells if no value
+      if (!run || typeof run.value === 'undefined') {
+        return (
+          <>
+            <Table.Td className={valueClassName}>-</Table.Td>
+            {!isBaseline && <Table.Td className={styles.delta} />}
+          </>
+        );
+      }
 
-  const cells = [<Metric value={displayValue} />];
+      const { displayValue, deltaPercentage, displayDeltaPercentage, deltaType } = run;
 
-  if (!isBaseline) {
-    cells.push(
-      typeof deltaPercentage === 'number' && (
-        <Delta displayValue={displayDeltaPercentage} deltaType={deltaType} />
-      ),
-    );
-  }
+      return (
+        <>
+          <Table.Td className={valueClassName}>
+            <Metric value={displayValue} />
+          </Table.Td>
+          {!isBaseline && typeof deltaPercentage === 'number' && (
+            <Table.Td className={styles.delta}>
+              <Delta displayValue={displayDeltaPercentage} deltaType={deltaType} />
+            </Table.Td>
+          )}
+        </>
+      );
+    })}
+  </Table.Tr>
+);
 
-  return cells;
+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,
 };
 
-const getRows = (runs, items, renderRowHeader) =>
-  items.map((item, index) => {
-    const { changed } = item;
-
-    return {
-      key: item?.key || index,
-      className: changed ? '' : styles.unchanged,
-      cells: [
-        // Metric name
-        renderRowHeader(item),
-
-        // Metric item values
-        ...item.runs.map(generateRowCells).flat(),
-      ],
-    };
-  });
-
 export const MetricsTable = ({
   className,
   renderRowHeader,
@@ -151,9 +164,11 @@ export const MetricsTable = ({
   showHeaderSum,
   headerRows,
   title,
+  ...restProps
 }) => {
   const { headers, columnClassNames } = useMemo(() => {
     const headerColumns = getHeaderRows(runs, items, showHeaderSum, title);
+
     return {
       headers: [...headerRows, ...headerColumns],
       // First header row has the column class names
@@ -161,8 +176,6 @@ export const MetricsTable = ({
     };
   }, [headerRows, runs, items, showHeaderSum, title]);
 
-  const rows = useMemo(() => getRows(runs, items, renderRowHeader), [runs, items, renderRowHeader]);
-
   const rootClassName = cx(
     styles.root,
     className,
@@ -171,7 +184,7 @@ export const MetricsTable = ({
   );
 
   return (
-    <Table className={rootClassName} compact>
+    <Table className={rootClassName} compact {...restProps}>
       <Table.THead>
         {headers.map((headerRow) => {
           const { cells, className: rowClassName } = headerRow.cells
@@ -188,13 +201,9 @@ export const MetricsTable = ({
         })}
       </Table.THead>
       <Table.TBody>
-        {!isEmpty(rows) ? (
-          rows.map(({ key, className: rowClassName, cells }) => (
-            <Table.Tr key={key} className={rowClassName}>
-              {cells.map((cell, index) => (
-                <Table.Td className={columnClassNames[index]}>{cell}</Table.Td>
-              ))}
-            </Table.Tr>
+        {!isEmpty(items) ? (
+          items.map((item) => (
+            <MetricsTableRow key={item.key} item={item} renderRowHeader={renderRowHeader} />
           ))
         ) : (
           <Table.Tr>

package/src/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/src/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/src/components/metrics-table-title/metrics-table-title.jsx

@@ -5,7 +5,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) => {
@@ -13,26 +14,24 @@ export const MetricsTableTitle = (props) => {
   const rootClassName = cx(css.root, className);
 
   return (
-    <Stack space="xxxsmall" className={rootClassName}>
-      <FlexStack space="xxxsmall">
-        <span>{title}</span>
-        {info && <span className={css.info}>{info}</span>}
-        {(popoverInfo || popoverHref) && (
-          <Popover icon="help">
-            <Stack space="xxxsmall">
-              {popoverInfo && <p>{popoverInfo}</p>}
-              {popoverHref && (
-                <p>
-                  <a href={popoverHref} target="_blank" rel="noreferrer">
-                    {I18N.READ_MORE}
-                  </a>
-                </p>
-              )}
-            </Stack>
-          </Popover>
-        )}
-      </FlexStack>
-    </Stack>
+    <FlexStack space="xxxsmall" className={rootClassName}>
+      <span>{title}</span>
+      {info && <span className={css.info}>{info}</span>}
+      {(popoverInfo || popoverHref) && (
+        <HoverCard label={<Icon glyph="help" />}>
+          <Stack space="xxxsmall">
+            {popoverInfo && <p>{popoverInfo}</p>}
+            {popoverHref && (
+              <p>
+                <a href={popoverHref} target="_blank" rel="noreferrer">
+                  {I18N.READ_MORE}
+                </a>
+              </p>
+            )}
+          </Stack>
+        </HoverCard>
+      )}
+    </FlexStack>
   );
 };
 

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

@@ -20,7 +20,7 @@ export const ModuleInfo = (props) => {
   } = props;
 
   return (
-    <Stack space="small" className={className}>
+    <Stack space="xsmall" className={className}>
       {item.runs.map((run, index) => {
         const TitleComponent = index !== 0 ? 'h4' : 'h3';
         const key = `module-info-${run?.name || index}-${index}`;
@@ -30,7 +30,7 @@ export const ModuleInfo = (props) => {
             <TitleComponent>{labels[index]}</TitleComponent>
             {index === 0 && !isEmpty(run?.chunkIds) && (
               <div className={css.chunks}>
-                <strong className={css.chunksTitle}>Chunks:</strong>
+                <span className={css.chunksTitle}>Chunks:</span>
                 {run.chunkIds.map((chunkId) => {
                   const chunk = find(chunks, { id: chunkId });
 
@@ -51,11 +51,7 @@ export const ModuleInfo = (props) => {
               </div>
             )}
 
-            <FileName
-              className={css.fileName}
-              as="code"
-              name={run?.name || '-'}
-            />
+            <FileName className={css.fileName} as="code" name={run?.name || '-'} />
           </Stack>
         );
       })}

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

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

package/src/components/summary/summary.jsx

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