@bundle-stats/ui 3.3.0-alpha.1 → 3.4.0-alpha.3

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

@@ -3,7 +3,8 @@ 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';
@@ -12,32 +13,25 @@ import { Delta } from '../delta';
 import { BudgetInfo } from '../budget-info';
 import css from './summary-item.module.css';
 
-const MetricInfoPopover = ({ description, url }) => {
-  // Workaround cases where the parent is a link
-  const readMoreOnClick = () => {
-    window.open(url);
-  };
-
-  return (
-    <Stack space="xxxsmall">
-      <p>{description}</p>
-      {url && (
-        <p>
-          <button type="button" className={css.readMoreBtn} onClick={readMoreOnClick}>
-            Read more
-          </button>
-        </p>
-      )}
-    </Stack>
-  );
-};
-
-MetricInfoPopover.propTypes = {
+const MetricInfo = ({ description, url }) => (
+  <Stack space="xxxsmall">
+    <p>{description}</p>
+    {url && (
+      <p>
+        <a href={url} className={css.readMoreLink}>
+          Read more
+        </a>
+      </p>
+    )}
+  </Stack>
+);
+
+MetricInfo.propTypes = {
   description: PropTypes.string.isRequired,
   url: PropTypes.string,
 };
 
-MetricInfoPopover.defaultProps = {
+MetricInfo.defaultProps = {
   url: '',
 };
 
@@ -61,14 +55,14 @@ 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}>
       <FlexStack as="h3" space="xxxsmall" className={css.title}>
         <span className={css.titleLabel}>{metric.label}</span>
 
         {showMetricDescriptionTooltip && (
-          <Popover className={css.icon} icon="help">
-            <MetricInfoPopover {...metric} />
-          </Popover>
+          <HoverCard className={css.icon} label={<Icon glyph="help" />}>
+            <MetricInfo {...metric} />
+          </HoverCard>
         )}
 
         {budget && <BudgetInfo className={css.budgetInfo} metricId={id} budgetInsight={budget} />}

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

@@ -4,6 +4,7 @@
 }
 
 .title {
+  align-items: center;
   color: var(--color-text-ultra-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
@@ -12,29 +13,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;

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

@@ -1,31 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames'
+import cx from 'classnames';
 
 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 = ({ className }) => (
   <FlexStack space="xxxsmall" className={cx(css.title, className)}>
     <span>{I18N.ASSET_TOTALS}</span>
-    <Popover icon="help">
+    <HoverCard label={<Icon glyph="help" />}>
       <Stack space="xxxsmall">
         <p>{I18N.ASSET_TOTALS_INFO}</p>
         <p>
-          <a
-            href={config.documentation.assets}
-            target="_blank"
-            rel="noreferrer"
-          >
+          <a href={config.documentation.assets} target="_blank" rel="noreferrer">
             {I18N.READ_MORE}
           </a>
         </p>
       </Stack>
-    </Popover>
+    </HoverCard>
   </FlexStack>
 );
 

package/src/constants.js

@@ -53,5 +53,5 @@ export const METRICS_WEBPACK_GENERAL = [
   'cacheInvalidation',
 ];
 export const METRICS_WEBPACK_ASSETS = ['assetCount', 'chunkCount'];
-export const METRICS_WEBPACK_MODULES = ['moduleCount'];
+export const METRICS_WEBPACK_MODULES = ['moduleCount', 'duplicateModulesCount', 'duplicateCode'];
 export const METRICS_WEBPACK_PACKAGES = ['packageCount', 'duplicatePackagesCount'];

package/src/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/src/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/src/hooks/search-params.js

@@ -7,8 +7,11 @@ 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;
@@ -25,57 +28,57 @@ const getSearchPattern = (search) => {
 };
 
 const getSearchReducer =
-  ({ defaultFilters, allEntriesFilters, setParentState }) => (state, action) => {
+  ({ defaultFilters, allEntriesFilters, setParentState }) =>
+  (state, action) => {
     const { type, payload } = action;
 
     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,
-        });
+        };
+
+        setParentState(newState);
 
         return {
-          ...state,
-          search: payload,
+          ...newState,
           searchPattern: getSearchPattern(payload),
         };
       }
 
       case ACTION_RESET_DEFAULT: {
-        setParentState({
+        const newState = {
           filters: defaultFilters,
-          search: '',
-        });
+          search: SEARCH_DEFAULT,
+        };
+
+        setParentState(newState);
 
         return {
-          filters: defaultFilters,
-          search: '',
+          ...newState,
           searchPattern: getSearchPattern(),
         };
       }
 
       case ACTION_RESET_ALL: {
-        setParentState({
+        const newState = {
           filters: allEntriesFilters,
-          search: '',
-        });
+          search: SEARCH_DEFAULT,
+        };
+        setParentState(newState);
 
         return {
-          filters: allEntriesFilters,
-          search: '',
+          ...newState,
           searchPattern: getSearchPattern(),
         };
       }
@@ -96,7 +99,7 @@ export const generateState = (filters, search) => ({
 });
 
 export const useSearchParams = ({
-  search: parentSearch,
+  search: parentSearch = SEARCH_DEFAULT,
 
   filters: parentFilters,
   defaultFilters,
@@ -116,29 +119,35 @@ export const useSearchParams = ({
   // 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(parentFilters, filters)) {
+    if (parentSearch === search && isEqual(initialFilters, filters)) {
       return;
     }
 
     dispatch({ type: ACTION_SET, payload: generateState(initialFilters, parentSearch) });
-  }, [search, filters, parentFilters, parentSearch]);
+  }, [dispatch, search, filters, parentSearch, initialFilters]);
 
   /** Callbacks */
-  const handleUpdateSearch = useCallback((newValue) => {
-    dispatch({ type: ACTION_SET_SEARCH, payload: newValue });
-  }, []);
+  const handleUpdateSearch = useCallback(
+    (newValue) => {
+      dispatch({ type: ACTION_SET_SEARCH, payload: newValue });
+    },
+    [dispatch],
+  );
 
-  const handleUpdateFilters = useCallback((newFilters) => {
-    dispatch({ type: ACTION_SET_FILTERS, payload: newFilters });
-  }, []);
+  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,

package/src/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/src/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/src/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/src/layout/separator.jsx

@@ -0,0 +1,25 @@
+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 <div className={cx(css.root, className)} {...restProps} />;
+};
+
+Separator.propTypes = propTypes;
+Separator.defaultProps = defaultProps;

package/src/layout/separator.module.css

@@ -0,0 +1,5 @@
+.root {
+  background: var(--color-outline);
+  width: 100%;
+  height: 1px;
+}

package/src/ui/dropdown/dropdown.jsx

@@ -1,54 +1,54 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Menu, MenuItem, MenuButton, useMenuState } from 'reakit/Menu';
+import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
 
 import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../icon';
 import css from './dropdown.module.css';
 
 export const Dropdown = (props) => {
-  const { className, label, ariaLabel, glyph, activeLabel, children } = props;
-  const rootClassName = cx(css.root, activeLabel && css.activeLabel, className);
-
-  const menu = useMenuState({baseId: process.env.NODE_ENV === 'test' && 'id-test', modal: true });
+  const { className, buttonClassName, label, ariaLabel, glyph, children } = props;
+  const rootClassName = cx(css.root, className);
+  const menuState = useMenuState();
 
   return (
-    <>
-      <MenuButton {...menu} className={rootClassName} tabIndex={null}>
-        <FlexStack space="xxxsmall" className={css.label}>
+    <div className={rootClassName}>
+      <MenuButton state={menuState} className={cx(css.button, buttonClassName)} tabIndex={null}>
+        <FlexStack space="xxxsmall">
           {glyph && <Icon className={css.labelIcon} glyph={glyph} />}
           {label}
         </FlexStack>
       </MenuButton>
-      <Menu {...menu} aria-label={ariaLabel || label} className={css.dropdown}>
+      <Menu state={menuState} aria-label={ariaLabel || label} className={css.dropdown}>
         {typeof children === 'function'
-          ?
-            children({
+          ? children({
               MenuItem,
-              menu,
+              menu: menuState,
               menuItemClassName: css.menuItem,
               menuItemActiveClassName: css.menuItemActive,
             })
-          : children
-        }
+          : children}
       </Menu>
-    </>
+    </div>
   );
 };
 
 Dropdown.defaultProps = {
   className: '',
+  buttonClassName: '',
   label: null,
   ariaLabel: '',
   glyph: null,
-  activeLabel: false,
 };
 
 Dropdown.propTypes = {
   /** Adopted child class name */
   className: PropTypes.string,
 
+  /** Button adopted child class name */
+  buttonClassName: PropTypes.string,
+
   /** Button label */
   label: PropTypes.node,
 
@@ -58,12 +58,6 @@ Dropdown.propTypes = {
   /** Icon glyph */
   glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
-  /** Dropdown open state */
-  open: PropTypes.bool.isRequired,
-
-  /** Active label flag */
-  activeLabel: PropTypes.bool,
-
   /** Content */
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired,
 };

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

@@ -1,16 +1,14 @@
 .root {
+  display: inline-block;
+}
+
+.button {
   background: none;
   border: none;
   padding: 0;
-}
-
-.root:focus {
-  outline: none;
-  box-shadow: 0 0 var(--space-xxxsmall) var(--color-shadow);
-}
 
-.label {
   border: 1px solid var(--color-outline);
+  border-radius: var(--radius-small);
   padding: calc(var(--space-xxsmall) - 1px);
   display: flex;
   align-items: center;
@@ -24,7 +22,11 @@
   color: var(--color-text-light);
 }
 
-.label:hover {
+.button:hover,
+.button:focus,
+.button:active {
+  outline: none;
+  box-shadow: 0 0 var(--space-xxxsmall) var(--color-shadow);
   border-color: var(--color-outline-dark);
   color: var(--color-text);
 }
@@ -33,6 +35,7 @@
   position: absolute;
   left: 0;
   top: 100%;
+  border-radius: var(--radius-medium);
   box-shadow: 0 2px var(--space-xxsmall) var(--color-shadow);
   background: var(--color-background);
   min-width: 180px;
@@ -45,10 +48,6 @@
   box-shadow: 0 2px var(--space-xsmall) var(--color-shadow);
 }
 
-.activeLabel .label {
-  color: var(--color-text);
-}
-
 .menuItem {
   display: block;
   appearance: none;

package/src/ui/empty-set/empty-set.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Stack } from '../../layout/stack';
 import I18N from '../../i18n';
 import css from './empty-set.module.css';
 
@@ -9,30 +10,33 @@ export const EmptySet = (props) => {
 
   const message = filtered ? `No ${resources} found.` : `No ${resources} available.`;
   const actions = [
-    ...handleResetFilters ? [
-      (
-        <button className={css.action} type="button" onClick={handleResetFilters}>
-          {I18N.RESET_FILTERS}
-        </button>
-      )
-    ] : [],
-    ...handleViewAll ? [(
-      <button className={css.action} type="button" onClick={handleViewAll}>
-        {I18N.VIEW_ALL}
-      </button>
-    )] : [],
+    ...(handleResetFilters
+      ? [
+          <button className={css.action} type="button" onClick={handleResetFilters}>
+            {I18N.RESET_FILTERS}
+          </button>,
+        ]
+      : []),
+    ...(handleViewAll
+      ? [
+          <button className={css.action} type="button" onClick={handleViewAll}>
+            {I18N.VIEW_ALL}
+          </button>,
+        ]
+      : []),
   ];
 
   return (
-    <div className={css.root}>
-      <p className={css.text}>{message}</p>
-      {filtered && actions.map((action, index) => (
-        <>
-          {index > 0 && ' or '}
-          {action}
-        </>
-      ))}
-    </div>
+    <Stack space="xxsmall" className={css.root}>
+      <p>{message}</p>
+      {filtered &&
+        actions.map((action, index) => (
+          <>
+            {index > 0 && ' or '}
+            {action}
+          </>
+        ))}
+    </Stack>
   );
 };
 

package/src/ui/empty-set/empty-set.module.css

@@ -1,5 +1,5 @@
-.text {
-  margin-bottom: 0;
+.root {
+  color: var(--color-text-light);
 }
 
 .action {