@bundle-stats/ui 4.8.3 → 4.8.4

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

@@ -1,2 +1,5 @@
-export function MetricsTable(props: any): React.JSX.Element;
 import React from 'react';
+import { MetricsTable as BaseComponent } from './metrics-table';
+type MetricsTableProps = Omit<React.ComponentProps<typeof BaseComponent>, 'showAllItems' | 'setShowAllItems'>;
+export declare const MetricsTable: (props: MetricsTableProps) => React.JSX.Element;
+export {};

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

@@ -1,48 +1,26 @@
-export function MetricsTable({ className, renderRowHeader, runs, items, emptyMessage, showHeaderSum, title, showAllItems, setShowAllItems, sort, updateSort, ...restProps }: {
-    [x: string]: any;
-    className: any;
-    renderRowHeader: any;
-    runs: any;
-    items: any;
-    emptyMessage: any;
-    showHeaderSum: any;
-    title: any;
-    showAllItems: any;
-    setShowAllItems: any;
-    sort: any;
-    updateSort: any;
-}): React.JSX.Element;
-export namespace MetricsTable {
-    namespace defaultProps {
-        let className: string;
-        function renderRowHeader(item: any): any;
-        let emptyMessage: string;
-        let showHeaderSum: boolean;
-        let title: string;
-    }
-    namespace propTypes {
-        let className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        let renderRowHeader_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { renderRowHeader_1 as renderRowHeader };
-        export let runs: PropTypes.Validator<(PropTypes.InferProps<{
-            internalBuildNumber: PropTypes.Requireable<number>;
-        }> | null | undefined)[]>;
-        export let items: PropTypes.Validator<(PropTypes.InferProps<{
-            key: PropTypes.Requireable<string>;
-            label: PropTypes.Requireable<string>;
-            runs: PropTypes.Requireable<(PropTypes.InferProps<{
-                displayValue: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-                displayDelta: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-            }> | null | undefined)[]>;
-        }> | null | undefined)[]>;
-        let emptyMessage_1: PropTypes.Requireable<PropTypes.ReactElementLike>;
-        export { emptyMessage_1 as emptyMessage };
-        let showHeaderSum_1: PropTypes.Requireable<boolean>;
-        export { showHeaderSum_1 as showHeaderSum };
-        let title_1: PropTypes.Requireable<PropTypes.ReactElementLike>;
-        export { title_1 as title };
-    }
-}
 import React from 'react';
-import PropTypes from 'prop-types';
+import { type MetricRunInfo } 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<{
+        internalBuildNumber: number;
+    }>;
+    items: Array<Item>;
+    title?: React.ReactNode;
+    showHeaderSum?: boolean;
+    sort?: any;
+    updateSort?: (val: any) => void;
+    renderRowHeader?: (item: Item) => React.ReactNode;
+    emptyMessage?: React.ReactNode;
+    showAllItems: boolean;
+    setShowAllItems: (value: boolean) => void;
+}
+export declare const MetricsTable: ({ className, runs, items, showHeaderSum, title, sort, updateSort, renderRowHeader, emptyMessage, showAllItems, setShowAllItems, ...restProps }: MetricsTableProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,8 @@
+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/sort-button/sort-button.d.ts

@@ -4,8 +4,8 @@ interface SortButtonProps {
     fieldPath: string;
     fieldName: string;
     label: string;
-    sort: SortAction;
-    updateSort: (params: SortAction) => void;
+    sort?: SortAction;
+    updateSort?: (params: SortAction) => void;
 }
 export declare const SortButton: (props: SortButtonProps & React.ComponentProps<'div'>) => React.JSX.Element;
 export {};

package/types/hooks/rows-sort.d.ts

@@ -2,11 +2,11 @@
 import type { SortAction } from '../types';
 interface UseRowsSortParams {
     rows: Array<unknown>;
-    initialField: string;
-    initialDirection: SortAction['direction'];
-    getCustomSort: (item: unknown) => Array<string | number | boolean>;
+    initialField?: string;
+    initialDirection?: SortAction['direction'];
+    getCustomSort: (item: any) => Array<string | number | boolean>;
 }
-export declare const getSortFn: (fieldPath: string, getCustomSort: UseRowsSortParams['getCustomSort']) => (item: unknown) => number | (string | number | boolean)[];
+export declare const getSortFn: (fieldPath: string, getCustomSort: UseRowsSortParams['getCustomSort']) => (item: unknown) => any;
 export declare const useRowsSort: ({ rows, initialField, initialDirection, getCustomSort, }: UseRowsSortParams) => {
     sort: {
         field: string;

package/types/layout/box/box.d.ts

@@ -9,5 +9,5 @@ interface BoxProps<T extends React.ElementType> {
     outline?: boolean;
     outlineHover?: boolean;
 }
-export declare const Box: <T extends React.ElementType<any> = "div">(props: BoxProps<T> & Omit<React.ComponentProps<T>, keyof BoxProps<T>>) => React.JSX.Element;
+export declare const Box: <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements> = "div">(props: BoxProps<T> & Omit<React.ComponentProps<T>, keyof BoxProps<T>>) => React.JSX.Element;
 export {};

package/types/layout/flex-stack/flex-stack.d.ts

@@ -7,5 +7,5 @@ interface FlexStackProps<T extends React.ElementType> {
     inline?: boolean;
     alignItems?: 'top' | 'center' | 'bottom';
 }
-export declare const FlexStack: <T extends React.ElementType<any> = "div">(props: FlexStackProps<T> & Omit<React.ComponentProps<T>, keyof FlexStackProps<T>>) => React.JSX.Element;
+export declare const FlexStack: <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements> = "div">(props: FlexStackProps<T> & Omit<React.ComponentProps<T>, keyof FlexStackProps<T>>) => React.JSX.Element;
 export {};

package/types/ui/filters/filters.d.ts

@@ -1,15 +1,25 @@
-export function Filters(props: any): React.JSX.Element;
-export namespace Filters {
-    namespace defaultProps {
-        let className: string;
-    }
-    namespace propTypes {
-        let className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        export let values: PropTypes.Validator<object>;
-        export let filters: PropTypes.Validator<object>;
-        export let toggleFilter: PropTypes.Validator<(...args: any[]) => any>;
-    }
-}
 import React from 'react';
-import PropTypes from 'prop-types';
+import type { FilterFieldsData, FilterGroupFieldData } from '../../types';
+interface FilterProps extends React.ComponentProps<'input'> {
+    as?: React.ElementType;
+    buttonClassName?: string;
+    label: string;
+    name: string;
+    getOnOnlyClick?: (name: string) => () => void;
+}
+interface FilterGroupProps extends React.ComponentProps<'div'> {
+    buttonClassName?: string;
+    groupKey: string;
+    data: FilterGroupFieldData;
+    values: Record<string, boolean>;
+    onCheckboxChange: FilterProps['onChange'];
+    toggleFilters: (newFilters: Record<string, boolean>) => void;
+}
+interface FiltersProps extends React.ComponentProps<'div'> {
+    values: Record<string, boolean>;
+    filters: FilterFieldsData;
+    toggleFilter: (name: string, value: boolean) => void;
+    toggleFilters: FilterGroupProps['toggleFilters'];
+}
+export declare const Filters: (props: FiltersProps) => React.JSX.Element;
+export {};

package/types/ui/filters/filters.i18n.d.ts

@@ -0,0 +1,2 @@
+export declare const CLEAR = "Clear all";
+export declare const CHECK = "Check all";

package/types/ui/filters/filters.utils.d.ts

@@ -1,6 +1,7 @@
-export namespace LABELS {
-    let NONE: string;
-    let ALL: string;
-}
-export function getGroupFiltersLabelSuffix(filters: Array<any[]>): string;
-export function getInitialValues(key: any, filters: any): any;
+import type { FilterFieldData, FilterFieldsData, FilterGroupFieldData } from '../../types';
+export declare const LABELS: {
+    NONE: string;
+    ALL: string;
+};
+export declare const getGroupFiltersLabelSuffix: (filters: FilterGroupFieldData['children']) => string;
+export declare const getInitialValues: (key: string, filtersData: FilterFieldsData | FilterFieldData | FilterGroupFieldData | string) => Record<string, boolean>;

package/types/ui/filters/index.d.ts

@@ -1,13 +1,9 @@
-export function Filters(props: any): React.JSX.Element;
-export namespace Filters {
-    namespace defaultProps {
-        let onChange: null;
-    }
-    namespace propTypes {
-        export let filters: PropTypes.Validator<object>;
-        let onChange_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onChange_1 as onChange };
-    }
-}
 import React from 'react';
-import PropTypes from 'prop-types';
+import { FilterFieldsData } from '../../types';
+import { Filters as BaseComponent } from './filters';
+interface FiltersProps extends Omit<React.ComponentProps<typeof BaseComponent>, 'onChange' | 'filters' | 'values' | 'toggleFilter' | 'toggleFilters'> {
+    onChange?: (newValues: Record<string, boolean>) => void;
+    filters: FilterFieldsData;
+}
+export declare const Filters: (props: FiltersProps) => React.JSX.Element;
+export {};

package/types/ui/table/table.d.ts

@@ -6,10 +6,10 @@ interface TableProps {
 }
 export declare const Table: {
     (props: TableProps & React.ComponentProps<'table'>): React.JSX.Element;
-    THead: React.ElementType<any>;
-    TBody: React.ElementType<any>;
-    Tr: React.ElementType<any>;
-    Th: React.ElementType<any>;
-    Td: React.ElementType<any>;
+    THead: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
+    TBody: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
+    Tr: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
+    Th: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
+    Td: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
 };
 export {};

package/types/ui/tooltip/tooltip.d.ts

@@ -7,5 +7,5 @@ interface TooltipProps<T extends React.ElementType> {
     containerRef?: React.RefObject<HTMLElement>;
     darkMode?: boolean;
 }
-export declare const Tooltip: <T extends React.ElementType<any> = "span">(props: TooltipProps<T> & Omit<React.ComponentProps<T>, keyof TooltipProps<T>>) => React.JSX.Element;
+export declare const Tooltip: <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements> = "span">(props: TooltipProps<T> & Omit<React.ComponentProps<T>, keyof TooltipProps<T>>) => React.JSX.Element;
 export {};

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

@@ -1,291 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import isEmpty from 'lodash/isEmpty';
-import get from 'lodash/get';
-import {
-  FILE_TYPE_LABELS,
-  MODULE_SOURCE_FILE_TYPES,
-  MODULE_SOURCE_TYPE,
-  MODULE_CHUNK,
-  MODULE_FILTERS,
-  MODULE_FILE_TYPE,
-  SECTIONS,
-  COMPONENT,
-} from '@bundle-stats/utils';
-
-import config from '../../config.json';
-import I18N from '../../i18n';
-import { ComponentLink } from '../component-link';
-import { FlexStack } from '../../layout/flex-stack';
-import { EmptySet } from '../../ui/empty-set';
-import { FileName } from '../../ui/file-name';
-import { Filters } from '../../ui/filters';
-import { Tag } from '../../ui/tag';
-import { Toolbar } from '../../ui/toolbar';
-import { MetricsTable } from '../metrics-table';
-import { MetricsTableSearch } from '../metrics-table-search';
-import { MetricsTableOptions } from '../metrics-table-options';
-import { MetricsTableTitle } from '../metrics-table-title';
-import { ModuleInfo } from '../module-info';
-import css from './bundle-modules.module.css';
-
-const getFilters = ({ filters, compareMode, chunks }) => {
-  const chunkFilter = { label: 'Chunk' };
-  chunks?.forEach((chunk) => {
-    chunkFilter[chunk.id] = {
-      label: chunk.name,
-      defaultValue: filters[`${MODULE_CHUNK}.${chunk.id}`] ?? true,
-    };
-  });
-
-  return {
-    [MODULE_FILTERS.CHANGED]: {
-      label: 'Changed',
-      defaultValue: filters.changed,
-      disabled: !compareMode,
-    },
-    [MODULE_FILTERS.DUPLICATED]: {
-      label: 'Duplicate',
-      defaultValue: filters[MODULE_FILTERS.DUPLICATED],
-    },
-
-    // When chunks data is available, list available chunks as filters
-    ...(!isEmpty(chunks) && {
-      [MODULE_CHUNK]: chunkFilter,
-    }),
-
-    [MODULE_SOURCE_TYPE]: {
-      label: 'Source',
-      [MODULE_FILTERS.FIRST_PARTY]: {
-        label: 'First party',
-        defaultValue: get(filters, `${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`, true),
-      },
-      [MODULE_FILTERS.THIRD_PARTY]: {
-        label: 'Third party',
-        defaultValue: get(filters, `${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`, true),
-      },
-    },
-
-    // Module source types
-    [MODULE_FILE_TYPE]: {
-      label: 'File type',
-      ...MODULE_SOURCE_FILE_TYPES.reduce(
-        (agg, fileType) => ({
-          ...agg,
-          [fileType]: {
-            label: FILE_TYPE_LABELS[fileType],
-            defaultValue: get(filters, `${MODULE_FILE_TYPE}.${fileType}`, true),
-          },
-        }),
-        {},
-      ),
-    },
-  };
-};
-
-const RowHeader = ({ row, filters, search, customComponentLink: CustomComponentLink }) => (
-  <CustomComponentLink
-    section={SECTIONS.MODULES}
-    params={{ [COMPONENT.BUNDLE_MODULES]: { filters, search, entryId: row.key } }}
-    className={css.name}
-  >
-    {row.duplicated && (
-      <Tag className={css.nameTagDuplicated} size="small" kind={Tag.KINDS.DANGER} />
-    )}
-    <FileName className={css.nameText} name={row.label} />
-  </CustomComponentLink>
-);
-
-RowHeader.propTypes = {
-  row: PropTypes.shape({
-    label: PropTypes.string,
-    duplicated: PropTypes.bool,
-  }).isRequired,
-  search: PropTypes.string,
-  filters: PropTypes.object,
-  customComponentLink: PropTypes.elementType.isRequired,
-};
-
-RowHeader.defaultProps = {
-  chunks: [],
-};
-
-export const BundleModules = ({
-  className,
-  jobs,
-  items,
-  chunks,
-  totalRowCount,
-  updateFilters,
-  resetFilters,
-  resetAllFilters,
-  filters,
-  entryId,
-  sort,
-  updateSort,
-  search,
-  updateSearch,
-  hasActiveFilters,
-  customComponentLink: CustomComponentLink,
-  allItems,
-  hideEntryInfo,
-}) => {
-  const rootClassName = cx(css.root, className);
-
-  const jobLabels = jobs?.map((job) => job?.label);
-
-  const dropdownFilters = useMemo(
-    () => getFilters({ filters, chunks, compareMode: jobs.length > 1 }),
-    [jobs, filters, chunks]
-  );
-
-  const metricsTableTitle = useMemo(() => (
-    <MetricsTableTitle
-      title={I18N.MODULES}
-      info={`${items.length}/${totalRowCount}`}
-      popoverInfo={I18N.MODULES_INFO}
-      popoverHref={config.documentation.modules}
-    />
-  ), [items, totalRowCount]);
-
-  const renderRowHeader = useCallback(
-    (row) => (
-      <RowHeader
-        row={row}
-        filters={filters}
-        search={search}
-        customComponentLink={CustomComponentLink}
-      />
-    ),
-    [jobs, chunks, CustomComponentLink, filters, search],
-  );
-
-  const emptyMessage = useMemo(() => (
-    <EmptySet
-      resources="modules"
-      filtered={totalRowCount !== 0}
-      handleResetFilters={resetFilters}
-      handleViewAll={resetAllFilters}
-    />
-  ), [totalRowCount, resetFilters, resetAllFilters]);
-
-  const entryItem = useMemo(() => {
-    if (!entryId) {
-      return null;
-    }
-
-    return allItems.find(({ key }) => key === entryId)
-  }, [allItems, entryId]);
-
-  return (
-    <>
-      <div className={rootClassName}>
-        <Toolbar
-          className={css.toolbar}
-          renderActions={({ actionClassName }) => (
-            <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
-              <MetricsTableOptions
-                handleViewAll={resetAllFilters}
-                handleResetFilters={resetFilters}
-              />
-            </FlexStack>
-          )}
-        >
-          <FlexStack space="xxsmall">
-            <MetricsTableSearch
-              className={css.toolbarSearch}
-              search={search}
-              updateSearch={updateSearch}
-              placeholder="Search by name"
-            />
-            <Filters
-              className={css.tableDropdown}
-              filters={dropdownFilters}
-              onChange={updateFilters}
-              hasActiveFilters={hasActiveFilters}
-            />
-          </FlexStack>
-        </Toolbar>
-
-        <MetricsTable
-          className={css.table}
-          items={items}
-          runs={jobs}
-          renderRowHeader={renderRowHeader}
-          emptyMessage={emptyMessage}
-          showHeaderSum
-          title={metricsTableTitle}
-          sort={sort}
-          updateSort={updateSort}
-        />
-      </div>
-      {entryItem && (
-        <ModuleInfo
-          className={css.moduleInfo}
-          item={entryItem}
-          chunks={chunks}
-          chunkIds={chunks?.map(({ id }) => id)}
-          labels={jobLabels}
-          customComponentLink={CustomComponentLink}
-          onClose={hideEntryInfo}
-        />
-      )}
-    </>
-  );
-};
-
-BundleModules.defaultProps = {
-  className: '',
-  items: [],
-  jobs: [],
-  totalRowCount: 0,
-  hasActiveFilters: false,
-  customComponentLink: ComponentLink,
-};
-
-BundleModules.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-
-  /** Rows data */
-  items: PropTypes.array, // eslint-disable-line react/forbid-prop-types
-
-  /** Jobs data */
-  jobs: PropTypes.array, // eslint-disable-line react/forbid-prop-types
-
-  /** Chunks data */
-  chunks: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      name: PropTypes.string,
-    }),
-  ).isRequired,
-
-  /** total row count */
-  totalRowCount: PropTypes.number,
-
-  /** Update filters handler */
-  updateFilters: PropTypes.func.isRequired,
-
-  /** Reset filters handler */
-  resetFilters: PropTypes.func.isRequired,
-  resetAllFilters: PropTypes.func.isRequired,
-
-  /** Filters data */
-  filters: PropTypes.shape({
-    changed: PropTypes.bool,
-  }).isRequired,
-
-  hasActiveFilters: PropTypes.bool,
-
-  sort: PropTypes.shape({
-    sortBy: PropTypes.string,
-    direction: PropTypes.string,
-  }).isRequired,
-  updateSort: PropTypes.func.isRequired,
-  search: PropTypes.string.isRequired,
-  updateSearch: PropTypes.func.isRequired,
-  customComponentLink: PropTypes.elementType,
-  hideEntryInfo: PropTypes.func.isRequired,
-};

package/src/components/bundle-modules/bundle-modules.utils.js

@@ -1,82 +0,0 @@
-import intersection from 'lodash/intersection';
-import union from 'lodash/union';
-import { MODULE_PATH_PACKAGES } from '@bundle-stats/utils/lib-esm/webpack';
-import {
-  MODULE_CHUNK,
-  MODULE_FILTERS,
-  MODULE_FILE_TYPE,
-  MODULE_SOURCE_TYPE,
-  getModuleSourceFileType,
-} from '@bundle-stats/utils';
-
-export const addRowFlags = (row) => {
-  const { key, runs } = row;
-
-  // @NOTE Assign instead destructuring for perf reasons
-
-  // eslint-disable-next-line no-param-reassign
-  row.thirdParty = Boolean(key.match(MODULE_PATH_PACKAGES));
-  // eslint-disable-next-line no-param-reassign
-  row.duplicated = Boolean(runs.find((run) => run?.duplicated === true));
-  // eslint-disable-next-line no-param-reassign
-  row.fileType = getModuleSourceFileType(row.key);
-
-  return row;
-};
-
-export const getCustomSort = (item) => [!item.changed, item.key];
-
-export const generateGetRowFilter =
-  ({ chunkIds }) =>
-  (filters) => {
-    // eslint-disable-line prettier/prettier
-    // List of chunkIds with filter value set to `true`
-    const checkedChunkIds = [];
-
-    chunkIds.forEach((chunkId) => {
-      if (filters[`${MODULE_CHUNK}.${chunkId}`]) {
-        checkedChunkIds.push(chunkId);
-      }
-    });
-
-    const hasChunkFilters = checkedChunkIds.length !== chunkIds.length;
-
-    return (row) => {
-      // Skip not changed rows
-      if (filters[MODULE_FILTERS.CHANGED] && !row.changed) {
-        return false;
-      }
-
-      // Skip not duplicated rows
-      if (filters[MODULE_FILTERS.DUPLICATED] && !row.duplicated) {
-        return false;
-      }
-
-      // Skip not matching source type
-      if (
-        !(
-          (filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`] &&
-            row.thirdParty === false) ||
-          (filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`] &&
-            row.thirdParty === true)
-        )
-      ) {
-        return false;
-      }
-
-      // Skip not matching source file types
-      if (!filters[`${MODULE_FILE_TYPE}.${row.fileType}`]) {
-        return false;
-      }
-
-      // Filter if any of the chunkIds are checked
-      if (hasChunkFilters) {
-        const rowRunsChunkIds = row?.runs?.map((run) => run?.chunkIds || []) || [];
-        const rowChunkIds = union(...rowRunsChunkIds);
-        const matchedChunkIds = intersection(rowChunkIds, checkedChunkIds);
-        return matchedChunkIds.length > 0;
-      }
-
-      return true;
-    };
-  };