@bundle-stats/ui 4.1.1-alpha.1 → 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

@@ -23,42 +23,42 @@
   --size-xxlarge: 1.424rem;
   --size-xxxlarge: 1.602rem;
 
-  --line-height: 1.6em;
+  --line-height: 1.66em;
 
   /*
    * Color scheme:
-   * https://coolors.co/3385d6-dd555e-63bf5e-f7e37d-192339
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23585d63&mcgpalette4=%233385d6&themename=mcgtheme
+   * 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: #fafbfb;
-  --color-gray-50: #ebeced;
-  --color-gray-100: #cdced0;
-  --color-gray-200: #acaeb1;
-  --color-gray-300: #8a8e92;
-  --color-gray-400: #71757a;
-  --color-gray-500: #585d63;
-  --color-gray-600: #50555b;
-  --color-gray-700: #474b51;
-  --color-gray-800: #3d4147;
-  --color-gray-900: #2d3035;
+  --color-gray-25: #F7F7F7;
+  --color-gray-50 : #eaebec;
+  --color-gray-100: #cbcdd0;
+  --color-gray-200: #a8acb0;
+  --color-gray-300: #858a90;
+  --color-gray-400: #6a7179;
+  --color-gray-500: #505861;
+  --color-gray-600: #495059;
+  --color-gray-700: #40474f;
+  --color-gray-800: #373d45;
+  --color-gray-900: #272d33;
 
   --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-600);
-  --color-gray-ultra-dark: var(--color-gray-700);
+  --color-gray-dark: var(--color-gray-700);
+  --color-gray-ultra-dark: var(--color-gray-900);
 
   --color-red-25: #fdf5f6;
-  --color-red-50: #fbebec;
-  --color-red-100: #f5cccf;
-  --color-red-200: #eeaaaf;
-  --color-red-300: #e7888e;
-  --color-red-400: #e26f76;
-  --color-red-500: #dd555e;
-  --color-red-600: #d94e56;
-  --color-red-700: #d4444c;
-  --color-red-800: #cf3b42;
-  --color-red-900: #c72a31;
+  --color-red-50: #fbe9ea;
+  --color-red-100: #f4c7ca;
+  --color-red-200: #eda2a7;
+  --color-red-300: #e57c83;
+  --color-red-400: #e06069;
+  --color-red-500: #da444e;
+  --color-red-600: #d63e47;
+  --color-red-700: #d0353d;
+  --color-red-800: #cb2d35;
+  --color-red-900: #c21f25;
   --color-red-ultra-light: var(--color-red-100);
   --color-red-light: var(--color-red-300);
   --color-red: var(--color-red-500);
@@ -66,16 +66,16 @@
   --color-red-ultra-dark: var(--color-red-900);
 
   --color-blue-25: #f3f8fd;
-  --color-blue-50: #e7f0fa;
-  --color-blue-100: #c2daf3;
-  --color-blue-200: #99c2eb;
-  --color-blue-300: #70aae2;
-  --color-blue-400: #5297dc;
-  --color-blue-500: #3385d6;
-  --color-blue-600: #2e7dd1;
-  --color-blue-700: #2772cc;
-  --color-blue-800: #2068c6;
-  --color-blue-900: #1455bc;
+  --color-blue-50: #e5eff9;
+  --color-blue-100: #bfd7f0;
+  --color-blue-200: #94bde6;
+  --color-blue-300: #69a2db;
+  --color-blue-400: #488ed4;
+  --color-blue-500: #287acc;
+  --color-blue-600: #2472c7;
+  --color-blue-700: #1e67c0;
+  --color-blue-800: #185db9;
+  --color-blue-900: #0f4aad;
 
   --color-blue-ultra-light: var(--color-blue-100);
   --color-blue-light: var(--color-blue-300);
@@ -84,16 +84,16 @@
   --color-blue-ultra-dark: var(--color-blue-900);
 
   --color-green-25: #f6fbf6;
-  --color-green-50: #ecf7ec;
-  --color-green-100: #d0eccf;
-  --color-green-200: #b1dfaf;
-  --color-green-300: #92d28e;
-  --color-green-400: #7ac976;
-  --color-green-500: #63bf5e;
-  --color-green-600: #5bb956;
-  --color-green-700: #51b14c;
-  --color-green-800: #47a942;
-  --color-green-900: #359b31;
+  --color-green-50: #ebf7ea;
+  --color-green-100: #cceacb;
+  --color-green-200: #aadca8;
+  --color-green-300: #88ce85;
+  --color-green-400: #6fc46a;
+  --color-green-500: #55b950;
+  --color-green-600: #4eb249;
+  --color-green-700: #44aa40;
+  --color-green-800: #3ba237;
+  --color-green-900: #2a9327;
 
   --color-green-ultra-light: var(--color-green-100);
   --color-green-light: var(--color-green-300);
@@ -102,16 +102,16 @@
   --color-green-ultra-dark: var(--color-green-900);
 
   --color-yellow-25: #FFFDF2;
-  --color-yellow-50: #fefcef;
-  --color-yellow-100: #fdf7d8;
-  --color-yellow-200: #fbf1be;
-  --color-yellow-300: #f9eba4;
-  --color-yellow-400: #f8e791;
-  --color-yellow-500: #f7e37d;
-  --color-yellow-600: #f6e075;
-  --color-yellow-700: #f5dc6a;
-  --color-yellow-800: #f3d860;
-  --color-yellow-900: #f1d04d;
+  --color-yellow-50: #fefbef;
+  --color-yellow-100: #fcf6d7;
+  --color-yellow-200: #fbf0bc;
+  --color-yellow-300: #f9eaa1;
+  --color-yellow-400: #f7e68d;
+  --color-yellow-500: #f6e179;
+  --color-yellow-600: #f5dd71;
+  --color-yellow-700: #f3d966;
+  --color-yellow-800: #f2d55c;
+  --color-yellow-900: #efcd49;
 
   --color-yellow-light-background: var(--color-yellow-25);
   --color-yellow-ultra-light: var(--color-yellow-100);

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

@@ -3,6 +3,7 @@ import { storiesOf } from '@storybook/react';
 import { Container, Logo } from '../ui';
 import { getWrapperDecorator } from '../stories';
 import { Header, SubHeader } from '../layout';
+import CHART_COLORS from '../chart-colors.json';
 import content from './typography.md';
 import css from './typography.module.css';
 const stories = storiesOf('Prototypes/Styleguide', module);
@@ -24,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,
@@ -42,6 +44,20 @@ const Item = _ref => {
   }, `${colorName} ${valueName}`);
 };
 
+// eslint-disable-next-line react/prop-types
+const ItemColorValue = _ref2 => {
+  let {
+    value
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: value,
+      color: 'var(--color-light)',
+      padding: '12px',
+      flex: '1 1 20%'
+    }
+  }, 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, {
@@ -63,4 +79,13 @@ stories.add('color sheme', () => /*#__PURE__*/React.createElement(Container, nul
   key: `${colorName}-${valueName}`,
   colorName: colorName,
   valueName: valueName
-}))))));
+})))), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement("h3", null, "Chart colors"), /*#__PURE__*/React.createElement("div", {
+  style: {
+    display: 'flex',
+    marginBottom: '24px',
+    flexWrap: 'wrap'
+  }
+}, CHART_COLORS.map(color => /*#__PURE__*/React.createElement(ItemColorValue, {
+  key: color,
+  value: color
+})))));

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
 };