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

package/lib-esm/components/job-meta/job-meta.js

@@ -14,17 +14,18 @@ export const JobMeta = props => {
   const rootClassName = cx(css.root, className);
   return /*#__PURE__*/React.createElement(Component, _extends({
     className: rootClassName
-  }, restProps), meta.map(({
-    title,
-    content
-  }, index) => {
+  }, restProps), meta.map((_ref, index) => {
+    let {
+      title,
+      content
+    } = _ref;
     const key = index;
     return /*#__PURE__*/React.createElement("div", {
       className: css.item,
       key: key
     }, title && /*#__PURE__*/React.createElement("h2", {
       className: css.itemTitle
-    }, title), content.map(item => /*#__PURE__*/React.createElement(React.Fragment, null, item)));
+    }, title), content.map(item => item));
   }));
 };
 JobMeta.propTypes = {

package/lib-esm/components/job-name/job-name.js

@@ -4,17 +4,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Tooltip } from '../../ui/tooltip';
 import css from './job-name.module.css';
-export const JobName = ({
-  as: Component,
-  title,
-  internalBuildNumber,
-  children,
-  ...restProps
-}) => /*#__PURE__*/React.createElement(Tooltip, _extends({
-  className: css.root,
-  as: Component,
-  title: title
-}, restProps), children || `Job #${internalBuildNumber}`);
+export const JobName = _ref => {
+  let {
+    as: Component,
+    title,
+    internalBuildNumber,
+    children,
+    ...restProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Tooltip, _extends({
+    className: css.root,
+    as: Component,
+    title: title
+  }, restProps), children || `Job #${internalBuildNumber}`);
+};
 JobName.defaultProps = {
   as: 'span',
   title: '',

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

@@ -4,15 +4,16 @@ import cx from 'classnames';
 import styles from './metric.module.css'; // Separate value and unit
 
 const EXTRACT_VALUE_UNIT_PATTERN = /([\d|.|,| ]*)(\w*|%)$/;
-export const Metric = ({
-  className,
-  value,
-  formatter,
-  inline,
-  anchored,
-  children,
-  enhanced
-}) => {
+export const Metric = _ref => {
+  let {
+    className,
+    value,
+    formatter,
+    inline,
+    anchored,
+    children,
+    enhanced
+  } = _ref;
   const formattedValue = formatter(value); // eslint-disable-next-line no-unused-vars
 
   const [matched, displayValue, displayUnit] = enhanced && formattedValue ? formattedValue.match(EXTRACT_VALUE_UNIT_PATTERN) : [null, formattedValue, null];

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

@@ -125,16 +125,17 @@ const getRows = (runs, items, renderRowHeader) => items.map((item, index) => {
   };
 });
 
-export const MetricsTable = ({
-  className,
-  renderRowHeader,
-  runs,
-  items,
-  emptyMessage,
-  showHeaderSum,
-  headerRows,
-  title
-}) => {
+export const MetricsTable = _ref => {
+  let {
+    className,
+    renderRowHeader,
+    runs,
+    items,
+    emptyMessage,
+    showHeaderSum,
+    headerRows,
+    title
+  } = _ref;
   const {
     headers,
     columnClassNames
@@ -161,16 +162,19 @@ export const MetricsTable = ({
     return /*#__PURE__*/React.createElement(Table.Tr, {
       className: rowClassName
     }, 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, {
+  })), /*#__PURE__*/React.createElement(Table.TBody, null, !_isEmpty(rows) ? rows.map(_ref2 => {
+    let {
+      key,
+      className: rowClassName,
+      cells
+    } = _ref2;
+    return /*#__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))));

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

@@ -14,11 +14,13 @@ export const MetricsTableOptions = props => {
   return /*#__PURE__*/React.createElement(Dropdown, _extends({
     className: className,
     glyph: "menu"
-  }, restProps), ({
-    MenuItem,
-    menu,
-    menuItemClassName
-  }) => {
+  }, restProps), _ref => {
+    let {
+      MenuItem,
+      menu,
+      menuItemClassName
+    } = _ref;
+
     const getButtonOnClick = handler => () => {
       handler();
       menu.toggle();

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

@@ -12,38 +12,68 @@ import { FlexStack } from '../../layout/flex-stack';
 import { ComponentLink } from '../component-link';
 import { SummaryItem } from '../summary-item';
 import css from './summary.module.css';
-export const Summary = ({
-  className,
-  size,
-  keys,
-  data,
-  loading,
-  showSummaryItemDelta,
-  summaryItemLink: SummaryItemCustomLink
-}) => /*#__PURE__*/React.createElement(Box, {
-  outline: true,
-  className: cx(css.root, className)
-}, /*#__PURE__*/React.createElement(FlexStack, {
-  className: css.items
-}, Array.from(METRIC_COMPONENT_LINKS).filter(([metricId]) => keys.includes(metricId)).map(([metricId, metricOptions]) => /*#__PURE__*/React.createElement(SummaryItem, {
-  as: ({
-    className: itemClassName,
-    ...itemProps
-  }) => /*#__PURE__*/React.createElement(Box, _extends({
+
+const CustomSummaryItem = _ref => {
+  let {
+    className,
+    metricOptions,
+    SummaryItemCustomLink,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Box, _extends({
     padding: ['xsmall', 'small'],
-    className: cx(itemClassName, css.summaryItemLink)
-  }, itemProps, {
+    className: cx(className, css.summaryItemLink)
+  }, props, {
     as: SummaryItemCustomLink
-  }, metricOptions.link)),
-  size: size,
-  key: metricId,
-  id: metricId,
-  data: _get(data, metricId),
-  loading: loading,
-  showMetricDescription: true,
-  showDelta: showSummaryItemDelta && metricOptions.showDelta !== false,
-  className: css.item
-}))));
+  }, metricOptions.link));
+};
+
+CustomSummaryItem.propTypes = {
+  className: PropTypes.string,
+  metricOptions: PropTypes.shape({
+    link: PropTypes.any // eslint-disable-line react/forbid-prop-types
+
+  }).isRequired,
+  SummaryItemCustomLink: PropTypes.elementType.isRequired
+};
+CustomSummaryItem.defaultProps = {
+  className: ''
+};
+export const Summary = _ref2 => {
+  let {
+    className,
+    size,
+    keys,
+    data,
+    loading,
+    showSummaryItemDelta,
+    summaryItemLink: SummaryItemCustomLink
+  } = _ref2;
+  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(_ref3 => {
+    let [metricId] = _ref3;
+    return keys.includes(metricId);
+  }).map(_ref4 => {
+    let [metricId, metricOptions] = _ref4;
+    return /*#__PURE__*/React.createElement(SummaryItem, {
+      as: CustomSummaryItem,
+      className: css.item,
+      metricOptions: metricOptions,
+      SummaryItemCustomLink: SummaryItemCustomLink,
+      size: size,
+      key: metricId,
+      id: metricId,
+      data: _get(data, metricId),
+      loading: loading,
+      showMetricDescription: true,
+      showDelta: showSummaryItemDelta && metricOptions.showDelta !== false
+    });
+  })));
+};
 Summary.defaultProps = {
   className: '',
   data: null,

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

@@ -34,12 +34,15 @@ stories.add('single run', () => /*#__PURE__*/React.createElement(Summary, {
 }));
 stories.add('with link', () => /*#__PURE__*/React.createElement(Summary, {
   data: MULTIPLE_JOBS[0].summary,
-  summaryItemLink: ({
-    keyProps,
-    ...props
-  }) => /*#__PURE__*/React.createElement("button", _extends({
-    type: "button"
-  }, props, {
-    onClick: () => alert(JSON.stringify(keyProps))
-  }))
+  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

@@ -12,10 +12,12 @@ import { Metric } from '../metric';
 import { Delta } from '../delta';
 import css from './summary-item.module.css';
 
-const MetricInfo = ({
-  description,
-  url
-}) => {
+const MetricInfo = _ref => {
+  let {
+    description,
+    url
+  } = _ref;
+
   // Workaround cases where the parent is a link
   const readMoreOnClick = () => {
     window.open(url);
@@ -37,17 +39,18 @@ MetricInfo.propTypes = {
 MetricInfo.defaultProps = {
   url: ''
 };
-export const SummaryItem = ({
-  className,
-  as: Component,
-  size,
-  id,
-  data,
-  loading,
-  showDelta,
-  showMetricDescription,
-  ...props
-}) => {
+export const SummaryItem = _ref2 => {
+  let {
+    className,
+    as: Component,
+    size,
+    id,
+    data,
+    loading,
+    showDelta,
+    showMetricDescription,
+    ...props
+  } = _ref2;
   const {
     baseline,
     current

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

@@ -8,7 +8,7 @@ const ACTION_RESET_ALL = 'RESET_ALL';
 const ACTION_SET = 'SET';
 
 const getSearchPattern = search => {
-  let searchPattern = new RegExp(/.*/);
+  let searchPattern = /.*/;
 
   if (!search || !search.trim()) {
     return searchPattern;
@@ -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