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

package/lib-esm/components/bundle-packages/bundle-packages.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'
+  }
+};

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

@@ -1,11 +1,9 @@
-var _PropTypes$shape;
-
 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, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { PACKAGE_FILTERS, PACKAGES_SEPARATOR, getBundleModulesBySearch, getBundlePackagesByNameComponentLink } from '@bundle-stats/utils';
+import { PACKAGE_FILTERS, PACKAGES_SEPARATOR, PACKAGE_ID_SEPARATOR, getBundleModulesBySearch, getBundlePackagesByNameComponentLink } from '@bundle-stats/utils';
 import config from '../../config.json';
 import I18N from '../../i18n';
 import { Stack } from '../../layout/stack';
@@ -23,13 +21,15 @@ import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
 import css from './bundle-packages.module.css';
 
-var PackagePopoverContent = function PackagePopoverContent(_ref) {
-  var name = _ref.name,
-      fullName = _ref.fullName,
-      path = _ref.path,
-      duplicate = _ref.duplicate,
-      CustomComponentLink = _ref.CustomComponentLink;
-  var normalizedPackagePath = path || "node_modules/" + fullName.split(PACKAGES_SEPARATOR).join('/node_modules/') + "/";
+const PackagePopoverContent = ({
+  name,
+  fullName,
+  path,
+  duplicate,
+  CustomComponentLink
+}) => {
+  const normalizedPackagePath = path || `node_modules/${fullName.split(PACKAGES_SEPARATOR).join('/node_modules/')}/`;
+  const [normalizedName, packageId] = name.split(PACKAGE_ID_SEPARATOR);
   return /*#__PURE__*/React.createElement(Stack, {
     space: "xxsmall",
     className: css.packagePopover
@@ -37,7 +37,9 @@ var PackagePopoverContent = function PackagePopoverContent(_ref) {
     space: "xxxsmall"
   }, /*#__PURE__*/React.createElement("h3", {
     className: css.packagePopoverTitle
-  }, name), /*#__PURE__*/React.createElement("p", {
+  }, normalizedName, packageId && /*#__PURE__*/React.createElement("span", {
+    className: css.packagePopoverTitleIndex
+  }, `${PACKAGE_ID_SEPARATOR}${packageId}`)), /*#__PURE__*/React.createElement("p", {
     className: css.packagePopoverPath
   }, /*#__PURE__*/React.createElement(FileName, {
     className: css.packagePopoverPathValue,
@@ -47,19 +49,19 @@ var PackagePopoverContent = function PackagePopoverContent(_ref) {
   }, /*#__PURE__*/React.createElement("li", {
     className: css.packagePopoverItem
   }, /*#__PURE__*/React.createElement("a", {
-    href: "https://www.npmjs.com/package/" + name,
+    href: `https://www.npmjs.com/package/${normalizedName}`,
     target: "_blank",
     rel: "noreferrer"
   }, "npmjs.com")), /*#__PURE__*/React.createElement("li", {
     className: css.packagePopoverItem
   }, /*#__PURE__*/React.createElement("a", {
-    href: "https://bundlephobia.com/result?p=" + name,
+    href: `https://bundlephobia.com/result?p=${normalizedName}`,
     target: "_blank",
     rel: "noreferrer"
   }, "bundlephobia.com"))), /*#__PURE__*/React.createElement(Stack, {
     space: "xxxsmall",
     className: css.packagePopover.actions
-  }, duplicate && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CustomComponentLink, getBundlePackagesByNameComponentLink(name), "View all duplicate instances")), /*#__PURE__*/React.createElement(CustomComponentLink, getBundleModulesBySearch(normalizedPackagePath), "View package modules")));
+  }, duplicate && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CustomComponentLink, getBundlePackagesByNameComponentLink(normalizedName), "View all duplicate instances")), /*#__PURE__*/React.createElement(CustomComponentLink, getBundleModulesBySearch(normalizedPackagePath), "Search modules by package path")));
 };
 
 PackagePopoverContent.propTypes = {
@@ -73,19 +75,19 @@ PackagePopoverContent.defaultProps = {
   path: ''
 };
 
-var PackageRowHeader = function PackageRowHeader(_ref2) {
-  var item = _ref2.item,
-      CustomComponentLink = _ref2.CustomComponentLink;
-  var packageNames = item.label.split(PACKAGES_SEPARATOR);
-
-  var _ref3 = item.runs[0] || {},
-      path = _ref3.path;
-
+const PackageRowHeader = ({
+  item,
+  CustomComponentLink
+}) => {
+  const packageNames = item.label.split(PACKAGES_SEPARATOR);
+  const {
+    path
+  } = item.runs[0] || {};
   return /*#__PURE__*/React.createElement("span", {
     className: css.packageNames
-  }, packageNames.map(function (packageName, index) {
+  }, packageNames.map((packageName, index) => {
     // Render duplicate flag only for the last entry
-    var duplicateFlag = index === packageNames.length - 1 && item.duplicate && /*#__PURE__*/React.createElement("span", {
+    const duplicateFlag = index === packageNames.length - 1 && item.duplicate && /*#__PURE__*/React.createElement("span", {
       className: css.duplicate,
       title: "Duplicate package"
     }, "D");
@@ -113,69 +115,69 @@ PackageRowHeader.propTypes = {
   }).isRequired,
   CustomComponentLink: PropTypes.elementType.isRequired
 };
-export var BundlePackages = function BundlePackages(props) {
-  var _ref5;
-
-  var className = props.className,
-      jobs = props.jobs,
-      items = props.items,
-      updateFilters = props.updateFilters,
-      resetFilters = props.resetFilters,
-      resetAllFilters = props.resetAllFilters,
-      totalRowCount = props.totalRowCount,
-      filters = props.filters,
-      sortItems = props.sortItems,
-      sort = props.sort,
-      updateSort = props.updateSort,
-      search = props.search,
-      updateSearch = props.updateSearch,
-      hasActiveFilters = props.hasActiveFilters,
-      CustomComponentLink = props.customComponentLink;
-  var emptyMessage = /*#__PURE__*/React.createElement(EmptySet, {
+export const BundlePackages = props => {
+  const {
+    className,
+    jobs,
+    items,
+    updateFilters,
+    resetFilters,
+    resetAllFilters,
+    totalRowCount,
+    filters,
+    sortFields,
+    sort,
+    updateSort,
+    search,
+    updateSearch,
+    hasActiveFilters,
+    customComponentLink: CustomComponentLink
+  } = props;
+  const emptyMessage = /*#__PURE__*/React.createElement(EmptySet, {
     resources: "packages",
     filtered: totalRowCount !== 0,
     handleResetFilters: resetFilters,
     handleViewAll: resetAllFilters
   });
-  var renderRowHeader = useCallback(function (item) {
-    return /*#__PURE__*/React.createElement(PackageRowHeader, {
-      item: item,
-      CustomComponentLink: CustomComponentLink
-    });
-  }, [CustomComponentLink]);
+  const renderRowHeader = useCallback(item => /*#__PURE__*/React.createElement(PackageRowHeader, {
+    item: item,
+    CustomComponentLink: CustomComponentLink
+  }), [CustomComponentLink]);
   return /*#__PURE__*/React.createElement("section", {
     className: cx(css.root, className)
   }, /*#__PURE__*/React.createElement(Toolbar, {
     className: css.toolbar,
-    renderActions: function renderActions(_ref4) {
-      var actionClassName = _ref4.actionClassName;
-      return /*#__PURE__*/React.createElement(FlexStack, {
-        space: "xxsmall",
-        className: cx(css.dropdown, actionClassName)
-      }, /*#__PURE__*/React.createElement(SortDropdown, _extends({
-        items: sortItems
-      }, sort, {
-        onChange: updateSort
-      })), /*#__PURE__*/React.createElement(MetricsTableOptions, {
-        handleViewAll: resetAllFilters,
-        handleResetFilters: resetFilters
-      }));
-    }
+    renderActions: ({
+      actionClassName
+    }) => /*#__PURE__*/React.createElement(FlexStack, {
+      space: "xxsmall",
+      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",
     search: search,
     updateSearch: updateSearch
   }), /*#__PURE__*/React.createElement(Filters, {
-    filters: (_ref5 = {}, _ref5[PACKAGE_FILTERS.CHANGED] = {
-      label: 'Changed',
-      defaultValue: filters[PACKAGE_FILTERS.CHANGED],
-      disabled: jobs.length <= 1
-    }, _ref5[PACKAGE_FILTERS.DUPLICATE] = {
-      label: 'Duplicate',
-      defaultValue: filters[PACKAGE_FILTERS.DUPLICATE]
-    }, _ref5),
-    label: "Filters (" + items.length + "/" + totalRowCount + ")",
+    filters: {
+      [PACKAGE_FILTERS.CHANGED]: {
+        label: 'Changed',
+        defaultValue: filters[PACKAGE_FILTERS.CHANGED],
+        disabled: jobs.length <= 1
+      },
+      [PACKAGE_FILTERS.DUPLICATE]: {
+        label: 'Duplicate',
+        defaultValue: filters[PACKAGE_FILTERS.DUPLICATE]
+      }
+    },
+    label: `Filters (${items.length}/${totalRowCount})`,
     onChange: updateFilters,
     hasActiveFilters: hasActiveFilters
   }))), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(MetricsTable, {
@@ -186,7 +188,7 @@ export var BundlePackages = function BundlePackages(props) {
     showHeaderSum: true,
     title: /*#__PURE__*/React.createElement(MetricsTableTitle, {
       title: I18N.PACKAGES,
-      info: "(" + items.length + "/" + totalRowCount + ")",
+      info: `(${items.length}/${totalRowCount})`,
       popoverInfo: I18N.PACKAGES_INFO,
       popoverHref: config.documentation.packages
     })
@@ -219,10 +221,12 @@ BundlePackages.propTypes = {
     changed: PropTypes.bool
   }).isRequired,
   hasActiveFilters: PropTypes.bool,
-  sortItems: PropTypes.shape((_PropTypes$shape = {}, _PropTypes$shape[PropTypes.string] = PropTypes.shape({
-    label: PropTypes.string,
-    defaultDirection: PropTypes.bool
-  }), _PropTypes$shape)).isRequired,
+  sortFields: PropTypes.shape({
+    [PropTypes.string]: PropTypes.shape({
+      label: PropTypes.string,
+      defaultDirection: PropTypes.bool
+    })
+  }).isRequired,
   sort: PropTypes.shape({
     sortBy: PropTypes.string,
     direction: PropTypes.string

package/lib-esm/components/bundle-packages/bundle-packages.module.css

@@ -47,6 +47,11 @@
   min-width: 320px;
 }
 
+.packagePopoverTitleIndex {
+  color: var(--color-text-light);
+  font-weight: normal;
+}
+
 .packagePopoverPathValue {
   padding: var(--space-xxxsmall);
   background: var(--color-highlight-warning);

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,20 @@
-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 = ({
+  section,
+  title,
+  params,
+  ...props
+}) => {
+  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,13 @@ 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 = ({
+  className,
+  displayValue,
+  deltaType,
+  inverted
+}) => {
+  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
+}));