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

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

@@ -0,0 +1,172 @@
+import React from 'react';
+import cx from 'classnames';
+import sum from 'lodash/sum';
+import {
+  METRIC_TYPE_CONFIGS,
+  MetricTypes,
+  type ReportMetricRow,
+  getMetricRunInfo,
+} from '@bundle-stats/utils';
+
+import { Table } from '../../ui/table';
+import { Delta } from '../delta';
+import { JobName } from '../job-name';
+import { Metric } from '../metric';
+import { SortButton, SortButtonProps } from '../sort-button';
+import * as I18N from './metrics-table-header.i18n';
+import css from './metrics-table-header.module.css';
+
+const METRIC_TYPE = METRIC_TYPE_CONFIGS[MetricTypes.FileSize];
+const BASELINE_COLUMN_SPAN = 1;
+const CURRENT_COLUMN_SPAN = 3;
+
+interface JobColumnProps {
+  job: { label: string; internalBuildNumber: number };
+  isBaseline: boolean;
+}
+
+const JobColumn = ({ job, isBaseline }: JobColumnProps) => {
+  const colSpan = isBaseline ? BASELINE_COLUMN_SPAN : CURRENT_COLUMN_SPAN;
+  const { label, internalBuildNumber } = job;
+
+  if (!job) {
+    return <Table.Th colSpan={colSpan}>-</Table.Th>;
+  }
+
+  return (
+    <Table.Th className={cx(css.col, css.job)} colSpan={colSpan}>
+      <JobName
+        title={isBaseline ? I18N.BASELINE_TITLE : I18N.CURRENT_TITLE}
+        internalBuildNumber={internalBuildNumber}
+        className={css.jobName}
+      >
+        {label}
+      </JobName>
+    </Table.Th>
+  );
+};
+
+const getRowsRunTotal = (rows: Array<ReportMetricRow>, runIndex: number): number =>
+  sum(rows.map((row) => row?.runs?.[runIndex]?.value || 0));
+
+interface ColumnSumProps {
+  rows: Array<ReportMetricRow>;
+  isBaseline: boolean;
+  runIndex: number;
+  sort?: SortButtonProps['sort'];
+  updateSort?: SortButtonProps['updateSort'];
+}
+
+const SumColumn = ({ rows, isBaseline, runIndex, updateSort, sort }: ColumnSumProps) => {
+  const currentRunTotal = getRowsRunTotal(rows, runIndex);
+  const baselineRunTotal = !isBaseline ? getRowsRunTotal(rows, runIndex + 1) : 0;
+  const total = getMetricRunInfo(METRIC_TYPE, currentRunTotal, baselineRunTotal);
+  const fieldPath = `runs[${runIndex}]`;
+
+  return (
+    <>
+      <Table.Th className={cx(css.col, css.value, css.sum)}>
+        <SortButton
+          fieldPath={fieldPath}
+          fieldName="value"
+          label={I18N.SORT_VALUE}
+          updateSort={updateSort}
+          sort={sort}
+        >
+          <Metric value={total.displayValue} />
+        </SortButton>
+      </Table.Th>
+      {!isBaseline && (
+        <>
+          <Table.Th className={cx(css.col, css.delta, css.sum)}>
+            <SortButton
+              fieldPath={fieldPath}
+              fieldName="delta"
+              label={I18N.SORT_CHANGE}
+              updateSort={updateSort}
+              sort={sort}
+            >
+              {'delta' in total && (
+                <Delta displayValue={total.displayDelta} deltaType={total.deltaType} />
+              )}
+            </SortButton>
+          </Table.Th>
+          <Table.Th className={cx(css.col, css.delta, css.deltaPercentage, css.sum)}>
+            <SortButton
+              fieldPath={fieldPath}
+              fieldName="deltaPercentage"
+              label={I18N.SORT_PERCENTUAL_CHANGE}
+              updateSort={updateSort}
+              sort={sort}
+            >
+              {'delta' in total && (
+                <Delta displayValue={total.displayDeltaPercentage} deltaType={total.deltaType} />
+              )}
+            </SortButton>
+          </Table.Th>
+        </>
+      )}
+    </>
+  );
+};
+
+export interface MetricsTableHeaderProps {
+  /**
+   * Metric column title
+   */
+  metricTitle?: React.ReactNode;
+  /**
+   * Show column sum flag
+   */
+  showSum?: boolean;
+  /**
+   * Array of jobs
+   */
+  jobs: Array<{ label: string; internalBuildNumber: number }>;
+  /**
+   * Report rows
+   */
+  rows: Array<ReportMetricRow>;
+  /**
+   * Sort field data
+   */
+  sort?: any;
+  /**
+   * Update sort field
+   */
+  updateSort?: (val: any) => void;
+}
+
+export const MetricsTableHeader = (
+  props: MetricsTableHeaderProps & React.ComponentProps<'thead'>,
+) => {
+  const { className = '', metricTitle = '', showSum = false, jobs, rows, sort, updateSort } = props;
+
+  const rootClassName = cx(css.root, showSum && css.showHeaderSum, className);
+
+  return (
+    <Table.THead className={rootClassName}>
+      <Table.Tr>
+        <Table.Th className={cx(css.col, css.metric)} rowSpan={showSum ? 2 : 1}>
+          {metricTitle || ' '}
+        </Table.Th>
+        {jobs.map((job, runIndex) => (
+          <JobColumn job={job} isBaseline={runIndex === jobs.length - 1} />
+        ))}
+      </Table.Tr>
+      {showSum && (
+        <Table.Tr>
+          {jobs.map((_, runIndex) => (
+            <SumColumn
+              rows={rows}
+              isBaseline={runIndex === jobs.length - 1}
+              runIndex={runIndex}
+              updateSort={updateSort}
+              sort={sort}
+            />
+          ))}
+        </Table.Tr>
+      )}
+    </Table.THead>
+  );
+};

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

@@ -0,0 +1,15 @@
+.group:empty {
+  display: none;
+}
+
+.group {
+  margin-bottom: calc(var(--space-xxxsmall) / 2);
+  border-bottom: 1px solid var(--color-outline);
+  padding-bottom: calc(var(--space-xxxsmall) / 2);
+}
+
+.group:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}

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

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { action } from 'storybook/actions';
+
+import { getWrapperDecorator } from '../../stories';
+import { MetricsTableOptions } from '.';
+
+const meta: Meta<typeof MetricsTableOptions> = {
+  title: 'Components/MetricsTableOptions',
+  component: MetricsTableOptions,
+  decorators: [getWrapperDecorator()],
+  args: {
+    onResetClick: action('RESET'),
+    onViewAllClick: action('VIEW_ALL'),
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

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

@@ -0,0 +1,33 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+
+import I18N from '../../i18n';
+import { Dropdown, DropdownItem } from '../../ui/dropdown';
+import css from './metrics-table-options.module.css';
+
+type MetricsTableOptionsProps = {
+  onViewAllClick?: () => void;
+  onResetClick?: () => void;
+  onExportClick?: (sourceType: string) => void;
+} & ComponentProps<typeof Dropdown>;
+
+export const MetricsTableOptions = (props: MetricsTableOptionsProps) => {
+  const { onViewAllClick, onResetClick, onExportClick, ...restProps } = props;
+
+  return (
+    <Dropdown glyph="more-vertical" placement="bottom-end" {...restProps}>
+      <div className={css.group}>
+        {onResetClick && <DropdownItem onClick={onResetClick}>{I18N.RESET_FILTERS}</DropdownItem>}
+        {onViewAllClick && <DropdownItem onClick={onViewAllClick}>{I18N.VIEW_ALL}</DropdownItem>}
+      </div>
+      <div className={css.group}>
+        {onExportClick && (
+          <>
+            <DropdownItem onClick={() => onExportClick('csv')}>{I18N.EXPORT_CSV}</DropdownItem>
+            <DropdownItem onClick={() => onExportClick('json')}>{I18N.EXPORT_JSON}</DropdownItem>
+          </>
+        )}
+      </div>
+    </Dropdown>
+  );
+};

package/src/components/metrics-table-title/metrics-table-title.jsx

@@ -5,6 +5,7 @@ import cx from 'classnames';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
+import { Button } from '../../ui/button';
 import { Icon } from '../../ui/icon';
 import { HoverCard } from '../../ui/hover-card';
 import css from './metrics-table-title.module.css';
@@ -14,19 +15,22 @@ export const MetricsTableTitle = (props) => {
   const rootClassName = cx(css.root, className);
 
   return (
-    <Stack className={rootClassName}>
+    <Stack space="none" className={rootClassName}>
       <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.title}>
         <span>{title}</span>
 
         {(popoverInfo || popoverHref) && (
-          <HoverCard label={<Icon glyph="help" className={css.anchorIcon} />} anchorClassName={css.anchor}>
+          <HoverCard
+            label={<Icon glyph={Icon.ICONS.HELP} className={css.anchorIcon} />}
+            anchorClassName={css.anchor}
+          >
             <Stack space="xxxsmall">
               {popoverInfo && <p>{popoverInfo}</p>}
               {popoverHref && (
                 <p>
-                  <button type="button" onClick={() => window.open(popoverHref)} className={css.readMoreLink}>
+                  <Button kind="primary" type="button" onClick={() => window.open(popoverHref)}>
                     {I18N.READ_MORE}
-                  </button>
+                  </Button>
                 </p>
               )}
             </Stack>

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

@@ -1,8 +1,9 @@
 .root {
+  color: var(--color-text-ultra-light);
 }
 
 .title {
-  color: var(--color-text-light);
+  color: inherit;
   font-size: 1em;
   font-weight: bold;
   text-transform: uppercase;
@@ -14,27 +15,11 @@
 
 .anchorIcon {
   display: block;
+  margin: -2px 0; /* compensate for the vertical space */
 }
 
 .info {
-  font-size: var(--size-xsmall);
+  font-size: var(--size-small);
+  font-family: var(--font-family-fixed);
   font-weight: normal;
 }
-
-.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/metrics-treemap/__tests__/metrics-treemap.utils.ts

@@ -0,0 +1,188 @@
+import { getTreemapNodesGroupedByPath } from '../metrics-treemap.utils';
+
+describe('MetricsTreemap / getTreeNodesGroupedByPath', () => {
+  test('should group tree ndoes by path', () => {
+    const actual = getTreemapNodesGroupedByPath([
+      {
+        key: './src/app.jsx',
+        runs: [{ value: 300 }, { value: 500 }],
+      },
+      {
+        key: './src/components/header.jsx',
+        runs: [{ value: 200 }, { value: 100 }],
+      },
+      {
+        key: './src/components/footer.jsx',
+        runs: [{ value: 100 }, { value: 100 }],
+      },
+      {
+        key: './src/ui/button.jsx',
+        runs: [{ value: 100 }, { value: 100 }],
+      },
+      {
+        key: './src/ui/input.jsx',
+        runs: [{ value: 0 }, { value: 100 }],
+      },
+      {
+        key: './node_modules/react/dist/react.production.js',
+        runs: [{ value: 100 }, { value: 100 }],
+      },
+      {
+        key: 'favicon.ico',
+        runs: [{ value: 10 }, { value: 10 }],
+      },
+    ] as any);
+
+    expect(actual).toStrictEqual({
+      id: '',
+      label: '(root)',
+      value: 0,
+      total: {
+        current: 810,
+        baseline: 1010,
+      },
+      children: [
+        {
+          id: '.',
+          label: '.',
+          value: 0,
+          total: {
+            current: 800,
+            baseline: 1000,
+          },
+          children: [
+            {
+              id: './src',
+              label: 'src',
+              value: 0,
+              total: {
+                current: 700,
+                baseline: 900,
+              },
+              children: [
+                {
+                  id: './src/app.jsx',
+                  label: 'app.jsx',
+                  value: 500,
+                  item: {
+                    key: './src/app.jsx',
+                    runs: [{ value: 300 }, { value: 500 }],
+                  },
+                },
+                {
+                  id: './src/components',
+                  label: 'components',
+                  value: 0,
+                  total: {
+                    current: 300,
+                    baseline: 200,
+                  },
+                  children: [
+                    {
+                      id: './src/components/header.jsx',
+                      label: 'header.jsx',
+                      value: 200,
+                      item: {
+                        key: './src/components/header.jsx',
+                        runs: [{ value: 200 }, { value: 100 }],
+                      },
+                    },
+                    {
+                      id: './src/components/footer.jsx',
+                      label: 'footer.jsx',
+                      value: 100,
+                      item: {
+                        key: './src/components/footer.jsx',
+                        runs: [{ value: 100 }, { value: 100 }],
+                      },
+                    },
+                  ],
+                },
+                {
+                  id: './src/ui',
+                  label: 'ui',
+                  value: 0,
+                  total: {
+                    current: 100,
+                    baseline: 200,
+                  },
+                  children: [
+                    {
+                      id: './src/ui/button.jsx',
+                      label: 'button.jsx',
+                      value: 100,
+                      item: {
+                        key: './src/ui/button.jsx',
+                        runs: [{ value: 100 }, { value: 100 }],
+                      },
+                    },
+                    {
+                      id: './src/ui/input.jsx',
+                      label: 'input.jsx',
+                      value: 100,
+                      item: {
+                        key: './src/ui/input.jsx',
+                        runs: [{ value: 0 }, { value: 100 }],
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              id: './node_modules',
+              label: 'node_modules',
+              value: 0,
+              total: {
+                current: 100,
+                baseline: 100,
+              },
+              children: [
+                {
+                  id: './node_modules/react',
+                  label: 'react',
+                  value: 0,
+                  total: {
+                    current: 100,
+                    baseline: 100,
+                  },
+                  children: [
+                    {
+                      id: './node_modules/react/dist',
+                      label: 'dist',
+                      value: 0,
+                      total: {
+                        current: 100,
+                        baseline: 100,
+                      },
+                      children: [
+                        {
+                          id: './node_modules/react/dist/react.production.js',
+                          label: 'react.production.js',
+                          value: 100,
+                          item: {
+                            key: './node_modules/react/dist/react.production.js',
+                            runs: [{ value: 100 }, { value: 100 }],
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: 'favicon.ico',
+          label: 'favicon.ico',
+          value: 10,
+          item: {
+            key: 'favicon.ico',
+            runs: [{ value: 10 }, { value: 10 }],
+          },
+        },
+      ],
+    });
+  });
+});

package/src/components/metrics-treemap/index.ts

@@ -0,0 +1,2 @@
+export * from './metrics-treemap';
+export { getTreemapNodes, getTreemapNodesGroupedByPath } from './metrics-treemap.utils';

package/src/components/metrics-treemap/metrics-treemap.constants.ts

@@ -0,0 +1,63 @@
+import type { ReportMetricRow } from '@bundle-stats/utils';
+
+export interface TreeTotal {
+  current: number;
+  baseline?: number;
+}
+
+export interface TreeLeaf {
+  /**
+   * Node id - file/directory path
+   */
+  id: string;
+  /**
+   * Node label - file/directory baseline
+   */
+  label: string;
+  /**
+   * Node value - the max amount between item run values
+   */
+  value: number;
+  /**
+   * Corresponding report metric item
+   */
+  item: ReportMetricRow;
+}
+
+export interface Tree {
+  /**
+   * Node id - file/directory path
+   */
+  id: string;
+  /**
+   * Node label - file/directory baseline
+   */
+  label: string;
+  /**
+   * Node value - 0 for groups
+   */
+  value: number;
+  /**
+   * List of children nodes
+   */
+  children: TreeNodeChildren;
+  /**
+   * children total values for nested
+   */
+  total?: TreeTotal;
+}
+
+export type TreeNode = Tree | TreeLeaf;
+
+export type TreeNodeChildren = Array<TreeNode>;
+
+export type TileGroupSizeDisplay = 'minimal' | 'small' | 'default';
+
+export type TileSizeDisplay = 'minimal' | 'small' | 'default';
+
+export const SQUARIFY_RATIO = 1.66;
+export const PADDING_OUTER = 1;
+export const PADDING_INNER = 2;
+export const NESTED_PADDING = 4;
+export const NESTED_PADDING_TOP = 16 + NESTED_PADDING * 2;
+export const NESTED_PADDING_LEFT = 8;

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

@@ -0,0 +1,2 @@
+export const TILE_GROUP_LABEL = 'View children entries';
+export const TILE_LABEL = 'View entry info';