@bundle-stats/ui 3.4.0-alpha.3 → 3.4.0-beta.0

package/lib-esm/components/budget-insights/budget-insights.stories.js

@@ -1,84 +1,144 @@
+import _merge from "lodash/merge";
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { BudgetInsights } from '.';
-export default {
-  title: 'Components/BudgetInsights',
-  component: BudgetInsights,
-  decorators: [Story => /*#__PURE__*/React.createElement(MemoryRouter, null, /*#__PURE__*/React.createElement(Story, null))]
-};
-
-const Template = args => /*#__PURE__*/React.createElement(BudgetInsights, args);
-
-export const Default = Template.bind();
-Default.args = {
-  source: 'webpack',
-  budgets: {
+const BUDGETS = {
+  type: 'SUCCESS',
+  message: {
+    text: '8 budget checks passed',
+    md: '**8** budget checks passed'
+  },
+  data: {
     totalSizeByTypeALL: {
-      currentValue: 2097917,
-      budgetValue: 2097152,
-      failed: true
+      type: 'ERROR',
+      message: {
+        text: 'Bundle Size is above the budget',
+        md: 'Bundle Size is above the budget'
+      },
+      data: {
+        currentValue: 2097917,
+        budgetValue: 2097152,
+        failed: true
+      }
     },
     totalInitialSizeJS: {
-      currentValue: 1265645,
-      budgetValue: 524288,
-      failed: true
+      type: 'ERROR',
+      message: {
+        text: 'Initial JS is above the budget',
+        md: 'Initial JS is above the budget'
+      },
+      data: {
+        currentValue: 1265645,
+        budgetValue: 524288,
+        failed: true
+      }
     },
     totalInitialSizeCSS: {
-      currentValue: 48866,
-      budgetValue: 51200,
-      failed: false
+      type: 'SUCCESS',
+      message: {
+        text: 'Initial CSS is below the budget',
+        md: 'Initial CSS is below the budget'
+      },
+      data: {
+        currentValue: 48866,
+        budgetValue: 51200,
+        failed: false
+      }
     },
     chunkCount: {
-      currentValue: 12,
-      budgetValue: 50,
-      failed: false
+      type: 'SUCCESS',
+      message: {
+        text: 'Chunks is below the budget',
+        md: 'Chunks is below the budget'
+      },
+      data: {
+        currentValue: 12,
+        budgetValue: 50,
+        failed: false
+      }
     },
     moduleCount: {
-      currentValue: 1059,
-      budgetValue: 2000,
-      failed: false
+      type: 'SUCCESS',
+      message: {
+        text: 'Modules is below the budget',
+        md: 'Modules is below the budget'
+      },
+      data: {
+        currentValue: 1059,
+        budgetValue: 2000,
+        failed: false
+      }
     },
     duplicatePackagesCount: {
-      currentValue: 13,
-      budgetValue: 5,
-      failed: true
+      type: 'ERROR',
+      message: {
+        text: 'Duplicate packages is above the budget',
+        md: 'Duplicate packages is above the budget'
+      },
+      data: {
+        currentValue: 13,
+        budgetValue: 5,
+        failed: true
+      }
     },
     'sizes.totalSizeByTypeJS': {
-      currentValue: 1981470,
-      budgetValue: 2097152,
-      failed: false
+      type: 'SUCCESS',
+      message: {
+        text: 'JS is below the budget',
+        md: 'JS is below the budget'
+      },
+      data: {
+        currentValue: 1981470,
+        budgetValue: 2097152,
+        failed: false
+      }
     },
     'sizes.totalSizeByTypeCSS': {
-      currentValue: 56091,
-      budgetValue: 20480,
-      failed: true
+      type: 'SUCCESS',
+      message: {
+        text: 'CSS is below the budget',
+        md: 'CSS is below the budget'
+      },
+      data: {
+        currentValue: 56091,
+        budgetValue: 20480,
+        failed: true
+      }
     }
   }
 };
+export default {
+  title: 'Components/BudgetInsights',
+  component: BudgetInsights,
+  decorators: [Story => /*#__PURE__*/React.createElement(MemoryRouter, null, /*#__PURE__*/React.createElement(Story, null))]
+};
+
+const Template = args => /*#__PURE__*/React.createElement(BudgetInsights, args);
+
+export const Default = Template.bind();
+Default.args = {
+  source: 'webpack',
+  budgets: BUDGETS
+};
 export const FailedBudgets = Template.bind();
 FailedBudgets.args = {
   source: 'webpack',
-  budgets: {
-    totalSizeByTypeALL: {
-      currentValue: 2097917,
-      budgetValue: 2097152,
-      failed: true
-    },
-    totalInitialSizeJS: {
-      currentValue: 1265645,
-      budgetValue: 524288,
-      failed: true
+  budgets: _merge({}, BUDGETS, {
+    type: 'ERROR',
+    message: {
+      text: '2/8 budget checks failed',
+      md: '**2/8** budget checks failed'
     }
-  }
+  })
 };
-export const SingleBudget = Template.bind();
-SingleBudget.args = {
+export const WarnedBudgets = Template.bind();
+WarnedBudgets.args = {
   source: 'webpack',
-  budgets: {
-    totalInitialSizeJS: {
-      currentValue: 524288,
-      budgetValue: 1265645,
-      failed: false
+  budgets: _merge({}, BUDGETS, {
+    type: 'WARNING',
+    message: {
+      text: '2/8 budget checks warned',
+      md: '**2/8** budget checks warned'
     }
-  }
+  })
 };

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

@@ -145,7 +145,8 @@ RowHeader.propTypes = {
     isChunk: PropTypes.bool,
     isInitial: PropTypes.bool,
     isEntry: PropTypes.bool,
-    runs: PropTypes.arrayOf(PropTypes.object)
+    runs: PropTypes.arrayOf(PropTypes.object) // eslint-disable-line react/forbid-prop-types
+
   }).isRequired,
   chunks: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,

package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.js

@@ -13,7 +13,7 @@ import { ComponentLink } from '../component-link';
 import { BudgetInfo } from '../budget-info';
 import css from './bundle-assets-totals-table.module.css';
 export const BundleAssetsTotalsTable = _ref => {
-  var _jobs$0$insights, _jobs$0$insights$webp;
+  var _jobs$0$insights, _jobs$0$insights$webp, _jobs$0$insights$webp2;
 
   let {
     className,
@@ -22,7 +22,7 @@ export const BundleAssetsTotalsTable = _ref => {
     ...restProps
   } = _ref;
   const items = useMemo(() => webpack.compareBySection.sizes(jobs), [jobs]);
-  const budgets = (_jobs$0$insights = jobs[0].insights) == null ? void 0 : (_jobs$0$insights$webp = _jobs$0$insights.webpack) == null ? void 0 : _jobs$0$insights$webp.budgets;
+  const budgets = (_jobs$0$insights = jobs[0].insights) == null ? void 0 : (_jobs$0$insights$webp = _jobs$0$insights.webpack) == null ? void 0 : (_jobs$0$insights$webp2 = _jobs$0$insights$webp.budgets) == null ? void 0 : _jobs$0$insights$webp2.data;
   const renderRowHeader = useCallback(item => {
     const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
     const {
@@ -40,10 +40,9 @@ export const BundleAssetsTotalsTable = _ref => {
       title: title,
       params: params
     }, /*#__PURE__*/React.createElement(FlexStack, {
-      space: "xxsmall",
+      space: "xxxsmall",
       className: css.itemTitleText
     }, /*#__PURE__*/React.createElement("span", null, item.label), budget && /*#__PURE__*/React.createElement(BudgetInfo, {
-      metricId: item.key,
       budgetInsight: budget
     })));
   }, [CustomComponentLink]);

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

@@ -121,7 +121,7 @@ export const BundleModules = _ref2 => {
       disabled: jobs.length <= 1
     },
     [MODULE_FILTERS.DUPLICATED]: {
-      label: 'Duplicated',
+      label: 'Duplicate',
       defaultValue: filters[MODULE_FILTERS.DUPLICATED],
       disabled: jobs.length <= 1
     },

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

@@ -7,7 +7,6 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
 import { METRICS_WEBPACK_GENERAL } from '../../constants';
-import { Icon } from '../../ui/icon';
 import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
 import { ComponentLink } from '../component-link';
@@ -37,23 +36,19 @@ export const Summary = _ref => {
     return keys.includes(getSourceMetricId(metricId));
   }).map(_ref3 => {
     let [metricId, metricOptions] = _ref3;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(SummaryItem, _extends({
       key: metricId,
-      className: css.item
-    }, /*#__PURE__*/React.createElement(SummaryItem, {
+      className: css.item,
+      as: SummaryItemCustomLink
+    }, metricOptions.link, {
       size: size,
       id: metricId,
       data: _get(data, metricId),
-      budget: _get(budgets, getSourceMetricId(metricId)),
+      budget: _get(budgets, ['data', getSourceMetricId(metricId)]),
       loading: loading,
       showMetricDescription: true,
       showDelta: showSummaryItemDelta && metricOptions.showDelta !== false
-    }), !loading && /*#__PURE__*/React.createElement(SummaryItemCustomLink, _extends({}, metricOptions.link, {
-      className: css.readMore
-    }), /*#__PURE__*/React.createElement(Icon, {
-      className: css.readMoreIcon,
-      glyph: Icon.ICONS.ARROW_RIGHT_CIRLCE
-    })));
+    }));
   })));
 };
 Summary.defaultProps = {

package/lib-esm/components/summary/summary.module.css

@@ -6,49 +6,5 @@
 .item {
   padding: var(--space-small);
   flex: 1 0 25%; /* force equal sizes */
-  position: relative;
-  z-index: 1;
-}
-
-.item::before {
-  content: '';
-  display: block;
-  width: 1px;
-  position: absolute;
-  left: -1px;
-  top: var(--space-small);
-  bottom: var(--space-small);
-  background: var(--color-outline);
-}
-
-.readMore {
-  display: block;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  padding: var(--space-small);
-  color: var(--color-text-ultra-light);
-  transition: var(--transition-out);
-}
-
-.readMore:hover,
-.readMore:focus {
-  color: var(--color-primary);
-  transition: var(--transition-in);
-}
-
-.readMoreIcon {
-  display: block;
-}
-
-/** hover state */
-.readMore {
-  opacity: 0;
-}
-
-.item:hover .readMore,
-.item:active .readMore,
-.item:focus .readMore {
-  opacity: 1;
-  transition: var(--transition-in);
+  text-decoration: none;
 }

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

@@ -24,26 +24,54 @@ stories.add('default', () => /*#__PURE__*/React.createElement(Summary, {
 stories.add('budgets', () => /*#__PURE__*/React.createElement(Summary, {
   data: MULTIPLE_JOBS[0].summary,
   budgets: {
-    webpack: {
+    data: {
       totalSizeByTypeALL: {
-        currentValue: MULTIPLE_JOBS[0].summary.webpack.totalSizeByTypeALL.current,
-        budgetValue: 1024 * 1024,
-        failed: false
+        type: 'ERROR',
+        message: {
+          text: 'Metric is over the budget',
+          md: 'Metric is over the budget'
+        },
+        data: {
+          currentValue: MULTIPLE_JOBS[0].summary.webpack.totalSizeByTypeALL.current,
+          budgetValue: 1024 * 1024,
+          failed: false
+        }
       },
       totalInitialSizeJS: {
-        currentValue: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeJS.current,
-        budgetValue: 512 * 1024,
-        failed: true
+        type: 'WARNING',
+        message: {
+          text: 'Metric is over the budget',
+          md: 'Metric is over the budget'
+        },
+        data: {
+          currentValue: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeJS.current,
+          budgetValue: 512 * 1024,
+          failed: true
+        }
       },
       totalInitialSizeCSS: {
-        currentValue: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeCSS.current,
-        budgetValue: 50 * 1024,
-        failed: false
+        type: 'SUCCESS',
+        message: {
+          text: 'Metric is under the budget',
+          md: 'Metric is under the budget'
+        },
+        data: {
+          currentValue: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeCSS.current,
+          budgetValue: 50 * 1024,
+          failed: false
+        }
       },
       chunkCount: {
-        currentValue: MULTIPLE_JOBS[0].summary.webpack.chunkCount.current,
-        budgetValue: 50,
-        failed: false
+        type: 'SUCCESS',
+        message: {
+          text: 'Metric is under the budget',
+          md: 'Metric is under the budget'
+        },
+        data: {
+          currentValue: MULTIPLE_JOBS[0].summary.webpack.chunkCount.current,
+          budgetValue: 50,
+          failed: false
+        }
       }
     }
   }

package/lib-esm/components/summary-item/summary-item.js

@@ -5,10 +5,9 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
 import { HoverCard } from '../../ui/hover-card';
-import { Icon } from '../../ui/icon';
 import { Skeleton } from '../../ui/skeleton';
-import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
 import { Metric } from '../metric';
 import { Delta } from '../delta';
 import { BudgetInfo } from '../budget-info';
@@ -21,8 +20,9 @@ const MetricInfo = _ref => {
   } = _ref;
   return /*#__PURE__*/React.createElement(Stack, {
     space: "xxxsmall"
-  }, /*#__PURE__*/React.createElement("p", null, description), url && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {
-    href: url,
+  }, /*#__PURE__*/React.createElement("p", null, description), url && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => window.open(url),
     className: css.readMoreLink
   }, "Read more")));
 };
@@ -59,23 +59,17 @@ export const SummaryItem = _ref2 => {
   const showMetricDescriptionTooltip = showMetricDescription && (metric == null ? void 0 : metric.description);
   const rootClassName = cx(css.root, className, css[size], showDelta && css.showDelta);
   return /*#__PURE__*/React.createElement(Stack, _extends({
-    space: "xxxsmall",
+    space: "xxsmall",
     as: Component,
     className: rootClassName
   }, props), /*#__PURE__*/React.createElement(FlexStack, {
-    as: "h3",
     space: "xxxsmall",
+    as: "h3",
     className: css.title
-  }, /*#__PURE__*/React.createElement("span", {
-    className: css.titleLabel
-  }, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(HoverCard, {
-    className: css.icon,
-    label: /*#__PURE__*/React.createElement(Icon, {
-      glyph: "help"
-    })
-  }, /*#__PURE__*/React.createElement(MetricInfo, metric)), budget && /*#__PURE__*/React.createElement(BudgetInfo, {
+  }, showMetricDescriptionTooltip ? /*#__PURE__*/React.createElement(HoverCard, {
+    label: metric.label
+  }, /*#__PURE__*/React.createElement(MetricInfo, metric)) : metric.label, budget && /*#__PURE__*/React.createElement(BudgetInfo, {
     className: css.budgetInfo,
-    metricId: id,
     budgetInsight: budget
   })), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
     className: css.currentMetric,
@@ -134,9 +128,6 @@ SummaryItem.propTypes = {
   showDelta: PropTypes.bool,
 
   /** Budget insight data */
-  budget: PropTypes.shape({
-    currentBalue: PropTypes.number,
-    budgetValue: PropTypes.number,
-    failed: PropTypes.bool
-  })
+  budget: PropTypes.object // eslint-disable-line react/forbid-prop-types
+
 };

package/lib-esm/components/summary-item/summary-item.module.css

@@ -8,17 +8,11 @@
   color: var(--color-text-ultra-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
-  line-height: var(--space-small);
+  line-height: 1;
   text-transform: uppercase;
   white-space: nowrap;
 }
 
-.budgetInfo {
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
 .currentMetric {
   display: block;
   color: var(--color-heading);
@@ -39,6 +33,30 @@
   line-height: var(--space-small);
 }
 
+.readMoreLink {
+  appearance: none;
+  background: none;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.readMoreLink:hover,
+.readMoreLink:active,
+.readMoreLink:focus {
+  color: var(--color-primary-dark);
+  text-decoration: none;
+}
+
+/* Hover state */
+.root:hover .title {
+  color: var(--color-text-light);
+}
+
+
 /* Loading state */
 .loading.currentMetric {
   width: 8em;

package/lib-esm/components/summary-item/summary-item.stories.js

@@ -37,18 +37,32 @@ export const BudgetError = Template.bind();
 BudgetError.args = {
   showMetricDescription: true,
   budget: {
-    currentValue: 120 * 1000,
-    budgetValue: 100 * 1000,
-    failed: true
+    type: 'ERROR',
+    message: {
+      text: 'Metric is over the budget',
+      md: 'Metric is over the budget'
+    },
+    data: {
+      currentValue: 120 * 1000,
+      budgetValue: 100 * 1000,
+      failed: true
+    }
   }
 };
 export const BudgetSuccess = Template.bind();
 BudgetSuccess.args = {
   showMetricDescription: true,
   budget: {
-    currentValue: 120 * 1000,
-    budgetValue: 120 * 1024,
-    failed: false
+    type: 'SUCCESS',
+    message: {
+      text: 'Metric is under the budget',
+      md: 'Metric is under the budget'
+    },
+    data: {
+      currentValue: 120 * 1000,
+      budgetValue: 120 * 1024,
+      failed: false
+    }
   }
 };
 export const Loading = Template.bind();

package/lib-esm/ui/hover-card/hover-card.js

@@ -36,6 +36,11 @@ export const HoverCard = props => {
   }); // Fallback to span if no href
 
   const Component = resolveComponent(as, href);
+
+  const handleOnClick = event => {
+    event.preventDefault();
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     className: cx(css.root, className)
   }, /*#__PURE__*/React.createElement(HovercardAnchor, {
@@ -48,7 +53,8 @@ export const HoverCard = props => {
     className: cx(css.hoverCard, hoverCardClassName),
     style: {
       zIndex: 10000
-    }
+    },
+    onClick: handleOnClick
   }), /*#__PURE__*/React.createElement(HovercardArrow, {
     size: 24
   }), typeof children === 'function' ? children({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.4.0-alpha.3",
+  "version": "3.4.0-beta.0",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -37,27 +37,27 @@
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
     "@babel/cli": "7.17.6",
-    "@babel/core": "7.17.5",
+    "@babel/core": "7.17.9",
     "@babel/plugin-proposal-class-properties": "7.16.7",
     "@babel/preset-env": "7.16.11",
     "@babel/preset-react": "7.16.7",
     "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
-    "@storybook/addon-essentials": "6.4.19",
+    "@storybook/addon-essentials": "6.4.20",
     "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.4.19",
-    "@storybook/addons": "6.4.19",
-    "@storybook/builder-webpack5": "6.4.19",
-    "@storybook/manager-webpack5": "6.4.19",
-    "@storybook/react": "6.4.19",
+    "@storybook/addon-storyshots": "6.4.20",
+    "@storybook/addons": "6.4.20",
+    "@storybook/builder-webpack5": "6.4.20",
+    "@storybook/manager-webpack5": "6.4.20",
+    "@storybook/react": "6.4.20",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "27.5.1",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.5.1",
+    "chromatic": "6.5.3",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
-    "core-js": "3.20.2",
+    "core-js": "3.21.1",
     "cross-env": "7.0.3",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
@@ -67,7 +67,7 @@
     "jest": "27.5.1",
     "jest-date-mock": "1.0.8",
     "lodash": "4.17.21",
-    "postcss": "8.4.7",
+    "postcss": "8.4.12",
     "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -76,21 +76,21 @@
     "rimraf": "3.0.2"
   },
   "peerDependencies": {
-    "classnames": "2.2.6",
-    "core-js": "3.20.2",
-    "lodash": "4.17.21",
-    "prop-types": "15.7.2",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-router-dom": "5.3.0"
+    "classnames": "^2.0.0",
+    "core-js": "^3.0.0",
+    "lodash": "^4.0.0",
+    "prop-types": "^15.0.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.4.0-alpha.3",
-    "ariakit": "2.0.0-alpha.19",
-    "date-fns": "2.28.0",
-    "modern-css-reset": "1.4.0",
-    "query-string": "7.1.1",
-    "use-query-params": "1.2.3"
+    "@bundle-stats/utils": "^3.4.0-beta.0",
+    "ariakit": "2.0.0-alpha.21",
+    "date-fns": "^2.28.0",
+    "modern-css-reset": "^1.4.0",
+    "query-string": "^7.1.0",
+    "use-query-params": "^1.2.3"
   },
-  "gitHead": "a9c2ce85afa59b900a8e13cc1a338ef74f737e86"
+  "gitHead": "45774cba629c670df5528d72a67d3cfaddd8fed7"
 }