@bundle-stats/ui 3.2.1-alpha.0 → 3.2.1-beta.9

package/lib-esm/ui/table/table.js

@@ -62,13 +62,14 @@ Td.propTypes = {
   /** Adopted child class name */
   className: PropTypes.string
 };
-export const Table = ({
-  className,
-  emptyMessage,
-  compact,
-  outline,
-  children
-}) => {
+export const Table = _ref => {
+  let {
+    className,
+    emptyMessage,
+    compact,
+    outline,
+    children
+  } = _ref;
   const rootClassName = cx(css.root, className, compact && css.compact, outline && css.outline);
 
   if (!children) {

package/lib-esm/ui/tabs/tabs.js

@@ -14,12 +14,15 @@ const cloneElement = element => {
   });
 };
 
-export const Tabs = ({
-  className,
-  children
-}) => /*#__PURE__*/React.createElement("nav", {
-  className: cx(css.root, className)
-}, React.Children.map(children, cloneElement));
+export const Tabs = _ref => {
+  let {
+    className,
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement("nav", {
+    className: cx(css.root, className)
+  }, React.Children.map(children, cloneElement));
+};
 Tabs.defaultProps = {
   className: ''
 };

package/lib-esm/ui/toolbar/toolbar.stories.js

@@ -6,11 +6,14 @@ const stories = storiesOf('UI/Toolbar', module);
 stories.addDecorator(getWrapperDecorator());
 stories.add('default', () => /*#__PURE__*/React.createElement(Toolbar, null, /*#__PURE__*/React.createElement("div", null, "Content")));
 stories.add('with actions', () => /*#__PURE__*/React.createElement(Toolbar, {
-  renderActions: ({
-    actionClassName
-  }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: actionClassName
-  }, "Action 1"), /*#__PURE__*/React.createElement("div", {
-    className: actionClassName
-  }, "Action 2"))
+  renderActions: _ref => {
+    let {
+      actionClassName
+    } = _ref;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: actionClassName
+    }, "Action 1"), /*#__PURE__*/React.createElement("div", {
+      className: actionClassName
+    }, "Action 2"));
+  }
 }, "Content"));

package/lib-esm/utils.js

@@ -2,7 +2,11 @@ import _chunk from "lodash/chunk";
 import React from 'react';
 import cx from 'classnames';
 import COLORS from './chart-colors.json';
-export const getColors = (count = 2) => {
+export const getColors = function (count) {
+  if (count === void 0) {
+    count = 2;
+  }
+
   const chunks = _chunk(COLORS, Math.round(COLORS.length / count));
 
   return chunks.map((chunkColors, index) => {
@@ -22,13 +26,18 @@ export const getRenderChildWithClassName = className => child => {
     return null;
   }
 
-  if (!(child != null && child.props)) {
+  const {
+    props
+  } = child;
+
+  if (!props) {
     return /*#__PURE__*/React.createElement("div", {
       className: className
     }, child);
   }
 
-  return /*#__PURE__*/React.cloneElement(child, { ...child.props,
-    className: cx(className, child.props.className)
+  return /*#__PURE__*/React.cloneElement(child, { ...props,
+    className: cx(className, props.className) // eslint-disable-line react/prop-types
+
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.2.1-alpha.0",
+  "version": "3.2.1-beta.9",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -36,32 +36,37 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/cli": "7.15.7",
-    "@babel/core": "7.15.8",
-    "@babel/preset-env": "7.15.8",
-    "@babel/preset-react": "7.14.5",
+    "@babel/cli": "7.16.0",
+    "@babel/core": "7.16.0",
+    "@babel/plugin-proposal-class-properties": "7.16.0",
+    "@babel/preset-env": "7.16.4",
+    "@babel/preset-react": "7.16.0",
     "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
     "@storybook/addon-knobs": "6.3.1",
-    "@storybook/addon-storyshots": "6.2.9",
-    "@storybook/addons": "6.2.9",
-    "@storybook/react": "6.2.9",
+    "@storybook/addon-postcss": "2.0.0",
+    "@storybook/addon-storyshots": "6.3.12",
+    "@storybook/addons": "6.3.12",
+    "@storybook/builder-webpack5": "6.3.12",
+    "@storybook/manager-webpack5": "6.3.12",
+    "@storybook/react": "6.3.12",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "26.6.3",
+    "babel-jest": "27.3.1",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.0.5",
+    "chromatic": "6.0.6",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
-    "core-js": "3.19.0",
+    "core-js": "3.19.1",
     "cross-env": "7.0.3",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
     "hex-rgb": "5.0.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "26.6.3",
+    "jest": "27.3.1",
     "jest-date-mock": "1.0.8",
     "lodash": "4.17.21",
+    "postcss": "8.3.11",
     "prop-types": "15.7.2",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -79,11 +84,11 @@
     "react-router-dom": "^5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.2.1-alpha.0",
+    "@bundle-stats/utils": "^3.2.1-beta.9",
     "date-fns": "^2.6.0",
     "query-string": "^7.0.0",
     "reakit": "^1.3.6",
     "use-query-params": "^1.2.2"
   },
-  "gitHead": "fdb4b6931ebbc35ad469608725603cde5ecab9b7"
+  "gitHead": "43b453a608ced66881eeca23c3b6c464b7dcfd8b"
 }

package/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.jsx

@@ -13,6 +13,20 @@ import { Stack } from '../../layout/stack';
 import { SummaryItem } from '../summary-item';
 import css from './bundle-assets-totals-chart-bars.module.css';
 
+const getTooltip = (items, jobs, itemIndex, runIndex) => () => (
+  <SummaryItem
+    className={css.itemTooltip}
+    id={get(items, [itemIndex, 'key'])}
+    data={{
+      current: get(items, [itemIndex, 'runs', runIndex, 'value'], 0),
+      baseline: get(items, [itemIndex, 'runs', runIndex + 1, 'value'], 0),
+    }}
+    showDelta={runIndex < jobs.length - 1}
+    showBaselineValue={runIndex < jobs.length - 1}
+    size="large"
+  />
+);
+
 export const BundleAssetsTotalsChartBars = ({
   className,
   jobs,
@@ -43,20 +57,6 @@ export const BundleAssetsTotalsChartBars = ({
   });
   const colors = getColors(max(map(dataGraphs, (values) => values.length)));
 
-  const getTooltip = (itemIndex, runIndex) => () => (
-    <SummaryItem
-      className={css.itemTooltip}
-      id={get(items, [itemIndex, 'key'])}
-      data={{
-        current: get(items, [itemIndex, 'runs', runIndex, 'value'], 0),
-        baseline: get(items, [itemIndex, 'runs', runIndex + 1, 'value'], 0),
-      }}
-      showDelta={runIndex < jobs.length - 1}
-      showBaselineValue={runIndex < jobs.length - 1}
-      size="large"
-    />
-  );
-
   return (
     <Stack className={rootClassName} space="medium">
       {dataGraphs.map((data, runIndex) => {
@@ -66,7 +66,7 @@ export const BundleAssetsTotalsChartBars = ({
           value,
           color: colors[valueIndex],
           label: labels[valueIndex],
-          getItemTooltip: getTooltip(valueIndex, runIndex),
+          getItemTooltip: getTooltip(items, jobs, valueIndex, runIndex),
         }));
 
         return (

package/src/components/job-meta/job-meta.jsx

@@ -19,9 +19,7 @@ export const JobMeta = (props) => {
         return (
           <div className={css.item} key={key}>
             {title && (<h2 className={css.itemTitle}>{title}</h2>)}
-            {content.map((item) => (
-              <>{item}</>
-            ))}
+            {content.map((item) => item)}
           </div>
         );
       })}

package/src/components/summary/summary.jsx

@@ -11,6 +11,28 @@ import { ComponentLink } from '../component-link';
 import { SummaryItem } from '../summary-item';
 import css from './summary.module.css';
 
+const CustomSummaryItem = ({ className, metricOptions, SummaryItemCustomLink, ...props }) => (
+  <Box
+    padding={['xsmall', 'small']}
+    className={cx(className, css.summaryItemLink)}
+    {...props}
+    as={SummaryItemCustomLink}
+    {...metricOptions.link}
+  />
+);
+
+CustomSummaryItem.propTypes = {
+  className: PropTypes.string,
+  metricOptions: PropTypes.shape({
+    link: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+  }).isRequired,
+  SummaryItemCustomLink: PropTypes.elementType.isRequired,
+};
+
+CustomSummaryItem.defaultProps = {
+  className: '',
+};
+
 export const Summary = ({
   className,
   size,
@@ -25,15 +47,10 @@ export const Summary = ({
       {Array.from(METRIC_COMPONENT_LINKS).filter(([metricId]) => keys.includes(metricId)).map(
         ([metricId, metricOptions]) => (
           <SummaryItem
-            as={({ className: itemClassName, ...itemProps }) => (
-              <Box
-                padding={['xsmall', 'small']}
-                className={cx(itemClassName, css.summaryItemLink)}
-                {...itemProps}
-                as={SummaryItemCustomLink}
-                {...metricOptions.link}
-              />
-            )}
+            as={CustomSummaryItem}
+            className={css.item}
+            metricOptions={metricOptions}
+            SummaryItemCustomLink={SummaryItemCustomLink}
             size={size}
             key={metricId}
             id={metricId}
@@ -41,7 +58,6 @@ export const Summary = ({
             loading={loading}
             showMetricDescription
             showDelta={showSummaryItemDelta && metricOptions.showDelta !== false}
-            className={css.item}
           />
         )
       )}

package/src/hooks/search-params.js

@@ -8,7 +8,7 @@ const ACTION_RESET_ALL = 'RESET_ALL';
 const ACTION_SET = 'SET';
 
 const getSearchPattern = (search) => {
-  let searchPattern = new RegExp(/.*/);
+  let searchPattern = /.*/;
 
   if (!search || !search.trim()) {
     return searchPattern;

package/src/utils.jsx

@@ -25,12 +25,14 @@ export const getRenderChildWithClassName = (className) => (child) => {
     return null;
   }
 
-  if (!child?.props) {
+  const { props } = child;
+
+  if (!props) {
     return <div className={className}>{child}</div>;
   }
 
   return React.cloneElement(child, {
-    ...child.props,
-    className: cx(className, child.props.className),
+    ...props,
+    className: cx(className, props.className), // eslint-disable-line react/prop-types
   });
 };