@bundle-stats/ui 4.13.0-beta.8 → 4.13.0-rc.0

package/src/assets/icons.svg.jsx

@@ -9,7 +9,6 @@ export const SvgIcons = (props) => (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="feather feather-arrow-down"
       id="arrow"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -21,7 +20,6 @@ export const SvgIcons = (props) => (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="feather feather-arrow-right-circle"
       viewBox="0 0 24 24"
       id="arrow-right-circle"
       xmlns="http://www.w3.org/2000/svg"
@@ -29,13 +27,24 @@ export const SvgIcons = (props) => (
       <circle cx="12" cy="12" r="10" />
       <path d="m12 16 4-4-4-4M8 12h8" />
     </symbol>
+    <symbol
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      id="check"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M20 6 9 17l-5-5" />
+    </symbol>
     <symbol
       fill="none"
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="lucide lucide-chevron-down"
       viewBox="0 0 24 24"
       id="chevron-down"
       xmlns="http://www.w3.org/2000/svg"
@@ -48,7 +57,6 @@ export const SvgIcons = (props) => (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="lucide lucide-chevron-up"
       viewBox="0 0 24 24"
       id="chevron-up"
       xmlns="http://www.w3.org/2000/svg"
@@ -62,7 +70,6 @@ export const SvgIcons = (props) => (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="feather feather-clock"
       id="clock"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -75,7 +82,6 @@ export const SvgIcons = (props) => (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="feather feather-x-circle"
       viewBox="0 0 24 24"
       id="close"
       xmlns="http://www.w3.org/2000/svg"
@@ -90,7 +96,6 @@ export const SvgIcons = (props) => (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="feather feather-git-commit"
       id="commit"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -116,7 +121,6 @@ export const SvgIcons = (props) => (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="feather feather-external-link"
       viewBox="0 0 24 24"
       id="external-link"
       xmlns="http://www.w3.org/2000/svg"
@@ -130,7 +134,6 @@ export const SvgIcons = (props) => (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="feather feather-bar-chart"
       id="filter"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -151,7 +154,6 @@ export const SvgIcons = (props) => (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="feather feather-help-circle"
       id="help"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -178,7 +180,6 @@ export const SvgIcons = (props) => (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="feather feather-menu"
       id="menu"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -233,7 +234,6 @@ export const SvgIcons = (props) => (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="feather feather-alert-triangle"
       id="warning"
       xmlns="http://www.w3.org/2000/svg"
     >

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

@@ -15,7 +15,9 @@ 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';
@@ -33,7 +35,7 @@ import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
 import { MetricsTableHeader } from '../metrics-table-header';
-import { MetricsTreemap } from '../metrics-treemap';
+import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '../metrics-treemap';
 import { SEARCH_PLACEHOLDER } from './bundle-assets.i18n';
 import css from './bundle-assets.module.css';
 
@@ -41,6 +43,10 @@ const RUN_TITLE_CURRENT = 'Current';
 const RUN_TITLE_BASELINE = 'Baseline';
 const RUNS_LABELS = [RUN_TITLE_CURRENT, RUN_TITLE_BASELINE];
 
+const DISPLAY_TYPE_GROUPS = {
+  [MetricsDisplayType.TREEMAP]: ['folder'],
+};
+
 const getFileTypeFilters = (filters) =>
   Object.entries(FILE_TYPE_LABELS)
     .map(([key, label]) => ({
@@ -161,6 +167,60 @@ RowHeader.defaultProps = {
   chunks: [],
 };
 
+const ViewMetricsTreemap = (props) => {
+  const { metricsTableTitle, jobs, items, displayType, emptyMessage, showEntryInfo, updateSearch } = props;
+
+  const treeNodes = useMemo(() => {
+    if (displayType.groupBy === 'folder') {
+      return getTreemapNodesGroupedByPath(items);
+    }
+
+    return getTreemapNodes(items);
+  }, [items, displayType.groupBy]);
+
+  const onGroupClick = useCallback(
+    (groupPath) => {
+      // Search by group path
+      // 1. use `^` to match only the string beggining
+      // 2. add `/` suffix to match only exact directories
+      // 3. if the group path is empty(root), clear search
+      if (groupPath) {
+        updateSearch(`^${groupPath}/`);
+      } else {
+        updateSearch('');
+      }
+    },
+    [updateSearch],
+  );
+
+  return (
+    <>
+      <Table compact>
+        <MetricsTableHeader metricTitle={metricsTableTitle} showSum jobs={jobs} rows={items} />
+      </Table>
+      <MetricsTreemap
+        treeNodes={treeNodes}
+        nested={Boolean(displayType.groupBy)}
+        emptyMessage={emptyMessage}
+        onItemClick={showEntryInfo}
+        onGroupClick={onGroupClick}
+      />
+    </>
+  );
+};
+
+ViewMetricsTreemap.propTypes = {
+  jobs: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
+  items: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
+  metricsTableTitle: PropTypes.node.isRequired,
+  displayType: PropTypes.shape({
+    groupBy: PropTypes.string,
+  }).isRequired,
+  emptyMessage: PropTypes.node.isRequired,
+  showEntryInfo: PropTypes.func.isRequired,
+  updateSearch: PropTypes.func.isRequired,
+};
+
 export const BundleAssets = (props) => {
   const {
     className,
@@ -185,7 +245,7 @@ export const BundleAssets = (props) => {
 
   const jobLabels = jobs?.map((job) => job?.label);
 
-  const [displayType, setDisplayType] = useMetricsDisplayType();
+  const [displayType, setDisplayType] = useMetricsDisplayType(DISPLAY_TYPE_GROUPS);
 
   const dropdownFilters = useMemo(
     () => getFilters({ compareMode: jobs?.length > 1, filters }),
@@ -232,12 +292,16 @@ 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} />
+              <MetricsDisplaySelector
+                value={displayType.value}
+                groupBy={displayType.groupBy}
+                groups={DISPLAY_TYPE_GROUPS}
+                onSelect={setDisplayType}
+              />
               <MetricsTableOptions
                 handleViewAll={resetAllFilters}
                 handleResetFilters={resetFilters}
@@ -260,8 +324,8 @@ export const BundleAssets = (props) => {
             />
           </FlexStack>
         </Toolbar>
-        <main>
-          {displayType === MetricsDisplayType.TABLE && (
+        <Box outline as="main">
+          {displayType.value === MetricsDisplayType.TABLE && (
             <MetricsTable
               runs={jobs}
               items={items}
@@ -273,25 +337,18 @@ export const BundleAssets = (props) => {
               updateSort={updateSort}
             />
           )}
-          {displayType === MetricsDisplayType.TREEMAP && (
-            <>
-              <Table compact>
-                <MetricsTableHeader
-                  metricTitle={metricsTableTitle}
-                  showSum
-                  jobs={jobs}
-                  rows={items}
-                />
-              </Table>
-              <MetricsTreemap
-                emptyMessage={emptyMessage}
-                items={items}
-                onItemClick={showEntryInfo}
-              />
-            </>
+          {displayType.value === MetricsDisplayType.TREEMAP && (
+            <ViewMetricsTreemap
+              jobs={jobs}
+              items={items}
+              displayType={displayType}
+              emptyMessage={emptyMessage}
+              showEntryInfo={showEntryInfo}
+              updateSearch={updateSearch}
+            />
           )}
-        </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-totals/bundle-assets-totals.jsx

@@ -13,13 +13,22 @@ import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
 import I18N from '../../i18n';
 import { Toolbar } from '../../ui/toolbar';
 import { Table } from '../../ui/table';
+import { Box } from '../../layout/box';
+import { Stack } from '../../layout/stack';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
 import { MetricsTable } from '../metrics-table';
 import { MetricsTableTitle } from '../metrics-table-title';
 import { MetricsTableHeader } from '../metrics-table-header';
-import { MetricsTreemap } from '../metrics-treemap';
+import { MetricsTreemap, getTreemapNodes } from '../metrics-treemap';
 import { ComponentLink } from '../component-link';
-import css from './bundle-assets-totals.module.css';
+
+const metricsTableTitle = (
+  <MetricsTableTitle
+    title={I18N.ASSET_TOTALS}
+    popoverInfo={I18N.ASSET_TOTALS_INFO}
+    popoverHref={config.documentation.assets}
+  />
+);
 
 export const BundleAssetsTotals = ({
   className,
@@ -31,18 +40,21 @@ export const BundleAssetsTotals = ({
   const [displayType, setDisplayType] = useMetricsDisplayType();
   const history = useHistory();
 
-  const items = webpack.compareBySection.sizes(jobs);
+  const items = useMemo(() => webpack.compareBySection.sizes(jobs), [jobs]);
 
-  const renderRowHeader = (item) => {
-    const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
-    const { section, title, params } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
+  const renderRowHeader = useCallback(
+    (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}>
-        {item.label}
-      </CustomComponentLink>
-    );
-  };
+      return (
+        <CustomComponentLink section={section} title={title} params={params}>
+          {item.label}
+        </CustomComponentLink>
+      );
+    },
+    [CustomComponentLink],
+  );
 
   const handleMetricsTreemapItemClick = useCallback(
     (entryId) => {
@@ -56,47 +68,42 @@ export const BundleAssetsTotals = ({
     [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} />
+          <MetricsDisplaySelector onSelect={setDisplayType} value={displayType.value} />
         )}
       />
-      {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
+      <Box outline as="main">
+        {displayType.value === MetricsDisplayType.TABLE && (
+          <MetricsTable
+            title={metricsTableTitle}
+            runs={jobs}
             items={items}
-            onItemClick={onTreemapItemClick || handleMetricsTreemapItemClick}
+            renderRowHeader={renderRowHeader}
+            showHeaderSum
+            {...restProps}
           />
-        </>
-      )}
-    </div>
+        )}
+        {displayType.value === MetricsDisplayType.TREEMAP && (
+          <>
+            <Table compact>
+              <MetricsTableHeader
+                metricTitle={metricsTableTitle}
+                showSum
+                jobs={jobs}
+                rows={items}
+              />
+            </Table>
+            <MetricsTreemap
+              treeNodes={getTreemapNodes(items)}
+              onItemClick={onTreemapItemClick || handleMetricsTreemapItemClick}
+            />
+          </>
+        )}
+      </Box>
+    </Stack>
   );
 };
 

package/src/components/bundle-modules/bundle-modules.i18n.ts

@@ -1,4 +1,4 @@
-export const SEARCH = 'Search by module name';
+export const SEARCH = 'Search by module path';
 export const CHANGED = 'Changed';
 export const DUPLICATE = 'Duplicate';
 export const CHUNK = 'Chunk';

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,10 +5,12 @@ 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';
@@ -20,7 +22,7 @@ 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 { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '../metrics-treemap';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
 import { MetricsTableTitle } from '../metrics-table-title';
@@ -32,6 +34,10 @@ import * as I18N_MODULES from './bundle-modules.i18n';
 import css from './bundle-modules.module.css';
 import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
 
+const DISPLAY_TYPE_GROUPS = {
+  [MetricsDisplayType.TREEMAP]: ['folder'],
+};
+
 interface RowHeaderProps {
   row: ReportMetricModuleRow;
   filters?: any;
@@ -59,6 +65,59 @@ const RowHeader = (props: RowHeaderProps) => {
   );
 };
 
+interface ViewMetricsTreemapProps {
+  metricsTableTitle: React.ReactNode;
+  jobs: Array<any>;
+  items: Array<any>;
+  displayType: { value: MetricsDisplayType; groupBy?: string };
+  emptyMessage: React.ReactNode;
+  showEntryInfo: React.ComponentProps<typeof MetricsTreemap>['onItemClick'];
+  updateSearch: (newSerarch: string) => void;
+}
+
+const ViewMetricsTreemap = (props: ViewMetricsTreemapProps) => {
+  const { metricsTableTitle, jobs, items, displayType, emptyMessage, showEntryInfo, updateSearch } =
+    props;
+
+  const treeNodes = useMemo(() => {
+    if (displayType.groupBy === 'folder') {
+      return getTreemapNodesGroupedByPath(items);
+    }
+
+    return getTreemapNodes(items);
+  }, [items, displayType]);
+
+  const onGroupClick = useCallback(
+    (groupPath: string) => {
+      // Search by group path
+      // 1. use `^` to match only the string beggining
+      // 2. add `/` suffix to match only exact directories
+      // 3. if the group path is empty(root), clear search
+      if (groupPath) {
+        updateSearch(`^${groupPath}/`);
+      } else {
+        updateSearch('');
+      }
+    },
+    [updateSearch],
+  );
+
+  return (
+    <>
+      <Table compact>
+        <MetricsTableHeader metricTitle={metricsTableTitle} showSum jobs={jobs} rows={items} />
+      </Table>
+      <MetricsTreemap
+        treeNodes={treeNodes}
+        nested={Boolean(displayType.groupBy)}
+        emptyMessage={emptyMessage}
+        onItemClick={showEntryInfo}
+        onGroupClick={onGroupClick}
+      />
+    </>
+  );
+};
+
 interface BundleModulesProps extends React.ComponentProps<'div'> {
   jobs?: Array<Job>;
   items?: Array<ReportMetricModuleRow>;
@@ -115,7 +174,7 @@ export const BundleModules = (props: BundleModulesProps) => {
   const rootClassName = cx(css.root, className);
   const jobLabels = jobs?.map((job) => job?.label);
 
-  const [displayType, setDisplayType] = useMetricsDisplayType();
+  const [displayType, setDisplayType] = useMetricsDisplayType(DISPLAY_TYPE_GROUPS);
 
   const filterFieldsData = useMemo(
     () => generateFilterFieldsData({ filters, chunks, compareMode: jobs.length > 1 }),
@@ -169,12 +228,17 @@ export const BundleModules = (props: BundleModulesProps) => {
 
   return (
     <>
-      <div className={rootClassName}>
+      <Stack space="xsmall" as="section" className={rootClassName}>
         <Toolbar
           className={css.toolbar}
           renderActions={({ actionClassName }) => (
             <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
-              <MetricsDisplaySelector onSelect={setDisplayType} value={displayType} />
+              <MetricsDisplaySelector
+                onSelect={setDisplayType}
+                value={displayType.value}
+                groupBy={displayType.groupBy}
+                groups={DISPLAY_TYPE_GROUPS}
+              />
               <MetricsTableOptions
                 handleViewAll={resetAllFilters}
                 handleResetFilters={resetFilters}
@@ -196,55 +260,55 @@ 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.value === MetricsDisplayType.TABLE && (
+            <MetricsTable
+              className={css.table}
+              items={items}
+              runs={jobs}
+              renderRowHeader={renderRowHeader}
+              emptyMessage={emptyMessage}
+              showHeaderSum
+              title={metricsTableTitle}
+              sort={sort}
+              updateSort={updateSort}
+            />
+          )}
+          {displayType.value === MetricsDisplayType.TREEMAP && (
+            <ViewMetricsTreemap
+              metricsTableTitle={metricsTableTitle}
+              jobs={jobs}
+              items={items}
+              displayType={displayType}
+              emptyMessage={emptyMessage}
+              showEntryInfo={showEntryInfo}
+              updateSearch={updateSearch}
+            />
+          )}
         </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} />
-          </>
-        )}
-      </div>
+      </Stack>
       {entryItem && (
         <ModuleInfo
           className={css.moduleInfo}