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

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

@@ -1,55 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { getBundleAssetsFileTypeComponentLink } from '@bundle-stats/utils';
-import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
-
-import { ASSETS_SIZES_FILE_TYPE_MAP } from '../../constants';
-import { MetricsTable } from '../metrics-table';
-import { ComponentLink } from '../component-link';
-
-export const BundleAssetsTotalsTable = ({
-  className,
-  jobs,
-  customComponentLink: CustomComponentLink,
-  ...restProps
-}) => {
-  const items = webpack.compareBySection.sizes(jobs);
-
-  const renderRowHeader = (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 (
-    <MetricsTable
-      className={className}
-      runs={jobs}
-      items={items}
-      renderRowHeader={renderRowHeader}
-      showHeaderSum
-      {...restProps}
-    />
-  );
-};
-
-BundleAssetsTotalsTable.defaultProps = {
-  className: '',
-  jobs: [],
-  customComponentLink: ComponentLink,
-};
-
-BundleAssetsTotalsTable.propTypes = {
-  /** Addopted child class name */
-  className: PropTypes.string,
-
-  /** Jobs data */
-  jobs: PropTypes.array, // eslint-disable-line react/forbid-prop-types
-
-  customComponentLink: PropTypes.elementType,
-};

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

@@ -1,3 +0,0 @@
-.title {
-  color: var(--color-text-light);
-}

package/src/components/bundle-assets-totals-table/index.js

@@ -1 +0,0 @@
-export * from './bundle-assets-totals-table';

package/src/components/bundle-modules/bundle-modules.constants.js

@@ -1,18 +0,0 @@
-export const SORT_BY_NAME = 'name';
-export const SORT_BY_SIZE = 'size';
-export const SORT_BY_DELTA = 'delta';
-
-export const SORT_BY = {
-  [SORT_BY_NAME]: {
-    label: 'Name',
-    defaultDirection: 'asc',
-  },
-  [SORT_BY_DELTA]: {
-    label: 'Delta',
-    defaultDirection: 'desc',
-  },
-  [SORT_BY_SIZE]: {
-    label: 'Size',
-    defaultDirection: 'desc',
-  },
-};

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

@@ -1,303 +0,0 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import isEmpty from 'lodash/isEmpty';
-import get from 'lodash/get';
-import {
-  FILE_TYPE_LABELS,
-  MODULE_SOURCE_FILE_TYPES,
-  MODULE_SOURCE_TYPE,
-  MODULE_CHUNK,
-  MODULE_FILTERS,
-  MODULE_FILE_TYPE,
-} from '@bundle-stats/utils';
-
-import config from '../../config.json';
-import I18N from '../../i18n';
-import { ComponentLink } from '../component-link';
-import { FlexStack } from '../../layout/flex-stack';
-import { EmptySet } from '../../ui/empty-set';
-import { FileName } from '../../ui/file-name';
-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 { MetricsTable } from '../metrics-table';
-import { MetricsTableSearch } from '../metrics-table-search';
-import { MetricsTableOptions } from '../metrics-table-options';
-import { MetricsTableTitle } from '../metrics-table-title';
-import { ModuleInfo } from '../module-info';
-import css from './bundle-modules.module.css';
-
-const getFilters = ({ filters, compareMode, chunks }) => ({
-    [MODULE_FILTERS.CHANGED]: {
-      label: 'Changed',
-      defaultValue: filters.changed,
-      disabled: !compareMode,
-    },
-    [MODULE_FILTERS.DUPLICATED]: {
-      label: 'Duplicate',
-      defaultValue: filters[MODULE_FILTERS.DUPLICATED],
-    },
-    [MODULE_SOURCE_TYPE]: {
-      label: 'Source',
-      [MODULE_FILTERS.FIRST_PARTY]: {
-        label: 'First party',
-        defaultValue: get(filters, `${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`, true),
-      },
-      [MODULE_FILTERS.THIRD_PARTY]: {
-        label: 'Third party',
-        defaultValue: get(filters, `${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`, true),
-      },
-    },
-
-    // When chunks data available, list available chunks as filters
-    ...(!isEmpty(chunks) && {
-      [MODULE_CHUNK]: {
-        label: 'Chunk',
-        ...chunks.reduce(
-          (chunkFilters, { id, name }) => ({
-            ...chunkFilters,
-            [id]: {
-              label: name,
-              defaultValue: get(filters, `${MODULE_CHUNK}.${id}`, true),
-            },
-          }),
-          {},
-        ),
-      },
-    }),
-
-    // Module source types
-    [MODULE_FILE_TYPE]: {
-      label: 'File type',
-      ...MODULE_SOURCE_FILE_TYPES.reduce(
-        (agg, fileType) => ({
-          ...agg,
-          [fileType]: {
-            label: FILE_TYPE_LABELS[fileType],
-            defaultValue: get(filters, `${MODULE_FILE_TYPE}.${fileType}`, true),
-          },
-        }),
-        {},
-      ),
-    },
-})
-
-const RowHeader = ({ row, chunks, labels, CustomComponentLink }) => {
-  const chunkIds = chunks?.map(({ id }) => id);
-
-  const [showHoverCard, setHoverCard] = useState(false);
-  const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
-  const content = useMemo(
-    () => (
-      <span className={css.name}>
-        {row.duplicated && (
-          <Tag className={css.nameTagDuplicated} size="small" kind={Tag.KINDS.DANGER} />
-        )}
-        <FileName className={css.nameText} name={row.label} />
-      </span>
-    ),
-    [row],
-  );
-
-  if (!showHoverCard) {
-    return <div onMouseEnter={handleOnMouseEnter}>{content}</div>;
-  }
-
-  return (
-    <HoverCard label={content}>
-      <ModuleInfo
-        className={css.namePopover}
-        item={row}
-        chunks={chunks}
-        chunkIds={chunkIds}
-        labels={labels}
-        customComponentLink={CustomComponentLink}
-      />
-    </HoverCard>
-  );
-};
-
-RowHeader.propTypes = {
-  row: PropTypes.shape({
-    label: PropTypes.string,
-    duplicated: PropTypes.bool,
-  }).isRequired,
-  chunks: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      name: PropTypes.string,
-    }),
-  ),
-  labels: PropTypes.arrayOf(PropTypes.string).isRequired,
-  CustomComponentLink: PropTypes.elementType.isRequired,
-};
-
-RowHeader.defaultProps = {
-  chunks: [],
-};
-
-export const BundleModules = ({
-  className,
-  jobs,
-  items,
-  chunks,
-  totalRowCount,
-  updateFilters,
-  resetFilters,
-  resetAllFilters,
-  filters,
-  sortFields,
-  sort,
-  updateSort,
-  search,
-  updateSearch,
-  hasActiveFilters,
-  customComponentLink: CustomComponentLink,
-}) => {
-  const rootClassName = cx(css.root, className);
-
-  const dropdownFilters = useMemo(
-    () => getFilters({ filters, chunks, compareMode: jobs.length > 1 }),
-    [jobs, filters, chunks]
-  );
-
-  const metricsTableTitle = useMemo(() => (
-    <MetricsTableTitle
-      title={I18N.MODULES}
-      info={`${items.length}/${totalRowCount}`}
-      popoverInfo={I18N.MODULES_INFO}
-      popoverHref={config.documentation.modules}
-    />
-  ), [items, totalRowCount]);
-
-  const renderRowHeader = useCallback(
-    (row) => (
-      <RowHeader
-        row={row}
-        chunks={chunks}
-        labels={jobs?.map(({ label }) => label)}
-        CustomComponentLink={CustomComponentLink}
-      />
-    ),
-    [jobs, chunks, CustomComponentLink],
-  );
-
-  const emptyMessage = useMemo(() => (
-    <EmptySet
-      resources="modules"
-      filtered={totalRowCount !== 0}
-      handleResetFilters={resetFilters}
-      handleViewAll={resetAllFilters}
-    />
-  ), [totalRowCount, resetFilters, resetAllFilters]);
-
-  return (
-    <div className={rootClassName}>
-      <Toolbar
-        className={css.toolbar}
-        renderActions={({ actionClassName }) => (
-          <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
-            <SortDropdown
-              className={css.tableDropdown}
-              fields={sortFields}
-              onChange={updateSort}
-              {...sort}
-            />
-            <MetricsTableOptions
-              handleViewAll={resetAllFilters}
-              handleResetFilters={resetFilters}
-            />
-          </FlexStack>
-        )}
-      >
-        <FlexStack space="xxsmall">
-          <MetricsTableSearch
-            className={css.toolbarSearch}
-            search={search}
-            updateSearch={updateSearch}
-            placeholder="Search by name"
-          />
-          <Filters
-            className={css.tableDropdown}
-            filters={dropdownFilters}
-            onChange={updateFilters}
-            hasActiveFilters={hasActiveFilters}
-          />
-        </FlexStack>
-      </Toolbar>
-
-      <MetricsTable
-        className={css.table}
-        items={items}
-        runs={jobs}
-        renderRowHeader={renderRowHeader}
-        emptyMessage={emptyMessage}
-        showHeaderSum
-        title={metricsTableTitle}
-      />
-    </div>
-  );
-};
-
-BundleModules.defaultProps = {
-  className: '',
-  items: [],
-  jobs: [],
-  totalRowCount: 0,
-  hasActiveFilters: false,
-  customComponentLink: ComponentLink,
-};
-
-BundleModules.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-
-  /** Rows data */
-  items: PropTypes.array, // eslint-disable-line react/forbid-prop-types
-
-  /** Jobs data */
-  jobs: PropTypes.array, // eslint-disable-line react/forbid-prop-types
-
-  /** Chunks data */
-  chunks: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      name: PropTypes.string,
-    }),
-  ).isRequired,
-
-  /** total row count */
-  totalRowCount: PropTypes.number,
-
-  /** Update filters handler */
-  updateFilters: PropTypes.func.isRequired,
-
-  /** Reset filters handler */
-  resetFilters: PropTypes.func.isRequired,
-  resetAllFilters: PropTypes.func.isRequired,
-
-  /** Filters data */
-  filters: PropTypes.shape({
-    changed: PropTypes.bool,
-  }).isRequired,
-
-  hasActiveFilters: PropTypes.bool,
-
-  sortFields: PropTypes.shape({
-    [PropTypes.string]: PropTypes.shape({
-      label: PropTypes.string,
-      defaultDirection: PropTypes.bool,
-    }),
-  }).isRequired,
-  sort: PropTypes.shape({
-    sortBy: PropTypes.string,
-    direction: PropTypes.string,
-  }).isRequired,
-  updateSort: PropTypes.func.isRequired,
-  search: PropTypes.string.isRequired,
-  updateSearch: PropTypes.func.isRequired,
-  customComponentLink: PropTypes.elementType,
-};

package/src/components/bundle-modules/bundle-modules.utils.js

@@ -1,119 +0,0 @@
-import { useMemo } from 'react';
-import intersection from 'lodash/intersection';
-import merge from 'lodash/merge';
-import get from 'lodash/get';
-import { MODULE_PATH_PACKAGES } from '@bundle-stats/utils/lib-esm/webpack';
-import {
-  MODULE_CHUNK,
-  MODULE_FILTERS,
-  MODULE_FILE_TYPE,
-  MODULE_SOURCE_TYPE,
-  getModuleSourceFileType,
-} from '@bundle-stats/utils';
-
-import { SORT_BY_NAME, SORT_BY_SIZE, SORT_BY_DELTA } from './bundle-modules.constants';
-
-export const addRowSourceFlag = (row) => {
-  const { key, runs } = row;
-
-  // @NOTE Assign instead destructuring for perf reasons
-  // eslint-disable-next-line no-param-reassign
-  row.thirdParty = Boolean(key.match(MODULE_PATH_PACKAGES));
-  // eslint-disable-next-line no-param-reassign
-  row.duplicated = Boolean(runs.find((run) => run?.duplicated === true));
-
-  return row;
-};
-
-export const getCustomSort = (sortBy) => (item) => {
-  if (sortBy === SORT_BY_NAME) {
-    return item.key;
-  }
-
-  if (sortBy === SORT_BY_SIZE) {
-    return item?.runs?.[0]?.value || 0;
-  }
-
-  if (sortBy === SORT_BY_DELTA) {
-    return item?.runs?.[0]?.delta ? Math.abs(item.runs[0].delta) : 0;
-  }
-
-  return [!item.changed, item.key];
-};
-
-export const getRowFilter = (filters) => (row) => {
-  // Skip not changed rows
-  if (filters[MODULE_FILTERS.CHANGED] && !row.changed) {
-    return false;
-  }
-
-  // Skip not duplicated rows
-  if (filters[MODULE_FILTERS.DUPLICATED] && !row.duplicated) {
-    return false;
-  }
-
-  // Skip not matching source type
-  if (
-    !(
-      (filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`] &&
-        row.thirdParty === false) ||
-      (filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`] && row.thirdParty === true)
-    )
-  ) {
-    return false;
-  }
-
-  // Skip not matching source file types
-  const fileType = getModuleSourceFileType(row.key);
-  if (!filters[`${MODULE_FILE_TYPE}.${fileType}`]) {
-    return false;
-  }
-
-  return true;
-};
-
-export const useModuleFilterByChunk = ({ jobs, filters, chunkIds }) => {
-  const filteredJobs = useMemo(() => {
-    // List of chunkIds with filter value set to `true`
-    const includedChunkIds = chunkIds.reduce((agg, chunkId) => {
-      if (get(filters, `${MODULE_CHUNK}.${chunkId}`)) {
-        return [...agg, chunkId];
-      }
-
-      return agg;
-    }, []);
-
-    // If all the filters are included, return jobs as they are
-    if (includedChunkIds.length === chunkIds.length) {
-      return jobs;
-    }
-
-    const jobsWithFilteredData = jobs.map((job) => {
-      const modules = job?.metrics?.webpack?.modules;
-
-      if (!modules) {
-        return job;
-      }
-
-      const filteredModules = Object.entries(modules).reduce((agg, [moduleId, moduleEntry]) => {
-        const match = intersection(moduleEntry.chunkIds, includedChunkIds);
-
-        if (match.length > 0) {
-          agg[moduleId] = moduleEntry; // eslint-disable-line no-param-reassign
-        }
-
-        return agg;
-      }, {});
-
-      // Copy job data into a new object to prevent mutations of the original data
-      const newJob = merge({}, job);
-      newJob.metrics.webpack.modules = filteredModules;
-
-      return newJob;
-    });
-
-    return jobsWithFilteredData;
-  }, [jobs, filters, chunkIds]);
-
-  return filteredJobs;
-};

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

@@ -1,123 +0,0 @@
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import uniqBy from 'lodash/uniqBy';
-import {
-  MODULE_FILTERS,
-  getModuleChunkFilters,
-  getModuleSourceTypeFilters,
-  getModuleFileTypeFilters,
-} from '@bundle-stats/utils';
-import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
-
-import { useRowsFilter } from '../../hooks/rows-filter';
-import { useRowsSort } from '../../hooks/rows-sort';
-import { useSearchParams } from '../../hooks/search-params';
-import { BundleModules as BundleModulesComponent } from './bundle-modules';
-import {
-  addRowSourceFlag,
-  getRowFilter,
-  getCustomSort,
-  useModuleFilterByChunk,
-} from './bundle-modules.utils';
-import { SORT_BY } from './bundle-modules.constants';
-
-export const BundleModules = (props) => {
-  const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
-
-  const { chunks, chunkIds } = useMemo(
-    () => {
-      const bundleChunks = uniqBy(
-        jobs.map((job) => job?.meta?.webpack?.chunks || []).flat(),
-        ({ id }) => id
-      );
-      const bundleChunkIds = bundleChunks?.map(({ id }) => id);
-
-      return {
-        chunks: bundleChunks,
-        chunkIds: bundleChunkIds,
-      };
-    },
-    [jobs],
-  );
-
-  const { defaultFilters, allEntriesFilters } = useMemo(
-    () => ({
-      defaultFilters: {
-        changed: jobs?.length > 1,
-        ...getModuleSourceTypeFilters(true),
-        ...getModuleChunkFilters(chunkIds, true),
-        ...getModuleFileTypeFilters(true),
-        [MODULE_FILTERS.DUPLICATED]: false,
-      },
-      allEntriesFilters: {
-        changed: false,
-        ...getModuleSourceTypeFilters(true),
-        ...getModuleChunkFilters(chunkIds, true),
-        ...getModuleFileTypeFilters(true),
-        [MODULE_FILTERS.DUPLICATED]: false,
-      },
-    }),
-    [jobs],
-  );
-
-  const searchParams = useSearchParams({
-    search,
-    filters,
-    defaultFilters,
-    allEntriesFilters,
-    setState,
-  });
-
-  const filteredJobsByChunkIds = useModuleFilterByChunk({
-    jobs,
-    filters: searchParams.filters,
-    chunkIds,
-  });
-
-  const { rows, totalRowCount } = useMemo(() => {
-    const result = webpack.compareBySection.modules(filteredJobsByChunkIds, [addRowSourceFlag]);
-    return { rows: result, totalRowCount: result.length };
-  }, [filteredJobsByChunkIds]);
-
-  const filteredRows = useRowsFilter({
-    rows,
-    searchPattern: searchParams.searchPattern,
-    filters: searchParams.filters,
-    getRowFilter,
-  });
-
-  const sortParams = useRowsSort({
-    rows: filteredRows,
-    sortFields: SORT_BY,
-    sortBy,
-    sortDirection: direction,
-    getCustomSort,
-  });
-
-  return (
-    <BundleModulesComponent
-      jobs={jobs}
-      chunks={chunks}
-      {...restProps}
-      {...searchParams}
-      {...sortParams}
-      totalRowCount={totalRowCount}
-    />
-  );
-};
-
-BundleModules.propTypes = {
-  jobs: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
-  filters: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  search: PropTypes.string,
-  sortBy: PropTypes.string,
-  direction: PropTypes.string,
-  setState: PropTypes.func.isRequired,
-};
-
-BundleModules.defaultProps = {
-  filters: undefined,
-  search: undefined,
-  sortBy: undefined,
-  direction: undefined,
-};

package/src/components/bundle-packages/bundle-packages.constants.js

@@ -1,18 +0,0 @@
-export const SORT_BY_NAME = 'name';
-export const SORT_BY_SIZE = 'size';
-export const SORT_BY_DELTA = 'delta';
-
-export const SORT_BY = {
-  [SORT_BY_NAME]: {
-    label: 'Name',
-    defaultDirection: 'asc',
-  },
-  [SORT_BY_DELTA]: {
-    label: 'Delta',
-    defaultDirection: 'desc',
-  },
-  [SORT_BY_SIZE]: {
-    label: 'Size',
-    defaultDirection: 'desc',
-  },
-};

package/src/components/job-header/index.js

@@ -1 +0,0 @@
-export * from './job-header';