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

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

@@ -0,0 +1,94 @@
+.title {
+  color: var(--color-text-ultra-light);
+  font-weight: bold;
+  font-size: var(--size-xsmall);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.titleText {
+  max-width: 100%;
+  flex: 0 1 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.titleIcon {
+  flex: 0 0 var(--space-small);
+  margin-top: -3px !important;
+  margin-bottom: -3px !important;
+}
+
+.title + .info {
+  margin-top: var(--space-xxsmall);
+}
+
+.currentMetric {
+  color: var(--color-heading);
+  white-space: nowrap;
+  font-weight: bold;
+  line-height: var(--line-height-number);
+  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);
+  line-height: var(--line-height-number);
+  height: var(--line-height-number);
+}
+
+/* Loading state */
+.loading.currentMetric {
+  min-width: 0;
+  max-width: 8em;
+}
+
+.loading.baselineMetric {
+  min-width: 0;
+  max-width: 8em;
+}
+
+/* Hover state */
+.titleHoverCardIcon span[aria-controls=""],
+.titleTooltipIcon[aria-controls=""] {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--transition-duration-out) ease-out, color var(--transition-duration-out) ease-out, visibility 0s;
+}
+
+.root:hover .titleHoverCardIcon span,
+.root:hover .titleTooltipIcon {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity var(--transition-duration-in) ease-in, color var(--transition-duration-in) ease-in, visibility 0s;
+}
+
+/* Size variation */
+.currentMetric {
+  font-size: var(--size-xxlarge);
+}
+
+.small .currentMetric {
+  font-size: var(--size-medium);
+}
+
+.large .currentMetric {
+  font-size: var(--size-xxxlarge);
+}
+
+.xlarge .currentMetric {
+  font-size: var(--size-xxxxlarge);
+}

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { RunInfo } from './run-info';
+
+export default {
+  title: 'Components/RunInfo',
+  component: RunInfo,
+  args: {
+    size: 'medium',
+  },
+  argTypes: {
+    size: {
+      options: ['small', 'medium', 'large', 'xlarge'],
+      control: { type: 'select' },
+    },
+  },
+} 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 DeltaPercentage = Template.bind({});
+
+DeltaPercentage.args = {
+  ...Default.args,
+  deltaPercentage: '+20KiB',
+};
+
+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,131 @@
+import React, { type ReactNode, 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?: ReactNode;
+  titleHoverCard?: ReactNode;
+  titleTooltip?: ReactNode;
+  current?: ReactNode;
+  baseline?: string;
+  delta?: string;
+  deltaPercentage?: string;
+  deltaType?: string;
+
+  as?: React.ElementType;
+  size?: 'small' | 'medium' | 'large' | 'xlarge';
+
+  showBaseline?: boolean;
+  loading?: boolean;
+  enhance?: boolean;
+}
+
+export const RunInfo = ({
+  className = '',
+  title = null,
+  titleHoverCard = null,
+  titleTooltip = null,
+  current = '',
+  baseline = '',
+  delta = '',
+  deltaPercentage = '',
+  deltaType = '',
+  as: Component = 'div',
+  size = 'medium',
+  showBaseline = true,
+  loading = false,
+  enhance = false,
+  ...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]);
+
+  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>
+      )}
+    </Component>
+  );
+};

package/src/components/sort-button/index.ts

@@ -0,0 +1 @@
+export * from './sort-button';

package/src/components/sort-button/sort-button.module.css

@@ -0,0 +1,83 @@
+.root {
+  --icon-dimension: 13px;
+  display: inline-block;
+  border-radius: var(--radius-small);
+  position: relative;
+  color: var(--color-text-ultra-light);
+}
+
+.toggle {
+  padding: 1px var(--space-xxxsmall);
+  padding-right: calc(1px + var(--icon-dimension));
+}
+
+.direction {
+  position: absolute;
+  padding: 1px;
+  display: block;
+  overflow: hidden;
+  right: -2px; /* compensate for the button padding */
+  color: var(--color-text-ultra-light);
+  transition: var(--transition-out);
+}
+
+.directionIcon {
+  display: block;
+  width: var(--icon-dimension);
+  height: var(--icon-dimension);
+}
+
+.directionActive {
+  color: var(--color-text);
+  transition: var(--transition-in);
+}
+
+.direction:hover,
+.direction:active,
+.direction:focus {
+  color: var(--color-text-dark);
+  transition: var(--transition-in);
+}
+
+.directionAsc {
+  padding-bottom: 0;
+  bottom: 50%;
+}
+
+.directionAsc .directionIcon {
+  transform: translateY(3px);
+}
+
+.directionDesc {
+  padding-top: 0;
+  top: 50%;
+}
+
+.directionDesc .directionIcon {
+  transform: translateY(-5px);
+}
+
+.interactive {
+  margin: calc(0px - var(--space-xxxsmall));
+  margin-right: calc(0px - 1px - var(--icon-dimension));
+}
+
+.interactive:hover,
+.interactive:active,
+.interactive:focus {
+  background: var(--color-outline);
+}
+
+.direction {
+  pointer-events: none;
+  opacity: 0;
+}
+
+.active .direction,
+.interactive:hover .direction,
+.interactive:hover:active .direction,
+.interactive:hover:focus .direction {
+  pointer-events: auto;
+  opacity: 1;
+  transition: var(--transition-in);
+}

package/src/components/sort-button/sort-button.tsx

@@ -0,0 +1,109 @@
+import React, { useCallback } from 'react';
+import cx from 'classnames';
+
+import { SORT } from '../../constants';
+import type { SortAction } from '../../types';
+import { Button } from '../../ui/button';
+import { Icon } from '../../ui/icon';
+import { Tooltip } from '../../ui/tooltip';
+import css from './sort-button.module.css';
+
+interface SortInfo {
+  direction: string;
+  title: string;
+}
+
+const getToggleAction = (field: string, label: string, sort?: SortAction): SortInfo => {
+  // Sort the column desc if not currently sorted
+  if (sort?.field !== field) {
+    return { direction: SORT.DESC, title: `Order ${label} descending` };
+  }
+
+  // Resort asc if the column is already sorted descending
+  if (sort?.direction === SORT.DESC) {
+    return { direction: SORT.ASC, title: `Order ${label} ascending` };
+  }
+
+  // Reset
+  return { direction: '', title: 'Reset order' };
+};
+
+const getAscAction = (label: string): SortInfo => {
+  return { direction: SORT.ASC, title: `Order ${label} ascending` };
+};
+
+const getDescAction = (label: string): SortInfo => {
+  return { direction: SORT.DESC, title: `Order ${label} descending` };
+};
+
+export interface SortButtonProps {
+  fieldPath: string;
+  fieldName: string;
+  label: string;
+  sort?: SortAction;
+  updateSort?: (params: SortAction) => void;
+}
+
+export const SortButton = (props: SortButtonProps & React.ComponentProps<'div'>) => {
+  const { className = '', children, fieldPath, fieldName, label, sort, updateSort } = props;
+
+  const field = `${fieldPath}.${fieldName}`;
+  const toggleAction = getToggleAction(field, label, sort);
+  const ascAction = getAscAction(label);
+  const descAction = getDescAction(label);
+  const isSorted = sort?.field === field;
+
+  const getOrderOnClick = useCallback(
+    (action: SortInfo) => () => {
+      if (!updateSort) {
+        return;
+      }
+
+      if (action.direction) {
+        updateSort({ field, direction: action.direction as SortAction['direction'] });
+        return;
+      }
+
+      updateSort({ field: '', direction: '' });
+    },
+    [field, updateSort, toggleAction],
+  );
+
+  if (!updateSort) {
+    return <div className={cx(css.root, className)}>{children}</div>;
+  }
+
+  return (
+    <div className={cx(css.root, css.interactive, className, isSorted && css.active)}>
+      <Button type="button" onClick={getOrderOnClick(toggleAction)} className={css.toggle}>
+        <Tooltip title={toggleAction.title}>{children}</Tooltip>
+      </Button>
+      <Button
+        type="button"
+        onClick={getOrderOnClick(ascAction)}
+        className={cx(
+          css.direction,
+          css.directionAsc,
+          isSorted && sort.direction === SORT.ASC && css.directionActive,
+        )}
+      >
+        <Tooltip title={ascAction.title}>
+          <Icon glyph={Icon.ICONS.CHEVRON_UP} size="small" className={css.directionIcon} />
+        </Tooltip>
+      </Button>
+      <Button
+        type="button"
+        onClick={getOrderOnClick(descAction)}
+        className={cx(
+          css.direction,
+          css.directionDesc,
+          isSorted && sort.direction === SORT.DESC && css.directionActive,
+        )}
+      >
+        <Tooltip title={descAction.title}>
+          <Icon glyph={Icon.ICONS.CHEVRON_DOWN} size="small" className={css.directionIcon} />
+        </Tooltip>
+      </Button>
+    </div>
+  );
+};

package/src/components/summary/summary.module.css

@@ -1,9 +1,31 @@
 .root {
+  --summary-gap: var(--space-small);
   width: 100%;
 }
 
+.wrapper {
+  width: 100%;
+}
+
+.wrapper + .wrapper {
+  margin-top: var(--summary-gap);
+}
+
+.items {
+  display: flex;
+  flex-wrap: wrap;
+  width: calc(100% + var(--summary-gap));
+  margin-top: calc(0px - var(--summary-gap));
+  margin-left: calc(0px - var(--summary-gap));
+}
+
 .item {
+  margin: var(--summary-gap) 0 0 var(--summary-gap);
   flex: 1 0 10%; /* force equal sizes */
-  min-width: 16em;
+  min-width: 12em;
   text-decoration: none;
 }
+
+.itemSmall {
+  min-width: 8em;
+}

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Meta, Story } 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 '.';
+
+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,
+  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))} />
+  ),
+};

package/src/components/summary/summary.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import cx from 'classnames';
+import get from 'lodash/get';
+import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
+
+import {
+  METRICS_WEBPACK_ASSETS,
+  METRICS_WEBPACK_GENERAL,
+  METRICS_WEBPACK_MODULES,
+  METRICS_WEBPACK_PACKAGES,
+} from '../../constants';
+import { Box } from '../../layout/box';
+import { ComponentLink } from '../component-link';
+import { MetricRunInfo, MetricRunInfoProps } from '../metric-run-info';
+import css from './summary.module.css';
+
+const METRICS_WEBPACK_OTHERS = [
+  ...METRICS_WEBPACK_ASSETS,
+  ...METRICS_WEBPACK_MODULES,
+  ...METRICS_WEBPACK_PACKAGES,
+];
+
+interface SummaryItemProps {
+  metricId: string;
+  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,
+    customLink: SummaryItemCustomLink,
+    size,
+    loading,
+    showDelta,
+    showBaseline,
+  } = 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={showDelta}
+        showBaseline={showBaseline}
+        size={size}
+        loading={loading}
+      />
+    </Box>
+  );
+};
+
+interface SummaryItemData {
+  current: number;
+  baseline: number;
+}
+
+interface SummaryProps {
+  data?: SummaryItemProps['data'];
+  loading?: boolean;
+  showSummaryItemDelta?: SummaryItemProps['showDelta'];
+  showSummaryItemBaseline?: SummaryItemProps['showBaseline'];
+  summaryItemLink?: SummaryItemProps['customLink'];
+}
+
+export const Summary = ({
+  className = '',
+  data = null,
+  loading = false,
+  showSummaryItemDelta = true,
+  showSummaryItemBaseline = true,
+  summaryItemLink = ComponentLink,
+}: SummaryProps & React.ComponentProps<'div'>) => (
+  <Box className={cx(css.root, className)}>
+    <div className={css.wrapper}>
+      <div className={css.items}>
+        {METRICS_WEBPACK_GENERAL.map((metricId) => (
+          <SummaryItem
+            key={metricId}
+            className={css.item}
+            metricId={metricId}
+            data={data}
+            size="large"
+            loading={loading}
+            customLink={summaryItemLink}
+            showDelta={showSummaryItemDelta}
+            showBaseline={showSummaryItemBaseline}
+          />
+        ))}
+      </div>
+    </div>
+    <div className={css.wrapper}>
+      <div className={css.items}>
+        {METRICS_WEBPACK_OTHERS.map((metricId) => (
+          <SummaryItem
+            key={metricId}
+            className={cx(css.item, css.itemSmall)}
+            metricId={metricId}
+            data={data}
+            customLink={summaryItemLink}
+            loading={loading}
+            showDelta={showSummaryItemDelta}
+            showBaseline={false}
+          />
+        ))}
+      </div>
+    </div>
+  </Box>
+);