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

package/src/ui/filters/filters.tsx

@@ -5,90 +5,55 @@ import type { FilterFieldsData, FilterGroupFieldData } from '../../types';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { Button } from '../button';
-import { Dropdown } from '../dropdown';
+import { ControlGroup } from '../control-group';
+import { Dropdown, DropdownItem } from '../dropdown';
 import { InputSearch } from '../input-search';
 import * as I18N from './filters.i18n';
 import { getGroupFiltersLabelSuffix, LABELS } from './filters.utils';
 import css from './filters.module.css';
 
-interface FilterProps extends React.ComponentProps<'input'> {
-  as?: React.ElementType;
-  buttonClassName?: string;
+interface FilterBooleanProps extends React.ComponentProps<'input'> {
   label: string;
-  name: string;
-  getOnOnlyClick?: (name: string) => () => void;
 }
 
-const Filter = (props: FilterProps) => {
-  const {
-    className = '',
-    as: Component = 'div',
-    buttonClassName = '',
-    label,
-    name,
-    getOnOnlyClick,
-    ...inputProps
-  } = props;
-
-  const id = `filter-${name}`;
-  const rootClassName = cx(css.filter, className);
+const Filter = (props: FilterBooleanProps) => {
+  const { className = '', label, name, ...inputProps } = props;
 
   return (
-    <Component className={rootClassName}>
-      {/* eslint-disable */}
-      <FlexStack
-        space="xxxsmall"
-        alignItems="center"
-        as="label"
-        className={cx(css.filterCheckbox, buttonClassName)}
-      >
-        {/* eslint-enabled */}
-        <input type="checkbox" id={id} name={name} {...inputProps} className={css.filterInput} />
-        <span title={label} className={css.filterLabel}>
-          {label}
-        </span>
-      </FlexStack>
-
-      {getOnOnlyClick && (
-        <Button
-          kind="info"
-          solid
-          size="small"
-          type="button"
-          onClick={getOnOnlyClick(name)}
-          className={css.filterOnlyButton}
-        >
-          {I18N.ONLY}
-        </Button>
-      )}
-    </Component>
+    <FlexStack
+      space="xxxsmall"
+      alignItems="center"
+      as="label"
+      className={cx(css.filter, className)}
+    >
+      <input
+        type="checkbox"
+        id={`filter-${name}`}
+        name={name}
+        {...inputProps}
+        className={css.filterControl}
+      />
+      <span title={label} className={css.filterLabel}>
+        {label}
+      </span>
+    </FlexStack>
   );
 };
 
 interface FilterGroupProps extends React.ComponentProps<'div'> {
-  buttonClassName?: string;
   groupKey: string;
   data: FilterGroupFieldData;
   values: Record<string, boolean>;
-  onCheckboxChange: FilterProps['onChange'];
+  onCheckboxChange: FilterBooleanProps['onChange'];
   toggleFilters: (newFilters: Record<string, boolean>) => void;
 }
 
 const FilterGroup = (props: FilterGroupProps) => {
-  const {
-    className = '',
-    buttonClassName = '',
-    groupKey,
-    data,
-    values,
-    onCheckboxChange,
-    toggleFilters,
-  } = props;
+  const { className = '', groupKey, data, values, onCheckboxChange, toggleFilters } = props;
+  const { label: groupLabel, children: groupItems } = data;
 
   const [search, setSearch] = useState('');
 
-  const { label: groupLabel, children: groupItems } = data;
-
   const areAllGroupItemsChecked = groupItems
     .map(({ key: itemKey }) => values?.[`${groupKey}.${itemKey}`])
     .reduce((agg, val) => agg && val, true);
@@ -99,7 +64,9 @@ const FilterGroup = (props: FilterGroupProps) => {
     <>
       {`${groupLabel}:`}
       &nbsp;
-      <span className={cx(hasCustomFilterSuffix && css.labelSuffixCustom)}>{filterSuffix}</span>
+      <span className={cx(hasCustomFilterSuffix && css.filterGroupLabelSuffixCustom)}>
+        {filterSuffix}
+      </span>
     </>
   );
 
@@ -131,87 +98,78 @@ const FilterGroup = (props: FilterGroupProps) => {
   return (
     <Dropdown
       className={className}
-      buttonClassName={buttonClassName}
       label={dropdownLabel}
       ariaLabel={`${groupLabel}: ${filterSuffix}`}
     >
-      {({ MenuItem, menuItemClassName }) => {
-        return (
-          <>
-            {groupItems.length > 10 && (
-              <div className={css.filterGroupSearchWrapper}>
-                <InputSearch
-                  defaultValue={search}
-                  onChange={setSearch}
-                  placeholder={I18N.GROUP_SEARCH}
-                  debounceWait={0}
-                />
-              </div>
-            )}
-            <div className={css.filterGroupItems}>
-              {filteredGroupItems.length === 0 && (
-                <Stack className={css.filterGroupSearchNotFound}>
-                  <p>{I18N.GROUP_NOT_FOUND}</p>
-                  <div>
-                    <Button
-                      size="small"
-                      kind="primary"
-                      type="button"
-                      onClick={() => setSearch('')}
-                      className={css.filterGroupSearchNotFoundClear}
-                    >
-                      {I18N.GROUP_SEARCH_CLEAR}
-                    </Button>
-                  </div>
-                </Stack>
-              )}
-              {filteredGroupItems.map(({ key: itemKey, ...itemData }) => {
-                const id = [groupKey, itemKey].join('.');
-                const getOnOnlyClick = () => getOnGroupCheck(false, { [id]: true });
-
-                return (
-                  <Filter
-                    key={id}
-                    className={menuItemClassName}
-                    as={MenuItem}
-                    name={id}
-                    label={itemData.label}
-                    onChange={onCheckboxChange}
-                    checked={values[id]}
-                    disabled={itemData.disabled}
-                    getOnOnlyClick={getOnOnlyClick}
-                  />
-                );
-              })}
+      {groupItems.length > 10 && (
+        <div className={css.filterGroupSearchWrapper}>
+          <InputSearch
+            defaultValue={search}
+            onChange={setSearch}
+            placeholder={I18N.GROUP_SEARCH}
+            debounceWait={0}
+          />
+        </div>
+      )}
+      <div className={css.filterGroupItems}>
+        {filteredGroupItems.length === 0 && (
+          <Stack className={css.filterGroupSearchNotFound}>
+            <p>{I18N.GROUP_NOT_FOUND}</p>
+            <div>
+              <Button
+                size="small"
+                kind="primary"
+                type="button"
+                onClick={() => setSearch('')}
+                className={css.filterGroupSearchNotFoundClear}
+              >
+                {I18N.GROUP_SEARCH_CLEAR}
+              </Button>
             </div>
-            {filteredGroupItems.length !== 0 && (
-              <div className={css.filterGroupActions}>
-                {areAllGroupItemsChecked ? (
-                  <MenuItem
-                    id="clear-all"
-                    as="button"
-                    className={menuItemClassName}
-                    type="button"
-                    onClick={getOnGroupCheck(false)}
-                  >
-                    {I18N.CLEAR}
-                  </MenuItem>
-                ) : (
-                  <MenuItem
-                    id="clear-all"
-                    as="button"
-                    className={menuItemClassName}
-                    type="button"
-                    onClick={getOnGroupCheck(true)}
-                  >
-                    {I18N.CHECK}
-                  </MenuItem>
-                )}
-              </div>
-            )}
-          </>
-        );
-      }}
+          </Stack>
+        )}
+        {filteredGroupItems.map(({ key: itemKey, ...itemData }) => {
+          const id = [groupKey, itemKey].join('.');
+          const getOnOnlyClick = () => getOnGroupCheck(false, { [id]: true });
+
+          return (
+            <DropdownItem key={id} className={css.filterGroupItem}>
+              <Filter
+                label={itemData.label}
+                name={id}
+                onChange={onCheckboxChange}
+                checked={values[id]}
+                disabled={itemData.disabled}
+                className={css.filterGroupItemFilter}
+              />
+              <Button
+                kind="info"
+                solid
+                size="small"
+                type="button"
+                onClick={getOnOnlyClick()}
+                disabled={itemData.disabled}
+                className={css.filterGroupOnlyButton}
+              >
+                {I18N.ONLY}
+              </Button>
+            </DropdownItem>
+          );
+        })}
+      </div>
+      {filteredGroupItems.length !== 0 && (
+        <div className={css.filterGroupActions}>
+          {areAllGroupItemsChecked ? (
+            <DropdownItem id="clear-all" onClick={getOnGroupCheck(false)} role="button">
+              {I18N.CLEAR}
+            </DropdownItem>
+          ) : (
+            <DropdownItem id="clear-all" onClick={getOnGroupCheck(true)} role="button">
+              {I18N.CHECK}
+            </DropdownItem>
+          )}
+        </div>
+      )}
     </Dropdown>
   );
 };
@@ -226,6 +184,9 @@ interface FiltersProps extends React.ComponentProps<'div'> {
 export const Filters = (props: FiltersProps) => {
   const { className = '', values, filters, toggleFilter, toggleFilters } = props;
 
+  /**
+   * Toggle filter value on checkbox change
+   */
   const onCheckboxChange = useCallback(
     (event: any) => {
       const { name } = event.target;
@@ -233,41 +194,41 @@ export const Filters = (props: FiltersProps) => {
     },
     [toggleFilter, values],
   );
-  const rootClassName = cx(css.root, className);
+
+  const filterList = Object.entries(filters);
+  const filterCount = filterList.length;
 
   return (
-    <form className={rootClassName}>
-      <FlexStack space="xxsmall" alignItems="top" className={css.items}>
-        {Object.entries(filters).map(([name, data]) => {
-          if ('defaultValue' in data) {
-            return (
-              <Filter
-                key={name}
-                className={cx(css.item, css.filterStandalone)}
-                buttonClassName={css.itemButton}
-                name={name}
-                label={data.label}
-                onChange={onCheckboxChange}
-                checked={values[name]}
-                disabled={data.disabled as boolean}
-              />
-            );
-          }
+    <ControlGroup className={cx(css.root, className)}>
+      {filterList.map(([name, data], index) => {
+        const lastItem = index === filterCount - 1;
 
+        if ('defaultValue' in data) {
           return (
-            <FilterGroup
-              className={css.item}
-              buttonClassName={css.itemButton}
+            <Filter
+              name={name}
+              label={data.label}
+              onChange={onCheckboxChange}
+              checked={values[name]}
+              disabled={data.disabled as boolean}
               key={name}
-              groupKey={name}
-              data={data}
-              values={values}
-              onCheckboxChange={onCheckboxChange}
-              toggleFilters={toggleFilters}
+              className={cx(css.filterSingle, lastItem && css.itemLast)}
             />
           );
-        })}
-      </FlexStack>
-    </form>
+        }
+
+        return (
+          <FilterGroup
+            groupKey={name}
+            data={data}
+            values={values}
+            onCheckboxChange={onCheckboxChange}
+            toggleFilters={toggleFilters}
+            className={cx(lastItem && css.itemLast)}
+            key={name}
+          />
+        );
+      })}
+    </ControlGroup>
   );
 };

package/src/ui/hover-card/hover-card.tsx

@@ -31,7 +31,7 @@ export const HoverCard = (props: HoverCardProps) => {
     children,
   } = props;
 
-  const state = useHovercardState({ gutter: 8, timeout: 300 });
+  const state = useHovercardState({ gutter: 8, timeout: 300, placement: 'top' });
   const hovercardProps = useHovercard({ state, portal: true });
 
   // Fallback to span if no href

package/src/ui/icon/icon.tsx

@@ -18,6 +18,8 @@ const ICONS = {
   GITHUB: 'github',
   INFO: 'info',
   HELP: 'help',
+  TABLE: 'table',
+  TREEMAP: 'treemap',
   MENU: 'menu',
   MORE_VERTICAL: 'more-vertical',
   SORT: 'sort',

package/src/ui/index.js

@@ -6,7 +6,6 @@ export { Dropdown } from './dropdown';
 export { EmptySet } from './empty-set';
 export { FileName } from './file-name';
 export { Filters } from './filters';
-export { HorizontalBarChart } from './horizontal-bar-chart';
 export { HoverCard } from './hover-card';
 export { Icon } from './icon';
 export { Input } from './input';

package/src/ui/toolbar/toolbar.module.css

@@ -1,6 +1,4 @@
-.root {
-  padding: var(--space-small);
-}
+.root { }
 
 .content {}
 

package/types/components/bundle-assets/bundle-assets.d.ts

@@ -47,11 +47,12 @@ export namespace BundleAssets {
             direction: PropTypes.Requireable<string>;
         }>>>;
         export let updateSort: PropTypes.Validator<(...args: any[]) => any>;
-        export let allItems: PropTypes.Requireable<(PropTypes.InferProps<{
+        export let allItems: PropTypes.Validator<(PropTypes.InferProps<{
             key: PropTypes.Requireable<string>;
         }> | null | undefined)[]>;
         export let customComponentLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
         export let hideEntryInfo: PropTypes.Validator<(...args: any[]) => any>;
+        export let showEntryInfo: PropTypes.Validator<(...args: any[]) => any>;
     }
 }
 import React from 'react';

package/types/components/{bundle-assets-totals-table/bundle-assets-totals-table.d.ts → bundle-assets-totals/bundle-assets-totals.d.ts}

@@ -1,14 +1,16 @@
-export function BundleAssetsTotalsTable({ className, jobs, customComponentLink: CustomComponentLink, ...restProps }: {
+export function BundleAssetsTotals({ className, jobs, customComponentLink: CustomComponentLink, onTreemapItemClick, ...restProps }: {
     [x: string]: any;
     className: any;
     jobs: any;
     customComponentLink: any;
+    onTreemapItemClick: any;
 }): React.JSX.Element;
-export namespace BundleAssetsTotalsTable {
+export namespace BundleAssetsTotals {
     namespace defaultProps {
         export let className: string;
         export let jobs: never[];
         export { ComponentLink as customComponentLink };
+        export let onTreemapItemClick: undefined;
     }
     namespace propTypes {
         let className_1: PropTypes.Requireable<string>;
@@ -16,6 +18,8 @@ export namespace BundleAssetsTotalsTable {
         let jobs_1: PropTypes.Requireable<any[]>;
         export { jobs_1 as jobs };
         export let customComponentLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        let onTreemapItemClick_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onTreemapItemClick_1 as onTreemapItemClick };
     }
 }
 import React from 'react';

package/types/components/bundle-assets-totals/index.d.ts

@@ -0,0 +1 @@
+export * from "./bundle-assets-totals";

package/types/components/bundle-modules/bundle-modules.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SortAction } from '../../types';
+import { SortAction } from '../../types';
 import { ModuleMetric } from './bundle-modules.constants';
 import type { Chunk, Job, ReportMetricModuleRow } from './bundle-modules.types';
 interface BundleModulesProps extends React.ComponentProps<'div'> {
@@ -18,6 +18,7 @@ interface BundleModulesProps extends React.ComponentProps<'div'> {
     updateSearch: (newSerarch: string) => void;
     entryId?: string;
     hideEntryInfo: () => void;
+    showEntryInfo: (entryId: string) => void;
     moduleMetric: ModuleMetric;
     setModuleMetric: (newValue: ModuleMetric) => void;
     customComponentLink: React.ElementType;

package/types/components/bundle-modules/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { SortAction } from '../../types';
 import { BundleModules as BaseComponent } from './bundle-modules';
 import * as types from './bundle-modules.types';
-interface BundleModulesProps extends Omit<React.ComponentProps<typeof BaseComponent>, 'jobs' | 'items' | 'chunks' | 'updateFilters' | 'resetFilters' | 'resetAllFilters' | 'filters' | 'sort' | 'updateSort' | 'search' | 'updateSearch' | 'allItems' | 'totalRowCount' | 'hideEntryInfo'> {
+interface BundleModulesProps extends Omit<React.ComponentProps<typeof BaseComponent>, 'jobs' | 'items' | 'chunks' | 'updateFilters' | 'resetFilters' | 'resetAllFilters' | 'filters' | 'sort' | 'updateSort' | 'search' | 'updateSearch' | 'allItems' | 'totalRowCount' | 'hideEntryInfo' | 'showEntryInfo'> {
     jobs: Array<types.Job>;
     filters: Record<string, boolean>;
     search?: string;

package/types/components/bundle-packages/bundle-packages.d.ts

@@ -45,6 +45,7 @@ export namespace BundlePackages {
         let entryId_1: PropTypes.Requireable<string>;
         export { entryId_1 as entryId };
         export let hideEntryInfo: PropTypes.Validator<(...args: any[]) => any>;
+        export let showEntryInfo: PropTypes.Validator<(...args: any[]) => any>;
     }
 }
 import React from 'react';

package/types/components/index.d.ts

@@ -1,7 +1,6 @@
 export { BrowsertimeTable } from "./browsertime-table";
 export { BundleAssets } from "./bundle-assets";
-export { BundleAssetsTotalsTable } from "./bundle-assets-totals-table";
-export { BundleAssetsTotalsChartBars } from "./bundle-assets-totals-chart-bars";
+export { BundleAssetsTotals } from "./bundle-assets-totals";
 export { BundlePackages } from "./bundle-packages";
 export { BundleModules } from "./bundle-modules";
 export { ComponentLink } from "./component-link";
@@ -17,6 +16,5 @@ export { MetricsTableOptions } from "./metrics-table-options";
 export { MetricsTableTitle } from "./metrics-table-title";
 export { ModuleInfo } from "./module-info";
 export { Summary } from "./summary";
-export { TotalSizeTypeTitle } from "./total-size-type-title";
 export { MetricRunInfo, MetricRunInfoProps } from "./metric-run-info";
 export { RunInfo, RunInfoProps } from "./run-info";

package/types/components/metrics-display-selector/index.d.ts

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

package/types/components/metrics-display-selector/metrics-display-selector.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MetricsDisplayType } from '../../constants';
+import { ControlGroup } from '../../ui/control-group';
+interface MetricsDisplaySelectorProps {
+    value: MetricsDisplayType;
+    onSelect: (newValue: MetricsDisplayType) => void;
+}
+export declare const MetricsDisplaySelector: (props: MetricsDisplaySelectorProps & Omit<React.ComponentProps<typeof ControlGroup>, 'onSelect' | 'value'>) => React.JSX.Element;
+export {};

package/types/components/metrics-table/metrics-table.d.ts

@@ -1,23 +1,17 @@
 import React from 'react';
-import { type MetricRunInfo } from '@bundle-stats/utils';
+import type { ReportMetricRow } from '@bundle-stats/utils';
 import { Table } from '../../ui/table';
-interface Item {
-    key: string;
-    label?: string;
-    changed: boolean;
-    biggerIsBetter: boolean;
-    runs: Array<MetricRunInfo | null>;
-}
 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;

package/types/components/metrics-table/metrics-table.i18n.d.ts

@@ -1,8 +1,3 @@
-export declare const BASELINE_TITLE = "Baseline";
-export declare const CURRENT_TITLE = "Current";
-export declare const SORT_VALUE = "value";
-export declare const SORT_CHANGE = "change";
-export declare const SORT_PERCENTUAL_CHANGE = "percentual change";
 export declare const EMPTY_MESSAGE = "No items found.";
 export declare const SHOW_ALL = "Show all";
 export declare const SHOW_LESS = "Show less";

package/types/components/metrics-table-header/index.d.ts

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

package/types/components/metrics-table-header/metrics-table-header.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { type ReportMetricRow } from '@bundle-stats/utils';
+interface MetricsTableHeaderProps {
+    metricTitle?: React.ReactNode;
+    showSum?: boolean;
+    jobs: Array<{
+        label: string;
+        internalBuildNumber: number;
+    }>;
+    rows: Array<ReportMetricRow>;
+    sort?: any;
+    updateSort?: (val: any) => void;
+}
+export declare const MetricsTableHeader: (props: MetricsTableHeaderProps & React.ComponentProps<'thead'>) => React.JSX.Element;
+export {};

package/types/components/metrics-table-header/metrics-table-header.i18n.d.ts

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

package/types/components/metrics-treemap/index.d.ts

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

package/types/components/metrics-treemap/metrics-treemap.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ReportMetricRow } from '@bundle-stats/utils';
+interface MetricsTreemapProps {
+    items: Array<ReportMetricRow>;
+    emptyMessage?: React.ReactNode;
+    onItemClick?: (entryId: string) => void;
+}
+export declare const MetricsTreemap: (props: MetricsTreemapProps & React.ComponentProps<'div'>) => React.JSX.Element;
+export {};

package/types/constants.d.ts

@@ -1,18 +1,22 @@
-export namespace URLS {
-    let OVERVIEW: string;
-    let ASSETS: string;
-    let MODULES: string;
-    let PACKAGES: string;
-}
-export const SECTION_URLS: {
+export declare const URLS: {
+    OVERVIEW: string;
+    ASSETS: string;
+    MODULES: string;
+    PACKAGES: string;
+};
+export declare const SECTION_URLS: {
     [x: string]: string;
 };
-export const ASSETS_SIZES_FILE_TYPE_MAP: {};
-export const METRICS_WEBPACK_GENERAL: string[];
-export const METRICS_WEBPACK_ASSETS: string[];
-export const METRICS_WEBPACK_MODULES: string[];
-export const METRICS_WEBPACK_PACKAGES: string[];
-export namespace SORT {
-    let ASC: string;
-    let DESC: string;
+export declare const ASSETS_SIZES_FILE_TYPE_MAP: {};
+export declare const METRICS_WEBPACK_GENERAL: string[];
+export declare const METRICS_WEBPACK_ASSETS: string[];
+export declare const METRICS_WEBPACK_MODULES: string[];
+export declare const METRICS_WEBPACK_PACKAGES: string[];
+export declare const SORT: {
+    ASC: string;
+    DESC: string;
+};
+export declare enum MetricsDisplayType {
+    TABLE = "table",
+    TREEMAP = "treemap"
 }

package/types/hooks/entry-info.d.ts

@@ -0,0 +1,8 @@
+interface UseEntryInfoParams {
+    setState: (data: {
+        entryId: string;
+    }) => void;
+}
+type UseEntryInfo = [() => void, (entryId: string) => void];
+export declare function useEntryInfo(params: UseEntryInfoParams): UseEntryInfo;
+export {};

package/types/hooks/metrics-display-type.d.ts

@@ -0,0 +1,4 @@
+import { MetricsDisplayType } from '../constants';
+type UseMetricsDisplayType = [MetricsDisplayType, (value: MetricsDisplayType) => void];
+export declare const useMetricsDisplayType: () => UseMetricsDisplayType;
+export {};