@bundle-stats/ui 3.2.0-beta.1 → 3.2.1-beta.10

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]]
+}));

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

@@ -3,23 +3,21 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import styles from './metric.module.css'; // Separate value and unit
 
-var EXTRACT_VALUE_UNIT_PATTERN = /([\d|.|,| ]*)(\w*|%)$/;
-export var Metric = function Metric(_ref) {
-  var className = _ref.className,
-      value = _ref.value,
-      formatter = _ref.formatter,
-      inline = _ref.inline,
-      anchored = _ref.anchored,
-      children = _ref.children,
-      enhanced = _ref.enhanced;
-  var formattedValue = formatter(value); // eslint-disable-next-line no-unused-vars
+const EXTRACT_VALUE_UNIT_PATTERN = /([\d|.|,| ]*)(\w*|%)$/;
+export const Metric = _ref => {
+  let {
+    className,
+    value,
+    formatter,
+    inline,
+    anchored,
+    children,
+    enhanced
+  } = _ref;
+  const formattedValue = formatter(value); // eslint-disable-next-line no-unused-vars
 
-  var _ref2 = enhanced && formattedValue ? formattedValue.match(EXTRACT_VALUE_UNIT_PATTERN) : [null, formattedValue, null],
-      matched = _ref2[0],
-      displayValue = _ref2[1],
-      displayUnit = _ref2[2];
-
-  var rootClassName = cx(className, styles.root, inline && styles.inline, anchored && styles.anchored);
+  const [matched, displayValue, displayUnit] = enhanced && formattedValue ? formattedValue.match(EXTRACT_VALUE_UNIT_PATTERN) : [null, formattedValue, null];
+  const rootClassName = cx(className, styles.root, inline && styles.inline, anchored && styles.anchored);
   return /*#__PURE__*/React.createElement("span", {
     className: rootClassName
   }, /*#__PURE__*/React.createElement("span", {
@@ -39,9 +37,7 @@ Metric.defaultProps = {
   inline: false,
   value: 0,
   children: [],
-  formatter: function formatter(val) {
-    return val;
-  }
+  formatter: val => val
 };
 Metric.propTypes = {
   className: PropTypes.string,

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

@@ -3,64 +3,42 @@ import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Delta } from '../delta';
 import { Metric } from '.';
-var stories = storiesOf('Components/Metric', module);
+const stories = storiesOf('Components/Metric', module);
 stories.addDecorator(getWrapperDecorator({
   maxWidth: '200px'
 }));
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(Metric, {
-    value: 100,
-    formatter: function formatter(v) {
-      return v + "ms";
-    }
-  });
-});
-stories.add('modifier: formatted value', function () {
-  return /*#__PURE__*/React.createElement(Metric, {
-    value: "100KB"
-  });
-});
-stories.add('modifier: enhanced', function () {
-  return /*#__PURE__*/React.createElement(Metric, {
-    value: 100,
-    formatter: function formatter(v) {
-      return v + "ms";
-    },
-    enhanced: true
-  });
-});
-stories.add('modifier: delta', function () {
-  return /*#__PURE__*/React.createElement(Metric, {
-    value: 100,
-    formatter: function formatter(v) {
-      return v + "ms";
-    }
-  }, /*#__PURE__*/React.createElement(Delta, {
-    displayValue: "+10%",
-    deltaType: "POSITIVE"
-  }));
-});
-stories.add('modifier: inline', function () {
-  return /*#__PURE__*/React.createElement(Metric, {
-    value: 100,
-    formatter: function formatter(v) {
-      return v + "ms";
-    },
-    inline: true
-  }, /*#__PURE__*/React.createElement(Delta, {
-    displayValue: "+10%",
-    deltaType: "POSITIVE"
-  }));
-});
-stories.add('modifier: anchored', function () {
-  return /*#__PURE__*/React.createElement(Metric, {
-    value: 100,
-    formatter: function formatter(v) {
-      return v + "ms";
-    },
-    anchored: true
-  }, /*#__PURE__*/React.createElement(Delta, {
-    displayValue: "+10%",
-    deltaType: "POSITIVE"
-  }));
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(Metric, {
+  value: 100,
+  formatter: v => `${v}ms`
+}));
+stories.add('modifier: formatted value', () => /*#__PURE__*/React.createElement(Metric, {
+  value: "100KB"
+}));
+stories.add('modifier: enhanced', () => /*#__PURE__*/React.createElement(Metric, {
+  value: 100,
+  formatter: v => `${v}ms`,
+  enhanced: true
+}));
+stories.add('modifier: delta', () => /*#__PURE__*/React.createElement(Metric, {
+  value: 100,
+  formatter: v => `${v}ms`
+}, /*#__PURE__*/React.createElement(Delta, {
+  displayValue: "+10%",
+  deltaType: "POSITIVE"
+})));
+stories.add('modifier: inline', () => /*#__PURE__*/React.createElement(Metric, {
+  value: 100,
+  formatter: v => `${v}ms`,
+  inline: true
+}, /*#__PURE__*/React.createElement(Delta, {
+  displayValue: "+10%",
+  deltaType: "POSITIVE"
+})));
+stories.add('modifier: anchored', () => /*#__PURE__*/React.createElement(Metric, {
+  value: 100,
+  formatter: v => `${v}ms`,
+  anchored: true
+}, /*#__PURE__*/React.createElement(Delta, {
+  displayValue: "+10%",
+  deltaType: "POSITIVE"
+})));