@bundle-stats/ui 4.22.3 → 4.23.0-beta.2

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

@@ -1,5 +1,5 @@
 .title {
-  color: var(--color-text-ultra-light);
+  color: var(--color-text-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
   text-transform: uppercase;
@@ -16,14 +16,11 @@
 
 .titleIcon {
   flex: 0 0 var(--space-small);
+  /* compensate for the button icon spacing */
   margin-top: -3px !important;
   margin-bottom: -3px !important;
 }
 
-.title + .info {
-  margin-top: var(--space-xxsmall);
-}
-
 .currentMetric {
   color: var(--color-heading);
   white-space: nowrap;
@@ -32,33 +29,32 @@
   height: var(--line-height-number);
 }
 
-.delta {
-  font-weight: bold;
-}
-
-.deltaValue + .deltaValue::before {
-  margin-left: calc(var(--space-xxxsmall) / 2);
-  margin-right: calc(var(--space-xxxsmall) / 2);
-  content: '/';
-  color: var(--color-text-ultra-light);
-}
-
 .baselineMetric {
   color: var(--color-text-ultra-light);
   font-size: var(--size-small);
+  font-family: var(--font-family-fixed);
+  font-weight: normal;
   line-height: var(--line-height-number);
   height: var(--line-height-number);
 }
 
-/* Loading state */
-.loading.currentMetric {
-  min-width: 0;
-  max-width: 8em;
+.baselineMetricValue {
+  color: var(--color-text-light);
+  line-height: inherit;
 }
 
-.loading.baselineMetric {
-  min-width: 0;
-  max-width: 8em;
+
+.delta {
+  font-weight: bold;
+  font-size: var(--size-small);
+  line-height: var(--line-height-number);
+}
+
+.deltaValue + .deltaValue::before {
+  margin-left: var(--space-xxxsmall);
+  margin-right: var(--space-xxxsmall);
+  content: '/';
+  color: var(--color-outline-dark);
 }
 
 /* Hover state */
@@ -82,15 +78,28 @@
     visibility 0s;
 }
 
-/* Size variation */
-.currentMetric {
-  font-size: var(--size-xxlarge);
+/* Loading state */
+.loading .currentMetric {
+  max-width: 6em;
 }
 
+.loading .baselineMetric {
+  max-width: 6em;
+}
+
+.loading .delta {
+  max-width: 12em;
+}
+
+/* Size variation */
 .small .currentMetric {
   font-size: var(--size-medium);
 }
 
+.currentMetric {
+  font-size: var(--size-xxlarge);
+}
+
 .large .currentMetric {
   font-size: var(--size-xxxlarge);
 }

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

@@ -8,12 +8,24 @@ const meta = {
   args: {
     id: 'webpack.totalSizeByTypeALL',
     size: 'medium',
+    loading: false,
+    showBaseline: true,
+    showDelta: true,
   },
   argTypes: {
     size: {
       options: ['small', 'medium', 'large', 'xlarge'],
       control: { type: 'select' },
     },
+    loading: {
+      control: { type: 'boolean' },
+    },
+    showBaseline: {
+      control: { type: 'boolean' },
+    },
+    showDelta: {
+      control: { type: 'boolean' },
+    },
   },
 } satisfies Meta<typeof RunInfo>;
 
@@ -24,20 +36,14 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     title: 'Bundle Size',
-    current: '120KiB',
-    baseline: '100KiB',
-    delta: '+20%',
+    current: '678.91MiB',
+    baseline: '123.45MiB',
+    delta: '+555.46MiB',
+    deltaPercentage: '+549.94%',
     deltaType: 'HIGH_NEGATIVE',
   },
 };
 
-export const DeltaPercentage: Story = {
-  args: {
-    ...Default.args,
-    deltaPercentage: '+20KiB',
-  },
-};
-
 export const SizeLarge: Story = {
   args: {
     ...Default.args,

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

@@ -1,5 +1,6 @@
 import React, { type ReactNode, useMemo } from 'react';
 import cx from 'classnames';
+import type { MetricRunInfoDeltaType } from '@bundle-stats/utils';
 
 import { Icon } from '../../ui/icon';
 import { HoverCard } from '../../ui/hover-card';
@@ -24,23 +25,125 @@ const getMetricParams = (value: string): [string, string?] => {
   return [matches[1], matches[2]];
 };
 
-export interface RunInfoProps {
+type RunInfoTitleProps = {
+  className?: string;
   title?: ReactNode;
   titleHoverCard?: ReactNode;
   titleTooltip?: ReactNode;
+};
+
+const RunInfoTitle = ({ className, title, titleHoverCard, titleTooltip }: RunInfoTitleProps) => (
+  <FlexStack space="xxxsmall" alignItems="center" as="h3" className={cx(css.title, className)}>
+    <span className={css.titleText}>{title}</span>
+    {titleHoverCard && (
+      <HoverCard
+        label={<Icon glyph={Icon.ICONS.HELP} />}
+        className={cx(css.titleIcon, css.titleHoverCardIcon)}
+      >
+        {titleHoverCard}
+      </HoverCard>
+    )}
+    {titleTooltip && (
+      <Tooltip title={titleTooltip} className={cx(css.titleIcon, css.titleTooltipIcon)}>
+        <Icon glyph={Icon.ICONS.HELP} />
+      </Tooltip>
+    )}
+  </FlexStack>
+);
+
+type RunInfoContentProps = {
+  className?: string;
+  loading?: boolean;
   current?: ReactNode;
+  enhance?: boolean;
   baseline?: string;
   delta?: string;
   deltaPercentage?: string;
-  deltaType?: string;
+  deltaType?: MetricRunInfoDeltaType;
+  showBaseline?: boolean;
+  showDelta?: boolean;
+};
 
-  as?: React.ElementType;
-  size?: 'small' | 'medium' | 'large' | 'xlarge';
+const RunInfoContent = ({
+  className,
+  loading = false,
+  current = '',
+  enhance = false,
+  baseline = '',
+  delta = '',
+  deltaPercentage = '',
+  deltaType = 'NO_CHANGE',
+  showBaseline = true,
+  showDelta = true,
+}: RunInfoContentProps) => {
+  const currentValueParams: [ReactNode, string?] = useMemo(() => {
+    if (!enhance || typeof current !== 'string') {
+      return [current];
+    }
 
-  showBaseline?: boolean;
-  loading?: boolean;
-  enhance?: boolean;
-}
+    return getMetricParams(current);
+  }, [current, enhance]);
+
+  const contentClassName = cx(css.content, className);
+
+  if (loading) {
+    return (
+      <Stack space="xxxsmall" className={contentClassName}>
+        <Skeleton className={css.currentMetric} />
+        {showBaseline && <Skeleton className={css.baselineMetric} />}
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack space="xxxsmall" className={contentClassName}>
+      <Metric
+        value={currentValueParams[0]}
+        unit={currentValueParams[1]}
+        inline
+        className={css.currentMetric}
+      >
+        {showDelta && (
+          <div className={css.delta}>
+            {deltaPercentage && (
+              <Delta
+                displayValue={deltaPercentage}
+                deltaType={deltaType}
+                className={css.deltaValue}
+              />
+            )}
+            {delta && (
+              <Delta displayValue={delta} deltaType={deltaType} className={css.deltaValue} />
+            )}
+          </div>
+        )}
+      </Metric>
+      {showBaseline && (
+        <FlexStack alignItems="center" space="xxxsmall" className={css.baselineMetric}>
+          <span className={css.baselineMetricLabel}>vs</span>
+          <Metric value={baseline} inline className={css.baselineMetricValue} />
+        </FlexStack>
+      )}
+    </Stack>
+  );
+};
+
+export type RunInfoProps = Pick<RunInfoTitleProps, 'title' | 'titleHoverCard' | 'titleTooltip'> &
+  Pick<
+    RunInfoContentProps,
+    | 'current'
+    | 'baseline'
+    | 'delta'
+    | 'deltaPercentage'
+    | 'deltaType'
+    | 'showBaseline'
+    | 'showDelta'
+    | 'loading'
+    | 'enhance'
+  > & {
+    as?: React.ElementType;
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+  };
 
 export const RunInfo = ({
   className = '',
@@ -51,81 +154,37 @@ export const RunInfo = ({
   baseline = '',
   delta = '',
   deltaPercentage = '',
-  deltaType = '',
+  deltaType = 'NO_CHANGE',
   as: Component = 'div',
   size = 'medium',
   showBaseline = true,
+  showDelta = true,
   loading = false,
   enhance = false,
+  children,
   ...restProps
 }: RunInfoProps & Omit<React.ComponentProps<'div'>, 'title'>) => {
-  const rootClassName = cx(
-    css.root,
-    className,
-    css[size],
-    (delta || deltaPercentage) && css.showDelta,
-  );
-
-  const currentValueParams: [ReactNode, string?] = useMemo(() => {
-    if (!enhance || typeof current !== 'string') {
-      return [current];
-    }
-
-    return getMetricParams(current);
-  }, [current, enhance]);
+  const rootClassName = cx(css.root, loading && css.loading, css[size], className);
 
   return (
     <Component className={rootClassName} {...restProps}>
-      {title && (
-        <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.title}>
-          <span className={css.titleText}>{title}</span>
-          {titleHoverCard && (
-            <HoverCard
-              label={<Icon glyph={Icon.ICONS.HELP} />}
-              className={cx(css.titleIcon, css.titleHoverCardIcon)}
-            >
-              {titleHoverCard}
-            </HoverCard>
-          )}
-          {titleTooltip && (
-            <Tooltip title={titleTooltip} className={cx(css.titleIcon, css.titleTooltipIcon)}>
-              <Icon glyph={Icon.ICONS.HELP} />
-            </Tooltip>
-          )}
-        </FlexStack>
-      )}
-
-      {!loading ? (
-        <Stack space="xxxsmall" className={css.info}>
-          <Metric
-            value={currentValueParams[0]}
-            unit={currentValueParams[1]}
-            inline
-            className={css.currentMetric}
-          >
-            {(delta || deltaPercentage) && (
-              <span className={css.delta}>
-                {deltaPercentage && (
-                  <Delta
-                    displayValue={deltaPercentage}
-                    deltaType={deltaType}
-                    className={css.deltaValue}
-                  />
-                )}
-                {delta && (
-                  <Delta displayValue={delta} deltaType={deltaType} className={css.deltaValue} />
-                )}
-              </span>
-            )}
-          </Metric>
-          {showBaseline && <Metric className={css.baselineMetric} value={baseline} />}
-        </Stack>
-      ) : (
-        <Stack space="xxxsmall" className={css.info}>
-          <Skeleton className={cx(css.currentMetric, css.loading)} />
-          {showBaseline && <Skeleton as="p" className={cx(css.baselineMetric, css.loading)} />}
-        </Stack>
-      )}
+      <Stack space="xsmall">
+        {title && (
+          <RunInfoTitle title={title} titleHoverCard={titleHoverCard} titleTooltip={titleTooltip} />
+        )}
+        <RunInfoContent
+          loading={loading}
+          current={current}
+          enhance={enhance}
+          baseline={baseline}
+          delta={delta}
+          deltaPercentage={deltaPercentage}
+          deltaType={deltaType}
+          showBaseline={showBaseline}
+          showDelta={showDelta}
+        />
+        {children}
+      </Stack>
     </Component>
   );
 };

package/src/components/summary/summary.module.css

@@ -3,29 +3,79 @@
   width: 100%;
 }
 
-.wrapper {
+.row {
   width: 100%;
+  display: flex;
+  align-items: stretch;
+  flex-wrap: wrap;
+  gap: var(--space-small);
+}
+
+.rowGroup {
+  flex: 1 1 auto;
 }
 
-.wrapper + .wrapper {
+.rowGroupTitle {
+  position: absolute;
+  font-size: 0;
+  width: 0;
+  left: -99999px;
+}
+
+.row + .row {
   margin-top: var(--summary-gap);
 }
 
 .items {
   display: flex;
+  align-items: stretch;
   flex-wrap: wrap;
-  width: calc(100% + var(--summary-gap));
-  margin-top: calc(0px - var(--summary-gap));
-  margin-left: calc(0px - var(--summary-gap));
+  gap: var(--space-medium);
 }
 
 .item {
-  margin: var(--summary-gap) 0 0 var(--summary-gap);
-  flex: 1 0 10%; /* force equal sizes */
-  min-width: 12em;
+  flex: 1 1 10%; /* force equal sizes */
+  min-width: 8em;
   text-decoration: none;
+  position: relative;
+  z-index: 0;
 }
 
-.itemSmall {
-  min-width: 8em;
+.item::before {
+  content: "";
+  border-radius: var(--radius-medium);
+  background: var(--color-highlight);
+  display: block;
+  position: absolute;
+  z-index: -1;
+  top: calc(0px - var(--space-xsmall));
+  right: calc(0px - var(--space-xsmall));
+  bottom: calc(0px - var(--space-xsmall));
+  left: calc(0px - var(--space-xsmall));
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.item:hover::before {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.item + .item::after {
+  content: "";
+  border-radius: var(--radius-medium);
+  background: var(--color-outline);
+  display: block;
+  width: 1px;
+  position: absolute;
+  left: calc(0px - var(--space-xsmall));
+  top: var(--space-xxsmall);
+  bottom: var(--space-xxsmall);
+  opacity: 1;
+  transition: var(--transition-out);
+}
+
+.item:hover::after,  .item:hover + .item::after {
+  opacity: 0;
+  transition: var(--transition-in);
 }

package/src/components/summary/summary.tsx

@@ -4,21 +4,16 @@ import get from 'lodash/get';
 import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
 
 import {
-  METRICS_WEBPACK_ASSETS,
+  METRICS_GROUP_ASSETS,
+  METRICS_GROUP_MODULES,
+  METRICS_GROUP_PACKAGES,
   METRICS_WEBPACK_GENERAL,
-  METRICS_WEBPACK_MODULES,
-  METRICS_WEBPACK_PACKAGES,
 } from '../../constants';
 import { Box } from '../../layout/box';
 import { ComponentLink } from '../component-link';
 import { MetricRunInfo, MetricRunInfoProps } from '../metric-run-info';
 import css from './summary.module.css';
-
-const METRICS_WEBPACK_OTHERS = [
-  ...METRICS_WEBPACK_ASSETS,
-  ...METRICS_WEBPACK_MODULES,
-  ...METRICS_WEBPACK_PACKAGES,
-];
+import { Stack } from '../../layout';
 
 interface SummaryItemProps {
   metricId: string;
@@ -46,15 +41,7 @@ const SummaryItem = (props: SummaryItemProps & React.ComponentProps<'div'>) => {
   const metricData = get(data, metricId, { current: 0, baseline: 0 });
 
   return (
-    <Box
-      key={metricId}
-      outline
-      outlineHover
-      padding="small"
-      as={SummaryItemCustomLink}
-      {...componentLink?.link}
-      className={className}
-    >
+    <SummaryItemCustomLink key={metricId} {...componentLink?.link} className={className}>
       <MetricRunInfo
         metricId={metricId}
         current={metricData.current}
@@ -64,7 +51,7 @@ const SummaryItem = (props: SummaryItemProps & React.ComponentProps<'div'>) => {
         size={size}
         loading={loading}
       />
-    </Box>
+    </SummaryItemCustomLink>
   );
 };
 
@@ -90,38 +77,48 @@ export const Summary = ({
   summaryItemLink = ComponentLink,
 }: SummaryProps & React.ComponentProps<'div'>) => (
   <Box className={cx(css.root, className)}>
-    <div className={css.wrapper}>
-      <div className={css.items}>
-        {METRICS_WEBPACK_GENERAL.map((metricId) => (
-          <SummaryItem
-            key={metricId}
-            className={css.item}
-            metricId={metricId}
-            data={data}
-            size="large"
-            loading={loading}
-            customLink={summaryItemLink}
-            showDelta={showSummaryItemDelta}
-            showBaseline={showSummaryItemBaseline}
-          />
-        ))}
-      </div>
+    <div className={css.row}>
+      <Box outline padding="small" className={css.rowGroup}>
+        <div className={css.items}>
+          {METRICS_WEBPACK_GENERAL.map((metricId) => (
+            <SummaryItem
+              key={metricId}
+              className={css.item}
+              metricId={metricId}
+              data={data}
+              size="xlarge"
+              loading={loading}
+              customLink={summaryItemLink}
+              showDelta={showSummaryItemDelta}
+              showBaseline={showSummaryItemBaseline}
+            />
+          ))}
+        </div>
+      </Box>
     </div>
-    <div className={css.wrapper}>
-      <div className={css.items}>
-        {METRICS_WEBPACK_OTHERS.map((metricId) => (
-          <SummaryItem
-            key={metricId}
-            className={cx(css.item, css.itemSmall)}
-            metricId={metricId}
-            data={data}
-            customLink={summaryItemLink}
-            loading={loading}
-            showDelta={showSummaryItemDelta}
-            showBaseline={false}
-          />
-        ))}
-      </div>
+    <div className={css.row}>
+      {[METRICS_GROUP_ASSETS, METRICS_GROUP_MODULES, METRICS_GROUP_PACKAGES].map((metricGroup) => (
+        <Stack className={css.rowGroup} key={metricGroup.title}>
+          <h3 className={css.rowGroupTitle}>{metricGroup.title}</h3>
+          <Box outline padding="small">
+            <div className={css.items}>
+              {metricGroup.metrics.map((metricId) => (
+                <SummaryItem
+                  key={metricId}
+                  className={css.item}
+                  metricId={metricId}
+                  data={data}
+                  size="large"
+                  loading={loading}
+                  customLink={summaryItemLink}
+                  showDelta={showSummaryItemDelta}
+                  showBaseline={showSummaryItemBaseline}
+                />
+              ))}
+            </div>
+          </Box>
+        </Stack>
+      ))}
     </div>
   </Box>
 );

package/src/constants.ts

@@ -36,6 +36,19 @@ export const METRICS_WEBPACK_MODULES = [
 ];
 export const METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];
 
+export const METRICS_GROUP_ASSETS = {
+  title: 'Assets',
+  metrics: METRICS_WEBPACK_ASSETS,
+};
+export const METRICS_GROUP_MODULES = {
+  title: 'Modules',
+  metrics: METRICS_WEBPACK_MODULES,
+};
+export const METRICS_GROUP_PACKAGES = {
+  title: 'Packages',
+  metrics: METRICS_WEBPACK_PACKAGES,
+};
+
 export const SORT = {
   ASC: 'asc',
   DESC: 'desc',