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

package/src/components/module-info/module-info.tsx

@@ -0,0 +1,312 @@
+import type { ElementType } from 'react';
+import React, { useMemo } from 'react';
+import cx from 'classnames';
+import orderBy from 'lodash/orderBy';
+import noop from 'lodash/noop';
+import type { MetricRunInfo, MetricTypeConfig, ReportMetricRow } from '@bundle-stats/utils';
+import {
+  METRIC_TYPE_CONFIGS,
+  BUNDLE_MODULES_DUPLICATE,
+  FILE_TYPE_LABELS,
+  MODULE_SOURCE_TYPE_LABELS,
+  formatNumber,
+  getBundleModulesByChunk,
+  getBundleModulesByFileTpe,
+  getBundleModulesBySource,
+  getMetricRunInfo,
+} from '@bundle-stats/utils';
+import type { Module, MetaChunk } from '@bundle-stats/utils/types/webpack';
+
+import type { ReportMetricModuleRow } from '../../types';
+import { Stack } from '../../layout/stack';
+import { Tag } from '../../ui/tag';
+import { ComponentLink } from '../component-link';
+import { RunInfo } from '../run-info';
+import { EntryInfo, EntryInfoMetaLink } from '../entry-info';
+import css from './module-info.module.css';
+import { FlexStack } from '../../layout';
+import { ModuleSizeMetric, ModuleSizeMetrics } from '../../constants';
+
+interface DuplicateInstancesProps {
+  current: number;
+  baseline?: number;
+}
+
+const DuplicateInstances = ({ current, baseline }: DuplicateInstancesProps) => {
+  const runInfo = getMetricRunInfo(
+    {
+      biggerIsBetter: false,
+      formatter: formatNumber,
+    },
+    current,
+    baseline,
+  ) as MetricRunInfo;
+
+  return (
+    <RunInfo
+      current={runInfo.displayValue}
+      delta={runInfo.displayDeltaPercentage}
+      deltaPercentage={runInfo.displayDelta}
+      deltaType={runInfo.deltaType}
+      size="small"
+      className={css.duplicateInstances}
+    />
+  );
+};
+
+enum ChunkDataState {
+  ADDED = 2,
+  REMOVED = 1,
+  NOT_CHANGED = 0,
+}
+
+const ChunkDataStateKind = {
+  [ChunkDataState.ADDED]: 'info',
+  [ChunkDataState.REMOVED]: 'danger',
+  [ChunkDataState.NOT_CHANGED]: 'default',
+};
+
+interface ChunkData {
+  id: string;
+  state: ChunkDataState;
+}
+
+function compareChunksData(
+  currentChunkIds: Array<string>,
+  baselineChunkIds: Array<string>,
+): Array<ChunkData> {
+  const result: Array<ChunkData> = [];
+
+  currentChunkIds.forEach((chunkId) => {
+    if (!baselineChunkIds.includes(chunkId)) {
+      result.push({ id: chunkId, state: ChunkDataState.ADDED });
+    } else {
+      result.push({ id: chunkId, state: ChunkDataState.NOT_CHANGED });
+    }
+  });
+
+  baselineChunkIds.forEach((chunk) => {
+    if (!currentChunkIds.includes(chunk)) {
+      result.push({ id: chunk, state: ChunkDataState.REMOVED });
+    }
+  });
+
+  return orderBy(result, 'state', 'desc');
+}
+
+interface ChunksDeltaProps {
+  customComponentLink: ElementType;
+  runs: Array<Module & MetricRunInfo>;
+  chunks: Array<MetaChunk>;
+  chunkIds: Array<string>;
+}
+
+const ChunksDelta = (props: ChunksDeltaProps) => {
+  const { customComponentLink: CustomComponentLink, runs, chunks, chunkIds } = props;
+
+  const currentChunkIds = runs[0]?.chunkIds || [];
+  const baselineChunkIds = runs[runs.length - 1]?.chunkIds || [];
+
+  const chunksData = compareChunksData(currentChunkIds, baselineChunkIds);
+
+  return (
+    <Stack space="xxxsmall">
+      <div>
+        {chunksData.map((chunkData) => {
+          const chunk = chunks?.find(({ id }) => id === chunkData.id);
+
+          if (!chunk) {
+            return null;
+          }
+
+          return (
+            <EntryInfoMetaLink
+              as={CustomComponentLink}
+              {...getBundleModulesByChunk(chunkIds, chunkData.id)}
+              className={cx(
+                css.chunksItem,
+                css[`chunksItem-${ChunkDataStateKind[chunkData.state]}`],
+              )}
+            >
+              {chunk.name}
+            </EntryInfoMetaLink>
+          );
+        })}
+      </div>
+    </Stack>
+  );
+};
+
+interface ModuleSizeRunInfoProps {
+  metric: MetricTypeConfig;
+  title: string;
+  titleTooltip?: string;
+  current?: number;
+  baseline?: number;
+}
+
+const ModuleSizeRunInfo = (props: ModuleSizeRunInfoProps) => {
+  const { metric, title, titleTooltip, current, baseline } = props;
+
+  const runInfo = getMetricRunInfo(metric, current || 0, baseline) as MetricRunInfo;
+
+  return (
+    <RunInfo
+      title={title}
+      titleTooltip={titleTooltip}
+      current={runInfo.displayValue}
+      delta={runInfo.displayDeltaPercentage}
+      deltaPercentage={runInfo.displayDelta}
+      deltaType={runInfo.deltaType}
+      baseline={baseline ? metric.formatter(baseline) : undefined}
+    />
+  );
+};
+
+const renderRunInfo = (item: ReportMetricRow) => {
+  const itemModule = item as ReportMetricModuleRow;
+
+  const currentRun = itemModule.runs[0];
+  const baselineRun =
+    itemModule.runs.length > 1 ? itemModule.runs[itemModule.runs.length - 1] : null;
+  const metric = METRIC_TYPE_CONFIGS.METRIC_TYPE_FILE_SIZE;
+
+  return (
+    <FlexStack space="small" className={css.moduleSizes}>
+      {itemModule.duplicated && (
+        <>
+          <ModuleSizeRunInfo
+            metric={metric}
+            title={ModuleSizeMetrics[ModuleSizeMetric.TOTAL_SIZE].label}
+            titleTooltip={ModuleSizeMetrics[ModuleSizeMetric.TOTAL_SIZE].tooltip}
+            current={currentRun?.sizeTotal}
+            baseline={baselineRun?.sizeTotal}
+          />
+          <ModuleSizeRunInfo
+            metric={metric}
+            title={ModuleSizeMetrics[ModuleSizeMetric.DUPLICATE_SIZE].label}
+            titleTooltip={ModuleSizeMetrics[ModuleSizeMetric.DUPLICATE_SIZE].tooltip}
+            current={currentRun?.sizeDuplicate}
+            baseline={baselineRun?.sizeDuplicate}
+          />
+        </>
+      )}
+      <ModuleSizeRunInfo
+        metric={metric}
+        title={ModuleSizeMetrics[ModuleSizeMetric.SIZE].label}
+        titleTooltip={ModuleSizeMetrics[ModuleSizeMetric.SIZE].tooltip}
+        current={currentRun?.size}
+        baseline={baselineRun?.size}
+      />
+    </FlexStack>
+  );
+};
+
+interface ModuleInfoProps {
+  item: ReportMetricModuleRow;
+  chunks?: Array<MetaChunk>;
+  chunkIds?: Array<string>;
+  labels: Array<string>;
+  metricLabel?: string;
+  customComponentLink?: React.ElementType;
+  onClose: () => void;
+}
+
+export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>) => {
+  const {
+    className = '',
+    item,
+    labels,
+    chunks = [],
+    chunkIds = [],
+    metricLabel = '',
+    customComponentLink: CustomComponentLink = ComponentLink,
+    onClick = noop,
+    onClose,
+  } = props;
+
+  const rootClassName = cx(css.root, className);
+
+  const tags = useMemo(() => {
+    if (!item.duplicated) {
+      return null;
+    }
+
+    return (
+      <div>
+        <Tag as={CustomComponentLink} {...BUNDLE_MODULES_DUPLICATE} kind="danger">
+          Duplicate
+        </Tag>
+      </div>
+    );
+  }, [item]);
+
+  const fileTypeLabel = FILE_TYPE_LABELS[item.fileType as keyof typeof FILE_TYPE_LABELS];
+
+  const sourceTypeLabel = item.thirdParty
+    ? MODULE_SOURCE_TYPE_LABELS.THIRD_PARTY
+    : MODULE_SOURCE_TYPE_LABELS.FIRST_PARTY;
+
+  const currentRun = item.runs[0];
+  const baselineRun = item.runs.length > 1 ? item.runs[item.runs.length - 1] : undefined;
+
+  const currentChunkCount = currentRun?.chunkIds?.length || 0;
+  const baselineChunkCount = baselineRun?.chunkIds?.length || 0;
+
+  const currentDuplicateInstances = currentChunkCount > 0 ? currentChunkCount - 1 : 0;
+  const baselineDuplicateInstances = baselineChunkCount > 0 ? baselineChunkCount - 1 : 0;
+  const hasDuplicates = currentDuplicateInstances !== 0 || baselineDuplicateInstances !== 0;
+
+  return (
+    <EntryInfo
+      item={item as ReportMetricRow}
+      labels={labels}
+      tags={tags}
+      onClose={onClose}
+      renderRunInfo={renderRunInfo}
+      runSizeLabel={metricLabel}
+      className={rootClassName}
+    >
+      <Stack space="xxxsmall">
+        {item?.fileType && (
+          <EntryInfo.Meta label="File type" tooltip="Module file type: JS, CSS">
+            <EntryInfoMetaLink
+              as={CustomComponentLink}
+              {...getBundleModulesByFileTpe(item.fileType, fileTypeLabel)}
+            >
+              {fileTypeLabel}
+            </EntryInfoMetaLink>
+          </EntryInfo.Meta>
+        )}
+
+        <EntryInfo.Meta label="Source" tooltip="Module source type: first party, third party">
+          <EntryInfoMetaLink
+            as={CustomComponentLink}
+            {...getBundleModulesBySource(item.thirdParty || false, sourceTypeLabel)}
+            onClick={onClick}
+          >
+            {sourceTypeLabel}
+          </EntryInfoMetaLink>
+        </EntryInfo.Meta>
+
+        {hasDuplicates && (
+          <EntryInfo.Meta label="Duplicates" tooltip="Module duplicate instances">
+            <DuplicateInstances
+              current={currentDuplicateInstances}
+              baseline={baselineRun ? baselineDuplicateInstances : undefined}
+            />
+          </EntryInfo.Meta>
+        )}
+
+        <EntryInfo.Meta label="Chunks" tooltip="Chunks that contain the module">
+          <ChunksDelta
+            runs={item.runs}
+            chunks={chunks}
+            chunkIds={chunkIds}
+            customComponentLink={CustomComponentLink}
+          />
+        </EntryInfo.Meta>
+      </Stack>
+    </EntryInfo>
+  );
+};

package/src/components/package-info/index.ts

@@ -0,0 +1 @@
+export * from './package-info';

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

@@ -0,0 +1,13 @@
+.fileName {
+  padding: 0 2px;
+  background: var(--color-highlight-warning);
+}
+
+.external {
+  padding: 0;
+  list-style: inside disc;
+}
+
+.packageTitleId {
+  color: var(--color-text-ultra-light);
+}

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

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { getWrapperDecorator } from '../../stories';
+import { PackageInfo } from '.';
+
+export default {
+  title: 'Components/PackageInfo',
+  component: PackageInfo,
+  decorators: [getWrapperDecorator()],
+};
+
+const RUNS = [
+  {
+    name: 'lodash',
+    value: 279901,
+    path: '../node_modules/lodash',
+  },
+  {
+    name: 'lodash',
+    value: 283712,
+    displayValue: '277.06KiB',
+    path: '../node_modules/lodash',
+  },
+];
+
+export const Default = () => (
+  <PackageInfo
+    name="lodash~1"
+    item={{
+      label: 'lodash',
+      duplicate: true,
+      runs: RUNS as any,
+    }}
+    labels={['Job #2', 'Job #1']}
+  />
+);

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

@@ -0,0 +1,134 @@
+import React, { useMemo } from 'react';
+import {
+  BUNDLE_PACKAGES_DUPLICATE,
+  PACKAGES_SEPARATOR,
+  PACKAGE_ID_SEPARATOR,
+  MetricRunInfo,
+  getBundleModulesBySearch,
+  getBundlePackagesByNameComponentLink,
+} from '@bundle-stats/utils';
+import { Package } from '@bundle-stats/utils/types/webpack';
+
+import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
+import { ComponentLink } from '../component-link';
+import { FileName } from '../../ui/file-name';
+import { Tag } from '../../ui/tag';
+import { EntryInfo } from '../entry-info';
+import css from './package-info.module.css';
+import { Icon } from '../../ui';
+
+interface PackageInfoProps {
+  item: {
+    label: string;
+    duplicate?: boolean;
+    runs: Array<Package & MetricRunInfo>;
+  };
+  labels: Array<string>;
+  customComponentLink?: React.ElementType;
+  onClose: () => void;
+}
+
+export const PackageInfo = (props: PackageInfoProps & React.ComponentProps<'div'>) => {
+  const {
+    className = '',
+    item,
+    labels,
+    customComponentLink: CustomComponentLink = ComponentLink,
+    onClose,
+  } = props;
+
+  const packages = item.label.split(PACKAGES_SEPARATOR);
+  const name = packages[packages.length - 1];
+  const fallbackPackagePath = `node_modules/${item.label
+    .split(PACKAGES_SEPARATOR)
+    .join('/node_modules/')}`;
+  const normalizedPackagePath = `${item.runs?.[0]?.path || fallbackPackagePath}/`;
+  const [normalizedName, packageId] = name.split(PACKAGE_ID_SEPARATOR);
+
+  const packageTitle = useMemo(
+    () => (
+      <span className={css.packageTitle}>
+        <span className={css.packageTitleText}>{normalizedName}</span>
+        {packageId && (
+          <span className={css.packageTitleId}>
+            {PACKAGE_ID_SEPARATOR}
+            {packageId}
+          </span>
+        )}
+      </span>
+    ),
+    [normalizedName, packageId],
+  );
+
+  const tags = useMemo(() => {
+    if (!item.duplicate) {
+      return null;
+    }
+
+    return (
+      <div>
+        <Tag as={CustomComponentLink} {...BUNDLE_PACKAGES_DUPLICATE} kind="danger">
+          Duplicate
+        </Tag>
+      </div>
+    );
+  }, [item]);
+
+  return (
+    <EntryInfo
+      itemTitle={packageTitle}
+      item={item as any}
+      labels={labels}
+      tags={tags}
+      runNameSelector="path"
+      onClose={onClose}
+      className={className}
+    >
+      <EntryInfo.Meta label="Path" tooltip="Package path">
+        <FileName name={normalizedPackagePath} className={css.fileName} />
+      </EntryInfo.Meta>
+
+      <Stack space="xxxsmall">
+        {item.duplicate && (
+          <div>
+            <CustomComponentLink {...getBundlePackagesByNameComponentLink(normalizedName)}>
+              View all duplicate instances
+            </CustomComponentLink>
+          </div>
+        )}
+
+        <CustomComponentLink {...getBundleModulesBySearch(normalizedPackagePath)}>
+          Search modules by package path
+        </CustomComponentLink>
+      </Stack>
+
+      <FlexStack space="xsmall" alignItems="center" className={css.external}>
+        <FlexStack
+          space="xxxsmall"
+          alignItems="center"
+          as="a"
+          href={`https://www.npmjs.com/package/${normalizedName}`}
+          target="_blank"
+          rel="noreferrer"
+          className={css.externalLink}
+        >
+          <span>npmjs.com</span>
+          <Icon glyph={Icon.ICONS.EXTERNAL_LINK} size="small" />
+        </FlexStack>
+        <FlexStack
+          space="xxxsmall"
+          alignItems="center"
+          as="a"
+          href={`https://bundlephobia.com/result?p=${normalizedName}`}
+          target="_blank"
+          rel="noreferrer"
+          className={css.externalLink}
+        >
+          <span>bundlephobia.com</span>
+          <Icon glyph={Icon.ICONS.EXTERNAL_LINK} size="small" />
+        </FlexStack>
+      </FlexStack>
+    </EntryInfo>
+  );
+};

package/src/components/preview-source/index.ts

@@ -0,0 +1 @@
+export * from './preview-source';

package/src/components/preview-source/preview-source.module.css

@@ -0,0 +1,40 @@
+.root {
+  position: relative;
+}
+
+.toolbar {
+  position: absolute;
+  z-index: 2;
+  top: var(--space-xsmall);
+  right: var(--space-xsmall);
+  background: var(--color-background);
+  border-radius: var(--radius-medium);
+}
+
+/** fix control group with nested components */
+.downloadTooltip > a {
+  border-top-left-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+
+.downloadTooltip > a:hover,
+.downloadTooltip > a:active,
+.downloadTooltip > a:focus {
+  box-shadow: none;
+}
+
+/** Source content */
+.content {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  background: var(--color-highlight);
+  color: var(--color-text);
+  font-family: var(--font-family-fixed);
+}
+
+/** Empty / loading state */
+.isEmpty .content {
+  pointer-events: none;
+  background: var(--color-highlight);
+}

package/src/components/preview-source/preview-source.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { PreviewSource } from '.';
+
+const meta: Meta<typeof PreviewSource> = {
+  title: 'Components/PreviewSource',
+  component: PreviewSource,
+  decorators: [getWrapperDecorator()],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const SOURCE = JSON.stringify(
+  [
+    {
+      label: 'Hey',
+      runs: [
+        { value: 1, name: 'a' },
+        { value: 2, name: 'b' },
+      ],
+    },
+  ],
+  null,
+  2,
+);
+
+export const Default: Story = {
+  args: {
+    source: JSON.stringify(
+      [
+        {
+          label: 'Hey',
+          runs: [
+            { value: 1, name: 'a' },
+            { value: 2, name: 'b' },
+          ],
+        },
+      ],
+      null,
+      2,
+    ),
+    download: 'bundle-stats--assets.json',
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    download: 'bundle-stats--assets.json',
+  },
+};

package/src/components/preview-source/preview-source.tsx

@@ -0,0 +1,66 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+import cx from 'classnames';
+
+import { Button, BUTTON_GLYPHS } from '../../ui/button';
+import { CopyToClipboard } from '../../ui/copy-to-clipboard';
+import { ControlGroup } from '../../ui/control-group';
+import { Tooltip } from '../../ui/tooltip';
+import { Textarea } from '../../ui/textarea';
+import css from './preview-source.module.css';
+
+const DEFAULT_ROWS = 10;
+
+type PreviewSourceProps = {
+  source?: string;
+  /**
+   * Textarea rows
+   */
+  rows?: number;
+  /**
+   * Link download attribute
+   * @example
+   *   bundle-stats--assets.json
+   */
+  download?: string;
+} & ComponentProps<'div'>;
+
+export const PreviewSource = (props: PreviewSourceProps) => {
+  const { className = '', source, rows = DEFAULT_ROWS, download = false, ...restProps } = props;
+
+  const isEmpty = !source;
+  const rootClassName = cx(css.root, className, isEmpty && css.isEmpty);
+
+  return (
+    <div className={rootClassName} {...restProps}>
+      {source && (
+        <ControlGroup className={css.toolbar}>
+          <CopyToClipboard outline size="small" text={source} />
+          {download && (
+            <Tooltip title={`Download ${download}`} className={css.downloadTooltip}>
+              <Button
+                outline
+                rightGlyph={BUTTON_GLYPHS.DOWNLOAD}
+                size="small"
+                as="a"
+                href={`data:application/json,${encodeURIComponent(source)}`}
+                download={download}
+              />
+            </Tooltip>
+          )}
+        </ControlGroup>
+      )}
+      <Textarea
+        rows={rows}
+        value={source}
+        readOnly
+        autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="off"
+        spellCheck="false"
+        translate="no"
+        className={css.content}
+      />
+    </div>
+  );
+};

package/src/components/run-info/index.ts

@@ -0,0 +1 @@
+export * from './run-info';