@bundle-stats/ui 4.13.0-beta.0 → 4.13.0-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.13.0-beta.0",
+  "version": "4.13.0-beta.11",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -36,14 +36,14 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/preset-env": "7.24.0",
-    "@babel/preset-react": "7.23.3",
-    "@babel/preset-typescript": "7.23.3",
+    "@babel/preset-env": "7.24.4",
+    "@babel/preset-react": "7.24.1",
+    "@babel/preset-typescript": "7.24.1",
     "@storybook/addon-essentials": "7.6.17",
     "@storybook/react": "7.6.17",
     "@storybook/react-webpack5": "7.6.17",
     "@types/d3": "7.4.3",
-    "@types/react": "18.2.64",
+    "@types/react": "18.2.77",
     "@types/react-router-dom": "5.3.3",
     "babel-plugin-require-context-hook": "1.0.0",
     "classnames": "2.5.1",
@@ -52,7 +52,7 @@
     "hex-rgb": "5.0.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "29.7.0",
-    "jest-date-mock": "1.0.8",
+    "jest-date-mock": "1.0.9",
     "jest-environment-jsdom": "29.7.0",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
@@ -73,14 +73,12 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "4.13.0-beta.0",
-    "@floating-ui/react": "0.26.9",
-    "@floating-ui/react-dom": "2.0.8",
+    "@bundle-stats/utils": "4.13.0-beta.11",
     "ariakit": "2.0.0-next.44",
     "d3": "^7.8.5",
     "modern-css-reset": "1.4.0",
     "react-use": "^17.5.0",
     "use-query-params": "2.2.1"
   },
-  "gitHead": "f8197677d480f9b0b2112456526c821f49ed5a7d"
+  "gitHead": "e128789009e036ad306e3fb6095137b91b56111f"
 }

package/src/app/app.jsx

@@ -97,9 +97,7 @@ const OverviewContent = () => {
         </Container>
       )}
       <Container>
-        <Box outline>
-          <BundleAssetsTotals jobs={jobs} />
-        </Box>
+        <BundleAssetsTotals jobs={jobs} />
       </Container>
     </Stack>
   );
@@ -111,9 +109,7 @@ const AssetsContent = () => {
 
   return (
     <Container>
-      <Box outline>
-        <BundleAssets jobs={jobs} setState={bundleStatsSetState} {...bundleStatsState} />
-      </Box>
+      <BundleAssets jobs={jobs} setState={bundleStatsSetState} {...bundleStatsState} />
     </Container>
   );
 };
@@ -126,9 +122,7 @@ const ModulesContent = () => {
 
   return (
     <Container>
-      <Box outline>
-        <BundleModules jobs={jobs} setState={bundleModulesSetState} {...bundleModulesState} />
-      </Box>
+      <BundleModules jobs={jobs} setState={bundleModulesSetState} {...bundleModulesState} />
     </Container>
   );
 };
@@ -141,9 +135,7 @@ const PackagesContent = () => {
 
   return (
     <Container>
-      <Box outline>
-        <BundlePackages jobs={jobs} {...bundlePackagesState} setState={bundlePackagesSetState} />
-      </Box>
+      <BundlePackages jobs={jobs} {...bundlePackagesState} setState={bundlePackagesSetState} />
     </Container>
   );
 };

package/src/app/app.module.css

@@ -18,8 +18,8 @@
 }
 
 .summaryContainer {
-  padding-top: var(--space-medium);
-  padding-bottom: var(--space-xsmall);
+  padding-top: var(--space-small);
+  padding-bottom: var(--space-xxsmall);
 }
 
 .tabsContainer {

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

@@ -15,12 +15,15 @@ import config from '../../config.json';
 import I18N from '../../i18n';
 import { MetricsDisplayType } from '../../constants';
 import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
+import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
 import { Icon } from '../../ui/icon';
 import { InputSearch } from '../../ui/input-search';
 import { FileName } from '../../ui/file-name';
 import { HoverCard } from '../../ui/hover-card';
 import { Tag } from '../../ui/tag';
+import { Table } from '../../ui/table';
 import { Filters } from '../../ui/filters';
 import { EmptySet } from '../../ui/empty-set';
 import { Toolbar } from '../../ui/toolbar';
@@ -30,9 +33,10 @@ import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
-import { SEARCH_PLACEHOLDER } from './bundle-assets.i18n';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
+import { MetricsTableHeader } from '../metrics-table-header';
 import { MetricsTreemap } from '../metrics-treemap';
+import { SEARCH_PLACEHOLDER } from './bundle-assets.i18n';
 import css from './bundle-assets.module.css';
 
 const RUN_TITLE_CURRENT = 'Current';
@@ -230,9 +234,8 @@ export const BundleAssets = (props) => {
 
   return (
     <>
-      <section className={cx(css.root, className)}>
+      <Stack space="xsmall" as="section" className={cx(css.root, className)}>
         <Toolbar
-          className={css.toolbar}
           renderActions={({ actionClassName }) => (
             <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
               <MetricsDisplaySelector onSelect={setDisplayType} value={displayType} />
@@ -258,7 +261,7 @@ export const BundleAssets = (props) => {
             />
           </FlexStack>
         </Toolbar>
-        <main>
+        <Box outline as="main">
           {displayType === MetricsDisplayType.TABLE && (
             <MetricsTable
               runs={jobs}
@@ -272,10 +275,24 @@ export const BundleAssets = (props) => {
             />
           )}
           {displayType === MetricsDisplayType.TREEMAP && (
-            <MetricsTreemap emptyMessage={emptyMessage} items={items} onItemClick={showEntryInfo} />
+            <>
+              <Table compact>
+                <MetricsTableHeader
+                  metricTitle={metricsTableTitle}
+                  showSum
+                  jobs={jobs}
+                  rows={items}
+                />
+              </Table>
+              <MetricsTreemap
+                emptyMessage={emptyMessage}
+                items={items}
+                onItemClick={showEntryInfo}
+              />
+            </>
           )}
-        </main>
-      </section>
+        </Box>
+      </Stack>
 
       {entryItem && (
         <AssetInfo

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

@@ -1,11 +1,6 @@
-.toolbar {
-  border-bottom: 1px solid var(--color-outline);
-}
-
 .toolbarSearch {
   width: 100%;
   max-width: 240px;
-  margin-right: -1px; /** collapse border */
 }
 
 .assetNameWrapper {

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

@@ -10,9 +10,14 @@ import {
 import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
-import { useShowEntry } from '../../hooks/show-entry';
+import { useEntryInfo } from '../../hooks/entry-info';
 import { BundleAssets as BundleAssetsComponent } from './bundle-assets';
-import { addRowAssetFlags, addRowIsNotPredictive, getRowFilter, getCustomSort } from './bundle-assets.utils';
+import {
+  addRowAssetFlags,
+  addRowIsNotPredictive,
+  getRowFilter,
+  getCustomSort,
+} from './bundle-assets.utils';
 
 export const BundleAssets = (props) => {
   const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
@@ -60,7 +65,7 @@ export const BundleAssets = (props) => {
     getCustomSort,
   });
 
-  const { hideEntryInfo, showEntryInfo } = useShowEntry({ setState });
+  const [hideEntryInfo, showEntryInfo] = useEntryInfo({ setState });
 
   return (
     <BundleAssetsComponent

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import {
@@ -7,20 +7,26 @@ import {
 } from '@bundle-stats/utils';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 
+import config from '../../config.json';
 import { ASSETS_SIZES_FILE_TYPE_MAP, SECTION_URLS, MetricsDisplayType } from '../../constants';
 import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
+import I18N from '../../i18n';
 import { Toolbar } from '../../ui/toolbar';
-import { MetricsTreemap } from '../metrics-treemap';
+import { Table } from '../../ui/table';
+import { Box } from '../../layout/box';
+import { Stack } from '../../layout/stack';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
-import { TotalSizeTypeTitle } from '../total-size-type-title';
 import { MetricsTable } from '../metrics-table';
+import { MetricsTableTitle } from '../metrics-table-title';
+import { MetricsTableHeader } from '../metrics-table-header';
+import { MetricsTreemap } from '../metrics-treemap';
 import { ComponentLink } from '../component-link';
-import css from './bundle-assets-totals.module.css';
 
 export const BundleAssetsTotals = ({
   className,
   jobs,
   customComponentLink: CustomComponentLink,
+  onTreemapItemClick,
   ...restProps
 }) => {
   const [displayType, setDisplayType] = useMetricsDisplayType();
@@ -43,37 +49,56 @@ export const BundleAssetsTotals = ({
     (entryId) => {
       const fileType = ASSETS_SIZES_FILE_TYPE_MAP[entryId];
       const { section, params } = getBundleAssetsFileTypeComponentLink(fileType, '');
-      const search = getComponentStateQueryString(params);
-      const nextUrl = `${SECTION_URLS[section]}?${search}`;
+      const queryParams = getComponentStateQueryString(params);
 
+      const nextUrl = `${SECTION_URLS[section]}?${queryParams}`;
       history.push(nextUrl);
     },
     [history],
   );
 
+  const metricsTableTitle = useMemo(
+    () => (
+      <MetricsTableTitle
+        title={I18N.ASSET_TOTALS}
+        popoverInfo={I18N.ASSET_TOTALS_INFO}
+        popoverHref={config.documentation.assets}
+      />
+    ),
+    [],
+  );
+
   return (
-    <div className={className}>
+    <Stack space="xsmall" as="section" className={className}>
       <Toolbar
-        className={css.toolbar}
         renderActions={() => (
           <MetricsDisplaySelector onSelect={setDisplayType} value={displayType} />
         )}
-      >
-        <TotalSizeTypeTitle />
-      </Toolbar>
-      {displayType === MetricsDisplayType.TABLE && (
-        <MetricsTable
-          runs={jobs}
-          items={items}
-          renderRowHeader={renderRowHeader}
-          showHeaderSum
-          {...restProps}
-        />
-      )}
-      {displayType === MetricsDisplayType.TREEMAP && (
-        <MetricsTreemap items={items} onItemClick={handleMetricsTreemapItemClick} />
-      )}
-    </div>
+      />
+      <Box outline as="main">
+        {displayType === MetricsDisplayType.TABLE && (
+          <MetricsTable
+            title={metricsTableTitle}
+            runs={jobs}
+            items={items}
+            renderRowHeader={renderRowHeader}
+            showHeaderSum
+            {...restProps}
+          />
+        )}
+        {displayType === MetricsDisplayType.TREEMAP && (
+          <>
+            <Table compact>
+              <MetricsTableHeader metricTitle={metricsTableTitle} showSum jobs={jobs} rows={items} />
+            </Table>
+            <MetricsTreemap
+              items={items}
+              onItemClick={onTreemapItemClick || handleMetricsTreemapItemClick}
+            />
+          </>
+        )}
+      </Box>
+    </Stack>
   );
 };
 
@@ -81,6 +106,7 @@ BundleAssetsTotals.defaultProps = {
   className: '',
   jobs: [],
   customComponentLink: ComponentLink,
+  onTreemapItemClick: undefined,
 };
 
 BundleAssetsTotals.propTypes = {
@@ -91,4 +117,9 @@ BundleAssetsTotals.propTypes = {
   jobs: PropTypes.array, // eslint-disable-line react/forbid-prop-types
 
   customComponentLink: PropTypes.elementType,
+
+  /**
+   * Treemap item onClick
+   */
+  onTreemapItemClick: PropTypes.func,
 };

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

@@ -2,14 +2,9 @@
   color: var(--color-text-light);
 }
 
-.toolbar {
-  border-bottom: 1px solid var(--color-outline);
-}
-
 .toolbarSearch {
   width: 100%;
   max-width: 240px;
-  margin-right: -1px; /** collapse border */
 }
 
 .metricSelector {

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

@@ -5,19 +5,23 @@ import { SECTIONS, COMPONENT } from '@bundle-stats/utils';
 import { SortAction } from '../../types';
 import config from '../../config.json';
 import I18N from '../../i18n';
-import { Box } from '../../layout/box';
 import { MetricsDisplayType } from '../../constants';
+import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
 import { Button } from '../../ui/button';
+import { ControlGroup } from '../../ui/control-group';
 import { EmptySet } from '../../ui/empty-set';
 import { FileName } from '../../ui/file-name';
 import { Filters } from '../../ui/filters';
 import { InputSearch } from '../../ui/input-search';
 import { Tag } from '../../ui/tag';
+import { Table } from '../../ui/table';
 import { Toolbar } from '../../ui/toolbar';
 import { Tooltip } from '../../ui/tooltip';
 import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
+import { MetricsTableHeader } from '../metrics-table-header';
 import { MetricsTreemap } from '../metrics-treemap';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
@@ -44,7 +48,9 @@ const RowHeader = (props: RowHeaderProps) => {
   return (
     <CustomComponentLink
       section={SECTIONS.MODULES}
-      params={{ [COMPONENT.BUNDLE_MODULES]: { filters, search, entryId: row.key, moduleMetric } }}
+      params={{
+        [COMPONENT.BUNDLE_MODULES]: { filters, search, entryId: row.key, metric: moduleMetric },
+      }}
       className={css.name}
     >
       {row.duplicated && (
@@ -140,7 +146,7 @@ export const BundleModules = (props: BundleModulesProps) => {
         customComponentLink={CustomComponentLink}
       />
     ),
-    [jobs, chunks, CustomComponentLink, filters, search],
+    [jobs, chunks, CustomComponentLink, filters, search, moduleMetric],
   );
 
   const emptyMessage = useMemo(
@@ -165,7 +171,7 @@ export const BundleModules = (props: BundleModulesProps) => {
 
   return (
     <>
-      <div className={rootClassName}>
+      <Stack space="xsmall" as="section" className={rootClassName}>
         <Toolbar
           className={css.toolbar}
           renderActions={({ actionClassName }) => (
@@ -192,45 +198,57 @@ export const BundleModules = (props: BundleModulesProps) => {
             />
           </FlexStack>
         </Toolbar>
-        <Box padding={['xsmall', 'small']} className={css.metricSelector}>
-          <FlexStack space="xxsmall" as="nav">
-            <Button
-              outline
-              active={moduleMetric === ModuleMetric.SIZE}
-              size="small"
-              type="button"
-              onClick={() => setModuleMetric(ModuleMetric.SIZE)}
-            >
-              <Tooltip title="Size (excluding duplicate modules)">Module size</Tooltip>
-            </Button>
-            <Button
-              outline
-              active={moduleMetric === ModuleMetric.TOTAL_SIZE}
-              size="small"
-              type="button"
-              onClick={() => setModuleMetric(ModuleMetric.TOTAL_SIZE)}
-            >
-              <Tooltip title="Size (including duplicate modules)">Module total size</Tooltip>
-            </Button>
-          </FlexStack>
+        <Box outline as="main">
+          <Box padding={['xsmall', 'small']} className={css.metricSelector}>
+            <ControlGroup as="nav">
+              <Button
+                outline
+                active={moduleMetric === ModuleMetric.SIZE}
+                size="small"
+                type="button"
+                onClick={() => setModuleMetric(ModuleMetric.SIZE)}
+              >
+                <Tooltip title="Size (excluding duplicate modules)">Module size</Tooltip>
+              </Button>
+              <Button
+                outline
+                active={moduleMetric === ModuleMetric.TOTAL_SIZE}
+                size="small"
+                type="button"
+                onClick={() => setModuleMetric(ModuleMetric.TOTAL_SIZE)}
+              >
+                <Tooltip title="Size (including duplicate modules)">Module total size</Tooltip>
+              </Button>
+            </ControlGroup>
+          </Box>
+          {displayType === MetricsDisplayType.TABLE && (
+            <MetricsTable
+              className={css.table}
+              items={items}
+              runs={jobs}
+              renderRowHeader={renderRowHeader}
+              emptyMessage={emptyMessage}
+              showHeaderSum
+              title={metricsTableTitle}
+              sort={sort}
+              updateSort={updateSort}
+            />
+          )}
+          {displayType === MetricsDisplayType.TREEMAP && (
+            <>
+              <Table compact>
+                <MetricsTableHeader
+                  metricTitle={metricsTableTitle}
+                  showSum
+                  jobs={jobs}
+                  rows={items}
+                />
+              </Table>
+              <MetricsTreemap emptyMessage={emptyMessage} items={items} onItemClick={showEntryInfo} />
+            </>
+          )}
         </Box>
-        {displayType === MetricsDisplayType.TABLE && (
-          <MetricsTable
-            className={css.table}
-            items={items}
-            runs={jobs}
-            renderRowHeader={renderRowHeader}
-            emptyMessage={emptyMessage}
-            showHeaderSum
-            title={metricsTableTitle}
-            sort={sort}
-            updateSort={updateSort}
-          />
-        )}
-        {displayType === MetricsDisplayType.TREEMAP && (
-          <MetricsTreemap emptyMessage={emptyMessage} items={items} onItemClick={showEntryInfo} />
-        )}
-      </div>
+      </Stack>
       {entryItem && (
         <ModuleInfo
           className={css.moduleInfo}

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

@@ -6,7 +6,7 @@ import type { SortAction } from '../../types';
 import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
-import { useShowEntry } from '../../hooks/show-entry';
+import { useEntryInfo } from '../../hooks/entry-info';
 import { BundleModules as BaseComponent } from './bundle-modules';
 import {
   addRowFlags,
@@ -120,7 +120,7 @@ export const BundleModules = (props: BundleModulesProps) => {
     getCustomSort,
   });
 
-  const { hideEntryInfo, showEntryInfo } = useShowEntry({ setState });
+  const [hideEntryInfo, showEntryInfo] = useEntryInfo({ setState });
 
   return (
     <BaseComponent

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

@@ -5,14 +5,18 @@ import { COMPONENT, PACKAGE_FILTERS, PACKAGES_SEPARATOR, SECTIONS } from '@bundl
 
 import config from '../../config.json';
 import I18N from '../../i18n';
+import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
 import { InputSearch } from '../../ui/input-search';
 import { EmptySet } from '../../ui/empty-set';
 import { Filters } from '../../ui/filters';
 import { Tag } from '../../ui/tag';
+import { Table } from '../../ui/table';
 import { Toolbar } from '../../ui/toolbar';
 import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
+import { MetricsTableHeader } from '../metrics-table-header';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
 import { PackageInfo } from '../package-info';
@@ -189,7 +193,7 @@ export const BundlePackages = (props) => {
 
   return (
     <>
-      <section className={cx(css.root, className)}>
+      <Stack space="xsmall" as="section" className={cx(css.root, className)}>
         <Toolbar
           className={css.toolbar}
           renderActions={({ actionClassName }) => (
@@ -217,7 +221,7 @@ export const BundlePackages = (props) => {
             />
           </FlexStack>
         </Toolbar>
-        <main>
+        <Box outline as="main">
           {displayType === MetricsDisplayType.TABLE && (
             <MetricsTable
               runs={jobs}
@@ -231,10 +235,20 @@ export const BundlePackages = (props) => {
             />
           )}
           {displayType === MetricsDisplayType.TREEMAP && (
-            <MetricsTreemap emptyMessage={emptyMessage} items={items} onItemClick={showEntryInfo} />
+            <>
+              <Table compact>
+                <MetricsTableHeader
+                  metricTitle={metricsTableTitle}
+                  showSum
+                  jobs={jobs}
+                  rows={items}
+                />
+              </Table>
+              <MetricsTreemap emptyMessage={emptyMessage} items={items} onItemClick={showEntryInfo} />
+            </>
           )}
-        </main>
-      </section>
+        </Box>
+      </Stack>
       {entryItem && (
         <PackageInfo
           className={css.packageInfo}

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

@@ -2,14 +2,9 @@
   color: var(--color-text-light);
 }
 
-.toolbar {
-  border-bottom: 1px solid var(--color-outline);
-}
-
 .toolbarSearch {
   width: 100%;
   max-width: 240px;
-  margin-right: -1px; /** collapse border */
 }
 
 .hoverCard {

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

@@ -6,9 +6,14 @@ 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 { useShowEntry } from '../../hooks/show-entry';
+import { useEntryInfo } from '../../hooks/entry-info';
 import { BundlePackages as BundlePackagesComponent } from './bundle-packages';
-import { getDuplicatePackages, getAddRowDuplicateFlag, getRowFilter, getCustomSort } from './bundle-packages.utils';
+import {
+  getDuplicatePackages,
+  getAddRowDuplicateFlag,
+  getRowFilter,
+  getCustomSort,
+} from './bundle-packages.utils';
 
 export const BundlePackages = (props) => {
   const { jobs, search, filters, setState, sortBy, direction, ...restProps } = props;
@@ -55,7 +60,7 @@ export const BundlePackages = (props) => {
     getCustomSort,
   });
 
-  const { hideEntryInfo, showEntryInfo } = useShowEntry({ setState });
+  const [hideEntryInfo, showEntryInfo] = useEntryInfo({ setState });
 
   return (
     <BundlePackagesComponent

package/src/components/index.js

@@ -18,4 +18,3 @@ export { MetricsTableTitle } from './metrics-table-title';
 export { ModuleInfo } from './module-info';
 export { RunInfo, RunInfoProps } from './run-info';
 export { Summary } from './summary';
-export { TotalSizeTypeTitle } from './total-size-type-title';

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

@@ -24,10 +24,6 @@
   background: linear-gradient(90deg, transparent, var(--color-background));
 }
 
-.item + .item {
-  margin-left: var(--space-small);
-}
-
 .item:first-child {
   border-left: 0;
   padding-left: 0;