@bundle-stats/ui 4.0.1 → 4.0.5-beta.0

package/lib-esm/ui/skeleton/skeleton.module.css

@@ -1,8 +1,8 @@
 .root {
-  display: block;
-  background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 90%, transparent 90.1%);
+  background: linear-gradient(transparent 12.5%, currentColor 12.6%, currentColor 86.4%, transparent 86.5%);
   opacity: 0.06;
   pointer-events: none;
+  min-width: 6em;
 }
 
 /** empty char to keep the text height */
@@ -11,3 +11,7 @@
   content: '\A0';
   color: transparent;
 }
+
+.block {
+  background: currentColor;
+}

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

@@ -1,7 +1,30 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { getWrapperDecorator } from '../../stories';
 import { Skeleton } from '.';
-const stories = storiesOf('UI/Skeleton', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(Skeleton, null));
+export default {
+  title: 'UI/Skeleton',
+  component: Skeleton
+};
+export const MultipleTextLines = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Skeleton, {
+  as: "h1",
+  style: {
+    outline: '1px solid magenta'
+  }
+}), /*#__PURE__*/React.createElement(Skeleton, {
+  as: "h2",
+  style: {
+    outline: '1px solid magenta'
+  }
+}), /*#__PURE__*/React.createElement(Skeleton, {
+  as: "p",
+  style: {
+    outline: '1px solid magenta'
+  }
+}));
+export const Block = () => /*#__PURE__*/React.createElement("div", {
+  style: {
+    outline: '1px solid magenta'
+  }
+}, /*#__PURE__*/React.createElement(Skeleton, {
+  as: "div",
+  block: true
+}));

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

@@ -1,11 +1,67 @@
 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 React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Dropdown } from '../dropdown';
 import { Icon } from '../icon';
 import css from './sort-dropdown.module.css';
+
+const Item = _ref => {
+  let {
+    className,
+    as: Component,
+    id,
+    label,
+    active,
+    direction,
+    defaultDirection,
+    getButtonOnClick,
+    ...restProps
+  } = _ref;
+  const buttonProps = useMemo(() => {
+    let resolveNextDirection = defaultDirection;
+
+    if (active) {
+      resolveNextDirection = direction === 'asc' ? 'desc' : 'asc';
+    }
+
+    if (resolveNextDirection === 'desc') {
+      return {
+        className: css.itemAsc,
+        onClick: getButtonOnClick(id, 'desc'),
+        title: `Order data by ${label} descending`
+      };
+    }
+
+    return {
+      onClick: getButtonOnClick(id, 'asc'),
+      title: `Order data by ${label} ascending`
+    };
+  }, [active, direction, defaultDirection, id, label]);
+  return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, buttonProps, {
+    className: cx(className, css.item, active && css.itemActive, buttonProps.className)
+  }), /*#__PURE__*/React.createElement(Icon, {
+    className: css.itemIcon,
+    glyph: "arrow"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: css.itemLabel
+  }, label));
+};
+
+Item.propTypes = {
+  className: PropTypes.string,
+  as: PropTypes.element.isRequired,
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  active: PropTypes.bool.isRequired,
+  direction: PropTypes.string.isRequired,
+  defaultDirection: PropTypes.string.isRequired,
+  getButtonOnClick: PropTypes.func.isRequired
+};
+Item.defaultProps = {
+  className: ''
+};
 export const SortDropdown = props => {
   const {
     className,
@@ -22,13 +78,13 @@ export const SortDropdown = props => {
     label: customLabel,
     glyph: "sort",
     align: "right"
-  }, _ref => {
+  }, _ref2 => {
     let {
       MenuItem,
       menu,
       menuItemClassName,
       menuItemActiveClassName
-    } = _ref;
+    } = _ref2;
 
     const getButtonOnClick = (newField, newDirection) => () => {
       onChange({
@@ -40,27 +96,20 @@ export const SortDropdown = props => {
 
     return /*#__PURE__*/React.createElement("div", {
       className: css.items
-    }, Object.entries(fields).map(_ref2 => {
-      let [key, item] = _ref2;
-      const buttonProps = direction === 'asc' ? {
-        className: css.itemAsc,
-        onClick: getButtonOnClick(key, 'desc'),
-        title: `Order data by ${item.label} descending`
-      } : {
-        onClick: getButtonOnClick(key, 'asc'),
-        title: `Order data by ${item.label} ascending`
-      };
+    }, Object.entries(fields).map(_ref3 => {
+      let [key, item] = _ref3;
       const isActive = field === key;
-      return /*#__PURE__*/React.createElement(MenuItem, _extends({
-        key: key
-      }, menu, buttonProps, {
-        className: cx(buttonProps.className, menuItemClassName, css.item, isActive && menuItemActiveClassName, isActive && css.active)
-      }), /*#__PURE__*/React.createElement("span", {
-        className: css.itemLabel
-      }, item.label), /*#__PURE__*/React.createElement(Icon, {
-        className: css.itemIcon,
-        glyph: "arrow"
-      }));
+      return /*#__PURE__*/React.createElement(Item, {
+        key: key,
+        as: MenuItem,
+        className: cx(menuItemClassName, isActive && menuItemActiveClassName),
+        id: key,
+        label: item.label,
+        direction: direction,
+        defaultDirection: item.defaultDirection,
+        active: isActive,
+        getButtonOnClick: getButtonOnClick
+      });
     }));
   });
 };

package/lib-esm/ui/sort-dropdown/sort-dropdown.module.css

@@ -4,7 +4,9 @@
 }
 
 .itemIcon {
-  display: none;
+  flex: 0 0 auto;
+  visibility: hidden;
+  margin-right: var(--space-xxxsmall);
 }
 
 .itemLabel {
@@ -15,6 +17,6 @@
   transform: rotate(180deg);
 }
 
-.item.active .itemIcon {
-  display: block;
+.itemActive .itemIcon {
+  visibility: visible;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.0.1",
+  "version": "4.0.5-beta.0",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -54,10 +54,10 @@
     "babel-jest": "28.1.3",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.7.0",
+    "chromatic": "6.7.2",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
-    "core-js": "3.23.5",
+    "core-js": "3.24.1",
     "cross-env": "7.0.3",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
@@ -85,12 +85,12 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.0.1",
+    "@bundle-stats/utils": "^4.0.5-beta.0",
     "ariakit": "^2.0.0-next.33",
     "date-fns": "^2.28.0",
     "modern-css-reset": "^1.4.0",
     "query-string": "^7.1.0",
     "use-query-params": "^1.2.3"
   },
-  "gitHead": "5ede78df9ce756cd413cc143ce038ec96b305158"
+  "gitHead": "21c3e6e8dcf686e4aaa8205a4a0d3d9d2154cf30"
 }

package/src/components/metric/metric.jsx

@@ -1,42 +1,51 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
-import styles from './metric.module.css';
+import css from './metric.module.css';
 
 // Separate value and unit
 const EXTRACT_VALUE_UNIT_PATTERN = /([\d|.|,| ]*)(\w*|%)$/;
 
-export const Metric = ({ className, value, formatter, inline, anchored, children, enhanced }) => {
-  const formattedValue = formatter(value);
+export const Metric = ({ className, value, formatter, inline, children, enhanced }) => {
+  const { displayValue, displayUnit } = useMemo(() => {
+    const formattedValue = formatter?.(value);
 
-  // eslint-disable-next-line no-unused-vars
-  const [matched, displayValue, displayUnit] =
-    enhanced && formattedValue
-      ? formattedValue.match(EXTRACT_VALUE_UNIT_PATTERN)
-      : [null, formattedValue, null];
+    if (!formattedValue) {
+      return { displayValue: value };
+    }
 
-  const rootClassName = cx(
-    className,
-    styles.root,
-    inline && styles.inline,
-    anchored && styles.anchored,
-  );
+    if (!enhanced) {
+      return { displayValue: formattedValue };
+    }
+
+    const matches = formattedValue.match(EXTRACT_VALUE_UNIT_PATTERN);
+
+    if (!matches) {
+      return { displayValue: value };
+    }
+
+    return {
+      displayUnit: matches[2],
+      displayValue: matches[1],
+    };
+  }, [formatter, value]);
+
+  const rootClassName = cx(className, css.root, inline && css.inline);
 
   return (
-    <span className={rootClassName}>
-      <span className={styles.display}>
-        <span className={styles.displayValue}>{displayValue}</span>
-        {displayUnit && <span className={styles.displayUnit}>{displayUnit}</span>}
-      </span>
-      <span className={styles.delta}>{children}</span>
-    </span>
+    <div className={rootClassName}>
+      <div className={css.display}>
+        <span className={css.displayValue}>{displayValue}</span>
+        {displayUnit && <span className={css.displayUnit}>{displayUnit}</span>}
+      </div>
+      <div className={css.delta}>{children}</div>
+    </div>
   );
 };
 
 Metric.defaultProps = {
   className: '',
-  anchored: false,
   enhanced: false,
   inline: false,
   value: 0,
@@ -48,7 +57,6 @@ Metric.propTypes = {
   className: PropTypes.string,
   enhanced: PropTypes.bool,
   inline: PropTypes.bool,
-  anchored: PropTypes.bool,
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   formatter: PropTypes.func,
   children: PropTypes.node,

package/src/components/metric/metric.module.css

@@ -1,27 +1,17 @@
 .root {
-  display: block;
   letter-spacing: 0.05em;
 }
 
 .displayUnit {
-  color: var(--color-text-ultra-light);
+  font-size: var(--size-small);
 }
 
 .delta {
-  display: block;
-  font-size: var(--size-xsmall);
+  font-size: var(--size-small);
 }
 
-.anchored {
-  position: relative;
-}
-
-.anchored .delta {
-  position: absolute;
-  right: 0;
-  top: 100%;
-  line-height: 1;
-  margin-top: -2px;
+.inline .display {
+  display: inline-block;
 }
 
 .inline .delta {

package/src/components/metrics-table-title/metrics-table-title.jsx

@@ -18,7 +18,7 @@ export const MetricsTableTitle = (props) => {
       <FlexStack space="xxxsmall" className={css.title}>
         <span>{title}</span>
         {(popoverInfo || popoverHref) && (
-          <HoverCard label={<Icon glyph="help" />} className={css.hoverCard}>
+          <HoverCard label={<Icon glyph="help" />} anchorClassName={css.anchor}>
             <Stack space="xxxsmall">
               {popoverInfo && <p>{popoverInfo}</p>}
               {popoverHref && (

package/src/components/metrics-table-title/metrics-table-title.module.css

@@ -2,14 +2,14 @@
 }
 
 .title {
-  color: var(--color-text-light);
   align-items: center;
+  color: var(--color-text-light);
   font-weight: bold;
   text-transform: uppercase;
 }
 
-.hoverCard {
-  line-height: 1;
+.anchor {
+  display: block;
 }
 
 .info {

package/src/components/summary-item/summary-item.jsx

@@ -52,7 +52,7 @@ export const SummaryItem = ({
   const rootClassName = cx(css.root, className, css[size], showDelta && css.showDelta);
 
   return (
-    <Stack space="xxsmall" as={Component} className={rootClassName} {...props}>
+    <Stack space="xxxsmall" as={Component} className={rootClassName} {...props}>
       <h3 className={css.title}>
         {showMetricDescriptionTooltip ? (
           <HoverCard label={metric.label}>
@@ -84,8 +84,8 @@ export const SummaryItem = ({
         </Stack>
       ) : (
         <Stack>
-          <Skeleton className={cx(css.currentMetric, css.loading)} />
-          <Skeleton className={cx(css.baselineMetric, css.loading)} />
+          <Skeleton as="p" className={cx(css.currentMetric, css.loading)} />
+          <Skeleton as="p" className={cx(css.baselineMetric, css.loading)} />
         </Stack>
       )}
     </Stack>

package/src/components/summary-item/summary-item.module.css

@@ -8,23 +8,15 @@
 }
 
 .currentMetric {
-  display: block;
   color: var(--color-heading);
   font-size: var(--size-xlarge);
-  line-height: var(--space-medium);
   white-space: nowrap;
   font-weight: bold;
 }
 
-.delta {
-  font-size: var(--size-small);
-  line-height: var(--space-medium);
-}
-
 .baselineMetric {
   color: var(--color-text-light);
   font-size: var(--size-small);
-  line-height: var(--space-small);
 }
 
 .readMoreLink {
@@ -63,5 +55,4 @@
 /* Size large */
 .large .currentMetric {
   font-size: var(--size-xxxlarge);
-  line-height: var(--space-medium);
 }

package/src/components/total-size-type-title/total-size-type-title.jsx

@@ -11,9 +11,9 @@ import { HoverCard } from '../../ui/hover-card';
 import css from './total-size-type-title.module.css';
 
 export const TotalSizeTypeTitle = ({ className }) => (
-  <FlexStack space="xxxsmall" className={cx(css.title, className)}>
-    <span>{I18N.ASSET_TOTALS}</span>
-    <HoverCard label={<Icon glyph="help" />}>
+  <FlexStack space="xxxsmall" className={cx(css.root, className)}>
+    <span className={css.text}>{I18N.ASSET_TOTALS}</span>
+    <HoverCard label={<Icon glyph="help" />} anchorClassName={css.anchor}>
       <Stack space="xxxsmall">
         <p>{I18N.ASSET_TOTALS_INFO}</p>
         <p>

package/src/components/total-size-type-title/total-size-type-title.module.css

@@ -1,11 +1,19 @@
-.title {
+.root {
   color: var(--color-text-light);
+  align-items: center;
+}
+
+.text {
   font-weight: bold;
   font-size: var(--size-medium);
   line-height: var(--space-medium);
   text-transform: uppercase;
 }
 
+.anchor {
+  display: block;
+}
+
 .readMoreLink {
   appearance: none;
   background: none;

package/src/i18n.js

@@ -15,9 +15,9 @@ export default {
   ASSETS_INFO: 'Asset size - the size of the file produced by webpack',
   ASSET_TOTALS_INFO: 'The total size of the assets produced by webpack by type',
   MODULES_INFO:
-    'Module size - module file size before any transformation(ex: babel, typescript) or before any production optimization(ex: terser minification)',
+    'Module size - module source size before any production optimization(ex: terser minification)',
   PACKAGES_INFO:
-    "Package size - the total package's module size before any transformation(ex: babel, typescript) or before any production optimization(ex: terser minification)",
+    "Package size - the total package's module size before any production optimization(ex: terser minification)",
 
   RESET_FILTERS: 'Reset filters',
   VIEW_ALL: 'View all entries',

package/src/ui/dropdown/dropdown.module.css

@@ -40,7 +40,7 @@
   background: var(--color-background);
   min-width: 180px;
   z-index: var(--layer-high);
-  padding: var(--space-xsmall) 0;
+  padding: var(--space-xxsmall) 0;
 }
 
 .dropdown:focus {
@@ -55,12 +55,13 @@
   width: 100%;
   outline: none;
   border: 0;
-  padding: var(--space-xxxsmall) var(--space-small);
+  padding: var(--space-xxxsmall) var(--space-xsmall);
   background: none;
   text-align: left;
   color: var(--color-text-light);
   font-size: var(--size-small);
   line-height: inherit;
+  text-decoration: none;
 }
 
 .menuItem:hover {

package/src/ui/filters/filters.jsx

@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { get } from 'lodash';
 
 import { FlexStack } from '../../layout/flex-stack';
 import { Dropdown } from '../dropdown';
@@ -9,13 +8,21 @@ import { getGroupFiltersLabelSuffix, LABELS } from './filters.utils';
 import css from './filters.module.css';
 
 const Filter = (props) => {
-  const { className, buttonClassName, label, name, getOnOnlyClick, ...inputProps } = props;
-  const id = `filter-${name}`;
+  const {
+    className,
+    as: Component = 'div',
+    buttonClassName,
+    label,
+    name,
+    getOnOnlyClick,
+    ...inputProps
+  } = props;
 
+  const id = `filter-${name}`;
   const rootClassName = cx(css.filter, className);
 
   return (
-    <div className={rootClassName}>
+    <Component className={rootClassName}>
       {/* eslint-disable */}
       <FlexStack space="xxxsmall" as="label" className={cx(css.filterCheckbox, buttonClassName)}>
         {/* eslint-enabled */}
@@ -30,12 +37,13 @@ const Filter = (props) => {
           only
         </button>
       )}
-    </div>
+    </Component>
   );
 };
 
 Filter.propTypes = {
   className: PropTypes.string,
+  as: PropTypes.elementType,
   buttonClassName: PropTypes.string,
   name: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
@@ -44,6 +52,7 @@ Filter.propTypes = {
 
 Filter.defaultProps = {
   className: '',
+  as: 'div',
   buttonClassName: '',
   getOnOnlyClick: null,
 };
@@ -105,20 +114,17 @@ const FilterGroup = (props) => {
                 const getOnOnlyClick = () => getOnGroupCheck(false, { [id]: true });
 
                 return (
-                  <MenuItem
+                  <Filter
                     key={id}
-                    {...menu}
-                    className={cx(menuItemClassName, css.filterGroupItem)}
-                  >
-                    <Filter
-                      name={id}
-                      label={itemData.label}
-                      onChange={onCheckboxChange}
-                      checked={values[id]}
-                      disabled={itemData.disabled}
-                      getOnOnlyClick={getOnOnlyClick}
-                    />
-                  </MenuItem>
+                    className={menuItemClassName}
+                    as={MenuItem}
+                    name={id}
+                    label={itemData.label}
+                    onChange={onCheckboxChange}
+                    checked={values[id]}
+                    disabled={itemData.disabled}
+                    getOnOnlyClick={getOnOnlyClick}
+                  />
                 );
               })}
             </div>

package/src/ui/filters/filters.module.css

@@ -1,5 +1,9 @@
 /* Checkbox + label + button */
 .filter {
+  /* Update MenuItem padding */
+  padding-top: calc(var(--space-xxxsmall) / 2);
+  padding-bottom: calc(var(--space-xxxsmall) / 2);
+
   position: relative;
   width: 100%;
   max-width: 240px;
@@ -11,7 +15,6 @@
 }
 
 .filterInput {
-  border-radius: var(--radius-small) 0 0 var(--radius-small);
   flex: 0 0 auto;
   height: 1em;
   cursor: pointer;
@@ -26,17 +29,17 @@
 }
 
 .filterOnlyButton {
-  padding: var(--space-xxsmall);
+  padding: var(--space-xxxsmall) var(--space-xsmall);
   display: none;
   appearance: none;
   border: none;
   background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255) 30%);
   cursor: pointer;
-  line-height: 1;
   position: absolute;
   right: 0;
-  top: 50%;
-  transform: translateY(-50%);
+  top: 0;
+  bottom: 0;
+  line-height: var(--space-xsmall);
 }
 
 /** filter disabled state */
@@ -63,6 +66,7 @@
 
 /** Filter standard variation */
 .filterStandalone {
+  padding: 0;
   width: auto;
   color: var(--color-text-light);
   z-index: var(--layout-xlow); /* show collapsed border */
@@ -95,16 +99,11 @@
   overflow: auto;
 }
 
-.filterGroupItem {
-  padding-top: 2px;
-  padding-bottom: 2px;
-}
-
 .filterGroupActions {
-  margin-top: var(--space-xxsmall);
+  margin-top: var(--space-xxxsmall);
   padding-top: var(--space-xxxsmall);
   padding-bottom: var(--space-xxxsmall);
-  margin-bottom: calc(0px - var(--space-xsmall));
+  margin-bottom: calc(0px - var(--space-xxsmall));
   border-top: 1px solid var(--color-outline);
 }