@bundle-stats/ui 3.2.2-beta.0 → 3.2.4-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.2.2-beta.0",
+  "version": "3.2.4-alpha.0",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -36,38 +36,38 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/cli": "7.16.0",
-    "@babel/core": "7.16.0",
-    "@babel/plugin-proposal-class-properties": "7.16.0",
-    "@babel/preset-env": "7.16.4",
-    "@babel/preset-react": "7.16.0",
+    "@babel/cli": "7.16.8",
+    "@babel/core": "7.16.7",
+    "@babel/plugin-proposal-class-properties": "7.16.7",
+    "@babel/preset-env": "7.16.8",
+    "@babel/preset-react": "7.16.7",
     "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
     "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.4.8",
-    "@storybook/addons": "6.4.8",
-    "@storybook/builder-webpack5": "6.4.8",
-    "@storybook/manager-webpack5": "6.4.8",
-    "@storybook/react": "6.4.8",
+    "@storybook/addon-storyshots": "6.4.12",
+    "@storybook/addons": "6.4.12",
+    "@storybook/builder-webpack5": "6.4.12",
+    "@storybook/manager-webpack5": "6.4.12",
+    "@storybook/react": "6.4.12",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "27.4.2",
+    "babel-jest": "27.4.6",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.2.0",
+    "chromatic": "6.3.4",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
-    "core-js": "3.19.3",
+    "core-js": "3.20.2",
     "cross-env": "7.0.3",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
     "hex-rgb": "5.0.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "27.4.3",
+    "jest": "27.4.7",
     "jest-date-mock": "1.0.8",
     "lodash": "4.17.21",
-    "postcss": "8.4.4",
-    "prop-types": "15.7.2",
+    "postcss": "8.4.5",
+    "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-router-dom": "5.3.0",
@@ -75,20 +75,23 @@
     "rimraf": "3.0.2"
   },
   "peerDependencies": {
-    "classnames": "^2.2.6",
-    "core-js": "^3.16.2",
-    "lodash": "^4.17.21",
-    "prop-types": "^15.7.2",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-router-dom": "^5.3.0"
+    "classnames": "2.2.6",
+    "core-js": "3.16.2",
+    "lodash": "4.17.21",
+    "prop-types": "15.7.2",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-router-dom": "5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.2.2-beta.0",
-    "date-fns": "^2.6.0",
-    "query-string": "^7.0.0",
-    "reakit": "^1.3.6",
-    "use-query-params": "^1.2.2"
+    "@bundle-stats/utils": "^3.2.4-alpha.0",
+    "@radix-ui/react-dropdown-menu": "0.1.3",
+    "@radix-ui/react-hover-card": "0.1.3",
+    "@radix-ui/react-tooltip": "0.1.3",
+    "date-fns": "2.28.0",
+    "query-string": "7.1.0",
+    "reakit": "1.3.11",
+    "use-query-params": "1.2.3"
   },
-  "gitHead": "61d21a218bc57b65ee9c0f1c43c6525e7b40f485"
+  "gitHead": "4387528449c1ea441c018705c2d08437b2352797"
 }

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

@@ -2,14 +2,19 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { get, map } from 'lodash';
-import { ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, FILE_TYPE_LABELS } from '@bundle-stats/utils';
+import {
+  ASSET_ENTRY_TYPE,
+  ASSET_FILE_TYPE,
+  ASSET_FILTERS,
+  FILE_TYPE_LABELS,
+} from '@bundle-stats/utils';
 
 import config from '../../config.json';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../../ui/icon';
 import { FileName } from '../../ui/file-name';
-import { Popover } from '../../ui/popover';
+import { HoverCard } from '../../ui/hover-card';
 import { Tooltip } from '../../ui/tooltip';
 import { Filters } from '../../ui/filters';
 import { SortDropdown } from '../../ui/sort-dropdown';
@@ -71,47 +76,51 @@ 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 getRenderRowHeader =
+  ({ labels, CustomComponentLink, chunks }) =>
+  (item) => {
+    const { label, isNotPredictive, runs, isChunk, isEntry, isInitial } = item;
 
-  return (
-    <Popover
-      label={<FileName name={label} />}
-      icon={
-        <div className={css.assetInfoFlags}>
-          {isNotPredictive && (
-            <Tooltip className={css.notPredictive} title={<TooltipNotPredictive runs={runs} />}>
-              <Icon className={css.notPredictiveIcon} glyph="warning" />
-            </Tooltip>
-          )}
-          {isChunk && (
-            <span title="Chunk" className={css.flagChunk}>
-              c
-            </span>
-          )}
-          {isEntry && (
-            <span title="Entrypoint" className={css.flagEntry}>
-              e
-            </span>
-          )}
-          {isInitial && (
-            <span title="Initial" className={css.flagInitial}>
-              i
-            </span>
-          )}
-        </div>
-      }
-    >
-      <AssetInfo
-        className={css.assetInfo}
-        item={item}
-        labels={labels}
-        chunks={chunks}
-        CustomComponentLink={CustomComponentLink}
-      />
-    </Popover>
-  );
-};
+    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 && (
+                <span title="Chunk" className={css.flagChunk}>
+                  c
+                </span>
+              )}
+              {isEntry && (
+                <span title="Entrypoint" className={css.flagEntry}>
+                  e
+                </span>
+              )}
+              {isInitial && (
+                <span title="Initial" className={css.flagInitial}>
+                  i
+                </span>
+              )}
+            </div>
+            <FileName name={label} />
+          </FlexStack>
+        }
+      >
+        <AssetInfo
+          className={css.assetInfo}
+          item={item}
+          labels={labels}
+          chunks={chunks}
+          CustomComponentLink={CustomComponentLink}
+        />
+      </HoverCard>
+    );
+  };
 
 export const BundleAssets = (props) => {
   const {

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

@@ -8,6 +8,11 @@
   margin-right: -1px; /** collapse border */
 }
 
+.assetName {
+  display: inline-flex;
+  align-items: center;
+}
+
 .notPredictive {
   margin-right: var(--space-xxsmall);
   display: inline-block;

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { get, isEmpty, map } from 'lodash';
@@ -18,7 +18,7 @@ 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 { Toolbar } from '../../ui/toolbar';
 import { MetricsTable } from '../metrics-table';
@@ -30,31 +30,18 @@ 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} />;
 
   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
+        item={row}
+        chunks={chunks}
+        chunkIds={chunkIds}
+        labels={labels}
+        customComponentLink={CustomComponentLink}
+      />
+    </HoverCard>
   );
 };
 
@@ -76,9 +63,17 @@ RowHeader.defaultProps = {
   chunks: [],
 };
 
-const getRenderRowHeader = ({ labels, chunks, CustomComponentLink }) => (row) => (
-  <RowHeader row={row} chunks={chunks} labels={labels} CustomComponentLink={CustomComponentLink} />
-);
+const getRenderRowHeader =
+  ({ labels, chunks, CustomComponentLink }) =>
+  (row) =>
+    (
+      <RowHeader
+        row={row}
+        chunks={chunks}
+        labels={labels}
+        CustomComponentLink={CustomComponentLink}
+      />
+    );
 
 export const BundleModules = ({
   className,
@@ -240,10 +235,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

@@ -11,7 +11,3 @@
   max-width: 240px;
   margin-right: -1px; /** collapse border */
 }
-
-.namePopover {
-  min-width: 280px;
-}

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

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import {
@@ -15,7 +15,7 @@ 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 { Toolbar } from '../../ui/toolbar';
 import { FileName } from '../../ui/file-name';
@@ -26,28 +26,29 @@ import { MetricsTableOptions } from '../metrics-table-options';
 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 PackageCard = ({ 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="xxsmall" className={css.packageCard}>
       <Stack space="xxxsmall">
-        <h3 className={css.packagePopoverTitle}>
+        <h3 className={css.packageCardTitle}>
           {normalizedName}
           {packageId && (
-            <span className={css.packagePopoverTitleIndex}>
+            <span className={css.packageCardTitleIndex}>
               {`${PACKAGE_ID_SEPARATOR}${packageId}`}
             </span>
           )}
         </h3>
-        <p className={css.packagePopoverPath}>
-          <FileName className={css.packagePopoverPathValue} name={normalizedPackagePath} />
+        <p className={css.packageCardPath}>
+          <FileName className={css.packageCardPathValue} name={normalizedPackagePath} />
         </p>
       </Stack>
 
-      <ul className={css.packagePopoverList}>
-        <li className={css.packagePopoverItem}>
+      <ul className={css.packageCardList}>
+        <li className={css.packageCardItem}>
           <a
             href={`https://www.npmjs.com/package/${normalizedName}`}
             target="_blank"
@@ -56,7 +57,7 @@ const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponen
             npmjs.com
           </a>
         </li>
-        <li className={css.packagePopoverItem}>
+        <li className={css.packageCardItem}>
           <a
             href={`https://bundlephobia.com/result?p=${normalizedName}`}
             target="_blank"
@@ -67,7 +68,7 @@ const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponen
         </li>
       </ul>
 
-      <Stack space="xxxsmall" className={css.packagePopover.actions}>
+      <Stack space="xxxsmall" className={css.packageCardActions}>
         {duplicate && (
           <div>
             <CustomComponentLink {...getBundlePackagesByNameComponentLink(normalizedName)}>
@@ -84,7 +85,7 @@ const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponen
   );
 };
 
-PackagePopoverContent.propTypes = {
+PackageCard.propTypes = {
   name: PropTypes.string.isRequired,
   path: PropTypes.string,
   fullName: PropTypes.string.isRequired,
@@ -92,7 +93,7 @@ PackagePopoverContent.propTypes = {
   CustomComponentLink: PropTypes.elementType.isRequired,
 };
 
-PackagePopoverContent.defaultProps = {
+PackageCard.defaultProps = {
   path: '',
 };
 
@@ -101,28 +102,33 @@ const PackageRowHeader = ({ item, CustomComponentLink }) => {
   const { path } = item.runs[0] || {};
 
   return (
-    <span className={css.packageNames}>
+    <FlexStack space="xxxsmall" 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>
+        const label = (
+          <FlexStack space="xxxsmall" className={css.packageNameLabel}>
+            {/* Render duplicate flag only for the last entry */}
+            {index === packageNames.length - 1 && item.duplicate && (
+              <span className={css.packageNameDuplicate} title="Duplicate package">
+                D
+              </span>
+            )}
+            <span className={css.packageNameText}>{packageName}</span>
+          </FlexStack>
         );
 
         return (
-          <Popover className={css.packageName} icon={duplicateFlag} label={packageName}>
-            <PackagePopoverContent
+          <HoverCard label={label} key={packageName} className={css.packageName}>
+            <PackageCard
               name={packageName}
               path={path}
               fullName={item.label}
               duplicate={item.duplicate}
               CustomComponentLink={CustomComponentLink}
             />
-          </Popover>
+          </HoverCard>
         );
       })}
-    </span>
+    </FlexStack>
   );
 };
 

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

@@ -12,20 +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);
+.packageNames {
+  align-items: center;
 }
 
 .packageName {
@@ -38,27 +26,56 @@
 
 .packageName + .packageName::before {
   display: inline-block;
-  margin: 0 var(--space-xxxsmall);
+  margin: 0 var(--space-xxxsmall) 0 0;
   content: '/';
   color: var(--color-text-ultra-light);
 }
 
-.packagePopover {
-  min-width: 320px;
+.packageNameLabel {
+  display: inline-flex;
+  align-items: center;
+}
+
+.packageNameDuplicate {
+  margin-right: var(--space-xxxsmall);
+  display: inline-block;
+  width: var(--space-xsmall);
+  height: var(--space-xsmall);
+  font-size: 8px;
+  font-weight: bold;
+  line-height: var(--space-xsmall);
+  text-align: center;
+  text-transform: uppercase;
+  vertical-align: middle;
+
+  background: var(--color-danger);
+  color: var(--color-light);
+}
+
+.packageName:hover,
+.packageName:active,
+.packageName:focus {
+  text-decoration: none !important;
+}
+
+.packageName:hover .packageNameText,
+.packageName:active .packageNameText,
+.packageName:focus .packageNameText {
+  text-decoration: underline !important;
 }
 
-.packagePopoverTitleIndex {
+.packageCardTitleIndex {
   color: var(--color-text-light);
   font-weight: normal;
 }
 
-.packagePopoverPathValue {
+.packageCardPathValue {
   padding: var(--space-xxxsmall);
   background: var(--color-highlight-warning);
   font-family: var(--font-family-monospace);
 }
 
-.packagePopoverList {
+.packageCardList {
   padding: 0;
   list-style: inside;
 }

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

@@ -5,7 +5,7 @@ import I18N from '../../i18n';
 import { Dropdown } from '../../ui/dropdown';
 
 export const MetricsTableOptions = (props) => {
-  const { className,  handleViewAll, handleResetFilters, ...restProps } = props;
+  const { className, handleViewAll, handleResetFilters, ...restProps } = props;
 
   return (
     <Dropdown className={className} glyph="menu" {...restProps}>

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

@@ -5,7 +5,8 @@ import cx from 'classnames';
 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 './metrics-table-title.module.css';
 
 export const MetricsTableTitle = (props) => {
@@ -18,7 +19,7 @@ export const MetricsTableTitle = (props) => {
         <span>{title}</span>
         {info && <span className={css.info}>{info}</span>}
         {(popoverInfo || popoverHref) && (
-          <Popover icon="help">
+          <HoverCard label={<Icon glyph="help" />}>
             <Stack space="xxxsmall">
               {popoverInfo && <p>{popoverInfo}</p>}
               {popoverHref && (
@@ -29,7 +30,7 @@ export const MetricsTableTitle = (props) => {
                 </p>
               )}
             </Stack>
-          </Popover>
+          </HoverCard>
         )}
       </FlexStack>
     </Stack>

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 { Icon } from '../../ui/icon';
+import { HoverCard } from '../../ui/hover-card';
 import { Skeleton } from '../../ui/skeleton';
 import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
@@ -11,32 +12,26 @@ import { Metric } from '../metric';
 import { Delta } from '../delta';
 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 MetricDescriptionCard = ({ description, url }) => (
+  <Stack space="xxsmall">
+    <p>{description}</p>
+
+    {url && (
+      <p>
+        <a href={url} target="_blank" rel="noopener noreferrer">
+          Read more
+        </a>
+      </p>
+    )}
+  </Stack>
+);
+
+MetricDescriptionCard.propTypes = {
   description: PropTypes.string.isRequired,
   url: PropTypes.string,
 };
 
-MetricInfoPopover.defaultProps = {
+MetricDescriptionCard.defaultProps = {
   url: '',
 };
 
@@ -65,9 +60,9 @@ export const SummaryItem = ({
         <span>{metric.label}</span>
 
         {showMetricDescriptionTooltip && (
-          <Popover className={css.icon} icon="help">
-            <MetricInfoPopover {...metric} />
-          </Popover>
+          <HoverCard className={css.icon} label={<Icon glyph="help" />}>
+            <MetricDescriptionCard {...metric} />
+          </HoverCard>
         )}
       </FlexStack>