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

package/lib-esm/constants.js

@@ -1,36 +1,31 @@
-var _SECTION_URLS;
-
-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 { FILE_TYPES, SECTIONS } from '@bundle-stats/utils';
-export var NO_SPACE = 'no-space';
-export var SPACE_XXXSMALL = 'xxxsmall';
-export var SPACE_XXSMALL = 'xxsmall';
-export var SPACE_XSMALL = 'xsmall';
-export var SPACE_SMALL = 'small';
-export var SPACE_MEDIUM = 'medium';
-export var SPACE_LARGE = 'large';
-export var SPACE_XLARGE = 'xlarge';
-export var SPACE_XXLARGE = 'xxlarge';
-export var SPACE_XXXLARGE = 'xxxlarge';
-export var SPACES = [NO_SPACE, SPACE_XXXSMALL, SPACE_XXSMALL, SPACE_XSMALL, SPACE_SMALL, SPACE_MEDIUM, SPACE_LARGE, SPACE_XLARGE, SPACE_XXLARGE, SPACE_XXXLARGE];
-export var URLS = {
+export const NO_SPACE = 'no-space';
+export const SPACE_XXXSMALL = 'xxxsmall';
+export const SPACE_XXSMALL = 'xxsmall';
+export const SPACE_XSMALL = 'xsmall';
+export const SPACE_SMALL = 'small';
+export const SPACE_MEDIUM = 'medium';
+export const SPACE_LARGE = 'large';
+export const SPACE_XLARGE = 'xlarge';
+export const SPACE_XXLARGE = 'xxlarge';
+export const SPACE_XXXLARGE = 'xxxlarge';
+export const SPACES = [NO_SPACE, SPACE_XXXSMALL, SPACE_XXSMALL, SPACE_XSMALL, SPACE_SMALL, SPACE_MEDIUM, SPACE_LARGE, SPACE_XLARGE, SPACE_XXLARGE, SPACE_XXXLARGE];
+export const URLS = {
   OVERVIEW: '/',
   ASSETS: '/assets',
   MODULES: '/modules',
   PACKAGES: '/packages'
 };
-export var SECTION_URLS = (_SECTION_URLS = {}, _SECTION_URLS[SECTIONS.TOTALS] = URLS.OVERVIEW, _SECTION_URLS[SECTIONS.ASSETS] = URLS.ASSETS, _SECTION_URLS[SECTIONS.MODULES] = URLS.MODULES, _SECTION_URLS[SECTIONS.PACKAGES] = URLS.PACKAGES, _SECTION_URLS);
-export var ASSETS_SIZES_FILE_TYPE_MAP = FILE_TYPES.reduce(function (agg, fileType) {
-  var _objectSpread2;
-
-  return _objectSpread(_objectSpread({}, agg), {}, (_objectSpread2 = {}, _objectSpread2["webpack.sizes.totalSizeByType" + fileType] = fileType, _objectSpread2));
-}, {});
-export var METRICS_WEBPACK_GENERAL = ['webpack.totalSizeByTypeALL', 'webpack.totalInitialSizeJS', 'webpack.totalInitialSizeCSS', 'webpack.cacheInvalidation'];
-export var METRICS_WEBPACK_ASSETS = ['webpack.assetCount', 'webpack.chunkCount'];
-export var METRICS_WEBPACK_MODULES = ['webpack.moduleCount'];
-export var METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];
+export const SECTION_URLS = {
+  [SECTIONS.TOTALS]: URLS.OVERVIEW,
+  [SECTIONS.ASSETS]: URLS.ASSETS,
+  [SECTIONS.MODULES]: URLS.MODULES,
+  [SECTIONS.PACKAGES]: URLS.PACKAGES
+};
+export const ASSETS_SIZES_FILE_TYPE_MAP = FILE_TYPES.reduce((agg, fileType) => ({ ...agg,
+  [`webpack.sizes.totalSizeByType${fileType}`]: fileType
+}), {});
+export const METRICS_WEBPACK_GENERAL = ['webpack.totalSizeByTypeALL', 'webpack.totalInitialSizeJS', 'webpack.totalInitialSizeCSS', 'webpack.cacheInvalidation'];
+export const METRICS_WEBPACK_ASSETS = ['webpack.assetCount', 'webpack.chunkCount'];
+export const METRICS_WEBPACK_MODULES = ['webpack.moduleCount'];
+export const METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];

package/lib-esm/hooks/rows-filter.js

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+export const useRowsFilter = ({
+  rows,
+  searchPattern,
+  filters,
+  getRowFilter
+}) => {
+  const filteredRows = useMemo(() => {
+    const filterRow = getRowFilter(filters);
+    return rows.filter(row => {
+      if (searchPattern && !searchPattern.test(row == null ? void 0 : row.key)) {
+        return false;
+      }
+
+      return filterRow(row);
+    });
+  }, [rows, searchPattern, filters, getRowFilter]);
+  return filteredRows;
+};

package/lib-esm/hooks/rows-sort.js

@@ -0,0 +1,21 @@
+import _orderBy from "lodash/orderBy";
+import { useState, useMemo } from 'react';
+export const useRowsSort = ({
+  rows,
+  sortFields,
+  sortBy = 'size',
+  sortDirection = 'desc',
+  getCustomSort
+}) => {
+  const [sort, updateSort] = useState({
+    field: sortBy,
+    direction: sortDirection
+  });
+  const orderedRows = useMemo(() => _orderBy(rows, getCustomSort(sort.field), sort.direction), [rows, sort]);
+  return {
+    sortFields,
+    sort,
+    updateSort,
+    items: orderedRows
+  };
+};

package/lib-esm/hooks/search-params.js

@@ -0,0 +1,166 @@
+import _merge from "lodash/merge";
+import _isEqual from "lodash/isEqual";
+import { useCallback, useLayoutEffect, useReducer } from 'react';
+const ACTION_SET_FILTERS = 'SET_FILTERS';
+const ACTION_SET_SEARCH = 'SET_SEARCH';
+const ACTION_RESET_DEFAULT = 'RESET_DEFAULT';
+const ACTION_RESET_ALL = 'RESET_ALL';
+const ACTION_SET = 'SET';
+
+const getSearchPattern = search => {
+  let searchPattern = new RegExp(/.*/);
+
+  if (!search || !search.trim()) {
+    return searchPattern;
+  }
+
+  try {
+    searchPattern = new RegExp(search, 'i');
+  } catch (err) {
+    // noop
+    console.error(err); // eslint-disable-line no-console
+  }
+
+  return searchPattern;
+};
+
+const getSearchReducer = ({
+  defaultFilters,
+  allEntriesFilters,
+  setParentState
+}) => (state, action) => {
+  const {
+    type,
+    payload
+  } = action;
+
+  switch (type) {
+    case ACTION_SET_FILTERS:
+      {
+        setParentState({
+          filters: payload,
+          search: state.search
+        });
+        return { ...state,
+          filters: payload
+        };
+      }
+
+    case ACTION_SET_SEARCH:
+      {
+        setParentState({
+          filters: state.filters,
+          search: payload
+        });
+        return { ...state,
+          search: payload,
+          searchPattern: getSearchPattern(payload)
+        };
+      }
+
+    case ACTION_RESET_DEFAULT:
+      {
+        setParentState({
+          filters: defaultFilters,
+          search: ''
+        });
+        return {
+          filters: defaultFilters,
+          search: '',
+          searchPattern: getSearchPattern()
+        };
+      }
+
+    case ACTION_RESET_ALL:
+      {
+        setParentState({
+          filters: allEntriesFilters,
+          search: ''
+        });
+        return {
+          filters: allEntriesFilters,
+          search: '',
+          searchPattern: getSearchPattern()
+        };
+      }
+
+    case ACTION_SET:
+      {
+        return payload;
+      }
+
+    default:
+      return state;
+  }
+};
+
+export const generateState = (filters, search) => ({
+  filters,
+  search,
+  searchPattern: getSearchPattern(search)
+});
+export const useSearchParams = ({
+  search: parentSearch,
+  filters: parentFilters,
+  defaultFilters,
+  allEntriesFilters,
+  setState: setParentState
+}) => {
+  // When we pass custom filters, set the other flags to true (allEntries)
+  const initialFilters = parentFilters ? _merge({}, allEntriesFilters, parentFilters) : defaultFilters;
+  const [{
+    search,
+    searchPattern,
+    filters
+  }, dispatch] = useReducer(getSearchReducer({
+    defaultFilters,
+    allEntriesFilters,
+    setParentState
+  }), generateState(initialFilters, parentSearch)); // Update state when the custom filters/search are changing - initial load or route updates
+
+  useLayoutEffect(() => {
+    // Run a deep comparison to prevent circular setState triggering
+    if (parentSearch === search || _isEqual(parentFilters, filters)) {
+      return;
+    }
+
+    dispatch({
+      type: ACTION_SET,
+      payload: generateState(initialFilters, parentSearch)
+    });
+  }, [search, filters, parentFilters, parentSearch]);
+  /** Callbacks */
+
+  const handleUpdateSearch = useCallback(newValue => {
+    dispatch({
+      type: ACTION_SET_SEARCH,
+      payload: newValue
+    });
+  }, []);
+  const handleUpdateFilters = useCallback(newFilters => {
+    dispatch({
+      type: ACTION_SET_FILTERS,
+      payload: newFilters
+    });
+  }, []);
+  const handleResetFilters = useCallback(() => {
+    dispatch({
+      type: ACTION_RESET_DEFAULT
+    });
+  }, []);
+  const handleResetAllFilters = useCallback(() => {
+    dispatch({
+      type: ACTION_RESET_ALL
+    });
+  }, []);
+  return {
+    search,
+    searchPattern,
+    filters,
+    hasActiveFilters: !_isEqual(allEntriesFilters, filters),
+    updateSearch: handleUpdateSearch,
+    updateFilters: handleUpdateFilters,
+    resetFilters: handleResetFilters,
+    resetAllFilters: handleResetAllFilters
+  };
+};

package/lib-esm/layout/box/box.js

@@ -1,29 +1,22 @@
-var _excluded = ["className", "as", "padding", "horizontalPadding", "verticalPadding", "outline"];
-
 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 { NO_SPACE, SPACES } from '../../constants';
 import css from './box.module.css';
-export var Box = function Box(props) {
-  var className = props.className,
-      Component = props.as,
-      padding = props.padding,
-      horizontalPadding = props.horizontalPadding,
-      verticalPadding = props.verticalPadding,
-      outline = props.outline,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var _ref = Array.isArray(padding) ? [null].concat(padding) : [padding, verticalPadding, horizontalPadding],
-      resolvedPadding = _ref[0],
-      resolvedVerticalPadding = _ref[1],
-      resolvedHorizontalPadding = _ref[2];
-
-  var rootClassName = cx(css.root, className, resolvedPadding && css["padding-" + resolvedPadding], resolvedVerticalPadding && css["vertical-padding-" + resolvedVerticalPadding], resolvedHorizontalPadding && css["horizontal-padding-" + resolvedHorizontalPadding], outline && css.outline);
+export const Box = props => {
+  const {
+    className,
+    as: Component,
+    padding,
+    horizontalPadding,
+    verticalPadding,
+    outline,
+    ...restProps
+  } = props;
+  const [resolvedPadding, resolvedVerticalPadding, resolvedHorizontalPadding] = Array.isArray(padding) ? [null, ...padding] : [padding, verticalPadding, horizontalPadding];
+  const rootClassName = cx(css.root, className, resolvedPadding && css[`padding-${resolvedPadding}`], resolvedVerticalPadding && css[`vertical-padding-${resolvedVerticalPadding}`], resolvedHorizontalPadding && css[`horizontal-padding-${resolvedHorizontalPadding}`], outline && css.outline);
   return /*#__PURE__*/React.createElement(Component, _extends({
     className: rootClassName
   }, restProps));

package/lib-esm/layout/box/box.stories.js

@@ -2,50 +2,38 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Box } from '.';
-var stories = storiesOf('Layout/Box', module);
+const stories = storiesOf('Layout/Box', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(Box, {
-    style: {
-      outline: '1px dotted magenta'
-    }
-  }, "Lorem ipsum");
-});
-stories.add('with padding', function () {
-  return /*#__PURE__*/React.createElement(Box, {
-    padding: "medium",
-    style: {
-      outline: '1px dotted magenta'
-    }
-  }, "Lorem ipsum");
-});
-stories.add('with horizontal padding', function () {
-  return /*#__PURE__*/React.createElement(Box, {
-    horizontalPadding: "medium",
-    style: {
-      outline: '1px dotted magenta'
-    }
-  }, "Lorem ipsum");
-});
-stories.add('with vertical padding', function () {
-  return /*#__PURE__*/React.createElement(Box, {
-    verticalPadding: "medium",
-    style: {
-      outline: '1px dotted magenta'
-    }
-  }, "Lorem ipsum");
-});
-stories.add('with horizontal & vertical padding', function () {
-  return /*#__PURE__*/React.createElement(Box, {
-    padding: ['xxsmall', 'medium'],
-    style: {
-      outline: '1px dotted magenta'
-    }
-  }, "Lorem ipsum");
-});
-stories.add('with outline', function () {
-  return /*#__PURE__*/React.createElement(Box, {
-    padding: "large",
-    outline: true
-  }, "Lorem ipsum");
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(Box, {
+  style: {
+    outline: '1px dotted magenta'
+  }
+}, "Lorem ipsum"));
+stories.add('with padding', () => /*#__PURE__*/React.createElement(Box, {
+  padding: "medium",
+  style: {
+    outline: '1px dotted magenta'
+  }
+}, "Lorem ipsum"));
+stories.add('with horizontal padding', () => /*#__PURE__*/React.createElement(Box, {
+  horizontalPadding: "medium",
+  style: {
+    outline: '1px dotted magenta'
+  }
+}, "Lorem ipsum"));
+stories.add('with vertical padding', () => /*#__PURE__*/React.createElement(Box, {
+  verticalPadding: "medium",
+  style: {
+    outline: '1px dotted magenta'
+  }
+}, "Lorem ipsum"));
+stories.add('with horizontal & vertical padding', () => /*#__PURE__*/React.createElement(Box, {
+  padding: ['xxsmall', 'medium'],
+  style: {
+    outline: '1px dotted magenta'
+  }
+}, "Lorem ipsum"));
+stories.add('with outline', () => /*#__PURE__*/React.createElement(Box, {
+  padding: "large",
+  outline: true
+}, "Lorem ipsum"));

package/lib-esm/layout/flex-stack/flex-stack.js

@@ -1,23 +1,20 @@
-var _excluded = ["as", "className", "space", "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 cx from 'classnames';
 import { NO_SPACE, SPACES } from '../../constants';
 import { getRenderChildWithClassName } from '../../utils';
 import css from './flex-stack.module.css';
-export var FlexStack = function FlexStack(props) {
-  var Component = props.as,
-      className = props.className,
-      space = props.space,
-      children = props.children,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var rootClassName = cx(className, css.root, css["space--" + space]);
+export const FlexStack = props => {
+  const {
+    as: Component,
+    className,
+    space,
+    children,
+    ...restProps
+  } = props;
+  const rootClassName = cx(className, css.root, css[`space--${space}`]);
   return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
     className: rootClassName
   }), React.Children.map(children, getRenderChildWithClassName(css.item)));

package/lib-esm/layout/flex-stack/flex-stack.stories.js

@@ -3,53 +3,43 @@ import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Box } from '../box';
 import { FlexStack } from '.';
-var stories = storiesOf('Layout/FlexStack', module);
+const stories = storiesOf('Layout/FlexStack', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(FlexStack, null, /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 2"), null, "Lorem ipsum 3");
-});
-stories.add('with custom wrapper', function () {
-  return /*#__PURE__*/React.createElement(FlexStack, {
-    as: "main",
-    className: "wrapper"
-  }, /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 2"));
-});
-stories.add('with large space', function () {
-  return /*#__PURE__*/React.createElement(FlexStack, {
-    space: "large"
-  }, /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 2"), /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 3"));
-});
-stories.add('with nested stack', function () {
-  return /*#__PURE__*/React.createElement(FlexStack, {
-    space: "large"
-  }, /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 2"), /*#__PURE__*/React.createElement(FlexStack, {
-    space: "small"
-  }, /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 3.1"), /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum 3.2")));
-});
-stories.add('single item', function () {
-  return /*#__PURE__*/React.createElement(FlexStack, null, /*#__PURE__*/React.createElement(Box, {
-    outline: true
-  }, "Lorem ipsum"));
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(FlexStack, null, /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 2"), null, "Lorem ipsum 3"));
+stories.add('with custom wrapper', () => /*#__PURE__*/React.createElement(FlexStack, {
+  as: "main",
+  className: "wrapper"
+}, /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 2")));
+stories.add('with large space', () => /*#__PURE__*/React.createElement(FlexStack, {
+  space: "large"
+}, /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 2"), /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 3")));
+stories.add('with nested stack', () => /*#__PURE__*/React.createElement(FlexStack, {
+  space: "large"
+}, /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 1"), /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 2"), /*#__PURE__*/React.createElement(FlexStack, {
+  space: "small"
+}, /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 3.1"), /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum 3.2"))));
+stories.add('single item', () => /*#__PURE__*/React.createElement(FlexStack, null, /*#__PURE__*/React.createElement(Box, {
+  outline: true
+}, "Lorem ipsum")));

package/lib-esm/layout/footer/footer.js

@@ -10,12 +10,10 @@ import { Stack } from '../stack';
 import css from './footer.module.css';
 /* eslint-disable jsx-a11y/anchor-has-content */
 
-var ExternalLink = function ExternalLink(props) {
-  return /*#__PURE__*/React.createElement("a", _extends({
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }, props));
-};
+const ExternalLink = props => /*#__PURE__*/React.createElement("a", _extends({
+  target: "_blank",
+  rel: "noopener noreferrer"
+}, props));
 /* eslint-enable jsx-a11y/anchor-has-content */
 
 
@@ -23,37 +21,36 @@ ExternalLink.propTypes = {
   /** Link to value */
   to: PropTypes.string.isRequired
 };
-export var Footer = function Footer(_ref) {
-  var className = _ref.className,
-      version = _ref.version;
-  return /*#__PURE__*/React.createElement(Container, {
-    as: "footer",
-    className: cx(css.root, className)
-  }, /*#__PURE__*/React.createElement(Box, {
-    padding: ['medium', 'none'],
-    className: css.inner
-  }, /*#__PURE__*/React.createElement(Stack, {
-    space: "xsmall"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("nav", {
-    className: css.nav
-  }, /*#__PURE__*/React.createElement(ExternalLink, {
-    href: config.githubUrl,
-    className: cx(css.navItem, css.navLink),
-    title: "In-depth bundle analyzer for webpack(bundle size, assets, modules, packages)"
-  }, "BundleStats ", version), /*#__PURE__*/React.createElement("span", {
-    className: css.navItem
-  }, /*#__PURE__*/React.createElement(ExternalLink, {
-    href: config.githubUrl + "/issues",
-    className: css.navLink,
-    title: "Navigate to GitHub and open issue"
-  }, "Report issue")), /*#__PURE__*/React.createElement("span", {
-    className: css.navItem
-  }, /*#__PURE__*/React.createElement("span", null, "Made by "), /*#__PURE__*/React.createElement(ExternalLink, {
-    className: css.navLink,
-    href: config.siteUrl,
-    title: "Go to RelativeCI - Specialized insights for web bundles"
-  }, "RelativeCI")))))));
-};
+export const Footer = ({
+  className,
+  version
+}) => /*#__PURE__*/React.createElement(Container, {
+  as: "footer",
+  className: cx(css.root, className)
+}, /*#__PURE__*/React.createElement(Box, {
+  padding: ['medium', 'none'],
+  className: css.inner
+}, /*#__PURE__*/React.createElement(Stack, {
+  space: "xsmall"
+}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("nav", {
+  className: css.nav
+}, /*#__PURE__*/React.createElement(ExternalLink, {
+  href: config.githubUrl,
+  className: cx(css.navItem, css.navLink),
+  title: "In-depth bundle analyzer for webpack(bundle size, assets, modules, packages)"
+}, `BundleStats `, version), /*#__PURE__*/React.createElement("span", {
+  className: css.navItem
+}, /*#__PURE__*/React.createElement(ExternalLink, {
+  href: `${config.githubUrl}/issues`,
+  className: css.navLink,
+  title: "Navigate to GitHub and open issue"
+}, "Report issue")), /*#__PURE__*/React.createElement("span", {
+  className: css.navItem
+}, /*#__PURE__*/React.createElement("span", null, "Made by "), /*#__PURE__*/React.createElement(ExternalLink, {
+  className: css.navLink,
+  href: config.siteUrl,
+  title: "Go to RelativeCI - Specialized insights for web bundles"
+}, "RelativeCI")))))));
 Footer.defaultProps = {
   className: '',
   version: null

package/lib-esm/layout/footer/footer.stories.js

@@ -2,15 +2,11 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Footer } from '.';
-var stories = storiesOf('Layout/Footer', module);
+const stories = storiesOf('Layout/Footer', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(Footer, null);
-});
-stories.add('with custom content', function () {
-  return /*#__PURE__*/React.createElement(Footer, null, "Version 1.0", /*#__PURE__*/React.createElement("span", {
-    style: {
-      margin: '1em'
-    }
-  }, "Contact"));
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(Footer, null));
+stories.add('with custom content', () => /*#__PURE__*/React.createElement(Footer, null, "Version 1.0", /*#__PURE__*/React.createElement("span", {
+  style: {
+    margin: '1em'
+  }
+}, "Contact")));