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

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

@@ -1,23 +1,20 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { action } from 'storybook/actions';
 
 import { getWrapperDecorator } from '../../stories';
 import { AssetInfo } from '.';
 
-export default {
-  title: 'Components/AssetInfo',
-  component: AssetInfo,
-  decorators: [getWrapperDecorator()],
-} as Meta;
-
 const ITEM = {
+  key: 'static/vendor.js',
   label: 'static/vendor.js',
+  biggerIsBetter: false,
   changed: true,
+  isAsset: true,
   isChunk: true,
   isEntry: true,
   isInitial: true,
   isNotPredictive: false,
+  fileType: '',
   runs: [
     {
       name: 'static/vendor.abcd1234.js',
@@ -33,42 +30,53 @@ const ITEM = {
   ],
 };
 
-const Template = (props: Pick<React.ComponentProps<typeof AssetInfo>, 'chunks'>) => (
-  <AssetInfo item={ITEM} labels={['Job #2', 'Job #1']} onClose={action('CLOSE')} {...props} />
-);
+const meta = {
+  title: 'Components/AssetInfo',
+  component: AssetInfo,
+  decorators: [getWrapperDecorator()],
+  args: {
+    item: ITEM,
+    labels: ['Job #2', 'Job #1'],
+    onClose: action('CLOSE'),
+  },
+} satisfies Meta<typeof AssetInfo>;
 
-export const Default: Story = Template.bind({});
+export default meta;
 
-export const WithChunks: Story = Template.bind({});
+type Story = StoryObj<typeof meta>;
 
-WithChunks.args = {
-  chunks: [
-    {
-      id: '1',
-      name: 'vendor',
-    },
-    {
-      id: '2',
-      name: 'app~common~utils~shared',
-    },
-  ],
-};
+export const Default: Story = {};
 
-export const WithFileType: Story = Template.bind({});
+export const WithChunks: Story = {
+  args: {
+    chunks: [
+      {
+        id: '1',
+        name: 'vendor',
+      },
+      {
+        id: '2',
+        name: 'app~common~utils~shared',
+      },
+    ],
+  },
+};
 
-WithFileType.args = {
-  chunks: [
-    {
-      id: '1',
-      name: 'vendor',
+export const WithFileType: Story = {
+  args: {
+    chunks: [
+      {
+        id: '1',
+        name: 'vendor',
+      },
+      {
+        id: '2',
+        name: 'app~common~utils~shared',
+      },
+    ],
+    item: {
+      ...ITEM,
+      fileType: 'JS',
     },
-    {
-      id: '2',
-      name: 'app~common~utils~shared',
-    },
-  ],
-  item: {
-    ...ITEM,
-    fileType: 'JS',
   },
 };

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

@@ -23,9 +23,7 @@ const meta = {
   title: 'Components/AssetName',
   component: AssetName,
   args: {
-    customComponentLink: 'span',
-    filters: {},
-    search: '',
+    EntryComponentLink: 'span',
   },
 } as Meta<typeof AssetName>;
 

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

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

package/src/components/browsertime-table/browsertime-table.stories.tsx

@@ -0,0 +1,45 @@
+import type React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { createJobs, Job } from '@bundle-stats/utils';
+import * as browsertime from '@bundle-stats/utils/lib-esm/browsertime';
+
+// eslint-disable-next-line import/no-relative-packages
+import browsertimeSourceFixtures from '../../../../../fixtures/browsertime.json';
+import { getWrapperDecorator } from '../../stories';
+import { BrowsertimeTable } from '.';
+
+const browsertimeFixtures = browsertime.filter(browsertimeSourceFixtures);
+
+const JOBS = createJobs([
+  { browsertime: browsertimeFixtures },
+  { browsertime: browsertimeFixtures },
+]);
+
+// BrowsertimeTable 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 TypedBrowsertimeTable = BrowsertimeTable as unknown as React.ComponentType<{
+  className?: string;
+  jobs?: Array<Job>;
+}>;
+
+const meta = {
+  title: 'Components/BrowsertimeTable',
+  component: TypedBrowsertimeTable,
+  decorators: [getWrapperDecorator()],
+} satisfies Meta<typeof TypedBrowsertimeTable>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    jobs: JOBS,
+  },
+};
+
+export const NoBaseline: Story = {
+  args: {
+    jobs: [JOBS[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.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,
+  },
+};