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

package/lib-esm/components/bundle-packages/bundle-packages.stories.js

@@ -7,58 +7,46 @@ import baselineStats from '../../../__mocks__/webpack-stats.baseline.json';
 import currentStats from '../../../__mocks__/webpack-stats.current.json';
 import { getWrapperDecorator } from '../../stories';
 import { BundlePackages } from '.';
-var JOBS = createJobs([{
+const JOBS = createJobs([{
   webpack: currentStats
 }, {
   webpack: baselineStats
 }]);
-var currentJob = JOBS[0],
-    baselineJob = JOBS[1];
-var stories = storiesOf('Components/BundlePackages', module);
+const [currentJob, baselineJob] = JOBS;
+const stories = storiesOf('Components/BundlePackages', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(BundlePackages, {
-    jobs: [baselineJob]
-  });
-});
-stories.add('multiple jobs', function () {
-  return /*#__PURE__*/React.createElement(BundlePackages, {
-    jobs: JOBS
-  });
-});
-stories.add('custom filters', function () {
-  var _ref;
-
-  return /*#__PURE__*/React.createElement(BundlePackages, {
-    jobs: JOBS,
-    filters: (_ref = {}, _ref[PACKAGE_FILTERS.CHANGED] = false, _ref[PACKAGE_FILTERS.DUPLICATE] = true, _ref)
-  });
-});
-stories.add('empty packages', function () {
-  return /*#__PURE__*/React.createElement(BundlePackages, {
-    jobs: [_set(_merge({}, currentJob), 'metrics.webpack.packages', {}), _set(_merge({}, baselineJob), 'metrics.webpack.packages', {})]
-  });
-});
-stories.add('empty filtered packages', function () {
-  return /*#__PURE__*/React.createElement(BundlePackages, {
-    jobs: [_set(_merge({}, currentJob), 'metrics.webpack.packages', {
-      'package-a': {
-        value: 100
-      }
-    }), _set(_merge({}, baselineJob), 'metrics.webpack.packages', {
-      'package-a': {
-        value: 100
-      }
-    })]
-  });
-});
-var JOBS_EMPTY_BASELINE = createJobs([{
+stories.add('default', () => /*#__PURE__*/React.createElement(BundlePackages, {
+  jobs: [baselineJob]
+}));
+stories.add('multiple jobs', () => /*#__PURE__*/React.createElement(BundlePackages, {
+  jobs: JOBS
+}));
+stories.add('custom filters', () => /*#__PURE__*/React.createElement(BundlePackages, {
+  jobs: JOBS,
+  filters: {
+    [PACKAGE_FILTERS.CHANGED]: false,
+    [PACKAGE_FILTERS.DUPLICATE]: true
+  }
+}));
+stories.add('empty packages', () => /*#__PURE__*/React.createElement(BundlePackages, {
+  jobs: [_set(_merge({}, currentJob), 'metrics.webpack.packages', {}), _set(_merge({}, baselineJob), 'metrics.webpack.packages', {})]
+}));
+stories.add('empty filtered packages', () => /*#__PURE__*/React.createElement(BundlePackages, {
+  jobs: [_set(_merge({}, currentJob), 'metrics.webpack.packages', {
+    'package-a': {
+      value: 100
+    }
+  }), _set(_merge({}, baselineJob), 'metrics.webpack.packages', {
+    'package-a': {
+      value: 100
+    }
+  })]
+}));
+const JOBS_EMPTY_BASELINE = createJobs([{
   webpack: currentStats
 }, {
   webpack: null
 }]);
-stories.add('empty baseline', function () {
-  return /*#__PURE__*/React.createElement(BundlePackages, {
-    jobs: JOBS_EMPTY_BASELINE
-  });
-});
+stories.add('empty baseline', () => /*#__PURE__*/React.createElement(BundlePackages, {
+  jobs: JOBS_EMPTY_BASELINE
+}));

package/lib-esm/components/bundle-packages/bundle-packages.utils.js

@@ -0,0 +1,44 @@
+import _uniq from "lodash/uniq";
+import _flatten from "lodash/flatten";
+import _get from "lodash/get";
+import { PACKAGE_FILTERS } from '@bundle-stats/utils';
+import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-packages.constants'; // Get a list of duplicate packages across jobs
+
+export const getDuplicatePackages = jobs => {
+  const jobsDuplicatePackages = jobs.map(job => {
+    var _job$insights, _job$insights$webpack, _job$insights$webpack2;
+
+    const insightsData = (job == null ? void 0 : (_job$insights = job.insights) == null ? void 0 : (_job$insights$webpack = _job$insights.webpack) == null ? void 0 : (_job$insights$webpack2 = _job$insights$webpack.duplicatePackages) == null ? void 0 : _job$insights$webpack2.data) || {};
+    return Object.values(insightsData).flat();
+  });
+  return _uniq(_flatten(jobsDuplicatePackages));
+};
+export const getRowFilter = filters => item => {
+  if (filters[PACKAGE_FILTERS.CHANGED] && !item.changed) {
+    return false;
+  }
+
+  if (filters[PACKAGE_FILTERS.DUPLICATE] && !item.duplicate) {
+    return false;
+  }
+
+  return true;
+};
+export const getCustomSort = sortId => item => {
+  if (sortId === SORT_BY_NAME) {
+    return item.key;
+  }
+
+  if (sortId === SORT_BY_DELTA) {
+    return _get(item, 'runs[0].deltaPercentage', 0);
+  }
+
+  if (sortId === SORT_BY_SIZE) {
+    return _get(item, 'runs[0].value', 0);
+  }
+
+  return [!item.changed, item.key];
+};
+export const getAddRowDuplicateFlag = duplicateJobs => row => ({ ...row,
+  duplicate: duplicateJobs.includes(row.key)
+});

package/lib-esm/components/bundle-packages/index.js

@@ -1,3 +1,88 @@
-import { enhance } from './bundle-packages.container';
+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); }
+
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { PACKAGE_FILTERS } from '@bundle-stats/utils';
+import * as webpack from '@bundle-stats/utils/lib-esm/webpack/compare';
+import { useRowsFilter } from '../../hooks/rows-filter';
+import { useRowsSort } from '../../hooks/rows-sort';
+import { useSearchParams } from '../../hooks/search-params';
+import { SORT_BY } from './bundle-packages.constants';
 import { BundlePackages as BundlePackagesComponent } from './bundle-packages';
-export var BundlePackages = enhance(BundlePackagesComponent);
+import { getDuplicatePackages, getAddRowDuplicateFlag, getRowFilter, getCustomSort } from './bundle-packages.utils';
+export const BundlePackages = props => {
+  const {
+    jobs,
+    search,
+    filters,
+    setState,
+    sortBy,
+    direction,
+    ...restProps
+  } = props;
+  const {
+    defaultFilters,
+    allEntriesFilters
+  } = useMemo(() => ({
+    defaultFilters: {
+      [PACKAGE_FILTERS.CHANGED]: (jobs == null ? void 0 : jobs.length) > 1,
+      [PACKAGE_FILTERS.DUPLICATE]: false
+    },
+    allEntriesFilters: {
+      [PACKAGE_FILTERS.CHANGED]: false,
+      [PACKAGE_FILTERS.DUPLICATE]: false
+    }
+  }), [jobs]);
+  const searchParams = useSearchParams({
+    search,
+    filters,
+    defaultFilters,
+    allEntriesFilters,
+    setState
+  });
+  const {
+    rows,
+    totalRowCount
+  } = useMemo(() => {
+    const duplicateJobs = getDuplicatePackages(jobs);
+    const result = webpack.compareBySection.packages(jobs, [getAddRowDuplicateFlag(duplicateJobs)]);
+    return {
+      rows: result,
+      totalRowCount: result.length
+    };
+  }, [jobs]);
+  const filteredRows = useRowsFilter({
+    rows,
+    searchPattern: searchParams.searchPattern,
+    filters: searchParams.filters,
+    getRowFilter
+  });
+  const sortParams = useRowsSort({
+    rows: filteredRows,
+    sortFields: SORT_BY,
+    sortBy,
+    sortDirection: direction,
+    getCustomSort
+  });
+  return /*#__PURE__*/React.createElement(BundlePackagesComponent, _extends({
+    jobs: jobs
+  }, restProps, searchParams, sortParams, {
+    totalRowCount: totalRowCount
+  }));
+};
+BundlePackages.propTypes = {
+  jobs: PropTypes.arrayOf(PropTypes.object).isRequired,
+  // eslint-disable-line react/forbid-prop-types
+  filters: PropTypes.object,
+  // eslint-disable-line react/forbid-prop-types
+  search: PropTypes.string,
+  sortBy: PropTypes.string,
+  direction: PropTypes.string,
+  setState: PropTypes.func.isRequired
+};
+BundlePackages.defaultProps = {
+  filters: undefined,
+  search: undefined,
+  sortBy: undefined,
+  direction: undefined
+};

package/lib-esm/components/component-link.js

@@ -1,24 +1,21 @@
-var _excluded = ["section", "title", "params"];
-
 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 { Link } from 'react-router-dom';
 import { getComponentStateQueryString } from '@bundle-stats/utils';
 import { SECTION_URLS } from '../constants';
-export var ComponentLink = function ComponentLink(_ref) {
-  var section = _ref.section,
-      title = _ref.title,
-      params = _ref.params,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  var search = getComponentStateQueryString(params);
-  var location = {
+export const ComponentLink = _ref => {
+  let {
+    section,
+    title,
+    params,
+    ...props
+  } = _ref;
+  const search = getComponentStateQueryString(params);
+  const location = {
     pathname: SECTION_URLS[section],
-    search: search
+    search
   };
   return /*#__PURE__*/React.createElement(Link, _extends({
     to: location,

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

@@ -2,12 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import css from './delta.module.css';
-export var Delta = function Delta(_ref) {
-  var className = _ref.className,
-      displayValue = _ref.displayValue,
-      deltaType = _ref.deltaType,
-      inverted = _ref.inverted;
-  var rootClassName = cx(css.root, className, inverted && css.inverted, css[deltaType]);
+export const Delta = _ref => {
+  let {
+    className,
+    displayValue,
+    deltaType,
+    inverted
+  } = _ref;
+  const rootClassName = cx(css.root, className, inverted && css.inverted, css[deltaType]);
   return /*#__PURE__*/React.createElement("span", {
     className: rootClassName
   }, displayValue);

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

@@ -2,42 +2,30 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Delta } from '.';
-var stories = storiesOf('Components/Delta', module);
+const stories = storiesOf('Components/Delta', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(Delta, {
-    displayValue: "20%",
-    deltaType: "POSITIVE"
-  });
-});
-stories.add('negative', function () {
-  return /*#__PURE__*/React.createElement(Delta, {
-    displayValue: "20%",
-    deltaType: "NEGATIVE"
-  });
-});
-stories.add('slightlyNegative', function () {
-  return /*#__PURE__*/React.createElement(Delta, {
-    displayValue: "1%",
-    deltaType: "LOW_NEGATIVE"
-  });
-});
-stories.add('slightlyPositive', function () {
-  return /*#__PURE__*/React.createElement(Delta, {
-    displayValue: "1%",
-    deltaType: "LOW_POSITIVE"
-  });
-});
-stories.add('empty', function () {
-  return /*#__PURE__*/React.createElement(Delta, {
-    displayValue: "0%",
-    deltaType: "NO_CHANGE"
-  });
-});
-stories.add('inverted', function () {
-  return /*#__PURE__*/React.createElement(Delta, {
-    displayValue: "1%",
-    deltaType: "LOW_NEGATIVE",
-    inverted: true
-  });
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(Delta, {
+  displayValue: "20%",
+  deltaType: "POSITIVE"
+}));
+stories.add('negative', () => /*#__PURE__*/React.createElement(Delta, {
+  displayValue: "20%",
+  deltaType: "NEGATIVE"
+}));
+stories.add('slightlyNegative', () => /*#__PURE__*/React.createElement(Delta, {
+  displayValue: "1%",
+  deltaType: "LOW_NEGATIVE"
+}));
+stories.add('slightlyPositive', () => /*#__PURE__*/React.createElement(Delta, {
+  displayValue: "1%",
+  deltaType: "LOW_POSITIVE"
+}));
+stories.add('empty', () => /*#__PURE__*/React.createElement(Delta, {
+  displayValue: "0%",
+  deltaType: "NO_CHANGE"
+}));
+stories.add('inverted', () => /*#__PURE__*/React.createElement(Delta, {
+  displayValue: "1%",
+  deltaType: "LOW_NEGATIVE",
+  inverted: true
+}));

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

@@ -6,22 +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,
-      showDelta = props.showDelta;
-  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, showDelta && 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,

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

@@ -2,30 +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 job', function () {
-  return /*#__PURE__*/React.createElement(DuplicatePackagesWarning, {
-    duplicatePackagesCount: {
-      current: 1,
-      baseline: 0
-    },
-    showDelta: false
-  });
-});
-stories.add('multiple jobs', 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,31 @@
-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((_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(function (item) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, item);
-    }));
+    }, title), content.map(item => 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,25 +1,22 @@
-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);
-
+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);
+  }, restProps), children || `Job #${internalBuildNumber}`);
 };
 JobName.defaultProps = {
   as: 'span',