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

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/sort-button/sort-button.module.css

@@ -18,7 +18,6 @@
   overflow: hidden;
   right: -2px; /* compensate for the button padding */
   color: var(--color-text-ultra-light);
-  transition: var(--transition-out);
 }
 
 .directionIcon {
@@ -36,7 +35,6 @@
 .direction:active,
 .direction:focus {
   color: var(--color-text-dark);
-  transition: var(--transition-in);
 }
 
 .directionAsc {

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

@@ -3,29 +3,75 @@
   width: 100%;
 }
 
-.wrapper {
+.row {
   width: 100%;
 }
 
-.wrapper + .wrapper {
-  margin-top: var(--summary-gap);
+.rowGroup {
+  flex: 1 1 auto;
+}
+
+.rowGroupTitle {
+  position: absolute;
+  font-size: 0;
+  width: 0;
+  left: -99999px;
 }
 
-.items {
-  display: flex;
-  flex-wrap: wrap;
-  width: calc(100% + var(--summary-gap));
-  margin-top: calc(0px - var(--summary-gap));
-  margin-left: calc(0px - var(--summary-gap));
+.row + .row {
+  margin-top: var(--summary-gap);
 }
 
 .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:focus::before,
+.item:active::before,
+.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:focus::after,
+.item:active::after,
+.item:hover::after,
+.item:focus + .item::after,
+.item:active + .item::after,
+.item:hover + .item::after {
+  opacity: 0;
+  transition: var(--transition-in);
 }

package/src/components/summary/summary.tsx

@@ -4,21 +4,17 @@ 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 { FlexStack } from '../../layout/flex-stack';
 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 +42,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 +52,7 @@ const SummaryItem = (props: SummaryItemProps & React.ComponentProps<'div'>) => {
         size={size}
         loading={loading}
       />
-    </Box>
+    </SummaryItemCustomLink>
   );
 };
 
@@ -90,38 +78,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>
-    <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>
+    <FlexStack wrap="wrap" gap="small" className={css.row}>
+      <Box outline padding="small" className={css.rowGroup}>
+        <FlexStack wrap="wrap" gap="medium">
+          {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}
+            />
+          ))}
+        </FlexStack>
+      </Box>
+    </FlexStack>
+    <FlexStack wrap="wrap" gap="small" 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">
+            <FlexStack wrap="wrap" gap="medium">
+              {metricGroup.metrics.map((metricId) => (
+                <SummaryItem
+                  key={metricId}
+                  className={css.item}
+                  metricId={metricId}
+                  data={data}
+                  size="large"
+                  loading={loading}
+                  customLink={summaryItemLink}
+                  showDelta={showSummaryItemDelta}
+                  showBaseline={showSummaryItemBaseline}
+                />
+              ))}
+            </FlexStack>
+          </Box>
+        </Stack>
+      ))}
+    </FlexStack>
   </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',

package/src/css/default.css

@@ -15,6 +15,7 @@ html {
 
 body {
   background: var(--color-background);
+  accent-color: var(--color-accent);
   color: var(--color-text);
   line-height: var(--line-height);
 }
@@ -59,12 +60,14 @@ code {
 }
 
 a {
-  color: var(--color-primary);
+  color: var(--color-accent);
+  transition: var(--transition-out);
 }
 
-a:hover,
+a:focus,
 a:active,
-a:focus {
-  color: var(--color-primary-dark);
+a:hover {
+  color: var(--color-accent-dark);
   outline: none;
+  transition: var(--transition-in);
 }