@bundle-stats/ui 3.3.0-alpha.1 → 3.3.1-beta.8

package/src/components/bundle-assets-totals-table/bundle-assets-totals-table.jsx

@@ -1,43 +1,30 @@
-import React, { useCallback, useMemo } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { get } from 'lodash';
 import { getBundleAssetsFileTypeComponentLink } from '@bundle-stats/utils';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 
 import { ASSETS_SIZES_FILE_TYPE_MAP } from '../../constants';
-import { FlexStack } from '../../layout/flex-stack';
 import { MetricsTable } from '../metrics-table';
 import { ComponentLink } from '../component-link';
-import { BudgetInfo } from '../budget-info';
-import css from './bundle-assets-totals-table.module.css';
 
 export const BundleAssetsTotalsTable = ({
   className,
   jobs,
   customComponentLink: CustomComponentLink,
+  ...restProps
 }) => {
-  const items = useMemo(() => webpack.compareBySection.sizes(jobs), [jobs]);
-  const budgets = jobs[0].insights?.webpack?.budgets;
+  const items = webpack.compareBySection.sizes(jobs);
 
-  const renderRowHeader = useCallback(
-    (item) => {
-      const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
-      const { section, title, params } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
-      const [_, ...metricSlugs] = item.key.split('.');
-      const metricKey = metricSlugs.join('.');
-      const budget = get(budgets, metricKey);
+  const renderRowHeader = (item) => {
+    const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
+    const { section, title, params } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
 
-      return (
-        <CustomComponentLink section={section} title={title} params={params}>
-          <FlexStack space="xxsmall" className={css.itemTitleText}>
-            <span>{item.label}</span>
-            {budget && <BudgetInfo metricId={item.key} budgetInsight={budget} />}
-          </FlexStack>
-        </CustomComponentLink>
-      );
-    },
-    [CustomComponentLink],
-  );
+    return (
+      <CustomComponentLink section={section} title={title} params={params}>
+        {item.label}
+      </CustomComponentLink>
+    );
+  };
 
   return (
     <MetricsTable
@@ -46,6 +33,7 @@ export const BundleAssetsTotalsTable = ({
       items={items}
       renderRowHeader={renderRowHeader}
       showHeaderSum
+      {...restProps}
     />
   );
 };

package/src/components/bundle-assets-totals-table/bundle-assets-totals-table.module.css

@@ -1,3 +1,3 @@
-.itemTitleText {
-  align-items: center;
+.title {
+  color: var(--color-text-light);
 }

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

@@ -18,8 +18,9 @@ import { FlexStack } from '../../layout/flex-stack';
 import { EmptySet } from '../../ui/empty-set';
 import { FileName } from '../../ui/file-name';
 import { Filters } from '../../ui/filters';
-import { Popover } from '../../ui/popover';
+import { HoverCard } from '../../ui/hover-card';
 import { SortDropdown } from '../../ui/sort-dropdown';
+import { Tag } from '../../ui/tag';
 import { Toolbar } from '../../ui/toolbar';
 import { MetricsTable } from '../metrics-table';
 import { MetricsTableSearch } from '../metrics-table-search';
@@ -31,36 +32,42 @@ import css from './bundle-modules.module.css';
 const RowHeader = ({ row, chunks, labels, CustomComponentLink }) => {
   const chunkIds = map(chunks, 'id');
 
-  const [showPopopver, setPopover] = useState(false);
-  const handleOnMouseEnter = useCallback(() => setPopover(true), [showPopopver]);
-  const content = <FileName name={row.label} />;
+  const [showHoverCard, setHoverCard] = useState(false);
+  const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
+  const content = useMemo(
+    () => (
+      <span className={css.name}>
+        {row.duplicated && (
+          <Tag className={css.nameTagDuplicated} size="small" kind={Tag.KINDS.DANGER} />
+        )}
+        <FileName className={css.nameText} name={row.label} />
+      </span>
+    ),
+    [row],
+  );
+
+  if (!showHoverCard) {
+    return <div onMouseEnter={handleOnMouseEnter}>{content}</div>;
+  }
 
   return (
-    <div onMouseEnter={handleOnMouseEnter}>
-      {!showPopopver ?
-        content
-        : (
-        <Popover ariaLabel="View module info" label={content}>
-          {({ popoverToggle }) => (
-            <ModuleInfo
-              className={css.namePopover}
-              item={row}
-              chunks={chunks}
-              chunkIds={chunkIds}
-              labels={labels}
-              customComponentLink={CustomComponentLink}
-              onClick={popoverToggle}
-            />
-          )}
-        </Popover>
-      )}
-    </div>
+    <HoverCard label={content}>
+      <ModuleInfo
+        className={css.namePopover}
+        item={row}
+        chunks={chunks}
+        chunkIds={chunkIds}
+        labels={labels}
+        customComponentLink={CustomComponentLink}
+      />
+    </HoverCard>
   );
 };
 
 RowHeader.propTypes = {
   row: PropTypes.shape({
     label: PropTypes.string,
+    duplicated: PropTypes.bool,
   }).isRequired,
   chunks: PropTypes.arrayOf(
     PropTypes.shape({
@@ -76,10 +83,6 @@ RowHeader.defaultProps = {
   chunks: [],
 };
 
-const getRenderRowHeader = ({ labels, chunks, CustomComponentLink }) => (row) => (
-  <RowHeader row={row} chunks={chunks} labels={labels} CustomComponentLink={CustomComponentLink} />
-);
-
 export const BundleModules = ({
   className,
   jobs,
@@ -100,11 +103,18 @@ export const BundleModules = ({
 }) => {
   const rootClassName = cx(css.root, className);
 
-  const labels = useMemo(() => map(jobs, 'label'), [jobs]);
-  const renderRowHeader = useMemo(
-    () => getRenderRowHeader({ labels, chunks, CustomComponentLink }),
-    [labels, chunks],
+  const renderRowHeader = useCallback(
+    (row) => (
+      <RowHeader
+        row={row}
+        chunks={chunks}
+        labels={map(jobs, 'label')}
+        CustomComponentLink={CustomComponentLink}
+      />
+    ),
+    [jobs, chunks, CustomComponentLink],
   );
+
   const emptyMessage = (
     <EmptySet
       resources="modules"
@@ -120,6 +130,11 @@ export const BundleModules = ({
       defaultValue: filters.changed,
       disabled: jobs.length <= 1,
     },
+    [MODULE_FILTERS.DUPLICATED]: {
+      label: 'Duplicated',
+      defaultValue: filters[MODULE_FILTERS.DUPLICATED],
+      disabled: jobs.length <= 1,
+    },
     [MODULE_SOURCE_TYPE]: {
       label: 'Source',
       [MODULE_FILTERS.FIRST_PARTY]: {
@@ -184,7 +199,7 @@ export const BundleModules = ({
           </FlexStack>
         )}
       >
-        <FlexStack>
+        <FlexStack space="xxsmall">
           <MetricsTableSearch
             className={css.toolbarSearch}
             search={search}
@@ -240,10 +255,12 @@ BundleModules.propTypes = {
   jobs: PropTypes.array, // eslint-disable-line react/forbid-prop-types
 
   /** Chunks data */
-  chunks: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.string,
-  })).isRequired,
+  chunks: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      name: PropTypes.string,
+    }),
+  ).isRequired,
 
   /** total row count */
   totalRowCount: PropTypes.number,

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

@@ -12,6 +12,15 @@
   margin-right: -1px; /** collapse border */
 }
 
-.namePopover {
-  min-width: 280px;
+.nameTagDuplicated {
+  margin-right: var(--space-xxxsmall);
+  vertical-align: baseline;
+}
+
+.nameTagDuplicated::before {
+  content: 'D';
+}
+
+.nameText {
+  vertical-align: middle;
 }

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

@@ -12,9 +12,15 @@ import {
 import { SORT_BY_NAME, SORT_BY_SIZE, SORT_BY_DELTA } from './bundle-modules.constants';
 
 export const addRowSourceFlag = (row) => {
-  const { key } = row;
-  const thirdParty = Boolean(key.match(MODULE_PATH_PACKAGES));
-  return { ...row, thirdParty };
+  const { key, runs } = row;
+
+  // @NOTE Assign instead destructuring for perf reasons
+  // eslint-disable-next-line no-param-reassign
+  row.thirdParty = Boolean(key.match(MODULE_PATH_PACKAGES));
+  // eslint-disable-next-line no-param-reassign
+  row.duplicated = Boolean(runs.find((run) => run?.duplicated === true));
+
+  return row;
 };
 
 export const getCustomSort = (sortBy) => (item) => {
@@ -39,10 +45,16 @@ export const getRowFilter = (filters) => (row) => {
     return false;
   }
 
+  // Skip not duplicated rows
+  if (filters[MODULE_FILTERS.DUPLICATED] && !row.duplicated) {
+    return false;
+  }
+
   // Skip not matching source type
   if (
     !(
-      (filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`] && row.thirdParty === false) ||
+      (filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`] &&
+        row.thirdParty === false) ||
       (filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`] && row.thirdParty === true)
     )
   ) {

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

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { uniqBy, map } from 'lodash';
 import {
+  MODULE_FILTERS,
   getModuleChunkFilters,
   getModuleSourceTypeFilters,
   getModuleFileTypeFilters,
@@ -33,12 +34,14 @@ export const BundleModules = (props) => {
         ...getModuleSourceTypeFilters(true),
         ...getModuleChunkFilters(chunkIds, true),
         ...getModuleFileTypeFilters(true),
+        [MODULE_FILTERS.DUPLICATED]: false,
       },
       allEntriesFilters: {
         changed: false,
         ...getModuleSourceTypeFilters(true),
         ...getModuleChunkFilters(chunkIds, true),
         ...getModuleFileTypeFilters(true),
+        [MODULE_FILTERS.DUPLICATED]: false,
       },
     }),
     [jobs],

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

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import {
@@ -15,8 +15,9 @@ import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
 import { EmptySet } from '../../ui/empty-set';
 import { Filters } from '../../ui/filters';
-import { Popover } from '../../ui/popover';
+import { HoverCard } from '../../ui/hover-card';
 import { SortDropdown } from '../../ui/sort-dropdown';
+import { Tag } from '../../ui/tag';
 import { Toolbar } from '../../ui/toolbar';
 import { FileName } from '../../ui/file-name';
 import { ComponentLink } from '../component-link';
@@ -27,27 +28,28 @@ import { MetricsTableTitle } from '../metrics-table-title';
 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 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="xsmall" className={css.packageHoverCard}>
       <Stack space="xxxsmall">
-        <h3 className={css.packagePopoverTitle}>
+        <h3 className={css.packageHoverCardTitle}>
           {normalizedName}
           {packageId && (
-            <span className={css.packagePopoverTitleIndex}>
+            <span className={css.packageHoverCardTitleIndex}>
               {`${PACKAGE_ID_SEPARATOR}${packageId}`}
             </span>
           )}
         </h3>
-        <p className={css.packagePopoverPath}>
-          <FileName className={css.packagePopoverPathValue} name={normalizedPackagePath} />
+        <p className={css.packageHoverCardPath}>
+          <FileName className={css.packageHoverCardPathValue} name={normalizedPackagePath} />
         </p>
       </Stack>
 
-      <ul className={css.packagePopoverList}>
-        <li className={css.packagePopoverItem}>
+      <ul className={css.packageHoverCardList}>
+        <li className={css.packageHoverCardItem}>
           <a
             href={`https://www.npmjs.com/package/${normalizedName}`}
             target="_blank"
@@ -56,7 +58,7 @@ const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponen
             npmjs.com
           </a>
         </li>
-        <li className={css.packagePopoverItem}>
+        <li className={css.packageHoverCardItem}>
           <a
             href={`https://bundlephobia.com/result?p=${normalizedName}`}
             target="_blank"
@@ -67,7 +69,7 @@ const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponen
         </li>
       </ul>
 
-      <Stack space="xxxsmall" className={css.packagePopover.actions}>
+      <Stack space="xxxsmall" className={css.packageHoverCardActions}>
         {duplicate && (
           <div>
             <CustomComponentLink {...getBundlePackagesByNameComponentLink(normalizedName)}>
@@ -96,38 +98,86 @@ PackagePopoverContent.defaultProps = {
   path: '',
 };
 
-const PackageRowHeader = ({ item, CustomComponentLink }) => {
-  const packageNames = item.label.split(PACKAGES_SEPARATOR);
-  const { path } = item.runs[0] || {};
+const PackageName = ({ packageName, path, showDuplicateFlag, row, CustomComponentLink }) => {
+  const [showHoverCard, setHoverCard] = useState(false);
+  const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
+
+  const label = useMemo(
+    () => (
+      <>
+        {showDuplicateFlag && row.duplicate && (
+          <Tag
+            className={css.packageNameTagDuplicate}
+            title="Duplicate package"
+            kind={Tag.KINDS.DANGER}
+            size={Tag.SIZES.SMALL}
+          />
+        )}
+        <span className={css.packageNameLabel}>{packageName}</span>
+      </>
+    ),
+    [packageName, showDuplicateFlag, row],
+  );
+
+  if (!showHoverCard) {
+    return (
+      <span className={css.packageName} onMouseEnter={handleOnMouseEnter}>
+        {label}
+      </span>
+    );
+  }
 
   return (
-    <span className={css.packageNames}>
-      {packageNames.map((packageName, index) => {
-        // Render duplicate flag only for the last entry
-        const duplicateFlag = index === packageNames.length - 1 && item.duplicate && (
-          <span className={css.duplicate} title="Duplicate package">
-            D
-          </span>
-        );
+    <HoverCard className={css.packageName} label={<span className={css.packageName}>{label}</span>}>
+      <PackagePopoverContent
+        name={packageName}
+        path={path}
+        fullName={row.label}
+        duplicate={row.duplicate}
+        CustomComponentLink={CustomComponentLink}
+      />
+    </HoverCard>
+  );
+};
 
-        return (
-          <Popover className={css.packageName} icon={duplicateFlag} label={packageName}>
-            <PackagePopoverContent
-              name={packageName}
-              path={path}
-              fullName={item.label}
-              duplicate={item.duplicate}
-              CustomComponentLink={CustomComponentLink}
-            />
-          </Popover>
-        );
-      })}
+PackageName.propTypes = {
+  packageName: PropTypes.string.isRequired,
+  path: PropTypes.string.isRequired,
+  showDuplicateFlag: PropTypes.bool.isRequired,
+  row: PropTypes.shape({
+    label: PropTypes.string,
+    duplicate: PropTypes.bool,
+    runs: PropTypes.arrayOf(
+      PropTypes.shape({
+        path: PropTypes.string,
+      }),
+    ).isRequired,
+  }).isRequired,
+  CustomComponentLink: PropTypes.elementType.isRequired,
+};
+
+const RowHeader = ({ row, CustomComponentLink }) => {
+  const packageNames = row.label.split(PACKAGES_SEPARATOR);
+  const { path } = row.runs[0] || {};
+
+  return (
+    <span className={css.packageNames}>
+      {packageNames.map((packageName, index) => (
+        <PackageName
+          packageName={packageName}
+          path={path}
+          // Render duplicate flag only for the last entry
+          showDuplicateFlag={index === packageNames.length - 1}
+          row={row}
+          CustomComponentLink={CustomComponentLink}
+        />
+      ))}
     </span>
   );
 };
 
-PackageRowHeader.propTypes = {
-  item: PropTypes.shape({
+RowHeader.propTypes = {
+  row: PropTypes.shape({
     label: PropTypes.string,
     duplicate: PropTypes.bool,
     runs: PropTypes.arrayOf(
@@ -168,7 +218,7 @@ export const BundlePackages = (props) => {
   );
 
   const renderRowHeader = useCallback(
-    (item) => <PackageRowHeader item={item} CustomComponentLink={CustomComponentLink} />,
+    (row) => <RowHeader row={row} CustomComponentLink={CustomComponentLink} />,
     [CustomComponentLink],
   );
 
@@ -186,7 +236,7 @@ export const BundlePackages = (props) => {
           </FlexStack>
         )}
       >
-        <FlexStack>
+        <FlexStack space="xxsmall">
           <MetricsTableSearch
             className={css.toolbarSearch}
             placeholder="Search by name"

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

@@ -12,23 +12,8 @@
   margin-right: -1px; /** collapse border */
 }
 
-.duplicate {
-  margin-right: var(--space-xxxsmall);
-  display: inline-block;
-  width: var(--space-small);
-  height: var(--space-small);
-  font-size: 10px;
-  font-weight: bold;
-  line-height: var(--space-small);
-  text-align: center;
-  text-transform: uppercase;
-  vertical-align: middle;
-
-  background: var(--color-danger);
-  color: var(--color-light);
-}
-
 .packageName {
+  display: inline-block;
   color: var(--color-text-light);
 }
 
@@ -43,22 +28,33 @@
   color: var(--color-text-ultra-light);
 }
 
-.packagePopover {
-  min-width: 320px;
+.packageNameTagDuplicate {
+  margin-right: var(--space-xxxsmall);
+  vertical-align: middle;
+}
+
+.packageNameLabel {
+  vertical-align: middle;
+}
+
+.packageNameTagDuplicate::before {
+  content: 'd';
 }
 
-.packagePopoverTitleIndex {
+
+.packageHoverCardTitleIndex {
   color: var(--color-text-light);
   font-weight: normal;
 }
 
-.packagePopoverPathValue {
+.packageHoverCardPathValue {
+  width: 100%;
   padding: var(--space-xxxsmall);
   background: var(--color-highlight-warning);
   font-family: var(--font-family-monospace);
 }
 
-.packagePopoverList {
+.packageHoverCardList {
   padding: 0;
   list-style: inside;
 }

package/src/components/delta/delta.module.css

@@ -28,6 +28,7 @@
 }
 
 .inverted {
+  border-radius: var(--radius-small);
   background-color: var(--color-gray-ultra-light);
   color: var(--color-light);
 }

package/src/components/index.js

@@ -4,7 +4,6 @@ export { BundleAssetsTotalsTable } from './bundle-assets-totals-table';
 export { BundleAssetsTotalsChartBars } from './bundle-assets-totals-chart-bars';
 export { BundlePackages } from './bundle-packages';
 export { BundleModules } from './bundle-modules';
-export { BudgetInsights } from './budget-insights';
 export { ComponentLink } from './component-link';
 export { DuplicatePackagesWarning } from './duplicate-packages-warning';
 export { Delta } from './delta';

package/src/components/job-header/job-header.jsx

@@ -8,6 +8,7 @@ import { SOURCE_PATH_WEBPACK_STATS, formatDate, formatTime } from '@bundle-stats
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { Icon } from '../../ui/icon';
+import { Tag } from '../../ui/tag';
 import css from './job-header.module.css';
 
 export const JobHeader = (props) => {
@@ -20,7 +21,7 @@ export const JobHeader = (props) => {
     <Stack className={rootClassName} space="xxsmall">
       <h1 className={css.title}>
         <span>{`#${job.internalBuildNumber}`}</span>
-        {tag && <span className={css.tag}>{tag}</span>}
+        {tag && <Tag className={css.tag}>{tag}</Tag>}
       </h1>
       <FlexStack className={css.meta} space="xxsmall">
         {builtAt && (

package/src/components/job-header/job-header.module.css

@@ -1,22 +1,20 @@
 .title {
+  font-size: var(--size-xlarge);
   line-height: 1;
   font-weight: bold;
   vertical-align: top;
 }
 
 .tag {
-  padding: var(--space-xxxsmall);
-  margin-left: var(--space-xxxsmall);
-  background-color: var(--color-highlight);
-  color: var(--color-text-light);
-  display: inline-block;
-  font-size: 9px;
-  line-height: var(--space-xxsmall);
-  font-weight: normal;
+  margin-left: var(--space-xxsmall);
   vertical-align: top;
+  outline: 1px solid var(--color-outline);
+  background: var(--color-highlight);
+  color: var(--color-text-light);
 }
 
 .meta {
+  font-size: var(--size-small);
   color: var(--color-text-light);
 }
 

package/src/components/jobs-header/jobs-header.module.css

@@ -9,3 +9,8 @@
   padding: 0 var(--space-medium);
   border-left: 1px solid var(--color-outline);
 }
+
+.item:first-child {
+  border-left: 0;
+  padding-left: 0;
+}