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

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

@@ -1,65 +1,73 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { RunInfo } from './run-info';
 
-export default {
+const meta = {
   title: 'Components/RunInfo',
   component: RunInfo,
   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' },
+    },
   },
-} as Meta;
-
-const Template: Story = (args) => <RunInfo id="webpack.totalSizeByTypeALL" {...args} />;
-
-export const Default = Template.bind({});
+} satisfies Meta<typeof RunInfo>;
 
-Default.args = {
-  title: 'Bundle Size',
-  current: '120KiB',
-  baseline: '100KiB',
-  delta: '+20%',
-  deltaType: 'HIGH_NEGATIVE',
-};
+export default meta;
 
-export const DeltaPercentage = Template.bind({});
+type Story = StoryObj<typeof meta>;
 
-DeltaPercentage.args = {
-  ...Default.args,
-  deltaPercentage: '+20KiB',
+export const Default: Story = {
+  args: {
+    title: 'Bundle Size',
+    current: '678.91MiB',
+    baseline: '123.45MiB',
+    delta: '+555.46MiB',
+    deltaPercentage: '+549.94%',
+    deltaType: 'HIGH_NEGATIVE',
+  },
 };
 
-export const SizeLarge = Template.bind({});
-
-SizeLarge.args = {
-  ...Default.args,
-  size: 'large',
+export const SizeLarge: Story = {
+  args: {
+    ...Default.args,
+    size: 'large',
+  },
 };
 
-export const TitleHoverCard = Template.bind({});
-
-TitleHoverCard.args = {
-  ...Default.args,
-  titleHoverCard: 'Info',
+export const TitleHoverCard: Story = {
+  args: {
+    ...Default.args,
+    titleHoverCard: 'Info',
+  },
 };
 
-export const TitleTooltip = Template.bind({});
-
-TitleTooltip.args = {
-  ...Default.args,
-  titleTooltip: 'Info',
+export const TitleTooltip: Story = {
+  args: {
+    ...Default.args,
+    titleTooltip: 'Info',
+  },
 };
 
-export const Loading = Template.bind({});
-
-Loading.args = {
-  title: 'Bundle Size',
-  loading: true,
+export const Loading: Story = {
+  args: {
+    title: 'Bundle Size',
+    loading: true,
+  },
 };

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.stories.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { createJobs } from '@bundle-stats/utils';
 
 /* eslint-disable import/no-relative-packages */
 import baselineData from '../../../../../fixtures/webpack-stats.baseline.json';
 import currentData from '../../../../../fixtures/webpack-stats.current.json';
 /* eslint-enable import/no-relative-packages */
-import { METRICS_WEBPACK_ASSETS } from '../../constants';
 import { getWrapperDecorator } from '../../stories';
 import { Summary } from '.';
 
@@ -14,46 +13,41 @@ const MULTIPLE_JOBS = createJobs([{ webpack: currentData }, { webpack: baselineD
 
 const SINGLE_JOB = createJobs([{ webpack: currentData }]);
 
-export default {
+const meta = {
   title: 'Components/Summary',
   component: Summary,
   decorators: [getWrapperDecorator()],
-} as Meta;
+} satisfies Meta<typeof Summary>;
 
-const Template: Story = (args) => <Summary {...args} />;
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof meta>;
 
-Default.args = {
-  data: MULTIPLE_JOBS[0].summary,
+export const Default: Story = {
+  args: {
+    data: MULTIPLE_JOBS[0].summary!.webpack,
+  },
 };
 
-export const CustomKeys = Template.bind({});
-
-CustomKeys.args = {
-  keys: METRICS_WEBPACK_ASSETS,
-  data: MULTIPLE_JOBS[0].summary,
-};
-
-export const Loading = Template.bind({});
-
-Loading.args = {
-  loading: true,
+export const Loading: Story = {
+  args: {
+    loading: true,
+  },
 };
 
-export const SingleRun = Template.bind({});
-
-SingleRun.args = {
-  data: SINGLE_JOB[0].summary,
-  showSummaryItemDelta: false,
-  showSummaryItemBaseline: false,
+export const SingleRun: Story = {
+  args: {
+    data: SINGLE_JOB[0].summary!.webpack,
+    showSummaryItemDelta: false,
+    showSummaryItemBaseline: false,
+  },
 };
 
-export const WithLink = Template.bind({});
-
-WithLink.args = {
-  data: MULTIPLE_JOBS[0].summary,
-  summaryItemLink: (linkProps: React.ComponentProps<'button'>) => (
-    <button {...linkProps} type="button" onClick={() => alert(JSON.stringify(linkProps))} />
-  ),
+export const WithLink: Story = {
+  args: {
+    data: MULTIPLE_JOBS[0].summary!.webpack,
+    summaryItemLink: (linkProps) => (
+      <button {...linkProps} type="button" onClick={() => alert(JSON.stringify(linkProps))} />
+    ),
+  },
 };