@bundle-stats/ui 4.17.0 → 4.18.0-beta.0

package/src/components/bundle-assets/bundle-assets.utils.ts

@@ -0,0 +1,260 @@
+import get from 'lodash/get';
+import intersection from 'lodash/intersection';
+import isEmpty from 'lodash/isEmpty';
+import orderBy from 'lodash/orderBy';
+import type { ReportMetricRow, WebpackChunk } from '@bundle-stats/utils';
+import type { AssetMetricRun } from '@bundle-stats/utils/types/webpack';
+import {
+  ASSET_CHUNK,
+  ASSET_ENTRY_TYPE,
+  ASSET_FILE_TYPE,
+  ASSET_FILTERS,
+  FILE_TYPE_LABELS,
+  getFileType,
+} from '@bundle-stats/utils';
+import type {
+  FilterFieldsData,
+  ReportMetricAssetRow,
+  ReportMetricAssetRowMetaStatus,
+  FilterGroupFieldData,
+} from '../../types';
+
+/**
+ * Check if the asset cache is not predictive
+ */
+export const getIsNotPredictive = (row: ReportMetricRow): boolean => {
+  const { key, runs } = row;
+
+  return runs.reduce((agg, run, index) => {
+    if (agg) {
+      return agg;
+    }
+
+    if (index + 1 === runs.length) {
+      return agg;
+    }
+
+    const preRun = runs[index + 1];
+
+    if (
+      run &&
+      preRun &&
+      key !== run.name &&
+      run.name === preRun.name &&
+      run.value !== preRun.value
+    ) {
+      return true;
+    }
+
+    return agg;
+  }, false);
+};
+
+/**
+ * Return asset meta status
+ */
+export const getAssetMetaStatus = (
+  values: Array<boolean | undefined>,
+): ReportMetricAssetRowMetaStatus | boolean => {
+  if (!values.includes(true)) {
+    return false;
+  }
+
+  // filter empty runs
+  const metaValues = values.filter((value) => typeof value !== 'undefined');
+
+  const current = metaValues[0];
+  const metaValuesLength = metaValues.length;
+
+  if (metaValuesLength === 1) {
+    return Boolean(current);
+  }
+
+  const baseline = metaValues[metaValuesLength - 1];
+
+  if (current && !baseline) {
+    return 'added';
+  }
+
+  if (!current && baseline) {
+    return 'removed';
+  }
+
+  return true;
+};
+
+/**
+ * Add asset row flags
+ */
+export const addMetricReportAssetRowData = (row: ReportMetricRow): ReportMetricAssetRow => {
+  const { changed, runs } = row;
+
+  // Collect meta for each run
+  const runsEntry: Array<boolean | undefined> = [];
+  const runsInitial: Array<boolean | undefined> = [];
+  const runsChunk: Array<boolean | undefined> = [];
+
+  (runs as Array<AssetMetricRun | null>).forEach((run) => {
+    runsEntry.push(run?.isEntry);
+    runsInitial.push(run?.isInitial);
+    runsChunk.push(run?.isChunk);
+  });
+
+  const isEntry = getAssetMetaStatus(runsEntry);
+  const isInitial = getAssetMetaStatus(runsInitial);
+  const isChunk = getAssetMetaStatus(runsChunk);
+  const isAsset = !(isEntry || isInitial || isChunk);
+  const isNotPredictive = getIsNotPredictive(row);
+  const fileType = getFileType(row.key);
+
+  // Flag asset as changed if name and value are identical, if one of the meta tags is changed
+  const assetChanged =
+    changed ||
+    typeof isEntry !== 'boolean' ||
+    typeof isInitial !== 'boolean' ||
+    typeof isChunk !== 'boolean';
+
+  return {
+    ...row,
+    changed: assetChanged,
+    isEntry,
+    isInitial,
+    isChunk,
+    isAsset,
+    isNotPredictive,
+    fileType,
+  };
+};
+
+type GenerateGetRowFilterOptions = {
+  chunkIds: Array<string>;
+};
+
+export const getCustomSort = (item: ReportMetricAssetRow): Array<boolean | string> => [
+  !item.isNotPredictive,
+  !item.changed,
+  !item.isInitial,
+  !item.isEntry,
+  !item.isChunk,
+  item.key,
+];
+
+const getFileTypeFilters = (filters: Record<string, unknown>): FilterGroupFieldData['children'] =>
+  Object.entries(FILE_TYPE_LABELS).map(([key, label]) => ({
+  key,
+  label,
+  defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true) as boolean,
+}));
+
+type GetFiltersOptions = {
+  compareMode: boolean;
+  filters: Record<string, boolean>;
+  chunks: Array<WebpackChunk>;
+};
+
+export const getFilters = ({
+  compareMode,
+  filters,
+  chunks,
+}: GetFiltersOptions): FilterFieldsData => {
+  const result: FilterFieldsData = {
+    [ASSET_FILTERS.CHANGED]: {
+      label: 'Changed',
+      defaultValue: filters[ASSET_FILTERS.CHANGED],
+      disabled: !compareMode,
+    },
+  };
+
+  if (!isEmpty(chunks)) {
+    const chunksFilter: FilterGroupFieldData = { label: 'Chunks', children: [] };
+    const chunksOrderedByName = orderBy(chunks, 'name');
+
+    chunksOrderedByName.forEach((chunk) => {
+      chunksFilter.children.push({
+        key: chunk.id,
+        label: chunk.name,
+        defaultValue: filters[`${ASSET_CHUNK}.${chunk.id}`] ?? true,
+      });
+    });
+
+    result[ASSET_CHUNK] = chunksFilter;
+  }
+
+  result[ASSET_ENTRY_TYPE] = {
+    label: 'Type',
+    children: [
+      {
+        key: ASSET_FILTERS.ENTRY,
+        label: 'Entry',
+        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`, true),
+      },
+      {
+        key: ASSET_FILTERS.INITIAL,
+        label: 'Initial',
+        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`, true),
+      },
+      {
+        key: ASSET_FILTERS.CHUNK,
+        label: 'Chunk',
+        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`, true),
+      },
+      {
+        key: ASSET_FILTERS.OTHER,
+        label: 'Other',
+        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.OTHER}`, true),
+      },
+    ],
+  };
+
+  result[ASSET_FILE_TYPE] = {
+    label: 'File type',
+    children: getFileTypeFilters(filters),
+  };
+
+  return result;
+};
+
+/* eslint-disable prettier/prettier */
+export const generateGetRowFilter =
+  ({ chunkIds }: GenerateGetRowFilterOptions) => (filters: Record<string, unknown>) => {
+    // List of chunkIds with filter value set to `true`
+    const checkedChunkIds: Array<string> = [];
+
+    chunkIds.forEach((chunkId) => {
+      if (filters[`${ASSET_CHUNK}.${chunkId}`]) {
+        checkedChunkIds.push(chunkId);
+      }
+    });
+
+    const hasChunkFilters =
+      checkedChunkIds.length > 0 && checkedChunkIds.length !== chunkIds.length;
+
+    return (item: ReportMetricAssetRow) => {
+      if (filters[ASSET_FILTERS.CHANGED] && !item.changed) {
+        return false;
+      }
+
+      if (
+        !(
+          (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`] && item.isEntry) ||
+          (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`] && item.isInitial) ||
+          (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`] && item.isChunk) ||
+          (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.OTHER}`] && item.isAsset)
+        )
+      ) {
+        return false;
+      }
+
+      if (!filters[`${ASSET_FILE_TYPE}.${item.fileType}`]) {
+        return false;
+      }
+
+      // Filter if any of the chunkIds are checked
+      if (hasChunkFilters) {
+        const rowRunsChunkIds = item?.runs?.map((run) => run?.chunkId) || [];
+        return intersection(rowRunsChunkIds, checkedChunkIds).length > 0;
+      }
+
+      return true;
+    };
+  };

package/src/components/bundle-assets/{index.jsx → index.tsx}

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
+import type { Job } from '@bundle-stats/utils';
 import { ASSET_FILTERS } from '@bundle-stats/utils';
 import {
   getAssetEntryTypeFilters,
@@ -13,13 +13,37 @@ import { useSearchParams } from '../../hooks/search-params';
 import { useEntryInfo } from '../../hooks/entry-info';
 import { getJobsChunksData } from '../../utils/jobs';
 import { BundleAssets as BundleAssetsComponent } from './bundle-assets';
-import { addMetricReportAssetRowData, getRowFilter, getCustomSort } from './bundle-assets.utils';
+import {
+  addMetricReportAssetRowData,
+  generateGetRowFilter,
+  getCustomSort,
+} from './bundle-assets.utils';
+import { ReportMetricAssetRow } from '../../types';
 
-export const BundleAssets = (props) => {
-  const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
+export type BundleAssetsProps = {
+  jobs: Array<Job>;
+  filters?: Record<string, boolean>;
+  search?: string;
+  sortBy?: string;
+  direction?: string;
+  setState: () => void;
+};
 
-  const { chunks } = useMemo(() => getJobsChunksData(jobs), [jobs]);
+export const BundleAssets = (props: BundleAssetsProps) => {
+  const {
+    jobs,
+    filters = undefined,
+    search = undefined,
+    sortBy = undefined,
+    direction = undefined,
+    setState,
+    ...restProps
+  } = props;
 
+  // Get chunks data
+  const { chunks, chunkIds } = useMemo(() => getJobsChunksData(jobs), [jobs]);
+
+  // Get filters
   const { defaultFilters, allEntriesFilters } = useMemo(
     () => ({
       defaultFilters: {
@@ -36,7 +60,8 @@ export const BundleAssets = (props) => {
     [jobs],
   );
 
-  const searchParams = useSearchParams({
+  // Get search params data
+  const searchProps = useSearchParams({
     search,
     filters,
     defaultFilters,
@@ -44,19 +69,22 @@ export const BundleAssets = (props) => {
     setState,
   });
 
+  // Get metric rows
   const { rows, totalRowCount } = useMemo(() => {
     const result = webpack.compareBySection.assets(jobs, [addMetricReportAssetRowData]);
     return { rows: result, totalRowCount: result.length };
   }, [jobs]);
 
+  // Filter rows
   const filteredRows = useRowsFilter({
     rows,
-    searchPattern: searchParams.searchPattern,
-    filters: searchParams.filters,
-    getRowFilter,
+    searchPattern: searchProps.searchPattern,
+    filters: searchProps.filters,
+    getRowFilter: generateGetRowFilter({ chunkIds }),
   });
 
-  const sortParams = useRowsSort({
+  // Sort rows
+  const sortProps = useRowsSort<ReportMetricAssetRow>({
     rows: filteredRows,
     initialField: sortBy,
     initialDirection: direction,
@@ -68,31 +96,17 @@ export const BundleAssets = (props) => {
 
   return (
     <BundleAssetsComponent
+      {...restProps}
+      {...searchProps}
       jobs={jobs}
       chunks={chunks}
-      {...restProps}
-      {...searchParams}
-      {...sortParams}
+      sort={sortProps.sort}
+      items={sortProps.items}
       allItems={rows}
       totalRowCount={totalRowCount}
+      updateSort={sortProps.updateSort}
       hideEntryInfo={hideEntryInfo}
       showEntryInfo={showEntryInfo}
     />
   );
 };
-
-BundleAssets.propTypes = {
-  jobs: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
-  filters: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  search: PropTypes.string,
-  sortBy: PropTypes.string,
-  direction: PropTypes.string,
-  setState: PropTypes.func.isRequired,
-};
-
-BundleAssets.defaultProps = {
-  filters: undefined,
-  search: undefined,
-  sortBy: undefined,
-  direction: undefined,
-};

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

@@ -9,7 +9,7 @@ import { Table } from '../../ui/table';
 import { Stack } from '../../layout/stack';
 import { Metric } from '../metric';
 import { Delta } from '../delta';
-import { MetricsTableHeader } from '../metrics-table-header';
+import { MetricsTableHeader, MetricsTableHeaderProps } from '../metrics-table-header';
 import * as I18N from './metrics-table.i18n';
 import css from './metrics-table.module.css';
 
@@ -74,8 +74,8 @@ interface MetricsTableProps extends Omit<React.ComponentProps<typeof Table>, 'ti
   items: Array<ReportMetricRow>;
   title?: React.ReactNode;
   showHeaderSum?: boolean;
-  sort?: any;
-  updateSort?: (val: any) => void;
+  sort?: MetricsTableHeaderProps['sort'];
+  updateSort?: MetricsTableHeaderProps['updateSort'];
   renderRowHeader?: (item: ReportMetricRow) => React.ReactNode;
   emptyMessage?: React.ReactNode;
   showAllItems: boolean;

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

@@ -12,7 +12,7 @@ import { Table } from '../../ui/table';
 import { Delta } from '../delta';
 import { JobName } from '../job-name';
 import { Metric } from '../metric';
-import { SortButton } from '../sort-button';
+import { SortButton, SortButtonProps } from '../sort-button';
 import * as I18N from './metrics-table-header.i18n';
 import css from './metrics-table-header.module.css';
 
@@ -53,8 +53,8 @@ interface ColumnSumProps {
   rows: Array<ReportMetricRow>;
   isBaseline: boolean;
   runIndex: number;
-  sort?: any;
-  updateSort?: (val: any) => void;
+  sort?: SortButtonProps['sort'];
+  updateSort?: SortButtonProps['updateSort'];
 }
 
 const SumColumn = ({ rows, isBaseline, runIndex, updateSort, sort }: ColumnSumProps) => {
@@ -110,7 +110,7 @@ const SumColumn = ({ rows, isBaseline, runIndex, updateSort, sort }: ColumnSumPr
   );
 };
 
-interface MetricsTableHeaderProps {
+export interface MetricsTableHeaderProps {
   /**
    * Metric column title
    */

package/src/components/sort-button/sort-button.tsx

@@ -36,7 +36,7 @@ const getDescAction = (label: string): SortInfo => {
   return { direction: SORT.DESC, title: `Order ${label} descending` };
 };
 
-interface SortButtonProps {
+export interface SortButtonProps {
   fieldPath: string;
   fieldName: string;
   label: string;

package/src/hooks/rows-sort.ts

@@ -5,6 +5,21 @@ import orderBy from 'lodash/orderBy';
 import type { SortAction } from '../types';
 import { SORT } from '../constants';
 
+/**
+ * Get sort direction field from a string param
+ */
+const getSortDirection = (directionParam: string | undefined): SortAction['direction'] => {
+  if (typeof directionParam === 'undefined') {
+    return '';
+  }
+
+  if (['asc', 'desc'].includes(directionParam)) {
+    return directionParam as SortAction['direction'];
+  }
+
+  return '';
+};
+
 export const getSortFn =
   <TRow>(fieldPath: string, getCustomSort: UseRowsSortParams<TRow>['getCustomSort']) =>
   (item: TRow) => {
@@ -18,7 +33,7 @@ export const getSortFn =
 interface UseRowsSortParams<TRow> {
   rows: Array<TRow>;
   initialField?: string;
-  initialDirection?: SortAction['direction'];
+  initialDirection?: string;
   getCustomSort: (item: any) => Array<string | number | boolean>;
   setQueryState: (queryParams: {
     sortBy: SortAction['field'];
@@ -35,11 +50,14 @@ interface UseRowsSort<TRow> {
 export const useRowsSort = <TRow>({
   rows,
   initialField = 'runs[0].delta',
-  initialDirection = 'desc',
+  initialDirection,
   getCustomSort,
   setQueryState,
 }: UseRowsSortParams<TRow>): UseRowsSort<TRow> => {
-  const [sort, setSort] = useState({ field: initialField, direction: initialDirection });
+  const [sort, setSort] = useState({
+    field: initialField,
+    direction: getSortDirection(initialDirection),
+  });
 
   const updateSort = useCallback(
     (newState: SortAction) => {

package/src/hooks/search-params.js

@@ -102,7 +102,6 @@ export const generateState = (filters, search) => ({
 
 export const useSearchParams = ({
   search: parentSearch = SEARCH_DEFAULT,
-
   filters: parentFilters,
   defaultFilters,
   allEntriesFilters,

package/src/types.d.ts

@@ -12,9 +12,13 @@ interface FilterFieldData {
   disabled?: boolean;
 }
 
+interface ChildFilterFieldData extends FilterFieldData {
+  key: string;
+}
+
 type FilterGroupFieldData = {
   label: string;
-  children: Array<{ key: string } & FilterFieldData>;
+  children: Array<ChildFilterFieldData>;
 };
 
 type FilterFieldsData = Record<string, FilterFieldData | FilterGroupFieldData>;

package/types/components/asset-info/asset-info.d.ts

@@ -1,19 +1,10 @@
 import type { ComponentProps, ElementType } from 'react';
 import React from 'react';
-import { MetricRunInfo } from '@bundle-stats/utils';
-import type { AssetMetricRun, MetaChunk } from '@bundle-stats/utils/types/webpack';
+import type { WebpackChunk } from '@bundle-stats/utils';
+import type { ReportMetricAssetRow } from '../../types';
 interface AssetInfoProps {
-    item: {
-        label: string;
-        changed?: boolean;
-        isChunk?: boolean;
-        isEntry?: boolean;
-        isInitial?: boolean;
-        isNotPredictive?: boolean;
-        fileType?: string;
-        runs: Array<AssetMetricRun & MetricRunInfo>;
-    };
-    chunks?: Array<MetaChunk>;
+    item: ReportMetricAssetRow;
+    chunks?: Array<WebpackChunk>;
     labels: Array<string>;
     customComponentLink?: ElementType;
     onClose: () => void;

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

@@ -1,56 +1,25 @@
-export function BundleAssets(props: any): React.JSX.Element;
-export namespace BundleAssets {
-    namespace defaultProps {
-        export let className: string;
-        export let totalRowCount: number;
-        export let hasActiveFilters: boolean;
-        export { ComponentLink as customComponentLink };
-        export let entryId: string;
-    }
-    namespace propTypes {
-        let className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        export let jobs: PropTypes.Validator<(PropTypes.InferProps<{
-            internalBuildNumber: PropTypes.Requireable<number>;
-            label: PropTypes.Requireable<string>;
-        }> | null | undefined)[]>;
-        export let chunks: PropTypes.Validator<any[]>;
-        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)[]>;
-        export let updateFilters: PropTypes.Validator<(...args: any[]) => any>;
-        export let resetFilters: PropTypes.Validator<(...args: any[]) => any>;
-        export let resetAllFilters: PropTypes.Validator<(...args: any[]) => any>;
-        let totalRowCount_1: PropTypes.Requireable<number>;
-        export { totalRowCount_1 as totalRowCount };
-        export let filters: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
-            changed: PropTypes.Requireable<boolean>;
-            id: PropTypes.Requireable<string>;
-        }>>>;
-        let entryId_1: PropTypes.Requireable<string>;
-        export { entryId_1 as entryId };
-        let hasActiveFilters_1: PropTypes.Requireable<boolean>;
-        export { hasActiveFilters_1 as hasActiveFilters };
-        export let search: PropTypes.Validator<string>;
-        export let updateSearch: PropTypes.Validator<(...args: any[]) => any>;
-        export let sort: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
-            field: PropTypes.Requireable<string>;
-            direction: PropTypes.Requireable<string>;
-        }>>>;
-        export let updateSort: PropTypes.Validator<(...args: any[]) => any>;
-        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 type { ElementType } from 'react';
+import React, { ComponentProps } from 'react';
+import type { Job, WebpackChunk } from '@bundle-stats/utils';
+import type { ReportMetricAssetRow, SortAction } from '../../types';
+import { Stack } from '../../layout/stack';
+export interface BundleAssetsProps extends ComponentProps<typeof Stack> {
+    jobs: Array<Job>;
+    chunks: Array<WebpackChunk>;
+    items: Array<ReportMetricAssetRow>;
+    allItems: Array<ReportMetricAssetRow>;
+    filters: Record<string, boolean>;
+    updateFilters: (newFilters: Record<string, boolean>) => void;
+    resetFilters: () => void;
+    resetAllFilters: () => void;
+    totalRowCount?: number;
+    entryId?: string;
+    sort: SortAction;
+    updateSort: (params: SortAction) => void;
+    search: string;
+    updateSearch: (search: string) => void;
+    customComponentLink?: ElementType;
+    hideEntryInfo: () => void;
+    showEntryInfo: (entryId: string) => void;
 }
-import React from 'react';
-import { ComponentLink } from '../component-link';
-import PropTypes from 'prop-types';
+export declare const BundleAssets: (props: BundleAssetsProps) => React.JSX.Element;

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

@@ -1,5 +1,17 @@
-export function getIsNotPredictive(row: ReportMetricRow): boolean;
-export function getAssetMetaStatus(values: any): ReportMetricAssetRowFlagStatus | boolean;
-export function addMetricReportAssetRowData(row: ReportMetricRow): ReportMetricAssetRow;
-export function getRowFilter(filters: any): (item: any) => boolean;
-export function getCustomSort(item: any): any[];
+import type { ReportMetricRow, WebpackChunk } from '@bundle-stats/utils';
+import type { FilterFieldsData, ReportMetricAssetRow, ReportMetricAssetRowMetaStatus } from '../../types';
+export declare const getIsNotPredictive: (row: ReportMetricRow) => boolean;
+export declare const getAssetMetaStatus: (values: Array<boolean | undefined>) => ReportMetricAssetRowMetaStatus | boolean;
+export declare const addMetricReportAssetRowData: (row: ReportMetricRow) => ReportMetricAssetRow;
+type GenerateGetRowFilterOptions = {
+    chunkIds: Array<string>;
+};
+export declare const getCustomSort: (item: ReportMetricAssetRow) => Array<boolean | string>;
+type GetFiltersOptions = {
+    compareMode: boolean;
+    filters: Record<string, boolean>;
+    chunks: Array<WebpackChunk>;
+};
+export declare const getFilters: ({ compareMode, filters, chunks, }: GetFiltersOptions) => FilterFieldsData;
+export declare const generateGetRowFilter: ({ chunkIds }: GenerateGetRowFilterOptions) => (filters: Record<string, unknown>) => (item: ReportMetricAssetRow) => boolean;
+export {};

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

@@ -1,23 +1,11 @@
-export function BundleAssets(props: any): React.JSX.Element;
-export namespace BundleAssets {
-    namespace propTypes {
-        let jobs: PropTypes.Validator<(object | null | undefined)[]>;
-        let filters: PropTypes.Requireable<object>;
-        let search: PropTypes.Requireable<string>;
-        let sortBy: PropTypes.Requireable<string>;
-        let direction: PropTypes.Requireable<string>;
-        let setState: PropTypes.Validator<(...args: any[]) => any>;
-    }
-    namespace defaultProps {
-        let filters_1: undefined;
-        export { filters_1 as filters };
-        let search_1: undefined;
-        export { search_1 as search };
-        let sortBy_1: undefined;
-        export { sortBy_1 as sortBy };
-        let direction_1: undefined;
-        export { direction_1 as direction };
-    }
-}
 import React from 'react';
-import PropTypes from 'prop-types';
+import type { Job } from '@bundle-stats/utils';
+export type BundleAssetsProps = {
+    jobs: Array<Job>;
+    filters?: Record<string, boolean>;
+    search?: string;
+    sortBy?: string;
+    direction?: string;
+    setState: () => void;
+};
+export declare const BundleAssets: (props: BundleAssetsProps) => React.JSX.Element;