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

package/src/components/insight-icon/insight-icon.tsx

@@ -3,7 +3,6 @@ import cx from 'classnames';
 import { InsightType } from '@bundle-stats/utils';
 
 import { Icon } from '../../ui/icon';
-// @ts-ignore
 import css from './insight-icon.module.css';
 
 const InsightTypeIconMap = new Map([
@@ -24,4 +23,3 @@ export const InsightIcon = (props: InsightIconProps) => {
 
   return <Icon glyph={glyph} className={rootClassName} />;
 };
-

package/src/components/insights/insights.tsx

@@ -5,7 +5,6 @@ import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { ComponentLink } from '../component-link';
 import { InsightIcon } from '../insight-icon';
-// @ts-ignore
 import css from './insights.module.css';
 
 interface InsightsProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/components/metric/metric.module.css

@@ -6,7 +6,7 @@
   font-size: var(--size-small);
 }
 
-.delta {
+.content {
   font-size: var(--size-small);
 }
 
@@ -14,7 +14,7 @@
   display: inline-block;
 }
 
-.inline .delta {
+.inline .content {
   display: inline-block;
   margin: 0 0 0 var(--space-xxxsmall);
 }

package/src/components/metric/metric.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Delta } from '../delta';
+import { Metric } from '.';
+
+export default {
+  title: 'Components/Metric',
+  component: Metric,
+  decorators: [getWrapperDecorator({ maxWidth: '200px' })],
+} as Meta;
+
+const Template: Story = (args) => <Metric {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  value: '100',
+};
+
+export const WithUnit = Template.bind({});
+
+WithUnit.args = {
+  value: '100',
+  unit: 'KiB',
+};
+
+export const WithDelta = Template.bind({});
+
+WithDelta.args = {
+  ...WithUnit.args,
+  children: <Delta displayValue="+10%" deltaType="POSITIVE" />,
+};
+
+export const Inline = Template.bind({});
+
+Inline.args = {
+  ...WithDelta.args,
+  inline: true,
+};

package/src/components/metric/metric.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import cx from 'classnames';
+
+import css from './metric.module.css';
+
+export interface MetricProps {
+  /**
+   * Metric value
+   */
+  value?: string;
+  /**
+   * Metric value unit
+   */
+  unit?: string;
+  /**
+   * Inline variant - render children inline
+   */
+  inline?: boolean;
+}
+
+export const Metric = (props: MetricProps & React.ComponentProps<'div'>) => {
+  const {
+    className = '',
+    value = '0',
+    unit = '',
+    inline = false,
+    children = null,
+    ...restProps
+  } = props;
+
+  const rootClassName = cx(className, css.root, inline && css.inline);
+
+  return (
+    <div className={rootClassName} {...restProps}>
+      <div className={css.display}>
+        <span className={css.displayValue}>{value}</span>
+        {unit && <span className={css.displayUnit}>{unit}</span>}
+      </div>
+      {children && <div className={css.content}>{children}</div>}
+    </div>
+  );
+};

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

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

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

@@ -0,0 +1,18 @@
+.readMoreLink {
+  appearance: none;
+  background: none;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.readMoreLink:hover,
+.readMoreLink:active,
+.readMoreLink:focus {
+  color: var(--color-primary-dark);
+  text-decoration: none;
+}
+

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

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { Meta, Story } from '@storybook/react';
+import { MetricRunInfo } from '.';
+
+export default {
+  title: 'Components/MetricRunInfo',
+  component: MetricRunInfo,
+} as Meta;
+
+const Template: Story = (args: any) => <MetricRunInfo {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  metricId: 'webpack.totalSizeByTypeALL',
+  current: 120 * 1024,
+  baseline: 100 * 1024,
+};
+
+export const NoBaseline = Template.bind({});
+
+NoBaseline.args = {
+  metricId: 'webpack.totalSizeByTypeALL',
+  current: 120 * 1024,
+};
+
+export const NoDelta = Template.bind({});
+
+NoDelta.args = {
+  ...Default.args,
+  showDelta: false,
+};

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

@@ -0,0 +1,67 @@
+import React, { useCallback } from 'react';
+import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
+
+import { Stack } from '../../layout/stack';
+import { RunInfo, RunInfoProps } from '../run-info';
+import css from './metric-run-info.module.css';
+
+interface MetricInfoProps {
+  description: string;
+  url?: string;
+}
+
+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 (
+    <Stack space="xxxsmall">
+      <p>{description}</p>
+      {url && (
+        <p>
+          <button type="button" onClick={onClick} className={css.readMoreLink}>
+            Read more
+          </button>
+        </p>
+      )}
+    </Stack>
+  );
+};
+
+export interface MetricRunInfoProps {
+  metricId: string;
+  current: number;
+  baseline?: number;
+  showDelta?: boolean;
+  showMetridDescription?: boolean;
+  size?: RunInfoProps['size'];
+  loading?: RunInfoProps['loading'];
+}
+
+export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'div'>) => {
+  const { metricId, current, baseline = undefined, showDelta = true, showMetridDescription = true, ...restProps } = props;
+
+  const metric = getGlobalMetricType(metricId);
+  const metricRunInfo = getMetricRunInfo(metric, current, baseline || 0);
+  const showBaseline = typeof baseline !== 'undefined';
+
+  return (
+    <RunInfo
+      title={metric.label}
+      titleHoverCard={showMetridDescription && <MetricHoverCard description={metric.description} url={metric.url} />}
+      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/{summary-item/summary-item.module.css → run-info/run-info.module.css}

@@ -7,13 +7,14 @@
 }
 
 .titleIcon {
+  flex: 0 0 var(--space-small);
   margin-top: -4px !important;
   margin-bottom: -4px !important;
 }
 
 .currentMetric {
   color: var(--color-heading);
-  font-size: var(--size-large);
+  font-size: var(--size-xlarge);
   line-height: var(--line-height-heading);
   white-space: nowrap;
   font-weight: bold;
@@ -21,28 +22,10 @@
 
 .baselineMetric {
   color: var(--color-text-light);
-  font-size: var(--size-small);
+  font-size: var(--size-medium);
   line-height: var(--line-height-heading);
 }
 
-.readMoreLink {
-  appearance: none;
-  background: none;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  color: var(--color-primary);
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.readMoreLink:hover,
-.readMoreLink:active,
-.readMoreLink:focus {
-  color: var(--color-primary-dark);
-  text-decoration: none;
-}
-
 /* Loading state */
 .loading.currentMetric {
   width: 8em;

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.module.css

@@ -7,3 +7,22 @@
   min-width: 16em;
   text-decoration: none;
 }
+
+.readMoreLink {
+  appearance: none;
+  background: none;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.readMoreLink:hover,
+.readMoreLink:active,
+.readMoreLink:focus {
+  color: var(--color-primary-dark);
+  text-decoration: none;
+}
+

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { createJobs } from '@bundle-stats/utils';
+
+import baselineData from '../../../__mocks__/webpack-stats.baseline.json';
+import currentData from '../../../__mocks__/webpack-stats.current.json';
+import { METRICS_WEBPACK_ASSETS } from '../../constants';
+import { getWrapperDecorator } from '../../stories';
+import { Summary } from '.';
+
+const MULTIPLE_JOBS = createJobs([{ webpack: currentData }, { webpack: baselineData }]);
+
+const SINGLE_JOB = createJobs([{ webpack: currentData }]);
+
+export default {
+  title: 'Components/Summary',
+  component: Summary,
+  decorators: [getWrapperDecorator()],
+} as Meta;
+
+const Template: Story = (args) => <Summary {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  data: MULTIPLE_JOBS[0].summary,
+};
+
+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 SingleRun = Template.bind({});
+
+SingleRun.args = {
+  data: SINGLE_JOB[0].summary,
+  showSummaryItemDelta: 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))} />
+  ),
+};

package/src/components/summary/summary.tsx

@@ -0,0 +1,97 @@
+import React, { useCallback } from 'react';
+import cx from 'classnames';
+import get from 'lodash/get';
+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 { ComponentLink } from '../component-link';
+import { MetricRunInfo, MetricRunInfoProps } from '../metric-run-info';
+import css from './summary.module.css';
+
+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'];
+}
+
+const SummaryItem = (props: SummaryItemProps & React.ComponentProps<'div'>) => {
+  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 });
+
+  return (
+    <Box
+      key={metricId}
+      outline
+      outlineHover
+      padding="small"
+      as={SummaryItemCustomLink}
+      {...componentLink?.link}
+      className={className}
+    >
+      <MetricRunInfo
+        metricId={metricId}
+        current={metricData.current}
+        baseline={metricData.baseline}
+        showDelta={showSummaryItemDelta && componentLink?.showDelta}
+        size={size}
+        loading={loading}
+      />
+    </Box>
+  );
+};
+
+export const Summary = ({
+  className = '',
+  size = 'medium',
+  keys = METRICS_WEBPACK_GENERAL,
+  data = null,
+  loading = false,
+  showSummaryItemDelta = true,
+  summaryItemLink = ComponentLink,
+}: SummaryProps & React.ComponentProps<'div'>) => (
+  <Box className={cx(css.root, className)}>
+    <FlexStack space="small" className={css.items}>
+      {keys.map((metricId) => (
+        <SummaryItem
+          key={metricId}
+          className={css.item}
+          metricId={metricId}
+          data={data}
+          summaryItemLink={summaryItemLink}
+          size={size}
+          loading={loading}
+          showSummaryItemDelta={showSummaryItemDelta}
+        />
+      ))}
+    </FlexStack>
+  </Box>
+);

package/src/layout/box/box.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import cx from 'classnames';
 
 import { NO_SPACE, SPACES } from '../../tokens';
-// @ts-ignore
 import css from './box.module.css';
 
 type SpaceValue = (typeof SPACES)[number];

package/src/layout/flex-stack/flex-stack.tsx

@@ -3,14 +3,13 @@ import cx from 'classnames';
 
 import { NO_SPACE, SPACES } from '../../tokens';
 import { getRenderChildWithClassName } from '../../utils';
-// @ts-ignore
 import css from './flex-stack.module.css';
 
 type SpaceValue = (typeof SPACES)[number];
 
 interface FlexStackProps<T extends React.ElementType> {
   as?: T;
-  space?: typeof SPACES[number];
+  space?: SpaceValue;
   inline?: boolean;
   alignItems?: 'top' | 'center' | 'bottom';
 }

package/src/ui/container/container.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
 
-// @ts-ignore
 import css from './container.module.css';
 
 interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/ui/tooltip/tooltip.tsx

@@ -7,7 +7,6 @@ import {
   useTooltipState,
 } from 'ariakit/tooltip';
 
-// @ts-ignore
 import css from './tooltip.module.css';
 
 interface TooltipProps<T extends React.ElementType> {

package/types/components/index.d.ts

@@ -18,6 +18,7 @@ export { MetricsTableOptions } from "./metrics-table-options";
 export { MetricsTableSearch } from "./metrics-table-search";
 export { MetricsTableTitle } from "./metrics-table-title";
 export { ModuleInfo } from "./module-info";
-export { SummaryItem } from "./summary-item";
 export { Summary } from "./summary";
 export { TotalSizeTypeTitle } from "./total-size-type-title";
+export { MetricRunInfo, MetricRunInfoProps } from "./metric-run-info";
+export { RunInfo, RunInfoProps } from "./run-info";