@bundle-stats/ui 4.3.0-beta.3 → 4.3.0-rc.1

package/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.jsx

@@ -5,29 +5,32 @@ import map from 'lodash/map';
 import max from 'lodash/max';
 import sum from 'lodash/sum';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
-import { getBundleAssetsFileTypeComponentLink } from '@bundle-stats/utils';
+import { getBundleAssetsFileTypeComponentLink, getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
 
 import { ASSETS_SIZES_FILE_TYPE_MAP } from '../../constants';
 import { HorizontalBarChart } from '../../ui/horizontal-bar-chart';
 import { ComponentLink } from '../component-link'
 import { getColors } from '../../utils';
 import { Stack } from '../../layout/stack';
-import { SummaryItem } from '../summary-item';
+import { MetricRunInfo } from '../metric-run-info';
 import css from './bundle-assets-totals-chart-bars.module.css';
 
-const getTooltip = (items, jobs, itemIndex, runIndex) => () => (
-  <SummaryItem
-    className={css.itemTooltip}
-    id={items?.[itemIndex]?.key}
-    data={{
-      current: items?.[itemIndex]?.runs?.[runIndex]?.value || 0,
-      baseline: items?.[itemIndex]?.runs?.[runIndex + 1]?.value || 0,
-    }}
-    showDelta={runIndex < jobs.length - 1}
-    showBaselineValue={runIndex < jobs.length - 1}
-    size="large"
-  />
-);
+const getTooltip = (items, jobs, itemIndex, runIndex) => () => {
+  const metricId = items?.[itemIndex]?.key;
+  const current = items?.[itemIndex]?.runs?.[runIndex]?.value || 0;
+  const baseline = items?.[itemIndex]?.runs?.[runIndex + 1]?.value;
+
+  return (
+    <MetricRunInfo
+      className={css.itemTooltip}
+      metricId={metricId}
+      current={current}
+      baseline={baseline}
+      showMetridDescription={false}
+      size="large"
+    />
+  );
+};
 
 export const BundleAssetsTotalsChartBars = ({
   className,

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

@@ -107,15 +107,17 @@ const RowHeader = ({ row, chunks, labels, CustomComponentLink }) => {
   }
 
   return (
-    <HoverCard label={content}>
-      <ModuleInfo
-        className={css.namePopover}
-        item={row}
-        chunks={chunks}
-        chunkIds={chunkIds}
-        labels={labels}
-        customComponentLink={CustomComponentLink}
-      />
+    <HoverCard label={content} hoverCardClassName={css.hoverCard}>
+      {({ close }) => (
+        <ModuleInfo
+          item={row}
+          chunks={chunks}
+          chunkIds={chunkIds}
+          labels={labels}
+          customComponentLink={CustomComponentLink}
+          onClick={close}
+        />
+      )}
     </HoverCard>
   );
 };

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

@@ -25,3 +25,8 @@
   display: inline;
   vertical-align: middle;
 }
+
+.hoverCard {
+  max-width: var(--entry-info-hovercard-width);
+}
+

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

@@ -1,17 +1,10 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import {
-  PACKAGE_FILTERS,
-  PACKAGES_SEPARATOR,
-  PACKAGE_ID_SEPARATOR,
-  getBundleModulesBySearch,
-  getBundlePackagesByNameComponentLink,
-} from '@bundle-stats/utils';
+import { PACKAGE_FILTERS, PACKAGES_SEPARATOR } from '@bundle-stats/utils';
 
 import config from '../../config.json';
 import I18N from '../../i18n';
-import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
 import { EmptySet } from '../../ui/empty-set';
 import { Filters } from '../../ui/filters';
@@ -19,12 +12,12 @@ 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';
 import { MetricsTable } from '../metrics-table';
 import { MetricsTableSearch } from '../metrics-table-search';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
+import { PackageInfo } from '../package-info';
 import css from './bundle-packages.module.css';
 
 const getDropdownFilters = ({ compareMode, filters }) => ({
@@ -39,86 +32,19 @@ const getDropdownFilters = ({ compareMode, filters }) => ({
   },
 });
 
-
-const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponentLink }) => {
-  const fallbackPackagePath = `node_modules/${fullName.split(PACKAGES_SEPARATOR).join('/node_modules/')}`;
-  const normalizedPackagePath = `${path || fallbackPackagePath}/`;
-  const [normalizedName, packageId] = name.split(PACKAGE_ID_SEPARATOR);
-
-  return (
-    <Stack space="xsmall" className={css.packageHoverCard}>
-      <Stack space="xxxsmall">
-        <h3 className={css.packageHoverCardTitle}>
-          {normalizedName}
-          {packageId && (
-            <span className={css.packageHoverCardTitleIndex}>
-              {`${PACKAGE_ID_SEPARATOR}${packageId}`}
-            </span>
-          )}
-        </h3>
-        <p className={css.packageHoverCardPath}>
-          <FileName className={css.packageHoverCardPathValue} name={normalizedPackagePath} />
-        </p>
-      </Stack>
-
-      <ul className={css.packageHoverCardList}>
-        <li className={css.packageHoverCardItem}>
-          <a
-            href={`https://www.npmjs.com/package/${normalizedName}`}
-            target="_blank"
-            rel="noreferrer"
-          >
-            npmjs.com
-          </a>
-        </li>
-        <li className={css.packageHoverCardItem}>
-          <a
-            href={`https://bundlephobia.com/result?p=${normalizedName}`}
-            target="_blank"
-            rel="noreferrer"
-          >
-            bundlephobia.com
-          </a>
-        </li>
-      </ul>
-
-      <Stack space="xxxsmall" className={css.packageHoverCardActions}>
-        {duplicate && (
-          <div>
-            <CustomComponentLink {...getBundlePackagesByNameComponentLink(normalizedName)}>
-              View all duplicate instances
-            </CustomComponentLink>
-          </div>
-        )}
-
-        <CustomComponentLink {...getBundleModulesBySearch(normalizedPackagePath)}>
-          Search modules by package path
-        </CustomComponentLink>
-      </Stack>
-    </Stack>
-  );
-};
-
-PackagePopoverContent.propTypes = {
-  name: PropTypes.string.isRequired,
-  path: PropTypes.string,
-  fullName: PropTypes.string.isRequired,
-  duplicate: PropTypes.bool.isRequired,
-  CustomComponentLink: PropTypes.elementType.isRequired,
-};
-
-PackagePopoverContent.defaultProps = {
-  path: '',
-};
-
-const PackageName = ({ packageName, path, showDuplicateFlag, row, CustomComponentLink }) => {
+const PackageName = ({ packageName, showDetails, row, labels, CustomComponentLink }) => {
   const [showHoverCard, setHoverCard] = useState(false);
-  const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
+
+  const handleOnMouseEnter = useCallback(() => {
+    if (showDetails) {
+      setHoverCard(true);
+    }
+  }, [setHoverCard, showDetails]);
 
   const label = useMemo(
     () => (
       <>
-        {showDuplicateFlag && row.duplicate && (
+        {showDetails && row.duplicate && (
           <Tag
             className={css.packageNameTagDuplicate}
             title="Duplicate package"
@@ -129,7 +55,7 @@ const PackageName = ({ packageName, path, showDuplicateFlag, row, CustomComponen
         <span className={css.packageNameLabel}>{packageName}</span>
       </>
     ),
-    [packageName, showDuplicateFlag, row],
+    [packageName, showDetails, row],
   );
 
   if (!showHoverCard) {
@@ -141,22 +67,23 @@ const PackageName = ({ packageName, path, showDuplicateFlag, row, CustomComponen
   }
 
   return (
-    <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 label={label} className={css.packageName} hoverCardClassName={css.hoverCard}>
+      {({ close }) => (
+        <PackageInfo
+          name={packageName}
+          item={row}
+          labels={labels}
+          CustomComponentLink={CustomComponentLink}
+          onClick={close}
+        />
+      )}
     </HoverCard>
   );
 };
 
 PackageName.propTypes = {
   packageName: PropTypes.string.isRequired,
-  path: PropTypes.string.isRequired,
-  showDuplicateFlag: PropTypes.bool.isRequired,
+  showDetails: PropTypes.bool.isRequired,
   row: PropTypes.shape({
     label: PropTypes.string,
     duplicate: PropTypes.bool,
@@ -169,19 +96,17 @@ PackageName.propTypes = {
   CustomComponentLink: PropTypes.elementType.isRequired,
 };
 
-const RowHeader = ({ row, CustomComponentLink }) => {
+const RowHeader = ({ row, labels, 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}
+          labels={labels}
+          showDetails={index === packageNames.length - 1}
           CustomComponentLink={CustomComponentLink}
         />
       ))}
@@ -226,28 +151,40 @@ export const BundlePackages = (props) => {
     [jobs, filters],
   );
 
-  const metricsTableTitle = useMemo(() => (
-    <MetricsTableTitle
-      title={I18N.PACKAGES}
-      info={`${items.length}/${totalRowCount}`}
-      popoverInfo={I18N.PACKAGES_INFO}
-      popoverHref={config.documentation.packages}
-    />
-  ), [items, totalRowCount]);
+  const metricsTableTitle = useMemo(
+    () => (
+      <MetricsTableTitle
+        title={I18N.PACKAGES}
+        info={`${items.length}/${totalRowCount}`}
+        popoverInfo={I18N.PACKAGES_INFO}
+        popoverHref={config.documentation.packages}
+      />
+    ),
+    [items, totalRowCount],
+  );
 
   const renderRowHeader = useCallback(
-    (row) => <RowHeader row={row} CustomComponentLink={CustomComponentLink} />,
-    [CustomComponentLink],
+    (row) => (
+      <RowHeader
+        row={row}
+        labels={jobs.map((job) => job?.label)}
+        CustomComponentLink={CustomComponentLink}
+      />
+    ),
+    [CustomComponentLink, jobs],
   );
 
-  const emptyMessage = useMemo(() => (
-    <EmptySet
-      resources="packages"
-      filtered={totalRowCount !== 0}
-      handleResetFilters={resetFilters}
-      handleViewAll={resetAllFilters}
-    />
-  ), [totalRowCount, resetFilters, resetAllFilters]);
+  const emptyMessage = useMemo(
+    () => (
+      <EmptySet
+        resources="packages"
+        filtered={totalRowCount !== 0}
+        handleResetFilters={resetFilters}
+        handleViewAll={resetAllFilters}
+      />
+    ),
+    [totalRowCount, resetFilters, resetAllFilters],
+  );
 
   return (
     <section className={cx(css.root, className)}>

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

@@ -12,6 +12,10 @@
   margin-right: -1px; /** collapse border */
 }
 
+.hoverCard {
+  max-width: var(--entry-info-hovercard-width);
+}
+
 .packageName {
   display: inline-block;
   color: var(--color-text-light);

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

@@ -1,6 +1,7 @@
 .root {
-  white-space: nowrap;
   color: var(--color-gray-ultra-light);
+  font-family: var(--font-family-fixed);
+  white-space: nowrap;
 }
 
 .HIGH_NEGATIVE {

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

@@ -0,0 +1,33 @@
+.fileName {
+  max-width: 100%;
+  padding: 0 2px;
+  background: var(--color-highlight-warning);
+}
+
+.label {
+  font-size: var(--size-medium);
+}
+
+.runs {
+  font-size: var(--size-small);
+}
+
+.runs .runsCell {
+  padding: var(--space-xxxsmall) var(--space-xxsmall);
+}
+
+.runs .runsColJob {
+  white-space: nowrap;
+}
+
+.runs .runsColName {
+  width: 100%;
+}
+
+.runs .runsColSize {
+  text-align: right;
+}
+
+.size {
+  font-family: var(--font-family-fixed);
+}

package/src/components/entry-info/entry-info.stories.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { getWrapperDecorator } from '../../stories';
+import { EntryInfo } from '.';
+
+export default {
+  title: 'Components/EntryInfo',
+  component: EntryInfo,
+  decorators: [getWrapperDecorator()],
+};
+
+const RUNS = [
+  {
+    name: 'static/vendor.abcd1234.js',
+    value: 982690,
+  },
+  {
+    name: 'static/vendor.defg5678.js',
+    value: 1022530,
+    displayValue: '998.56KiB',
+  },
+];
+
+export const Default = () => (
+  <EntryInfo
+    item={{
+      label: 'static/vendor.js',
+      runs: RUNS as any,
+    }}
+    labels={['Job #2', 'Job #1']}
+  />
+);
+
+export const Added = () => (
+  <EntryInfo
+    item={{
+      label: 'static/vendor.js',
+      runs: [RUNS[0], null] as any,
+    }}
+    labels={['Job #2', 'Job #1']}
+  />
+);
+
+export const Removed = () => (
+  <EntryInfo
+    item={{
+      label: 'static/vendor.js',
+      runs: [null, RUNS[1]] as any,
+    }}
+    labels={['Job #2', 'Job #1']}
+  />
+);
+
+export const WithCustomContent = () => (
+  <EntryInfo
+    item={{
+      label: 'static/vendor.js',
+      runs: RUNS as any,
+    }}
+    labels={['Job #2', 'Job #1']}
+    tags={<strong>Some tags</strong>}
+  >
+    <div>
+      Custom entry info
+    </div>
+  </EntryInfo>
+);

package/src/components/entry-info/entry-info.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import cx from 'classnames';
+import { METRIC_TYPES, MetricRunInfo, getMetricRunInfo } from '@bundle-stats/utils';
+
+import { Stack } from '../../layout/stack';
+import { Separator } from '../../layout/separator';
+import { FileName } from '../../ui/file-name';
+import { Table } from '../../ui/table';
+import { RunInfo } from '../run-info';
+import css from './entry-info.module.css';
+
+interface EntryRun {
+  name: string;
+}
+
+interface EntryInfoProps {
+  itemTitle?: React.ReactNode;
+  item: {
+    label: string;
+    runs: Array<EntryRun & MetricRunInfo>;
+  };
+  labels: Array<string>;
+  runNameSelector?: string;
+  runNameLabel?: string;
+  tags?: React.ReactNode;
+}
+
+export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) => {
+  const {
+    className = '',
+    itemTitle = null,
+    item,
+    labels,
+    runNameSelector = 'name',
+    runNameLabel = 'Path',
+    children,
+    tags = null,
+  } = props;
+
+  const baselineRun = item.runs.length > 1 ? item.runs?.[item.runs.length - 1] : null;
+
+  // Get the metric run info to handle added/removed cases
+  const metricRunInfo = getMetricRunInfo(
+    METRIC_TYPES.METRIC_TYPE_FILE_SIZE,
+    item.runs?.[0]?.value,
+    baselineRun?.value || 0,
+  );
+
+  return (
+    <Stack space="small" className={cx(css.root, className)}>
+      <Stack space="xxxsmall">
+        {tags}
+        <h3 className={css.label}>
+          <FileName as="code" name={itemTitle || item.label} className={css.fileName} />
+        </h3>
+      </Stack>
+
+      <RunInfo
+        current={metricRunInfo.displayValue}
+        delta={metricRunInfo.displayDeltaPercentage}
+        deltaType={metricRunInfo.deltaType}
+        baseline={baselineRun?.displayValue || '0B'}
+        size="large"
+      />
+
+      {children && (
+        <Stack space="small">
+          <Separator />
+          <Stack space="xxxsmall">{children}</Stack>
+        </Stack>
+      )}
+
+      <Table outline className={css.runs}>
+        <Table.THead>
+          <Table.Tr>
+            <Table.Th className={cx(css.runsCell, css.runsColJob)}>&nbsp;</Table.Th>
+            <Table.Th className={cx(css.runsCell, css.runsColName)}>{runNameLabel}</Table.Th>
+            <Table.Th className={cx(css.runsCell, css.runsColSize)}>Size</Table.Th>
+          </Table.Tr>
+        </Table.THead>
+        <Table.TBody>
+          {item.runs.map((run, index) => {
+            const key = `info-${run?.name || index}-${index}`;
+
+            return (
+              <Table.Tr key={key}>
+                <Table.Th className={cx(css.runsCell, css.runsColJob)}>{labels[index]}</Table.Th>
+                <Table.Td className={cx(css.runsCell, css.runsColName)}>
+                  <FileName
+                    className={css.fileName}
+                    as="code"
+                    name={(run as any)?.[runNameSelector] || '-'}
+                  />
+                </Table.Td>
+                <Table.Td className={cx(css.runsCell, css.runsColSize)}>
+                  <span className={css.size}>
+                    {typeof run?.value !== 'undefined' ? run.value : '-'}
+                  </span>
+                </Table.Td>
+              </Table.Tr>
+            );
+          })}
+        </Table.TBody>
+      </Table>
+    </Stack>
+  );
+};

package/src/components/entry-info/index.ts

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

package/src/components/index.js

@@ -6,17 +6,19 @@ export { BundlePackages } from './bundle-packages';
 export { BundleModules } from './bundle-modules';
 export { ComponentLink } from './component-link';
 export { Delta } from './delta';
+export { InsightIcon } from './insight-icon';
 export { Insights } from './insights';
 export { JobName } from './job-name';
 export { JobHeader } from './job-header';
 export { JobsHeader } from './jobs-header';
 export { LighthouseTable } from './lighthouse-table';
 export { Metric } from './metric';
+export { MetricRunInfo, MetricRunInfoProps } from './metric-run-info';
 export { MetricsTable } from './metrics-table';
 export { MetricsTableOptions } from './metrics-table-options';
 export { MetricsTableSearch } from './metrics-table-search';
 export { MetricsTableTitle } from './metrics-table-title';
 export { ModuleInfo } from './module-info';
-export { SummaryItem } from './summary-item';
+export { RunInfo, RunInfoProps } from './run-info';
 export { Summary } from './summary';
 export { TotalSizeTypeTitle } from './total-size-type-title';

package/src/components/insight-icon/index.ts

@@ -0,0 +1 @@
+export * from './insight-icon';

package/src/components/insight-icon/insight-icon.module.css

@@ -0,0 +1,24 @@
+.root {
+  width: calc(var(--space-small) + 6px);
+  height: calc(var(--space-small) + 6px);
+  padding: 3px;
+  border-radius: 50%;
+  background: var(--color-highlight);
+}
+
+.error {
+  background: var(--color-red-50);
+  color: var(--color-danger);
+}
+
+.warning {
+  padding-top: 1px;
+  background: var(--color-yellow-100);
+  color: var(--color-yellow-900);
+}
+
+.info {
+  background: var(--color-highlight-info);
+  color: var(--color-info);
+}
+

package/src/components/insight-icon/insight-icon.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import cx from 'classnames';
+import { InsightType } from '@bundle-stats/utils';
+
+import { Icon } from '../../ui/icon';
+import css from './insight-icon.module.css';
+
+const InsightTypeIconMap = new Map([
+  [InsightType.ERROR, Icon.ICONS.ERROR],
+  [InsightType.WARNING, Icon.ICONS.WARNING],
+  [InsightType.INFO, Icon.ICONS.INFO],
+]);
+
+interface InsightIconProps extends React.HTMLAttributes<'span'> {
+  type: InsightType;
+}
+
+export const InsightIcon = (props: InsightIconProps) => {
+  const { className, type } = props;
+  const resolvedType = Object.values(InsightType).includes(type) ? type : InsightType.WARNING;
+  const rootClassName = cx(css.root, css[resolvedType], className);
+  const glyph = InsightTypeIconMap.get(resolvedType) as string;
+
+  return <Icon glyph={glyph} className={rootClassName} />;
+};

package/src/components/insights/insights.module.css

@@ -1,23 +1,5 @@
 .icon {
-  padding: 3px;
-  box-sizing: content-box;
-  border-radius: 50%;
-  background: var(--color-highlight);
-}
-
-.error .icon {
-  background: var(--color-red-50);
-  color: var(--color-danger);
-}
-
-.warning .icon {
-  background: var(--color-yellow-100);
-  color: var(--color-warning-dark);
-}
-
-.info .icon {
-  background: var(--color-highlight-info);
-  color: var(--color-info);
+  flex: 0 0 auto;
 }
 
 .entry {