@bundle-stats/ui 4.4.0-beta.1 → 4.4.0-beta.4

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

@@ -1,30 +1,22 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import {
-  PACKAGE_FILTERS,
-  PACKAGES_SEPARATOR,
-  PACKAGE_ID_SEPARATOR,
-  getBundleModulesBySearch,
-  getBundlePackagesByNameComponentLink,
-} from '@bundle-stats/utils';
+import { COMPONENT, PACKAGE_FILTERS, PACKAGES_SEPARATOR, SECTIONS } from '@bundle-stats/utils';
 
 import config from '../../config.json';
 import I18N from '../../i18n';
-import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
 import { EmptySet } from '../../ui/empty-set';
 import { Filters } from '../../ui/filters';
-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';
 import { MetricsTable } from '../metrics-table';
 import { MetricsTableSearch } from '../metrics-table-search';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
+import { PackageInfo } from '../package-info';
 import css from './bundle-packages.module.css';
 
 const getDropdownFilters = ({ compareMode, filters }) => ({
@@ -39,124 +31,33 @@ const getDropdownFilters = ({ compareMode, filters }) => ({
   },
 });
 
-
-const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponentLink }) => {
-  const fallbackPackagePath = `node_modules/${fullName.split(PACKAGES_SEPARATOR).join('/node_modules/')}`;
-  const normalizedPackagePath = `${path || fallbackPackagePath}/`;
-  const [normalizedName, packageId] = name.split(PACKAGE_ID_SEPARATOR);
-
-  return (
-    <Stack space="xsmall" className={css.packageHoverCard}>
-      <Stack space="xxxsmall">
-        <h3 className={css.packageHoverCardTitle}>
-          {normalizedName}
-          {packageId && (
-            <span className={css.packageHoverCardTitleIndex}>
-              {`${PACKAGE_ID_SEPARATOR}${packageId}`}
-            </span>
-          )}
-        </h3>
-        <p className={css.packageHoverCardPath}>
-          <FileName className={css.packageHoverCardPathValue} name={normalizedPackagePath} />
-        </p>
-      </Stack>
-
-      <ul className={css.packageHoverCardList}>
-        <li className={css.packageHoverCardItem}>
-          <a
-            href={`https://www.npmjs.com/package/${normalizedName}`}
-            target="_blank"
-            rel="noreferrer"
-          >
-            npmjs.com
-          </a>
-        </li>
-        <li className={css.packageHoverCardItem}>
-          <a
-            href={`https://bundlephobia.com/result?p=${normalizedName}`}
-            target="_blank"
-            rel="noreferrer"
-          >
-            bundlephobia.com
-          </a>
-        </li>
-      </ul>
-
-      <Stack space="xxxsmall" className={css.packageHoverCardActions}>
-        {duplicate && (
-          <div>
-            <CustomComponentLink {...getBundlePackagesByNameComponentLink(normalizedName)}>
-              View all duplicate instances
-            </CustomComponentLink>
-          </div>
-        )}
-
-        <CustomComponentLink {...getBundleModulesBySearch(normalizedPackagePath)}>
-          Search modules by package path
-        </CustomComponentLink>
-      </Stack>
-    </Stack>
-  );
-};
-
-PackagePopoverContent.propTypes = {
-  name: PropTypes.string.isRequired,
-  path: PropTypes.string,
-  fullName: PropTypes.string.isRequired,
-  duplicate: PropTypes.bool.isRequired,
-  CustomComponentLink: PropTypes.elementType.isRequired,
-};
-
-PackagePopoverContent.defaultProps = {
-  path: '',
-};
-
-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>
-    );
-  }
+const PackageName = ({ packageName, showDetails, row, filters, search, CustomComponentLink }) => {
+  const params = useMemo(() => ({
+    [COMPONENT.BUNDLE_PACKAGES]: {
+      filters,
+      search,
+      entryId: showDetails ? row.key : packageName
+    }
+  }), [filters, search, row, packageName]);
 
   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>
+    <CustomComponentLink section={SECTIONS.PACKAGES} params={params} className={css.packageName}>
+      {showDetails && row.duplicate && (
+        <Tag
+          className={css.packageNameTagDuplicate}
+          title="Duplicate package"
+          kind={Tag.KINDS.DANGER}
+          size={Tag.SIZES.SMALL}
+        />
+      )}
+      <span className={css.packageNameLabel}>{packageName}</span>
+    </CustomComponentLink>
   );
 };
 
 PackageName.propTypes = {
   packageName: PropTypes.string.isRequired,
-  path: PropTypes.string.isRequired,
-  showDuplicateFlag: PropTypes.bool.isRequired,
+  showDetails: PropTypes.bool.isRequired,
   row: PropTypes.shape({
     label: PropTypes.string,
     duplicate: PropTypes.bool,
@@ -167,22 +68,24 @@ PackageName.propTypes = {
     ).isRequired,
   }).isRequired,
   CustomComponentLink: PropTypes.elementType.isRequired,
+  filters: PropTypes.object, // eslint-disable-line react/forbid-props
+  search: PropTypes.string,
 };
 
-const RowHeader = ({ row, CustomComponentLink }) => {
+const RowHeader = ({ row, labels, CustomComponentLink, filters, search }) => {
   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}
+          labels={labels}
+          showDetails={index === packageNames.length - 1}
           CustomComponentLink={CustomComponentLink}
+          filters={filters}
+          search={search}
         />
       ))}
     </span>
@@ -200,6 +103,8 @@ RowHeader.propTypes = {
     ).isRequired,
   }).isRequired,
   CustomComponentLink: PropTypes.elementType.isRequired,
+  filters: PropTypes.object, // eslint-disable-line react/forbid-props
+  search: PropTypes.string,
 };
 
 export const BundlePackages = (props) => {
@@ -219,6 +124,9 @@ export const BundlePackages = (props) => {
     updateSearch,
     hasActiveFilters,
     customComponentLink: CustomComponentLink,
+    entryId,
+    allItems,
+    hideEntryInfo,
   } = props;
 
   const dropdownFilters = useMemo(
@@ -226,69 +134,94 @@ export const BundlePackages = (props) => {
     [jobs, filters],
   );
 
-  const metricsTableTitle = useMemo(() => (
-    <MetricsTableTitle
-      title={I18N.PACKAGES}
-      info={`${items.length}/${totalRowCount}`}
-      popoverInfo={I18N.PACKAGES_INFO}
-      popoverHref={config.documentation.packages}
-    />
-  ), [items, totalRowCount]);
+  const metricsTableTitle = useMemo(
+    () => (
+      <MetricsTableTitle
+        title={I18N.PACKAGES}
+        info={`${items.length}/${totalRowCount}`}
+        popoverInfo={I18N.PACKAGES_INFO}
+        popoverHref={config.documentation.packages}
+      />
+    ),
+    [items, totalRowCount],
+  );
 
   const renderRowHeader = useCallback(
-    (row) => <RowHeader row={row} CustomComponentLink={CustomComponentLink} />,
-    [CustomComponentLink],
+    (row) => (
+      <RowHeader
+        row={row}
+        labels={jobs.map((job) => job?.label)}
+        CustomComponentLink={CustomComponentLink}
+        filters={filters}
+        search={search}
+      />
+    ),
+    [CustomComponentLink, jobs, filters, search],
   );
 
-  const emptyMessage = useMemo(() => (
-    <EmptySet
-      resources="packages"
-      filtered={totalRowCount !== 0}
-      handleResetFilters={resetFilters}
-      handleViewAll={resetAllFilters}
-    />
-  ), [totalRowCount, resetFilters, resetAllFilters]);
+  const emptyMessage = useMemo(
+    () => (
+      <EmptySet
+        resources="packages"
+        filtered={totalRowCount !== 0}
+        handleResetFilters={resetFilters}
+        handleViewAll={resetAllFilters}
+      />
+    ),
+    [totalRowCount, resetFilters, resetAllFilters],
+  );
 
   return (
-    <section className={cx(css.root, className)}>
-      <Toolbar
-        className={css.toolbar}
-        renderActions={({ actionClassName }) => (
-          <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
-            <SortDropdown fields={sortFields} {...sort} onChange={updateSort} />
-            <MetricsTableOptions
-              handleViewAll={resetAllFilters}
-              handleResetFilters={resetFilters}
+    <>
+      <section className={cx(css.root, className)}>
+        <Toolbar
+          className={css.toolbar}
+          renderActions={({ actionClassName }) => (
+            <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
+              <SortDropdown fields={sortFields} {...sort} onChange={updateSort} />
+              <MetricsTableOptions
+                handleViewAll={resetAllFilters}
+                handleResetFilters={resetFilters}
+              />
+            </FlexStack>
+          )}
+        >
+          <FlexStack space="xxsmall">
+            <MetricsTableSearch
+              className={css.toolbarSearch}
+              placeholder="Search by name"
+              search={search}
+              updateSearch={updateSearch}
+            />
+            <Filters
+              filters={dropdownFilters}
+              label={`Filters (${items.length}/${totalRowCount})`}
+              onChange={updateFilters}
+              hasActiveFilters={hasActiveFilters}
             />
           </FlexStack>
-        )}
-      >
-        <FlexStack space="xxsmall">
-          <MetricsTableSearch
-            className={css.toolbarSearch}
-            placeholder="Search by name"
-            search={search}
-            updateSearch={updateSearch}
-          />
-          <Filters
-            filters={dropdownFilters}
-            label={`Filters (${items.length}/${totalRowCount})`}
-            onChange={updateFilters}
-            hasActiveFilters={hasActiveFilters}
+        </Toolbar>
+        <main>
+          <MetricsTable
+            runs={jobs}
+            items={items}
+            emptyMessage={emptyMessage}
+            renderRowHeader={renderRowHeader}
+            showHeaderSum
+            title={metricsTableTitle}
           />
-        </FlexStack>
-      </Toolbar>
-      <main>
-        <MetricsTable
-          runs={jobs}
-          items={items}
-          emptyMessage={emptyMessage}
-          renderRowHeader={renderRowHeader}
-          showHeaderSum
-          title={metricsTableTitle}
+        </main>
+      </section>
+      {entryId && (
+        <PackageInfo
+          className={css.packageInfo}
+          item={allItems.find(({ key }) => key === entryId)}
+          labels={jobs?.map(({ label }) => label)}
+          customComponentLink={CustomComponentLink}
+          onClose={hideEntryInfo}
         />
-      </main>
-    </section>
+      )}
+    </>
   );
 };
 
@@ -339,5 +272,9 @@ BundlePackages.propTypes = {
   updateSort: PropTypes.func.isRequired,
   search: PropTypes.string.isRequired,
   updateSearch: PropTypes.func.isRequired,
+  allItems: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string,
+  })),
   customComponentLink: PropTypes.elementType,
+  hideEntryInfo: PropTypes.func.isRequired,
 };

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

@@ -12,6 +12,10 @@
   margin-right: -1px; /** collapse border */
 }
 
+.hoverCard {
+  max-width: var(--entry-info-hovercard-width);
+}
+
 .packageName {
   display: inline-block;
   color: var(--color-text-light);
@@ -41,20 +45,14 @@
   content: 'd';
 }
 
-
-.packageHoverCardTitleIndex {
-  color: var(--color-text-light);
-  font-weight: normal;
-}
-
-.packageHoverCardPathValue {
-  width: 100%;
-  padding: var(--space-xxxsmall);
-  background: var(--color-highlight-warning);
-  font-family: var(--font-family-monospace);
+.root .packageName:hover,
+.root .packageName:active,
+.root .packageName:focus {
+  text-decoration: none;
 }
 
-.packageHoverCardList {
-  padding: 0;
-  list-style: inside;
+.root .packageName:hover .packageNameLabel,
+.root .packageName:active .packageNameLabel,
+.root .packageName:focus .packageNameLabel {
+  text-decoration: underline;
 }

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, 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';
@@ -56,13 +56,19 @@ export const BundlePackages = (props) => {
     getCustomSort,
   });
 
+  const hideEntryInfo = useCallback(() => {
+    setState({ entryId: '' });
+  }, [setState]);
+
   return (
     <BundlePackagesComponent
       jobs={jobs}
       {...restProps}
       {...searchParams}
       {...sortParams}
+      allItems={rows}
       totalRowCount={totalRowCount}
+      hideEntryInfo={hideEntryInfo}
     />
   );
 };

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

@@ -1,6 +1,7 @@
 .root {
-  white-space: nowrap;
   color: var(--color-gray-ultra-light);
+  font-family: var(--font-family-fixed);
+  white-space: nowrap;
 }
 
 .HIGH_NEGATIVE {

package/src/components/entry-info/entry-info.module.css

@@ -0,0 +1,93 @@
+.root {
+  position: fixed;
+  right: 0;
+  top: var(--entry-info-top);
+  bottom: 0;
+  width: 100vw;
+  max-width: var(--entry-info-width);
+  z-index: calc(var(--layer-high) - 1);
+  background: #fff;
+  box-shadow: var(--shadow-layer-high);
+}
+
+/** layout - full height content */
+.root {
+  display: flex;
+  flex-flow: column;
+}
+
+.header {
+  flex: 0 0 auto;
+}
+
+.contentWrapper {
+  flex: 1 1 auto;
+  overflow: auto;
+}
+
+/** header */
+.header {
+  /** space for close icon */
+  padding-right: calc(var(--space-medium) + var(--space-xxxsmall) + var(--space-xsmall));
+  border-bottom: 1px solid var(--color-outline);
+}
+
+.headerClose {
+  appearance: none;
+  background: none;
+  border: 0;
+  display: block;
+  padding: var(--space-xxxsmall);
+  position: absolute;
+  right: calc(var(--space-small) - var(--space-xxxsmall));
+  top: calc(var(--space-small) - var(--space-xxxsmall));
+  color: var(--color-text-ultra-light);
+  cursor: pointer;
+}
+
+.headerClose:hover,
+.headerClose:active,
+.headerClose:focus {
+  color: var(--color-text-light);
+}
+
+/** comon components */
+.fileName {
+  max-width: 100%;
+  padding: 0 2px;
+  background: var(--color-highlight-warning);
+  line-height: var(--line-height);
+}
+
+.label {
+  font-size: var(--size-medium);
+}
+
+.runs {
+  font-size: var(--size-small);
+}
+
+.runs .runsCell {
+  padding: var(--space-xxxsmall) var(--space-xxsmall);
+}
+
+.runs .runsColJob {
+  white-space: nowrap;
+}
+
+.runs .runsColName {
+  width: 100%;
+}
+
+.runs .runsColSize {
+  text-align: right;
+}
+
+.size {
+  font-family: var(--font-family-fixed);
+}
+
+.metaLabel {
+  margin-right: .6em;
+  color: var(--color-text-light);
+}

package/src/components/entry-info/entry-info.stories.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions'; // eslint-disable-line import/no-extraneous-dependencies
+
+import { getWrapperDecorator } from '../../stories';
+import { EntryInfo } from '.';
+
+export default {
+  title: 'Components/EntryInfo',
+  component: EntryInfo,
+  decorators: [getWrapperDecorator()],
+};
+
+const RUNS = [
+  {
+    name: 'static/vendor.abcd1234.js',
+    value: 982690,
+  },
+  {
+    name: 'static/vendor.defg5678.js',
+    value: 1022530,
+    displayValue: '998.56KiB',
+  },
+];
+
+export const Default = () => (
+  <EntryInfo
+    item={{
+      label: 'static/vendor.js',
+      runs: RUNS as any,
+    }}
+    labels={['Job #2', 'Job #1']}
+    onClose={action('CLOSE')}
+  />
+);
+
+export const Added = () => (
+  <EntryInfo
+    item={{
+      label: 'static/vendor.js',
+      runs: [RUNS[0], null] as any,
+    }}
+    labels={['Job #2', 'Job #1']}
+    onClose={action('CLOSE')}
+  />
+);
+
+export const Removed = () => (
+  <EntryInfo
+    item={{
+      label: 'static/vendor.js',
+      runs: [null, RUNS[1]] as any,
+    }}
+    labels={['Job #2', 'Job #1']}
+    onClose={action('CLOSE')}
+  />
+);
+
+export const WithCustomContent = () => (
+  <EntryInfo
+    item={{
+      label: 'static/vendor.js',
+      runs: RUNS as any,
+    }}
+    labels={['Job #2', 'Job #1']}
+    tags={<span>Critical tags</span>}
+    onClose={action('CLOSE')}
+  >
+    <div>
+      <EntryInfo.Meta label="Meta 1">value 1</EntryInfo.Meta>
+      <EntryInfo.Meta label="Meta 2">value 2</EntryInfo.Meta>
+    </div>
+    <div>custom entry info 1</div>
+    <div>custom entry info 2</div>
+  </EntryInfo>
+);