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

package/lib-esm/components/module-info/module-info.stories.js

@@ -2,26 +2,24 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { ModuleInfo } from '.';
-var stories = storiesOf('Components/ModuleInfo', module);
+const stories = storiesOf('Components/ModuleInfo', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(ModuleInfo, {
-    item: {
-      runs: [{
-        key: './node_modules/lodash/fp/_baseConvert.js',
-        name: './node_modules/lodash/fp/_baseConvert.js',
-        chunkIds: ['2']
-      }, {
-        key: './node_modules/lodash/fp/_baseConvert.js',
-        name: './node_modules/lodash/fp/_baseConvert.js',
-        chunkIds: ['2']
-      }]
-    },
-    chunks: [{
-      id: '2',
-      name: 'vendors'
-    }],
-    chunkIds: ['1', '2'],
-    labels: ['Job #2', 'Job #1']
-  });
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(ModuleInfo, {
+  item: {
+    runs: [{
+      key: './node_modules/lodash/fp/_baseConvert.js',
+      name: './node_modules/lodash/fp/_baseConvert.js',
+      chunkIds: ['2']
+    }, {
+      key: './node_modules/lodash/fp/_baseConvert.js',
+      name: './node_modules/lodash/fp/_baseConvert.js',
+      chunkIds: ['2']
+    }]
+  },
+  chunks: [{
+    id: '2',
+    name: 'vendors'
+  }],
+  chunkIds: ['1', '2'],
+  labels: ['Job #2', 'Job #1']
+}));

package/lib-esm/components/summary/summary.js

@@ -1,13 +1,7 @@
 import _get from "lodash/get";
 
-var _PropTypes$shape;
-
-var _excluded = ["className"];
-
 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';
@@ -18,30 +12,32 @@ import { FlexStack } from '../../layout/flex-stack';
 import { ComponentLink } from '../component-link';
 import { SummaryItem } from '../summary-item';
 import css from './summary.module.css';
-export var Summary = function Summary(_ref) {
-  var className = _ref.className,
-      size = _ref.size,
-      keys = _ref.keys,
-      data = _ref.data,
-      loading = _ref.loading,
-      showSummaryItemDelta = _ref.showSummaryItemDelta,
-      SummaryItemCustomLink = _ref.summaryItemLink;
+export const Summary = _ref => {
+  let {
+    className,
+    size,
+    keys,
+    data,
+    loading,
+    showSummaryItemDelta,
+    summaryItemLink: SummaryItemCustomLink
+  } = _ref;
   return /*#__PURE__*/React.createElement(Box, {
     outline: true,
     className: cx(css.root, className)
   }, /*#__PURE__*/React.createElement(FlexStack, {
     className: css.items
-  }, Array.from(METRIC_COMPONENT_LINKS).filter(function (_ref2) {
-    var metricId = _ref2[0];
+  }, Array.from(METRIC_COMPONENT_LINKS).filter(_ref2 => {
+    let [metricId] = _ref2;
     return keys.includes(metricId);
-  }).map(function (_ref3) {
-    var metricId = _ref3[0],
-        metricOptions = _ref3[1];
+  }).map(_ref3 => {
+    let [metricId, metricOptions] = _ref3;
     return /*#__PURE__*/React.createElement(SummaryItem, {
-      as: function as(_ref4) {
-        var itemClassName = _ref4.className,
-            itemProps = _objectWithoutPropertiesLoose(_ref4, _excluded);
-
+      as: _ref4 => {
+        let {
+          className: itemClassName,
+          ...itemProps
+        } = _ref4;
         return /*#__PURE__*/React.createElement(Box, _extends({
           padding: ['xsmall', 'small'],
           className: cx(itemClassName, css.summaryItemLink)
@@ -73,10 +69,12 @@ Summary.propTypes = {
   className: PropTypes.string,
   size: PropTypes.string,
   keys: PropTypes.arrayOf(PropTypes.string),
-  data: PropTypes.shape((_PropTypes$shape = {}, _PropTypes$shape[PropTypes.string] = PropTypes.shape({
-    baseline: PropTypes.number,
-    current: PropTypes.number
-  }), _PropTypes$shape)),
+  data: PropTypes.shape({
+    [PropTypes.string]: PropTypes.shape({
+      baseline: PropTypes.number,
+      current: PropTypes.number
+    })
+  }),
   loading: PropTypes.bool,
   showSummaryItemDelta: PropTypes.bool,
   summaryItemLink: PropTypes.elementType

package/lib-esm/components/summary/summary.stories.js

@@ -1,9 +1,5 @@
-var _excluded = ["keyProps"];
-
 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 { storiesOf } from '@storybook/react';
 import { createJobs } from '@bundle-stats/utils';
@@ -12,52 +8,41 @@ import currentData from '../../../__mocks__/webpack-stats.current.json';
 import { METRICS_WEBPACK_ASSETS } from '../../constants';
 import { getWrapperDecorator } from '../../stories';
 import { Summary } from '.';
-var MULTIPLE_JOBS = createJobs([{
+const MULTIPLE_JOBS = createJobs([{
   webpack: currentData
 }, {
   webpack: baselineData
 }]);
-var SINGLE_JOB = createJobs([{
+const SINGLE_JOB = createJobs([{
   webpack: currentData
 }]);
-var stories = storiesOf('Components/Summary', module);
+const stories = storiesOf('Components/Summary', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(Summary, {
-    data: MULTIPLE_JOBS[0].summary
-  });
-});
-stories.add('custom keys', function () {
-  return /*#__PURE__*/React.createElement(Summary, {
-    keys: METRICS_WEBPACK_ASSETS,
-    data: MULTIPLE_JOBS[0].summary
-  });
-});
-stories.add('loading', function () {
-  return /*#__PURE__*/React.createElement(Summary, {
-    loading: true
-  });
-});
-stories.add('single run', function () {
-  return /*#__PURE__*/React.createElement(Summary, {
-    data: SINGLE_JOB[0].summary,
-    showSummaryItemDelta: false
-  });
-});
-stories.add('with link', function () {
-  return /*#__PURE__*/React.createElement(Summary, {
-    data: MULTIPLE_JOBS[0].summary,
-    summaryItemLink: function summaryItemLink(_ref) {
-      var keyProps = _ref.keyProps,
-          props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-      return /*#__PURE__*/React.createElement("button", _extends({
-        type: "button"
-      }, props, {
-        onClick: function onClick() {
-          return alert(JSON.stringify(keyProps));
-        }
-      }));
-    }
-  });
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(Summary, {
+  data: MULTIPLE_JOBS[0].summary
+}));
+stories.add('custom keys', () => /*#__PURE__*/React.createElement(Summary, {
+  keys: METRICS_WEBPACK_ASSETS,
+  data: MULTIPLE_JOBS[0].summary
+}));
+stories.add('loading', () => /*#__PURE__*/React.createElement(Summary, {
+  loading: true
+}));
+stories.add('single run', () => /*#__PURE__*/React.createElement(Summary, {
+  data: SINGLE_JOB[0].summary,
+  showSummaryItemDelta: false
+}));
+stories.add('with link', () => /*#__PURE__*/React.createElement(Summary, {
+  data: MULTIPLE_JOBS[0].summary,
+  summaryItemLink: _ref => {
+    let {
+      keyProps,
+      ...props
+    } = _ref;
+    return /*#__PURE__*/React.createElement("button", _extends({
+      type: "button"
+    }, props, {
+      onClick: () => alert(JSON.stringify(keyProps))
+    }));
+  }
+}));

package/lib-esm/components/summary-item/summary-item.js

@@ -1,9 +1,5 @@
-var _excluded = ["className", "as", "size", "id", "data", "loading", "showDelta", "showMetricDescription"];
-
 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';
@@ -16,12 +12,14 @@ import { Metric } from '../metric';
 import { Delta } from '../delta';
 import css from './summary-item.module.css';
 
-var MetricInfo = function MetricInfo(_ref) {
-  var description = _ref.description,
-      url = _ref.url;
+const MetricInfo = _ref => {
+  let {
+    description,
+    url
+  } = _ref;
 
   // Workaround cases where the parent is a link
-  var readMoreOnClick = function readMoreOnClick() {
+  const readMoreOnClick = () => {
     window.open(url);
   };
 
@@ -41,28 +39,29 @@ MetricInfo.propTypes = {
 MetricInfo.defaultProps = {
   url: ''
 };
-export var SummaryItem = function SummaryItem(_ref2) {
-  var className = _ref2.className,
-      Component = _ref2.as,
-      size = _ref2.size,
-      id = _ref2.id,
-      data = _ref2.data,
-      loading = _ref2.loading,
-      showDelta = _ref2.showDelta,
-      showMetricDescription = _ref2.showMetricDescription,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
-
-  var _ref3 = data || {
+export const SummaryItem = _ref2 => {
+  let {
+    className,
+    as: Component,
+    size,
+    id,
+    data,
+    loading,
+    showDelta,
+    showMetricDescription,
+    ...props
+  } = _ref2;
+  const {
+    baseline,
+    current
+  } = data || {
     baseline: 0,
     current: 0
-  },
-      baseline = _ref3.baseline,
-      current = _ref3.current;
-
-  var metric = getGlobalMetricType(id);
-  var runInfo = getMetricRunInfo(metric, current, baseline);
-  var showMetricDescriptionTooltip = showMetricDescription && (metric == null ? void 0 : metric.description);
-  var rootClassName = cx(css.root, className, css[size], showMetricDescription && css.showMetricDescription, showMetricDescriptionTooltip && css.showMetricDescription, showDelta && css.showDelta);
+  };
+  const metric = getGlobalMetricType(id);
+  const runInfo = getMetricRunInfo(metric, current, baseline);
+  const showMetricDescriptionTooltip = showMetricDescription && (metric == null ? void 0 : metric.description);
+  const rootClassName = cx(css.root, className, css[size], showMetricDescription && css.showMetricDescription, showMetricDescriptionTooltip && css.showMetricDescription, showDelta && css.showDelta);
   return /*#__PURE__*/React.createElement(Stack, _extends({
     space: "xxsmall",
     as: Component,

package/lib-esm/components/summary-item/summary-item.stories.js

@@ -2,56 +2,46 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { SummaryItem } from './summary-item';
-var stories = storiesOf('Components/SummaryItem', module);
+const stories = storiesOf('Components/SummaryItem', module);
 stories.addDecorator(getWrapperDecorator({
   maxWidth: '320px'
 }));
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(SummaryItem, {
-    loading: false,
-    id: "webpack.totalSizeByTypeALL",
-    data: {
-      current: 120 * 1000,
-      baseline: 100 * 1000
-    }
-  });
-});
-stories.add('size large', function () {
-  return /*#__PURE__*/React.createElement(SummaryItem, {
-    size: "large",
-    loading: false,
-    id: "webpack.totalSizeByTypeALL",
-    data: {
-      current: 120 * 1000,
-      baseline: 100 * 1000
-    }
-  });
-});
-stories.add('showMetricDescription', function () {
-  return /*#__PURE__*/React.createElement(SummaryItem, {
-    loading: false,
-    id: "webpack.totalSizeByTypeALL",
-    data: {
-      current: 120 * 1000,
-      baseline: 100 * 1000
-    },
-    showMetricDescription: true
-  });
-});
-stories.add('showDelta false', function () {
-  return /*#__PURE__*/React.createElement(SummaryItem, {
-    loading: false,
-    id: "webpack.totalSizeByTypeALL",
-    data: {
-      current: 120 * 1000,
-      baseline: 0
-    },
-    showDelta: false
-  });
-});
-stories.add('loading', function () {
-  return /*#__PURE__*/React.createElement(SummaryItem, {
-    loading: true,
-    id: "webpack.totalSizeByTypeALL"
-  });
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(SummaryItem, {
+  loading: false,
+  id: "webpack.totalSizeByTypeALL",
+  data: {
+    current: 120 * 1000,
+    baseline: 100 * 1000
+  }
+}));
+stories.add('size large', () => /*#__PURE__*/React.createElement(SummaryItem, {
+  size: "large",
+  loading: false,
+  id: "webpack.totalSizeByTypeALL",
+  data: {
+    current: 120 * 1000,
+    baseline: 100 * 1000
+  }
+}));
+stories.add('showMetricDescription', () => /*#__PURE__*/React.createElement(SummaryItem, {
+  loading: false,
+  id: "webpack.totalSizeByTypeALL",
+  data: {
+    current: 120 * 1000,
+    baseline: 100 * 1000
+  },
+  showMetricDescription: true
+}));
+stories.add('showDelta false', () => /*#__PURE__*/React.createElement(SummaryItem, {
+  loading: false,
+  id: "webpack.totalSizeByTypeALL",
+  data: {
+    current: 120 * 1000,
+    baseline: 0
+  },
+  showDelta: false
+}));
+stories.add('loading', () => /*#__PURE__*/React.createElement(SummaryItem, {
+  loading: true,
+  id: "webpack.totalSizeByTypeALL"
+}));

package/lib-esm/components/total-size-type-title/total-size-type-title.js

@@ -7,8 +7,10 @@ import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { Popover } from '../../ui/popover';
 import css from './total-size-type-title.module.css';
-export var TotalSizeTypeTitle = function TotalSizeTypeTitle(_ref) {
-  var className = _ref.className;
+export const TotalSizeTypeTitle = _ref => {
+  let {
+    className
+  } = _ref;
   return /*#__PURE__*/React.createElement(FlexStack, {
     space: "xxxsmall",
     className: cx(css.title, className)

package/lib-esm/constants.js

@@ -1,36 +1,31 @@
-var _SECTION_URLS;
-
-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 { FILE_TYPES, SECTIONS } from '@bundle-stats/utils';
-export var NO_SPACE = 'no-space';
-export var SPACE_XXXSMALL = 'xxxsmall';
-export var SPACE_XXSMALL = 'xxsmall';
-export var SPACE_XSMALL = 'xsmall';
-export var SPACE_SMALL = 'small';
-export var SPACE_MEDIUM = 'medium';
-export var SPACE_LARGE = 'large';
-export var SPACE_XLARGE = 'xlarge';
-export var SPACE_XXLARGE = 'xxlarge';
-export var SPACE_XXXLARGE = 'xxxlarge';
-export var SPACES = [NO_SPACE, SPACE_XXXSMALL, SPACE_XXSMALL, SPACE_XSMALL, SPACE_SMALL, SPACE_MEDIUM, SPACE_LARGE, SPACE_XLARGE, SPACE_XXLARGE, SPACE_XXXLARGE];
-export var URLS = {
+export const NO_SPACE = 'no-space';
+export const SPACE_XXXSMALL = 'xxxsmall';
+export const SPACE_XXSMALL = 'xxsmall';
+export const SPACE_XSMALL = 'xsmall';
+export const SPACE_SMALL = 'small';
+export const SPACE_MEDIUM = 'medium';
+export const SPACE_LARGE = 'large';
+export const SPACE_XLARGE = 'xlarge';
+export const SPACE_XXLARGE = 'xxlarge';
+export const SPACE_XXXLARGE = 'xxxlarge';
+export const SPACES = [NO_SPACE, SPACE_XXXSMALL, SPACE_XXSMALL, SPACE_XSMALL, SPACE_SMALL, SPACE_MEDIUM, SPACE_LARGE, SPACE_XLARGE, SPACE_XXLARGE, SPACE_XXXLARGE];
+export const URLS = {
   OVERVIEW: '/',
   ASSETS: '/assets',
   MODULES: '/modules',
   PACKAGES: '/packages'
 };
-export var SECTION_URLS = (_SECTION_URLS = {}, _SECTION_URLS[SECTIONS.TOTALS] = URLS.OVERVIEW, _SECTION_URLS[SECTIONS.ASSETS] = URLS.ASSETS, _SECTION_URLS[SECTIONS.MODULES] = URLS.MODULES, _SECTION_URLS[SECTIONS.PACKAGES] = URLS.PACKAGES, _SECTION_URLS);
-export var ASSETS_SIZES_FILE_TYPE_MAP = FILE_TYPES.reduce(function (agg, fileType) {
-  var _objectSpread2;
-
-  return _objectSpread(_objectSpread({}, agg), {}, (_objectSpread2 = {}, _objectSpread2["webpack.sizes.totalSizeByType" + fileType] = fileType, _objectSpread2));
-}, {});
-export var METRICS_WEBPACK_GENERAL = ['webpack.totalSizeByTypeALL', 'webpack.totalInitialSizeJS', 'webpack.totalInitialSizeCSS', 'webpack.cacheInvalidation'];
-export var METRICS_WEBPACK_ASSETS = ['webpack.assetCount', 'webpack.chunkCount'];
-export var METRICS_WEBPACK_MODULES = ['webpack.moduleCount'];
-export var METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];
+export const SECTION_URLS = {
+  [SECTIONS.TOTALS]: URLS.OVERVIEW,
+  [SECTIONS.ASSETS]: URLS.ASSETS,
+  [SECTIONS.MODULES]: URLS.MODULES,
+  [SECTIONS.PACKAGES]: URLS.PACKAGES
+};
+export const ASSETS_SIZES_FILE_TYPE_MAP = FILE_TYPES.reduce((agg, fileType) => ({ ...agg,
+  [`webpack.sizes.totalSizeByType${fileType}`]: fileType
+}), {});
+export const METRICS_WEBPACK_GENERAL = ['webpack.totalSizeByTypeALL', 'webpack.totalInitialSizeJS', 'webpack.totalInitialSizeCSS', 'webpack.cacheInvalidation'];
+export const METRICS_WEBPACK_ASSETS = ['webpack.assetCount', 'webpack.chunkCount'];
+export const METRICS_WEBPACK_MODULES = ['webpack.moduleCount'];
+export const METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];

package/lib-esm/hooks/rows-filter.js

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+export const useRowsFilter = _ref => {
+  let {
+    rows,
+    searchPattern,
+    filters,
+    getRowFilter
+  } = _ref;
+  const filteredRows = useMemo(() => {
+    const filterRow = getRowFilter(filters);
+    return rows.filter(row => {
+      if (searchPattern && !searchPattern.test(row == null ? void 0 : row.key)) {
+        return false;
+      }
+
+      return filterRow(row);
+    });
+  }, [rows, searchPattern, filters, getRowFilter]);
+  return filteredRows;
+};

package/lib-esm/hooks/rows-sort.js

@@ -0,0 +1,22 @@
+import _orderBy from "lodash/orderBy";
+import { useState, useMemo } from 'react';
+export const useRowsSort = _ref => {
+  let {
+    rows,
+    sortFields,
+    sortBy = 'size',
+    sortDirection = 'desc',
+    getCustomSort
+  } = _ref;
+  const [sort, updateSort] = useState({
+    field: sortBy,
+    direction: sortDirection
+  });
+  const orderedRows = useMemo(() => _orderBy(rows, getCustomSort(sort.field), sort.direction), [rows, sort]);
+  return {
+    sortFields,
+    sort,
+    updateSort,
+    items: orderedRows
+  };
+};