@bundle-stats/ui 4.13.0-beta.0 → 4.13.0-beta.10

package/src/components/bundle-modules/bundle-modules.tsx

@@ -5,19 +5,23 @@ import { SECTIONS, COMPONENT } from '@bundle-stats/utils';
 import { SortAction } from '../../types';
 import config from '../../config.json';
 import I18N from '../../i18n';
-import { Box } from '../../layout/box';
 import { MetricsDisplayType } from '../../constants';
+import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
 import { Button } from '../../ui/button';
+import { ControlGroup } from '../../ui/control-group';
 import { EmptySet } from '../../ui/empty-set';
 import { FileName } from '../../ui/file-name';
 import { Filters } from '../../ui/filters';
 import { InputSearch } from '../../ui/input-search';
 import { Tag } from '../../ui/tag';
+import { Table } from '../../ui/table';
 import { Toolbar } from '../../ui/toolbar';
 import { Tooltip } from '../../ui/tooltip';
 import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
+import { MetricsTableHeader } from '../metrics-table-header';
 import { MetricsTreemap } from '../metrics-treemap';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
@@ -44,7 +48,9 @@ const RowHeader = (props: RowHeaderProps) => {
   return (
     <CustomComponentLink
       section={SECTIONS.MODULES}
-      params={{ [COMPONENT.BUNDLE_MODULES]: { filters, search, entryId: row.key, moduleMetric } }}
+      params={{
+        [COMPONENT.BUNDLE_MODULES]: { filters, search, entryId: row.key, metric: moduleMetric },
+      }}
       className={css.name}
     >
       {row.duplicated && (
@@ -140,7 +146,7 @@ export const BundleModules = (props: BundleModulesProps) => {
         customComponentLink={CustomComponentLink}
       />
     ),
-    [jobs, chunks, CustomComponentLink, filters, search],
+    [jobs, chunks, CustomComponentLink, filters, search, moduleMetric],
   );
 
   const emptyMessage = useMemo(
@@ -165,7 +171,7 @@ export const BundleModules = (props: BundleModulesProps) => {
 
   return (
     <>
-      <div className={rootClassName}>
+      <Stack space="xsmall" as="section" className={rootClassName}>
         <Toolbar
           className={css.toolbar}
           renderActions={({ actionClassName }) => (
@@ -192,45 +198,57 @@ export const BundleModules = (props: BundleModulesProps) => {
             />
           </FlexStack>
         </Toolbar>
-        <Box padding={['xsmall', 'small']} className={css.metricSelector}>
-          <FlexStack space="xxsmall" as="nav">
-            <Button
-              outline
-              active={moduleMetric === ModuleMetric.SIZE}
-              size="small"
-              type="button"
-              onClick={() => setModuleMetric(ModuleMetric.SIZE)}
-            >
-              <Tooltip title="Size (excluding duplicate modules)">Module size</Tooltip>
-            </Button>
-            <Button
-              outline
-              active={moduleMetric === ModuleMetric.TOTAL_SIZE}
-              size="small"
-              type="button"
-              onClick={() => setModuleMetric(ModuleMetric.TOTAL_SIZE)}
-            >
-              <Tooltip title="Size (including duplicate modules)">Module total size</Tooltip>
-            </Button>
-          </FlexStack>
+        <Box outline as="main">
+          <Box padding={['xsmall', 'small']} className={css.metricSelector}>
+            <ControlGroup as="nav">
+              <Button
+                outline
+                active={moduleMetric === ModuleMetric.SIZE}
+                size="small"
+                type="button"
+                onClick={() => setModuleMetric(ModuleMetric.SIZE)}
+              >
+                <Tooltip title="Size (excluding duplicate modules)">Module size</Tooltip>
+              </Button>
+              <Button
+                outline
+                active={moduleMetric === ModuleMetric.TOTAL_SIZE}
+                size="small"
+                type="button"
+                onClick={() => setModuleMetric(ModuleMetric.TOTAL_SIZE)}
+              >
+                <Tooltip title="Size (including duplicate modules)">Module total size</Tooltip>
+              </Button>
+            </ControlGroup>
+          </Box>
+          {displayType === MetricsDisplayType.TABLE && (
+            <MetricsTable
+              className={css.table}
+              items={items}
+              runs={jobs}
+              renderRowHeader={renderRowHeader}
+              emptyMessage={emptyMessage}
+              showHeaderSum
+              title={metricsTableTitle}
+              sort={sort}
+              updateSort={updateSort}
+            />
+          )}
+          {displayType === MetricsDisplayType.TREEMAP && (
+            <>
+              <Table compact>
+                <MetricsTableHeader
+                  metricTitle={metricsTableTitle}
+                  showSum
+                  jobs={jobs}
+                  rows={items}
+                />
+              </Table>
+              <MetricsTreemap emptyMessage={emptyMessage} items={items} onItemClick={showEntryInfo} />
+            </>
+          )}
         </Box>
-        {displayType === MetricsDisplayType.TABLE && (
-          <MetricsTable
-            className={css.table}
-            items={items}
-            runs={jobs}
-            renderRowHeader={renderRowHeader}
-            emptyMessage={emptyMessage}
-            showHeaderSum
-            title={metricsTableTitle}
-            sort={sort}
-            updateSort={updateSort}
-          />
-        )}
-        {displayType === MetricsDisplayType.TREEMAP && (
-          <MetricsTreemap emptyMessage={emptyMessage} items={items} onItemClick={showEntryInfo} />
-        )}
-      </div>
+      </Stack>
       {entryItem && (
         <ModuleInfo
           className={css.moduleInfo}

package/src/components/bundle-modules/index.tsx

@@ -6,7 +6,7 @@ import type { SortAction } from '../../types';
 import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
-import { useShowEntry } from '../../hooks/show-entry';
+import { useEntryInfo } from '../../hooks/entry-info';
 import { BundleModules as BaseComponent } from './bundle-modules';
 import {
   addRowFlags,
@@ -120,7 +120,7 @@ export const BundleModules = (props: BundleModulesProps) => {
     getCustomSort,
   });
 
-  const { hideEntryInfo, showEntryInfo } = useShowEntry({ setState });
+  const [hideEntryInfo, showEntryInfo] = useEntryInfo({ setState });
 
   return (
     <BaseComponent

package/src/components/bundle-packages/bundle-packages.jsx

@@ -5,14 +5,18 @@ import { COMPONENT, PACKAGE_FILTERS, PACKAGES_SEPARATOR, SECTIONS } from '@bundl
 
 import config from '../../config.json';
 import I18N from '../../i18n';
+import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
 import { InputSearch } from '../../ui/input-search';
 import { EmptySet } from '../../ui/empty-set';
 import { Filters } from '../../ui/filters';
 import { Tag } from '../../ui/tag';
+import { Table } from '../../ui/table';
 import { Toolbar } from '../../ui/toolbar';
 import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
+import { MetricsTableHeader } from '../metrics-table-header';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
 import { PackageInfo } from '../package-info';
@@ -189,7 +193,7 @@ export const BundlePackages = (props) => {
 
   return (
     <>
-      <section className={cx(css.root, className)}>
+      <Stack space="xsmall" as="section" className={cx(css.root, className)}>
         <Toolbar
           className={css.toolbar}
           renderActions={({ actionClassName }) => (
@@ -217,7 +221,7 @@ export const BundlePackages = (props) => {
             />
           </FlexStack>
         </Toolbar>
-        <main>
+        <Box outline as="main">
           {displayType === MetricsDisplayType.TABLE && (
             <MetricsTable
               runs={jobs}
@@ -231,10 +235,20 @@ export const BundlePackages = (props) => {
             />
           )}
           {displayType === MetricsDisplayType.TREEMAP && (
-            <MetricsTreemap emptyMessage={emptyMessage} items={items} onItemClick={showEntryInfo} />
+            <>
+              <Table compact>
+                <MetricsTableHeader
+                  metricTitle={metricsTableTitle}
+                  showSum
+                  jobs={jobs}
+                  rows={items}
+                />
+              </Table>
+              <MetricsTreemap emptyMessage={emptyMessage} items={items} onItemClick={showEntryInfo} />
+            </>
           )}
-        </main>
-      </section>
+        </Box>
+      </Stack>
       {entryItem && (
         <PackageInfo
           className={css.packageInfo}

package/src/components/bundle-packages/bundle-packages.module.css

@@ -2,14 +2,9 @@
   color: var(--color-text-light);
 }
 
-.toolbar {
-  border-bottom: 1px solid var(--color-outline);
-}
-
 .toolbarSearch {
   width: 100%;
   max-width: 240px;
-  margin-right: -1px; /** collapse border */
 }
 
 .hoverCard {

package/src/components/bundle-packages/index.jsx

@@ -6,9 +6,14 @@ import * as webpack from '@bundle-stats/utils/lib-esm/webpack/compare';
 import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
-import { useShowEntry } from '../../hooks/show-entry';
+import { useEntryInfo } from '../../hooks/entry-info';
 import { BundlePackages as BundlePackagesComponent } from './bundle-packages';
-import { getDuplicatePackages, getAddRowDuplicateFlag, getRowFilter, getCustomSort } from './bundle-packages.utils';
+import {
+  getDuplicatePackages,
+  getAddRowDuplicateFlag,
+  getRowFilter,
+  getCustomSort,
+} from './bundle-packages.utils';
 
 export const BundlePackages = (props) => {
   const { jobs, search, filters, setState, sortBy, direction, ...restProps } = props;
@@ -55,7 +60,7 @@ export const BundlePackages = (props) => {
     getCustomSort,
   });
 
-  const { hideEntryInfo, showEntryInfo } = useShowEntry({ setState });
+  const [hideEntryInfo, showEntryInfo] = useEntryInfo({ setState });
 
   return (
     <BundlePackagesComponent

package/src/components/index.js

@@ -18,4 +18,3 @@ export { MetricsTableTitle } from './metrics-table-title';
 export { ModuleInfo } from './module-info';
 export { RunInfo, RunInfoProps } from './run-info';
 export { Summary } from './summary';
-export { TotalSizeTypeTitle } from './total-size-type-title';

package/src/components/jobs-header/jobs-header.module.css

@@ -24,10 +24,6 @@
   background: linear-gradient(90deg, transparent, var(--color-background));
 }
 
-.item + .item {
-  margin-left: var(--space-small);
-}
-
 .item:first-child {
   border-left: 0;
   padding-left: 0;

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

@@ -2,8 +2,8 @@ import React from 'react';
 import cx from 'classnames';
 
 import { MetricsDisplayType } from '../../constants';
-import { FlexStack } from '../../layout/flex-stack';
 import { Button } from '../../ui/button';
+import { ControlGroup } from '../../ui/control-group';
 import { Icon } from '../../ui/icon';
 import css from './metrics-display-selector.module.css';
 
@@ -14,38 +14,34 @@ interface MetricsDisplaySelectorProps {
 
 export const MetricsDisplaySelector = (
   props: MetricsDisplaySelectorProps &
-    Omit<React.ComponentProps<typeof FlexStack>, 'onSelect' | 'value'>,
+    Omit<React.ComponentProps<typeof ControlGroup>, 'onSelect' | 'value'>,
 ) => {
   const { className = '', value, onSelect, ...restProps } = props;
 
   return (
-    <FlexStack space="xxsmall" as="nav" className={cx(css.root, className)} {...restProps}>
+    <ControlGroup className={cx(css.root, className)} {...restProps}>
       <Button
         outline
         active={value === MetricsDisplayType.TABLE}
         size="small"
         type="button"
+        glyph={Icon.ICONS.TABLE}
         onClick={() => onSelect(MetricsDisplayType.TABLE)}
         className={css.button}
       >
-        <FlexStack space="xxxsmall" alignItems="center">
-          <Icon glyph={Icon.ICONS.TABLE} className={css.icon} />
-          <span>Table</span>
-        </FlexStack>
+        Table
       </Button>
       <Button
         outline
         active={value === MetricsDisplayType.TREEMAP}
         size="small"
         type="button"
+        glyph={Icon.ICONS.TREEMAP}
         onClick={() => onSelect(MetricsDisplayType.TREEMAP)}
         className={cx(css.button)}
       >
-        <FlexStack space="xxxsmall" alignItems="center">
-          <Icon glyph={Icon.ICONS.TREEMAP} className={css.icon} />
-          <span>Treemap</span>
-        </FlexStack>
+        Treemap
       </Button>
-    </FlexStack>
+    </ControlGroup>
   );
 };

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

@@ -1,10 +1,3 @@
-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';
-
 export const EMPTY_MESSAGE = 'No items found.';
 export const SHOW_ALL = 'Show all';
 export const SHOW_LESS = 'Show less';

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

@@ -10,52 +10,9 @@
   text-decoration: underline;
 }
 
-/* columns */
-.metricName {
-  width: 55%;
-}
-
-.root .jobCol {
-  text-align: right;
-}
-
-.root .value {
-  text-align: right;
-  vertical-align: baseline;
-  width: 15%;
-}
-
+.root .value,
 .root .delta {
   text-align: right;
-  font-size: var(--size-xsmall);
-  vertical-align: baseline;
-  width: 10%;
-  color: pink;
-}
-
-.root .deltaPercentage {
-  width: 5%;
-}
-
-.root tbody .delta {
-  line-height: 1.6rem; /* baseline alignment with the column value */
-}
-
-.jobName {
-  white-space: nowrap;
-}
-
-/* columns overrides for showHeaderSum */
-.showHeaderSum .headerRow .jobCol {
-  border-bottom: 0;
-  padding-bottom: 0;
-}
-
-.showHeaderSum .headerRow .sum {
-  padding-top: var(--space-xxxsmall);
-  font-size: var(--size-small);
-  vertical-align: middle;
-  text-transform: none;
 }
 
 /** rows */

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

@@ -1,13 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import isEmpty from 'lodash/isEmpty';
-import sum from 'lodash/sum';
-import {
-  METRIC_TYPE_CONFIGS,
-  type MetricRunInfo,
-  MetricTypes,
-  getMetricRunInfo,
-} from '@bundle-stats/utils';
+import type { ReportMetricRow } from '@bundle-stats/utils';
 
 import { Button } from '../../ui/button';
 import { Icon } from '../../ui/icon';
@@ -15,128 +9,17 @@ import { Table } from '../../ui/table';
 import { Stack } from '../../layout/stack';
 import { Metric } from '../metric';
 import { Delta } from '../delta';
-import { JobName } from '../job-name';
-import { SortButton } from '../sort-button';
+import { MetricsTableHeader } from '../metrics-table-header';
 import * as I18N from './metrics-table.i18n';
 import css from './metrics-table.module.css';
 
-const METRIC_TYPE = METRIC_TYPE_CONFIGS[MetricTypes.FileSize];
 const VISIBLE_COUNT = 500;
 const BASELINE_COLUMN_SPAN = 1;
 const CURRENT_COLUMN_SPAN = 3;
 
-interface Run {
-  /**
-   * Run job label
-   */
-  label?: React.ReactNode;
-  /**
-   * Job internal build number
-   */
-  internalBuildNumber: number;
-}
-
-interface Item {
-  key: string;
-  label?: string;
-  changed: boolean;
-  biggerIsBetter: boolean;
-  runs: Array<MetricRunInfo | null>;
-}
-
-const getRowsRunTotal = (rows: Array<Item>, runIndex: number): number =>
-  sum(rows.map((row) => row?.runs?.[runIndex]?.value || 0));
-
-interface JobColumnProps {
-  run: Run;
-  isBaseline: boolean;
-}
-
-const JobColumn = ({ run, isBaseline }: JobColumnProps) => {
-  const colSpan = isBaseline ? BASELINE_COLUMN_SPAN : CURRENT_COLUMN_SPAN;
-  const { label, internalBuildNumber } = run;
-
-  if (!run) {
-    return <Table.Th colSpan={colSpan}>-</Table.Th>;
-  }
-
-  return (
-    <Table.Th className={css.jobCol} colSpan={colSpan}>
-      <JobName
-        title={isBaseline ? I18N.BASELINE_TITLE : I18N.CURRENT_TITLE}
-        internalBuildNumber={internalBuildNumber}
-        className={css.jobName}
-      >
-        {label}
-      </JobName>
-    </Table.Th>
-  );
-};
-
-interface ColumnSumProps {
-  rows: Array<Item>;
-  isBaseline: boolean;
-  runIndex: number;
-  sort?: any;
-  updateSort?: (val: any) => void;
-}
-
-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.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.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.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>
-        </>
-      )}
-    </>
-  );
-};
-
 interface RowProps extends React.ComponentProps<typeof Table.Tr> {
-  item: Item;
-  renderHeader: (item: Item) => React.ReactNode;
+  item: ReportMetricRow;
+  renderHeader: (item: ReportMetricRow) => React.ReactNode;
 }
 
 const Row = ({ className = '', item, renderHeader, ...restProps }: RowProps) => (
@@ -185,14 +68,15 @@ const Row = ({ className = '', item, renderHeader, ...restProps }: RowProps) =>
 
 interface MetricsTableProps extends Omit<React.ComponentProps<typeof Table>, 'title'> {
   runs: Array<{
+    label: string;
     internalBuildNumber: number;
   }>;
-  items: Array<Item>;
+  items: Array<ReportMetricRow>;
   title?: React.ReactNode;
   showHeaderSum?: boolean;
   sort?: any;
   updateSort?: (val: any) => void;
-  renderRowHeader?: (item: Item) => React.ReactNode;
+  renderRowHeader?: (item: ReportMetricRow) => React.ReactNode;
   emptyMessage?: React.ReactNode;
   showAllItems: boolean;
   setShowAllItems: (value: boolean) => void;
@@ -203,7 +87,7 @@ export const MetricsTable = ({
   runs,
   items,
   showHeaderSum = false,
-  title = '',
+  title,
   sort,
   updateSort,
   renderRowHeader = (item: any) => item.label,
@@ -214,12 +98,7 @@ export const MetricsTable = ({
 }: MetricsTableProps) => {
   const columnCount = (runs.length - 1) * CURRENT_COLUMN_SPAN + BASELINE_COLUMN_SPAN + 1;
 
-  const rootClassName = cx(
-    css.root,
-    className,
-    runs.length > 1 && css.multipleRuns,
-    showHeaderSum && css.showHeaderSum,
-  );
+  const rootClassName = cx(css.root, className, runs.length > 1 && css.multipleRuns);
 
   const showEmpty = isEmpty(items);
   const showItems = !showEmpty;
@@ -228,29 +107,14 @@ export const MetricsTable = ({
 
   return (
     <Table className={rootClassName} compact {...restProps}>
-      <Table.THead>
-        <Table.Tr className={css.headerRow}>
-          <Table.Th className={css.metricName} rowSpan={showHeaderSum ? 2 : 1}>
-            {title || ' '}
-          </Table.Th>
-          {runs.map((run, runIndex) => (
-            <JobColumn run={run} isBaseline={runIndex === runs.length - 1} />
-          ))}
-        </Table.Tr>
-        {showHeaderSum && (
-          <Table.Tr className={css.headerRow}>
-            {runs.map((_, runIndex) => (
-              <SumColumn
-                rows={items}
-                isBaseline={runIndex === runs.length - 1}
-                runIndex={runIndex}
-                updateSort={updateSort}
-                sort={sort}
-              />
-            ))}
-          </Table.Tr>
-        )}
-      </Table.THead>
+      <MetricsTableHeader
+        metricTitle={title}
+        showSum={showHeaderSum}
+        jobs={runs}
+        rows={items}
+        sort={sort}
+        updateSort={updateSort}
+      />
       <Table.TBody>
         {showEmpty && (
           <Table.Tr>

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';