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

package/src/components/asset-meta-tag/asset-meta-tag.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import cx from 'classnames';
+
+import type { TagProps } from '../../ui/tag';
+import { Tag } from '../../ui/tag';
+import css from './asset-meta-tag.module.css';
+import type { ReportMetricAssetRowMetaStatus } from '../../types';
+
+export type AssetMetaTagProps = {
+  tag: 'entry' | 'initial' | 'chunk';
+  status?: ReportMetricAssetRowMetaStatus | boolean;
+} & TagProps;
+
+export const AssetMetaTag = (props: AssetMetaTagProps) => {
+  const { className = '', title, tag, status, ...restProps } = props;
+
+  const rootClassName = cx(
+    css.root,
+    status === 'added' && css.added,
+    status === 'removed' && css.removed,
+    css[tag],
+    className,
+  );
+
+  return (
+    <Tag
+      className={rootClassName}
+      title={title}
+      size={Tag.SIZES.SMALL}
+      kind={Tag.KINDS.INFO}
+      {...restProps}
+    />
+  );
+};

package/src/components/asset-meta-tag/index.ts

@@ -0,0 +1 @@
+export * from './asset-meta-tag';

package/src/components/asset-name/asset-name.module.css

@@ -0,0 +1,32 @@
+.notPredictive {
+  margin-right: var(--space-xxsmall);
+  display: inline-block;
+  width: var(--space-small);
+  height: var(--space-small);
+}
+
+.notPredictiveIcon {
+  color: var(--color-warning-dark);
+}
+
+.notPredictiveHoverCard {
+  max-width: 480px;
+}
+
+.metaTags {
+  display: inline;
+  margin-right: var(--space-xxxsmall);
+}
+
+.metaTag + .metaTag {
+  margin-left: calc(var(--space-xxxsmall) / 2);
+}
+
+.metaTags:empty {
+  display: none;
+}
+
+.nameText {
+  display: inline-block;
+  vertical-align: middle;
+}

package/src/components/asset-name/asset-name.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AssetName } from '.';
+
+const ROW = {
+  key: 'asset/main.js',
+  label: 'asset/main.js',
+  changed: true,
+  isEntry: false,
+  isChunk: false,
+  isInitial: false,
+  isAsset: true,
+  isNotPredictive: false,
+  fileType: 'JS',
+  biggerIsBetter: false,
+  runs: [
+    { name: 'asset/main.abcd1234.js', value: 1024 * 10 },
+    { name: 'asset/main.abcd1234.js', value: 1024 * 11 },
+  ],
+};
+
+const meta = {
+  title: 'Components/AssetName',
+  component: AssetName,
+  args: {
+    customComponentLink: 'span',
+    filters: {},
+    search: '',
+  },
+} as Meta<typeof AssetName>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    row: ROW,
+  },
+};
+
+export const MetaDefault: Story = {
+  args: {
+    row: {
+      ...ROW,
+      isEntry: true,
+      isChunk: true,
+      isInitial: true,
+      isAsset: false,
+    },
+  },
+};
+
+export const MetaAdded: Story = {
+  args: {
+    row: {
+      ...ROW,
+      isEntry: 'added',
+      isChunk: 'added',
+      isInitial: 'added',
+      isAsset: false,
+    },
+  },
+};
+
+export const MetaRemoved: Story = {
+  args: {
+    row: {
+      ...ROW,
+      isEntry: 'removed',
+      isChunk: 'removed',
+      isInitial: 'removed',
+      isAsset: false,
+    },
+  },
+};
+
+export const NotPredictive: Story = {
+  args: {
+    row: {
+      ...ROW,
+      isNotPredictive: true,
+    },
+  },
+};

package/src/components/asset-name/asset-name.tsx

@@ -0,0 +1,59 @@
+import React, { ElementType } from 'react';
+
+import { Icon } from '../../ui/icon';
+import { FileName } from '../../ui/file-name';
+import { HoverCard } from '../../ui/hover-card';
+import { AssetNotPredictive } from '../asset-not-predictive';
+
+import type { ReportMetricAssetRow } from '../../types';
+import { AssetMetaTag } from '../asset-meta-tag';
+import css from './asset-name.module.css';
+
+const RUN_TITLE_CURRENT = 'Current';
+const RUN_TITLE_BASELINE = 'Baseline';
+const RUNS_LABELS = [RUN_TITLE_CURRENT, RUN_TITLE_BASELINE];
+
+export type AssetNameProps = {
+  className?: string;
+  row: ReportMetricAssetRow;
+  EntryComponentLink: ElementType;
+};
+
+export const AssetName = (props: AssetNameProps) => {
+  const { className = '', EntryComponentLink, row } = props;
+  const { label, isNotPredictive, runs, isChunk, isEntry, isInitial } = row;
+
+  return (
+    <span className={className}>
+      {isNotPredictive && (
+        <HoverCard
+          label={<Icon className={css.notPredictiveIcon} glyph={Icon.ICONS.WARNING} />}
+          className={css.notPredictive}
+          hoverCardClassName={css.notPredictiveHoverCard}
+        >
+          <AssetNotPredictive runs={runs} labels={RUNS_LABELS} />
+        </HoverCard>
+      )}
+
+      <EntryComponentLink entryId={row.key} className={css.name}>
+        <span className={css.metaTags}>
+          {isEntry && (
+            <AssetMetaTag className={css.metaTag} title="Entrypoint" tag="entry" status={isEntry} />
+          )}
+          {isInitial && (
+            <AssetMetaTag
+              className={css.metaTag}
+              title="Initial"
+              tag="initial"
+              status={isInitial}
+            />
+          )}
+          {isChunk && (
+            <AssetMetaTag className={css.metaTag} title="Chunk" tag="chunk" status={isChunk} />
+          )}
+        </span>
+        <FileName className={css.nameText} name={label} />
+      </EntryComponentLink>
+    </span>
+  );
+};

package/src/components/asset-name/index.ts

@@ -0,0 +1 @@
+export * from './asset-name';

package/src/components/asset-not-predictive/asset-not-predictive.module.css

@@ -0,0 +1,8 @@
+.colName {
+  width: 100%;
+  overflow: hidden;
+}
+
+.colValue {
+  text-align: right;
+}

package/src/components/asset-not-predictive/asset-not-predictive.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { AssetNotPredictive } from '.';
+
+export default {
+  title: 'Components/AssetNotPredictive',
+  component: AssetNotPredictive,
+};
+
+export const Default = () => <AssetNotPredictive />;
+
+const RUNS = [
+  {
+    name: 'static/vendor.abcd1234.js',
+    value: 1024 * 1024 - 1,
+  },
+  {
+    name: 'static/vendor.abcd1234.js',
+    value: 1024 * 1024,
+  },
+] as any;
+
+export const WithRuns = () => <AssetNotPredictive runs={RUNS} labels={['Job 2', 'Job 1']} />;

package/src/components/asset-not-predictive/asset-not-predictive.tsx

@@ -0,0 +1,48 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+import cx from 'classnames';
+import type { AssetMetricRun } from '@bundle-stats/utils/types/webpack';
+
+import { Stack } from '../../layout/stack';
+import { Table } from '../../ui/table';
+import css from './asset-not-predictive.module.css';
+import { Alert } from '../../ui';
+
+export type AssetNotPredictiveProps = {
+  runs?: Array<AssetMetricRun>;
+  labels?: Array<string>;
+} & ComponentProps<'div'>;
+
+export const AssetNotPredictive = (props: AssetNotPredictiveProps) => {
+  const { className = '', runs = null, labels = null, ...restProps } = props;
+
+  return (
+    <Stack space="small" {...restProps} className={cx(css.root, className)}>
+      <h3>Asset hash is not predictive</h3>
+      <Alert kind="warning">
+        File names are identical, but the size is different. Content changes without a hash change
+        can cause runtime errors.
+      </Alert>
+      {runs && (
+        <Table outline compact>
+          <Table.THead>
+            <Table.Tr>
+              <Table.Th>&nbsp;</Table.Th>
+              <Table.Th>File name</Table.Th>
+              <Table.Th className={css.tableValue}>Size</Table.Th>
+            </Table.Tr>
+          </Table.THead>
+          <Table.TBody>
+            {runs.map(({ name, value }, index) => (
+              <Table.Tr key={name}>
+                <Table.Th>{labels?.[index]}</Table.Th>
+                <Table.Td className={css.colName}>{name}</Table.Td>
+                <Table.Td className={css.colvalue}>{value}</Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.TBody>
+        </Table>
+      )}
+    </Stack>
+  );
+};

package/src/components/asset-not-predictive/index.ts

@@ -0,0 +1 @@
+export * from './asset-not-predictive';

package/src/components/bundle-assets/__tests__/add-metric-report-asset-row-data.ts

@@ -0,0 +1,235 @@
+import { addMetricReportAssetRowData } from '../bundle-assets.utils';
+
+describe('BundleAssets / addMetricReportAssetRowData', () => {
+  test('should add data to a single run', () => {
+    expect(
+      addMetricReportAssetRowData({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+        ],
+      }),
+    ).toEqual({
+      key: 'assets/main.js',
+      label: 'assets/main.js',
+      biggerIsBetter: false,
+      changed: false,
+      fileType: 'JS',
+      isAsset: false,
+      isChunk: true,
+      isEntry: true,
+      isInitial: true,
+      isNotPredictive: false,
+      runs: [
+        {
+          name: 'assets/main.abc123.js',
+          value: 1024 * 10,
+          isEntry: true,
+          isChunk: true,
+          isInitial: true,
+        },
+      ],
+    });
+  });
+
+  test('should add data when baseline run is null', () => {
+    expect(
+      addMetricReportAssetRowData({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+          null,
+        ],
+      }),
+    ).toEqual({
+      key: 'assets/main.js',
+      label: 'assets/main.js',
+      biggerIsBetter: false,
+      changed: false,
+      fileType: 'JS',
+      isAsset: false,
+      isChunk: true,
+      isEntry: true,
+      isInitial: true,
+      isNotPredictive: false,
+      runs: [
+        {
+          name: 'assets/main.abc123.js',
+          value: 1024 * 10,
+          isEntry: true,
+          isChunk: true,
+          isInitial: true,
+        },
+        null,
+      ],
+    });
+  });
+
+  test('should add data when current run is null', () => {
+    expect(
+      addMetricReportAssetRowData({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: true,
+        runs: [
+          null,
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+        ],
+      }),
+    ).toEqual({
+      key: 'assets/main.js',
+      label: 'assets/main.js',
+      biggerIsBetter: false,
+      changed: true,
+      fileType: 'JS',
+      isAsset: false,
+      isChunk: true,
+      isEntry: true,
+      isInitial: true,
+      isNotPredictive: false,
+      runs: [
+        null,
+        {
+          name: 'assets/main.abc123.js',
+          value: 1024 * 10,
+          isEntry: true,
+          isChunk: true,
+          isInitial: true,
+        },
+      ],
+    });
+  });
+
+  test('should add data when baseline is not null', () => {
+    expect(
+      addMetricReportAssetRowData({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+        ],
+      }),
+    ).toEqual({
+      key: 'assets/main.js',
+      label: 'assets/main.js',
+      biggerIsBetter: false,
+      changed: false,
+      fileType: 'JS',
+      isAsset: false,
+      isChunk: true,
+      isEntry: true,
+      isInitial: true,
+      isNotPredictive: false,
+      runs: [
+        {
+          name: 'assets/main.abc123.js',
+          value: 1024 * 10,
+          isEntry: true,
+          isChunk: true,
+          isInitial: true,
+        },
+        {
+          name: 'assets/main.abc123.js',
+          value: 1024 * 10,
+          isEntry: true,
+          isChunk: true,
+          isInitial: true,
+        },
+      ],
+    });
+  });
+
+  test('should flag as changed when only meta changes', () => {
+    expect(
+      addMetricReportAssetRowData({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: false,
+          },
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+        ],
+      }),
+    ).toEqual({
+      key: 'assets/main.js',
+      label: 'assets/main.js',
+      biggerIsBetter: false,
+      changed: true,
+      fileType: 'JS',
+      isAsset: false,
+      isChunk: true,
+      isEntry: true,
+      isInitial: 'removed',
+      isNotPredictive: false,
+      runs: [
+        {
+          name: 'assets/main.abc123.js',
+          value: 1024 * 10,
+          isEntry: true,
+          isChunk: true,
+          isInitial: false,
+        },
+        {
+          name: 'assets/main.abc123.js',
+          value: 1024 * 10,
+          isEntry: true,
+          isChunk: true,
+          isInitial: true,
+        },
+      ],
+    });
+  });
+});

package/src/components/bundle-assets/__tests__/get-asset-meta-status.ts

@@ -0,0 +1,21 @@
+import { getAssetMetaStatus } from '../bundle-assets.utils';
+
+describe('BundleAssets / getAssetMetaStatus', () => {
+  test('should return true when all runs meta values are truthy', () => {
+    expect(getAssetMetaStatus([true])).toBeTruthy();
+    expect(getAssetMetaStatus([true, true])).toBeTruthy();
+  });
+
+  test('should return false when all runs meta values are falsy', () => {
+    expect(getAssetMetaStatus([false])).toBeFalsy();
+    expect(getAssetMetaStatus([false, false])).toBeFalsy();
+  });
+
+  test('should return "added" when current is truthy and baseline is falsy', () => {
+    expect(getAssetMetaStatus([true, false])).toEqual('added');
+  });
+
+  test('should return "removed" when current is false and baseline is truthy', () => {
+    expect(getAssetMetaStatus([false, true])).toEqual('removed');
+  });
+});

package/src/components/bundle-assets/__tests__/get-is-not-predictive.ts

@@ -0,0 +1,119 @@
+import { getIsNotPredictive } from '../bundle-assets.utils';
+
+describe('BundleAssets / getIsNotPredictive', () => {
+  test('should return false by default', () => {
+    expect(
+      getIsNotPredictive({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+        ],
+      }),
+    ).toBeFalsy();
+
+    expect(
+      getIsNotPredictive({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+          null,
+        ],
+      }),
+    ).toBeFalsy();
+
+    expect(
+      getIsNotPredictive({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+        ],
+      }),
+    ).toBeFalsy();
+
+    expect(
+      getIsNotPredictive({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.def456.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 11,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+        ],
+      }),
+    ).toBeFalsy();
+  });
+
+  test('should return true when not predictive', () => {
+    expect(
+      getIsNotPredictive({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 11,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+        ],
+      }),
+    ).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,10 @@
+export const SEARCH_PLACEHOLDER = 'Search by asset path';
+export const CHANGED = 'Changed';
+export const ASSET_TYPE = 'Asset type';
+export const FILE_TYPE = 'File type';
+export const CHUNKS = 'Chunks';
+export const NO_CHUNK = 'No chunk';
+export const ENTRY = 'Entry';
+export const INITIAL = 'Initial';
+export const CHUNK = 'Chunk';
+export const OTHER = 'Other';