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

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

@@ -1,122 +1,104 @@
 import _get from "lodash/get";
-
-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, { useCallback, useState } from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Filters } from '.';
-var stories = storiesOf('UI/Filters', module);
+const stories = storiesOf('UI/Filters', module);
 stories.addDecorator(getWrapperDecorator({
   paddingLeft: '200px'
 }));
 
-var FiltersState = function FiltersState(_ref) {
-  var children = _ref.children;
-
-  var _useState = useState({
+const FiltersState = _ref => {
+  let {
+    children
+  } = _ref;
+  const [values, setValues] = useState({
     changed: true,
     'assetType.entrypoint': true
-  }),
-      values = _useState[0],
-      setValues = _useState[1];
-
-  var handleSetValues = useCallback(function (newValues) {
-    setValues(_objectSpread(_objectSpread({}, values), newValues));
+  });
+  const handleSetValues = useCallback(newValues => {
+    setValues({ ...values,
+      ...newValues
+    });
     console.info(newValues);
   }, [values]);
   return children(values, handleSetValues);
 };
 
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(FiltersState, null, function (values, setValues) {
-    return /*#__PURE__*/React.createElement(Filters, {
-      onChange: setValues,
-      filters: {
-        changed: {
-          label: 'Changed',
-          defaultValue: _get(values, 'changed', true)
-        },
-        fileTypes: {
-          label: 'File types',
-          CSS: {
-            label: 'CSS',
-            defaultValue: _get(values, 'fileTypes.CSS', true)
-          },
-          JS: {
-            label: 'JS',
-            defaultValue: _get(values, 'fileTypes.JS', true)
-          },
-          HTML: {
-            label: 'HTML',
-            defaultValue: _get(values, 'fileTypes.HTML', true)
-          },
-          OTHER: {
-            label: 'Asset that is not CSS, JS or HTML',
-            defaultValue: _get(values, 'fileTypes.OTHER', true)
-          }
-        }
-      }
-    });
-  });
-});
-stories.add('overflow', function () {
-  return /*#__PURE__*/React.createElement(FiltersState, null, function (values, setValues) {
-    return /*#__PURE__*/React.createElement(Filters, {
-      onChange: setValues,
-      filters: {
-        changed: {
-          label: 'Changed',
-          defaultValue: _get(values, 'changed', true)
-        },
-        chunks: _objectSpread({
-          label: 'Chunks'
-        }, Array(22).fill('').reduce(function (agg, value, currentIndex) {
-          var _objectSpread2;
-
-          return _objectSpread(_objectSpread({}, agg), {}, (_objectSpread2 = {}, _objectSpread2["chunk-" + currentIndex] = {
-            label: "Chunk " + (currentIndex + 1),
-            defaultValue: _get(values, "chunks.chunk-" + currentIndex)
-          }, _objectSpread2));
-        }, {}))
-      }
-    });
-  });
-});
-stories.add('disable options', function () {
-  return /*#__PURE__*/React.createElement(Filters, {
-    onChange: function onChange(state) {
-      console.log(state); // eslint-disable-line no-console
+stories.add('default', () => /*#__PURE__*/React.createElement(FiltersState, null, (values, setValues) => /*#__PURE__*/React.createElement(Filters, {
+  onChange: setValues,
+  filters: {
+    changed: {
+      label: 'Changed',
+      defaultValue: _get(values, 'changed', true)
     },
-    filters: {
-      changed: {
-        label: 'Changed',
-        defaultValue: false,
-        disabled: true
+    fileTypes: {
+      label: 'File types',
+      CSS: {
+        label: 'CSS',
+        defaultValue: _get(values, 'fileTypes.CSS', true)
+      },
+      JS: {
+        label: 'JS',
+        defaultValue: _get(values, 'fileTypes.JS', true)
       },
-      entrypoint: {
-        label: 'Entrypoint',
-        defaultValue: false
+      HTML: {
+        label: 'HTML',
+        defaultValue: _get(values, 'fileTypes.HTML', true)
       },
-      fileTypes: {
-        label: 'File types',
-        CSS: {
-          label: 'CSS',
-          defaultValue: true
-        },
-        JS: {
-          label: 'JS',
-          defaultValue: true
-        },
-        HTML: {
-          label: 'HTML',
-          defaultValue: true
+      OTHER: {
+        label: 'Asset that is not CSS, JS or HTML',
+        defaultValue: _get(values, 'fileTypes.OTHER', true)
+      }
+    }
+  }
+})));
+stories.add('overflow', () => /*#__PURE__*/React.createElement(FiltersState, null, (values, setValues) => /*#__PURE__*/React.createElement(Filters, {
+  onChange: setValues,
+  filters: {
+    changed: {
+      label: 'Changed',
+      defaultValue: _get(values, 'changed', true)
+    },
+    chunks: {
+      label: 'Chunks',
+      ...Array(22).fill('').reduce((agg, value, currentIndex) => ({ ...agg,
+        [`chunk-${currentIndex}`]: {
+          label: `Chunk ${currentIndex + 1}`,
+          defaultValue: _get(values, `chunks.chunk-${currentIndex}`)
         }
+      }), {})
+    }
+  }
+})));
+stories.add('disable options', () => /*#__PURE__*/React.createElement(Filters, {
+  onChange: state => {
+    console.log(state); // eslint-disable-line no-console
+  },
+  filters: {
+    changed: {
+      label: 'Changed',
+      defaultValue: false,
+      disabled: true
+    },
+    entrypoint: {
+      label: 'Entrypoint',
+      defaultValue: false
+    },
+    fileTypes: {
+      label: 'File types',
+      CSS: {
+        label: 'CSS',
+        defaultValue: true
+      },
+      JS: {
+        label: 'JS',
+        defaultValue: true
+      },
+      HTML: {
+        label: 'HTML',
+        defaultValue: true
       }
     }
-  });
-});
+  }
+}));

package/lib-esm/ui/filters/filters.utils.js

@@ -1,7 +1,7 @@
-var FILTER_SUFFIX_MAX_LENGTH = 18;
-var ELLIPSES = '...';
-var JOIN = ', ';
-export var LABELS = {
+const FILTER_SUFFIX_MAX_LENGTH = 18;
+const ELLIPSES = '...';
+const JOIN = ', ';
+export const LABELS = {
   NONE: 'none',
   ALL: 'all'
 };
@@ -10,15 +10,16 @@ export var LABELS = {
  * @return {String}
  */
 
-export var getGroupFiltersLabelSuffix = function getGroupFiltersLabelSuffix(filters) {
-  var filterCount = filters.length; // eslint-disable-next-line no-unused-vars
+export const getGroupFiltersLabelSuffix = filters => {
+  const filterCount = filters.length; // eslint-disable-next-line no-unused-vars
 
-  var checkedFilters = filters.filter(function (_ref) {
-    var _ = _ref[0],
-        defaultValue = _ref[1].defaultValue;
+  const checkedFilters = filters.filter(_ref => {
+    let [_, {
+      defaultValue
+    }] = _ref;
     return defaultValue;
   });
-  var filterCheckedCount = checkedFilters.length;
+  const filterCheckedCount = checkedFilters.length;
 
   if (filterCheckedCount === 0) {
     return LABELS.NONE;
@@ -29,38 +30,39 @@ export var getGroupFiltersLabelSuffix = function getGroupFiltersLabelSuffix(filt
   } // eslint-disable-next-line no-unused-vars
 
 
-  var checkedFilterLabels = checkedFilters.map(function (_ref2) {
-    var _ = _ref2[0],
-        label = _ref2[1].label;
+  const checkedFilterLabels = checkedFilters.map(_ref2 => {
+    let [_, {
+      label
+    }] = _ref2;
     return label;
   });
-  var suffix = '';
-  var inlinedLabelCount = 0;
-  var done = false;
+  let suffix = '';
+  let inlinedLabelCount = 0;
+  let done = false;
 
-  for (var i = 0; !done && i < checkedFilterLabels.length && FILTER_SUFFIX_MAX_LENGTH - suffix.length >= 0; i++ // eslint-disable-line no-plusplus
+  for (let i = 0; !done && i < checkedFilterLabels.length && FILTER_SUFFIX_MAX_LENGTH - suffix.length >= 0; i++ // eslint-disable-line no-plusplus
   ) {
-    var availableSpace = FILTER_SUFFIX_MAX_LENGTH - suffix.length;
-    var label = checkedFilterLabels[i];
-    var normalizedLabel = '';
+    const availableSpace = FILTER_SUFFIX_MAX_LENGTH - suffix.length;
+    const label = checkedFilterLabels[i];
+    let normalizedLabel = '';
 
     if (availableSpace - label.length >= 0) {
       // Label is fitting in the available space
       normalizedLabel = label;
     } else if (availableSpace >= 6) {
       // Available space is allowing crop
-      normalizedLabel = "" + label.substr(0, availableSpace - 3) + ELLIPSES;
+      normalizedLabel = `${label.substr(0, availableSpace - 3)}${ELLIPSES}`;
     } else {// noop - the label will not fit
     }
 
     if (normalizedLabel) {
-      suffix = "" + suffix + (suffix ? JOIN : '') + normalizedLabel;
+      suffix = `${suffix}${suffix ? JOIN : ''}${normalizedLabel}`;
       inlinedLabelCount = i + 1;
     } else {
       done = true;
     }
   }
 
-  var skippedLabels = filterCheckedCount - inlinedLabelCount;
-  return "" + suffix + (skippedLabels > 0 ? " +" + skippedLabels : '');
+  const skippedLabels = filterCheckedCount - inlinedLabelCount;
+  return `${suffix}${skippedLabels > 0 ? ` +${skippedLabels}` : ''}`;
 };

package/lib-esm/ui/filters/index.js

@@ -1,3 +1,3 @@
 import { filtersDropdownContainer } from './filters.container';
 import { Filters as FiltersComponent } from './filters';
-export var Filters = filtersDropdownContainer(FiltersComponent);
+export const Filters = filtersDropdownContainer(FiltersComponent);

package/lib-esm/ui/horizontal-bar-chart/horizontal-bar-chart.js

@@ -1,11 +1,6 @@
 import _sum from "lodash/sum";
 import _round from "lodash/round";
 import _get from "lodash/get";
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -13,47 +8,43 @@ import { getColors } from '../../utils';
 import { Tooltip } from '../tooltip';
 import css from './horizontal-bar-chart.module.css';
 
-var HorizontalBarChartItem = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(HorizontalBarChartItem, _React$Component);
-
-  function HorizontalBarChartItem(props) {
-    var _this;
-
-    _this = _React$Component.call(this, props) || this;
-    _this.textRef = /*#__PURE__*/React.createRef();
-    _this.ref = /*#__PURE__*/React.createRef();
-    _this.state = {
+class HorizontalBarChartItem extends React.Component {
+  constructor(props) {
+    super(props);
+    this.textRef = /*#__PURE__*/React.createRef();
+    this.ref = /*#__PURE__*/React.createRef();
+    this.state = {
       isTextOverflowing: true
     };
-    return _this;
   }
 
-  var _proto = HorizontalBarChartItem.prototype;
+  componentDidMount() {
+    const wrapperWidth = _get(this, 'ref.current.clientWidth', 0);
 
-  _proto.componentDidMount = function componentDidMount() {
-    var wrapperWidth = _get(this, 'ref.current.clientWidth', 0);
-
-    var textWidth = _get(this, 'textRef.current.scrollWidth', 0);
+    const textWidth = _get(this, 'textRef.current.scrollWidth', 0);
 
     if (wrapperWidth >= textWidth + 2 * 4) {
       this.setState({
         isTextOverflowing: false
       });
     }
-  };
+  }
 
-  _proto.render = function render() {
-    var _this$props = this.props,
-        color = _this$props.color,
-        label = _this$props.label,
-        getItemTooltip = _this$props.getItemTooltip,
-        width = _this$props.width;
-    var isTextOverflowing = this.state.isTextOverflowing;
-    var tooltipContent = getItemTooltip();
+  render() {
+    const {
+      color,
+      label,
+      getItemTooltip,
+      width
+    } = this.props;
+    const {
+      isTextOverflowing
+    } = this.state;
+    const tooltipContent = getItemTooltip();
     return /*#__PURE__*/React.createElement("span", {
       className: cx(css.item, isTextOverflowing && css.textOverflowed),
       style: {
-        width: width,
+        width,
         background: color
       },
       ref: this.ref
@@ -65,10 +56,9 @@ var HorizontalBarChartItem = /*#__PURE__*/function (_React$Component) {
       className: css.itemLabel,
       ref: this.textRef
     }, label)));
-  };
+  }
 
-  return HorizontalBarChartItem;
-}(React.Component);
+}
 
 HorizontalBarChartItem.propTypes = {
   width: PropTypes.string.isRequired,
@@ -77,57 +67,57 @@ HorizontalBarChartItem.propTypes = {
   getItemTooltip: PropTypes.func
 };
 HorizontalBarChartItem.defaultProps = {
-  getItemTooltip: function getItemTooltip() {
-    return null;
-  }
+  getItemTooltip: () => null
 };
 
-var getTotalValues = function getTotalValues(values) {
-  return _sum(values.map(function (entry) {
-    if (typeof entry === 'object') {
-      return entry.value;
-    }
-
-    return entry;
-  }));
-};
+const getTotalValues = values => _sum(values.map(entry => {
+  if (typeof entry === 'object') {
+    return entry.value;
+  }
 
-export var HorizontalBarChart = function HorizontalBarChart(props) {
-  var className = props.className,
-      data = props.data,
-      maxValue = props.maxValue;
-  var labels = data.labels,
-      values = data.values;
-  var defaultColors = getColors(labels.length);
-  var total = maxValue || getTotalValues(values);
-  var entries = values.reduce(function (agg, entry, index) {
-    var _ref = typeof entry === 'object' ? entry : {
+  return entry;
+}));
+
+export const HorizontalBarChart = props => {
+  const {
+    className,
+    data,
+    maxValue
+  } = props;
+  const {
+    labels,
+    values
+  } = data;
+  const defaultColors = getColors(labels.length);
+  const total = maxValue || getTotalValues(values);
+  const entries = values.reduce((agg, entry, index) => {
+    const {
+      value,
+      color = defaultColors[index],
+      label = labels[index],
+      getItemTooltip
+    } = typeof entry === 'object' ? entry : {
       value: entry
-    },
-        value = _ref.value,
-        _ref$color = _ref.color,
-        color = _ref$color === void 0 ? defaultColors[index] : _ref$color,
-        _ref$label = _ref.label,
-        label = _ref$label === void 0 ? labels[index] : _ref$label,
-        getItemTooltip = _ref.getItemTooltip;
-
-    var width = _round(value / total * 100, 2) + "%";
-    return [].concat(agg, [{
-      value: value,
-      width: width,
-      color: color,
-      label: label,
-      getItemTooltip: getItemTooltip
-    }]);
+    };
+    const width = `${_round(value / total * 100, 2)}%`;
+    return [...agg, {
+      value,
+      width,
+      color,
+      label,
+      getItemTooltip
+    }];
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     className: cx(css.root, className)
-  }, entries.map(function (_ref2, index) {
-    var color = _ref2.color,
-        getItemTooltip = _ref2.getItemTooltip,
-        label = _ref2.label,
-        width = _ref2.width;
-    var key = index;
+  }, entries.map((_ref, index) => {
+    let {
+      color,
+      getItemTooltip,
+      label,
+      width
+    } = _ref;
+    const key = index;
     return /*#__PURE__*/React.createElement(HorizontalBarChartItem, {
       key: key,
       width: width,

package/lib-esm/ui/horizontal-bar-chart/horizontal-bar-chart.stories.js

@@ -2,83 +2,73 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { HorizontalBarChart } from '.';
-var stories = storiesOf('UI/HorizontalBarChart', module);
+const stories = storiesOf('UI/HorizontalBarChart', module);
 stories.addDecorator(getWrapperDecorator({
   paddingTop: '128px'
 }));
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(HorizontalBarChart, {
-    data: {
-      labels: ['JS', 'CSS', 'IMG', 'Others', 'HTML'],
-      values: [300, 200, 300, 0, 20]
-    }
-  });
-});
-stories.add('empty values', function () {
-  return /*#__PURE__*/React.createElement(HorizontalBarChart, {
-    data: {
-      labels: ['JS', 'CSS', 'IMG', 'Others', 'HTML'],
-      values: [0, 0, 0, 0, 0]
-    }
-  });
-});
-stories.add('with maxValue', function () {
-  return /*#__PURE__*/React.createElement(HorizontalBarChart, {
-    data: {
-      labels: ['JS', 'CSS', 'IMG', 'Others', 'HTML'],
-      values: [300, 200, 300, 0, 20]
-    },
-    maxValue: 1200
-  });
-});
-stories.add('with custom colors', function () {
-  return /*#__PURE__*/React.createElement(HorizontalBarChart, {
-    data: {
-      labels: ['JS', 'CSS', 'IMG', 'Others', 'HTML'],
-      values: [{
-        value: 300,
-        color: 'red'
-      }, {
-        value: 200,
-        color: 'green'
-      }, {
-        value: 300,
-        color: 'orange'
-      }, {
-        value: 0,
-        color: 'blue'
-      }, {
-        value: 20,
-        color: 'pink'
-      }]
-    }
-  });
-});
-stories.add('with custom label', function () {
-  return /*#__PURE__*/React.createElement(HorizontalBarChart, {
-    data: {
-      labels: ['JS', 'CSS', 'IMG', 'Others', 'HTML'],
-      values: [{
-        value: 300,
-        color: 'red',
-        label: /*#__PURE__*/React.createElement("h3", null, "JS")
-      }, {
-        value: 200,
-        color: 'green',
-        label: /*#__PURE__*/React.createElement("h3", null, "JS")
-      }, {
-        value: 300,
-        color: 'orange',
-        label: /*#__PURE__*/React.createElement("h3", null, "JS")
-      }, {
-        value: 0,
-        color: 'blue',
-        label: /*#__PURE__*/React.createElement("h3", null, "JS")
-      }, {
-        value: 20,
-        color: 'pink',
-        label: /*#__PURE__*/React.createElement("h3", null, "JS")
-      }]
-    }
-  });
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(HorizontalBarChart, {
+  data: {
+    labels: ['JS', 'CSS', 'IMG', 'Others', 'HTML'],
+    values: [300, 200, 300, 0, 20]
+  }
+}));
+stories.add('empty values', () => /*#__PURE__*/React.createElement(HorizontalBarChart, {
+  data: {
+    labels: ['JS', 'CSS', 'IMG', 'Others', 'HTML'],
+    values: [0, 0, 0, 0, 0]
+  }
+}));
+stories.add('with maxValue', () => /*#__PURE__*/React.createElement(HorizontalBarChart, {
+  data: {
+    labels: ['JS', 'CSS', 'IMG', 'Others', 'HTML'],
+    values: [300, 200, 300, 0, 20]
+  },
+  maxValue: 1200
+}));
+stories.add('with custom colors', () => /*#__PURE__*/React.createElement(HorizontalBarChart, {
+  data: {
+    labels: ['JS', 'CSS', 'IMG', 'Others', 'HTML'],
+    values: [{
+      value: 300,
+      color: 'red'
+    }, {
+      value: 200,
+      color: 'green'
+    }, {
+      value: 300,
+      color: 'orange'
+    }, {
+      value: 0,
+      color: 'blue'
+    }, {
+      value: 20,
+      color: 'pink'
+    }]
+  }
+}));
+stories.add('with custom label', () => /*#__PURE__*/React.createElement(HorizontalBarChart, {
+  data: {
+    labels: ['JS', 'CSS', 'IMG', 'Others', 'HTML'],
+    values: [{
+      value: 300,
+      color: 'red',
+      label: /*#__PURE__*/React.createElement("h3", null, "JS")
+    }, {
+      value: 200,
+      color: 'green',
+      label: /*#__PURE__*/React.createElement("h3", null, "JS")
+    }, {
+      value: 300,
+      color: 'orange',
+      label: /*#__PURE__*/React.createElement("h3", null, "JS")
+    }, {
+      value: 0,
+      color: 'blue',
+      label: /*#__PURE__*/React.createElement("h3", null, "JS")
+    }, {
+      value: 20,
+      color: 'pink',
+      label: /*#__PURE__*/React.createElement("h3", null, "JS")
+    }]
+  }
+}));