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

package/CHANGELOG.md

@@ -3,7 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [3.2.1-alpha.0](https://github.com/relative-ci/bundle-stats/compare/v3.2.0...v3.2.1-alpha.0) (2021-10-27)
+## [3.2.1-beta.3](https://github.com/relative-ci/bundle-stats/compare/v3.2.0...v3.2.1-beta.3) (2021-11-21)
+
+
+### Bug Fixes
+
+* **ui:** Remove unused icons ([8c337da](https://github.com/relative-ci/bundle-stats/commit/8c337da68a9628d9ef4c9d27f11747b0bc548f29))
+
+
+
+
+
+# [3.2.0-beta.2](https://github.com/relative-ci/bundle-stats/compare/v3.2.0...v3.2.0-beta.2) (2021-11-21)
 
 
 ### Bug Fixes

package/lib/utils.js

@@ -45,14 +45,17 @@ var getRenderChildWithClassName = function getRenderChildWithClassName(className
       return null;
     }
 
-    if (!(child !== null && child !== void 0 && child.props)) {
+    var props = child.props;
+
+    if (!props) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: className
       }, child);
     }
 
-    return /*#__PURE__*/_react["default"].cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
-      className: (0, _classnames["default"])(className, child.props.className)
+    return /*#__PURE__*/_react["default"].cloneElement(child, _objectSpread(_objectSpread({}, props), {}, {
+      className: (0, _classnames["default"])(className, props.className) // eslint-disable-line react/prop-types
+
     }));
   };
 };

package/lib-esm/app/app.js

@@ -33,20 +33,23 @@ const ScrollToTop = () => {
   return null;
 };
 
-const Layout = ({
-  jobs,
-  version,
-  ...props
-}) => /*#__PURE__*/React.createElement("div", {
-  className: css.root
-}, /*#__PURE__*/React.createElement(Header, {
-  className: css.header,
-  jobs: jobs
-}), /*#__PURE__*/React.createElement("main", _extends({
-  className: css.main
-}, props)), /*#__PURE__*/React.createElement(Footer, {
-  version: version
-}));
+const Layout = _ref => {
+  let {
+    jobs,
+    version,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: css.root
+  }, /*#__PURE__*/React.createElement(Header, {
+    className: css.header,
+    jobs: jobs
+  }), /*#__PURE__*/React.createElement("main", _extends({
+    className: css.main
+  }, props)), /*#__PURE__*/React.createElement(Footer, {
+    version: version
+  }));
+};
 
 Layout.propTypes = {
   jobs: PropTypes.arrayOf(PropTypes.object),
@@ -57,10 +60,11 @@ Layout.defaultProps = {
   version: null
 };
 
-const AppComponent = ({
-  version,
-  jobs
-}) => {
+const AppComponent = _ref2 => {
+  let {
+    version,
+    jobs
+  } = _ref2;
   const [bundleStatsState, bundleStatsSetState] = useComponentQueryState(COMPONENT.BUNDLE_ASSETS);
   const [bundlePackagesState, bundlePackagesSetState] = useComponentQueryState(COMPONENT.BUNDLE_PACKAGES);
   const [bundleModulesState, bundleModulesSetState] = useComponentQueryState(COMPONENT.BUNDLE_MODULES);
@@ -112,22 +116,25 @@ const AppComponent = ({
   }, /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(Route, {
     exact: true,
     path: URLS.ASSETS,
-    render: ({
-      location
-    }) => /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
-      space: "medium"
-    }, /*#__PURE__*/React.createElement(Summary, {
-      keys: METRICS_WEBPACK_ASSETS,
-      data: jobs[0].summary,
-      showSummaryItemDelta: jobs.length !== 1
-    }), /*#__PURE__*/React.createElement(Box, {
-      outline: true
-    }, /*#__PURE__*/React.createElement(BundleAssets, _extends({
-      jobs: jobs,
-      setState: bundleStatsSetState
-    }, bundleStatsState, {
-      key: `${location.pathname}_${location.search}`
-    })))))
+    render: _ref3 => {
+      let {
+        location
+      } = _ref3;
+      return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
+        space: "medium"
+      }, /*#__PURE__*/React.createElement(Summary, {
+        keys: METRICS_WEBPACK_ASSETS,
+        data: jobs[0].summary,
+        showSummaryItemDelta: jobs.length !== 1
+      }), /*#__PURE__*/React.createElement(Box, {
+        outline: true
+      }, /*#__PURE__*/React.createElement(BundleAssets, _extends({
+        jobs: jobs,
+        setState: bundleStatsSetState
+      }, bundleStatsState, {
+        key: `${location.pathname}_${location.search}`
+      })))));
+    }
   }), /*#__PURE__*/React.createElement(Route, {
     exact: true,
     path: URLS.MODULES,
@@ -146,22 +153,25 @@ const AppComponent = ({
   }), /*#__PURE__*/React.createElement(Route, {
     exact: true,
     path: URLS.PACKAGES,
-    render: ({
-      location
-    }) => /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
-      space: "medium"
-    }, /*#__PURE__*/React.createElement(Summary, {
-      keys: METRICS_WEBPACK_PACKAGES,
-      data: jobs[0].summary,
-      showSummaryItemDelta: jobs.length !== 1
-    }), /*#__PURE__*/React.createElement(Box, {
-      outline: true
-    }, /*#__PURE__*/React.createElement(BundlePackages, _extends({
-      jobs: jobs
-    }, bundlePackagesState, {
-      setState: bundlePackagesSetState,
-      key: `${location.pathname}_${location.search}`
-    })))))
+    render: _ref4 => {
+      let {
+        location
+      } = _ref4;
+      return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
+        space: "medium"
+      }, /*#__PURE__*/React.createElement(Summary, {
+        keys: METRICS_WEBPACK_PACKAGES,
+        data: jobs[0].summary,
+        showSummaryItemDelta: jobs.length !== 1
+      }), /*#__PURE__*/React.createElement(Box, {
+        outline: true
+      }, /*#__PURE__*/React.createElement(BundlePackages, _extends({
+        jobs: jobs
+      }, bundlePackagesState, {
+        setState: bundlePackagesSetState,
+        key: `${location.pathname}_${location.search}`
+      })))));
+    }
   }), /*#__PURE__*/React.createElement(Route, {
     exact: true,
     path: URLS.OVERVIEW,

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

@@ -5,25 +5,28 @@ import { Container } from '../../ui/container';
 import { JobsHeader } from '../../components/jobs-header';
 import { Logo } from '../../ui/logo';
 import css from './header.module.css';
-export const Header = ({
-  className,
-  jobs
-}) => /*#__PURE__*/React.createElement(Container, {
-  as: "header",
-  className: cx(css.root, className)
-}, /*#__PURE__*/React.createElement("div", {
-  className: css.inner
-}, /*#__PURE__*/React.createElement("a", {
-  className: css.branding,
-  href: "https://github.com/relative-ci/bundle-stats",
-  target: "_blank",
-  rel: "noopener noreferrer nofollow"
-}, /*#__PURE__*/React.createElement(Logo, {
-  className: css.brandingLogo
-}, "BundleStats")), /*#__PURE__*/React.createElement(JobsHeader, {
-  className: css.jobs,
-  jobs: jobs
-})));
+export const Header = _ref => {
+  let {
+    className,
+    jobs
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Container, {
+    as: "header",
+    className: cx(css.root, className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: css.inner
+  }, /*#__PURE__*/React.createElement("a", {
+    className: css.branding,
+    href: "https://github.com/relative-ci/bundle-stats",
+    target: "_blank",
+    rel: "noopener noreferrer nofollow"
+  }, /*#__PURE__*/React.createElement(Logo, {
+    className: css.brandingLogo
+  }, "BundleStats")), /*#__PURE__*/React.createElement(JobsHeader, {
+    className: css.jobs,
+    jobs: jobs
+  })));
+};
 Header.propTypes = {
   className: PropTypes.string,
   jobs: PropTypes.arrayOf(PropTypes.object)

package/lib-esm/components/asset-info/asset-info.js

@@ -12,12 +12,14 @@ import { FileName } from '../../ui/file-name';
 import { ComponentLink } from '../component-link';
 import css from './asset-info.module.css';
 
-const ChunkModulesLink = ({
-  as: Component,
-  chunks,
-  chunkId,
-  name
-}) => {
+const ChunkModulesLink = _ref => {
+  let {
+    as: Component,
+    chunks,
+    chunkId,
+    name
+  } = _ref;
+
   const chunk = _find(chunks, {
     id: chunkId
   });

package/lib-esm/components/bundle-assets/bundle-assets.js

@@ -29,32 +29,39 @@ const RUN_TITLE_CURRENT = 'Current';
 const RUN_TITLE_BASELINE = 'Baseline';
 const RUNS_LABELS = [RUN_TITLE_CURRENT, RUN_TITLE_BASELINE];
 
-const getFileTypeFilters = filters => Object.entries(FILE_TYPE_LABELS).map(([id, label]) => ({
-  [id]: {
-    label,
-    defaultValue: _get(filters, `${ASSET_FILE_TYPE}.${id}`, true)
-  }
-})).reduce((agg, current) => ({ ...agg,
+const getFileTypeFilters = filters => Object.entries(FILE_TYPE_LABELS).map(_ref => {
+  let [id, label] = _ref;
+  return {
+    [id]: {
+      label,
+      defaultValue: _get(filters, `${ASSET_FILE_TYPE}.${id}`, true)
+    }
+  };
+}).reduce((agg, current) => ({ ...agg,
   ...current
 }), {});
 
-const TooltipNotPredictive = ({
-  runs
-}) => /*#__PURE__*/React.createElement("div", {
-  className: css.tooltipNotPredictive
-}, /*#__PURE__*/React.createElement("p", {
-  className: css.tooltipNotPredictiveText
-}, "File name is the same, but the size has changed:"), /*#__PURE__*/React.createElement("table", {
-  className: css.tooltipTable
-}, /*#__PURE__*/React.createElement("tr", null, runs.map(({
-  name,
-  value
-}, index) => {
-  const key = index;
-  return /*#__PURE__*/React.createElement("tr", {
-    key: key
-  }, /*#__PURE__*/React.createElement("th", null, RUNS_LABELS[index]), /*#__PURE__*/React.createElement("td", null, name), /*#__PURE__*/React.createElement("td", null, value));
-}))));
+const TooltipNotPredictive = _ref2 => {
+  let {
+    runs
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("div", {
+    className: css.tooltipNotPredictive
+  }, /*#__PURE__*/React.createElement("p", {
+    className: css.tooltipNotPredictiveText
+  }, "File name is the same, but the size has changed:"), /*#__PURE__*/React.createElement("table", {
+    className: css.tooltipTable
+  }, /*#__PURE__*/React.createElement("tr", null, runs.map((_ref3, index) => {
+    let {
+      name,
+      value
+    } = _ref3;
+    const key = index;
+    return /*#__PURE__*/React.createElement("tr", {
+      key: key
+    }, /*#__PURE__*/React.createElement("th", null, RUNS_LABELS[index]), /*#__PURE__*/React.createElement("td", null, name), /*#__PURE__*/React.createElement("td", null, value));
+  }))));
+};
 
 TooltipNotPredictive.defaultProps = {
   runs: []
@@ -64,50 +71,53 @@ TooltipNotPredictive.propTypes = {
 
 };
 
-const getRenderRowHeader = ({
-  labels,
-  CustomComponentLink,
-  chunks
-}) => item => {
-  const {
-    label,
-    isNotPredictive,
-    runs,
-    isChunk,
-    isEntry,
-    isInitial
-  } = item;
-  return /*#__PURE__*/React.createElement(Popover, {
-    label: /*#__PURE__*/React.createElement(FileName, {
-      name: label
-    }),
-    icon: /*#__PURE__*/React.createElement("div", {
-      className: css.assetInfoFlags
-    }, isNotPredictive && /*#__PURE__*/React.createElement(Tooltip, {
-      className: css.notPredictive,
-      title: /*#__PURE__*/React.createElement(TooltipNotPredictive, {
-        runs: runs
-      })
-    }, /*#__PURE__*/React.createElement(Icon, {
-      className: css.notPredictiveIcon,
-      glyph: "warning"
-    })), isChunk && /*#__PURE__*/React.createElement("span", {
-      title: "Chunk",
-      className: css.flagChunk
-    }, "c"), isEntry && /*#__PURE__*/React.createElement("span", {
-      title: "Entrypoint",
-      className: css.flagEntry
-    }, "e"), isInitial && /*#__PURE__*/React.createElement("span", {
-      title: "Initial",
-      className: css.flagInitial
-    }, "i"))
-  }, /*#__PURE__*/React.createElement(AssetInfo, {
-    className: css.assetInfo,
-    item: item,
-    labels: labels,
-    chunks: chunks,
-    CustomComponentLink: CustomComponentLink
-  }));
+const getRenderRowHeader = _ref4 => {
+  let {
+    labels,
+    CustomComponentLink,
+    chunks
+  } = _ref4;
+  return item => {
+    const {
+      label,
+      isNotPredictive,
+      runs,
+      isChunk,
+      isEntry,
+      isInitial
+    } = item;
+    return /*#__PURE__*/React.createElement(Popover, {
+      label: /*#__PURE__*/React.createElement(FileName, {
+        name: label
+      }),
+      icon: /*#__PURE__*/React.createElement("div", {
+        className: css.assetInfoFlags
+      }, isNotPredictive && /*#__PURE__*/React.createElement(Tooltip, {
+        className: css.notPredictive,
+        title: /*#__PURE__*/React.createElement(TooltipNotPredictive, {
+          runs: runs
+        })
+      }, /*#__PURE__*/React.createElement(Icon, {
+        className: css.notPredictiveIcon,
+        glyph: "warning"
+      })), isChunk && /*#__PURE__*/React.createElement("span", {
+        title: "Chunk",
+        className: css.flagChunk
+      }, "c"), isEntry && /*#__PURE__*/React.createElement("span", {
+        title: "Entrypoint",
+        className: css.flagEntry
+      }, "e"), isInitial && /*#__PURE__*/React.createElement("span", {
+        title: "Initial",
+        className: css.flagInitial
+      }, "i"))
+    }, /*#__PURE__*/React.createElement(AssetInfo, {
+      className: css.assetInfo,
+      item: item,
+      labels: labels,
+      chunks: chunks,
+      CustomComponentLink: CustomComponentLink
+    }));
+  };
 };
 
 export const BundleAssets = props => {
@@ -146,19 +156,22 @@ export const BundleAssets = props => {
     className: cx(css.root, className)
   }, /*#__PURE__*/React.createElement(Toolbar, {
     className: css.toolbar,
-    renderActions: ({
-      actionClassName
-    }) => /*#__PURE__*/React.createElement(FlexStack, {
-      space: "xsmall",
-      className: cx(css.dropdown, actionClassName)
-    }, /*#__PURE__*/React.createElement(SortDropdown, _extends({
-      fields: sortFields
-    }, sort, {
-      onChange: updateSort
-    })), /*#__PURE__*/React.createElement(MetricsTableOptions, {
-      handleViewAll: resetAllFilters,
-      handleResetFilters: resetFilters
-    }))
+    renderActions: _ref5 => {
+      let {
+        actionClassName
+      } = _ref5;
+      return /*#__PURE__*/React.createElement(FlexStack, {
+        space: "xsmall",
+        className: cx(css.dropdown, actionClassName)
+      }, /*#__PURE__*/React.createElement(SortDropdown, _extends({
+        fields: sortFields
+      }, sort, {
+        onChange: updateSort
+      })), /*#__PURE__*/React.createElement(MetricsTableOptions, {
+        handleViewAll: resetAllFilters,
+        handleResetFilters: resetFilters
+      }));
+    }
   }, /*#__PURE__*/React.createElement(FlexStack, null, /*#__PURE__*/React.createElement(MetricsTableSearch, {
     className: css.toolbarSearch,
     placeholder: "Search by name",

package/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js

@@ -17,17 +17,19 @@ import { getColors } from '../../utils';
 import { Stack } from '../../layout/stack';
 import { SummaryItem } from '../summary-item';
 import css from './bundle-assets-totals-chart-bars.module.css';
-export const BundleAssetsTotalsChartBars = ({
-  className,
-  jobs,
-  customComponentLink: CustomComponentLink
-}) => {
+export const BundleAssetsTotalsChartBars = _ref => {
+  let {
+    className,
+    jobs,
+    customComponentLink: CustomComponentLink
+  } = _ref;
   const rootClassName = cx(css.root, className);
   const items = webpack.compareBySection.sizes(jobs);
   const dataGraphs = [];
-  items.forEach(({
-    runs
-  }) => {
+  items.forEach(_ref2 => {
+    let {
+      runs
+    } = _ref2;
     runs.forEach((run, runIndex) => {
       dataGraphs[runIndex] = [...(dataGraphs[runIndex] || []), _get(run, 'value', 0)];
     });
@@ -37,10 +39,11 @@ export const BundleAssetsTotalsChartBars = ({
 
   const maxValue = _max(maxValues);
 
-  const labels = items.map(({
-    key,
-    label
-  }) => {
+  const labels = items.map(_ref3 => {
+    let {
+      key,
+      label
+    } = _ref3;
     const fileType = ASSETS_SIZES_FILE_TYPE_MAP[key];
     const componentData = getBundleAssetsFileTypeComponentLink(fileType, label);
     return /*#__PURE__*/React.createElement(CustomComponentLink, _extends({

package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.js

@@ -5,11 +5,12 @@ import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 import { ASSETS_SIZES_FILE_TYPE_MAP } from '../../constants';
 import { MetricsTable } from '../metrics-table';
 import { ComponentLink } from '../component-link';
-export const BundleAssetsTotalsTable = ({
-  className,
-  jobs,
-  customComponentLink: CustomComponentLink
-}) => {
+export const BundleAssetsTotalsTable = _ref => {
+  let {
+    className,
+    jobs,
+    customComponentLink: CustomComponentLink
+  } = _ref;
   const items = webpack.compareBySection.sizes(jobs);
 
   const renderRowHeader = item => {