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

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

@@ -1,9 +1,3 @@
-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 from 'react';
 import { storiesOf } from '@storybook/react';
 import { createJobs } from '@bundle-stats/utils';
@@ -16,78 +10,64 @@ import baselineData from '../../../../fixtures/job.baseline.json'; // eslint-dis
 /* eslint-enable */
 
 import { App } from '.';
-var CURRENT_SOURCE = {
-  webpack: _objectSpread({
+const CURRENT_SOURCE = {
+  webpack: {
     builtAt: currentData.builtAt,
-    hash: currentData.hash
-  }, currentData.rawData.webpack)
+    hash: currentData.hash,
+    ...currentData.rawData.webpack
+  }
 };
-var BASELINE_SOURCE = {
-  webpack: _objectSpread({
+const BASELINE_SOURCE = {
+  webpack: {
     builtAt: baselineData.builtAt,
-    hash: baselineData.hash
-  }, baselineData.rawData.webpack)
+    hash: baselineData.hash,
+    ...baselineData.rawData.webpack
+  }
 };
-var JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE]);
-var MULTIPLE_JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE, {
-  webpack: _objectSpread(_objectSpread({
+const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE]);
+const NO_BASELINE_JOBS = createJobs([CURRENT_SOURCE]);
+const MULTIPLE_JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE, {
+  webpack: {
     builtAt: baselineData.builtAt,
-    hash: 'aaaa1111'
-  }, baselineData.rawData.webpack), {}, {
-    assets: baselineData.rawData.webpack.assets.filter(function (asset) {
-      return asset.name.match(/.(css|js)$/);
-    }),
+    hash: 'aaaa1111',
+    ...baselineData.rawData.webpack,
+    assets: baselineData.rawData.webpack.assets.filter(asset => asset.name.match(/.(css|js)$/)),
     modules: baselineData.rawData.webpack.modules.slice(0, 100)
-  })
+  }
 }]);
-var CURRENT_JOB = JOBS[0],
-    BASELINE_JOB = JOBS[1];
-var EMPTY_BASELINE = createJobs([{
+const [CURRENT_JOB, BASELINE_JOB] = JOBS;
+const EMPTY_BASELINE = createJobs([{
   webpack: currentData.rawData.webpack
 }, {
   webpack: null
 }]);
-var stories = storiesOf('App', module);
-stories.addDecorator(function (storyFn) {
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      margin: '-1rem'
-    }
-  }, storyFn());
-});
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(App, {
-    jobs: [CURRENT_JOB, BASELINE_JOB],
-    version: "1.0"
-  });
-});
-stories.add('no insights', function () {
-  return /*#__PURE__*/React.createElement(App, {
-    jobs: [_objectSpread(_objectSpread({}, CURRENT_JOB), {}, {
-      insights: undefined
-    }), BASELINE_JOB]
-  });
-});
-stories.add('no baseline', function () {
-  return /*#__PURE__*/React.createElement(App, {
-    jobs: [CURRENT_JOB],
-    version: "1.0"
-  });
-});
-stories.add('empty baseline', function () {
-  return /*#__PURE__*/React.createElement(App, {
-    jobs: EMPTY_BASELINE,
-    version: "1.0"
-  });
-});
-stories.add('multiple baselines', function () {
-  return /*#__PURE__*/React.createElement(App, {
-    jobs: MULTIPLE_JOBS,
-    version: "1.0"
-  });
-});
-stories.add('empty', function () {
-  return /*#__PURE__*/React.createElement(App, {
-    verison: "1.0"
-  });
-});
+const stories = storiesOf('App', module);
+stories.addDecorator(storyFn => /*#__PURE__*/React.createElement("div", {
+  style: {
+    margin: '-1rem'
+  }
+}, storyFn()));
+stories.add('default', () => /*#__PURE__*/React.createElement(App, {
+  jobs: [CURRENT_JOB, BASELINE_JOB],
+  version: "1.0"
+}));
+stories.add('no insights', () => /*#__PURE__*/React.createElement(App, {
+  jobs: [{ ...CURRENT_JOB,
+    insights: undefined
+  }, BASELINE_JOB]
+}));
+stories.add('no baseline', () => /*#__PURE__*/React.createElement(App, {
+  jobs: NO_BASELINE_JOBS,
+  version: "1.0"
+}));
+stories.add('empty baseline', () => /*#__PURE__*/React.createElement(App, {
+  jobs: EMPTY_BASELINE,
+  version: "1.0"
+}));
+stories.add('multiple baselines', () => /*#__PURE__*/React.createElement(App, {
+  jobs: MULTIPLE_JOBS,
+  version: "1.0"
+}));
+stories.add('empty', () => /*#__PURE__*/React.createElement(App, {
+  verison: "1.0"
+}));

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

@@ -5,26 +5,25 @@ import { Container } from '../../ui/container';
 import { JobsHeader } from '../../components/jobs-header';
 import { Logo } from '../../ui/logo';
 import css from './header.module.css';
-export var Header = function Header(_ref) {
-  var className = _ref.className,
-      jobs = _ref.jobs;
-  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
-  })));
-};
+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
+})));
 Header.propTypes = {
   className: PropTypes.string,
   jobs: PropTypes.arrayOf(PropTypes.object)

package/lib-esm/assets/icons/arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg>

package/lib-esm/assets/icons/cancel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>

package/lib-esm/assets/icons/clock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>

package/lib-esm/assets/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>

package/lib-esm/assets/icons/commit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-commit"><circle cx="12" cy="12" r="4"></circle><line x1="1.05" y1="12" x2="7" y2="12"></line><line x1="17.01" y1="12" x2="22.96" y2="12"></line></svg>

package/lib-esm/assets/icons/filter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart" transform="rotate(-90deg)"><line x1="12" y1="20" x2="12" y2="10"></line><line x1="18" y1="20" x2="18" y2="4"></line><line x1="6" y1="20" x2="6" y2="16"></line></svg>

package/lib-esm/assets/icons/help.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>

package/lib-esm/assets/icons/menu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>

package/lib-esm/assets/icons/warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>

package/lib-esm/assets/icons.svg

@@ -0,0 +1 @@
+<svg width="16" height="16"><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="afeather afeather-arrow-down" id="arrow" xmlns="http://www.w3.org/2000/svg"><path d="M12 5v14M19 12l-7 7-7-7"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bfeather bfeather-x-circle" id="cancel" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cfeather cfeather-clock" id="clock" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="dfeather dfeather-x" id="close" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="efeather efeather-git-commit" id="commit" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="4"/><path d="M1.05 12H7M17.01 12h5.95"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ffeather ffeather-bar-chart" id="filter" xmlns="http://www.w3.org/2000/svg"><path d="M12 20V10M18 20V4M6 20v-4"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="gfeather gfeather-help-circle" id="help" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="hfeather hfeather-menu" id="menu" xmlns="http://www.w3.org/2000/svg"><path d="M3 12h18M3 6h18M3 18h18"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="sort" xmlns="http://www.w3.org/2000/svg"><path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="jfeather jfeather-alert-triangle" id="warning" xmlns="http://www.w3.org/2000/svg"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4M12 17h.01"/></symbol></svg>

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

@@ -12,13 +12,13 @@ import { FileName } from '../../ui/file-name';
 import { ComponentLink } from '../component-link';
 import css from './asset-info.module.css';
 
-var ChunkModulesLink = function ChunkModulesLink(_ref) {
-  var Component = _ref.as,
-      chunks = _ref.chunks,
-      chunkId = _ref.chunkId,
-      name = _ref.name;
-
-  var chunk = _find(chunks, {
+const ChunkModulesLink = ({
+  as: Component,
+  chunks,
+  chunkId,
+  name
+}) => {
+  const chunk = _find(chunks, {
     id: chunkId
   });
 
@@ -26,9 +26,9 @@ var ChunkModulesLink = function ChunkModulesLink(_ref) {
     return null;
   }
 
-  var chunkIds = _map(chunks, 'id');
+  const chunkIds = _map(chunks, 'id');
 
-  var fileType = getModuleFileType(name);
+  const fileType = getModuleFileType(name);
   return /*#__PURE__*/React.createElement(Component, _extends({
     className: css.viewModules
   }, getBundleModulesByChunk(chunkIds, chunkId, fileType)), "View chunk modules");
@@ -46,18 +46,20 @@ ChunkModulesLink.defaultProps = {
   chunkId: '',
   name: ''
 };
-export var AssetInfo = function AssetInfo(props) {
-  var className = props.className,
-      chunks = props.chunks,
-      item = props.item,
-      labels = props.labels,
-      CustomComponentLink = props.CustomComponentLink;
+export const AssetInfo = props => {
+  const {
+    className,
+    chunks,
+    item,
+    labels,
+    CustomComponentLink
+  } = props;
   return /*#__PURE__*/React.createElement(Stack, {
     space: "xsmall",
     className: cx(css.root, className)
-  }, item.runs.map(function (run, index) {
-    var Title = index !== 0 ? 'h4' : 'h3';
-    var key = "asset-info-" + ((run == null ? void 0 : run.name) || index) + "-" + index;
+  }, item.runs.map((run, index) => {
+    const Title = index !== 0 ? 'h4' : 'h3';
+    const key = `asset-info-${(run == null ? void 0 : run.name) || index}-${index}`;
     return /*#__PURE__*/React.createElement(Stack, {
       space: "xxxsmall",
       key: key

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

@@ -2,38 +2,34 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { AssetInfo } from '.';
-var stories = storiesOf('Components/AssetInfo', module);
+const stories = storiesOf('Components/AssetInfo', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(AssetInfo, {
-    item: {
-      runs: [{
-        name: 'static/vendor.abcd1234.js'
-      }, {
-        name: 'static/vendor.defg5678.js'
-      }]
-    },
-    labels: ['Job #2', 'Job #1']
-  });
-});
-stories.add('with chunks', function () {
-  return /*#__PURE__*/React.createElement(AssetInfo, {
-    item: {
-      runs: [{
-        name: 'static/vendor.abcd1234.js',
-        chunkId: '1'
-      }, {
-        name: 'static/vendor.defg5678.js',
-        chunkId: '2'
-      }]
-    },
-    chunks: [{
-      id: '1',
-      name: 'vendor'
+stories.add('default', () => /*#__PURE__*/React.createElement(AssetInfo, {
+  item: {
+    runs: [{
+      name: 'static/vendor.abcd1234.js'
     }, {
-      id: '2',
-      name: 'app~common~utils~shared'
-    }],
-    labels: ['Job #2', 'Job #1']
-  });
-});
+      name: 'static/vendor.defg5678.js'
+    }]
+  },
+  labels: ['Job #2', 'Job #1']
+}));
+stories.add('with chunks', () => /*#__PURE__*/React.createElement(AssetInfo, {
+  item: {
+    runs: [{
+      name: 'static/vendor.abcd1234.js',
+      chunkId: '1'
+    }, {
+      name: 'static/vendor.defg5678.js',
+      chunkId: '2'
+    }]
+  },
+  chunks: [{
+    id: '1',
+    name: 'vendor'
+  }, {
+    id: '2',
+    name: 'app~common~utils~shared'
+  }],
+  labels: ['Job #2', 'Job #1']
+}));

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

@@ -2,10 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as browsertime from '@bundle-stats/utils';
 import { MetricsTable } from '../metrics-table';
-export var BrowsertimeTable = function BrowsertimeTable(props) {
-  var className = props.className,
-      jobs = props.jobs;
-  var items = browsertime.compare(jobs);
+export const BrowsertimeTable = props => {
+  const {
+    className,
+    jobs
+  } = props;
+  const items = browsertime.compare(jobs);
   return /*#__PURE__*/React.createElement(MetricsTable, {
     className: className,
     items: items,

package/lib-esm/components/browsertime-table/browsertime-table.stories.js

@@ -5,21 +5,17 @@ import * as browsertime from '@bundle-stats/utils/lib-esm/browsertime';
 import browsertimeSourceFixtures from '../../../../../fixtures/browsertime.json';
 import { getWrapperDecorator } from '../../stories';
 import { BrowsertimeTable } from '.';
-var browsertimeFixtures = browsertime.filter(browsertimeSourceFixtures);
-var JOBS = createJobs([{
+const browsertimeFixtures = browsertime.filter(browsertimeSourceFixtures);
+const JOBS = createJobs([{
   browsertime: browsertimeFixtures
 }, {
   browsertime: browsertimeFixtures
 }]);
-var stories = storiesOf('Components/BrowsertimeTable', module);
+const stories = storiesOf('Components/BrowsertimeTable', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(BrowsertimeTable, {
-    jobs: JOBS
-  });
-});
-stories.add('no baseline', function () {
-  return /*#__PURE__*/React.createElement(BrowsertimeTable, {
-    jobs: [JOBS[1]]
-  });
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(BrowsertimeTable, {
+  jobs: JOBS
+}));
+stories.add('no baseline', () => /*#__PURE__*/React.createElement(BrowsertimeTable, {
+  jobs: [JOBS[1]]
+}));

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

@@ -1,15 +1,17 @@
-var _SORT_BY;
-
-export var SORT_BY_NAME = 'name';
-export var SORT_BY_SIZE = 'size';
-export var SORT_BY_DELTA = 'delta';
-export var SORT_BY = (_SORT_BY = {}, _SORT_BY[SORT_BY_NAME] = {
-  label: 'Name',
-  defaultDirection: 'asc'
-}, _SORT_BY[SORT_BY_DELTA] = {
-  label: 'Delta',
-  defaultDirection: 'desc'
-}, _SORT_BY[SORT_BY_SIZE] = {
-  label: 'Size',
-  defaultDirection: 'desc'
-}, _SORT_BY);
+export const SORT_BY_NAME = 'name';
+export const SORT_BY_SIZE = 'size';
+export const SORT_BY_DELTA = 'delta';
+export const SORT_BY = {
+  [SORT_BY_NAME]: {
+    label: 'Name',
+    defaultDirection: 'asc'
+  },
+  [SORT_BY_DELTA]: {
+    label: 'Delta',
+    defaultDirection: 'desc'
+  },
+  [SORT_BY_SIZE]: {
+    label: 'Size',
+    defaultDirection: 'desc'
+  }
+};