@bundle-stats/ui 3.1.4-alpha.0 → 3.2.1-alpha.0

package/lib-esm/components/bundle-assets/index.js

@@ -1,3 +1,90 @@
-import { enhance } from './bundle-assets.container';
+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); }
+
+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';
-export var BundleAssets = enhance(BundleAssetsComponent);
+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 == null ? void 0 : 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 /*#__PURE__*/React.createElement(BundleAssetsComponent, _extends({
+    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/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js

@@ -17,78 +17,73 @@ import { getColors } from '../../utils';
 import { Stack } from '../../layout/stack';
 import { SummaryItem } from '../summary-item';
 import css from './bundle-assets-totals-chart-bars.module.css';
-export var BundleAssetsTotalsChartBars = function BundleAssetsTotalsChartBars(_ref) {
-  var className = _ref.className,
-      jobs = _ref.jobs,
-      CustomComponentLink = _ref.customComponentLink;
-  var rootClassName = cx(css.root, className);
-  var items = webpack.compareBySection.sizes(jobs);
-  var dataGraphs = [];
-  items.forEach(function (_ref2) {
-    var runs = _ref2.runs;
-    runs.forEach(function (run, runIndex) {
-      dataGraphs[runIndex] = [].concat(dataGraphs[runIndex] || [], [_get(run, 'value', 0)]);
+export const BundleAssetsTotalsChartBars = ({
+  className,
+  jobs,
+  customComponentLink: CustomComponentLink
+}) => {
+  const rootClassName = cx(css.root, className);
+  const items = webpack.compareBySection.sizes(jobs);
+  const dataGraphs = [];
+  items.forEach(({
+    runs
+  }) => {
+    runs.forEach((run, runIndex) => {
+      dataGraphs[runIndex] = [...(dataGraphs[runIndex] || []), _get(run, 'value', 0)];
     });
   });
 
-  var maxValues = _max(_map(dataGraphs, function (values) {
-    return _sum(values);
-  }));
+  const maxValues = _max(_map(dataGraphs, values => _sum(values)));
 
-  var maxValue = _max(maxValues);
+  const maxValue = _max(maxValues);
 
-  var labels = items.map(function (_ref3) {
-    var key = _ref3.key,
-        label = _ref3.label;
-    var fileType = ASSETS_SIZES_FILE_TYPE_MAP[key];
-    var componentData = getBundleAssetsFileTypeComponentLink(fileType, label);
+  const labels = items.map(({
+    key,
+    label
+  }) => {
+    const fileType = ASSETS_SIZES_FILE_TYPE_MAP[key];
+    const componentData = getBundleAssetsFileTypeComponentLink(fileType, label);
     return /*#__PURE__*/React.createElement(CustomComponentLink, _extends({
       className: css.itemLink
     }, componentData), label);
   });
-  var colors = getColors(_max(_map(dataGraphs, function (values) {
-    return values.length;
-  })));
+  const colors = getColors(_max(_map(dataGraphs, values => values.length)));
 
-  var getTooltip = function getTooltip(itemIndex, runIndex) {
-    return function () {
-      return /*#__PURE__*/React.createElement(SummaryItem, {
-        className: css.itemTooltip,
-        id: _get(items, [itemIndex, 'key']),
-        data: {
-          current: _get(items, [itemIndex, 'runs', runIndex, 'value'], 0),
-          baseline: _get(items, [itemIndex, 'runs', runIndex + 1, 'value'], 0)
-        },
-        showDelta: runIndex < jobs.length - 1,
-        showBaselineValue: runIndex < jobs.length - 1,
-        size: "large"
-      });
-    };
-  };
+  const getTooltip = (itemIndex, runIndex) => () => /*#__PURE__*/React.createElement(SummaryItem, {
+    className: css.itemTooltip,
+    id: _get(items, [itemIndex, 'key']),
+    data: {
+      current: _get(items, [itemIndex, 'runs', runIndex, 'value'], 0),
+      baseline: _get(items, [itemIndex, 'runs', runIndex + 1, 'value'], 0)
+    },
+    showDelta: runIndex < jobs.length - 1,
+    showBaselineValue: runIndex < jobs.length - 1,
+    size: "large"
+  });
 
   return /*#__PURE__*/React.createElement(Stack, {
     className: rootClassName,
     space: "medium"
-  }, dataGraphs.map(function (data, runIndex) {
-    var internalBuildNumber = jobs[runIndex].internalBuildNumber;
-    var values = data.map(function (value, valueIndex) {
-      return {
-        value: value,
-        color: colors[valueIndex],
-        label: labels[valueIndex],
-        getItemTooltip: getTooltip(valueIndex, runIndex)
-      };
-    });
+  }, dataGraphs.map((data, runIndex) => {
+    const {
+      internalBuildNumber
+    } = jobs[runIndex];
+    const values = data.map((value, valueIndex) => ({
+      value,
+      color: colors[valueIndex],
+      label: labels[valueIndex],
+      getItemTooltip: getTooltip(valueIndex, runIndex)
+    }));
     return /*#__PURE__*/React.createElement("div", {
       key: internalBuildNumber || runIndex,
       className: css.item
     }, /*#__PURE__*/React.createElement("h3", {
       className: css.itemTitle
-    }, "Job #" + internalBuildNumber), /*#__PURE__*/React.createElement(HorizontalBarChart, {
+    }, `Job #${internalBuildNumber}`), /*#__PURE__*/React.createElement(HorizontalBarChart, {
       className: css.itemChart,
       data: {
-        labels: labels,
-        values: values
+        labels,
+        values
       },
       maxValue: maxValue
     }));

package/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.stories.js

@@ -5,25 +5,21 @@ import currentData from '../../../__mocks__/webpack-stats.current.json';
 import baselineData from '../../../__mocks__/webpack-stats.baseline.json';
 import { getWrapperDecorator } from '../../stories';
 import { BundleAssetsTotalsChartBars } from './bundle-assets-totals-chart-bars';
-var JOBS = createJobs([{
+const JOBS = createJobs([{
   webpack: currentData
 }, {
   webpack: baselineData
 }]);
-var EMPTY_BASELINE = createJobs([{
+const EMPTY_BASELINE = createJobs([{
   webpack: currentData
 }, {
   webpack: null
 }]);
-var stories = storiesOf('Components/BundleAssetsTotalsChartBars', module);
+const stories = storiesOf('Components/BundleAssetsTotalsChartBars', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('component', function () {
-  return /*#__PURE__*/React.createElement(BundleAssetsTotalsChartBars, {
-    jobs: JOBS
-  });
-});
-stories.add('empty baseline', function () {
-  return /*#__PURE__*/React.createElement(BundleAssetsTotalsChartBars, {
-    jobs: EMPTY_BASELINE
-  });
-});
+stories.add('component', () => /*#__PURE__*/React.createElement(BundleAssetsTotalsChartBars, {
+  jobs: JOBS
+}));
+stories.add('empty baseline', () => /*#__PURE__*/React.createElement(BundleAssetsTotalsChartBars, {
+  jobs: EMPTY_BASELINE
+}));

package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.js

@@ -5,20 +5,20 @@ import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 import { ASSETS_SIZES_FILE_TYPE_MAP } from '../../constants';
 import { MetricsTable } from '../metrics-table';
 import { ComponentLink } from '../component-link';
-export var BundleAssetsTotalsTable = function BundleAssetsTotalsTable(_ref) {
-  var className = _ref.className,
-      jobs = _ref.jobs,
-      CustomComponentLink = _ref.customComponentLink;
-  var items = webpack.compareBySection.sizes(jobs);
-
-  var renderRowHeader = function renderRowHeader(item) {
-    var fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
-
-    var _getBundleAssetsFileT = getBundleAssetsFileTypeComponentLink(fileType, item.label),
-        section = _getBundleAssetsFileT.section,
-        title = _getBundleAssetsFileT.title,
-        params = _getBundleAssetsFileT.params;
+export const BundleAssetsTotalsTable = ({
+  className,
+  jobs,
+  customComponentLink: CustomComponentLink
+}) => {
+  const items = webpack.compareBySection.sizes(jobs);
 
+  const renderRowHeader = item => {
+    const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
+    const {
+      section,
+      title,
+      params
+    } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
     return /*#__PURE__*/React.createElement(CustomComponentLink, {
       section: section,
       title: title,

package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.js

@@ -5,29 +5,23 @@ import baselineStats from '../../../__mocks__/webpack-stats.baseline.json';
 import currentStats from '../../../__mocks__/webpack-stats.current.json';
 import { getWrapperDecorator } from '../../stories';
 import { BundleAssetsTotalsTable } from '.';
-var JOBS = createJobs([{
+const JOBS = createJobs([{
   webpack: currentStats
 }, {
   webpack: baselineStats
 }]);
-var currentJob = JOBS[0];
-var stories = storiesOf('Components/BundleAssetsTotalsTable', module);
+const [currentJob] = JOBS;
+const stories = storiesOf('Components/BundleAssetsTotalsTable', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
-    jobs: [currentJob]
-  });
-});
-stories.add('multiple jobs', function () {
-  return /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
-    jobs: JOBS
-  });
-});
-var JOBS_EMPTY_BASELINE = createJobs([{
+stories.add('default', () => /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
+  jobs: [currentJob]
+}));
+stories.add('multiple jobs', () => /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
+  jobs: JOBS
+}));
+const JOBS_EMPTY_BASELINE = createJobs([{
   webpack: currentStats
 }, null]);
-stories.add('empty baseline', function () {
-  return /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
-    jobs: JOBS_EMPTY_BASELINE
-  });
-});
+stories.add('empty baseline', () => /*#__PURE__*/React.createElement(BundleAssetsTotalsTable, {
+  jobs: JOBS_EMPTY_BASELINE
+}));

package/lib-esm/components/bundle-modules/bundle-modules.constants.js

@@ -1,15 +1,17 @@
-var _SORT_BY;
-
-export var SORT_BY_NAME = 'name';
-export var SORT_BY_SIZE = 'size';
-export var SORT_BY_DELTA = 'delta';
-export var SORT_BY = (_SORT_BY = {}, _SORT_BY[SORT_BY_NAME] = {
-  label: 'Name',
-  defaultDirection: 'asc'
-}, _SORT_BY[SORT_BY_DELTA] = {
-  label: 'Delta',
-  defaultDirection: 'desc'
-}, _SORT_BY[SORT_BY_SIZE] = {
-  label: 'Size',
-  defaultDirection: 'desc'
-}, _SORT_BY);
+export const SORT_BY_NAME = 'name';
+export const SORT_BY_SIZE = 'size';
+export const SORT_BY_DELTA = 'delta';
+export const SORT_BY = {
+  [SORT_BY_NAME]: {
+    label: 'Name',
+    defaultDirection: 'asc'
+  },
+  [SORT_BY_DELTA]: {
+    label: 'Delta',
+    defaultDirection: 'desc'
+  },
+  [SORT_BY_SIZE]: {
+    label: 'Size',
+    defaultDirection: 'desc'
+  }
+};