@bundle-stats/ui 4.22.2 → 4.23.0-beta.1

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

@@ -0,0 +1,47 @@
+import type React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { createJobs, Job } from '@bundle-stats/utils';
+
+/* 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 { BundleAssetsTotals } from '.';
+
+// BundleAssetsTotals is a plain .jsx component with defaultProps instead of
+// inline destructuring defaults, so TS can't infer its props as optional on its own.
+const TypedBundleAssetsTotals = BundleAssetsTotals as unknown as React.ComponentType<{
+  className?: string;
+  jobs?: Array<Job>;
+  customComponentLink?: React.ElementType;
+  onTreemapItemClick?: (entryId: string) => void;
+}>;
+
+const meta = {
+  title: 'Components/BundleAssetsTotals',
+  component: TypedBundleAssetsTotals,
+  decorators: [getWrapperDecorator()],
+} satisfies Meta<typeof TypedBundleAssetsTotals>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const SingleJob: Story = {
+  args: {
+    jobs: createJobs([{ webpack: currentStats }]),
+  },
+};
+
+export const MultipleJobs: Story = {
+  args: {
+    jobs: createJobs([{ webpack: currentStats }, { webpack: baselineStats }]),
+  },
+};
+
+export const EmptyBaseline: Story = {
+  args: {
+    jobs: createJobs([{ webpack: currentStats }, {}]),
+  },
+};

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

@@ -0,0 +1,191 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { createJobs } from '@bundle-stats/utils';
+
+/* eslint-disable import/no-relative-packages */
+import baselineStatsFixtures from '../../../../../fixtures/webpack-stats.baseline.json';
+import currentStatsFixtures from '../../../../../fixtures/webpack-stats.current.json';
+/* eslint-enable import/no-relative-packages */
+import { getWrapperDecorator } from '../../stories';
+import { BundleModules } from '.';
+
+// Limit the side of the modules when not in dev mode (chromatic limit, snapshot too large)
+const { baselineStats, currentStats } =
+  process.env.NODE_ENV !== 'development'
+    ? {
+        // eslint-disable-next-line prefer-object-spread
+        baselineStats: Object.assign({}, baselineStatsFixtures, {
+          modules: baselineStatsFixtures.modules.slice(0, 100),
+        }),
+        // eslint-disable-next-line prefer-object-spread
+        currentStats: Object.assign({}, currentStatsFixtures, {
+          modules: currentStatsFixtures.modules.slice(0, 100),
+        }),
+      }
+    : { baselineStats: baselineStatsFixtures, currentStats: currentStatsFixtures };
+
+const JOBS = createJobs([{ webpack: currentStats }, { webpack: baselineStats }]);
+
+const meta = {
+  title: 'Components/BundleModules',
+  component: BundleModules,
+  decorators: [getWrapperDecorator()],
+  args: {
+    filters: {},
+    setState: () => {},
+  },
+} satisfies Meta<typeof BundleModules>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    jobs: [JOBS[1]],
+  },
+};
+
+export const MultipleJobs: Story = {
+  args: {
+    jobs: JOBS,
+  },
+};
+
+const JOBS_EMPTY_BASELINE = createJobs([{ webpack: currentStats }, {}]);
+
+export const EmptyBaseline: Story = {
+  args: {
+    jobs: JOBS_EMPTY_BASELINE,
+  },
+};
+
+// Module moved between chunks
+const JOBS_MOVED_MODULE = createJobs([
+  {
+    webpack: {
+      chunks: [
+        {
+          id: 1,
+          names: ['chunk-1'],
+        },
+        {
+          id: 2,
+          names: ['chunk-2'],
+        },
+      ],
+      modules: [
+        {
+          name: 'module-1a.js',
+          size: 1100,
+          chunks: [1],
+        },
+        {
+          name: 'module-1b.js',
+          size: 1200,
+          chunks: [1],
+        },
+        {
+          name: 'module-moved-from-chunk-2-to-1.js',
+          size: 2300,
+          chunks: [1],
+        },
+        {
+          name: 'module-2b.js',
+          size: 2200,
+          chunks: [2],
+        },
+        {
+          name: 'module-moved-from-chunk-3-to-1.js',
+          size: 3300,
+          chunks: [1],
+        },
+      ],
+    },
+  },
+  {
+    webpack: {
+      chunks: [
+        {
+          id: 1,
+          names: ['chunk-1'],
+        },
+        {
+          id: 2,
+          names: ['chunk-2'],
+        },
+        {
+          id: 3,
+          names: ['chunk-3'],
+        },
+      ],
+      modules: [
+        {
+          name: 'module-1a.js',
+          size: 1000,
+          chunks: [1],
+        },
+        {
+          name: 'module-1b.js',
+          size: 1100,
+          chunks: [1],
+        },
+        {
+          name: 'module-moved-from-chunk-2-to-1.js',
+          size: 2000,
+          chunks: [2],
+        },
+        {
+          name: 'module-2b.js',
+          size: 2200,
+          chunks: [2],
+        },
+        {
+          name: 'module-moved-from-chunk-3-to-1.js',
+          size: 3300,
+          chunks: [3],
+        },
+        {
+          name: 'module-removed-from-all-chunks.js',
+          size: 3300,
+          chunks: [3],
+        },
+      ],
+    },
+  },
+]);
+
+export const ChunkFiltersWithModuleMovedIn: Story = {
+  args: {
+    filters: {
+      changed: false,
+      'c.1': true,
+      'c.2': false,
+      'c.3': false,
+    },
+    jobs: [...JOBS_MOVED_MODULE],
+  },
+};
+
+export const ChunkFiltersWithModuleMovedOut: Story = {
+  args: {
+    filters: {
+      changed: false,
+      'c.1': false,
+      'c.2': true,
+      'c.3': false,
+    },
+    jobs: [...JOBS_MOVED_MODULE],
+  },
+};
+
+export const ChunkFiltersWithRemovedChunk: Story = {
+  args: {
+    filters: {
+      changed: false,
+      'c.1': false,
+      'c.2': false,
+      'c.3': true,
+    },
+    jobs: [...JOBS_MOVED_MODULE],
+  },
+};

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

@@ -164,7 +164,7 @@ interface BundleModulesProps extends React.ComponentProps<'div'> {
   moduleMetric: ModuleSizeMetric;
   setModuleMetric: (newValue: ModuleSizeMetric) => void;
 
-  customComponentLink: React.ElementType;
+  customComponentLink?: React.ElementType;
 }
 
 export const BundleModules = (props: BundleModulesProps) => {

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

@@ -65,6 +65,9 @@ interface BundleModulesProps extends Omit<
   | 'totalRowCount'
   | 'hideEntryInfo'
   | 'showEntryInfo'
+  | 'moduleMetric'
+  | 'setModuleMetric'
+  | 'customComponentLink'
 > {
   jobs: Array<Job>;
   filters: Record<string, boolean>;
@@ -73,6 +76,7 @@ interface BundleModulesProps extends Omit<
   setState: (params: any) => void;
   sortBy?: string;
   direction?: SortAction['direction'];
+  customComponentLink?: React.ElementType;
 }
 
 export const BundleModules = (props: BundleModulesProps) => {

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

@@ -0,0 +1,87 @@
+import type React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import merge from 'lodash/merge';
+import set from 'lodash/set';
+import { PACKAGE_FILTERS, createJobs, Job } from '@bundle-stats/utils';
+
+/* 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 { BundlePackages } from '.';
+
+const JOBS = createJobs([{ webpack: currentStats }, { webpack: baselineStats }]);
+const [currentJob, baselineJob] = JOBS;
+
+// BundlePackages is a plain .jsx component with no inline destructuring
+// defaults, so TS can't infer its optional props on its own.
+const TypedBundlePackages = BundlePackages as unknown as React.ComponentType<{
+  jobs: Array<Job>;
+  filters?: Record<string, boolean>;
+  search?: string;
+  sortBy?: string;
+  direction?: string;
+  setState: (params: any) => void;
+}>;
+
+const meta = {
+  title: 'Components/BundlePackages',
+  component: TypedBundlePackages,
+  decorators: [getWrapperDecorator()],
+  args: {
+    setState: () => {},
+  },
+} satisfies Meta<typeof TypedBundlePackages>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    jobs: [baselineJob],
+  },
+};
+
+export const MultipleJobs: Story = {
+  args: {
+    jobs: JOBS,
+  },
+};
+
+export const CustomFilters: Story = {
+  args: {
+    jobs: JOBS,
+    filters: {
+      [PACKAGE_FILTERS.CHANGED]: false,
+      [PACKAGE_FILTERS.DUPLICATE]: true,
+    },
+  },
+};
+
+export const EmptyPackages: Story = {
+  args: {
+    jobs: [
+      set(merge({}, currentJob), 'metrics.webpack.packages', {}),
+      set(merge({}, baselineJob), 'metrics.webpack.packages', {}),
+    ],
+  },
+};
+
+export const EmptyFilteredPackages: Story = {
+  args: {
+    jobs: [
+      set(merge({}, currentJob), 'metrics.webpack.packages', { 'package-a': { value: 100 } }),
+      set(merge({}, baselineJob), 'metrics.webpack.packages', { 'package-a': { value: 100 } }),
+    ],
+  },
+};
+
+const JOBS_EMPTY_BASELINE = createJobs([{ webpack: currentStats }, { webpack: null }]);
+
+export const EmptyBaseline: Story = {
+  args: {
+    jobs: JOBS_EMPTY_BASELINE,
+  },
+};

package/src/components/delta/delta.module.css

@@ -8,16 +8,16 @@
   color: var(--color-info);
 }
 
-.HIGH_NEGATIVE {
-  color: var(--color-red-dark);
+.LOW_NEGATIVE {
+  color: var(--color-red-light);
 }
 
 .NEGATIVE {
-  color: var(--color-red-dark);
+  color: var(--color-red);
 }
 
-.LOW_NEGATIVE {
-  color: var(--color-red-light);
+.HIGH_NEGATIVE {
+  color: var(--color-red-dark);
 }
 
 .LOW_POSITIVE {
@@ -25,7 +25,7 @@
 }
 
 .POSITIVE {
-  color: var(--color-green-dark);
+  color: var(--color-green);
 }
 
 .HIGH_POSITIVE {
@@ -43,24 +43,25 @@
   background: var(--color-info-light);
 }
 
-.inverted.HIGH_NEGATIVE {
-  background: var(--color-red-dark);
+.inverted.LOW_NEGATIVE {
+  background: var(--color-red-light);
 }
 
 .inverted.NEGATIVE {
-  background: var(--color-red-dark);
+  background: var(--color-red);
 }
 
-.inverted.LOW_NEGATIVE {
-  background: var(--color-red-light);
+.inverted.HIGH_NEGATIVE {
+  background: var(--color-red-dark);
 }
 
+
 .inverted.LOW_POSITIVE {
   background: var(--color-green-light);
 }
 
 .inverted.POSITIVE {
-  background: var(--color-green-dark);
+  background: var(--color-green);
 }
 
 .inverted.HIGH_POSITIVE {

package/src/components/delta/delta.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Delta } from '.';
+
+const meta = {
+  title: 'Components/Delta',
+  component: Delta,
+  decorators: [getWrapperDecorator()],
+} satisfies Meta<typeof Delta>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    displayValue: '20%',
+    deltaType: 'POSITIVE',
+  },
+};
+
+export const Negative: Story = {
+  args: {
+    displayValue: '20%',
+    deltaType: 'NEGATIVE',
+  },
+};
+
+export const SlightlyNegative: Story = {
+  args: {
+    displayValue: '1%',
+    deltaType: 'LOW_NEGATIVE',
+  },
+};
+
+export const SlightlyPositive: Story = {
+  args: {
+    displayValue: '1%',
+    deltaType: 'LOW_POSITIVE',
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    displayValue: '0%',
+    deltaType: 'NO_CHANGE',
+  },
+};
+
+export const Inverted: Story = {
+  args: {
+    displayValue: '1%',
+    deltaType: 'LOW_NEGATIVE',
+    inverted: true,
+  },
+};

package/src/components/delta/delta.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import cx from 'classnames';
+import type { MetricRunInfoDeltaType } from '@bundle-stats/utils';
+
+import css from './delta.module.css';
+
+export interface DeltaProps {
+  /**
+   * Formatted delta value
+   */
+  displayValue: string;
+  /**
+   * Delta type - drives the color scale
+   */
+  deltaType: MetricRunInfoDeltaType;
+  /**
+   * Inverted variant - render the delta type as background color
+   */
+  inverted?: boolean;
+}
+
+export const Delta = (props: DeltaProps & React.ComponentProps<'span'>) => {
+  const { className = '', displayValue, deltaType, inverted = false, ...restProps } = props;
+
+  const rootClassName = cx(css.root, className, inverted && css.inverted, css[deltaType]);
+
+  return (
+    <span className={rootClassName} {...restProps}>
+      {displayValue}
+    </span>
+  );
+};

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

@@ -1,15 +1,10 @@
 import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { action } from 'storybook/actions';
 
 import { getWrapperDecorator } from '../../stories';
 import { EntryInfo } from '.';
 
-export default {
-  title: 'Components/EntryInfo',
-  component: EntryInfo,
-  decorators: [getWrapperDecorator()],
-};
-
 const RUNS = [
   {
     name: 'static/vendor.abcd1234.js',
@@ -22,54 +17,54 @@ const RUNS = [
   },
 ];
 
-export const Default = () => (
-  <EntryInfo
-    item={{
-      label: 'static/vendor.js',
-      runs: RUNS as any,
-    }}
-    labels={['Job #2', 'Job #1']}
-    onClose={action('CLOSE')}
-  />
-);
+const ITEM = {
+  key: 'static/vendor.js',
+  label: 'static/vendor.js',
+  biggerIsBetter: false,
+  changed: true,
+};
+
+const meta = {
+  title: 'Components/EntryInfo',
+  component: EntryInfo,
+  decorators: [getWrapperDecorator()],
+  args: {
+    item: { ...ITEM, runs: RUNS as any },
+    labels: ['Job #2', 'Job #1'],
+    onClose: action('CLOSE'),
+  },
+} satisfies Meta<typeof EntryInfo>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Added = () => (
-  <EntryInfo
-    item={{
-      label: 'static/vendor.js',
-      runs: [RUNS[0], null] as any,
-    }}
-    labels={['Job #2', 'Job #1']}
-    onClose={action('CLOSE')}
-  />
-);
+export const Default: Story = {};
+
+export const Added: Story = {
+  args: {
+    item: { ...ITEM, runs: [RUNS[0], null] as any },
+  },
+};
 
-export const Removed = () => (
-  <EntryInfo
-    item={{
-      label: 'static/vendor.js',
-      runs: [null, RUNS[1]] as any,
-    }}
-    labels={['Job #2', 'Job #1']}
-    onClose={action('CLOSE')}
-  />
-);
+export const Removed: Story = {
+  args: {
+    item: { ...ITEM, runs: [null, RUNS[1]] as any },
+  },
+};
 
-export const WithCustomContent = () => (
-  <EntryInfo
-    item={{
-      label: 'static/vendor.js',
-      runs: RUNS as any,
-    }}
-    labels={['Job #2', 'Job #1']}
-    tags={<span>Critical tags</span>}
-    onClose={action('CLOSE')}
-  >
-    <div>
-      <EntryInfo.Meta label="Meta 1">value 1</EntryInfo.Meta>
-      <EntryInfo.Meta label="Meta 2">value 2</EntryInfo.Meta>
-    </div>
-    <div>custom entry info 1</div>
-    <div>custom entry info 2</div>
-  </EntryInfo>
-);
+export const WithCustomContent: Story = {
+  args: {
+    tags: <span>Critical tags</span>,
+  },
+  render: (args) => (
+    <EntryInfo {...args}>
+      <div>
+        <EntryInfo.Meta label="Meta 1">value 1</EntryInfo.Meta>
+        <EntryInfo.Meta label="Meta 2">value 2</EntryInfo.Meta>
+      </div>
+      <div>custom entry info 1</div>
+      <div>custom entry info 2</div>
+    </EntryInfo>
+  ),
+};

package/src/components/{index.js → index.ts}

@@ -5,16 +5,21 @@ export { BundlePackages } from './bundle-packages';
 export { BundleModules } from './bundle-modules';
 export { ComponentLink } from './component-link';
 export { Delta } from './delta';
+export type { DeltaProps } from './delta';
 export { InsightIcon } from './insight-icon';
 export { Insights } from './insights';
 export { JobName } from './job-name';
 export { JobsHeader } from './jobs-header';
 export { LighthouseTable } from './lighthouse-table';
 export { Metric } from './metric';
-export { MetricRunInfo, MetricRunInfoProps } from './metric-run-info';
+export { MetricChangeLegend } from './metric-change-legend';
+export type { MetricChangeLegendProps } from './metric-change-legend';
+export { MetricRunInfo } from './metric-run-info';
+export type { MetricRunInfoProps } from './metric-run-info';
 export { MetricsTable } from './metrics-table';
 export { MetricsTableOptions } from './metrics-table-options';
 export { MetricsTableTitle } from './metrics-table-title';
 export { ModuleInfo } from './module-info';
-export { RunInfo, RunInfoProps } from './run-info';
+export { RunInfo } from './run-info';
+export type { RunInfoProps } from './run-info';
 export { Summary } from './summary';

package/src/components/insight-icon/insight-icon.module.css

@@ -1,20 +1,20 @@
 .root {
-  width: calc(var(--space-small) + 6px);
-  height: calc(var(--space-small) + 6px);
-  padding: 3px;
+  width: calc(var(--space-small) + var(--space-xxsmall));
+  height: calc(var(--space-small) + var(--space-xxsmall));
+  padding: var(--space-xxxsmall);
   border-radius: 50%;
   background: var(--color-highlight);
 }
 
 .error {
-  background: var(--color-red-50);
+  background: var(--color-highlight-danger);
   color: var(--color-danger);
 }
 
 .warning {
   padding-top: 1px;
-  background: var(--color-yellow-100);
-  color: var(--color-yellow-900);
+  background: var(--color-highlight-warning);
+  color: var(--color-warning);
 }
 
 .info {