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

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

@@ -10,52 +10,9 @@
   text-decoration: underline;
 }
 
-/* columns */
-.metricName {
-  width: 100%;
-}
-
-.tableHeaderRunMetric {
-  text-transform: none;
-}
-
-.root .value {
-  padding-left: var(--space-large);
-  text-align: right;
-  vertical-align: baseline;
-}
-
+.root .value,
 .root .delta {
-  padding-left: 0;
-  text-align: left;
-  font-size: var(--size-xsmall);
-  vertical-align: baseline;
-}
-
-.root tbody .delta {
-  line-height: 1.6rem; /* baseline alignment with the value */
-}
-
-.root .value.current {
-  padding-right: var(--space-xxsmall);
-}
-
-.jobName {
-  white-space: nowrap;
-}
-
-/* columns overrides for showHeaderSum */
-.showHeaderSum .headerRowColumns .value,
-.showHeaderSum .headerRowColumns .delta {
-  border-bottom: 0;
-  padding-bottom: 0;
-}
-
-.headerRowTotals th {
-  padding-top: 0 !important;
-  font-weight: normal;
-  font-size: var(--size-xsmall);
-  vertical-align: middle;
+  text-align: right;
 }
 
 /** rows */
@@ -66,34 +23,22 @@
 
 .root .empty {
   background: none !important;
-  padding-top: var(--space-xxxlarge);
-  padding-bottom: var(--space-xxxlarge);
+  padding-top: calc(var(--space-xxxlarge) * 2);
+  padding-bottom: calc(var(--space-xxxlarge) * 2);
   text-align: center;
 }
 
+.emptyIcon {
+  color: var(--color-outline-dark);
+  width: var(--space-large);
+  height: var(--space-large);
+}
+
 .root .showAllItems {
   background: none !important;
   text-align: center;
 }
 
-/** show all */
-.showAllItemsButton {
-  appearance: none;
-  background: none;
-  margin: 0;
-  border: 0;
-  padding: var(--space-xxxsmall);
-  color: var(--color-primary);
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.showAllItemsButton:hover,
-.showAllItemsButton:focus,
-.showAllItemsButton:active {
-  color: var(--color-primary-dark);
-}
-
 /** Breakpoints */
 .root tr {
   display: flex;

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

@@ -0,0 +1,225 @@
+import React from 'react';
+
+import { MetricRunInfoDeltaType } from '@bundle-stats/utils';
+import { getWrapperDecorator } from '../../stories';
+import { MetricsTable } from '.';
+
+const RUNS = [
+  {
+    internalBuildNumber: 2,
+    label: 'Job #2',
+  },
+  {
+    internalBuildNumber: 1,
+    label: <a href="#noop">Job #1</a>,
+  },
+];
+
+const ITEMS_SINGLE_RUN = [
+  {
+    key: 'webpack.assets.totalSizeByTypeALL',
+    label: 'Total Size',
+    biggerIsBetter: false,
+    changed: false,
+    runs: [
+      {
+        value: 873421,
+        displayValue: '852.95KB',
+      },
+    ],
+  },
+  {
+    key: 'lighthouse.timeToFirstByte',
+    label: 'Time To First Byte',
+    biggerIsBetter: false,
+    changed: false,
+    runs: [
+      {
+        value: 1231,
+        displayValue: '1.231s',
+      },
+    ],
+  },
+  {
+    key: 'lighthouse.score',
+    label: 'Score',
+    biggerIsBetter: true,
+    changed: false,
+    runs: [
+      {
+        value: 80,
+        displayValue: '80',
+      },
+    ],
+  },
+  {
+    key: 'webpack.assets.totalSizeByTypeJS',
+    label: 'JS',
+    biggerIsBetter: false,
+    changed: false,
+    runs: [
+      {
+        value: 344232,
+        displayValue: '336.16KB',
+      },
+    ],
+  },
+  {
+    key: 'lighthouse.domSize',
+    label: 'DOM Size',
+    biggerIsBetter: false,
+    changed: false,
+    runs: [
+      {
+        value: 80,
+        displayValue: '80',
+      },
+    ],
+  },
+];
+
+const ITEMS_MULTIPLE_RUNS = [
+  {
+    key: 'webpack.assets.totalSizeByTypeALL',
+    label: 'Total Size',
+    biggerIsBetter: false,
+    changed: true,
+    runs: [
+      {
+        value: 873421,
+        displayValue: '852.95KB',
+        delta: 751090,
+        displayDelta: '+700KB',
+        deltaPercentage: 613.98,
+        displayDeltaPercentage: '+613.98%',
+        deltaType: 'HIGH_NEGATIVE' as MetricRunInfoDeltaType,
+      },
+      {
+        value: 122331,
+        displayValue: '119.46KB',
+      },
+    ],
+  },
+  {
+    key: 'lighthouse.timeToFirstByte',
+    label: 'Time To First Byte',
+    biggerIsBetter: false,
+    changed: true,
+    runs: [
+      {
+        value: 1000,
+        displayValue: '1s',
+        delta: 20,
+        displayDelta: '+20ms',
+        deltaPercentage: 2.0408163,
+        displayDeltaPercentage: '+2.04%',
+        deltaType: 'LOW_NEGATIVE' as MetricRunInfoDeltaType,
+      },
+      {
+        value: 980,
+        displayValue: '980ms',
+      },
+    ],
+  },
+  {
+    key: 'lighthouse.score',
+    label: 'Score',
+    biggerIsBetter: true,
+    changed: true,
+    runs: [
+      {
+        value: 80,
+        displayValue: '80',
+        delta: 10,
+        displayDelta: '+10',
+        deltaPercentage: 14.2857143,
+        displayDeltaPercentage: '+14.29%',
+        deltaType: 'POSITIVE' as MetricRunInfoDeltaType,
+      },
+      {
+        value: 70,
+        displayValue: '70',
+      },
+    ],
+  },
+  {
+    key: 'lighthouse.accessibilityScore',
+    label: 'Accessibility score',
+    biggerIsBetter: true,
+    changed: true,
+    runs: [
+      {
+        value: 80,
+        displayValue: '80',
+        delta: 2,
+        displayDelta: '+2',
+        deltaPercentage: 2.5641026,
+        displayDeltaPercentage: '+2.56%',
+        deltaType: 'LOW_POSITIVE' as MetricRunInfoDeltaType,
+      },
+      {
+        value: 78,
+        displayValue: '78',
+      },
+    ],
+  },
+  {
+    key: 'webpack.assets.totalSizeByTypeJS',
+    label: 'JS',
+    biggerIsBetter: false,
+    changed: true,
+    runs: [
+      {
+        value: 344232,
+        displayValue: '336.16KB',
+        delta: 344232,
+        displayDelta: '+100%',
+        deltaPercentage: 100,
+        displayDeltaPercentage: '+100%',
+        deltaType: 'HIGH_NEGATIVE' as MetricRunInfoDeltaType,
+      },
+      null,
+    ],
+  },
+  {
+    key: 'lighthouse.domSize',
+    label: 'DOM Size',
+    biggerIsBetter: false,
+    changed: false,
+    runs: [
+      {
+        value: 80,
+        displayValue: '80',
+        delta: 0,
+        displayDelta: '0',
+        deltaPercentage: 0,
+        displayDeltaPercentage: '0%',
+        deltaType: 'NO_CHANGE' as MetricRunInfoDeltaType,
+      },
+      {
+        value: 80,
+        displayValue: '80',
+      },
+    ],
+  },
+];
+
+export default {
+  title: 'Components/MetricsTable',
+  component: MetricsTable,
+  decorators: [getWrapperDecorator()],
+};
+
+export const Default = () => <MetricsTable runs={RUNS.slice(0, 1)} items={ITEMS_SINGLE_RUN} />;
+
+export const MultipleRuns = () => <MetricsTable runs={RUNS} items={ITEMS_MULTIPLE_RUNS} />;
+
+export const WithHeaderSum = () => (
+  <MetricsTable
+    runs={RUNS}
+    items={[ITEMS_MULTIPLE_RUNS[0], ITEMS_MULTIPLE_RUNS[4]]}
+    showHeaderSum
+  />
+);
+
+export const Empty = () => <MetricsTable runs={RUNS} items={[]} />;

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

@@ -0,0 +1,168 @@
+import React from 'react';
+import cx from 'classnames';
+import isEmpty from 'lodash/isEmpty';
+import type { ReportMetricRow } from '@bundle-stats/utils';
+
+import { Button } from '../../ui/button';
+import { Icon } from '../../ui/icon';
+import { Table } from '../../ui/table';
+import { Stack } from '../../layout/stack';
+import { Metric } from '../metric';
+import { Delta } from '../delta';
+import { MetricsTableHeader, MetricsTableHeaderProps } from '../metrics-table-header';
+import * as I18N from './metrics-table.i18n';
+import css from './metrics-table.module.css';
+
+const VISIBLE_COUNT = 500;
+const BASELINE_COLUMN_SPAN = 1;
+const CURRENT_COLUMN_SPAN = 3;
+
+interface RowProps extends React.ComponentProps<typeof Table.Tr> {
+  item: ReportMetricRow;
+  renderHeader: (item: ReportMetricRow) => React.ReactNode;
+}
+
+const Row = ({ className = '', item, renderHeader, ...restProps }: RowProps) => (
+  <Table.Tr className={cx(!item.changed && css.unchanged, className)} {...restProps}>
+    <Table.Th className={css.metricName}>{renderHeader(item)}</Table.Th>
+
+    {item.runs.map((run, index) => {
+      const isBaseline = index === item.runs.length - 1;
+      const valueClassName = cx(css.value, !isBaseline && css.current);
+
+      // Empty cells if no value
+      if (!run || typeof run.value === 'undefined') {
+        return (
+          <>
+            <Table.Td className={valueClassName}>-</Table.Td>
+            {!isBaseline && <Table.Td className={css.delta} />}
+            {!isBaseline && <Table.Td className={cx(css.delta, css.deltaPercentage)} />}
+          </>
+        );
+      }
+
+      return (
+        <>
+          <Table.Td className={valueClassName}>
+            <Metric value={run.displayValue} />
+          </Table.Td>
+          {!isBaseline && (
+            <>
+              <Table.Td className={css.delta}>
+                {'delta' in run && (
+                  <Delta displayValue={run.displayDelta} deltaType={run.deltaType} />
+                )}
+              </Table.Td>
+              <Table.Td className={cx(css.delta, css.deltaPercentage)}>
+                {'delta' in run && (
+                  <Delta displayValue={run.displayDeltaPercentage} deltaType={run.deltaType} />
+                )}
+              </Table.Td>
+            </>
+          )}
+        </>
+      );
+    })}
+  </Table.Tr>
+);
+
+interface MetricsTableProps extends Omit<React.ComponentProps<typeof Table>, 'title'> {
+  runs: Array<{
+    label: string;
+    internalBuildNumber: number;
+  }>;
+  items: Array<ReportMetricRow>;
+  title?: React.ReactNode;
+  showHeaderSum?: boolean;
+  sort?: MetricsTableHeaderProps['sort'];
+  updateSort?: MetricsTableHeaderProps['updateSort'];
+  renderRowHeader?: (item: ReportMetricRow) => React.ReactNode;
+  emptyMessage?: React.ReactNode;
+  showAllItems: boolean;
+  setShowAllItems: (value: boolean) => void;
+}
+
+export const MetricsTable = ({
+  className = '',
+  runs,
+  items,
+  showHeaderSum = false,
+  title,
+  sort,
+  updateSort,
+  renderRowHeader = (item: any) => item.label,
+  emptyMessage = I18N.EMPTY_MESSAGE,
+  showAllItems,
+  setShowAllItems,
+  ...restProps
+}: MetricsTableProps) => {
+  const columnCount = (runs.length - 1) * CURRENT_COLUMN_SPAN + BASELINE_COLUMN_SPAN + 1;
+
+  const rootClassName = cx(css.root, className, runs.length > 1 && css.multipleRuns);
+
+  const showEmpty = isEmpty(items);
+  const showItems = !showEmpty;
+  const hasHiddenItems = items?.length > VISIBLE_COUNT;
+  const visibleItems = !hasHiddenItems || showAllItems ? items : items?.slice(0, VISIBLE_COUNT);
+
+  return (
+    <Table className={rootClassName} compact {...restProps}>
+      <MetricsTableHeader
+        metricTitle={title}
+        showSum={showHeaderSum}
+        jobs={runs}
+        rows={items}
+        sort={sort}
+        updateSort={updateSort}
+      />
+      <Table.TBody>
+        {showEmpty && (
+          <Table.Tr>
+            <Table.Td className={css.empty} colSpan={columnCount}>
+              <Stack space="xxsmall">
+                <div>
+                  <Icon glyph={Icon.ICONS.INFO} className={css.emptyIcon} size="large" />
+                </div>
+                {emptyMessage}
+              </Stack>
+            </Table.Td>
+          </Table.Tr>
+        )}
+
+        {showItems && (
+          <>
+            {visibleItems.map((item) => (
+              <Row key={item.key} item={item} renderHeader={renderRowHeader} />
+            ))}
+
+            {hasHiddenItems && (
+              <Table.Tr>
+                <Table.Td className={css.showAllItems} colSpan={columnCount}>
+                  {showAllItems ? (
+                    <Button
+                      padding="small"
+                      kind="primary"
+                      onClick={() => setShowAllItems(false)}
+                      type="button"
+                    >
+                      {I18N.SHOW_LESS}
+                    </Button>
+                  ) : (
+                    <Button
+                      padding="small"
+                      kind="primary"
+                      onClick={() => setShowAllItems(true)}
+                      type="button"
+                    >
+                      {I18N.SHOW_ALL}
+                    </Button>
+                  )}
+                </Table.Td>
+              </Table.Tr>
+            )}
+          </>
+        )}
+      </Table.TBody>
+    </Table>
+  );
+};

package/src/components/metrics-table-export/index.ts

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

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

@@ -0,0 +1,4 @@
+.tabs {
+  /* adjust verticals spacing with the tab top padding */
+  margin-top: calc(0px - var(--space-xsmall)) !important;
+}

package/src/components/metrics-table-export/metrics-table-export.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { MetricsTableExport } from '.';
+
+const meta: Meta<typeof MetricsTableExport> = {
+  title: 'Components/MetricsTableExport',
+  component: MetricsTableExport,
+  decorators: [getWrapperDecorator()],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const ITEMS = [
+  {
+    label: 'Hey',
+    runs: [
+      { value: 1, name: 'a' },
+      { value: 2, name: 'b' },
+    ],
+  },
+];
+
+export const Default: Story = {
+  args: {
+    items: ITEMS,
+  },
+};

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

@@ -0,0 +1,113 @@
+import type { ComponentProps } from 'react';
+import React, { useState } from 'react';
+import type { ReportMetricRow } from '@bundle-stats/utils';
+
+import { Stack } from '../../layout/stack';
+import { Tabs, TabItem } from '../../ui/tabs';
+import { PreviewSource } from '../preview-source';
+import css from './metrics-table-export.module.css';
+
+const generateSourceJSON = (items: Array<ReportMetricRow>): string => {
+  const output = items.map((item) => ({
+    name: item.label,
+    runs: item.runs?.map((itemRun) => ({
+      name: itemRun?.name || '',
+      size: itemRun?.value || 0,
+    })),
+  }));
+
+  return JSON.stringify(output, null, 2);
+};
+
+const CSV_SEPARATOR = ', ';
+
+const generateSourceCSV = (items: Array<ReportMetricRow>): string => {
+  const output = [];
+
+  output.push(
+    [
+      'Name',
+      ...(items?.[0]?.runs?.map((_, index) => {
+        if (index === 0) {
+          return `Run ${index + 1}(current)`;
+        }
+
+        return `Run ${index + 1}(baseline)`;
+      }) || []),
+    ].join(CSV_SEPARATOR),
+  );
+
+  items?.forEach((item) => {
+    const row: Array<string | number> = [item.label];
+
+    item.runs?.forEach((itemRun) => {
+      row.push(itemRun?.value || 0);
+    });
+
+    output.push(row.join(CSV_SEPARATOR));
+  });
+
+  return output.join('\r');
+};
+
+const SOURCES = {
+  csv: {
+    label: 'CSV',
+    transformFn: generateSourceCSV,
+    extension: '.csv',
+  },
+  json: {
+    label: 'JSON',
+    transformFn: generateSourceJSON,
+    extension: '.json',
+  },
+};
+
+const SOURCE_ENTRIES = Object.entries(SOURCES);
+const SOURCE_KEYS = Object.keys(SOURCES);
+
+type MetricsTableExportProps = {
+  items: Array<ReportMetricRow>;
+  initialSourceType?: string;
+  download: string;
+} & ComponentProps<typeof Stack>;
+
+export const MetricsTableExport = (props: MetricsTableExportProps) => {
+  const { initialSourceType = SOURCE_KEYS[0], items, download, ...restProps } = props;
+
+  const [selectedSourceType, setSelectedSourceType] = useState(initialSourceType);
+
+  return (
+    <Stack space="small" {...restProps}>
+      <Tabs className={css.tabs}>
+        {SOURCE_ENTRIES.map(([sourceId, source]) => (
+          <TabItem
+            onClick={() => setSelectedSourceType(sourceId)}
+            isTabActive={selectedSourceType === sourceId}
+            id={`metrics-table-export-tab-${sourceId}`}
+            aria-controls={`metrics-table-export-panel-${sourceId}`}
+            key={sourceId}
+          >
+            {source.label}
+          </TabItem>
+        ))}
+      </Tabs>
+      <div>
+        {SOURCE_ENTRIES.map(
+          ([sourceId, source]) =>
+            selectedSourceType === sourceId && (
+              <PreviewSource
+                source={source.transformFn(items)}
+                rows={20}
+                download={`${download}${source.extension}`}
+                role="tabpanel"
+                id={`metrics-table-export-panel-${sourceId}`}
+                aria-labelledby={`metrics-table-export-tab-${sourceId}`}
+                key={source.label}
+              />
+          ),
+        )}
+      </div>
+    </Stack>
+  );
+};

package/src/components/metrics-table-header/index.ts

@@ -0,0 +1 @@
+export * from './metrics-table-header';

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

@@ -0,0 +1,6 @@
+export const BASELINE_TITLE = 'Baseline';
+export const CURRENT_TITLE = 'Current';
+
+export const SORT_VALUE = 'value';
+export const SORT_CHANGE = 'change';
+export const SORT_PERCENTUAL_CHANGE = 'percentual change';

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

@@ -0,0 +1,51 @@
+/* columns */
+.root .col {
+  padding-top: var(--space-xxsmall);
+  padding-bottom: var(--space-xxsmall);
+}
+
+.root .metric {
+  width: 55%;
+  vertical-align: middle;
+}
+
+.root .job {
+  padding-top: var(--space-xxsmall);
+  text-align: right;
+}
+
+.root .value {
+  text-align: right;
+  vertical-align: baseline;
+  width: 15%;
+}
+
+.root .delta {
+  text-align: right;
+  font-size: var(--size-xsmall);
+  vertical-align: baseline;
+  width: 10%;
+  color: pink;
+}
+
+.root .deltaPercentage {
+  width: 5%;
+}
+
+.jobName {
+  white-space: nowrap;
+}
+
+/* columns overrides for showHeaderSum */
+.showHeaderSum .job {
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+
+.showHeaderSum .sum {
+  padding-top: 0;
+  font-size: var(--size-small);
+  vertical-align: middle;
+  text-transform: none;
+}
+