@bundle-stats/ui 4.2.5-beta.1 → 4.2.5-beta.3

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

@@ -1,49 +1,34 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
 
-import { MetricRunInfo } from './metric-run-info';
+import { Meta, Story } from '@storybook/react';
+import { MetricRunInfo } from '.';
 
 export default {
   title: 'Components/MetricRunInfo',
   component: MetricRunInfo,
 } as Meta;
 
-const Template: Story = (args) => <MetricRunInfo id="webpack.totalSizeByTypeALL" {...args} />;
+const Template: Story = (args: any) => <MetricRunInfo {...args} />;
 
 export const Default = Template.bind({});
 
 Default.args = {
-  title: 'Bundle Size',
-  current: '120KiB',
-  baseline: '100KiB',
-  delta: '+20%',
-  deltaType: 'HIGH_NEGATIVE',
-};
-
-export const SizeLarge = Template.bind({});
-
-SizeLarge.args = {
-  ...Default.args,
-  size: 'large',
+  metricId: 'webpack.totalSizeByTypeALL',
+  current: 120 * 1024,
+  baseline: 100 * 1024,
 };
 
-export const TitleHoverCard = Template.bind({});
+export const NoBaseline = Template.bind({});
 
-TitleHoverCard.args = {
-  ...Default.args,
-  titleHoverCard: 'Info',
+NoBaseline.args = {
+  metricId: 'webpack.totalSizeByTypeALL',
+  current: 120 * 1024,
+  showBaseline: false,
 };
 
-export const TitleTooltip = Template.bind({});
+export const NoDelta = Template.bind({});
 
-TitleTooltip.args = {
+NoDelta.args = {
   ...Default.args,
-  titleTooltip: 'Info',
-};
-
-export const Loading = Template.bind({});
-
-Loading.args = {
-  title: 'Bundle Size',
-  loading: true,
+  showDelta: false,
 };

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

@@ -1,101 +1,84 @@
-import React from 'react';
-import cx from 'classnames';
+import React, { useCallback, useMemo } from 'react';
+import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
 
-import { Icon } from '../../ui/icon';
-import { HoverCard } from '../../ui/hover-card';
-import { Tooltip } from '../../ui/tooltip';
-import { Skeleton } from '../../ui/skeleton';
-import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
-import { Metric } from '../metric';
-import { Delta } from '../delta';
+import { RunInfo, RunInfoProps } from '../run-info';
 import css from './metric-run-info.module.css';
 
-// Separate value and unit
-const EXTRACT_VALUE_UNIT_PATTERN = /([\d|.|,| ]*)(\w*|%)$/;
-
-const getMetricParams = (value: string) => {
-  const matches = value.match(EXTRACT_VALUE_UNIT_PATTERN);
+interface MetricInfoProps {
+  description: string;
+  url?: string;
+}
 
-  if (!matches) {
-    return { value, unit: '' };
-  }
+const MetricHoverCard = ({ description, url }: MetricInfoProps) => {
+  // The component parent can be rendered inside a link, use button to avoid using nested links
+  const onClick = useCallback(() => {
+    if (url) {
+      window.open(url);
+    }
+  }, [url]);
 
-  return {
-    value: matches[1],
-    unit: matches[2],
-  };
+  return (
+    <Stack space="xxxsmall">
+      <p>{description}</p>
+      {url && (
+        <p>
+          <button type="button" onClick={onClick} className={css.readMoreLink}>
+            Read more
+          </button>
+        </p>
+      )}
+    </Stack>
+  );
 };
 
 export interface MetricRunInfoProps {
-  title?: string;
-  titleHoverCard?: React.ReactNode;
-  titleTooltip?: React.ReactNode;
-  current?: string;
-  baseline?: string;
-  delta?: string;
-  deltaType?: string;
-
-  as?: React.ElementType;
-  size?: 'medium' | 'large';
-
-  loading?: boolean;
+  metricId: string;
+  current: number;
+  baseline?: number;
+  showDelta?: boolean;
+  showMetricDescription?: boolean;
+  showBaseline?: boolean;
+  size?: RunInfoProps['size'];
+  loading?: RunInfoProps['loading'];
 }
 
-export const MetricRunInfo = ({
-  className = '',
-  title = '',
-  titleHoverCard = null,
-  titleTooltip = null,
-  current = '',
-  baseline = '',
-  delta = '',
-  deltaType = '',
-  as: Component = 'div',
-  size = 'medium',
-  loading = false,
-  ...restProps
-}: MetricRunInfoProps & React.ComponentProps<'div'>) => {
-  const metricParams = getMetricParams(current);
-  const rootClassName = cx(css.root, className, css[size], delta && css.showDelta);
+export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'div'>) => {
+  const {
+    metricId,
+    current,
+    baseline = 0,
+    showDelta = true,
+    showMetricDescription = true,
+    showBaseline = true,
+    ...restProps
+  } = props;
 
-  return (
-    <Stack space="xxsmall" as={Component} className={rootClassName} {...restProps}>
-      {title && (
-        <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.title}>
-          <span>{title}</span>
+  const metric = getGlobalMetricType(metricId);
+  const metricRunInfo = getMetricRunInfo(metric, current, baseline || 0);
 
-          {titleHoverCard && (
-            <HoverCard label={<Icon glyph={Icon.ICONS.HELP} />} className={css.titleIcon}>
-              {titleHoverCard}
-            </HoverCard>
-          )}
-          {titleTooltip && (
-            <Tooltip title={titleTooltip} className={css.titleIcon}>
-              <Icon glyph={Icon.ICONS.HELP} />
-            </Tooltip>
-          )}
-        </FlexStack>
-      )}
+  const titleHoverCard = useMemo(() => {
+    if (showMetricDescription) {
+      return <MetricHoverCard description={metric.description} url={metric.url} />;
+    }
 
-      {!loading ? (
-        <Stack>
-          <Metric
-            className={css.currentMetric}
-            value={metricParams.value}
-            unit={metricParams.unit}
-            inline
-          >
-            {delta && <Delta className={css.delta} displayValue={delta} deltaType={deltaType} />}
-          </Metric>
-          <Metric className={css.baselineMetric} value={baseline} />
-        </Stack>
-      ) : (
-        <Stack>
-          <Skeleton as="p" className={cx(css.currentMetric, css.loading)} />
-          <Skeleton as="p" className={cx(css.baselineMetric, css.loading)} />
-        </Stack>
-      )}
-    </Stack>
+    return null;
+  }, [showMetricDescription, metric]);
+
+  return (
+    <RunInfo
+      title={metric.label}
+      titleHoverCard={titleHoverCard}
+      enhance
+      current={metricRunInfo.displayValue}
+      {...(showBaseline && {
+        baseline: metric.formatter(baseline),
+      })}
+      {...(showDelta && showBaseline && {
+        delta: metricRunInfo.displayDeltaPercentage,
+        deltaType: metricRunInfo.deltaType,
+      })}
+      {...restProps}
+    />
   );
 };

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

@@ -14,6 +14,7 @@
 
 .anchorIcon {
   display: block;
+  margin: -2px 0; /* compensate for the vertical space */
 }
 
 .info {

package/src/components/run-info/index.ts

@@ -0,0 +1 @@
+export * from './run-info';

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

@@ -0,0 +1,41 @@
+.title {
+  color: var(--color-text-ultra-light);
+  font-weight: bold;
+  font-size: var(--size-xsmall);
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.titleIcon {
+  flex: 0 0 var(--space-small);
+  margin-top: -4px !important;
+  margin-bottom: -4px !important;
+}
+
+.currentMetric {
+  color: var(--color-heading);
+  font-size: var(--size-xlarge);
+  line-height: var(--line-height-heading);
+  white-space: nowrap;
+  font-weight: bold;
+}
+
+.baselineMetric {
+  color: var(--color-text-light);
+  font-size: var(--size-medium);
+  line-height: var(--line-height-heading);
+}
+
+/* Loading state */
+.loading.currentMetric {
+  width: 8em;
+}
+
+.loading.baselineMetric {
+  width: 5em;
+}
+
+/* Size large */
+.large .currentMetric {
+  font-size: var(--size-xxxlarge);
+}

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { RunInfo } from './run-info';
+
+export default {
+  title: 'Components/RunInfo',
+  component: RunInfo,
+} as Meta;
+
+const Template: Story = (args) => <RunInfo id="webpack.totalSizeByTypeALL" {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  title: 'Bundle Size',
+  current: '120KiB',
+  baseline: '100KiB',
+  delta: '+20%',
+  deltaType: 'HIGH_NEGATIVE',
+};
+
+export const SizeLarge = Template.bind({});
+
+SizeLarge.args = {
+  ...Default.args,
+  size: 'large',
+};
+
+export const TitleHoverCard = Template.bind({});
+
+TitleHoverCard.args = {
+  ...Default.args,
+  titleHoverCard: 'Info',
+};
+
+export const TitleTooltip = Template.bind({});
+
+TitleTooltip.args = {
+  ...Default.args,
+  titleTooltip: 'Info',
+};
+
+export const Loading = Template.bind({});
+
+Loading.args = {
+  title: 'Bundle Size',
+  loading: true,
+};

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

@@ -0,0 +1,106 @@
+import React, { useMemo } from 'react';
+import cx from 'classnames';
+
+import { Icon } from '../../ui/icon';
+import { HoverCard } from '../../ui/hover-card';
+import { Tooltip } from '../../ui/tooltip';
+import { Skeleton } from '../../ui/skeleton';
+import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
+import { Metric } from '../metric';
+import { Delta } from '../delta';
+import css from './run-info.module.css';
+
+// Separate value and unit
+const EXTRACT_VALUE_UNIT_PATTERN = /([\d|.|,| ]*)(\w*|%)$/;
+
+const getMetricParams = (value: string): [string, string?] => {
+  const matches = value.match(EXTRACT_VALUE_UNIT_PATTERN);
+
+  if (!matches) {
+    return [value];
+  }
+
+  return [matches[1], matches[2]];
+};
+
+export interface RunInfoProps {
+  title?: string;
+  titleHoverCard?: React.ReactNode;
+  titleTooltip?: React.ReactNode;
+  current?: React.ReactNode;
+  baseline?: string;
+  delta?: string;
+  deltaType?: string;
+
+  as?: React.ElementType;
+  size?: 'medium' | 'large';
+
+  loading?: boolean;
+  enhance?: boolean;
+}
+
+export const RunInfo = ({
+  className = '',
+  title = '',
+  titleHoverCard = null,
+  titleTooltip = null,
+  current = '',
+  baseline = '',
+  delta = '',
+  deltaType = '',
+  as: Component = 'div',
+  size = 'medium',
+  loading = false,
+  enhance = false,
+  ...restProps
+}: RunInfoProps & React.ComponentProps<'div'>) => {
+  const rootClassName = cx(css.root, className, css[size], delta && css.showDelta);
+
+  const currentValueParams: [React.ReactNode, string?] = useMemo(() => {
+    if (!enhance || typeof current !== 'string') {
+      return [current];
+    }
+
+    return getMetricParams(current);
+  }, [current, enhance]);
+
+  return (
+    <Stack space="xxsmall" as={Component} className={rootClassName} {...restProps}>
+      {title && (
+        <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.title}>
+          <span>{title}</span>
+          {titleHoverCard && (
+            <HoverCard label={<Icon glyph={Icon.ICONS.HELP} />} className={css.titleIcon}>
+              {titleHoverCard}
+            </HoverCard>
+          )}
+          {titleTooltip && (
+            <Tooltip title={titleTooltip} className={css.titleIcon}>
+              <Icon glyph={Icon.ICONS.HELP} />
+            </Tooltip>
+          )}
+        </FlexStack>
+      )}
+
+      {!loading ? (
+        <Stack>
+          <Metric
+            className={css.currentMetric}
+            value={currentValueParams[0]}
+            unit={currentValueParams[1]}
+            inline
+          >
+            {delta && <Delta className={css.delta} displayValue={delta} deltaType={deltaType} />}
+          </Metric>
+          <Metric className={css.baselineMetric} value={baseline} />
+        </Stack>
+      ) : (
+        <Stack>
+          <Skeleton as="p" className={cx(css.currentMetric, css.loading)} />
+          <Skeleton as="p" className={cx(css.baselineMetric, css.loading)} />
+        </Stack>
+      )}
+    </Stack>
+  );
+};

package/src/components/summary/summary.stories.tsx

@@ -44,6 +44,7 @@ export const SingleRun = Template.bind({});
 SingleRun.args = {
   data: SINGLE_JOB[0].summary,
   showSummaryItemDelta: false,
+  showSummaryItemBaseline: false,
 };
 
 export const WithLink = Template.bind({});

package/src/components/summary/summary.tsx

@@ -1,74 +1,39 @@
 import React, { useCallback } from 'react';
 import cx from 'classnames';
 import get from 'lodash/get';
-import { METRIC_COMPONENT_LINKS, getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
+import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
 
 import { METRICS_WEBPACK_GENERAL } from '../../constants';
 import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
-import { Stack } from '../../layout/stack';
 import { ComponentLink } from '../component-link';
 import { MetricRunInfo, MetricRunInfoProps } from '../metric-run-info';
 import css from './summary.module.css';
 
-interface MetricInfoProps {
-  description: string;
-  url?: string;
-}
-
-const MetricInfo = ({ description, url }: MetricInfoProps) => {
-  // The component parent can be rendered inside a link, use button to avoid using nested links
-  const onClick = useCallback(() => {
-    if (url) {
-      window.open(url);
-    }
-  }, [url]);
-
-  return (
-    <Stack space="xxxsmall">
-      <p>{description}</p>
-      {url && (
-        <p>
-          <button type="button" onClick={onClick} className={css.readMoreLink}>
-            Read more
-          </button>
-        </p>
-      )}
-    </Stack>
-  );
-};
-
-interface SummaryItemData {
-  current: number;
-  baseline: number;
-}
-
-interface SummaryProps {
-  size?: MetricRunInfoProps['size'];
-  keys?: Array<string>;
-  data?: Record<string, SummaryItemData> | null;
-  loading?: boolean;
-  showSummaryItemDelta?: boolean;
-  summaryItemLink?: React.ElementType;
-}
-
 interface SummaryItemProps {
   metricId: string;
-  data?: SummaryProps['data'];
-  summaryItemLink: SummaryProps['summaryItemLink'];
-  size: SummaryProps['size'];
-  loading: SummaryProps['loading'];
-  showSummaryItemDelta: SummaryProps['showSummaryItemDelta'];
+  data?: Record<string, SummaryItemData> | null;
+  customLink: React.ElementType;
+  size?: MetricRunInfoProps['size'];
+  loading: boolean;
+  showDelta: boolean;
+  showBaseline: boolean;
 }
 
 const SummaryItem = (props: SummaryItemProps & React.ComponentProps<'div'>) => {
-  const { className = '', metricId, data, summaryItemLink: SummaryItemCustomLink, size, loading, showSummaryItemDelta } = props;
+  const {
+    className = '',
+    metricId,
+    data,
+    customLink: SummaryItemCustomLink,
+    size,
+    loading,
+    showDelta,
+    showBaseline,
+  } = props;
 
   const componentLink = METRIC_COMPONENT_LINKS.get(metricId);
-
   const metricData = get(data, metricId, { current: 0, baseline: 0 });
-  const metric = getGlobalMetricType(metricId);
-  const metricRunInfo = getMetricRunInfo(metric, metricData.current, metricData.baseline);
 
   return (
     <Box
@@ -81,21 +46,33 @@ const SummaryItem = (props: SummaryItemProps & React.ComponentProps<'div'>) => {
       className={className}
     >
       <MetricRunInfo
-        title={metric.label}
-        titleHoverCard={<MetricInfo description={metric.description} url={metric.url} />}
-        current={metricRunInfo.displayValue}
-        baseline={metric.formatter(metricData.baseline)}
+        metricId={metricId}
+        current={metricData.current}
+        baseline={metricData.baseline}
+        showDelta={showDelta && componentLink?.showDelta}
+        showBaseline={showBaseline}
         size={size}
         loading={loading}
-        {...(showSummaryItemDelta && componentLink?.showDelta !== false && {
-          delta: metricRunInfo.displayDeltaPercentage,
-          deltaType: metricRunInfo.deltaType,
-        })}
       />
     </Box>
   );
 };
 
+interface SummaryItemData {
+  current: number;
+  baseline: number;
+}
+
+interface SummaryProps {
+  size?: MetricRunInfoProps['size'];
+  keys?: Array<string>;
+  data?: SummaryItemProps['data'];
+  loading?: boolean;
+  showSummaryItemDelta?: SummaryItemProps['showDelta'];
+  showSummaryItemBaseline?: SummaryItemProps['showBaseline'];
+  summaryItemLink?: SummaryItemProps['customLink'];
+}
+
 export const Summary = ({
   className = '',
   size = 'medium',
@@ -103,6 +80,7 @@ export const Summary = ({
   data = null,
   loading = false,
   showSummaryItemDelta = true,
+  showSummaryItemBaseline = true,
   summaryItemLink = ComponentLink,
 }: SummaryProps & React.ComponentProps<'div'>) => (
   <Box className={cx(css.root, className)}>
@@ -113,10 +91,11 @@ export const Summary = ({
           className={css.item}
           metricId={metricId}
           data={data}
-          summaryItemLink={summaryItemLink}
+          customLink={summaryItemLink}
           size={size}
           loading={loading}
-          showSummaryItemDelta={showSummaryItemDelta}
+          showDelta={showSummaryItemDelta}
+          showBaseline={showSummaryItemBaseline}
         />
       ))}
     </FlexStack>

package/types/components/index.d.ts

@@ -21,3 +21,4 @@ export { ModuleInfo } from "./module-info";
 export { Summary } from "./summary";
 export { TotalSizeTypeTitle } from "./total-size-type-title";
 export { MetricRunInfo, MetricRunInfoProps } from "./metric-run-info";
+export { RunInfo, RunInfoProps } from "./run-info";

package/types/components/metric/metric.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export interface MetricProps {
-    value?: string;
+    value?: React.ReactNode;
     unit?: string;
     inline?: boolean;
 }

package/types/components/metric-run-info/metric-run-info.d.ts

@@ -1,14 +1,13 @@
 import React from 'react';
+import { RunInfoProps } from '../run-info';
 export interface MetricRunInfoProps {
-    title?: string;
-    titleHoverCard?: React.ReactNode;
-    titleTooltip?: React.ReactNode;
-    current?: string;
-    baseline?: string;
-    delta?: string;
-    deltaType?: string;
-    as?: React.ElementType;
-    size?: 'medium' | 'large';
-    loading?: boolean;
+    metricId: string;
+    current: number;
+    baseline?: number;
+    showDelta?: boolean;
+    showMetricDescription?: boolean;
+    showBaseline?: boolean;
+    size?: RunInfoProps['size'];
+    loading?: RunInfoProps['loading'];
 }
-export declare const MetricRunInfo: ({ className, title, titleHoverCard, titleTooltip, current, baseline, delta, deltaType, as: Component, size, loading, ...restProps }: MetricRunInfoProps & React.ComponentProps<'div'>) => JSX.Element;
+export declare const MetricRunInfo: (props: MetricRunInfoProps & React.ComponentProps<'div'>) => JSX.Element;

package/types/components/run-info/index.d.ts

@@ -0,0 +1 @@
+export * from './run-info';

package/types/components/run-info/run-info.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface RunInfoProps {
+    title?: string;
+    titleHoverCard?: React.ReactNode;
+    titleTooltip?: React.ReactNode;
+    current?: React.ReactNode;
+    baseline?: string;
+    delta?: string;
+    deltaType?: string;
+    as?: React.ElementType;
+    size?: 'medium' | 'large';
+    loading?: boolean;
+    enhance?: boolean;
+}
+export declare const RunInfo: ({ className, title, titleHoverCard, titleTooltip, current, baseline, delta, deltaType, as: Component, size, loading, enhance, ...restProps }: RunInfoProps & React.ComponentProps<'div'>) => JSX.Element;