@bundle-stats/ui 4.1.1-alpha.3 → 4.1.2-alpha.0

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

@@ -1,16 +1,16 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
+import { Icon } from '../../ui/icon';
 import { HoverCard } from '../../ui/hover-card';
 import { Skeleton } from '../../ui/skeleton';
+import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { Metric } from '../metric';
 import { Delta } from '../delta';
 import css from './summary-item.module.css';
-
 const MetricInfo = _ref => {
   let {
     description,
@@ -31,7 +31,6 @@ const MetricInfo = _ref => {
     className: css.readMoreLink
   }, "Read more")));
 };
-
 MetricInfo.propTypes = {
   description: PropTypes.string.isRequired,
   url: PropTypes.string
@@ -63,14 +62,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: "xxxsmall",
+    space: "xxsmall",
     as: Component,
     className: rootClassName
-  }, props), /*#__PURE__*/React.createElement("h3", {
+  }, props), /*#__PURE__*/React.createElement(FlexStack, {
+    space: "xxxsmall",
+    as: "h3",
     className: css.title
-  }, showMetricDescriptionTooltip ? /*#__PURE__*/React.createElement(HoverCard, {
-    label: metric.label
-  }, /*#__PURE__*/React.createElement(MetricInfo, metric)) : metric.label), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
+  }, /*#__PURE__*/React.createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(HoverCard, {
+    label: /*#__PURE__*/React.createElement(Icon, {
+      glyph: Icon.ICONS.HELP
+    }),
+    className: css.titleIcon
+  }, /*#__PURE__*/React.createElement(MetricInfo, metric))), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
     className: css.currentMetric,
     value: current,
     formatter: metric.formatter,
@@ -104,26 +108,20 @@ SummaryItem.defaultProps = {
 SummaryItem.propTypes = {
   /** Adopted child class name */
   className: PropTypes.string,
-
   /** Custom component */
   as: PropTypes.elementType,
-
   /** Size modifier */
   size: PropTypes.oneOf(['medium', 'large']),
-
   /** Metric id */
   id: PropTypes.string.isRequired,
-
   /** Loading flag */
   loading: PropTypes.bool,
-
   /** Summary data */
   data: PropTypes.object,
   // eslint-disable-line react/forbid-prop-types
 
   /** Show description */
   showMetricDescription: PropTypes.bool,
-
   /** Show delta */
   showDelta: PropTypes.bool
 };

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

@@ -2,14 +2,19 @@
   color: var(--color-text-ultra-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
-  line-height: 1;
   text-transform: uppercase;
   white-space: nowrap;
+  align-items: center;
+}
+
+.titleIcon {
+  opacity: 0;
+  pointer-events: none;
 }
 
 .currentMetric {
   color: var(--color-heading);
-  font-size: var(--size-xlarge);
+  font-size: var(--size-large);
   white-space: nowrap;
   font-weight: bold;
 }
@@ -38,8 +43,9 @@
 }
 
 /* Hover state */
-.root:hover .title {
-  color: var(--color-text-light);
+.root:hover .titleIcon {
+  opacity: 1;
+  pointer-events: auto;
 }
 
 

package/lib-esm/constants.js

@@ -22,7 +22,8 @@ export const SECTION_URLS = {
   [SECTIONS.MODULES]: URLS.MODULES,
   [SECTIONS.PACKAGES]: URLS.PACKAGES
 };
-export const ASSETS_SIZES_FILE_TYPE_MAP = FILE_TYPES.reduce((agg, fileType) => ({ ...agg,
+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'];

package/lib-esm/css/default.css

@@ -26,6 +26,7 @@ body {
 h1, h2, h3, h4, h5, h6 {
   color: var(--color-heading);
   font-weight: 500;
+  line-height: var(--line-height-heading);
 }
 
 h1 {
@@ -63,8 +64,10 @@ a {
 }
 
 a:hover,
-a:active {
+a:active,
+a:focus {
   color: var(--color-primary-dark);
+  outline: none;
 }
 
 .ui-button--primary {

package/lib-esm/css/variables.css

@@ -24,13 +24,14 @@
   --size-xxxlarge: 1.602rem;
 
   --line-height: 1.66em;
+  --line-height-heading: 1.33em;
 
   /*
    * Color scheme:
    * https://coolors.co/287acc-da444e-55b950-f6e179-192339
    * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23f6e179&mcgpalette3=%23505861&mcgpalette4=%23287acc&themename=mcgtheme
    */
-  --color-gray-25: #f3f3f4;
+  --color-gray-25: #F7F7F7;
   --color-gray-50 : #eaebec;
   --color-gray-100: #cbcdd0;
   --color-gray-200: #a8acb0;
@@ -182,9 +183,9 @@
   --layer-high: 1000;
   --layer-xhigh: 10000;
 
-  --radius-small: 3px;
-  --radius-medium: var(--space-xxxsmall);
-  --radius-large: var(--space-xxsmall);
+  --radius-small: 2px;
+  --radius-medium: 3px;
+  --radius-large: 5px;
 
   /** Layout */
   --max-width: 80rem;

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

@@ -12,7 +12,6 @@ export const useRowsFilter = _ref => {
       if (searchPattern && !searchPattern.test(row == null ? void 0 : row.key)) {
         return false;
       }
-
       return filterRow(row);
     });
   }, [rows, searchPattern, filters, getRowFilter]);

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

@@ -8,14 +8,11 @@ const ACTION_RESET_ALL = 'RESET_ALL';
 const ACTION_SET = 'SET';
 const SEARCH_DEFAULT = '';
 const SEARCH_DEFAULT_PATTERN = /.*/;
-
 const getSearchPattern = search => {
   let searchPattern = SEARCH_DEFAULT_PATTERN;
-
   if (!search || !search.trim()) {
     return searchPattern;
   }
-
   try {
     searchPattern = new RegExp(search, 'i');
   } catch (err) {
@@ -25,7 +22,6 @@ const getSearchPattern = search => {
 
   return searchPattern;
 };
-
 const getSearchReducer = _ref => {
   let {
     defaultFilters,
@@ -37,7 +33,6 @@ const getSearchReducer = _ref => {
       type,
       payload
     } = action;
-
     switch (type) {
       case ACTION_SET_FILTERS:
         {
@@ -48,7 +43,6 @@ const getSearchReducer = _ref => {
           setParentState(newState);
           return newState;
         }
-
       case ACTION_SET_SEARCH:
         {
           const newState = {
@@ -56,11 +50,11 @@ const getSearchReducer = _ref => {
             search: payload
           };
           setParentState(newState);
-          return { ...newState,
+          return {
+            ...newState,
             searchPattern: getSearchPattern(payload)
           };
         }
-
       case ACTION_RESET_DEFAULT:
         {
           const newState = {
@@ -68,11 +62,11 @@ const getSearchReducer = _ref => {
             search: SEARCH_DEFAULT
           };
           setParentState(newState);
-          return { ...newState,
+          return {
+            ...newState,
             searchPattern: getSearchPattern()
           };
         }
-
       case ACTION_RESET_ALL:
         {
           const newState = {
@@ -80,22 +74,20 @@ const getSearchReducer = _ref => {
             search: SEARCH_DEFAULT
           };
           setParentState(newState);
-          return { ...newState,
+          return {
+            ...newState,
             searchPattern: getSearchPattern()
           };
         }
-
       case ACTION_SET:
         {
           return payload;
         }
-
       default:
         return state;
     }
   };
 };
-
 export const generateState = (filters, search) => ({
   filters,
   search,
@@ -119,21 +111,21 @@ export const useSearchParams = _ref2 => {
     defaultFilters,
     allEntriesFilters,
     setParentState
-  }), generateState(initialFilters, parentSearch)); // Update state when the custom filters/search are changing - initial load or route updates
+  }), 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(initialFilters, filters)) {
       return;
     }
-
     dispatch({
       type: ACTION_SET,
       payload: generateState(initialFilters, parentSearch)
     });
   }, [dispatch, search, filters, parentSearch, initialFilters]);
-  /** Callbacks */
 
+  /** Callbacks */
   const handleUpdateSearch = useCallback(newValue => {
     dispatch({
       type: ACTION_SET_SEARCH,

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

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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';
@@ -32,19 +31,14 @@ Box.defaultProps = {
 Box.propTypes = {
   /** Adopted child class name */
   className: PropTypes.string,
-
   /** Rendered component */
   as: PropTypes.elementType,
-
   /** Padding space size */
   padding: PropTypes.oneOfType([PropTypes.oneOf(SPACES), PropTypes.arrayOf(PropTypes.oneOf(SPACES))]),
-
   /** Horizonatl padding space size */
   horizontalPadding: PropTypes.oneOf(SPACES),
-
   /** Vertical padding space size */
   verticalPadding: PropTypes.oneOf(SPACES),
-
   /** Outline flag */
   outline: PropTypes.bool
 };

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

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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';

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

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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';
@@ -8,15 +7,14 @@ import { Container } from '../../ui/container';
 import { Box } from '../box';
 import { Stack } from '../stack';
 import css from './footer.module.css';
-/* eslint-disable jsx-a11y/anchor-has-content */
 
+/* eslint-disable jsx-a11y/anchor-has-content */
 const ExternalLink = props => /*#__PURE__*/React.createElement("a", _extends({
   target: "_blank",
   rel: "noopener noreferrer"
 }, props));
 /* eslint-enable jsx-a11y/anchor-has-content */
 
-
 ExternalLink.propTypes = {
   /** Link to value */
   to: PropTypes.string.isRequired
@@ -61,7 +59,6 @@ Footer.defaultProps = {
 Footer.propTypes = {
   /** Adopted child class name */
   className: PropTypes.string,
-
   /** Content */
   version: PropTypes.string
 };

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

@@ -28,13 +28,10 @@ Header.defaultProps = {
 Header.propTypes = {
   /* Adopted child class name */
   className: PropTypes.string,
-
   /* Render left area */
   renderLeft: PropTypes.func,
-
   /* Render center area */
   render: PropTypes.func,
-
   /* Render right area */
   renderRight: PropTypes.func
 };

package/lib-esm/layout/separator.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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';
@@ -10,11 +9,11 @@ const propTypes = {
 const defaultProps = {
   className: ''
 };
+
 /**
  * @param {PropTypes.InferProps<typeof propTypes>} props
  * @return {React.FunctionComponentElement}
  */
-
 export const Separator = props => {
   const {
     className,

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

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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';

package/lib-esm/prototypes/typography.stories.js

@@ -25,8 +25,9 @@ stories.add('typography', () => /*#__PURE__*/React.createElement(React.Fragment,
   dangerouslySetInnerHTML: {
     __html: content
   }
-})))); // eslint-disable-next-line react/prop-types
+}))));
 
+// eslint-disable-next-line react/prop-types
 const Item = _ref => {
   let {
     colorName,
@@ -41,9 +42,9 @@ const Item = _ref => {
       flex: '1 1 20%'
     }
   }, `${colorName} ${valueName}`);
-}; // eslint-disable-next-line react/prop-types
-
+};
 
+// eslint-disable-next-line react/prop-types
 const ItemColorValue = _ref2 => {
   let {
     value
@@ -57,7 +58,6 @@ const ItemColorValue = _ref2 => {
     }
   }, value);
 };
-
 const COLORS = ['blue', 'red', 'green', 'yellow', 'gray'];
 const NAMES = ['ultra-light', 'light', 'normal', 'dark', 'ultra-dark'];
 stories.add('color sheme', () => /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Item, {

package/lib-esm/query-state.js

@@ -1,8 +1,6 @@
 import _merge from "lodash/merge";
 import _isEqual from "lodash/isEqual";
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 { JsonParam, QueryParamProvider, useQueryParams } from 'use-query-params';
 import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
@@ -20,13 +18,12 @@ export const useComponentQueryState = componentName => {
   });
   const state = search[componentName];
   const setState = useCallback(newState => {
-    const newComponentState = _merge({}, state, newState); // Deep check to prevent unnecessary state changes
-
+    const newComponentState = _merge({}, state, newState);
 
+    // Deep check to prevent unnecessary state changes
     if (_isEqual(newComponentState, state)) {
       return;
     }
-
     setSearch({
       [componentName]: newComponentState
     });

package/lib-esm/stories/wrapper.js

@@ -4,7 +4,6 @@ export const getWrapperDecorator = function (customWrapperStyles) {
   if (customWrapperStyles === void 0) {
     customWrapperStyles = {};
   }
-
   return storyFn => {
     const wrapperStyles = {
       width: '100%',

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

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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';
@@ -23,7 +22,6 @@ Container.defaultProps = {
 Container.propTypes = {
   /** Adopted child class name */
   className: PropTypes.string,
-
   /** Custom component */
   as: PropTypes.elementType
 };

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

@@ -51,19 +51,14 @@ Dropdown.defaultProps = {
 Dropdown.propTypes = {
   /** Adopted child class name */
   className: PropTypes.string,
-
   /** Button adopted child class name */
   buttonClassName: PropTypes.string,
-
   /** Button label */
   label: PropTypes.node,
-
   /** Aria label */
   ariaLabel: PropTypes.string,
-
   /** Icon glyph */
   glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
   /** Content */
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired
 };

package/lib-esm/ui/file-name/file-name.js

@@ -20,10 +20,8 @@ FileName.defaultProps = {
 FileName.propTypes = {
   /** Adopted child class name */
   className: PropTypes.string,
-
   /** Element type */
   as: PropTypes.elementType,
-
   /** File name source  */
   name: PropTypes.string
 };

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

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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';
@@ -7,7 +6,6 @@ import { FlexStack } from '../../layout/flex-stack';
 import { Dropdown } from '../dropdown';
 import { getGroupFiltersLabelSuffix, LABELS } from './filters.utils';
 import css from './filters.module.css';
-
 const Filter = props => {
   const {
     className,
@@ -40,7 +38,6 @@ const Filter = props => {
     onClick: getOnOnlyClick(name)
   }, "only"));
 };
-
 Filter.propTypes = {
   className: PropTypes.string,
   as: PropTypes.elementType,
@@ -55,7 +52,6 @@ Filter.defaultProps = {
   buttonClassName: '',
   getOnOnlyClick: null
 };
-
 const FilterGroup = props => {
   const {
     className,
@@ -84,25 +80,24 @@ const FilterGroup = props => {
   const dropdownLabel = /*#__PURE__*/React.createElement(React.Fragment, null, `${groupLabel}:`, "\xA0", /*#__PURE__*/React.createElement("span", {
     className: cx(hasCustomFilterSuffix && css.labelSuffixCustom)
   }, filterSuffix));
-
   const getOnGroupCheck = function (value, overrides) {
     if (overrides === void 0) {
       overrides = {};
     }
-
     return () => {
       const newFilters = groupCheckboxes.reduce((agg, _ref3) => {
         let [itemKey] = _ref3;
-        return { ...agg,
+        return {
+          ...agg,
           [`${groupKey}.${itemKey}`]: value
         };
       }, {});
-      toggleFilters({ ...newFilters,
+      toggleFilters({
+        ...newFilters,
         ...overrides
       });
     };
   };
-
   return /*#__PURE__*/React.createElement(Dropdown, {
     className: className,
     buttonClassName: buttonClassName,
@@ -119,11 +114,9 @@ const FilterGroup = props => {
     }, groupItems.map(_ref5 => {
       let [itemKey, itemData] = _ref5;
       const id = [groupKey, itemKey].join('.');
-
       const getOnOnlyClick = () => getOnGroupCheck(false, {
         [id]: true
       });
-
       return /*#__PURE__*/React.createElement(Filter, {
         key: id,
         className: menuItemClassName,
@@ -152,7 +145,6 @@ const FilterGroup = props => {
     }, "Check all")));
   });
 };
-
 FilterGroup.propTypes = {
   className: PropTypes.string,
   buttonClassName: PropTypes.string,
@@ -190,7 +182,6 @@ export const Filters = props => {
     className: css.items
   }, Object.entries(filters).map(_ref6 => {
     let [name, data] = _ref6;
-
     if (typeof (data == null ? void 0 : data.defaultValue) !== 'undefined') {
       return /*#__PURE__*/React.createElement(Filter, {
         key: name,
@@ -203,7 +194,6 @@ export const Filters = props => {
         disabled: data.disabled
       });
     }
-
     return /*#__PURE__*/React.createElement(FilterGroup, {
       className: css.item,
       buttonClassName: css.itemButton,

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

@@ -7,7 +7,6 @@ const stories = storiesOf('UI/Filters', module);
 stories.addDecorator(getWrapperDecorator({
   paddingLeft: '200px'
 }));
-
 const FiltersState = _ref => {
   let {
     children
@@ -17,14 +16,14 @@ const FiltersState = _ref => {
     'assetType.entrypoint': true
   });
   const handleSetValues = useCallback(newValues => {
-    setValues({ ...values,
+    setValues({
+      ...values,
       ...newValues
     });
     console.info(newValues);
   }, [values]);
   return children(values, handleSetValues);
 };
-
 stories.add('default', () => /*#__PURE__*/React.createElement(FiltersState, null, (values, setValues) => /*#__PURE__*/React.createElement(Filters, {
   onChange: setValues,
   filters: {
@@ -62,7 +61,8 @@ stories.add('overflow', () => /*#__PURE__*/React.createElement(FiltersState, nul
     },
     chunks: {
       label: 'Chunks',
-      ...Array(22).fill('').reduce((agg, value, currentIndex) => ({ ...agg,
+      ...Array(22).fill('').reduce((agg, value, currentIndex) => ({
+        ...agg,
         [`chunk-${currentIndex}`]: {
           label: `Chunk ${currentIndex + 1}`,
           defaultValue: _get(values, `chunks.chunk-${currentIndex}`)
@@ -75,6 +75,7 @@ stories.add('disable options', () => /*#__PURE__*/React.createElement(Filters, {
   onChange: state => {
     console.log(state); // eslint-disable-line no-console
   },
+
   filters: {
     changed: {
       label: 'Changed',