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

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

@@ -3,23 +3,20 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import styles from './metric.module.css'; // Separate value and unit
 
-var EXTRACT_VALUE_UNIT_PATTERN = /([\d|.|,| ]*)(\w*|%)$/;
-export var Metric = function Metric(_ref) {
-  var className = _ref.className,
-      value = _ref.value,
-      formatter = _ref.formatter,
-      inline = _ref.inline,
-      anchored = _ref.anchored,
-      children = _ref.children,
-      enhanced = _ref.enhanced;
-  var formattedValue = formatter(value); // eslint-disable-next-line no-unused-vars
+const EXTRACT_VALUE_UNIT_PATTERN = /([\d|.|,| ]*)(\w*|%)$/;
+export const Metric = ({
+  className,
+  value,
+  formatter,
+  inline,
+  anchored,
+  children,
+  enhanced
+}) => {
+  const formattedValue = formatter(value); // eslint-disable-next-line no-unused-vars
 
-  var _ref2 = enhanced && formattedValue ? formattedValue.match(EXTRACT_VALUE_UNIT_PATTERN) : [null, formattedValue, null],
-      matched = _ref2[0],
-      displayValue = _ref2[1],
-      displayUnit = _ref2[2];
-
-  var rootClassName = cx(className, styles.root, inline && styles.inline, anchored && styles.anchored);
+  const [matched, displayValue, displayUnit] = enhanced && formattedValue ? formattedValue.match(EXTRACT_VALUE_UNIT_PATTERN) : [null, formattedValue, null];
+  const rootClassName = cx(className, styles.root, inline && styles.inline, anchored && styles.anchored);
   return /*#__PURE__*/React.createElement("span", {
     className: rootClassName
   }, /*#__PURE__*/React.createElement("span", {
@@ -39,9 +36,7 @@ Metric.defaultProps = {
   inline: false,
   value: 0,
   children: [],
-  formatter: function formatter(val) {
-    return val;
-  }
+  formatter: val => val
 };
 Metric.propTypes = {
   className: PropTypes.string,

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

@@ -3,64 +3,42 @@ import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Delta } from '../delta';
 import { Metric } from '.';
-var stories = storiesOf('Components/Metric', module);
+const stories = storiesOf('Components/Metric', module);
 stories.addDecorator(getWrapperDecorator({
   maxWidth: '200px'
 }));
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(Metric, {
-    value: 100,
-    formatter: function formatter(v) {
-      return v + "ms";
-    }
-  });
-});
-stories.add('modifier: formatted value', function () {
-  return /*#__PURE__*/React.createElement(Metric, {
-    value: "100KB"
-  });
-});
-stories.add('modifier: enhanced', function () {
-  return /*#__PURE__*/React.createElement(Metric, {
-    value: 100,
-    formatter: function formatter(v) {
-      return v + "ms";
-    },
-    enhanced: true
-  });
-});
-stories.add('modifier: delta', function () {
-  return /*#__PURE__*/React.createElement(Metric, {
-    value: 100,
-    formatter: function formatter(v) {
-      return v + "ms";
-    }
-  }, /*#__PURE__*/React.createElement(Delta, {
-    displayValue: "+10%",
-    deltaType: "POSITIVE"
-  }));
-});
-stories.add('modifier: inline', function () {
-  return /*#__PURE__*/React.createElement(Metric, {
-    value: 100,
-    formatter: function formatter(v) {
-      return v + "ms";
-    },
-    inline: true
-  }, /*#__PURE__*/React.createElement(Delta, {
-    displayValue: "+10%",
-    deltaType: "POSITIVE"
-  }));
-});
-stories.add('modifier: anchored', function () {
-  return /*#__PURE__*/React.createElement(Metric, {
-    value: 100,
-    formatter: function formatter(v) {
-      return v + "ms";
-    },
-    anchored: true
-  }, /*#__PURE__*/React.createElement(Delta, {
-    displayValue: "+10%",
-    deltaType: "POSITIVE"
-  }));
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(Metric, {
+  value: 100,
+  formatter: v => `${v}ms`
+}));
+stories.add('modifier: formatted value', () => /*#__PURE__*/React.createElement(Metric, {
+  value: "100KB"
+}));
+stories.add('modifier: enhanced', () => /*#__PURE__*/React.createElement(Metric, {
+  value: 100,
+  formatter: v => `${v}ms`,
+  enhanced: true
+}));
+stories.add('modifier: delta', () => /*#__PURE__*/React.createElement(Metric, {
+  value: 100,
+  formatter: v => `${v}ms`
+}, /*#__PURE__*/React.createElement(Delta, {
+  displayValue: "+10%",
+  deltaType: "POSITIVE"
+})));
+stories.add('modifier: inline', () => /*#__PURE__*/React.createElement(Metric, {
+  value: 100,
+  formatter: v => `${v}ms`,
+  inline: true
+}, /*#__PURE__*/React.createElement(Delta, {
+  displayValue: "+10%",
+  deltaType: "POSITIVE"
+})));
+stories.add('modifier: anchored', () => /*#__PURE__*/React.createElement(Metric, {
+  value: 100,
+  formatter: v => `${v}ms`,
+  anchored: true
+}, /*#__PURE__*/React.createElement(Delta, {
+  displayValue: "+10%",
+  deltaType: "POSITIVE"
+})));

package/lib-esm/components/metrics-table/metrics-table.js

@@ -1,6 +1,4 @@
-import _sum from "lodash/fp/sum";
-import _map from "lodash/fp/map";
-import _flow from "lodash/fp/flow";
+import _sum from "lodash/sum";
 import _isEmpty from "lodash/isEmpty";
 import _get from "lodash/get";
 import React, { useMemo } from 'react';
@@ -12,98 +10,95 @@ import { Metric } from '../metric';
 import { Delta } from '../delta';
 import { JobName } from '../job-name';
 import styles from './metrics-table.module.css';
-var METRIC_TYPE_DATA = getGlobalMetricType(null, METRIC_TYPE_FILE_SIZE);
+const METRIC_TYPE_DATA = getGlobalMetricType(null, METRIC_TYPE_FILE_SIZE);
 
-var getRowsRunTotal = function getRowsRunTotal(rows, runIndex) {
-  return _flow(_map(function (row) {
-    return _get(row, "runs[" + runIndex + "].value", 0);
-  }), _sum)(rows);
-};
-
-var getHeaderLabelCells = function getHeaderLabelCells(rows) {
-  return function (run, runIndex, runs) {
-    var isBaseline = runIndex === runs.length - 1;
-    var className = cx(styles.value, isBaseline ? styles.baseline : styles.current);
+const getRowsRunTotal = (rows, runIndex) => _sum(rows.map(row => _get(row, `runs[${runIndex}].value`, 0)));
 
-    if (!run) {
-      return [{
-        children: '-',
-        className: className
-      }].concat(!isBaseline ? [{
-        children: ' ',
-        className: styles.delta
-      }] : []);
-    }
+const getHeaderLabelCells = rows => (run, runIndex, runs) => {
+  const isBaseline = runIndex === runs.length - 1;
+  const className = cx(styles.value, isBaseline ? styles.baseline : styles.current);
 
-    var label = run.label,
-        internalBuildNumber = run.internalBuildNumber;
-    var jobName = /*#__PURE__*/React.createElement(JobName, {
-      title: runIndex === 0 ? 'Current' : 'Baseline',
-      internalBuildNumber: internalBuildNumber,
-      className: styles.jobName
-    }, label);
-    return [// Value column
-    {
-      children: jobName,
-      className: className
-    }].concat(!isBaseline ? [{
+  if (!run) {
+    return [{
+      children: '-',
+      className
+    }, ...(!isBaseline ? [{
       children: ' ',
-      className: cx(styles.delta)
-    }] : []);
-  };
-};
-
-var getHeaderTotalCells = function getHeaderTotalCells(rows) {
-  return function (run, runIndex, runs) {
-    var isBaseline = runIndex === runs.length - 1;
-    var className = cx(styles.value, isBaseline ? styles.baseline : styles.current);
-    var currentRunTotal = getRowsRunTotal(rows, runIndex);
-    var baselineRunTotal = !isBaseline && getRowsRunTotal(rows, runIndex + 1);
-    var infoTotal = getMetricRunInfo(METRIC_TYPE_DATA, currentRunTotal, baselineRunTotal);
-    return [// Value column
-    {
-      children: /*#__PURE__*/React.createElement(Metric, {
-        className: styles.tableHeaderRunMetric,
-        value: infoTotal.displayValue
-      }),
-      className: className
-    }].concat(!isBaseline ? [{
-      children: /*#__PURE__*/React.createElement(Delta, {
-        displayValue: infoTotal.displayDeltaPercentage,
-        deltaType: infoTotal.deltaType
-      }),
       className: styles.delta
-    }] : []);
-  };
+    }] : [])];
+  }
+
+  const {
+    label,
+    internalBuildNumber
+  } = run;
+  const jobName = /*#__PURE__*/React.createElement(JobName, {
+    title: runIndex === 0 ? 'Current' : 'Baseline',
+    internalBuildNumber: internalBuildNumber,
+    className: styles.jobName
+  }, label);
+  return [// Value column
+  {
+    children: jobName,
+    className
+  }, // Delta column
+  ...(!isBaseline ? [{
+    children: ' ',
+    className: cx(styles.delta)
+  }] : [])];
 };
 
-var getHeaderRows = function getHeaderRows(runs, items, showHeaderSum, title) {
-  return [{
-    className: styles.headerRowColumns,
-    cells: [// Metric name column - one empty strying to render the column
-    {
-      children: title || ' ',
-      className: styles.metricName,
-      rowSpan: showHeaderSum ? 2 : 1
-    }].concat(runs.map(getHeaderLabelCells(items)).flat())
-  }].concat(showHeaderSum ? [{
-    className: styles.headerRowTotals,
-    cells: runs.map(getHeaderTotalCells(items)).flat()
-  }] : []);
+const getHeaderTotalCells = rows => (run, runIndex, runs) => {
+  const isBaseline = runIndex === runs.length - 1;
+  const className = cx(styles.value, isBaseline ? styles.baseline : styles.current);
+  const currentRunTotal = getRowsRunTotal(rows, runIndex);
+  const baselineRunTotal = !isBaseline && getRowsRunTotal(rows, runIndex + 1);
+  const infoTotal = getMetricRunInfo(METRIC_TYPE_DATA, currentRunTotal, baselineRunTotal);
+  return [// Value column
+  {
+    children: /*#__PURE__*/React.createElement(Metric, {
+      className: styles.tableHeaderRunMetric,
+      value: infoTotal.displayValue
+    }),
+    className
+  }, // Delta column
+  ...(!isBaseline ? [{
+    children: /*#__PURE__*/React.createElement(Delta, {
+      displayValue: infoTotal.displayDeltaPercentage,
+      deltaType: infoTotal.deltaType
+    }),
+    className: styles.delta
+  }] : [])];
 };
 
-var generateRowCells = function generateRowCells(item, index, items) {
-  var isBaseline = index === items.length - 1; // eslint-disable-next-line react/destructuring-assignment
+const getHeaderRows = (runs, items, showHeaderSum, title) => [{
+  className: styles.headerRowColumns,
+  cells: [// Metric name column - one empty strying to render the column
+  {
+    children: title || ' ',
+    className: styles.metricName,
+    rowSpan: showHeaderSum ? 2 : 1
+  }, // Runs
+  ...runs.map(getHeaderLabelCells(items)).flat()]
+}, ...(showHeaderSum ? [{
+  className: styles.headerRowTotals,
+  cells: runs.map(getHeaderTotalCells(items)).flat()
+}] : [])];
+
+const generateRowCells = (item, index, items) => {
+  const isBaseline = index === items.length - 1; // eslint-disable-next-line react/destructuring-assignment
 
   if (!item || typeof item.value === 'undefined') {
-    return ['-'].concat(!isBaseline ? [''] : []);
+    return ['-', ...(!isBaseline ? [''] : [])];
   }
 
-  var displayValue = item.displayValue,
-      deltaPercentage = item.deltaPercentage,
-      displayDeltaPercentage = item.displayDeltaPercentage,
-      deltaType = item.deltaType;
-  var cells = [/*#__PURE__*/React.createElement(Metric, {
+  const {
+    displayValue,
+    deltaPercentage,
+    displayDeltaPercentage,
+    deltaType
+  } = item;
+  const cells = [/*#__PURE__*/React.createElement(Metric, {
     value: displayValue
   })];
 
@@ -117,82 +112,72 @@ var generateRowCells = function generateRowCells(item, index, items) {
   return cells;
 };
 
-var getRows = function getRows(runs, items, renderRowHeader) {
-  return items.map(function (item, index) {
-    var changed = item.changed;
-    return {
-      key: (item == null ? void 0 : item.key) || index,
-      className: changed ? '' : styles.unchanged,
-      cells: [// Metric name
-      renderRowHeader(item)].concat(item.runs.map(generateRowCells).flat())
-    };
-  });
-};
-
-export var MetricsTable = function MetricsTable(_ref) {
-  var className = _ref.className,
-      renderRowHeader = _ref.renderRowHeader,
-      runs = _ref.runs,
-      items = _ref.items,
-      emptyMessage = _ref.emptyMessage,
-      showHeaderSum = _ref.showHeaderSum,
-      headerRows = _ref.headerRows,
-      title = _ref.title;
-
-  var _useMemo = useMemo(function () {
-    var headerColumns = getHeaderRows(runs, items, showHeaderSum, title);
+const getRows = (runs, items, renderRowHeader) => items.map((item, index) => {
+  const {
+    changed
+  } = item;
+  return {
+    key: (item == null ? void 0 : item.key) || index,
+    className: changed ? '' : styles.unchanged,
+    cells: [// Metric name
+    renderRowHeader(item), // Metric item values
+    ...item.runs.map(generateRowCells).flat()]
+  };
+});
+
+export const MetricsTable = ({
+  className,
+  renderRowHeader,
+  runs,
+  items,
+  emptyMessage,
+  showHeaderSum,
+  headerRows,
+  title
+}) => {
+  const {
+    headers,
+    columnClassNames
+  } = useMemo(() => {
+    const headerColumns = getHeaderRows(runs, items, showHeaderSum, title);
     return {
-      headers: [].concat(headerRows, headerColumns),
+      headers: [...headerRows, ...headerColumns],
       // First header row has the column class names
-      columnClassNames: headerColumns[0].cells.map(function (headerColumn) {
-        return headerColumn.className;
-      })
+      columnClassNames: headerColumns[0].cells.map(headerColumn => headerColumn.className)
     };
-  }, [headerRows, runs, items, showHeaderSum, title]),
-      headers = _useMemo.headers,
-      columnClassNames = _useMemo.columnClassNames;
-
-  var rows = useMemo(function () {
-    return getRows(runs, items, renderRowHeader);
-  }, [runs, items, renderRowHeader]);
-  var rootClassName = cx(styles.root, className, runs.length > 1 && styles.multipleRuns, showHeaderSum && styles.showHeaderSum);
+  }, [headerRows, runs, items, showHeaderSum, title]);
+  const rows = useMemo(() => getRows(runs, items, renderRowHeader), [runs, items, renderRowHeader]);
+  const rootClassName = cx(styles.root, className, runs.length > 1 && styles.multipleRuns, showHeaderSum && styles.showHeaderSum);
   return /*#__PURE__*/React.createElement(Table, {
     className: rootClassName,
     compact: true
-  }, /*#__PURE__*/React.createElement(Table.THead, null, headers.map(function (headerRow) {
-    var _ref2 = headerRow.cells ? headerRow : {
-      cells: headerRow
-    },
-        cells = _ref2.cells,
-        rowClassName = _ref2.className;
-
-    return /*#__PURE__*/React.createElement(Table.Tr, {
+  }, /*#__PURE__*/React.createElement(Table.THead, null, headers.map(headerRow => {
+    const {
+      cells,
       className: rowClassName
-    }, cells.map(function (header) {
-      return /*#__PURE__*/React.createElement(Table.Th, header);
-    }));
-  })), /*#__PURE__*/React.createElement(Table.TBody, null, !_isEmpty(rows) ? rows.map(function (_ref3) {
-    var key = _ref3.key,
-        rowClassName = _ref3.className,
-        cells = _ref3.cells;
+    } = headerRow.cells ? headerRow : {
+      cells: headerRow
+    };
     return /*#__PURE__*/React.createElement(Table.Tr, {
-      key: key,
       className: rowClassName
-    }, cells.map(function (cell, index) {
-      return /*#__PURE__*/React.createElement(Table.Td, {
-        className: columnClassNames[index]
-      }, cell);
-    }));
-  }) : /*#__PURE__*/React.createElement(Table.Tr, null, /*#__PURE__*/React.createElement(Table.Td, {
+    }, cells.map(header => /*#__PURE__*/React.createElement(Table.Th, header)));
+  })), /*#__PURE__*/React.createElement(Table.TBody, null, !_isEmpty(rows) ? rows.map(({
+    key,
+    className: rowClassName,
+    cells
+  }) => /*#__PURE__*/React.createElement(Table.Tr, {
+    key: key,
+    className: rowClassName
+  }, cells.map((cell, index) => /*#__PURE__*/React.createElement(Table.Td, {
+    className: columnClassNames[index]
+  }, cell)))) : /*#__PURE__*/React.createElement(Table.Tr, null, /*#__PURE__*/React.createElement(Table.Td, {
     className: styles.empty,
     colSpan: (columnClassNames == null ? void 0 : columnClassNames.length) || 1
   }, emptyMessage))));
 };
 MetricsTable.defaultProps = {
   className: '',
-  renderRowHeader: function renderRowHeader(item) {
-    return item.label;
-  },
+  renderRowHeader: item => item.label,
   emptyMessage: 'No entries found.',
   showHeaderSum: false,
   headerRows: [],

package/lib-esm/components/metrics-table/metrics-table.stories.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { MetricsTable } from '.';
-var RUNS = [{
+const RUNS = [{
   internalBuildNumber: 2,
   label: 'Job #2'
 }, {
@@ -11,7 +11,7 @@ var RUNS = [{
     href: "#noop"
   }, "Job #1")
 }];
-var ITEMS_SINGLE_RUN = [{
+const ITEMS_SINGLE_RUN = [{
   key: 'webpack.assets.totalSizeByTypeALL',
   label: 'Total Size',
   biggerIsBetter: false,
@@ -57,7 +57,7 @@ var ITEMS_SINGLE_RUN = [{
     displayValue: '80'
   }]
 }];
-var ITEMS_MULTIPLE_RUNS = [{
+const ITEMS_MULTIPLE_RUNS = [{
   key: 'webpack.assets.totalSizeByTypeALL',
   label: 'Total Size',
   biggerIsBetter: false,
@@ -157,36 +157,28 @@ var ITEMS_MULTIPLE_RUNS = [{
     displayValue: '80'
   }]
 }];
-var stories = storiesOf('Components/MetricsTable', module);
+const stories = storiesOf('Components/MetricsTable', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(MetricsTable, {
-    runs: RUNS.slice(0, 1),
-    items: ITEMS_SINGLE_RUN
-  });
-});
-stories.add('multiple runs', function () {
-  return /*#__PURE__*/React.createElement(MetricsTable, {
-    runs: RUNS,
-    items: ITEMS_MULTIPLE_RUNS
-  });
-});
-stories.add('with header rows', function () {
-  return /*#__PURE__*/React.createElement(MetricsTable, {
-    runs: RUNS,
-    items: ITEMS_MULTIPLE_RUNS,
-    headerRows: [['Metric', {
-      children: 'Colspan',
-      colSpan: 1 + (RUNS.length - 1) * 2 + 1,
-      style: {
-        textAlign: 'center'
-      }
-    }]]
-  });
-});
-stories.add('empty', function () {
-  return /*#__PURE__*/React.createElement(MetricsTable, {
-    runs: RUNS,
-    items: []
-  });
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(MetricsTable, {
+  runs: RUNS.slice(0, 1),
+  items: ITEMS_SINGLE_RUN
+}));
+stories.add('multiple runs', () => /*#__PURE__*/React.createElement(MetricsTable, {
+  runs: RUNS,
+  items: ITEMS_MULTIPLE_RUNS
+}));
+stories.add('with header rows', () => /*#__PURE__*/React.createElement(MetricsTable, {
+  runs: RUNS,
+  items: ITEMS_MULTIPLE_RUNS,
+  headerRows: [['Metric', {
+    children: 'Colspan',
+    colSpan: 1 + (RUNS.length - 1) * 2 + 1,
+    style: {
+      textAlign: 'center'
+    }
+  }]]
+}));
+stories.add('empty', () => /*#__PURE__*/React.createElement(MetricsTable, {
+  runs: RUNS,
+  items: []
+}));

package/lib-esm/components/metrics-table-options/metrics-table-options.js

@@ -1,32 +1,27 @@
-var _excluded = ["className", "handleViewAll", "handleResetFilters"];
-
 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 I18N from '../../i18n';
 import { Dropdown } from '../../ui/dropdown';
-export var MetricsTableOptions = function MetricsTableOptions(props) {
-  var className = props.className,
-      handleViewAll = props.handleViewAll,
-      handleResetFilters = props.handleResetFilters,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded);
-
+export const MetricsTableOptions = props => {
+  const {
+    className,
+    handleViewAll,
+    handleResetFilters,
+    ...restProps
+  } = props;
   return /*#__PURE__*/React.createElement(Dropdown, _extends({
     className: className,
     glyph: "menu"
-  }, restProps), function (_ref) {
-    var MenuItem = _ref.MenuItem,
-        menu = _ref.menu,
-        menuItemClassName = _ref.menuItemClassName;
-
-    var getButtonOnClick = function getButtonOnClick(handler) {
-      return function () {
-        handler();
-        menu.toggle();
-      };
+  }, restProps), ({
+    MenuItem,
+    menu,
+    menuItemClassName
+  }) => {
+    const getButtonOnClick = handler => () => {
+      handler();
+      menu.toggle();
     };
 
     return /*#__PURE__*/React.createElement(React.Fragment, null, handleResetFilters && /*#__PURE__*/React.createElement(MenuItem, _extends({}, menu, {

package/lib-esm/components/metrics-table-options/metrics-table-options.stories.js

@@ -2,16 +2,10 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { MetricsTableOptions } from '.';
-var stories = storiesOf('Components/MetricsTableOptions', module);
+const stories = storiesOf('Components/MetricsTableOptions', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(MetricsTableOptions, {
-    align: "left",
-    handleResetFilters: function handleResetFilters() {
-      return console.log('reset');
-    },
-    handleViewAll: function handleViewAll() {
-      return console.log('view all');
-    }
-  });
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(MetricsTableOptions, {
+  align: "left",
+  handleResetFilters: () => console.log('reset'),
+  handleViewAll: () => console.log('view all')
+}));