@bundle-stats/ui 3.2.8 → 3.2.9-beta.1

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { get, map } from 'lodash';
@@ -77,60 +77,90 @@ TooltipNotPredictive.propTypes = {
   runs: PropTypes.array, // eslint-disable-line react/forbid-prop-types
 };
 
-const getRenderRowHeader =
-  ({ labels, CustomComponentLink, chunks }) =>
-  (item) => {
-    const { label, isNotPredictive, runs, isChunk, isEntry, isInitial } = item;
+const RowHeader = ({ row, labels, chunks, CustomComponentLink }) => {
+  const { label, isNotPredictive, runs, isChunk, isEntry, isInitial } = row;
+  const [showHoverCard, setHoverCard] = useState(false);
+  const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
 
-    return (
-      <HoverCard
-        label={
-          <FlexStack space="xxxsmall" className={css.assetName}>
-            <div className={css.assetInfoFlags}>
-              {isNotPredictive && (
-                <Tooltip className={css.notPredictive} title={<TooltipNotPredictive runs={runs} />}>
-                  <Icon className={css.notPredictiveIcon} glyph="warning" />
-                </Tooltip>
-              )}
-              {isChunk && (
-                <Tag
-                  title="Chunk"
-                  size={Tag.SIZES.SMALL}
-                  kind={Tag.KINDS.INFO}
-                  className={cx(css.tag, css.tagChunk)}
-                />
-              )}
-              {isEntry && (
-                <Tag
-                  title="Entrypoint"
-                  size={Tag.SIZES.SMALL}
-                  kind={Tag.KINDS.INFO}
-                  className={cx(css.tag, css.tagEntry)}
-                />
-              )}
-              {isInitial && (
-                <Tag
-                  title="Initial"
-                  size={Tag.SIZES.SMALL}
-                  kind={Tag.KINDS.INFO}
-                  className={cx(css.tag, css.tagInitial)}
-                />
-              )}
-            </div>
-            <FileName name={label} />
-          </FlexStack>
-        }
-      >
-        <AssetInfo
-          className={css.assetInfo}
-          item={item}
-          labels={labels}
-          chunks={chunks}
-          CustomComponentLink={CustomComponentLink}
-        />
-      </HoverCard>
-    );
-  };
+  const content = useMemo(
+    () => (
+      <span className={css.assetName}>
+        <span className={css.assetNameTags}>
+          {isNotPredictive && (
+            <Tooltip className={css.notPredictive} title={<TooltipNotPredictive runs={runs} />}>
+              <Icon className={css.notPredictiveIcon} glyph="warning" />
+            </Tooltip>
+          )}
+          {isChunk && (
+            <Tag
+              className={cx(css.assetNameTag, css.assetNameTagChunk)}
+              title="Chunk"
+              size={Tag.SIZES.SMALL}
+              kind={Tag.KINDS.INFO}
+            />
+          )}
+          {isEntry && (
+            <Tag
+              className={cx(css.assetNameTag, css.assetNameTagEntry)}
+              title="Entrypoint"
+              size={Tag.SIZES.SMALL}
+              kind={Tag.KINDS.INFO}
+            />
+          )}
+          {isInitial && (
+            <Tag
+              className={cx(css.assetNameTag, css.assetNameTagInitial)}
+              title="Initial"
+              size={Tag.SIZES.SMALL}
+              kind={Tag.KINDS.INFO}
+            />
+          )}
+        </span>
+        <FileName className={css.assetNameText} name={label} />
+      </span>
+    ),
+    [isChunk, isEntry, isInitial, isNotPredictive, runs],
+  );
+
+  if (!showHoverCard) {
+    return <span onMouseEnter={handleOnMouseEnter}>{content}</span>;
+  }
+
+  return (
+    <HoverCard label={content}>
+      <AssetInfo
+        className={css.assetInfo}
+        item={row}
+        labels={labels}
+        chunks={chunks}
+        CustomComponentLink={CustomComponentLink}
+      />
+    </HoverCard>
+  );
+};
+
+RowHeader.propTypes = {
+  row: PropTypes.shape({
+    label: PropTypes.string,
+    isNotPredictive: PropTypes.bool,
+    isChunk: PropTypes.bool,
+    isInitial: PropTypes.bool,
+    isEntry: PropTypes.bool,
+    runs: PropTypes.arrayOf(PropTypes.object),
+  }).isRequired,
+  chunks: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      name: PropTypes.string,
+    }),
+  ),
+  labels: PropTypes.arrayOf(PropTypes.string).isRequired,
+  CustomComponentLink: PropTypes.elementType.isRequired,
+};
+
+RowHeader.defaultProps = {
+  chunks: [],
+};
 
 export const BundleAssets = (props) => {
   const {
@@ -160,11 +190,16 @@ export const BundleAssets = (props) => {
     />
   );
 
-  const chunks = jobs[0]?.meta?.webpack?.chunks || [];
-
-  const renderRowHeader = useMemo(
-    () => getRenderRowHeader({ labels: map(jobs, 'label'), CustomComponentLink, chunks }),
-    [jobs, chunks],
+  const renderRowHeader = useCallback(
+    (row) => (
+      <RowHeader
+        row={row}
+        labels={map(jobs, 'label')}
+        chunks={jobs[0]?.meta?.webpack?.chunks || []}
+        CustomComponentLink={CustomComponentLink}
+      />
+    ),
+    [jobs, CustomComponentLink],
   );
 
   return (

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

@@ -8,10 +8,7 @@
   margin-right: -1px; /** collapse border */
 }
 
-.assetName {
-  display: inline-flex;
-  align-items: center;
-}
+.assetName {}
 
 .notPredictive {
   margin-right: var(--space-xxsmall);
@@ -26,39 +23,48 @@
   vertical-align: top;
 }
 
-.assetInfoFlags {
-  display: inline-block;
+.assetNameTags {
+  display: inline;
   margin-right: var(--space-xxxsmall);
 }
 
-.assetInfoFlags:empty {
+.assetNameTags:empty {
   display: none;
 }
 
-.tag + .tag {
+.assetNameTag {
+  vertical-align: middle;
+}
+
+.assetNameTag + .assetNameTag {
   margin-left: 2px;
 }
 
-.tagEntry {
+.assetNameTagEntry {
   background: var(--color-info-light);
 }
 
-.tagEntry::before {
+.assetNameTagEntry::before {
   content: 'e';
 }
 
-.tagInitial {
+.assetNameTagInitial {
   background: var(--color-info-light);
 }
 
-.tagInitial::before {
+.assetNameTagInitial::before {
   content: 'i';
 }
 
-.tagChunk::before {
+.assetNameTagChunk::before {
   content: 'c';
 }
 
+.assetNameText {
+  display: inline;
+  vertical-align: middle;
+}
+
 /* Tooltip not predictive */
 .tooltipNotPredictive {
   text-align: left;

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

@@ -11,6 +11,7 @@ export const BundleAssetsTotalsTable = ({
   className,
   jobs,
   customComponentLink: CustomComponentLink,
+  ...restProps
 }) => {
   const items = webpack.compareBySection.sizes(jobs);
 
@@ -32,6 +33,7 @@ export const BundleAssetsTotalsTable = ({
       items={items}
       renderRowHeader={renderRowHeader}
       showHeaderSum
+      {...restProps}
     />
   );
 };

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

@@ -31,30 +31,25 @@ 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(() => <FileName name={row.label} />, [row.label]);
+
+  if (!showHoverCard) {
+    return <div onMouseEnter={handleOnMouseEnter}>{content}</div>;
+  }
 
   return (
-    <div onMouseEnter={handleOnMouseEnter}>
-      {!showPopopver ? (
-        content
-      ) : (
-        <HoverCard label={content}>
-          {({ close }) => (
-            <ModuleInfo
-              className={css.namePopover}
-              item={row}
-              chunks={chunks}
-              chunkIds={chunkIds}
-              labels={labels}
-              customComponentLink={CustomComponentLink}
-              onClick={close}
-            />
-          )}
-        </HoverCard>
-      )}
-    </div>
+    <HoverCard label={content}>
+      <ModuleInfo
+        className={css.namePopover}
+        item={row}
+        chunks={chunks}
+        chunkIds={chunkIds}
+        labels={labels}
+        customComponentLink={CustomComponentLink}
+      />
+    </HoverCard>
   );
 };
 
@@ -76,18 +71,6 @@ RowHeader.defaultProps = {
   chunks: [],
 };
 
-const getRenderRowHeader =
-  ({ labels, chunks, CustomComponentLink }) =>
-  (row) =>
-    (
-      <RowHeader
-        row={row}
-        chunks={chunks}
-        labels={labels}
-        CustomComponentLink={CustomComponentLink}
-      />
-    );
-
 export const BundleModules = ({
   className,
   jobs,
@@ -108,11 +91,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"

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 {
@@ -33,23 +33,23 @@ const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponen
   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"
@@ -58,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"
@@ -69,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)}>
@@ -98,49 +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]);
 
-  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 && (
+  const label = useMemo(
+    () => (
+      <>
+        {showDuplicateFlag && row.duplicate && (
           <Tag
+            className={css.packageNameTagDuplicate}
             title="Duplicate package"
             kind={Tag.KINDS.DANGER}
             size={Tag.SIZES.SMALL}
-            className={css.tagDuplicate}
           />
-        );
+        )}
+        <span className={css.packageNameLabel}>{packageName}</span>
+      </>
+    ),
+    [packageName, showDuplicateFlag, row],
+  );
 
-        return (
-          <HoverCard
-            className={css.packageName}
-            label={
-              <FlexStack space="xxxsmall" className={css.packageNameLabel}>
-                {duplicateFlag}
-                <span>{packageName}</span>
-              </FlexStack>
-            }
-          >
-            <PackagePopoverContent
-              name={packageName}
-              path={path}
-              fullName={item.label}
-              duplicate={item.duplicate}
-              CustomComponentLink={CustomComponentLink}
-            />
-          </HoverCard>
-        );
-      })}
+  if (!showHoverCard) {
+    return (
+      <span className={css.packageName} onMouseEnter={handleOnMouseEnter}>
+        {label}
+      </span>
+    );
+  }
+
+  return (
+    <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>
+  );
+};
+
+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(
@@ -181,7 +218,7 @@ export const BundlePackages = (props) => {
   );
 
   const renderRowHeader = useCallback(
-    (item) => <PackageRowHeader item={item} CustomComponentLink={CustomComponentLink} />,
+    (row) => <RowHeader row={row} CustomComponentLink={CustomComponentLink} />,
     [CustomComponentLink],
   );
 

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

@@ -12,15 +12,8 @@
   margin-right: -1px; /** collapse border */
 }
 
-.tagDuplicate {
-  margin-right: var(--space-xxxsmall);
-}
-
-.tagDuplicate::before {
-  content: 'd';
-}
-
 .packageName {
+  display: inline-block;
   color: var(--color-text-light);
 }
 
@@ -35,26 +28,33 @@
   color: var(--color-text-ultra-light);
 }
 
+.packageNameTagDuplicate {
+  margin-right: var(--space-xxxsmall);
+  vertical-align: middle;
+}
+
 .packageNameLabel {
-  align-items: center;
+  vertical-align: middle;
 }
 
-.packagePopover {
-  min-width: 320px;
+.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;
 }