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

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,100 @@
+import React 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) => {
+  const matches = value.match(EXTRACT_VALUE_UNIT_PATTERN);
+
+  if (!matches) {
+    return { value, unit: '' };
+  }
+
+  return {
+    value: matches[1],
+    unit: matches[2],
+  };
+};
+
+export interface RunInfoProps {
+  title?: string;
+  titleHoverCard?: React.ReactNode;
+  titleTooltip?: React.ReactNode;
+  current?: string;
+  baseline?: string;
+  delta?: string;
+  deltaType?: string;
+
+  as?: React.ElementType;
+  size?: 'medium' | 'large';
+
+  loading?: boolean;
+}
+
+export const RunInfo = ({
+  className = '',
+  title = '',
+  titleHoverCard = null,
+  titleTooltip = null,
+  current = '',
+  baseline = '',
+  delta = '',
+  deltaType = '',
+  as: Component = 'div',
+  size = 'medium',
+  loading = false,
+  ...restProps
+}: RunInfoProps & React.ComponentProps<'div'>) => {
+  const metricParams = getMetricParams(current);
+  const rootClassName = cx(css.root, className, css[size], delta && css.showDelta);
+
+  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={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>
+  );
+};

package/src/components/summary/summary.tsx

@@ -1,43 +1,15 @@
 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;
@@ -62,13 +34,18 @@ interface SummaryItemProps {
 }
 
 const SummaryItem = (props: SummaryItemProps & React.ComponentProps<'div'>) => {
-  const { className = '', metricId, data, summaryItemLink: SummaryItemCustomLink, size, loading, showSummaryItemDelta } = props;
+  const {
+    className = '',
+    metricId,
+    data,
+    summaryItemLink: SummaryItemCustomLink,
+    size,
+    loading,
+    showSummaryItemDelta,
+  } = 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,16 +58,12 @@ 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={showSummaryItemDelta && componentLink?.showDelta}
         size={size}
         loading={loading}
-        {...(showSummaryItemDelta && componentLink?.showDelta !== false && {
-          delta: metricRunInfo.displayDeltaPercentage,
-          deltaType: metricRunInfo.deltaType,
-        })}
       />
     </Box>
   );

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-run-info/metric-run-info.d.ts

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