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

package/lib-esm/components/duplicate-packages-warning/duplicate-packages-warning.js

@@ -6,21 +6,24 @@ import { Alert } from '../../ui/alert';
 import { ComponentLink } from '../component-link';
 import { Delta } from '../delta';
 import css from './duplicate-packages-warning.module.css';
-var numberMetric = METRIC_TYPES[METRIC_TYPE_NUMERIC];
-export var DuplicatePackagesWarning = function DuplicatePackagesWarning(props) {
-  var className = props.className,
-      duplicatePackagesCount = props.duplicatePackagesCount,
-      CustomComponentLink = props.customComponentLink;
-  var metricRunInfo = getMetricRunInfo(numberMetric, duplicatePackagesCount.current, duplicatePackagesCount.baseline);
+const numberMetric = METRIC_TYPES[METRIC_TYPE_NUMERIC];
+export const DuplicatePackagesWarning = props => {
+  const {
+    className,
+    duplicatePackagesCount,
+    customComponentLink: CustomComponentLink,
+    showDelta
+  } = props;
+  const metricRunInfo = getMetricRunInfo(numberMetric, duplicatePackagesCount.current, duplicatePackagesCount.baseline);
   return /*#__PURE__*/React.createElement(Alert, {
     kind: "warning",
     className: cx(css.root, className)
-  }, "Bundle contains ", /*#__PURE__*/React.createElement(CustomComponentLink, BUNDLE_PACKAGES_DUPLICATE, metricRunInfo.value, metricRunInfo.delta !== 0 && /*#__PURE__*/React.createElement(Delta, {
+  }, `Bundle contains `, /*#__PURE__*/React.createElement(CustomComponentLink, BUNDLE_PACKAGES_DUPLICATE, metricRunInfo.value, showDelta && metricRunInfo.delta !== 0 && /*#__PURE__*/React.createElement(Delta, {
     className: css.titleDelta,
     inverted: true,
     displayValue: metricRunInfo.displayDelta,
     deltaType: metricRunInfo.deltaType
-  }), " duplicate " + (metricRunInfo.value === 1 ? 'package' : 'packages') + "."));
+  }), ` duplicate ${metricRunInfo.value === 1 ? 'package' : 'packages'}.`));
 };
 DuplicatePackagesWarning.propTypes = {
   className: PropTypes.string,
@@ -28,9 +31,11 @@ DuplicatePackagesWarning.propTypes = {
   duplicatePackagesCount: PropTypes.shape({
     current: PropTypes.number,
     baseline: PropTypes.number
-  }).isRequired
+  }).isRequired,
+  showDelta: PropTypes.bool
 };
 DuplicatePackagesWarning.defaultProps = {
   className: '',
-  customComponentLink: ComponentLink
+  customComponentLink: ComponentLink,
+  showDelta: true
 };

package/lib-esm/components/duplicate-packages-warning/duplicate-packages-warning.stories.js

@@ -2,29 +2,24 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { DuplicatePackagesWarning } from '.';
-var stories = storiesOf('Components/DuplicatePackagesWarning', module);
+const stories = storiesOf('Components/DuplicatePackagesWarning', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('single duplicate packages', function () {
-  return /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
-    duplicatePackagesCount: {
-      current: 1,
-      baseline: 0
-    }
-  });
-});
-stories.add('multiple duplicate packages', function () {
-  return /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
-    duplicatePackagesCount: {
-      current: 2,
-      baseline: 3
-    }
-  });
-});
-stories.add('no changes', function () {
-  return /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
-    duplicatePackagesCount: {
-      current: 2,
-      baseline: 2
-    }
-  });
-});
+stories.add('single job', () => /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
+  duplicatePackagesCount: {
+    current: 1,
+    baseline: 0
+  },
+  showDelta: false
+}));
+stories.add('multiple jobs', () => /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
+  duplicatePackagesCount: {
+    current: 2,
+    baseline: 3
+  }
+}));
+stories.add('no changes', () => /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
+  duplicatePackagesCount: {
+    current: 2,
+    baseline: 2
+  }
+}));

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

@@ -8,30 +8,33 @@ import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { Icon } from '../../ui/icon';
 import css from './job-header.module.css';
-export var JobHeader = function JobHeader(props) {
-  var className = props.className,
-      tag = props.tag,
-      job = props.job,
-      children = props.children;
+export const JobHeader = props => {
+  const {
+    className,
+    tag,
+    job,
+    children
+  } = props;
 
-  var _get2 = _get(job, "meta." + SOURCE_PATH_WEBPACK_STATS, {}),
-      builtAt = _get2.builtAt,
-      hash = _get2.hash;
+  const {
+    builtAt,
+    hash
+  } = _get(job, `meta.${SOURCE_PATH_WEBPACK_STATS}`, {});
 
-  var rootClassName = cx(css.root, className);
+  const rootClassName = cx(css.root, className);
   return /*#__PURE__*/React.createElement(Stack, {
     className: rootClassName,
     space: "xxsmall"
   }, /*#__PURE__*/React.createElement("h1", {
     className: css.title
-  }, /*#__PURE__*/React.createElement("span", null, "#" + job.internalBuildNumber), tag && /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", null, `#${job.internalBuildNumber}`), tag && /*#__PURE__*/React.createElement("span", {
     className: css.tag
   }, tag)), /*#__PURE__*/React.createElement(FlexStack, {
     className: css.meta,
     space: "xxsmall"
   }, builtAt && /*#__PURE__*/React.createElement("span", {
     className: css.metaItem,
-    title: formatDate(builtAt) + " " + formatTime(builtAt)
+    title: `${formatDate(builtAt)} ${formatTime(builtAt)}`
   }, /*#__PURE__*/React.createElement(Icon, {
     glyph: "clock",
     className: css.metaIcon

package/lib-esm/components/job-header/job-header.stories.js

@@ -2,9 +2,9 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { JobHeader } from '.';
-var stories = storiesOf('Components/JobHeader', module);
+const stories = storiesOf('Components/JobHeader', module);
 stories.addDecorator(getWrapperDecorator());
-var JOB = {
+const JOB = {
   internalBuildNumber: 1,
   meta: {
     webpack: {
@@ -21,19 +21,13 @@ var JOB = {
     }
   }
 };
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(JobHeader, {
-    job: JOB
-  });
-});
-stories.add('with tag', function () {
-  return /*#__PURE__*/React.createElement(JobHeader, {
-    job: JOB,
-    tag: "current"
-  });
-});
-stories.add('with custom content', function () {
-  return /*#__PURE__*/React.createElement(JobHeader, {
-    job: JOB
-  }, /*#__PURE__*/React.createElement("p", null, "Lorem ipsum dolor sit amed"));
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(JobHeader, {
+  job: JOB
+}));
+stories.add('with tag', () => /*#__PURE__*/React.createElement(JobHeader, {
+  job: JOB,
+  tag: "current"
+}));
+stories.add('with custom content', () => /*#__PURE__*/React.createElement(JobHeader, {
+  job: JOB
+}, /*#__PURE__*/React.createElement("p", null, "Lorem ipsum dolor sit amed")));

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

@@ -1,34 +1,30 @@
-var _excluded = ["as", "className", "meta"];
-
 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';
 import css from './job-meta.module.css';
-export var JobMeta = function JobMeta(props) {
-  var Component = props.as,
-      className = props.className,
-      meta = props.meta,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var rootClassName = cx(css.root, className);
+export const JobMeta = props => {
+  const {
+    as: Component,
+    className,
+    meta,
+    ...restProps
+  } = props;
+  const rootClassName = cx(css.root, className);
   return /*#__PURE__*/React.createElement(Component, _extends({
     className: rootClassName
-  }, restProps), meta.map(function (_ref, index) {
-    var title = _ref.title,
-        content = _ref.content;
-    var key = index;
+  }, restProps), meta.map(({
+    title,
+    content
+  }, index) => {
+    const key = index;
     return /*#__PURE__*/React.createElement("div", {
       className: css.item,
       key: key
     }, title && /*#__PURE__*/React.createElement("h2", {
       className: css.itemTitle
-    }, title), content.map(function (item) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, item);
-    }));
+    }, title), content.map(item => /*#__PURE__*/React.createElement(React.Fragment, null, item)));
   }));
 };
 JobMeta.propTypes = {

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

@@ -2,16 +2,14 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { JobMeta } from '.';
-var stories = storiesOf('Components/JobMeta', module);
+const stories = storiesOf('Components/JobMeta', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(JobMeta, {
-    meta: [{
-      title: '#123',
-      content: [/*#__PURE__*/React.createElement("p", null, "July 3th ")]
-    }, {
-      title: '#122',
-      content: [/*#__PURE__*/React.createElement("p", null, "July 4th")]
-    }]
-  });
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(JobMeta, {
+  meta: [{
+    title: '#123',
+    content: [/*#__PURE__*/React.createElement("p", null, "July 3th ")]
+  }, {
+    title: '#122',
+    content: [/*#__PURE__*/React.createElement("p", null, "July 4th")]
+  }]
+}));

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

@@ -1,26 +1,20 @@
-var _excluded = ["as", "title", "internalBuildNumber", "children"];
-
 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 { Tooltip } from '../../ui/tooltip';
 import css from './job-name.module.css';
-export var JobName = function JobName(_ref) {
-  var Component = _ref.as,
-      title = _ref.title,
-      internalBuildNumber = _ref.internalBuildNumber,
-      children = _ref.children,
-      restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement(Tooltip, _extends({
-    className: css.root,
-    as: Component,
-    title: title
-  }, restProps), children || "Job #" + internalBuildNumber);
-};
+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}`);
 JobName.defaultProps = {
   as: 'span',
   title: '',

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

@@ -2,29 +2,21 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { JobName } from '.';
-var stories = storiesOf('Components/JobName', module);
+const stories = storiesOf('Components/JobName', module);
 stories.addDecorator(getWrapperDecorator({
   padding: '64px'
 }));
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(JobName, {
-    title: "View job details",
-    internalBuildNumber: 10
-  });
-});
-stories.add('custom component', function () {
-  return /*#__PURE__*/React.createElement(JobName, {
-    title: "View job details",
-    internalBuildNumber: 10,
-    as: function as(props) {
-      return /*#__PURE__*/React.createElement("strong", props);
-    }
-  });
-});
-stories.add('render', function () {
-  return /*#__PURE__*/React.createElement(JobName, {
-    title: "View job details"
-  }, /*#__PURE__*/React.createElement("a", {
-    href: "https://relative-ci.com/test"
-  }, "#10"));
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(JobName, {
+  title: "View job details",
+  internalBuildNumber: 10
+}));
+stories.add('custom component', () => /*#__PURE__*/React.createElement(JobName, {
+  title: "View job details",
+  internalBuildNumber: 10,
+  as: props => /*#__PURE__*/React.createElement("strong", props)
+}));
+stories.add('render', () => /*#__PURE__*/React.createElement(JobName, {
+  title: "View job details"
+}, /*#__PURE__*/React.createElement("a", {
+  href: "https://relative-ci.com/test"
+}, "#10")));

package/lib-esm/components/jobs-header/jobs-header.js

@@ -5,21 +5,21 @@ import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { JobHeader } from '../job-header';
 import css from './jobs-header.module.css';
-export var JobsHeader = function JobsHeader(props) {
-  var className = props.className,
-      jobs = props.jobs;
-  var rootClassName = cx(css.root, className);
+export const JobsHeader = props => {
+  const {
+    className,
+    jobs
+  } = props;
+  const rootClassName = cx(css.root, className);
   return /*#__PURE__*/React.createElement(FlexStack, {
     className: rootClassName,
     space: "none"
-  }, jobs == null ? void 0 : jobs.map(function (job, index) {
-    return /*#__PURE__*/React.createElement(JobHeader, {
-      key: job.internalBuildNumber || index,
-      className: css.item,
-      job: job,
-      tag: index === 0 ? I18N.CURRENT : I18N.BASELINE
-    });
-  }));
+  }, jobs == null ? void 0 : jobs.map((job, index) => /*#__PURE__*/React.createElement(JobHeader, {
+    key: job.internalBuildNumber || index,
+    className: css.item,
+    job: job,
+    tag: index === 0 ? I18N.CURRENT : I18N.BASELINE
+  })));
 };
 JobsHeader.propTypes = {
   /** Adopted child classname */

package/lib-esm/components/jobs-header/jobs-header.stories.js

@@ -2,100 +2,94 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { JobsHeader } from '.';
-var stories = storiesOf('Components/JobsHeader', module);
+const stories = storiesOf('Components/JobsHeader', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(JobsHeader, {
-    jobs: [{
-      internalBuildNumber: 1,
-      meta: {
-        webpack: {
-          builtAt: '2019-01-01T00:00:00.000Z',
-          hash: 'abcd1234'
-        }
-      },
-      summary: {
-        webpack: {
-          totalSizeByTypeALL: {
-            current: 1000000,
-            baseline: 900000
-          }
-        }
+stories.add('default', () => /*#__PURE__*/React.createElement(JobsHeader, {
+  jobs: [{
+    internalBuildNumber: 1,
+    meta: {
+      webpack: {
+        builtAt: '2019-01-01T00:00:00.000Z',
+        hash: 'abcd1234'
       }
-    }]
-  });
-});
-stories.add('multiple jobs', function () {
-  return /*#__PURE__*/React.createElement(JobsHeader, {
-    jobs: [{
-      internalBuildNumber: 1,
-      meta: {
-        webpack: {
-          builtAt: '2019-01-01T00:00:00.000Z',
-          hash: 'abcd1234'
-        }
-      },
-      summary: {
-        webpack: {
-          totalSizeByTypeALL: {
-            current: 1000000,
-            baseline: 900000
-          }
+    },
+    summary: {
+      webpack: {
+        totalSizeByTypeALL: {
+          current: 1000000,
+          baseline: 900000
         }
       }
-    }, {
-      internalBuildNumber: 2,
-      meta: {
-        webpack: {
-          builtAt: '2019-01-02T00:00:00.000Z',
-          hash: 'efgh1234'
-        }
-      },
-      summary: {
-        webpack: {
-          totalSizeByTypeALL: {
-            current: 900000,
-            baseline: 0
-          }
-        }
+    }
+  }]
+}));
+stories.add('multiple jobs', () => /*#__PURE__*/React.createElement(JobsHeader, {
+  jobs: [{
+    internalBuildNumber: 1,
+    meta: {
+      webpack: {
+        builtAt: '2019-01-01T00:00:00.000Z',
+        hash: 'abcd1234'
       }
-    }]
-  });
-});
-stories.add('multiple equal jobs', function () {
-  return /*#__PURE__*/React.createElement(JobsHeader, {
-    jobs: [{
-      internalBuildNumber: 1,
-      meta: {
-        webpack: {
-          builtAt: '2019-01-01T00:00:00.000Z',
-          hash: 'abcd1234'
+    },
+    summary: {
+      webpack: {
+        totalSizeByTypeALL: {
+          current: 1000000,
+          baseline: 900000
         }
-      },
-      summary: {
-        webpack: {
-          totalSizeByTypeALL: {
-            current: 1000000,
-            baseline: 1000000
-          }
+      }
+    }
+  }, {
+    internalBuildNumber: 2,
+    meta: {
+      webpack: {
+        builtAt: '2019-01-02T00:00:00.000Z',
+        hash: 'efgh1234'
+      }
+    },
+    summary: {
+      webpack: {
+        totalSizeByTypeALL: {
+          current: 900000,
+          baseline: 0
         }
       }
-    }, {
-      internalBuildNumber: 2,
-      meta: {
-        webpack: {
-          builtAt: '2019-01-02T00:00:00.000Z',
-          hash: 'efgh1234'
+    }
+  }]
+}));
+stories.add('multiple equal jobs', () => /*#__PURE__*/React.createElement(JobsHeader, {
+  jobs: [{
+    internalBuildNumber: 1,
+    meta: {
+      webpack: {
+        builtAt: '2019-01-01T00:00:00.000Z',
+        hash: 'abcd1234'
+      }
+    },
+    summary: {
+      webpack: {
+        totalSizeByTypeALL: {
+          current: 1000000,
+          baseline: 1000000
         }
-      },
-      summary: {
-        webpack: {
-          totalSizeByTypeALL: {
-            current: 1000000,
-            baseline: 1000000
-          }
+      }
+    }
+  }, {
+    internalBuildNumber: 2,
+    meta: {
+      webpack: {
+        builtAt: '2019-01-02T00:00:00.000Z',
+        hash: 'efgh1234'
+      }
+    },
+    summary: {
+      webpack: {
+        totalSizeByTypeALL: {
+          current: 1000000,
+          baseline: 1000000
         }
       }
-    }]
-  });
-});
+    }
+  }]
+}));

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

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

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

@@ -4,20 +4,16 @@ import { createJobs } from '@bundle-stats/utils';
 import lighthouse from '../../../__mocks__/lighthouse.json';
 import { getWrapperDecorator } from '../../stories';
 import { LighthouseTable } from '.';
-var stories = storiesOf('Components/LighthouseTable', module);
+const stories = storiesOf('Components/LighthouseTable', module);
 stories.addDecorator(getWrapperDecorator());
-var JOBS = createJobs([{
-  lighthouse: lighthouse
+const JOBS = createJobs([{
+  lighthouse
 }, {
-  lighthouse: lighthouse
+  lighthouse
 }]);
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(LighthouseTable, {
-    jobs: JOBS
-  });
-});
-stories.add('no baseline', function () {
-  return /*#__PURE__*/React.createElement(LighthouseTable, {
-    jobs: [JOBS[1]]
-  });
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(LighthouseTable, {
+  jobs: JOBS
+}));
+stories.add('no baseline', () => /*#__PURE__*/React.createElement(LighthouseTable, {
+  jobs: [JOBS[1]]
+}));