@bundle-stats/ui 3.1.4-alpha.0 → 3.2.1-alpha.0

package/src/components/bundle-packages/bundle-packages.jsx

@@ -4,6 +4,7 @@ import cx from 'classnames';
 import {
   PACKAGE_FILTERS,
   PACKAGES_SEPARATOR,
+  PACKAGE_ID_SEPARATOR,
   getBundleModulesBySearch,
   getBundlePackagesByNameComponentLink,
 } from '@bundle-stats/utils';
@@ -27,11 +28,19 @@ import css from './bundle-packages.module.css';
 
 const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponentLink }) => {
   const normalizedPackagePath = path || `node_modules/${fullName.split(PACKAGES_SEPARATOR).join('/node_modules/')}/`;
+  const [normalizedName, packageId] = name.split(PACKAGE_ID_SEPARATOR);
 
   return (
     <Stack space="xxsmall" className={css.packagePopover}>
       <Stack space="xxxsmall">
-        <h3 className={css.packagePopoverTitle}>{name}</h3>
+        <h3 className={css.packagePopoverTitle}>
+          {normalizedName}
+          {packageId && (
+            <span className={css.packagePopoverTitleIndex}>
+              {`${PACKAGE_ID_SEPARATOR}${packageId}`}
+            </span>
+          )}
+        </h3>
         <p className={css.packagePopoverPath}>
           <FileName className={css.packagePopoverPathValue} name={normalizedPackagePath} />
         </p>
@@ -39,13 +48,17 @@ const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponen
 
       <ul className={css.packagePopoverList}>
         <li className={css.packagePopoverItem}>
-          <a href={`https://www.npmjs.com/package/${name}`} target="_blank" rel="noreferrer">
+          <a
+            href={`https://www.npmjs.com/package/${normalizedName}`}
+            target="_blank"
+            rel="noreferrer"
+          >
             npmjs.com
           </a>
         </li>
         <li className={css.packagePopoverItem}>
           <a
-            href={`https://bundlephobia.com/result?p=${name}`}
+            href={`https://bundlephobia.com/result?p=${normalizedName}`}
             target="_blank"
             rel="noreferrer"
           >
@@ -57,14 +70,14 @@ const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponen
       <Stack space="xxxsmall" className={css.packagePopover.actions}>
         {duplicate && (
           <div>
-            <CustomComponentLink {...getBundlePackagesByNameComponentLink(name)}>
+            <CustomComponentLink {...getBundlePackagesByNameComponentLink(normalizedName)}>
               View all duplicate instances
             </CustomComponentLink>
           </div>
         )}
 
         <CustomComponentLink {...getBundleModulesBySearch(normalizedPackagePath)}>
-          View package modules
+          Search modules by package path
         </CustomComponentLink>
       </Stack>
     </Stack>
@@ -136,7 +149,7 @@ export const BundlePackages = (props) => {
     resetAllFilters,
     totalRowCount,
     filters,
-    sortItems,
+    sortFields,
     sort,
     updateSort,
     search,
@@ -165,7 +178,7 @@ export const BundlePackages = (props) => {
         className={css.toolbar}
         renderActions={({ actionClassName }) => (
           <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
-            <SortDropdown items={sortItems} {...sort} onChange={updateSort} />
+            <SortDropdown fields={sortFields} {...sort} onChange={updateSort} />
             <MetricsTableOptions
               handleViewAll={resetAllFilters}
               handleResetFilters={resetFilters}
@@ -253,7 +266,7 @@ BundlePackages.propTypes = {
     changed: PropTypes.bool,
   }).isRequired,
   hasActiveFilters: PropTypes.bool,
-  sortItems: PropTypes.shape({
+  sortFields: PropTypes.shape({
     [PropTypes.string]: PropTypes.shape({
       label: PropTypes.string,
       defaultDirection: PropTypes.bool,

package/src/components/bundle-packages/bundle-packages.module.css

@@ -47,6 +47,11 @@
   min-width: 320px;
 }
 
+.packagePopoverTitleIndex {
+  color: var(--color-text-light);
+  font-weight: normal;
+}
+
 .packagePopoverPathValue {
   padding: var(--space-xxxsmall);
   background: var(--color-highlight-warning);

package/src/components/bundle-packages/bundle-packages.utils.js

@@ -0,0 +1,47 @@
+import { get, flatten, uniq } from 'lodash';
+import { PACKAGE_FILTERS } from '@bundle-stats/utils';
+
+import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-packages.constants';
+
+// Get a list of duplicate packages across jobs
+export const getDuplicatePackages = (jobs) => {
+  const jobsDuplicatePackages = jobs.map((job) => {
+    const insightsData = job?.insights?.webpack?.duplicatePackages?.data || {};
+    return Object.values(insightsData).flat();
+  });
+
+  return uniq(flatten(jobsDuplicatePackages));
+};
+
+export const getRowFilter = (filters) => (item) => {
+  if (filters[PACKAGE_FILTERS.CHANGED] && !item.changed) {
+    return false;
+  }
+
+  if (filters[PACKAGE_FILTERS.DUPLICATE] && !item.duplicate) {
+    return false;
+  }
+
+  return true;
+};
+
+export const getCustomSort = (sortId) => (item) => {
+  if (sortId === SORT_BY_NAME) {
+    return item.key;
+  }
+
+  if (sortId === SORT_BY_DELTA) {
+    return get(item, 'runs[0].deltaPercentage', 0);
+  }
+
+  if (sortId === SORT_BY_SIZE) {
+    return get(item, 'runs[0].value', 0);
+  }
+
+  return [!item.changed, item.key];
+};
+
+export const getAddRowDuplicateFlag = (duplicateJobs) => (row) => ({
+  ...row,
+  duplicate: duplicateJobs.includes(row.key),
+});

package/src/components/bundle-packages/index.jsx

@@ -0,0 +1,84 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { PACKAGE_FILTERS } from '@bundle-stats/utils';
+import * as webpack from '@bundle-stats/utils/lib-esm/webpack/compare';
+
+import { useRowsFilter } from '../../hooks/rows-filter';
+import { useRowsSort } from '../../hooks/rows-sort';
+import { useSearchParams } from '../../hooks/search-params';
+import { SORT_BY } from './bundle-packages.constants';
+import { BundlePackages as BundlePackagesComponent } from './bundle-packages';
+import { getDuplicatePackages, getAddRowDuplicateFlag, getRowFilter, getCustomSort } from './bundle-packages.utils';
+
+export const BundlePackages = (props) => {
+  const { jobs, search, filters, setState, sortBy, direction, ...restProps } = props;
+
+  const { defaultFilters, allEntriesFilters } = useMemo(
+    () => ({
+      defaultFilters: {
+        [PACKAGE_FILTERS.CHANGED]: jobs?.length > 1,
+        [PACKAGE_FILTERS.DUPLICATE]: false,
+      },
+      allEntriesFilters: {
+        [PACKAGE_FILTERS.CHANGED]: false,
+        [PACKAGE_FILTERS.DUPLICATE]: false,
+      },
+    }),
+    [jobs],
+  );
+
+  const searchParams = useSearchParams({
+    search,
+    filters,
+    defaultFilters,
+    allEntriesFilters,
+    setState,
+  });
+
+  const { rows, totalRowCount } = useMemo(() => {
+    const duplicateJobs = getDuplicatePackages(jobs);
+    const result = webpack.compareBySection.packages(jobs, [getAddRowDuplicateFlag(duplicateJobs)]);
+    return { rows: result, totalRowCount: result.length };
+  }, [jobs]);
+
+  const filteredRows = useRowsFilter({
+    rows,
+    searchPattern: searchParams.searchPattern,
+    filters: searchParams.filters,
+    getRowFilter,
+  });
+
+  const sortParams = useRowsSort({
+    rows: filteredRows,
+    sortFields: SORT_BY,
+    sortBy,
+    sortDirection: direction,
+    getCustomSort,
+  });
+
+  return (
+    <BundlePackagesComponent
+      jobs={jobs}
+      {...restProps}
+      {...searchParams}
+      {...sortParams}
+      totalRowCount={totalRowCount}
+    />
+  );
+};
+
+BundlePackages.propTypes = {
+  jobs: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
+  filters: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  search: PropTypes.string,
+  sortBy: PropTypes.string,
+  direction: PropTypes.string,
+  setState: PropTypes.func.isRequired,
+};
+
+BundlePackages.defaultProps = {
+  filters: undefined,
+  search: undefined,
+  sortBy: undefined,
+  direction: undefined,
+};

package/src/components/duplicate-packages-warning/duplicate-packages-warning.jsx

@@ -11,7 +11,12 @@ import css from './duplicate-packages-warning.module.css';
 const numberMetric = METRIC_TYPES[METRIC_TYPE_NUMERIC];
 
 export const DuplicatePackagesWarning = (props) => {
-  const { className, duplicatePackagesCount, customComponentLink: CustomComponentLink } = props;
+  const {
+    className,
+    duplicatePackagesCount,
+    customComponentLink: CustomComponentLink,
+    showDelta,
+  } = props;
 
   const metricRunInfo = getMetricRunInfo(
     numberMetric,
@@ -24,7 +29,7 @@ export const DuplicatePackagesWarning = (props) => {
       {`Bundle contains `}
       <CustomComponentLink {...BUNDLE_PACKAGES_DUPLICATE}>
         {metricRunInfo.value}
-        {metricRunInfo.delta !== 0 && (
+        {showDelta && metricRunInfo.delta !== 0 && (
           <Delta
             className={css.titleDelta}
             inverted
@@ -45,9 +50,11 @@ DuplicatePackagesWarning.propTypes = {
     current: PropTypes.number,
     baseline: PropTypes.number,
   }).isRequired,
+  showDelta: PropTypes.bool,
 };
 
 DuplicatePackagesWarning.defaultProps = {
   className: '',
   customComponentLink: ComponentLink,
+  showDelta: true,
 };

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

@@ -1,8 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { get, isEmpty } from 'lodash';
-import { flow, map, sum } from 'lodash/fp';
+import { get, isEmpty, sum } from 'lodash';
 import { METRIC_TYPE_FILE_SIZE, getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
 
 import { Table } from '../../ui/table';
@@ -13,11 +12,7 @@ import styles from './metrics-table.module.css';
 
 const METRIC_TYPE_DATA = getGlobalMetricType(null, METRIC_TYPE_FILE_SIZE);
 
-const getRowsRunTotal = (rows, runIndex) =>
-  flow(
-    map((row) => get(row, `runs[${runIndex}].value`, 0)),
-    sum,
-  )(rows);
+const getRowsRunTotal = (rows, runIndex) => sum(rows.map((row) => get(row, `runs[${runIndex}].value`, 0)));
 
 const getHeaderLabelCells = (rows) => (run, runIndex, runs) => {
   const isBaseline = runIndex === runs.length - 1;

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

@@ -48,6 +48,7 @@ export const MetricsTableSearch = (props) => {
         onChange={handleChangeValue}
         value={value}
         size="small"
+        autoComplete="off"
       />
       {search && (
         <button className={css.cancelButton} type="button" onClick={handleClearValue}>

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

@@ -5,6 +5,7 @@
 }
 
 .input {
+  height: var(--space-large);
   border-color: var(--color-outline);
 }
 
@@ -26,7 +27,7 @@
   padding: var(--space-xxsmall);
   width: var(--space-large);
   height: var(--space-large);
-  background: radial-gradient(var(--color-background), transparent 75%);
+  background: radial-gradient(var(--color-background) 50%, transparent);
   color: var(--color-text-ultra-light);
   transition: var(--transition-in);
 }

package/src/hooks/rows-filter.js

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+
+export const useRowsFilter = ({ rows, searchPattern, filters, getRowFilter }) => {
+  const filteredRows = useMemo(() => {
+    const filterRow = getRowFilter(filters);
+    return rows.filter((row) => {
+      if (searchPattern && !searchPattern.test(row?.key)) {
+        return false;
+      }
+
+      return filterRow(row);
+    });
+  }, [rows, searchPattern, filters, getRowFilter]);
+
+  return filteredRows;
+};

package/src/hooks/rows-sort.js

@@ -0,0 +1,24 @@
+import { useState, useMemo } from 'react';
+import { orderBy } from 'lodash';
+
+export const useRowsSort = ({
+  rows,
+  sortFields,
+  sortBy = 'size',
+  sortDirection = 'desc',
+  getCustomSort,
+}) => {
+  const [sort, updateSort] = useState({ field: sortBy, direction: sortDirection });
+
+  const orderedRows = useMemo(
+    () => orderBy(rows, getCustomSort(sort.field), sort.direction),
+    [rows, sort],
+  );
+
+  return {
+    sortFields,
+    sort,
+    updateSort,
+    items: orderedRows,
+  };
+};

package/src/hooks/search-params.js

@@ -0,0 +1,153 @@
+import { useCallback, useLayoutEffect, useReducer } from 'react';
+import { isEqual, merge } from 'lodash';
+
+const ACTION_SET_FILTERS = 'SET_FILTERS';
+const ACTION_SET_SEARCH = 'SET_SEARCH';
+const ACTION_RESET_DEFAULT = 'RESET_DEFAULT';
+const ACTION_RESET_ALL = 'RESET_ALL';
+const ACTION_SET = 'SET';
+
+const getSearchPattern = (search) => {
+  let searchPattern = new RegExp(/.*/);
+
+  if (!search || !search.trim()) {
+    return searchPattern;
+  }
+
+  try {
+    searchPattern = new RegExp(search, 'i');
+  } catch (err) {
+    // noop
+    console.error(err); // eslint-disable-line no-console
+  }
+
+  return searchPattern;
+};
+
+const getSearchReducer =
+  ({ defaultFilters, allEntriesFilters, setParentState }) => (state, action) => {
+    const { type, payload } = action;
+
+    switch (type) {
+      case ACTION_SET_FILTERS: {
+        setParentState({
+          filters: payload,
+          search: state.search,
+        });
+
+        return {
+          ...state,
+          filters: payload,
+        };
+      }
+
+      case ACTION_SET_SEARCH: {
+        setParentState({
+          filters: state.filters,
+          search: payload,
+        });
+
+        return {
+          ...state,
+          search: payload,
+          searchPattern: getSearchPattern(payload),
+        };
+      }
+
+      case ACTION_RESET_DEFAULT: {
+        setParentState({
+          filters: defaultFilters,
+          search: '',
+        });
+
+        return {
+          filters: defaultFilters,
+          search: '',
+          searchPattern: getSearchPattern(),
+        };
+      }
+
+      case ACTION_RESET_ALL: {
+        setParentState({
+          filters: allEntriesFilters,
+          search: '',
+        });
+
+        return {
+          filters: allEntriesFilters,
+          search: '',
+          searchPattern: getSearchPattern(),
+        };
+      }
+
+      case ACTION_SET: {
+        return payload;
+      }
+
+      default:
+        return state;
+    }
+  };
+
+export const generateState = (filters, search) => ({
+  filters,
+  search,
+  searchPattern: getSearchPattern(search),
+});
+
+export const useSearchParams = ({
+  search: parentSearch,
+
+  filters: parentFilters,
+  defaultFilters,
+  allEntriesFilters,
+  setState: setParentState,
+}) => {
+  // When we pass custom filters, set the other flags to true (allEntries)
+  const initialFilters = parentFilters
+    ? merge({}, allEntriesFilters, parentFilters)
+    : defaultFilters;
+
+  const [{ search, searchPattern, filters }, dispatch] = useReducer(
+    getSearchReducer({ defaultFilters, allEntriesFilters, setParentState }),
+    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(parentFilters, filters)) {
+      return;
+    }
+
+    dispatch({ type: ACTION_SET, payload: generateState(initialFilters, parentSearch) });
+  }, [search, filters, parentFilters, parentSearch]);
+
+  /** Callbacks */
+  const handleUpdateSearch = useCallback((newValue) => {
+    dispatch({ type: ACTION_SET_SEARCH, payload: newValue });
+  }, []);
+
+  const handleUpdateFilters = useCallback((newFilters) => {
+    dispatch({ type: ACTION_SET_FILTERS, payload: newFilters });
+  }, []);
+
+  const handleResetFilters = useCallback(() => {
+    dispatch({ type: ACTION_RESET_DEFAULT });
+  }, []);
+
+  const handleResetAllFilters = useCallback(() => {
+    dispatch({ type: ACTION_RESET_ALL });
+  }, []);
+
+  return {
+    search,
+    searchPattern,
+    filters,
+    hasActiveFilters: !isEqual(allEntriesFilters, filters),
+    updateSearch: handleUpdateSearch,
+    updateFilters: handleUpdateFilters,
+    resetFilters: handleResetFilters,
+    resetAllFilters: handleResetAllFilters,
+  };
+};

package/src/ui/icon/icon.jsx

@@ -2,25 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
-import ArrowIcon from './assets/arrow.svg';
-import BranchIcon from './assets/branch.svg';
-import CancelIcon from './assets/cancel.svg';
-import ClockIcon from './assets/clock.svg';
-import CloseIcon from './assets/close.svg';
-import CommitIcon from './assets/commit.svg';
-import FilterIcon from './assets/filter.svg';
-import HelpIcon from './assets/help.svg';
-import MenuIcon from './assets/menu.svg';
-import PackageIcon from './assets/package.svg';
-import PullRequestIcon from './assets/pull-request.svg';
-import SortIcon from './assets/sort.svg';
-import WarningIcon from './assets/warning.svg';
-
 import css from './icon.module.css';
 
 const ICONS = {
   ARROW: 'arrow',
-  BRANCH: 'branch',
   CANCEL: 'cancel',
   CLOSE: 'close',
   CLOCK: 'clock',
@@ -28,37 +13,17 @@ const ICONS = {
   FILTER: 'filter',
   HELP: 'help',
   MENU: 'menu',
-  PACKAGE: 'package',
-  PR: 'pr',
   SORT: 'sort',
   WARNING: 'warning',
 };
 
-const ICON_MAP = {
-  [ICONS.ARROW]: ArrowIcon,
-  [ICONS.BRANCH]: BranchIcon,
-  [ICONS.CANCEL]: CancelIcon,
-  [ICONS.CLOCK]: ClockIcon,
-  [ICONS.CLOSE]: CloseIcon,
-  [ICONS.COMMIT]: CommitIcon,
-  [ICONS.FILTER]: FilterIcon,
-  [ICONS.HELP]: HelpIcon,
-  [ICONS.MENU]: MenuIcon,
-  [ICONS.PACKAGE]: PackageIcon,
-  [ICONS.PR]: PullRequestIcon,
-  [ICONS.SORT]: SortIcon,
-  [ICONS.WARNING]: WarningIcon,
-};
-
-export const Icon = ({ className, glyph, as: Component, size, ...restProps }) => {
-  const Svg = typeof glyph === 'string' ? ICON_MAP[glyph] : glyph;
-
-  return (
-    <Component className={cx(css.root, className, css[size])} {...restProps}>
-      <Svg className={css.icon} />
-    </Component>
-  );
-};
+export const Icon = ({ className, glyph, as: Component, size, ...restProps }) => (
+  <Component className={cx(css.root, className, css[size])} {...restProps}>
+    <svg className={css.icon}>
+      <use xlinkHref={`#${glyph}`} />
+    </svg>
+  </Component>
+);
 
 Icon.ICONS = ICONS;
 

package/src/ui/popover/popover.jsx

@@ -47,7 +47,7 @@ export const Popover = ({ className, icon, label, ariaLabel, children }) => {
         {label && <span className={css.label}>{label}</span>}
       </UIPopoverDisclosure>
       <UIPopover className={css.popover} {...popover} tabIndex={0}>
-        <UIPopoverArrow className={css.arrow} {...popover} />
+        <UIPopoverArrow className={css.arrow} {...popover} size={24} />
 
         {typeof children === 'function' ? children({ popoverToggle: popover.toggle }) : children}
 

package/src/ui/popover/popover.module.css

@@ -23,7 +23,7 @@
 }
 
 .popover {
-  padding: var(--space-xsmall) var(--space-medium) var(--space-xsmall) var(--space-small);
+  padding: var(--space-xsmall) var(--space-large) var(--space-xsmall) var(--space-small);
   max-width: 360px;
   outline: none;
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
@@ -53,13 +53,13 @@
   background: none;
   border: none;
   cursor: pointer;
-  color: var(--color-text-light);
+  color: var(--color-text-ultra-light);
   transition: var(--transition-out);
 }
 
 .closeBtn:hover,
 .closeBtn:active,
 .closeBtn:focus {
-  color: var(--color-text);
+  color: var(--color-text-light);
   transition: var(--transition-in);
 }