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

package/lib-esm/components/summary-item/summary-item.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';
@@ -10,7 +9,6 @@ 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 +29,6 @@ const MetricInfo = _ref => {
     className: css.readMoreLink
   }, "Read more")));
 };
-
 MetricInfo.propTypes = {
   description: PropTypes.string.isRequired,
   url: PropTypes.string
@@ -104,26 +101,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/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

@@ -63,8 +63,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

@@ -30,7 +30,7 @@
    * 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;

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',

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

@@ -5,14 +5,14 @@ export const LABELS = {
   NONE: 'none',
   ALL: 'all'
 };
+
 /**
  * @param {Array<Array>} filters
  * @return {String}
  */
-
 export const getGroupFiltersLabelSuffix = filters => {
-  const filterCount = filters.length; // eslint-disable-next-line no-unused-vars
-
+  const filterCount = filters.length;
+  // eslint-disable-next-line no-unused-vars
   const checkedFilters = filters.filter(_ref => {
     let [_, {
       defaultValue
@@ -20,16 +20,14 @@ export const getGroupFiltersLabelSuffix = filters => {
     return defaultValue;
   });
   const filterCheckedCount = checkedFilters.length;
-
   if (filterCheckedCount === 0) {
     return LABELS.NONE;
   }
-
   if (filterCheckedCount === filterCount) {
     return LABELS.ALL;
-  } // eslint-disable-next-line no-unused-vars
-
+  }
 
+  // eslint-disable-next-line no-unused-vars
   const checkedFilterLabels = checkedFilters.map(_ref2 => {
     let [_, {
       label
@@ -39,22 +37,20 @@ export const getGroupFiltersLabelSuffix = filters => {
   let suffix = '';
   let inlinedLabelCount = 0;
   let done = false;
-
   for (let i = 0; !done && i < checkedFilterLabels.length && FILTER_SUFFIX_MAX_LENGTH - suffix.length >= 0; i++ // eslint-disable-line no-plusplus
   ) {
     const availableSpace = FILTER_SUFFIX_MAX_LENGTH - suffix.length;
     const label = checkedFilterLabels[i];
     let normalizedLabel = '';
-
     if (availableSpace - label.length >= 0) {
       // Label is fitting in the available space
       normalizedLabel = label;
     } else if (availableSpace >= 6) {
       // Available space is allowing crop
       normalizedLabel = `${label.substr(0, availableSpace - 3)}${ELLIPSES}`;
-    } else {// noop - the label will not fit
+    } else {
+      // noop - the label will not fit
     }
-
     if (normalizedLabel) {
       suffix = `${suffix}${suffix ? JOIN : ''}${normalizedLabel}`;
       inlinedLabelCount = i + 1;
@@ -62,7 +58,6 @@ export const getGroupFiltersLabelSuffix = filters => {
       done = true;
     }
   }
-
   const skippedLabels = filterCheckedCount - inlinedLabelCount;
   return `${suffix}${skippedLabels > 0 ? ` +${skippedLabels}` : ''}`;
 };
@@ -72,15 +67,14 @@ export const getInitialValues = (key, filters) => {
       [key]: filters.defaultValue
     };
   }
-
   if (typeof filters === 'object') {
     return Object.entries(filters).map(_ref3 => {
       let [groupKey, groupFilters] = _ref3;
       return getInitialValues([...(key ? [key] : []), groupKey].join('.'), groupFilters);
-    }).reduce((agg, current) => ({ ...agg,
+    }).reduce((agg, current) => ({
+      ...agg,
       ...current
     }), {});
   }
-
   return {};
 };