@bundle-stats/ui 4.22.2 → 4.23.0-beta.1

package/src/components/metric-run-info/metric-run-info.tsx

@@ -1,5 +1,5 @@
 import React, { type MouseEvent, useCallback, useMemo, ElementType } from 'react';
-import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
+import { getGlobalMetricType, getMetricRunInfo, MetricTypes } from '@bundle-stats/utils';
 import { Focusable } from 'ariakit/focusable';
 
 import { Stack } from '../../layout/stack';
@@ -8,11 +8,11 @@ import { Icon } from '../../ui/icon';
 import { RunInfo, RunInfoProps } from '../run-info';
 import css from './metric-run-info.module.css';
 
-interface MetricInfoProps {
+type MetricInfoProps = {
   title: string;
   description?: string;
   url?: string;
-}
+};
 
 const MetricHoverCard = ({ title, description, url }: MetricInfoProps) => {
   // The component parent can be rendered inside a link or a button
@@ -50,17 +50,13 @@ const MetricHoverCard = ({ title, description, url }: MetricInfoProps) => {
   );
 };
 
-export interface MetricRunInfoProps {
+export type MetricRunInfoProps = {
   metricId: string;
   current: number;
   baseline?: number;
-  showDelta?: boolean;
   showMetricDescription?: boolean;
-  showBaseline?: boolean;
   titleWrapper?: ElementType;
-  size?: RunInfoProps['size'];
-  loading?: RunInfoProps['loading'];
-}
+} & Pick<RunInfoProps, 'showDelta' | 'showBaseline' | 'size' | 'loading'>;
 
 export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'div'>) => {
   const {
@@ -92,16 +88,47 @@ export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'
     [CustomTitleWrapper, metric.label],
   );
 
+  const baselineProps = useMemo(() => {
+    if (showBaseline) {
+      return {
+        showBaseline,
+        baseline: metric.formatter(baseline),
+      };
+    }
+
+    return { showBaseline };
+  }, [showBaseline, baseline]);
+
   const deltaProps = useMemo(() => {
-    if (!showDelta || metric.skipDelta || !('delta' in metricRunInfo)) {
-      return {};
+    if (!showDelta || metric.skipDelta) {
+      return {
+        showDelta: false,
+      };
+    }
+
+    // If the delta data is missing, do not render the dats
+    if (!('delta' in metricRunInfo)) {
+      return {
+        showDelta: false,
+      };
+    }
+
+    // For file sizes, show the real data
+    if (metric.type === MetricTypes.FileSize) {
+      return {
+        showDelta: true,
+        delta: metricRunInfo.displayDelta,
+        deltaType: metricRunInfo.deltaType,
+        deltaPercentage: metricRunInfo.displayDeltaPercentage,
+      };
     }
 
     return {
-      delta: metricRunInfo.displayDeltaPercentage,
+      showDelta: true,
+      delta: metricRunInfo.displayDelta,
       deltaType: metricRunInfo.deltaType,
     };
-  }, [metricRunInfo]);
+  }, [metric, metricRunInfo, showDelta]);
 
   return (
     <RunInfo
@@ -109,10 +136,7 @@ export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'
       titleHoverCard={titleHoverCard}
       enhance
       current={metricRunInfo.displayValue}
-      showBaseline={showBaseline}
-      {...(showBaseline && {
-        baseline: metric.formatter(baseline),
-      })}
+      {...baselineProps}
       {...deltaProps}
       {...restProps}
     />

package/src/components/metrics-display-selector/metrics-display-selector.module.css

@@ -7,31 +7,6 @@
   padding: calc(var(--space-xxsmall) - 1px);
 }
 
-.dropdownGroupAnchor {
-  border: none;
-  border-radius: 0;
-  position: relative;
-}
-
-.dropdownGroupAnchor::before {
-  content: '';
-  display: block;
-  width: 1px;
-  background: var(--color-outline-dark);
-  position: absolute;
-  left: 0;
-  top: var(--space-xxxsmall);
-  bottom: var(--space-xxxsmall);
-}
-
-.dropdownGroupAnchor:hover,
-.dropdownGroupAnchor:focus,
-.dropdownGroupAnchor:active {
-  border-color: var(--color-outline);
-  box-shadow: none;
-  background: none;
-}
-
 .dropdownGroup:hover {
   border-color: var(--color-outline-dark);
   transition: var(--transition-in);

package/src/components/metrics-display-selector/metrics-display-selector.tsx

@@ -90,44 +90,32 @@ export const MetricsDisplaySelector = (
         );
 
         return (
-          <FlexStack className={itemClassName} key={displayType}>
-            <Button
-              size="small"
-              glyph={displayProps.glyph}
-              onClick={() => onSelect(displayType)}
-              className={css.dropdownGroupButton}
-            >
-              {displayProps.label}
-            </Button>
-            <Dropdown
-              glyph={Icon.ICONS.CHEVRON_DOWN}
-              placement="bottom-end"
-              shift={-1}
-              className={css.dropdownGroupAnchor}
-            >
-              {displayGroupsData.map((displayGroupData) => {
-                const isGroupActive = isActive && displayGroupData.value === groupBy;
+          <Dropdown
+            label={displayProps.label}
+            glyph={displayProps.glyph}
+            placement="bottom-end"
+            shift={-1}
+            className={itemClassName}
+            key={displayType}
+          >
+            {displayGroupsData.map((displayGroupData) => {
+              const isGroupActive = isActive && displayGroupData.value === groupBy;
 
-                return (
-                  <DropdownItem
-                    onClick={() => onSelect(displayType, displayGroupData.value)}
-                    isActive={isGroupActive}
-                    className={cx(css.dropdownItem, isGroupActive && css.dropdownItemActive)}
-                    key={displayGroupData.value}
-                  >
-                    <FlexStack space="xxxsmall" alignItems="center">
-                      <Icon
-                        glyph={Icon.ICONS.CHECK}
-                        size="small"
-                        className={css.dropdownItemIcon}
-                      />
-                      <span>{displayGroupData.label}</span>
-                    </FlexStack>
-                  </DropdownItem>
-                );
-              })}
-            </Dropdown>
-          </FlexStack>
+              return (
+                <DropdownItem
+                  onClick={() => onSelect(displayType, displayGroupData.value)}
+                  isActive={isGroupActive}
+                  className={cx(css.dropdownItem, isGroupActive && css.dropdownItemActive)}
+                  key={displayGroupData.value}
+                >
+                  <FlexStack space="xxxsmall" alignItems="center">
+                    <Icon glyph={Icon.ICONS.CHECK} size="small" className={css.dropdownItemIcon} />
+                    <span>{displayGroupData.label}</span>
+                  </FlexStack>
+                </DropdownItem>
+              );
+            })}
+          </Dropdown>
         );
       })}
     </ControlGroup>

package/src/components/metrics-table/metrics-table.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-
+import type { Meta, StoryObj } from '@storybook/react';
 import { MetricRunInfoDeltaType } from '@bundle-stats/utils';
+
 import { getWrapperDecorator } from '../../stories';
 import { MetricsTable } from '.';
 
@@ -204,22 +205,41 @@ const ITEMS_MULTIPLE_RUNS = [
   },
 ];
 
-export default {
+const meta = {
   title: 'Components/MetricsTable',
   component: MetricsTable,
   decorators: [getWrapperDecorator()],
-};
+} satisfies Meta<typeof MetricsTable>;
 
-export const Default = () => <MetricsTable runs={RUNS.slice(0, 1)} items={ITEMS_SINGLE_RUN} />;
+export default meta;
 
-export const MultipleRuns = () => <MetricsTable runs={RUNS} items={ITEMS_MULTIPLE_RUNS} />;
+type Story = StoryObj<typeof meta>;
 
-export const WithHeaderSum = () => (
-  <MetricsTable
-    runs={RUNS}
-    items={[ITEMS_MULTIPLE_RUNS[0], ITEMS_MULTIPLE_RUNS[4]]}
-    showHeaderSum
-  />
-);
+export const Default: Story = {
+  args: {
+    runs: RUNS.slice(0, 1),
+    items: ITEMS_SINGLE_RUN,
+  },
+};
 
-export const Empty = () => <MetricsTable runs={RUNS} items={[]} />;
+export const MultipleRuns: Story = {
+  args: {
+    runs: RUNS,
+    items: ITEMS_MULTIPLE_RUNS,
+  },
+};
+
+export const WithHeaderSum: Story = {
+  args: {
+    runs: RUNS,
+    items: [ITEMS_MULTIPLE_RUNS[0], ITEMS_MULTIPLE_RUNS[4]],
+    showHeaderSum: true,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    runs: RUNS,
+    items: [],
+  },
+};

package/src/components/metrics-table/metrics-table.tsx

@@ -68,7 +68,7 @@ const Row = ({ className = '', item, renderHeader, ...restProps }: RowProps) =>
 
 interface MetricsTableProps extends Omit<React.ComponentProps<typeof Table>, 'title'> {
   runs: Array<{
-    label: string;
+    label: React.ReactNode;
     internalBuildNumber: number;
   }>;
   items: Array<ReportMetricRow>;

package/src/components/metrics-table-header/metrics-table-header.module.css

@@ -4,23 +4,23 @@
   padding-bottom: var(--space-xxsmall);
 }
 
-.root .metric {
+.root .colMetric {
   width: 55%;
   vertical-align: middle;
 }
 
-.root .job {
+.root .colJob {
   padding-top: var(--space-xxsmall);
   text-align: right;
 }
 
-.root .value {
+.root .colValue {
   text-align: right;
   vertical-align: baseline;
   width: 15%;
 }
 
-.root .delta {
+.root .colDelta {
   text-align: right;
   font-size: var(--size-xsmall);
   vertical-align: baseline;
@@ -28,21 +28,17 @@
   color: pink;
 }
 
-.root .deltaPercentage {
+.root .colDeltaPercentage {
   width: 5%;
 }
 
-.jobName {
-  white-space: nowrap;
-}
-
 /* columns overrides for showHeaderSum */
-.showHeaderSum .job {
+.showHeaderSum .colJob {
   border-bottom: 0;
-  padding-bottom: 0;
+  padding-bottom: var(--space-xxxsmall);
 }
 
-.showHeaderSum .sum {
+.showHeaderSum .colSum {
   padding-top: 0;
   font-size: var(--size-small);
   vertical-align: middle;

package/src/components/metrics-table-header/metrics-table-header.tsx

@@ -21,7 +21,7 @@ const BASELINE_COLUMN_SPAN = 1;
 const CURRENT_COLUMN_SPAN = 3;
 
 interface JobColumnProps {
-  job: { label: string; internalBuildNumber: number };
+  job: { label: React.ReactNode; internalBuildNumber: number };
   isBaseline: boolean;
 }
 
@@ -34,11 +34,10 @@ const JobColumn = ({ job, isBaseline }: JobColumnProps) => {
   }
 
   return (
-    <Table.Th className={cx(css.col, css.job)} colSpan={colSpan}>
+    <Table.Th className={cx(css.col, css.colJob)} colSpan={colSpan}>
       <JobName
         title={isBaseline ? I18N.BASELINE_TITLE : I18N.CURRENT_TITLE}
         internalBuildNumber={internalBuildNumber}
-        className={css.jobName}
       >
         {label}
       </JobName>
@@ -65,7 +64,7 @@ const SumColumn = ({ rows, isBaseline, runIndex, updateSort, sort }: ColumnSumPr
 
   return (
     <>
-      <Table.Th className={cx(css.col, css.value, css.sum)}>
+      <Table.Th className={cx(css.col, css.colValue, css.colSum)}>
         <SortButton
           fieldPath={fieldPath}
           fieldName="value"
@@ -78,7 +77,7 @@ const SumColumn = ({ rows, isBaseline, runIndex, updateSort, sort }: ColumnSumPr
       </Table.Th>
       {!isBaseline && (
         <>
-          <Table.Th className={cx(css.col, css.delta, css.sum)}>
+          <Table.Th className={cx(css.col, css.colDelta, css.colSum)}>
             <SortButton
               fieldPath={fieldPath}
               fieldName="delta"
@@ -91,7 +90,7 @@ const SumColumn = ({ rows, isBaseline, runIndex, updateSort, sort }: ColumnSumPr
               )}
             </SortButton>
           </Table.Th>
-          <Table.Th className={cx(css.col, css.delta, css.deltaPercentage, css.sum)}>
+          <Table.Th className={cx(css.col, css.colDelta, css.colDeltaPercentage, css.colSum)}>
             <SortButton
               fieldPath={fieldPath}
               fieldName="deltaPercentage"
@@ -122,7 +121,7 @@ export interface MetricsTableHeaderProps {
   /**
    * Array of jobs
    */
-  jobs: Array<{ label: string; internalBuildNumber: number }>;
+  jobs: Array<{ label: React.ReactNode; internalBuildNumber: number }>;
   /**
    * Report rows
    */
@@ -147,17 +146,22 @@ export const MetricsTableHeader = (
   return (
     <Table.THead className={rootClassName}>
       <Table.Tr>
-        <Table.Th className={cx(css.col, css.metric)} rowSpan={showSum ? 2 : 1}>
+        <Table.Th className={cx(css.col, css.colMetric)} rowSpan={showSum ? 2 : 1}>
           {metricTitle || ' '}
         </Table.Th>
         {jobs.map((job, runIndex) => (
-          <JobColumn job={job} isBaseline={runIndex === jobs.length - 1} />
+          <JobColumn
+            key={job.internalBuildNumber}
+            job={job}
+            isBaseline={runIndex === jobs.length - 1}
+          />
         ))}
       </Table.Tr>
       {showSum && (
         <Table.Tr>
-          {jobs.map((_, runIndex) => (
+          {jobs.map((job, runIndex) => (
             <SumColumn
+              key={job.internalBuildNumber}
               rows={rows}
               isBaseline={runIndex === jobs.length - 1}
               runIndex={runIndex}

package/src/components/metrics-table-options/metrics-table-options.tsx

@@ -15,7 +15,7 @@ export const MetricsTableOptions = (props: MetricsTableOptionsProps) => {
   const { onViewAllClick, onResetClick, onExportClick, ...restProps } = props;
 
   return (
-    <Dropdown glyph="more-vertical" placement="bottom-end" {...restProps}>
+    <Dropdown glyph="more-vertical" placement="bottom-end" showChevron={false} {...restProps}>
       <div className={css.group}>
         {onResetClick && <DropdownItem onClick={onResetClick}>{I18N.RESET_FILTERS}</DropdownItem>}
         {onViewAllClick && <DropdownItem onClick={onViewAllClick}>{I18N.VIEW_ALL}</DropdownItem>}

package/src/components/metrics-table-title/metrics-table-title.jsx

@@ -15,7 +15,7 @@ export const MetricsTableTitle = (props) => {
   const rootClassName = cx(css.root, className);
 
   return (
-    <Stack space="none" className={rootClassName}>
+    <Stack space="xxxsmall" className={rootClassName}>
       <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.title}>
         <span>{title}</span>
 

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

@@ -1,21 +1,37 @@
-import React from 'react';
-
+import type { Meta, StoryObj } from '@storybook/react';
 import { action } from 'storybook/actions';
 
 import { getWrapperDecorator } from '../../stories';
 import { ModuleInfo } from '.';
 
-export default {
+const ITEM = {
+  key: './node_modules/lodash/fp/merge.js',
+  label: './node_modules/lodash/fp/merge.js',
+  biggerIsBetter: false,
+  changed: true,
+  thirdParty: true,
+  duplicated: true,
+  fileType: 'JS',
+};
+
+const meta = {
   title: 'Components/ModuleInfo',
   component: ModuleInfo,
   decorators: [getWrapperDecorator()],
-};
+  args: {
+    labels: ['Job #2', 'Job #1'],
+    onClose: action('CLOSE'),
+  },
+} satisfies Meta<typeof ModuleInfo>;
 
-export const Default = () => (
-  <ModuleInfo
-    item={{
-      label: './node_modules/lodash/fp/merge.js',
-      duplicated: true,
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    item: {
+      ...ITEM,
       runs: [
         {
           name: './node_modules/lodash/fp/merge.js',
@@ -29,8 +45,8 @@ export const Default = () => (
           displayValue: '3KiB',
         },
       ] as any,
-    }}
-    chunks={[
+    },
+    chunks: [
       {
         id: '1',
         name: 'chunk-1',
@@ -43,18 +59,15 @@ export const Default = () => (
         id: '3',
         name: 'chunk-3',
       },
-    ]}
-    chunkIds={['1', '2', '3']}
-    labels={['Job #2', 'Job #1']}
-    onClose={action('CLOSE')}
-  />
-);
+    ],
+    chunkIds: ['1', '2', '3'],
+  },
+};
 
-export const Duplicates = () => (
-  <ModuleInfo
-    item={{
-      label: './node_modules/lodash/fp/merge.js',
-      duplicated: true,
+export const Duplicates: Story = {
+  args: {
+    item: {
+      ...ITEM,
       runs: [
         {
           name: './node_modules/lodash/fp/merge.js',
@@ -68,8 +81,8 @@ export const Duplicates = () => (
           displayValue: '3KiB',
         },
       ] as any,
-    }}
-    chunks={[
+    },
+    chunks: [
       {
         id: '1',
         name: 'chunk-1',
@@ -90,9 +103,7 @@ export const Duplicates = () => (
         id: '5',
         name: 'chunk-5',
       },
-    ]}
-    chunkIds={['1', '2', '3', '4', '5']}
-    labels={['Job #2', 'Job #1']}
-    onClose={action('CLOSE')}
-  />
-);
+    ],
+    chunkIds: ['1', '2', '3', '4', '5'],
+  },
+};

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

@@ -1,14 +1,9 @@
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from 'storybook/actions';
 
 import { getWrapperDecorator } from '../../stories';
 import { PackageInfo } from '.';
 
-export default {
-  title: 'Components/PackageInfo',
-  component: PackageInfo,
-  decorators: [getWrapperDecorator()],
-};
-
 const RUNS = [
   {
     name: 'lodash',
@@ -23,14 +18,24 @@ const RUNS = [
   },
 ];
 
-export const Default = () => (
-  <PackageInfo
-    name="lodash~1"
-    item={{
+const meta = {
+  title: 'Components/PackageInfo',
+  component: PackageInfo,
+  decorators: [getWrapperDecorator()],
+} satisfies Meta<typeof PackageInfo>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    item: {
       label: 'lodash',
       duplicate: true,
       runs: RUNS as any,
-    }}
-    labels={['Job #2', 'Job #1']}
-  />
-);
+    },
+    labels: ['Job #2', 'Job #1'],
+    onClose: action('CLOSE'),
+  },
+};