@bundle-stats/ui 3.2.1-alpha.0 → 3.2.1-beta.3

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

@@ -7,20 +7,23 @@ 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 const TotalSizeTypeTitle = ({
-  className
-}) => /*#__PURE__*/React.createElement(FlexStack, {
-  space: "xxxsmall",
-  className: cx(css.title, className)
-}, /*#__PURE__*/React.createElement("span", null, I18N.ASSET_TOTALS), /*#__PURE__*/React.createElement(Popover, {
-  icon: "help"
-}, /*#__PURE__*/React.createElement(Stack, {
-  space: "xxxsmall"
-}, /*#__PURE__*/React.createElement("p", null, I18N.ASSET_TOTALS_INFO), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {
-  href: config.documentation.assets,
-  target: "_blank",
-  rel: "noreferrer"
-}, I18N.READ_MORE)))));
+export const TotalSizeTypeTitle = _ref => {
+  let {
+    className
+  } = _ref;
+  return /*#__PURE__*/React.createElement(FlexStack, {
+    space: "xxxsmall",
+    className: cx(css.title, className)
+  }, /*#__PURE__*/React.createElement("span", null, I18N.ASSET_TOTALS), /*#__PURE__*/React.createElement(Popover, {
+    icon: "help"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    space: "xxxsmall"
+  }, /*#__PURE__*/React.createElement("p", null, I18N.ASSET_TOTALS_INFO), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {
+    href: config.documentation.assets,
+    target: "_blank",
+    rel: "noreferrer"
+  }, I18N.READ_MORE)))));
+};
 TotalSizeTypeTitle.propTypes = {
   className: PropTypes.string
 };

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

@@ -1,10 +1,11 @@
 import { useMemo } from 'react';
-export const useRowsFilter = ({
-  rows,
-  searchPattern,
-  filters,
-  getRowFilter
-}) => {
+export const useRowsFilter = _ref => {
+  let {
+    rows,
+    searchPattern,
+    filters,
+    getRowFilter
+  } = _ref;
   const filteredRows = useMemo(() => {
     const filterRow = getRowFilter(filters);
     return rows.filter(row => {

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

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

package/lib-esm/hooks/search-params.js

@@ -24,74 +24,77 @@ const getSearchPattern = search => {
   return searchPattern;
 };
 
-const getSearchReducer = ({
-  defaultFilters,
-  allEntriesFilters,
-  setParentState
-}) => (state, action) => {
-  const {
-    type,
-    payload
-  } = action;
+const getSearchReducer = _ref => {
+  let {
+    defaultFilters,
+    allEntriesFilters,
+    setParentState
+  } = _ref;
+  return (state, action) => {
+    const {
+      type,
+      payload
+    } = action;
 
-  switch (type) {
-    case ACTION_SET_FILTERS:
-      {
-        setParentState({
-          filters: payload,
-          search: state.search
-        });
-        return { ...state,
-          filters: payload
-        };
-      }
+    switch (type) {
+      case ACTION_SET_FILTERS:
+        {
+          setParentState({
+            filters: payload,
+            search: state.search
+          });
+          return { ...state,
+            filters: payload
+          };
+        }
 
-    case ACTION_SET_SEARCH:
-      {
-        setParentState({
-          filters: state.filters,
-          search: payload
-        });
-        return { ...state,
-          search: payload,
-          searchPattern: getSearchPattern(payload)
-        };
-      }
+      case ACTION_SET_SEARCH:
+        {
+          setParentState({
+            filters: state.filters,
+            search: payload
+          });
+          return { ...state,
+            search: payload,
+            searchPattern: getSearchPattern(payload)
+          };
+        }
 
-    case ACTION_RESET_DEFAULT:
-      {
-        setParentState({
-          filters: defaultFilters,
-          search: ''
-        });
-        return {
-          filters: defaultFilters,
-          search: '',
-          searchPattern: getSearchPattern()
-        };
-      }
+      case ACTION_RESET_DEFAULT:
+        {
+          setParentState({
+            filters: defaultFilters,
+            search: ''
+          });
+          return {
+            filters: defaultFilters,
+            search: '',
+            searchPattern: getSearchPattern()
+          };
+        }
 
-    case ACTION_RESET_ALL:
-      {
-        setParentState({
-          filters: allEntriesFilters,
-          search: ''
-        });
-        return {
-          filters: allEntriesFilters,
-          search: '',
-          searchPattern: getSearchPattern()
-        };
-      }
+      case ACTION_RESET_ALL:
+        {
+          setParentState({
+            filters: allEntriesFilters,
+            search: ''
+          });
+          return {
+            filters: allEntriesFilters,
+            search: '',
+            searchPattern: getSearchPattern()
+          };
+        }
 
-    case ACTION_SET:
-      {
-        return payload;
-      }
+      case ACTION_SET:
+        {
+          return payload;
+        }
 
-    default:
-      return state;
-  }
+      default:
+        return state;
+    }
+  };
 };
 
 export const generateState = (filters, search) => ({
@@ -99,13 +102,14 @@ export const generateState = (filters, search) => ({
   search,
   searchPattern: getSearchPattern(search)
 });
-export const useSearchParams = ({
-  search: parentSearch,
-  filters: parentFilters,
-  defaultFilters,
-  allEntriesFilters,
-  setState: setParentState
-}) => {
+export const useSearchParams = _ref2 => {
+  let {
+    search: parentSearch,
+    filters: parentFilters,
+    defaultFilters,
+    allEntriesFilters,
+    setState: setParentState
+  } = _ref2;
   // When we pass custom filters, set the other flags to true (allEntries)
   const initialFilters = parentFilters ? _merge({}, allEntriesFilters, parentFilters) : defaultFilters;
   const [{

package/lib-esm/layout/footer/footer.js

@@ -21,36 +21,39 @@ ExternalLink.propTypes = {
   /** Link to value */
   to: PropTypes.string.isRequired
 };
-export const Footer = ({
-  className,
-  version
-}) => /*#__PURE__*/React.createElement(Container, {
-  as: "footer",
-  className: cx(css.root, className)
-}, /*#__PURE__*/React.createElement(Box, {
-  padding: ['medium', 'none'],
-  className: css.inner
-}, /*#__PURE__*/React.createElement(Stack, {
-  space: "xsmall"
-}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("nav", {
-  className: css.nav
-}, /*#__PURE__*/React.createElement(ExternalLink, {
-  href: config.githubUrl,
-  className: cx(css.navItem, css.navLink),
-  title: "In-depth bundle analyzer for webpack(bundle size, assets, modules, packages)"
-}, `BundleStats `, version), /*#__PURE__*/React.createElement("span", {
-  className: css.navItem
-}, /*#__PURE__*/React.createElement(ExternalLink, {
-  href: `${config.githubUrl}/issues`,
-  className: css.navLink,
-  title: "Navigate to GitHub and open issue"
-}, "Report issue")), /*#__PURE__*/React.createElement("span", {
-  className: css.navItem
-}, /*#__PURE__*/React.createElement("span", null, "Made by "), /*#__PURE__*/React.createElement(ExternalLink, {
-  className: css.navLink,
-  href: config.siteUrl,
-  title: "Go to RelativeCI - Specialized insights for web bundles"
-}, "RelativeCI")))))));
+export const Footer = _ref => {
+  let {
+    className,
+    version
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Container, {
+    as: "footer",
+    className: cx(css.root, className)
+  }, /*#__PURE__*/React.createElement(Box, {
+    padding: ['medium', 'none'],
+    className: css.inner
+  }, /*#__PURE__*/React.createElement(Stack, {
+    space: "xsmall"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("nav", {
+    className: css.nav
+  }, /*#__PURE__*/React.createElement(ExternalLink, {
+    href: config.githubUrl,
+    className: cx(css.navItem, css.navLink),
+    title: "In-depth bundle analyzer for webpack(bundle size, assets, modules, packages)"
+  }, `BundleStats `, version), /*#__PURE__*/React.createElement("span", {
+    className: css.navItem
+  }, /*#__PURE__*/React.createElement(ExternalLink, {
+    href: `${config.githubUrl}/issues`,
+    className: css.navLink,
+    title: "Navigate to GitHub and open issue"
+  }, "Report issue")), /*#__PURE__*/React.createElement("span", {
+    className: css.navItem
+  }, /*#__PURE__*/React.createElement("span", null, "Made by "), /*#__PURE__*/React.createElement(ExternalLink, {
+    className: css.navLink,
+    href: config.siteUrl,
+    title: "Go to RelativeCI - Specialized insights for web bundles"
+  }, "RelativeCI")))))));
+};
 Footer.defaultProps = {
   className: '',
   version: null

package/lib-esm/layout/header/header.js

@@ -2,20 +2,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import css from './header.module.css';
-export const Header = ({
-  className,
-  renderLeft,
-  renderRight,
-  render
-}) => /*#__PURE__*/React.createElement("header", {
-  className: cx(css.root, className)
-}, renderLeft({
-  className: css.left
-}), render({
-  className: css.center
-}), renderRight({
-  className: css.right
-}));
+export const Header = _ref => {
+  let {
+    className,
+    renderLeft,
+    renderRight,
+    render
+  } = _ref;
+  return /*#__PURE__*/React.createElement("header", {
+    className: cx(css.root, className)
+  }, renderLeft({
+    className: css.left
+  }), render({
+    className: css.center
+  }), renderRight({
+    className: css.right
+  }));
+};
 Header.defaultProps = {
   className: '',
   renderLeft: props => /*#__PURE__*/React.createElement("div", props),

package/lib-esm/layout/header/header.stories.js

@@ -7,36 +7,51 @@ import { Header } from '.';
 const stories = storiesOf('Layout/Header', module);
 stories.addDecorator(getWrapperDecorator());
 stories.add('default', () => /*#__PURE__*/React.createElement(Header, {
-  renderLeft: ({
-    className
-  }) => /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, /*#__PURE__*/React.createElement(Logo, null)),
-  render: ({
-    className
-  }) => /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement("span", null, "Totals"), /*#__PURE__*/React.createElement("span", null, "Assets"), /*#__PURE__*/React.createElement("span", null, "Modules"))),
-  renderRight: ({
-    className
-  }) => /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, /*#__PURE__*/React.createElement(Logo, {
-    kind: "github"
-  }))
+  renderLeft: _ref => {
+    let {
+      className
+    } = _ref;
+    return /*#__PURE__*/React.createElement("div", {
+      className: className
+    }, /*#__PURE__*/React.createElement(Logo, null));
+  },
+  render: _ref2 => {
+    let {
+      className
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("div", {
+      className: className
+    }, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement("span", null, "Totals"), /*#__PURE__*/React.createElement("span", null, "Assets"), /*#__PURE__*/React.createElement("span", null, "Modules")));
+  },
+  renderRight: _ref3 => {
+    let {
+      className
+    } = _ref3;
+    return /*#__PURE__*/React.createElement("div", {
+      className: className
+    }, /*#__PURE__*/React.createElement(Logo, {
+      kind: "github"
+    }));
+  }
 }));
 stories.add('menu on the right', () => /*#__PURE__*/React.createElement(Header, {
-  renderLeft: ({
-    className
-  }) => /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, /*#__PURE__*/React.createElement(Logo, null)),
-  renderRight: ({
-    className
-  }) => /*#__PURE__*/React.createElement("div", {
-    className: className,
-    style: {
-      flexBasis: '100%'
-    }
-  }, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement("span", null, "Totals"), /*#__PURE__*/React.createElement("span", null, "Assets"), /*#__PURE__*/React.createElement("span", null, "Modules")))
+  renderLeft: _ref4 => {
+    let {
+      className
+    } = _ref4;
+    return /*#__PURE__*/React.createElement("div", {
+      className: className
+    }, /*#__PURE__*/React.createElement(Logo, null));
+  },
+  renderRight: _ref5 => {
+    let {
+      className
+    } = _ref5;
+    return /*#__PURE__*/React.createElement("div", {
+      className: className,
+      style: {
+        flexBasis: '100%'
+      }
+    }, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement("span", null, "Totals"), /*#__PURE__*/React.createElement("span", null, "Assets"), /*#__PURE__*/React.createElement("span", null, "Modules")));
+  }
 }));

package/lib-esm/prototypes/typography.stories.js

@@ -26,10 +26,11 @@ stories.add('typography', () => /*#__PURE__*/React.createElement(React.Fragment,
   }
 })))); // eslint-disable-next-line react/prop-types
 
-const Item = ({
-  colorName,
-  valueName = 'normal'
-}) => {
+const Item = _ref => {
+  let {
+    colorName,
+    valueName = 'normal'
+  } = _ref;
   const colorFullName = valueName === 'normal' ? colorName : [colorName, valueName].join('-');
   return /*#__PURE__*/React.createElement("div", {
     style: {

package/lib-esm/stories/wrapper.js

@@ -1,18 +1,24 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
-export const getWrapperDecorator = (customWrapperStyles = {}) => storyFn => {
-  const wrapperStyles = {
-    width: '100%',
-    height: '100%',
-    padding: '24px',
-    ...customWrapperStyles
+export const getWrapperDecorator = function (customWrapperStyles) {
+  if (customWrapperStyles === void 0) {
+    customWrapperStyles = {};
+  }
+
+  return storyFn => {
+    const wrapperStyles = {
+      width: '100%',
+      height: '100%',
+      padding: '24px',
+      ...customWrapperStyles
+    };
+    return /*#__PURE__*/React.createElement(MemoryRouter, {
+      initialEntries: [{
+        pathname: '/',
+        key: 'home'
+      }]
+    }, /*#__PURE__*/React.createElement("div", {
+      style: wrapperStyles
+    }, storyFn()));
   };
-  return /*#__PURE__*/React.createElement(MemoryRouter, {
-    initialEntries: [{
-      pathname: '/',
-      key: 'home'
-    }]
-  }, /*#__PURE__*/React.createElement("div", {
-    style: wrapperStyles
-  }, storyFn()));
 };

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

@@ -4,15 +4,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import css from './container.module.css';
-export const Container = ({
-  className,
-  as: Component,
-  ...restProps
-}) => /*#__PURE__*/React.createElement(Component, {
-  className: cx(css.root, className)
-}, /*#__PURE__*/React.createElement("div", _extends({
-  className: css.inner
-}, restProps)));
+export const Container = _ref => {
+  let {
+    className,
+    as: Component,
+    ...restProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Component, {
+    className: cx(css.root, className)
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    className: css.inner
+  }, restProps)));
+};
 Container.defaultProps = {
   className: '',
   as: 'div'

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

@@ -16,9 +16,12 @@ stories.add('with right alignement', () => /*#__PURE__*/React.createElement(Drop
 stories.add('with render function', () => /*#__PURE__*/React.createElement(Dropdown, {
   glyph: "filter",
   label: "Toggle"
-}, ({
-  dropdownToggle
-}) => /*#__PURE__*/React.createElement("button", {
-  type: "button",
-  onClick: dropdownToggle
-}, "Toggle dropdown")));
+}, _ref => {
+  let {
+    dropdownToggle
+  } = _ref;
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: dropdownToggle
+  }, "Toggle dropdown");
+}));

package/lib-esm/ui/file-name/file-name.js

@@ -2,13 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import css from './file-name.module.css';
-export const FileName = ({
-  className,
-  as: Component,
-  name
-}) => /*#__PURE__*/React.createElement(Component, {
-  className: cx(css.root, className)
-}, name);
+export const FileName = _ref => {
+  let {
+    className,
+    as: Component,
+    name
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Component, {
+    className: cx(css.root, className)
+  }, name);
+};
 FileName.defaultProps = {
   className: '',
   as: 'span',

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

@@ -13,7 +13,10 @@ const getInitialValues = (key, filters) => {
   }
 
   if (typeof filters === 'object') {
-    return Object.entries(filters).map(([groupKey, groupFilters]) => getInitialValues([...(key ? [key] : []), groupKey].join('.'), groupFilters)).reduce((agg, current) => ({ ...agg,
+    return Object.entries(filters).map(_ref => {
+      let [groupKey, groupFilters] = _ref;
+      return getInitialValues([...(key ? [key] : []), groupKey].join('.'), groupFilters);
+    }).reduce((agg, current) => ({ ...agg,
       ...current
     }), {});
   }
@@ -26,10 +29,11 @@ export const filtersDropdownContainer = BaseComponent => {
     constructor(props) {
       super(props);
 
-      this.toggleFilter = (key, value) => this.setState(({
-        values,
-        ...state
-      }) => {
+      this.toggleFilter = (key, value) => this.setState(_ref2 => {
+        let {
+          values,
+          ...state
+        } = _ref2;
         const newState = { ...state,
           values: { ...values,
             [key]: value
@@ -71,9 +75,11 @@ export const filtersDropdownContainer = BaseComponent => {
       };
     }
 
-    static getDerivedStateFromProps({
-      filters
-    }, state) {
+    static getDerivedStateFromProps(_ref3, state) {
+      let {
+        filters
+      } = _ref3;
+
       if (_isEqual(filters, state.values)) {
         return null;
       }