@bundle-stats/ui 4.1.4 → 4.1.5-alpha.1

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

@@ -9,35 +9,16 @@ export const MetricsTableOptions = (props) => {
 
   return (
     <Dropdown className={className} glyph="menu" {...restProps}>
-      {({ MenuItem, menu, menuItemClassName }) => {
-        const getButtonOnClick = (handler) => () => {
-          handler();
-          menu.toggle();
-        };
-
-        return (
-          <>
-            {handleResetFilters && (
-              <MenuItem
-                {...menu}
-                className={menuItemClassName}
-                onClick={getButtonOnClick(handleResetFilters)}
-              >
-                {I18N.RESET_FILTERS}
-              </MenuItem>
-            )}
-            {handleViewAll && (
-              <MenuItem
-                {...menu}
-                className={menuItemClassName}
-                onClick={getButtonOnClick(handleViewAll)}
-              >
-                {I18N.VIEW_ALL}
-              </MenuItem>
-            )}
-          </>
-        );
-      }}
+      {handleResetFilters && (
+        <Dropdown.Item onClick={handleResetFilters}>
+          {I18N.RESET_FILTERS}
+        </Dropdown.Item>
+      )}
+      {handleViewAll && (
+        <Dropdown.Item onClick={handleViewAll}>
+          {I18N.VIEW_ALL}
+        </Dropdown.Item>
+      )}
     </Dropdown>
   );
 };

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 
 import { Icon } from '../../ui/icon';
 import { Input } from '../../ui/input';

package/src/components/module-info/module-info.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { isEmpty, find, noop } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
+import noop from 'lodash/noop';
 import { getBundleModulesByChunk } from '@bundle-stats/utils';
 
 import { Stack } from '../../layout/stack';
@@ -32,7 +33,7 @@ export const ModuleInfo = (props) => {
               <div className={css.chunks}>
                 <span className={css.chunksTitle}>Chunks:</span>
                 {run.chunkIds.map((chunkId) => {
-                  const chunk = find(chunks, { id: chunkId });
+                  const chunk = chunks?.find(({ id }) => id === chunkId);
 
                   if (!chunk) {
                     return null;

package/src/components/summary/summary.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { get } from 'lodash';
+import get from 'lodash/get';
 import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
 
 import { METRICS_WEBPACK_GENERAL } from '../../constants';

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

@@ -64,7 +64,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}>
       <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.title}>
         <span>
           {metric.label}

package/src/css/default.css

@@ -1,9 +1,5 @@
 @import url("~modern-css-reset/dist/reset.css");
 
-:root {
-  --chart-height: 180px;
-}
-
 /** modern-css-reset updates */
 pre,
 ul,
@@ -31,7 +27,6 @@ h1, h2, h3, h4, h5, h6 {
 
 h1 {
   font-size: var(--size-xxxlarge);
-  line-height: var(--space-xlarge)
 }
 
 h2 {

package/src/css/variables.css

@@ -183,6 +183,9 @@
   --layer-high: 1000;
   --layer-xhigh: 10000;
 
+  --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
+  --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);
+
   --radius-small: 3px;
   --radius-medium: 5px;
   --radius-large: 9px;

package/src/hooks/rows-sort.js

@@ -1,5 +1,5 @@
 import { useState, useMemo } from 'react';
-import { orderBy } from 'lodash';
+import orderBy from 'lodash/orderBy';
 
 export const useRowsSort = ({
   rows,

package/src/hooks/search-params.js

@@ -1,5 +1,6 @@
 import { useCallback, useLayoutEffect, useReducer } from 'react';
-import { isEqual, merge } from 'lodash';
+import isEqual from 'lodash/isEqual';
+import merge from 'lodash/merge';
 
 const ACTION_SET_FILTERS = 'SET_FILTERS';
 const ACTION_SET_SEARCH = 'SET_SEARCH';

package/src/layout/index.js

@@ -1,7 +1,5 @@
 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/query-state.jsx

@@ -2,7 +2,8 @@ import React, { useCallback } from 'react';
 import { JsonParam, QueryParamProvider, useQueryParams } from 'use-query-params';
 import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5'
 import { parse, stringify } from 'query-string'
-import { isEqual, merge } from 'lodash';
+import isEqual from 'lodash/isEqual';
+import merge from 'lodash/merge';
 
 export const QueryStateProvider = (props) => (
   <QueryParamProvider

package/src/ui/dropdown/dropdown.jsx

@@ -7,6 +7,20 @@ import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../icon';
 import css from './dropdown.module.css';
 
+const Item = ({ className = '', isActive = false, ...restProps }) => (
+  <MenuItem className={cx(css.item, className, isActive && css.itemActive)} {...restProps} />
+);
+
+Item.propTypes = {
+  className: PropTypes.string,
+  isActive: PropTypes.bool,
+};
+
+Item.defaultProps = {
+  className: '',
+  isActive: false,
+};
+
 export const Dropdown = (props) => {
   const { className, buttonClassName, label, ariaLabel, glyph, children } = props;
   const rootClassName = cx(css.root, className);
@@ -23,10 +37,10 @@ export const Dropdown = (props) => {
       <Menu state={menuState} aria-label={ariaLabel || label} className={css.dropdown}>
         {typeof children === 'function'
           ? children({
-              MenuItem,
+              MenuItem: Item,
               menu: menuState,
-              menuItemClassName: css.menuItem,
-              menuItemActiveClassName: css.menuItemActive,
+              menuItemClassName: css.item,
+              menuItemActiveClassName: css.itemActive,
             })
           : children}
       </Menu>
@@ -61,3 +75,5 @@ Dropdown.propTypes = {
   /** Content */
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired,
 };
+
+Dropdown.Item = Item;

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

@@ -20,11 +20,12 @@
   color: var(--color-text-light);
 }
 
+.button[aria-expanded=true],
 .button:hover,
 .button:focus,
 .button:active {
   outline: none;
-  box-shadow: 0 0 var(--space-xxxsmall) var(--color-shadow);
+  box-shadow: var(--shadow-layer);
   border-color: var(--color-outline-dark);
   color: var(--color-text);
 }
@@ -34,26 +35,26 @@
   left: 0;
   top: 100%;
   border-radius: var(--radius-medium);
-  box-shadow: 0 2px var(--space-xxsmall) var(--color-shadow);
+  box-shadow: var(--shadow-layer-high);
   background: var(--color-background);
-  min-width: 180px;
+  min-width: 12em;
   z-index: var(--layer-high);
-  padding: var(--space-xxsmall) 0;
+  padding: var(--space-xxxsmall);
 }
 
 .dropdown:focus {
   outline: none;
-  box-shadow: 0 2px var(--space-xsmall) var(--color-shadow);
 }
 
-.menuItem {
+.item {
   display: block;
   appearance: none;
   cursor: pointer;
   width: 100%;
   outline: none;
   border: 0;
-  padding: var(--space-xxxsmall) var(--space-xsmall);
+  border-radius: var(--radius-small);
+  padding: calc(var(--space-xxxsmall) / 2) var(--space-xxxsmall);
   background: none;
   text-align: left;
   color: var(--color-text-light);
@@ -62,14 +63,22 @@
   text-decoration: none;
 }
 
-.menuItem:hover {
+.item[data-active-item],
+.item:hover,
+.item:focus,
+.item:active {
+  background: var(--color-highlight);
   color: var(--color-text);
 }
 
-.menuItemActive {
+.itemActive {
+  background: var(--color-highlight-info);
   color: var(--color-primary);
 }
 
-.menuItemActive:hover {
+.itemActive:hover,
+.itemActive:focus,
+.itemActive:active {
+  background: var(--color-highlight-info);
   color: var(--color-primary-dark);
 }

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

@@ -27,7 +27,7 @@ export const EmptySet = (props) => {
   ];
 
   return (
-    <Stack space="xxsmall" className={css.root}>
+    <Stack space="xxxsmall" className={css.root}>
       <p>{message}</p>
       {filtered &&
         actions.map((action, index) => (

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

@@ -28,16 +28,17 @@
 }
 
 .filterOnlyButton {
-  padding: var(--space-xxxsmall) var(--space-xsmall);
+  padding: var(--space-xxxsmall);
   display: none;
   appearance: none;
   border: none;
-  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255) 30%);
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--color-highlight) 30%);
   cursor: pointer;
   position: absolute;
   right: 0;
   top: 0;
   bottom: 0;
+  font-size: var(--size-small);
   line-height: var(--space-xsmall);
 }
 
@@ -78,8 +79,11 @@
   border: 1px solid var(--color-outline);
 }
 
-.filterStandalone:hover {
+.filterStandalone:hover .filterCheckbox,
+.filterStandalone:active .filterCheckbox,
+.filterStandalone:focus .filterCheckbox {
   z-index: var(--layout-xlow); /* show collapsed border */
+  box-shadow: var(--shadow-layer);
 }
 
 .filterStandalone:hover .filterCheckbox {
@@ -102,7 +106,7 @@
   margin-top: var(--space-xxxsmall);
   padding-top: var(--space-xxxsmall);
   padding-bottom: var(--space-xxxsmall);
-  margin-bottom: calc(0px - var(--space-xxsmall));
+  margin-bottom: calc(0px - var(--space-xxxsmall));
   border-top: 1px solid var(--color-outline);
 }
 

package/src/ui/filters/index.jsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { isEqual, merge } from 'lodash';
+import isEqual from 'lodash/isEqual';
+import merge from 'lodash/merge';
 
 import { getInitialValues } from './filters.utils';
 import { Filters as BaseComponent } from './filters';

package/src/ui/horizontal-bar-chart/horizontal-bar-chart.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { get, round, sum } from 'lodash';
+import round from 'lodash/round';
+import sum from 'lodash/sum';
 import cx from 'classnames';
 
 import { getColors } from '../../utils';
@@ -20,8 +21,8 @@ class HorizontalBarChartItem extends React.Component {
   }
 
   componentDidMount() {
-    const wrapperWidth = get(this, 'ref.current.clientWidth', 0);
-    const textWidth = get(this, 'textRef.current.scrollWidth', 0);
+    const wrapperWidth = this.ref?.current?.clientWidth || 0;
+    const textWidth = this.textRef?.current?.scrollWidth || 0;
 
     if (wrapperWidth >= (textWidth + 2 * 4)) {
       this.setState({ isTextOverflowing: false });

package/src/ui/hover-card/hover-card.module.css

@@ -22,7 +22,7 @@
   width: calc(100vw - 2 * var(--space-small));
   max-width: 340px;
   outline: none;
-  filter: drop-shadow(0 0 var(--space-xxsmall) var(--color-shadow));
+  filter: drop-shadow(var(--shadow-layer-high));
   will-change: filter;
   background: var(--color-light);
   font-size: var(--size-small);

package/src/ui/index.js

@@ -9,7 +9,6 @@ export { HoverCard } from './hover-card';
 export { Icon } from './icon';
 export { Input } from './input';
 export { Loader } from './loader';
-export { Logo } from './logo';
 export { Panels } from './panels';
 export { Skeleton } from './skeleton';
 export { SortDropdown } from './sort-dropdown';

package/src/ui/input/input.module.css

@@ -26,6 +26,7 @@
 
 .root:focus {
   border-color: var(--color-outline-dark);
+  box-shadow: var(--shadow-layer);
   color: inherit;
   transition: var(--transition-out);
 }

package/src/ui/skeleton/skeleton.module.css

@@ -1,19 +1,8 @@
-@keyframes anim {
-  from {
-    opacity: 0.06
-  }
-
-  to {
-    opacity: 0.12;
-  }
-}
-
 .root {
   background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
-  opacity: 0.06;
+  opacity: 0.05;
   pointer-events: none;
   min-width: 6em;
-  animation: 2s 1s infinite alternate anim;
 }
 
 /** empty char to keep the text height */

package/src/ui/sort-dropdown/sort-dropdown.jsx

@@ -7,20 +7,20 @@ import { Icon } from '../icon';
 import css from './sort-dropdown.module.css';
 
 const Item = ({
-  className,
   as: Component,
   id,
   label,
-  active,
+  isActive,
   direction,
   defaultDirection,
   getButtonOnClick,
-  ...restProps }) => {
+  ...restProps
+}) => {
 
   const buttonProps = useMemo(() => {
     let resolveNextDirection = defaultDirection;
 
-    if (active) {
+    if (isActive) {
       resolveNextDirection = direction === 'asc' ? 'desc' : 'asc';
     }
 
@@ -36,13 +36,14 @@ const Item = ({
       onClick: getButtonOnClick(id, 'asc'),
       title: `Order data by ${label} ascending`,
     };
-  }, [active, direction, defaultDirection, id, label]);
+  }, [isActive, direction, defaultDirection, id, label]);
 
   return (
     <Component
       {...restProps}
       {...buttonProps}
-      className={cx(className, css.item, active && css.itemActive, buttonProps.className)}
+      isActive={isActive}
+      className={cx(css.item, isActive && css.itemActive, buttonProps.className)}
     >
       <Icon className={css.itemIcon} glyph="arrow" />
       <span className={css.itemLabel}>{label}</span>
@@ -55,7 +56,7 @@ Item.propTypes = {
   as: PropTypes.element.isRequired,
   id: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
-  active: PropTypes.bool.isRequired,
+  isActive: PropTypes.bool.isRequired,
   direction: PropTypes.string.isRequired,
   defaultDirection: PropTypes.string.isRequired,
   getButtonOnClick: PropTypes.func.isRequired,
@@ -81,23 +82,18 @@ export const SortDropdown = (props) => {
 
         return (
           <div className={css.items}>
-            {Object.entries(fields).map(([key, item]) => {
-              const isActive = field === key;
-
-              return (
-                <Item
-                  key={key}
-                  as={MenuItem}
-                  className={cx(menuItemClassName, isActive && menuItemActiveClassName)}
-                  id={key}
-                  label={item.label}
-                  direction={direction}
-                  defaultDirection={item.defaultDirection}
-                  active={isActive}
-                  getButtonOnClick={getButtonOnClick}
-                />
-              );
-            })}
+            {Object.entries(fields).map(([key, item]) => (
+              <Item
+                key={key}
+                as={MenuItem}
+                isActive={field === key}
+                id={key}
+                label={item.label}
+                direction={direction}
+                defaultDirection={item.defaultDirection}
+                getButtonOnClick={getButtonOnClick}
+              />
+            ))}
           </div>
         );
       }}

package/src/ui/tooltip/tooltip.module.css

@@ -16,7 +16,7 @@
   background: var(--color-light);
   max-width: 24em;
   color: var(--color-text);
-  filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
+  filter: drop-shadow(var(--shadow-layer));
   will-change: filter;
   font-size: var(--size-xsmall);
   line-height: var(--space-small);

package/src/utils.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { chunk } from 'lodash';
+import chunk from 'lodash/chunk';
 import cx from 'classnames';
 
 import COLORS from './chart-colors.json';

package/tsconfig.esm.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "resolveJsonModule": true,
+    "target": "ES2019",
+    "module": "ES6",
+    "declaration": true,
+    "declarationDir": "./types",
+    "noEmit": false
+  },
+  "exclude": ["**/__tests__/*", "**/*.stories.jsx"]
+}

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*"],
+}

package/tsconfig.lib.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "resolveJsonModule": true,
+    "noEmit": false
+  },
+  "exclude": ["**/__tests__/*", "**/*.stories.jsx"]
+}

package/types/app/app.d.ts

@@ -0,0 +1 @@
+export function App(props: any): any;

package/types/app/header/header.d.ts

@@ -0,0 +1,16 @@
+export function Header({ className, jobs }: {
+    className: any;
+    jobs: any;
+}): any;
+export namespace Header {
+    namespace propTypes {
+        const className: any;
+        const jobs: any;
+    }
+    namespace defaultProps {
+        const className_1: string;
+        export { className_1 as className };
+        const jobs_1: null;
+        export { jobs_1 as jobs };
+    }
+}

package/types/app/header/index.d.ts

@@ -0,0 +1 @@
+export * from "./header";

package/types/app/index.d.ts

@@ -0,0 +1 @@
+export * from "./app";

package/types/assets/icons.svg.d.ts

@@ -0,0 +1 @@
+export function SvgIcons(props: any): any;

package/types/components/asset-info/asset-info.d.ts

@@ -0,0 +1,18 @@
+export function AssetInfo(props: any): any;
+export namespace AssetInfo {
+    namespace propTypes {
+        const className: any;
+        const item: any;
+        const labels: any;
+        const chunks: any;
+        const CustomComponentLink: any;
+    }
+    namespace defaultProps {
+        const className_1: string;
+        export { className_1 as className };
+        const chunks_1: never[];
+        export { chunks_1 as chunks };
+        export { ComponentLink as CustomComponentLink };
+    }
+}
+import { ComponentLink } from "../component-link";

package/types/components/asset-info/index.d.ts

@@ -0,0 +1 @@
+export * from "./asset-info";

package/types/components/browsertime-table/browsertime-table.d.ts

@@ -0,0 +1,13 @@
+export function BrowsertimeTable(props: any): any;
+export namespace BrowsertimeTable {
+    namespace defaultProps {
+        const className: string;
+        const jobs: never[];
+    }
+    namespace propTypes {
+        const className_1: any;
+        export { className_1 as className };
+        const jobs_1: any;
+        export { jobs_1 as jobs };
+    }
+}

package/types/components/browsertime-table/index.d.ts

@@ -0,0 +1 @@
+export * from "./browsertime-table";

package/types/components/bundle-assets/bundle-assets.constants.d.ts

@@ -0,0 +1,21 @@
+export const SORT_BY_NAME: "name";
+export const SORT_BY_SIZE: "size";
+export const SORT_BY_DELTA: "delta";
+export namespace SORT_BY {
+    namespace name {
+        const label: string;
+        const defaultDirection: string;
+    }
+    namespace delta {
+        const label_1: string;
+        export { label_1 as label };
+        const defaultDirection_1: string;
+        export { defaultDirection_1 as defaultDirection };
+    }
+    namespace size {
+        const label_2: string;
+        export { label_2 as label };
+        const defaultDirection_2: string;
+        export { defaultDirection_2 as defaultDirection };
+    }
+}