@bundle-stats/ui 3.2.0-beta.1 → 3.2.1-beta.3

package/lib-esm/ui/tooltip/tooltip.js

@@ -1,25 +1,22 @@
-var _excluded = ["className", "title", "children", "as", "containerRef", "darkMode"];
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Tooltip as UITooltip, TooltipArrow as UITooltipArrow, TooltipReference as UITooltipReference, useTooltipState } from 'reakit/Tooltip';
 import css from './tooltip.module.css';
-export var Tooltip = function Tooltip(props) {
-  var className = props.className,
-      title = props.title,
-      children = props.children,
-      Component = props.as,
-      ref = props.containerRef,
-      darkMode = props.darkMode,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var rootClassName = cx(css.root, className);
-  var tooltipProps = useTooltipState({
+export const Tooltip = props => {
+  const {
+    className,
+    title,
+    children,
+    as: Component,
+    containerRef: ref,
+    darkMode,
+    ...restProps
+  } = props;
+  const rootClassName = cx(css.root, className);
+  const tooltipProps = useTooltipState({
     baseId: process.env.NODE_ENV === 'test' && 'id-test',
     placement: 'top'
   });
@@ -27,7 +24,7 @@ export var Tooltip = function Tooltip(props) {
     as: Component,
     className: rootClassName
   }, ref ? {
-    ref: ref
+    ref
   } : {}, restProps, tooltipProps), children), title && /*#__PURE__*/React.createElement(UITooltip, _extends({}, tooltipProps, {
     className: cx(css.tooltip, darkMode && css.tooltipDarkMode)
   }), /*#__PURE__*/React.createElement(UITooltipArrow, _extends({}, tooltipProps, {

package/lib-esm/ui/tooltip/tooltip.stories.js

@@ -2,18 +2,14 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Tooltip } from '.';
-var stories = storiesOf('UI/Tooltip', module);
+const stories = storiesOf('UI/Tooltip', module);
 stories.addDecorator(getWrapperDecorator({
   padding: '64px'
 }));
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    title: "View job #100"
-  }, "Job #100");
-});
-stories.add('darkMode:false', function () {
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    title: "View job #100",
-    darkMode: false
-  }, "Job #100");
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(Tooltip, {
+  title: "View job #100"
+}, "Job #100"));
+stories.add('darkMode:false', () => /*#__PURE__*/React.createElement(Tooltip, {
+  title: "View job #100",
+  darkMode: false
+}, "Job #100"));

package/lib-esm/utils.js

@@ -1,22 +1,15 @@
 import _chunk from "lodash/chunk";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import React from 'react';
 import cx from 'classnames';
 import COLORS from './chart-colors.json';
-export var getColors = function getColors(count) {
+export const getColors = function (count) {
   if (count === void 0) {
     count = 2;
   }
 
-  var chunks = _chunk(COLORS, Math.round(COLORS.length / count));
+  const chunks = _chunk(COLORS, Math.round(COLORS.length / count));
 
-  return chunks.map(function (chunkColors, index) {
+  return chunks.map((chunkColors, index) => {
     if (index === 0) {
       return chunkColors[0];
     }
@@ -28,20 +21,23 @@ export var getColors = function getColors(count) {
     return chunkColors[Math.floor(chunkColors.length / 2)];
   });
 };
-export var getRenderChildWithClassName = function getRenderChildWithClassName(className) {
-  return function (child) {
-    if (child === null || child === '') {
-      return null;
-    }
+export const getRenderChildWithClassName = className => child => {
+  if (child === null || child === '') {
+    return null;
+  }
 
-    if (!(child != null && child.props)) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: className
-      }, child);
-    }
+  const {
+    props
+  } = child;
+
+  if (!props) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: className
+    }, child);
+  }
 
-    return /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
-      className: cx(className, child.props.className)
-    }));
-  };
+  return /*#__PURE__*/React.cloneElement(child, { ...props,
+    className: cx(className, props.className) // eslint-disable-line react/prop-types
+
+  });
 };

package/package.json

@@ -1,15 +1,18 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.2.0-beta.1",
+  "version": "3.2.1-beta.3",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
   "scripts": {
     "build": "npm run build-lib && npm run build-esm",
-    "build-lib": "rm -fr ./lib && babel -D src -d lib --ignore **/__tests__/** --ignore /prototypes/** --presets=@babel/preset-env,@babel/preset-react",
-    "build-esm": "rm -fr ./lib-esm && babel -D src -d lib-esm --ignore **/__tests__/** --ignore /prototypes/**",
+    "prebuild-lib": "rimraf ./lib",
+    "build-lib": "babel -D src -d lib --ignore **/__tests__/**/* --ignore /prototypes/** --presets=@babel/preset-env,@babel/preset-react",
+    "prebuild-esm": "rimraf ./lib-esm",
+    "build-esm": "babel -D src -d lib-esm --ignore **/__tests__/**/* --ignore /prototypes/**",
     "build-storybook": "npx build-storybook -c ./build/storybook",
     "generate-chart-colors": "node scripts/generate-chart-colors.js",
+    "generate-svg-sprite": "npx svg-sprite -s --si src/assets/icons/*.svg && mv symbol/svg/sprite.symbol.svg src/assets/icons.svg",
     "lint": "../../node_modules/.bin/eslint . --ext .jsx,.js",
     "start": "cross-env NODE_ENV=development start-storybook -c ./build/storybook -p 8080",
     "test": "npm run test:unit && npm run test:storyshots",
@@ -33,65 +36,54 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/cli": "7.15.4",
-    "@babel/core": "7.15.5",
-    "@babel/plugin-proposal-class-properties": "7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "7.15.6",
-    "@babel/plugin-proposal-private-methods": "7.14.5",
-    "@babel/preset-env": "7.15.6",
-    "@babel/preset-react": "7.14.5",
+    "@babel/cli": "7.16.0",
+    "@babel/core": "7.16.0",
+    "@babel/preset-env": "7.16.4",
+    "@babel/preset-react": "7.16.0",
     "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
     "@storybook/addon-knobs": "6.3.1",
-    "@storybook/addon-storyshots": "6.2.9",
-    "@storybook/addons": "6.2.9",
-    "@storybook/react": "6.2.9",
+    "@storybook/addon-storyshots": "6.3.12",
+    "@storybook/addons": "6.3.12",
+    "@storybook/react": "6.3.12",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "26.6.3",
-    "babel-loader": "8.2.2",
+    "babel-jest": "27.3.1",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "5.9.2",
+    "chromatic": "6.0.6",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
-    "core-js": "3.15.2",
+    "core-js": "3.19.1",
     "cross-env": "7.0.3",
-    "css-loader": "5.2.6",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
     "hex-rgb": "5.0.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "26.6.3",
+    "jest": "27.3.1",
     "jest-date-mock": "1.0.8",
     "lodash": "4.17.21",
-    "markdown-loader-jest": "0.1.1",
     "prop-types": "15.7.2",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-router-dom": "5.3.0",
     "react-test-renderer": "16.14.0",
-    "recompose": "0.30.0",
-    "stats-webpack-plugin": "0.7.0",
-    "style-loader": "2.0.0",
-    "webpack": "4.46.0",
-    "webpack-cli": "4.8.0"
+    "rimraf": "3.0.2"
   },
   "peerDependencies": {
     "classnames": "^2.2.6",
-    "core-js": "^3.9.1",
-    "lodash": "^4.17.11",
+    "core-js": "^3.16.2",
+    "lodash": "^4.17.21",
     "prop-types": "^15.7.2",
-    "react": "^16.8.5",
-    "react-dom": "^16.8.5",
-    "react-router-dom": "^5.2.0",
-    "recompose": "^0.30.0"
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-router-dom": "^5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.2.0-beta.1",
+    "@bundle-stats/utils": "^3.2.1-beta.3",
     "date-fns": "^2.6.0",
     "query-string": "^7.0.0",
     "reakit": "^1.3.6",
     "use-query-params": "^1.2.2"
   },
-  "gitHead": "c62576ef368adeddbc6a862005d5ccd99bac9be0"
+  "gitHead": "dc8af1ca0a607ef6443ceaa9311b2c0ae1e0037b"
 }

package/src/assets/icons/arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg>

package/src/assets/icons/cancel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>

package/src/assets/icons/clock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>

package/src/assets/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>

package/src/assets/icons/commit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-commit"><circle cx="12" cy="12" r="4"></circle><line x1="1.05" y1="12" x2="7" y2="12"></line><line x1="17.01" y1="12" x2="22.96" y2="12"></line></svg>

package/src/assets/icons/filter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart" transform="rotate(-90deg)"><line x1="12" y1="20" x2="12" y2="10"></line><line x1="18" y1="20" x2="18" y2="4"></line><line x1="6" y1="20" x2="6" y2="16"></line></svg>

package/src/assets/icons/help.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>

package/src/assets/icons/menu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>

package/src/assets/icons/warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>

package/src/assets/icons.svg

@@ -0,0 +1 @@
+<svg width="16" height="16"><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="afeather afeather-arrow-down" id="arrow" xmlns="http://www.w3.org/2000/svg"><path d="M12 5v14M19 12l-7 7-7-7"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bfeather bfeather-x-circle" id="cancel" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cfeather cfeather-clock" id="clock" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="dfeather dfeather-x" id="close" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="efeather efeather-git-commit" id="commit" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="4"/><path d="M1.05 12H7M17.01 12h5.95"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ffeather ffeather-bar-chart" id="filter" xmlns="http://www.w3.org/2000/svg"><path d="M12 20V10M18 20V4M6 20v-4"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="gfeather gfeather-help-circle" id="help" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="hfeather hfeather-menu" id="menu" xmlns="http://www.w3.org/2000/svg"><path d="M3 12h18M3 6h18M3 18h18"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="sort" xmlns="http://www.w3.org/2000/svg"><path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="jfeather jfeather-alert-triangle" id="warning" xmlns="http://www.w3.org/2000/svg"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4M12 17h.01"/></symbol></svg>

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

@@ -124,7 +124,7 @@ export const BundleAssets = (props) => {
     totalRowCount,
     filters,
     hasActiveFilters,
-    sortItems,
+    sortFields,
     sort,
     updateSort,
     search,
@@ -154,7 +154,7 @@ export const BundleAssets = (props) => {
         className={css.toolbar}
         renderActions={({ actionClassName }) => (
           <FlexStack space="xsmall" className={cx(css.dropdown, actionClassName)}>
-            <SortDropdown items={sortItems} {...sort} onChange={updateSort} />
+            <SortDropdown fields={sortFields} {...sort} onChange={updateSort} />
             <MetricsTableOptions
               handleViewAll={resetAllFilters}
               handleResetFilters={resetFilters}
@@ -267,7 +267,7 @@ BundleAssets.propTypes = {
     changed: PropTypes.bool,
   }).isRequired,
   hasActiveFilters: PropTypes.bool,
-  sortItems: PropTypes.shape({
+  sortFields: PropTypes.shape({
     [PropTypes.string]: PropTypes.shape({
       label: PropTypes.string,
       defaultDirection: PropTypes.bool,

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

@@ -1,17 +1,96 @@
-/**
- * Get a list of all chunkIds across assets and runs
- *
- * @param {Array<Object>} items
- * @return {Array<string|number>}
- */
-export const getAllChunkIds = (items) =>
-  items.reduce((agg, item) => {
-    const itemChunkIds = item.runs.map((run) => run?.chunkId).filter((chunkId) => typeof(chunkId) !== 'undefined');
-
-    return itemChunkIds.reduce((itemAgg, chunkId) => {
-      if (itemAgg.includes(chunkId)) {
-        return itemAgg;
-      }
-      return [...itemAgg, chunkId];
-    }, agg);
-  }, []);
+import { get } from 'lodash';
+import { ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, getFileType } from '@bundle-stats/utils';
+
+import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-assets.constants';
+
+export const addRowAssetFlags = (row) => {
+  const { runs } = row;
+
+  const isEntry = runs.map((run) => run?.isEntry).includes(true);
+  const isInitial = runs.map((run) => run?.isInitial).includes(true);
+  const isChunk = runs.map((run) => run?.isChunk).includes(true);
+
+  const isAsset = !(isEntry || isInitial || isChunk);
+
+  return {
+    ...row,
+    isEntry,
+    isInitial,
+    isChunk,
+    isAsset,
+  };
+};
+
+export const getIsNotPredictive = (key, runs) =>
+  runs.reduce((agg, current, index) => {
+    if (agg) {
+      return agg;
+    }
+
+    if (index + 1 === runs.length) {
+      return agg;
+    }
+
+    if (
+      current &&
+      runs[index + 1] &&
+      current.delta !== 0 &&
+      key !== current.name &&
+      current.name === runs[index + 1].name
+    ) {
+      return true;
+    }
+
+    return agg;
+  }, false);
+
+export const addRowIsNotPredictive = (row) => ({
+  ...row,
+  isNotPredictive: getIsNotPredictive(row.key, row.runs),
+});
+
+export const getRowFilter = (filters) => (item) => {
+  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.ASSET}`] && item.isAsset)
+    )
+  ) {
+    return false;
+  }
+
+  if (!filters[`${ASSET_FILE_TYPE}.${getFileType(item.key)}`]) {
+    return false;
+  }
+
+  return true;
+};
+
+export const getCustomSort = (sortId) => (item) => {
+  if (sortId === SORT_BY_NAME) {
+    return item.key;
+  }
+
+  if (sortId === SORT_BY_DELTA) {
+    return get(item, 'runs[0].deltaPercentage', 0);
+  }
+
+  if (sortId === SORT_BY_SIZE) {
+    return get(item, 'runs[0].value', 0);
+  }
+
+  return [
+    !item.isNotPredictive,
+    !item.changed,
+    !item.isInitial,
+    !item.isEntry,
+    !item.isChunk,
+    item.key,
+  ];
+};

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

@@ -0,0 +1,89 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
+import { ASSET_FILTERS } from '@bundle-stats/utils';
+import {
+  getAssetEntryTypeFilters,
+  getAssetFileTypeFilters,
+} from '@bundle-stats/utils/lib-esm/utils/component-links';
+
+import { useRowsFilter } from '../../hooks/rows-filter';
+import { useRowsSort } from '../../hooks/rows-sort';
+import { useSearchParams } from '../../hooks/search-params';
+import { BundleAssets as BundleAssetsComponent } from './bundle-assets';
+import { addRowAssetFlags, addRowIsNotPredictive, getRowFilter, getCustomSort } from './bundle-assets.utils';
+import { SORT_BY } from './bundle-assets.constants';
+
+export const BundleAssets = (props) => {
+  const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
+
+  const { defaultFilters, allEntriesFilters } = useMemo(
+    () => ({
+      defaultFilters: {
+        [ASSET_FILTERS.CHANGED]: jobs?.length > 1,
+        ...getAssetEntryTypeFilters(true),
+        ...getAssetFileTypeFilters(true),
+      },
+      allEntriesFilters: {
+        [ASSET_FILTERS.CHANGED]: false,
+        ...getAssetEntryTypeFilters(true),
+        ...getAssetFileTypeFilters(true),
+      },
+    }),
+    [jobs],
+  );
+
+  const searchParams = useSearchParams({
+    search,
+    filters,
+    defaultFilters,
+    allEntriesFilters,
+    setState,
+  });
+
+  const { rows, totalRowCount } = useMemo(() => {
+    const result = webpack.compareBySection.assets(jobs, [addRowAssetFlags, addRowIsNotPredictive]);
+    return { rows: result, totalRowCount: result.length };
+  }, [jobs]);
+
+  const filteredRows = useRowsFilter({
+    rows,
+    searchPattern: searchParams.searchPattern,
+    filters: searchParams.filters,
+    getRowFilter,
+  });
+
+  const sortParams = useRowsSort({
+    rows: filteredRows,
+    sortFields: SORT_BY,
+    sortBy,
+    sortDirection: direction,
+    getCustomSort,
+  });
+
+  return (
+    <BundleAssetsComponent
+      jobs={jobs}
+      {...restProps}
+      {...searchParams}
+      {...sortParams}
+      totalRowCount={totalRowCount}
+    />
+  );
+};
+
+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/bundle-modules/bundle-modules.jsx

@@ -90,7 +90,7 @@ export const BundleModules = ({
   resetFilters,
   resetAllFilters,
   filters,
-  sortItems,
+  sortFields,
   sort,
   updateSort,
   search,
@@ -173,7 +173,7 @@ export const BundleModules = ({
           <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
             <SortDropdown
               className={css.tableDropdown}
-              items={sortItems}
+              fields={sortFields}
               onChange={updateSort}
               {...sort}
             />
@@ -262,7 +262,7 @@ BundleModules.propTypes = {
 
   hasActiveFilters: PropTypes.bool,
 
-  sortItems: PropTypes.shape({
+  sortFields: PropTypes.shape({
     [PropTypes.string]: PropTypes.shape({
       label: PropTypes.string,
       defaultDirection: PropTypes.bool,

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

@@ -0,0 +1,101 @@
+import { useMemo } from 'react';
+import { get, intersection, merge } from 'lodash';
+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';
+
+import { SORT_BY_NAME, SORT_BY_SIZE, SORT_BY_DELTA } from './bundle-modules.constants';
+
+export const addRowSourceFlag = (row) => {
+  const { key } = row;
+  const thirdParty = Boolean(key.match(MODULE_PATH_PACKAGES));
+  return { ...row, thirdParty };
+};
+
+export const getCustomSort = (sortBy) => (item) => {
+  if (sortBy === SORT_BY_NAME) {
+    return item.key;
+  }
+
+  if (sortBy === SORT_BY_SIZE) {
+    return get(item, 'runs[0].value', 0);
+  }
+
+  if (sortBy === SORT_BY_DELTA) {
+    return get(item, 'runs[0].deltaPercentage', 0);
+  }
+
+  return [!item.changed, item.key];
+};
+
+export const getRowFilter = (filters) => (row) => {
+  // Skip not changed rows
+  if (filters[MODULE_FILTERS.CHANGED] && !row.changed) {
+    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
+  const fileType = getModuleSourceFileType(row.key);
+  if (!filters[`${MODULE_FILE_TYPE}.${fileType}`]) {
+    return false;
+  }
+
+  return true;
+};
+
+export const useModuleFilterByChunk = ({ jobs, filters, chunkIds }) => {
+  const filteredJobs = useMemo(() => {
+    // List of chunkIds with filter value set to `true`
+    const includedChunkIds = chunkIds.reduce((agg, chunkId) => {
+      if (get(filters, `${MODULE_CHUNK}.${chunkId}`)) {
+        return [...agg, chunkId];
+      }
+
+      return agg;
+    }, []);
+
+    // If all the filters are included, return jobs as they are
+    if (includedChunkIds.length === chunkIds.length) {
+      return jobs;
+    }
+
+    const jobsWithFilteredData = jobs.map((job) => {
+      const { modules } = job?.metrics?.webpack || {};
+
+      const filteredModules = Object.entries(modules).reduce((agg, [moduleId, moduleEntry]) => {
+        const match = intersection(moduleEntry.chunkIds, includedChunkIds);
+
+        if (match.length > 0) {
+          agg[moduleId] = moduleEntry; // eslint-disable-line no-param-reassign
+        }
+
+        return agg;
+      }, {});
+
+      // Copy job data into a new object to prevent mutations of the original data
+      const newJob = merge({}, job);
+      newJob.metrics.webpack.modules = filteredModules;
+
+      return newJob;
+    });
+
+    return jobsWithFilteredData;
+  }, [jobs, filters, chunkIds]);
+
+  return filteredJobs;
+};