@bundle-stats/ui 3.3.0-alpha.1 → 3.3.0-beta.1

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

@@ -13,16 +13,12 @@ import { FlexStack } from '../../layout/flex-stack';
 import { ComponentLink } from '../component-link';
 import { SummaryItem } from '../summary-item';
 import css from './summary.module.css';
-
-const getSourceMetricId = fullMetricId => fullMetricId.split('.').slice(1).join('.');
-
 export const Summary = _ref => {
   let {
     className,
     size,
     keys,
     data,
-    budgets,
     loading,
     showSummaryItemDelta,
     summaryItemLink: SummaryItemCustomLink
@@ -34,7 +30,7 @@ export const Summary = _ref => {
     className: css.items
   }, Array.from(METRIC_COMPONENT_LINKS).filter(_ref2 => {
     let [metricId] = _ref2;
-    return keys.includes(getSourceMetricId(metricId));
+    return keys.includes(metricId);
   }).map(_ref3 => {
     let [metricId, metricOptions] = _ref3;
     return /*#__PURE__*/React.createElement("div", {
@@ -44,7 +40,6 @@ export const Summary = _ref => {
       size: size,
       id: metricId,
       data: _get(data, metricId),
-      budget: _get(budgets, metricId),
       loading: loading,
       showMetricDescription: true,
       showDelta: showSummaryItemDelta && metricOptions.showDelta !== false
@@ -59,7 +54,6 @@ export const Summary = _ref => {
 Summary.defaultProps = {
   className: '',
   data: null,
-  budgets: null,
   loading: false,
   size: '',
   keys: METRICS_WEBPACK_GENERAL,
@@ -70,10 +64,12 @@ Summary.propTypes = {
   className: PropTypes.string,
   size: PropTypes.string,
   keys: PropTypes.arrayOf(PropTypes.string),
-  data: PropTypes.object,
-  // eslint-disable-line react/forbid-prop-types
-  budgets: PropTypes.object,
-  // eslint-disable-line react/forbid-prop-types
+  data: PropTypes.shape({
+    [PropTypes.string]: PropTypes.shape({
+      baseline: PropTypes.number,
+      current: PropTypes.number
+    })
+  }),
   loading: PropTypes.bool,
   showSummaryItemDelta: PropTypes.bool,
   summaryItemLink: PropTypes.elementType

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

@@ -4,7 +4,7 @@
 }
 
 .item {
-  padding: var(--space-small);
+  padding: var(--space-small) var(--space-xxlarge) var(--space-small) var(--space-small);
   flex: 1 0 25%; /* force equal sizes */
   position: relative;
   z-index: 1;

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

@@ -21,33 +21,6 @@ stories.addDecorator(getWrapperDecorator());
 stories.add('default', () => /*#__PURE__*/React.createElement(Summary, {
   data: MULTIPLE_JOBS[0].summary
 }));
-stories.add('budgets', () => /*#__PURE__*/React.createElement(Summary, {
-  data: MULTIPLE_JOBS[0].summary,
-  budgets: {
-    webpack: {
-      totalSizeByTypeALL: {
-        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
-      },
-      totalInitialSizeCSS: {
-        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
-      }
-    }
-  }
-}));
 stories.add('custom keys', () => /*#__PURE__*/React.createElement(Summary, {
   keys: METRICS_WEBPACK_ASSETS,
   data: MULTIPLE_JOBS[0].summary

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

@@ -4,40 +4,33 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
-import { Popover } from '../../ui/popover';
+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 { Metric } from '../metric';
 import { Delta } from '../delta';
-import { BudgetInfo } from '../budget-info';
 import css from './summary-item.module.css';
 
-const MetricInfoPopover = _ref => {
+const MetricInfo = _ref => {
   let {
     description,
     url
   } = _ref;
-
-  // Workaround cases where the parent is a link
-  const readMoreOnClick = () => {
-    window.open(url);
-  };
-
   return /*#__PURE__*/React.createElement(Stack, {
     space: "xxxsmall"
-  }, /*#__PURE__*/React.createElement("p", null, description), url && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: css.readMoreBtn,
-    onClick: readMoreOnClick
+  }, /*#__PURE__*/React.createElement("p", null, description), url && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {
+    href: url,
+    className: css.readMoreLink
   }, "Read more")));
 };
 
-MetricInfoPopover.propTypes = {
+MetricInfo.propTypes = {
   description: PropTypes.string.isRequired,
   url: PropTypes.string
 };
-MetricInfoPopover.defaultProps = {
+MetricInfo.defaultProps = {
   url: ''
 };
 export const SummaryItem = _ref2 => {
@@ -50,7 +43,6 @@ export const SummaryItem = _ref2 => {
     loading,
     showDelta,
     showMetricDescription,
-    budget,
     ...props
   } = _ref2;
   const {
@@ -65,23 +57,19 @@ 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: "xxsmall",
+    space: "xxxsmall",
     as: Component,
     className: rootClassName
   }, props), /*#__PURE__*/React.createElement(FlexStack, {
     as: "h3",
     space: "xxxsmall",
     className: css.title
-  }, /*#__PURE__*/React.createElement("span", {
-    className: css.titleLabel
-  }, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(Popover, {
+  }, /*#__PURE__*/React.createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(HoverCard, {
     className: css.icon,
-    icon: "help"
-  }, /*#__PURE__*/React.createElement(MetricInfoPopover, metric)), budget && /*#__PURE__*/React.createElement(BudgetInfo, {
-    className: css.budgetInfo,
-    metricId: id,
-    budgetInsight: budget
-  })), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
+    label: /*#__PURE__*/React.createElement(Icon, {
+      glyph: "help"
+    })
+  }, /*#__PURE__*/React.createElement(MetricInfo, metric))), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
     className: css.currentMetric,
     value: current,
     formatter: metric.formatter,
@@ -108,8 +96,7 @@ SummaryItem.defaultProps = {
   size: 'medium',
   loading: false,
   showMetricDescription: false,
-  showDelta: true,
-  budget: undefined
+  showDelta: true
 };
 SummaryItem.propTypes = {
   /** Adopted child class name */
@@ -135,12 +122,5 @@ SummaryItem.propTypes = {
   showMetricDescription: PropTypes.bool,
 
   /** Show delta */
-  showDelta: PropTypes.bool,
-
-  /** Budget insight data */
-  budget: PropTypes.shape({
-    currentBalue: PropTypes.number,
-    budgetValue: PropTypes.number,
-    failed: PropTypes.bool
-  })
+  showDelta: PropTypes.bool
 };

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

@@ -1,9 +1,5 @@
-.root {
-  position: relative;
-  padding-right: var(--space-xlarge);
-}
-
 .title {
+  align-items: center;
   color: var(--color-text-ultra-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
@@ -12,35 +8,6 @@
   white-space: nowrap;
 }
 
-.titleLabel {
-  flex: 0 0 auto;
-}
-
-.readMoreBtn {
-  appearance: none;
-  padding: 0;
-  border: 0;
-  background: none;
-  cursor: pointer;
-  /* simulate link */
-  color: var(--color-primary);
-  text-decoration: underline;
-  line-height: var(--space-small);
-}
-
-.readMoreBtn:hover,
-.readMoreBtn:active,
-.readMoreBtn:focus {
-  color: var(--color-primary-dark);
-  text-decoration: none;
-}
-
-.budgetInfo {
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
 .currentMetric {
   display: block;
   color: var(--color-heading);

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

@@ -2,56 +2,44 @@ import React from 'react';
 import { SummaryItem } from './summary-item';
 export default {
   title: 'Components/SummaryItem',
-  component: SummaryItem,
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    style: {
-      maxWidth: '320px'
-    }
-  }, /*#__PURE__*/React.createElement(Story, null))],
-  args: {
-    loading: false,
-    id: 'webpack.totalSizeByTypeALL',
-    data: {
-      current: 120 * 1000,
-      baseline: 100 * 1000
-    }
-  }
-};
-
-const Template = args => /*#__PURE__*/React.createElement(SummaryItem, args);
-
-export const Standard = Template.bind();
-export const SizeLarge = Template.bind();
-SizeLarge.args = {
-  size: 'large'
-};
-export const ShowMetricDescription = Template.bind();
-ShowMetricDescription.args = {
-  showMetricDescription: true
-};
-export const ShowDeltaFalse = Template.bind();
-ShowDeltaFalse.args = {
-  showDelta: false
+  component: SummaryItem
 };
-export const BudgetError = Template.bind();
-BudgetError.args = {
-  showMetricDescription: true,
-  budget: {
-    currentValue: 120 * 1000,
-    budgetValue: 100 * 1000,
-    failed: true
+export const Standard = () => /*#__PURE__*/React.createElement(SummaryItem, {
+  loading: false,
+  id: "webpack.totalSizeByTypeALL",
+  data: {
+    current: 120 * 1000,
+    baseline: 100 * 1000
   }
-};
-export const BudgetSuccess = Template.bind();
-BudgetSuccess.args = {
-  showMetricDescription: true,
-  budget: {
-    currentValue: 120 * 1000,
-    budgetValue: 120 * 1024,
-    failed: false
+});
+export const SizeLarge = () => /*#__PURE__*/React.createElement(SummaryItem, {
+  size: "large",
+  loading: false,
+  id: "webpack.totalSizeByTypeALL",
+  data: {
+    current: 120 * 1000,
+    baseline: 100 * 1000
   }
-};
-export const Loading = Template.bind();
-Loading.args = {
-  loading: true
-};
+});
+export const ShowMetricDescription = () => /*#__PURE__*/React.createElement(SummaryItem, {
+  loading: false,
+  id: "webpack.totalSizeByTypeALL",
+  data: {
+    current: 120 * 1000,
+    baseline: 100 * 1000
+  },
+  showMetricDescription: true
+});
+export const ShowDeltaFalse = () => /*#__PURE__*/React.createElement(SummaryItem, {
+  loading: false,
+  id: "webpack.totalSizeByTypeALL",
+  data: {
+    current: 120 * 1000,
+    baseline: 0
+  },
+  showDelta: false
+});
+export const Loading = () => /*#__PURE__*/React.createElement(SummaryItem, {
+  loading: true,
+  id: "webpack.totalSizeByTypeALL"
+});

package/lib-esm/components/total-size-type-title/total-size-type-title.js

@@ -5,7 +5,8 @@ import config from '../../config.json';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
-import { Popover } from '../../ui/popover';
+import { Icon } from '../../ui/icon';
+import { HoverCard } from '../../ui/hover-card';
 import css from './total-size-type-title.module.css';
 export const TotalSizeTypeTitle = _ref => {
   let {
@@ -14,8 +15,10 @@ export const TotalSizeTypeTitle = _ref => {
   return /*#__PURE__*/React.createElement(FlexStack, {
     space: "xxxsmall",
     className: cx(css.title, className)
-  }, /*#__PURE__*/React.createElement("span", null, I18N.ASSET_TOTALS), /*#__PURE__*/React.createElement(Popover, {
-    icon: "help"
+  }, /*#__PURE__*/React.createElement("span", null, I18N.ASSET_TOTALS), /*#__PURE__*/React.createElement(HoverCard, {
+    label: /*#__PURE__*/React.createElement(Icon, {
+      glyph: "help"
+    })
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "xxxsmall"
   }, /*#__PURE__*/React.createElement("p", null, I18N.ASSET_TOTALS_INFO), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {

package/lib-esm/constants.js

@@ -25,7 +25,7 @@ export const SECTION_URLS = {
 export const ASSETS_SIZES_FILE_TYPE_MAP = FILE_TYPES.reduce((agg, fileType) => ({ ...agg,
   [`webpack.sizes.totalSizeByType${fileType}`]: fileType
 }), {});
-export const METRICS_WEBPACK_GENERAL = ['totalSizeByTypeALL', 'totalInitialSizeJS', 'totalInitialSizeCSS', 'cacheInvalidation'];
-export const METRICS_WEBPACK_ASSETS = ['assetCount', 'chunkCount'];
-export const METRICS_WEBPACK_MODULES = ['moduleCount'];
-export const METRICS_WEBPACK_PACKAGES = ['packageCount', 'duplicatePackagesCount'];
+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', 'webpack.duplicateModulesCount', 'webpack.duplicateCode'];
+export const METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];

package/lib-esm/css/default.css

@@ -1,18 +1,29 @@
+@import url("~modern-css-reset/dist/reset.css");
+
 :root {
   --chart-height: 180px;
 }
 
+/** modern-css-reset updates */
+pre,
+ul,
+ol,
+button {
+  margin: 0;
+}
+
 html {
+  font-family: var(--font-family);
   font-size: 81.25%;
-  line-height: 1.8461;
+  line-height: 1.6;
 }
 
 body {
+  background: var(--color-background);
   color: var(--color-text);
 }
 
-h1, h2, h3, h4, h5 {
-  margin-bottom: var(--space-small);
+h1, h2, h3, h4, h5, h6 {
   color: var(--color-heading);
   font-weight: 500;
 }

package/lib-esm/css/variables.css

@@ -23,30 +23,30 @@
   --size-xxlarge: 1.424rem;
   --size-xxxlarge: 1.602rem;
 
-  --line-height: var(--space-medium);
+  --line-height: 1.6em;
 
   /*
    * Color scheme:
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23636568&mcgpalette4=%233385d6&themename=mcgtheme
    * https://coolors.co/3385d6-dd555e-63bf5e-f7e37d-192339
+   * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%235b5d60&mcgpalette4=%233385d6&themename=mcgtheme
    */
   --color-gray-25: #fafafa;
-  --color-gray-50: #eceded;
-  --color-gray-100: #d0d1d2;
-  --color-gray-200: #b1b2b4;
-  --color-gray-300: #929395;
-  --color-gray-400: #7a7c7f;
-  --color-gray-500: #636568;
-  --color-gray-600: #5b5d60;
-  --color-gray-700: #515355;
-  --color-gray-800: #47494b;
-  --color-gray-900: #35373a;
+  --color-gray-50: #e4e4e5;
+  --color-gray-100: #cececf;
+  --color-gray-200: #adaeb0;
+  --color-gray-300: #8c8e90;
+  --color-gray-400: #747578;
+  --color-gray-500: #5b5d60;
+  --color-gray-600: #535558;
+  --color-gray-700: #494b4e;
+  --color-gray-800: #404144;
+  --color-gray-900: #2f3033;
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
   --color-gray: var(--color-gray-500);
-  --color-gray-dark: var(--color-gray-700);
-  --color-gray-ultra-dark: var(--color-gray-900);
+  --color-gray-dark: var(--color-gray-600);
+  --color-gray-ultra-dark: var(--color-gray-700);
 
   --color-red-25: #fdf5f6;
   --color-red-50: #fbebec;
@@ -181,9 +181,9 @@
   --layer-high: 1000;
   --layer-xhigh: 10000;
 
-  --radius-small: var(--space-xxxsmall);
-  --radius-medium: var(--space-xxsmall);
-  --radius-large: var(--space-small);
+  --radius-small: 3px;
+  --radius-medium: var(--space-xxxsmall);
+  --radius-large: var(--space-xxsmall);
 
   /** Layout */
   --max-width: 80rem;

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

@@ -6,9 +6,11 @@ const ACTION_SET_SEARCH = 'SET_SEARCH';
 const ACTION_RESET_DEFAULT = 'RESET_DEFAULT';
 const ACTION_RESET_ALL = 'RESET_ALL';
 const ACTION_SET = 'SET';
+const SEARCH_DEFAULT = '';
+const SEARCH_DEFAULT_PATTERN = /.*/;
 
 const getSearchPattern = search => {
-  let searchPattern = /.*/;
+  let searchPattern = SEARCH_DEFAULT_PATTERN;
 
   if (!search || !search.trim()) {
     return searchPattern;
@@ -39,49 +41,46 @@ const getSearchReducer = _ref => {
     switch (type) {
       case ACTION_SET_FILTERS:
         {
-          setParentState({
+          const newState = {
             filters: payload,
             search: state.search
-          });
-          return { ...state,
-            filters: payload
           };
+          setParentState(newState);
+          return newState;
         }
 
       case ACTION_SET_SEARCH:
         {
-          setParentState({
+          const newState = {
             filters: state.filters,
             search: payload
-          });
-          return { ...state,
-            search: payload,
+          };
+          setParentState(newState);
+          return { ...newState,
             searchPattern: getSearchPattern(payload)
           };
         }
 
       case ACTION_RESET_DEFAULT:
         {
-          setParentState({
-            filters: defaultFilters,
-            search: ''
-          });
-          return {
+          const newState = {
             filters: defaultFilters,
-            search: '',
+            search: SEARCH_DEFAULT
+          };
+          setParentState(newState);
+          return { ...newState,
             searchPattern: getSearchPattern()
           };
         }
 
       case ACTION_RESET_ALL:
         {
-          setParentState({
+          const newState = {
             filters: allEntriesFilters,
-            search: ''
-          });
-          return {
-            filters: allEntriesFilters,
-            search: '',
+            search: SEARCH_DEFAULT
+          };
+          setParentState(newState);
+          return { ...newState,
             searchPattern: getSearchPattern()
           };
         }
@@ -104,7 +103,7 @@ export const generateState = (filters, search) => ({
 });
 export const useSearchParams = _ref2 => {
   let {
-    search: parentSearch,
+    search: parentSearch = SEARCH_DEFAULT,
     filters: parentFilters,
     defaultFilters,
     allEntriesFilters,
@@ -124,7 +123,7 @@ export const useSearchParams = _ref2 => {
 
   useLayoutEffect(() => {
     // Run a deep comparison to prevent circular setState triggering
-    if (parentSearch === search || _isEqual(parentFilters, filters)) {
+    if (parentSearch === search && _isEqual(initialFilters, filters)) {
       return;
     }
 
@@ -132,7 +131,7 @@ export const useSearchParams = _ref2 => {
       type: ACTION_SET,
       payload: generateState(initialFilters, parentSearch)
     });
-  }, [search, filters, parentFilters, parentSearch]);
+  }, [dispatch, search, filters, parentSearch, initialFilters]);
   /** Callbacks */
 
   const handleUpdateSearch = useCallback(newValue => {
@@ -140,23 +139,23 @@ export const useSearchParams = _ref2 => {
       type: ACTION_SET_SEARCH,
       payload: newValue
     });
-  }, []);
+  }, [dispatch]);
   const handleUpdateFilters = useCallback(newFilters => {
     dispatch({
       type: ACTION_SET_FILTERS,
       payload: newFilters
     });
-  }, []);
+  }, [dispatch]);
   const handleResetFilters = useCallback(() => {
     dispatch({
       type: ACTION_RESET_DEFAULT
     });
-  }, []);
+  }, [dispatch]);
   const handleResetAllFilters = useCallback(() => {
     dispatch({
       type: ACTION_RESET_ALL
     });
-  }, []);
+  }, [dispatch]);
   return {
     search,
     searchPattern,

package/lib-esm/layout/box/box.module.css

@@ -4,6 +4,15 @@
 
 .outline {
   border: 1px solid var(--color-outline);
+  border-radius: var(--radius-medium);
+}
+
+.outline > :first-child {
+  border-radius: var(--radius-medium) var(--radius-medium) 0 0;
+}
+
+.outline > :last-child {
+  border-radius: 0 0 var(--radius-medium) var(--radius-medium);
 }
 
 .padding-xxxsmall {

package/lib-esm/layout/footer/footer.module.css

@@ -3,7 +3,7 @@
 }
 
 .inner {
-  border-top: 2px solid var(--color-outline);
+  border-top: 1px solid var(--color-outline);
 }
 
 .navItem {

package/lib-esm/layout/index.js

@@ -1,6 +1,7 @@
 export { Box } from './box';
 export { Footer } from './footer';
 export { Header } from './header';
+export { Separator } from './separator';
 export { SubHeader } from './sub-header';
 export { Stack } from './stack';
 export { FlexStack } from './flex-stack';

package/lib-esm/layout/separator.js

@@ -0,0 +1,28 @@
+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 from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import css from './separator.module.css';
+const propTypes = {
+  className: PropTypes.string
+};
+const defaultProps = {
+  className: ''
+};
+/**
+ * @param {PropTypes.InferProps<typeof propTypes>} props
+ * @return {React.FunctionComponentElement}
+ */
+
+export const Separator = props => {
+  const {
+    className,
+    ...restProps
+  } = props;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cx(css.root, className)
+  }, restProps));
+};
+Separator.propTypes = propTypes;
+Separator.defaultProps = defaultProps;