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

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

@@ -1,17 +1,7 @@
 import _get from "lodash/get";
-var _excluded = ["className", "label", "name", "getOnOnlyClick"],
-    _excluded2 = ["label"];
-
-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; }
 
 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';
@@ -20,15 +10,16 @@ import { Dropdown } from '../dropdown';
 import { getGroupFiltersLabelSuffix, LABELS } from './filters.utils';
 import css from './filters.module.css';
 
-var Filter = function Filter(props) {
-  var className = props.className,
-      label = props.label,
-      name = props.name,
-      getOnOnlyClick = props.getOnOnlyClick,
-      inputProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var id = "filter-" + name;
-  var rootClassName = cx(css.filter, className);
+const Filter = props => {
+  const {
+    className,
+    label,
+    name,
+    getOnOnlyClick,
+    ...inputProps
+  } = props;
+  const id = `filter-${name}`;
+  const rootClassName = cx(css.filter, className);
   return /*#__PURE__*/React.createElement("div", {
     className: rootClassName
   }, /*#__PURE__*/React.createElement(FlexStack, {
@@ -61,69 +52,52 @@ Filter.defaultProps = {
   getOnOnlyClick: null
 };
 
-var FilterGroup = function FilterGroup(props) {
-  var groupKey = props.groupKey,
-      data = props.data,
-      values = props.values,
-      onCheckboxChange = props.onCheckboxChange,
-      toggleFilters = props.toggleFilters;
-
-  var groupLabel = data.label,
-      groupData = _objectWithoutPropertiesLoose(data, _excluded2);
-
-  var groupItems = Object.entries(groupData);
-  var groupCheckboxes = groupItems.filter(function (_ref) {
-    var itemKey = _ref[0],
-        item = _ref[1];
-    return typeof (item == null ? void 0 : item.defaultValue) !== 'undefined';
-  });
-  var isGroupChecked = groupCheckboxes.map(function (_ref2) {
-    var itemKey = _ref2[0];
-    return _get(values, groupKey + "." + itemKey);
-  }).reduce(function (agg, val) {
-    return agg && val;
-  }, true);
-  var filterSuffix = getGroupFiltersLabelSuffix(groupItems);
-  var hasCustomFilterSuffix = !Object.values(LABELS).includes(filterSuffix);
-  var dropdownLabel = /*#__PURE__*/React.createElement(React.Fragment, null, groupLabel + ":", "\xA0", /*#__PURE__*/React.createElement("span", {
+const FilterGroup = props => {
+  const {
+    groupKey,
+    data,
+    values,
+    onCheckboxChange,
+    toggleFilters
+  } = props;
+  const {
+    label: groupLabel,
+    ...groupData
+  } = data;
+  const groupItems = Object.entries(groupData);
+  const groupCheckboxes = groupItems.filter(([itemKey, item]) => typeof (item == null ? void 0 : item.defaultValue) !== 'undefined');
+  const isGroupChecked = groupCheckboxes.map(([itemKey]) => _get(values, `${groupKey}.${itemKey}`)).reduce((agg, val) => agg && val, true);
+  const filterSuffix = getGroupFiltersLabelSuffix(groupItems);
+  const hasCustomFilterSuffix = !Object.values(LABELS).includes(filterSuffix);
+  const dropdownLabel = /*#__PURE__*/React.createElement(React.Fragment, null, `${groupLabel}:`, "\xA0", /*#__PURE__*/React.createElement("span", {
     className: cx(hasCustomFilterSuffix && css.labelSuffixCustom)
   }, filterSuffix));
 
-  var getOnGroupCheck = function getOnGroupCheck(value, overrides) {
-    if (overrides === void 0) {
-      overrides = {};
-    }
-
-    return function () {
-      var newFilters = groupCheckboxes.reduce(function (agg, _ref3) {
-        var _objectSpread2;
-
-        var itemKey = _ref3[0];
-        return _objectSpread(_objectSpread({}, agg), {}, (_objectSpread2 = {}, _objectSpread2[groupKey + "." + itemKey] = value, _objectSpread2));
-      }, {});
-      toggleFilters(_objectSpread(_objectSpread({}, newFilters), overrides));
-    };
+  const getOnGroupCheck = (value, overrides = {}) => () => {
+    const newFilters = groupCheckboxes.reduce((agg, [itemKey]) => ({ ...agg,
+      [`${groupKey}.${itemKey}`]: value
+    }), {});
+    toggleFilters({ ...newFilters,
+      ...overrides
+    });
   };
 
   return /*#__PURE__*/React.createElement(Dropdown, {
     label: dropdownLabel,
-    ariaLabel: groupLabel + ": " + filterSuffix
-  }, function (_ref4) {
-    var MenuItem = _ref4.MenuItem,
-        menu = _ref4.menu,
-        menuItemClassName = _ref4.menuItemClassName;
+    ariaLabel: `${groupLabel}: ${filterSuffix}`
+  }, ({
+    MenuItem,
+    menu,
+    menuItemClassName
+  }) => {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: css.filterGroupItems
-    }, groupItems.map(function (_ref5) {
-      var itemKey = _ref5[0],
-          itemData = _ref5[1];
-      var id = [groupKey, itemKey].join('.');
+    }, groupItems.map(([itemKey, itemData]) => {
+      const id = [groupKey, itemKey].join('.');
 
-      var getOnOnlyClick = function getOnOnlyClick() {
-        var _getOnGroupCheck;
-
-        return getOnGroupCheck(false, (_getOnGroupCheck = {}, _getOnGroupCheck[id] = true, _getOnGroupCheck));
-      };
+      const getOnOnlyClick = () => getOnGroupCheck(false, {
+        [id]: true
+      });
 
       return /*#__PURE__*/React.createElement(MenuItem, _extends({
         key: id
@@ -164,27 +138,25 @@ FilterGroup.propTypes = {
   onCheckboxChange: PropTypes.func.isRequired,
   toggleFilters: PropTypes.func.isRequired
 };
-export var Filters = function Filters(props) {
-  var className = props.className,
-      values = props.values,
-      filters = props.filters,
-      toggleFilter = props.toggleFilter,
-      toggleFilters = props.toggleFilters;
-
-  var onCheckboxChange = function onCheckboxChange(_ref6) {
-    var target = _ref6.target;
-    return toggleFilter(target.name, target.checked);
-  };
-
-  var rootClassName = cx(css.root, className);
+export const Filters = props => {
+  const {
+    className,
+    values,
+    filters,
+    toggleFilter,
+    toggleFilters
+  } = props;
+
+  const onCheckboxChange = ({
+    target
+  }) => toggleFilter(target.name, target.checked);
+
+  const rootClassName = cx(css.root, className);
   return /*#__PURE__*/React.createElement("form", {
     className: rootClassName
   }, /*#__PURE__*/React.createElement(FlexStack, {
     className: css.items
-  }, Object.entries(filters).map(function (_ref7) {
-    var name = _ref7[0],
-        data = _ref7[1];
-
+  }, Object.entries(filters).map(([name, data]) => {
     if (typeof (data == null ? void 0 : data.defaultValue) !== 'undefined') {
       return /*#__PURE__*/React.createElement(Filter, {
         key: name,

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

@@ -1,122 +1,103 @@
 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 = ({
+  children
+}) => {
+  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,13 @@ 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;
-    return defaultValue;
-  });
-  var filterCheckedCount = checkedFilters.length;
+  const checkedFilters = filters.filter(([_, {
+    defaultValue
+  }]) => defaultValue);
+  const filterCheckedCount = checkedFilters.length;
 
   if (filterCheckedCount === 0) {
     return LABELS.NONE;
@@ -29,38 +27,36 @@ 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;
-    return label;
-  });
-  var suffix = '';
-  var inlinedLabelCount = 0;
-  var done = false;
+  const checkedFilterLabels = checkedFilters.map(([_, {
+    label
+  }]) => label);
+  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);