@bundle-stats/ui 4.2.2 → 4.2.3-beta.1

package/src/components/jobs-header/jobs-header.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import cx from 'classnames';
+import { formatDateTime } from '@bundle-stats/utils';
+
+import I18N from '../../i18n';
+import { FlexStack } from '../../layout/flex-stack';
+import { Icon } from '../../ui/icon';
+import { Tag } from '../../ui/tag';
+import css from './jobs-header.module.css';
+
+interface ItemProps {
+  job: {
+    internalBuildNumber: number;
+    meta?: {
+      webpack?: {
+        builtAt?: string;
+        hash?: string;
+      };
+    };
+  };
+  tag: string;
+}
+
+export const Item = (props: ItemProps & React.ComponentProps<'div'>) => {
+  const { className, tag, job } = props;
+
+  const { builtAt, hash } = job.meta?.webpack || {};
+  const rootClassName = cx(css.item, className);
+
+  return (
+    <FlexStack space="xsmall" alignItems="center" className={rootClassName}>
+      <FlexStack space="xxsmall" as="h1" className={css.itemTitle}>
+        <span>{`#${job.internalBuildNumber}`}</span>
+        {tag && <Tag className={css.itemTag}>{tag}</Tag>}
+      </FlexStack>
+
+      {builtAt && (
+        <FlexStack
+          space="xxxsmall"
+          alignItems="center"
+          inline
+          as="span"
+          title={builtAt}
+          className={css.itemMeta}
+        >
+          <Icon glyph={Icon.ICONS.CLOCK} className={css.itemMetaIcon} />
+          <span className={css.itemMetaText}>
+            {formatDateTime({ dateStyle: 'medium', timeStyle: 'medium' }, builtAt)}
+          </span>
+        </FlexStack>
+      )}
+
+      {hash && (
+        <FlexStack
+          space="xxxsmall"
+          alignItems="center"
+          inline
+          as="span"
+          title="Webpack bundle hash"
+          className={css.itemMeta}
+        >
+          <Icon glyph={Icon.ICONS.COMMIT} className={css.itemMetaIcon} />
+          <span className={css.itemMetaText}>{hash.slice(0, 7)}</span>
+        </FlexStack>
+      )}
+    </FlexStack>
+  );
+};
+
+interface JobsHeaderProps {
+  jobs?: Array<ItemProps['job']> | null;
+}
+
+export const JobsHeader = (props: JobsHeaderProps & React.ComponentProps<'header'>) => {
+  const { className, jobs } = props;
+  const rootClassName = cx(css.root, className);
+
+  return (
+    <header className={rootClassName}>
+      {jobs?.map((job, index) => (
+        <Item
+          key={job.internalBuildNumber || index}
+          job={job}
+          tag={index === 0 ? I18N.CURRENT : I18N.BASELINE}
+        />
+      ))}
+    </header>
+  );
+};

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

@@ -1,12 +1,13 @@
 .root {
-  letter-spacing: 0.05em;
+  font-family: var(--font-family-fixed);
+  line-height: 1;
 }
 
 .displayUnit {
   font-size: var(--size-small);
 }
 
-.delta {
+.content {
   font-size: var(--size-small);
 }
 
@@ -14,7 +15,7 @@
   display: inline-block;
 }
 
-.inline .delta {
+.inline .content {
   display: inline-block;
-  margin: 0 0 0 var(--space-xxxsmall);
+  margin: 0 0 0 var(--space-xxsmall);
 }

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?: React.ReactNode;
+  /**
+   * 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,17 @@
+.metricHoverCardTitle {
+  font-weight: bold;
+  font-size: 1em;
+}
+
+.readMoreLink {
+  cursor: pointer;
+  color: var(--color-primary);
+  text-decoration: underline;
+}
+
+.readMoreLink:hover,
+.readMoreLink:focus,
+.readMoreLink:active {
+  color: var(--color-primary-dark);
+  text-decoration: none;
+}

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

@@ -0,0 +1,61 @@
+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,
+  showBaseline: false,
+};
+
+export const NoDelta = Template.bind({});
+
+NoDelta.args = {
+  ...NoBaseline.args,
+  showDelta: false,
+};
+
+export const MetricNoDelta = Template.bind({});
+
+MetricNoDelta.args = {
+  metricId: 'webpack.cacheInvalidation',
+  current: 85,
+  baseline: 50,
+};
+
+export const CustomTitle = Template.bind({});
+
+CustomTitle.args = {
+  ...Default.args,
+  titleWrapper: ({ children, style, ...restProps }: React.ComponentProps<'h1'>) => (
+    <h1 style={{ ...style, fontStyle: 'italic' }} {...restProps}>
+      {children}
+    </h1>
+  ),
+};
+
+export const CustomComponent = Template.bind({});
+
+CustomComponent.args = {
+  ...Default.args,
+  as: 'a',
+  href: 'https://google.com/search?query=bundle+stats',
+};

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

@@ -0,0 +1,120 @@
+import React, { type MouseEvent, useCallback, useMemo, ElementType } from 'react';
+import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
+import { Focusable } from 'ariakit/focusable';
+
+import { Stack } from '../../layout/stack';
+import { FlexStack } from '../../layout/flex-stack';
+import { Icon } from '../../ui/icon';
+import { RunInfo, RunInfoProps } from '../run-info';
+import css from './metric-run-info.module.css';
+
+interface MetricInfoProps {
+  title: string;
+  description?: string;
+  url?: string;
+}
+
+const MetricHoverCard = ({ title, description, url }: MetricInfoProps) => {
+  // The component parent can be rendered inside a link or a button
+  // use a focusable element with onClick to prevent DOM issues (a > button, a > a, etc)
+  const onClick = useCallback(
+    (event: MouseEvent<HTMLSpanElement>) => {
+      if (!url) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      window.open(url);
+    },
+    [url],
+  );
+
+  return (
+    <Stack space="xxsmall" className={css.metricHoverCard}>
+      <h3 className={css.metricHoverCardTitle}>{title}</h3>
+      <Stack space="xxxsmall">
+        <p className={css.metricHoverCardDescription}>{description}</p>
+        {url && (
+          <div>
+            <Focusable as="span" onClick={onClick} className={css.readMoreLink}>
+              <FlexStack alignItems="center" space="xxxsmall">
+                <span>Learn more</span>
+                <Icon glyph={Icon.ICONS.EXTERNAL_LINK} size="small" />
+              </FlexStack>
+            </Focusable>
+          </div>
+        )}
+      </Stack>
+    </Stack>
+  );
+};
+
+export interface MetricRunInfoProps {
+  metricId: string;
+  current: number;
+  baseline?: number;
+  showDelta?: boolean;
+  showMetricDescription?: boolean;
+  showBaseline?: boolean;
+  titleWrapper?: ElementType;
+  size?: RunInfoProps['size'];
+  loading?: RunInfoProps['loading'];
+}
+
+export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'div'>) => {
+  const {
+    metricId,
+    current,
+    baseline = 0,
+    showDelta = true,
+    showMetricDescription = true,
+    showBaseline = true,
+    titleWrapper: CustomTitleWrapper = React.Fragment,
+    ...restProps
+  } = props;
+
+  const metric = getGlobalMetricType(metricId);
+  const metricRunInfo = getMetricRunInfo(metric, current, baseline || 0);
+
+  const titleHoverCard = useMemo(() => {
+    if (showMetricDescription && (metric.description || metric.url)) {
+      return (
+        <MetricHoverCard title={metric.label} description={metric.description} url={metric.url} />
+      );
+    }
+
+    return null;
+  }, [showMetricDescription, metric]);
+
+  const title = useMemo(
+    () => <CustomTitleWrapper>{metric.label}</CustomTitleWrapper>,
+    [CustomTitleWrapper, metric.label],
+  );
+
+  const deltaProps = useMemo(() => {
+    if (!showDelta || metric.skipDelta || !('delta' in metricRunInfo)) {
+      return {};
+    }
+
+    return {
+      delta: metricRunInfo.displayDeltaPercentage,
+      deltaType: metricRunInfo.deltaType,
+    };
+  }, [metricRunInfo]);
+
+  return (
+    <RunInfo
+      title={title}
+      titleHoverCard={titleHoverCard}
+      enhance
+      current={metricRunInfo.displayValue}
+      showBaseline={showBaseline}
+      {...(showBaseline && {
+        baseline: metric.formatter(baseline),
+      })}
+      {...deltaProps}
+      {...restProps}
+    />
+  );
+};

package/src/components/metrics-display-selector/index.tsx

@@ -0,0 +1 @@
+export * from './metrics-display-selector';

package/src/components/metrics-display-selector/metrics-display-selector.module.css

@@ -0,0 +1,63 @@
+.dropdownGroup {
+  border: 1px solid var(--color-outline);
+  transition: var(--transition-out);
+}
+
+.dropdownGroupButton {
+  padding: calc(var(--space-xxsmall) - 1px);
+}
+
+.dropdownGroupAnchor {
+  border: none;
+  border-radius: 0;
+  position: relative;
+}
+
+.dropdownGroupAnchor::before {
+  content: '';
+  display: block;
+  width: 1px;
+  background: var(--color-outline-dark);
+  position: absolute;
+  left: 0;
+  top: var(--space-xxxsmall);
+  bottom: var(--space-xxxsmall);
+}
+
+.dropdownGroupAnchor:hover,
+.dropdownGroupAnchor:focus,
+.dropdownGroupAnchor:active {
+  border-color: var(--color-outline);
+  box-shadow: none;
+  background: none;
+}
+
+.dropdownGroup:hover {
+  border-color: var(--color-outline-dark);
+  transition: var(--transition-in);
+}
+
+.itemActive {
+  background: var(--color-highlight);
+}
+
+/* explicit ControlGroup last item styles to override ariakit injected sibling nodes */
+.itemFirst {
+  border-top-left-radius: var(--radius-small) !important;
+  border-bottom-left-radius: var(--radius-small) !important;
+}
+
+.itemLast {
+  border-top-right-radius: var(--radius-small) !important;
+  border-bottom-right-radius: var(--radius-small) !important;
+}
+
+.dropdownItemIcon {
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.dropdownItemActive .dropdownItemIcon {
+  opacity: 1;
+  transition: var(--transition-in);
+}

package/src/components/metrics-display-selector/metrics-display-selector.stories.tsx

@@ -0,0 +1,33 @@
+import { action } from 'storybook/actions'; // eslint-disable-line
+import { Meta, StoryObj } from '@storybook/react';
+
+import { MetricsDisplayType } from '../../constants';
+import { MetricsDisplaySelector } from '.';
+
+const meta: Meta<typeof MetricsDisplaySelector> = {
+  title: 'Components/MetricsDisplaySelector',
+  component: MetricsDisplaySelector,
+  args: {
+    onSelect: action('SELECT'),
+  },
+} as Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: MetricsDisplayType.TABLE,
+  },
+};
+
+export const TreemapGroups: Story = {
+  args: {
+    value: MetricsDisplayType.TREEMAP,
+    groupBy: '',
+    groups: {
+      [MetricsDisplayType.TREEMAP]: ['folder'],
+    },
+  },
+};

package/src/components/metrics-display-selector/metrics-display-selector.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import cx from 'classnames';
+
+import {
+  MetricsDisplayType,
+  MetricsDisplayGroupByDefault,
+  MetricsDisplayGroupBy,
+} from '../../constants';
+import { Button } from '../../ui/button';
+import { ControlGroup } from '../../ui/control-group';
+import { Dropdown, DropdownItem } from '../../ui/dropdown';
+import { Icon } from '../../ui/icon';
+import { FlexStack } from '../../layout/flex-stack';
+import css from './metrics-display-selector.module.css';
+
+const METRICS_DISPLAY_MAP = {
+  [MetricsDisplayType.TABLE]: {
+    glyph: Icon.ICONS.TABLE,
+    label: 'Table',
+  },
+  [MetricsDisplayType.TREEMAP]: {
+    glyph: Icon.ICONS.TREEMAP,
+    label: 'Treemap',
+  },
+};
+
+const displayTypes = Object.values(MetricsDisplayType);
+
+interface MetricsDisplaySelectorProps {
+  value: MetricsDisplayType;
+  groupBy?: string;
+  groups?: Partial<Record<MetricsDisplayType, Array<string>>>;
+  onSelect: (newValue: MetricsDisplayType, groupBy?: string) => void;
+}
+
+export const MetricsDisplaySelector = (
+  props: MetricsDisplaySelectorProps &
+    Omit<React.ComponentProps<typeof ControlGroup>, 'onSelect' | 'value'>,
+) => {
+  const {
+    value,
+    groupBy = MetricsDisplayGroupByDefault,
+    groups = {},
+    onSelect,
+    ...restProps
+  } = props;
+
+  return (
+    <ControlGroup {...restProps}>
+      {displayTypes.map((displayType, index) => {
+        const displayGroups = groups?.[displayType];
+        const displayProps = METRICS_DISPLAY_MAP[displayType];
+        const isFirst = index === 0;
+        const isLast = displayTypes.length - 1 === index;
+        const isActive = displayType === value;
+
+        if (!displayGroups || displayGroups.length === 0) {
+          return (
+            <Button
+              outline
+              active={isActive}
+              size="small"
+              type="button"
+              glyph={displayProps.glyph}
+              onClick={() => onSelect(displayType)}
+              className={cx(isLast && css.itemLast)}
+              key={displayType}
+            >
+              {displayProps.label}
+            </Button>
+          );
+        }
+
+        const displayGroupsData = [
+          ...displayGroups.map((displayGroup) => ({
+            value: displayGroup,
+            label: `Group by ${displayGroup}`,
+          })),
+          {
+            value: MetricsDisplayGroupBy.NONE,
+            label: 'No group',
+          },
+        ];
+
+        const itemClassName = cx(
+          css.dropdownGroup,
+          isFirst && css.itemFirst,
+          isLast && css.itemLast,
+          isActive && css.itemActive,
+        );
+
+        return (
+          <FlexStack className={itemClassName} key={displayType}>
+            <Button
+              size="small"
+              glyph={displayProps.glyph}
+              onClick={() => onSelect(displayType)}
+              className={css.dropdownGroupButton}
+            >
+              {displayProps.label}
+            </Button>
+            <Dropdown
+              glyph={Icon.ICONS.CHEVRON_DOWN}
+              placement="bottom-end"
+              shift={-1}
+              className={css.dropdownGroupAnchor}
+            >
+              {displayGroupsData.map((displayGroupData) => {
+                const isGroupActive = isActive && displayGroupData.value === groupBy;
+
+                return (
+                  <DropdownItem
+                    onClick={() => onSelect(displayType, displayGroupData.value)}
+                    isActive={isGroupActive}
+                    className={cx(css.dropdownItem, isGroupActive && css.dropdownItemActive)}
+                    key={displayGroupData.value}
+                  >
+                    <FlexStack space="xxxsmall" alignItems="center">
+                      <Icon
+                        glyph={Icon.ICONS.CHECK}
+                        size="small"
+                        className={css.dropdownItemIcon}
+                      />
+                      <span>{displayGroupData.label}</span>
+                    </FlexStack>
+                  </DropdownItem>
+                );
+              })}
+            </Dropdown>
+          </FlexStack>
+        );
+      })}
+    </ControlGroup>
+  );
+};

package/src/components/metrics-table/index.tsx

@@ -0,0 +1,14 @@
+import React, { useState } from 'react';
+
+import { MetricsTable as BaseComponent } from './metrics-table';
+
+type MetricsTableProps = Omit<
+  React.ComponentProps<typeof BaseComponent>,
+  'showAllItems' | 'setShowAllItems'
+>;
+
+export const MetricsTable = (props: MetricsTableProps) => {
+  const [showAllItems, setShowAllItems] = useState(false);
+
+  return <BaseComponent {...props} showAllItems={showAllItems} setShowAllItems={setShowAllItems} />;
+};

package/src/components/metrics-table/metrics-table.i18n.ts

@@ -0,0 +1,3 @@
+export const EMPTY_MESSAGE = 'No items found.';
+export const SHOW_ALL = 'Show all';
+export const SHOW_LESS = 'Show less';