@bundle-stats/ui 4.2.3-beta.0 → 4.2.3-beta.1

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

@@ -1,89 +1,21 @@
-.toolbar {
-  border-bottom: 1px solid var(--color-outline);
-}
-
 .toolbarSearch {
   width: 100%;
   max-width: 240px;
-  margin-right: -1px; /** collapse border */
-}
-
-.assetName {}
-
-.notPredictive {
-  margin-right: var(--space-xxsmall);
-  display: inline-block;
-  width: var(--space-small);
-  height: var(--space-small);
-  vertical-align: middle;
-}
-
-.notPredictiveIcon {
-  color: var(--color-warning-dark);
-  vertical-align: top;
-}
-
-.assetNameTags {
-  display: inline;
-  margin-right: var(--space-xxxsmall);
-}
-
-.assetNameTags:empty {
-  display: none;
-}
-
-.assetNameTag {
-  vertical-align: middle;
-}
-
-.assetNameTag + .assetNameTag {
-  margin-left: 2px;
 }
 
-.assetNameTagEntry {
-  background: var(--color-info-light);
+.root .assetName:hover,
+.root .assetName:active,
+.root .assetName:focus {
+  text-decoration: none;
 }
 
-.assetNameTagEntry::before {
-  content: 'e';
-}
-
-.assetNameTagInitial {
-  background: var(--color-info-light);
-}
-
-.assetNameTagInitial::before {
-  content: 'i';
-}
-
-.assetNameTagChunk::before {
-  content: 'c';
-}
-
-.assetNameText {
-  display: inline;
-  vertical-align: middle;
-}
-
-/* Tooltip not predictive */
-.tooltipNotPredictive {
-  text-align: left;
-}
-
-.tooltipNotPredictiveText {
-  margin-bottom: var(--space-xxxsmall);
-}
-
-.tooltipNotPredictiveName {
-  display: block;
-  line-height: var(--line-height-heading);
+.root .assetName:hover .assetNameText,
+.root .assetName:active .assetNameText,
+.root .assetName:focus .assetNameText {
+  text-decoration: underline;
 }
 
 .search {
   margin: 0;
   width: 100%;
 }
-
-.assetInfo {
-  min-width: 280px;
-}

package/src/components/bundle-assets/bundle-assets.stories.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import {
+  ASSET_ENTRY_TYPE,
+  ASSET_FILE_TYPE,
+  ASSET_FILTERS,
+  FILE_TYPE_JS,
+  createJobs,
+} from '@bundle-stats/utils';
+import merge from 'lodash/merge';
+import set from 'lodash/set';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from 'storybook/actions';
+
+/* eslint-disable import/no-relative-packages */
+import baselineStats from '../../../../../fixtures/webpack-stats.baseline.json';
+import currentStats from '../../../../../fixtures/webpack-stats.current.json';
+/* eslint-enable import/no-relative-packages */
+import { getWrapperDecorator } from '../../stories';
+import { BundleAssets } from '.';
+
+const JOBS = createJobs([{ webpack: currentStats }, { webpack: baselineStats }]);
+const [currentJob, baselineJob] = JOBS;
+const setState = (params) => console.info(params);
+
+const meta: Meta<typeof BundleAssets> = {
+  title: 'Components/BundleAssets',
+  component: BundleAssets,
+  decorators: [getWrapperDecorator()],
+  args: {
+    setState: action('STATE'),
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BundleAssets>;
+
+export const Default: Story = {
+  args: {
+    jobs: [baselineJob],
+  },
+};
+
+export const MultipleJobs: Story = {
+  args: {
+    jobs: JOBS,
+  },
+};
+
+export const CustomFilters: Story = {
+  args: {
+    jobs: JOBS,
+    filters: {
+      [`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`]: true,
+      [`${ASSET_FILE_TYPE}.${FILE_TYPE_JS}`]: true,
+    },
+  },
+};
+
+export const EmptyBaseline: Story = {
+  args: {
+    jobs: createJobs([{ webpack: currentStats }, {}]),
+  },
+};
+
+export const NoAssets: Story = {
+  args: {
+    jobs: JOBS.map((job) => set(merge({}, job), 'metrics.webpack.assets', {})),
+  },
+};
+
+export const EmptyFilteredData: Story = {
+  args: {
+    jobs: [
+      set(merge({}, currentJob), 'metrics.webpack.assets', { 'main.js': { value: 100 } }),
+      set(merge({}, baselineJob), 'metrics.webpack.assets', { 'main.js': { value: 100 } }),
+    ],
+    search: 'vendors',
+  },
+};
+
+export const NotPredictive: Story = {
+  args: {
+    jobs: [
+      set(merge({}, currentJob), 'metrics.webpack.assets', {
+        'static/js/not-predictive.js': {
+          name: 'static/js/not-predictive.93191a1.js',
+          value: 2989,
+        },
+      }),
+      set(merge({}, baselineJob), 'metrics.webpack.assets', {
+        'static/js/not-predictive.js': {
+          name: 'static/js/not-predictive.93191a1.js',
+          value: 2988,
+        },
+      }),
+    ],
+  },
+};

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

@@ -0,0 +1,323 @@
+import type { ElementType, ReactNode } from 'react';
+import React, { ComponentProps, useCallback, useMemo, useState } from 'react';
+import cx from 'classnames';
+import escapeRegExp from 'lodash/escapeRegExp';
+import type { Job, ReportMetricRow, WebpackChunk } from '@bundle-stats/utils';
+import { COMPONENT, SECTIONS } from '@bundle-stats/utils';
+
+import type { ReportMetricAssetRow, SortAction } from '../../types';
+import config from '../../config.json';
+import I18N from '../../i18n';
+import { MetricsDisplayGroupBy, 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 { Dialog, useDialogState } from '../../ui/dialog';
+import { InputSearch } from '../../ui/input-search';
+import { Table } from '../../ui/table';
+import { Filters } from '../../ui/filters';
+import { EmptySet } from '../../ui/empty-set';
+import { Toolbar } from '../../ui/toolbar';
+import { AssetInfo } from '../asset-info';
+import { AssetName } from '../asset-name';
+import { ComponentLink } from '../component-link';
+import { MetricsTable } from '../metrics-table';
+import { MetricsTableExport } from '../metrics-table-export';
+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, getTreemapNodes, getTreemapNodesGroupedByPath } from '../metrics-treemap';
+import * as BUNDLE_ASSETS_I18N from './bundle-assets.i18n';
+import { getFilters } from './bundle-assets.utils';
+import css from './bundle-assets.module.css';
+
+const DISPLAY_TYPE_GROUPS = {
+  [MetricsDisplayType.TREEMAP]: [MetricsDisplayGroupBy.FOLDER],
+};
+
+interface ViewMetricsTreemapProps {
+  metricsTableTitle: ReactNode;
+  jobs: Array<Job>;
+  items: Array<ReportMetricAssetRow>;
+  displayType: { value: MetricsDisplayType; groupBy?: string };
+  emptyMessage: ReactNode;
+  showEntryInfo: (entryId: string) => void;
+  updateSearch: (search: string) => void;
+  search: string;
+}
+
+const ViewMetricsTreemap = (props: ViewMetricsTreemapProps) => {
+  const {
+    metricsTableTitle,
+    jobs,
+    items,
+    displayType,
+    emptyMessage,
+    showEntryInfo,
+    updateSearch,
+    search,
+  } = props;
+
+  // Get treenodes based on group
+  const treeNodes = useMemo(() => {
+    if (displayType.groupBy === 'folder') {
+      return getTreemapNodesGroupedByPath(items);
+    }
+
+    return getTreemapNodes(items);
+  }, [items, displayType.groupBy]);
+
+  // Search based on the group path on group title click
+  const onGroupClick = useCallback(
+    (groupPath: string) => {
+      // Clear seach when groupPath is emty (root)
+      if (groupPath === '') {
+        updateSearch('');
+        return;
+      }
+      // Search by group path
+      // 1. use `^` to match only the string beggining
+      // 2. add `/` suffix to exactly match the directory
+      const newSearch = `^${escapeRegExp(groupPath)}/`;
+
+      // Reset search when toggling the same groupPath
+      if (newSearch === search) {
+        updateSearch('');
+        return;
+      }
+
+      updateSearch(newSearch);
+    },
+    [updateSearch, search],
+  );
+
+  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}
+      />
+    </>
+  );
+};
+
+export interface BundleAssetsProps extends ComponentProps<typeof Stack> {
+  jobs: Array<Job>;
+  chunks: Array<WebpackChunk>;
+  items: Array<ReportMetricAssetRow>;
+  allItems: Array<ReportMetricAssetRow>;
+  filters: Record<string, boolean>;
+  updateFilters: (newFilters: Record<string, boolean>) => void;
+  resetFilters: () => void;
+  resetAllFilters: () => void;
+  totalRowCount?: number;
+  entryId?: string;
+  sort: SortAction;
+  updateSort: (params: SortAction) => void;
+  search: string;
+  updateSearch: (search: string) => void;
+  customComponentLink?: ElementType;
+  hideEntryInfo: () => void;
+  showEntryInfo: (entryId: string) => void;
+}
+
+export const BundleAssets = (props: BundleAssetsProps) => {
+  const {
+    className = '',
+    jobs,
+    chunks,
+    items,
+    allItems,
+    updateFilters,
+    resetFilters,
+    resetAllFilters,
+    totalRowCount = 0,
+    filters,
+    entryId = '',
+    sort,
+    updateSort,
+    search,
+    updateSearch,
+    customComponentLink: CustomComponentLink = ComponentLink,
+    hideEntryInfo,
+    showEntryInfo,
+  } = props;
+
+  const jobLabels = jobs?.map((job) => job?.label);
+
+  const [displayType, setDisplayType] = useMetricsDisplayType(DISPLAY_TYPE_GROUPS);
+
+  const filterFieldsData = useMemo(
+    () => getFilters({ compareMode: jobs?.length > 1, filters, chunks }),
+    [jobs, filters, chunks],
+  );
+
+  const metricsTableTitle = useMemo(
+    () => (
+      <MetricsTableTitle
+        title={I18N.ASSETS}
+        info={`${items.length}/${totalRowCount}`}
+        popoverInfo={I18N.ASSETS_INFO}
+        popoverHref={config.documentation.assets}
+      />
+    ),
+    [items, totalRowCount],
+  );
+
+  const EntryComponentLink = useCallback(
+    ({
+      entryId: assetEntryId,
+      ...assetNameRestProps
+    }: { entryId: string } & ComponentProps<typeof CustomComponentLink>) => (
+      <CustomComponentLink
+        section={SECTIONS.ASSETS}
+        params={{
+          [COMPONENT.BUNDLE_ASSETS]: {
+            filters,
+            search,
+            entryId: assetEntryId,
+            sortBy: sort.field,
+            direction: sort.direction,
+          },
+        }}
+        {...assetNameRestProps}
+      />
+    ),
+    [CustomComponentLink, filters, search, sort],
+  );
+
+  const renderRowHeader = useCallback(
+    (row: ReportMetricRow) => (
+      <AssetName
+        row={row as ReportMetricAssetRow}
+        EntryComponentLink={EntryComponentLink}
+        className={css.assetName}
+      />
+    ),
+    [EntryComponentLink],
+  );
+
+  const emptyMessage = useMemo(
+    () => (
+      <EmptySet
+        resources="assets"
+        filtered={totalRowCount !== 0}
+        handleResetFilters={resetFilters}
+        handleViewAll={resetAllFilters}
+      />
+    ),
+    [totalRowCount, resetFilters, resetAllFilters],
+  );
+
+  const entryItem = useMemo(() => {
+    if (!entryId) {
+      return null;
+    }
+
+    return allItems.find(({ key }) => key === entryId);
+  }, [allItems, entryId]);
+
+  const exportDialog = useDialogState();
+  const [exportSourceType, setExportSourceType] = useState<string>();
+
+  const handleExportClick = useCallback(
+    (sourceType: string) => {
+      setExportSourceType(sourceType);
+      exportDialog.toggle();
+    },
+    [exportDialog, setExportSourceType],
+  );
+
+  return (
+    <>
+      <Stack space="xsmall" as="section" className={cx(css.root, className)}>
+        <Toolbar
+          renderActions={({ actionClassName }) => (
+            <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
+              <MetricsDisplaySelector
+                value={displayType.value}
+                groupBy={displayType.groupBy}
+                groups={DISPLAY_TYPE_GROUPS}
+                onSelect={setDisplayType}
+              />
+              <MetricsTableOptions
+                onViewAllClick={resetAllFilters}
+                onResetClick={resetFilters}
+                onExportClick={handleExportClick}
+              />
+            </FlexStack>
+          )}
+        >
+          <FlexStack space="xxsmall">
+            <InputSearch
+              className={css.toolbarSearch}
+              placeholder={BUNDLE_ASSETS_I18N.SEARCH_PLACEHOLDER}
+              defaultValue={search}
+              onChange={updateSearch}
+            />
+            <Filters
+              className={css.toolbarFilters}
+              filters={filterFieldsData}
+              onChange={updateFilters}
+            />
+          </FlexStack>
+        </Toolbar>
+        <Box outline as="main">
+          {displayType.value === MetricsDisplayType.TABLE && (
+            <MetricsTable
+              runs={jobs}
+              items={items}
+              renderRowHeader={renderRowHeader}
+              emptyMessage={emptyMessage}
+              showHeaderSum
+              title={metricsTableTitle}
+              sort={sort}
+              updateSort={updateSort}
+            />
+          )}
+          {displayType.value === MetricsDisplayType.TREEMAP && (
+            <ViewMetricsTreemap
+              jobs={jobs}
+              items={items}
+              metricsTableTitle={metricsTableTitle}
+              displayType={displayType}
+              emptyMessage={emptyMessage}
+              showEntryInfo={showEntryInfo}
+              updateSearch={updateSearch}
+              search={search}
+            />
+          )}
+        </Box>
+      </Stack>
+
+      {entryItem && (
+        <AssetInfo
+          className={css.assetInfo}
+          item={entryItem}
+          labels={jobLabels}
+          chunks={chunks}
+          customComponentLink={CustomComponentLink}
+          onClose={hideEntryInfo}
+        />
+      )}
+
+      <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
+        {exportDialog.open && (
+          <MetricsTableExport
+            items={items}
+            initialSourceType={exportSourceType}
+            download="bundle-stats--assets"
+          />
+        )}
+      </Dialog>
+    </>
+  );
+};