@bundle-stats/ui 4.13.4 → 4.14.0-beta.1

package/src/components/bundle-modules/index.tsx

@@ -3,7 +3,8 @@ import type { Job } from '@bundle-stats/utils';
 // @ts-ignore
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 
-import type { SortAction } from '../../types';
+import { ModuleSizeMetric } from '../../constants';
+import type { ReportMetricModuleRow, SortAction } from '../../types';
 import { getJobsChunksData } from '../../utils/jobs';
 import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
@@ -16,26 +17,27 @@ import {
   generateFilters,
   getCustomSort,
 } from './bundle-modules.utils';
-import { ModuleMetric } from './bundle-modules.constants';
-import * as types from './bundle-modules.types';
 
 interface UseMetricParams {
   metric?: string;
-  setState: ({ metric }: { metric: ModuleMetric }) => void;
+  setState: ({ metric }: { metric: ModuleSizeMetric }) => void;
 }
 
-function useModuleMetric(params: UseMetricParams): [ModuleMetric, (value: ModuleMetric) => void] {
+function useModuleMetric(
+  params: UseMetricParams,
+): [ModuleSizeMetric, (value: ModuleSizeMetric) => void] {
   const { metric, setState } = params;
 
-  const moduleMetric: ModuleMetric = useMemo(() => {
-    if (Object.values(ModuleMetric).includes(metric as ModuleMetric)) {
-      return metric as ModuleMetric;
+  const moduleMetric: ModuleSizeMetric = useMemo(() => {
+    if (Object.values(ModuleSizeMetric).includes(metric as ModuleSizeMetric)) {
+      return metric as ModuleSizeMetric;
     }
-    return ModuleMetric.SIZE;
+
+    return ModuleSizeMetric.TOTAL_SIZE;
   }, [metric]);
 
   const setModuleMetric = useCallback(
-    (newModuleMetric: ModuleMetric) => {
+    (newModuleMetric: ModuleSizeMetric) => {
       if (newModuleMetric !== metric) {
         setState({ metric: newModuleMetric });
       }
@@ -95,12 +97,14 @@ export const BundleModules = (props: BundleModulesProps) => {
   });
 
   const { rows, totalRowCount } = useMemo(() => {
-    let result: Array<types.ReportMetricModuleRow> = [];
+    let result: Array<ReportMetricModuleRow> = [];
 
-    if (moduleMetric === ModuleMetric.TOTAL_SIZE) {
-      result = webpack.compareModuleDuplicateSize(jobs, [addRowFlags]);
-    } else if (moduleMetric === ModuleMetric.SIZE) {
+    if (moduleMetric === ModuleSizeMetric.SIZE) {
       result = webpack.compareBySection.modules(jobs, [addRowFlags]);
+    } else if (moduleMetric === ModuleSizeMetric.DUPLICATE_SIZE) {
+      result = webpack.compareModuleDuplicateSize(jobs, [addRowFlags]);
+    } else {
+      result = webpack.compareModuleTotalSize(jobs, [addRowFlags]);
     }
 
     return {
@@ -114,7 +118,7 @@ export const BundleModules = (props: BundleModulesProps) => {
     searchPattern: searchParams.searchPattern,
     filters: searchParams.filters,
     getRowFilter: generateGetRowFilter({ chunkIds }),
-  });
+  }) as Array<ReportMetricModuleRow>;
 
   const sortParams = useRowsSort({
     rows: filteredRows,

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

@@ -71,40 +71,66 @@
 
 .runs .runsColSize {
   text-align: right;
+  white-space: nowrap;
 }
 
 .size {
   font-family: var(--font-family-fixed);
 }
 
+/**
+ * Meta element
+ */
+.meta {}
+
 .metaLabel {
-  padding: 2px 0;
-  display: inline-block;
   margin-right: var(--space-xxxsmall);
-  min-width: 6em;
+  min-width: 8em;
+  flex: 0 1 6em;
   color: var(--color-text-light);
 }
 
+.metaLabelTooltip {
+  margin-left: var(--space-xxxsmall);
+  color: var(--color-text-ultra-light);
+}
+
+.metaContent {
+  padding: 1px 0;
+  flex: 0 1 auto;
+}
+
 .metaLink {
-  padding: 2px var(--space-xxxsmall);
+  padding: 1px var(--space-xxxsmall);
+  display: inline-block;
+  line-height: var(--line-height-heading);
   border-radius: var(--radius-small);
   background: var(--color-highlight);
   transition: var(--transition-out);
 
-  overflow-wrap: break-word;
   text-decoration: none;
   text-transform: none;
   font-weight: normal;
+  max-width: 16em;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
-.metaLink + .metaLink {
-  margin-left: var(--space-xxsmall);
+.metaLink {
+  margin-right: var(--space-xxxsmall);
 }
 
 .metaLink:hover,
 .metaLink:active,
 .metaLink:focus {
-  transition: var(--transition-in);
   background: var(--color-outline);
   color: var(--color-primary-dark);
 }
+
+@media (min-width: 640px) {
+  .meta {
+    display: flex;
+    align-items: flex-start;
+  }
+}

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

@@ -1,7 +1,9 @@
+import type { ElementType, ReactNode } from 'react';
 import React from 'react';
 import cx from 'classnames';
 import { Portal } from 'ariakit/portal';
-import { METRIC_TYPE_CONFIGS, MetricRunInfo, getMetricRunInfo } from '@bundle-stats/utils';
+import type { MetricRunInfo, ReportMetricRow } from '@bundle-stats/utils';
+import { METRIC_TYPE_CONFIGS, getMetricRunInfo } from '@bundle-stats/utils';
 
 import { Box } from '../../layout/box';
 import { Stack } from '../../layout/stack';
@@ -12,9 +14,10 @@ import { Table } from '../../ui/table';
 import { RunInfo } from '../run-info';
 import * as I18N from './entry-info.i18n';
 import css from './entry-info.module.css';
+import { Tooltip } from '../../ui';
 
 interface EntryInfoMetaLinkProps {
-  as?: React.ElementType;
+  as?: ElementType;
 }
 
 export const EntryInfoMetaLink = (props: EntryInfoMetaLinkProps & React.ComponentProps<'a'>) => {
@@ -24,34 +27,60 @@ export const EntryInfoMetaLink = (props: EntryInfoMetaLinkProps & React.Componen
 
 interface EntryInfoMetaProps {
   label: string;
+  tooltip?: ReactNode;
 }
 
 const EntryInfoMeta = ({
   className = '',
   label,
+  tooltip,
   children,
 }: EntryInfoMetaProps & React.ComponentProps<'p'>) => (
-  <p className={cx(css.meta, className)}>
-    <span className={css.metaLabel}>{label}</span>
-    <span className={css.metaContent}>{children}</span>
-  </p>
+  <div className={cx(css.meta, className)}>
+    <span className={css.metaLabel}>
+      {label}
+      {tooltip && (
+        <Tooltip title={tooltip} className={css.metaLabelTooltip}>
+          <Icon glyph="help" />
+        </Tooltip>
+      )}
+    </span>
+    <div className={css.metaContent}>{children}</div>
+  </div>
 );
 
-interface EntryRun {
-  name: string;
+function defaultRenderRunInfo(item: ReportMetricRow) {
+  const baselineRun = item.runs.length > 1 ? item.runs?.[item.runs.length - 1] : null;
+
+  // Get the metric run info to handle added/removed cases when there are more than 2 jobs
+  const metricRunInfo = getMetricRunInfo(
+    METRIC_TYPE_CONFIGS.METRIC_TYPE_FILE_SIZE,
+    item.runs?.[0]?.value || 0,
+    baselineRun?.value || 0,
+  ) as MetricRunInfo;
+
+  return (
+    <RunInfo
+      current={metricRunInfo.displayValue}
+      delta={metricRunInfo.displayDeltaPercentage}
+      deltaPercentage={metricRunInfo.displayDelta}
+      deltaType={metricRunInfo.deltaType}
+      baseline={baselineRun?.displayValue || '0B'}
+      size="large"
+    />
+  );
 }
 
 interface EntryInfoProps {
   itemTitle?: React.ReactNode;
-  item: {
-    label: string;
-    runs: Array<EntryRun & MetricRunInfo>;
-  };
+  item: ReportMetricRow;
   labels: Array<string>;
   runNameSelector?: string;
   runNameLabel?: string;
+  runSizeLabel?: string;
   tags?: React.ReactNode;
   onClose: () => void;
+  renderRunInfo?: (item: ReportMetricRow) => React.ReactNode;
 }
 
 export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) => {
@@ -62,38 +91,22 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
     labels,
     runNameSelector = 'name',
     runNameLabel = I18N.PATH,
+    runSizeLabel = I18N.SIZE,
     children,
     tags = null,
     onClose,
+    renderRunInfo = defaultRenderRunInfo,
   } = 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_TYPE_CONFIGS.METRIC_TYPE_FILE_SIZE,
-    item.runs?.[0]?.value,
-    baselineRun?.value || 0,
-  ) as MetricRunInfo;
-
   return (
     <Portal className={cx(css.root, className)}>
       <Box padding="medium" as="header" className={css.header}>
         <Stack space="small">
-          {tags && <div>{tags}</div>}
-
           <h3 className={css.label}>
             <FileName as="code" name={itemTitle || item.label} className={css.fileName} />
           </h3>
 
-          <RunInfo
-            current={metricRunInfo.displayValue}
-            delta={metricRunInfo.displayDeltaPercentage}
-            deltaPercentage={metricRunInfo.displayDelta}
-            deltaType={metricRunInfo.deltaType}
-            baseline={baselineRun?.displayValue || '0B'}
-            size="large"
-          />
+          <div>{renderRunInfo(item)}</div>
         </Stack>
         <Button
           radius="circle"
@@ -107,6 +120,8 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
       </Box>
       <Box padding="medium" as="main" className={css.contentWrapper}>
         <Stack space="small" className={css.content}>
+          {tags && <div>{tags}</div>}
+
           {children}
 
           <Table outline compact className={css.runs}>
@@ -114,7 +129,7 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
               <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)}>{I18N.SIZE}</Table.Th>
+                <Table.Th className={cx(css.runsCell, css.runsColSize)}>{runSizeLabel}</Table.Th>
               </Table.Tr>
             </Table.THead>
             <Table.TBody>

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

@@ -1,3 +1,41 @@
+.moduleSizes {
+  flex-wrap: wrap;
+}
+
 .chunksItems {
   display: inline;
 }
+
+.chunksItem-info {
+  color: var(--color-info);
+}
+
+.chunksItem-info:hover,
+.chunksItem-info:active,
+.chunksItem-info:focus {
+  color: var(--color-info-dark);
+}
+
+.chunksItem-danger {
+  color: var(--color-danger);
+}
+
+.chunksItem-danger:hover,
+.chunksItem-danger:active,
+.chunksItem-danger:focus {
+  color: var(--color-danger-dark);
+}
+
+.chunksItem-default {
+  color: var(--color-text-light);
+}
+
+.chunksItem-default:hover,
+.chunksItem-default:active,
+.chunksItem-default:focus {
+  color: var(--color-text);
+}
+
+.duplicateInstances {
+  padding: 2px 0; /* compensate for the Entry Label padding */
+}

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

@@ -1,4 +1,6 @@
 import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { action } from '@storybook/addon-actions';
 
 import { getWrapperDecorator } from '../../stories';
 import { ModuleInfo } from '.';
@@ -17,12 +19,12 @@ export const Default = () => (
       runs: [
         {
           name: './node_modules/lodash/fp/merge.js',
-          chunkIds: ['1', '2'],
+          chunkIds: ['1'],
           value: 1024 * 4,
         },
         {
           name: './node_modules/lodash/fp/merge.js',
-          chunkIds: ['1', '2'],
+          chunkIds: ['1'],
           value: 1024 * 3,
           displayValue: '3KiB',
         },
@@ -37,8 +39,60 @@ export const Default = () => (
         id: '2',
         name: 'chunk-2',
       },
+      {
+        id: '3',
+        name: 'chunk-3',
+      },
+    ]}
+    chunkIds={['1', '2', '3']}
+    labels={['Job #2', 'Job #1']}
+    onClose={action('CLOSE')}
+  />
+);
+
+export const Duplicates = () => (
+  <ModuleInfo
+    item={{
+      label: './node_modules/lodash/fp/merge.js',
+      duplicated: true,
+      runs: [
+        {
+          name: './node_modules/lodash/fp/merge.js',
+          chunkIds: ['1', '2', '3', '5'],
+          value: 1024 * 4,
+        },
+        {
+          name: './node_modules/lodash/fp/merge.js',
+          chunkIds: ['1', '2', '4'],
+          value: 1024 * 3,
+          displayValue: '3KiB',
+        },
+      ] as any,
+    }}
+    chunks={[
+      {
+        id: '1',
+        name: 'chunk-1',
+      },
+      {
+        id: '2',
+        name: 'chunk-2',
+      },
+      {
+        id: '3',
+        name: 'chunk-3',
+      },
+      {
+        id: '4',
+        name: 'chunk-4',
+      },
+      {
+        id: '5',
+        name: 'chunk-5',
+      },
     ]}
-    chunkIds={['1', '2']}
+    chunkIds={['1', '2', '3', '4', '5']}
     labels={['Job #2', 'Job #1']}
+    onClose={action('CLOSE')}
   />
 );