Assets chunks filter

packages/ui/src/components/asset-info/asset-info.tsx

@@ -2,15 +2,14 @@ import type { ComponentProps, ElementType, ReactNode } from 'react';
 import React, { useMemo } from 'react';
 import cx from 'classnames';
 import noop from 'lodash/noop';
+import type { WebpackChunk } from '@bundle-stats/utils';
 import {
   FILE_TYPE_LABELS,
-  MetricRunInfo,
   getBundleModulesByChunk,
   getBundleAssetsByEntryType,
   getBundleAssetsFileTypeComponentLink,
   getModuleFileType,
 } from '@bundle-stats/utils';
-import type { AssetMetricRun, MetaChunk } from '@bundle-stats/utils/types/webpack';
 
 import type { ReportMetricAssetRow } from '../../types';
 import { FlexStack } from '../../layout/flex-stack';
@@ -21,7 +20,7 @@ import css from './asset-info.module.css';
 
 interface ChunkModulesLinkProps {
   as: ElementType;
-  chunks: Array<MetaChunk>;
+  chunks: Array<WebpackChunk>;
   chunkId: string;
   name: string;
 }
@@ -74,17 +73,8 @@ const AssetRunName = (props: AssetRunNameProps) => {
 };
 
 interface AssetInfoProps {
-  item: {
-    label: string;
-    changed?: boolean;
-    isChunk?: boolean;
-    isEntry?: boolean;
-    isInitial?: boolean;
-    isNotPredictive?: boolean;
-    fileType?: string;
-    runs: Array<AssetMetricRun & MetricRunInfo>;
-  };
-  chunks?: Array<MetaChunk>;
+  item: ReportMetricAssetRow;
+  chunks?: Array<WebpackChunk>;
   labels: Array<string>;
   customComponentLink?: ElementType;
   onClose: () => void;

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

@@ -41,7 +41,7 @@ describe('BundleAssets / addMetricReportAssetRowData', () => {
     });
   });
 
-  test('should add add data when baseline run is null', () => {
+  test('should add data when baseline run is null', () => {
     expect(
       addMetricReportAssetRowData({
         key: 'assets/main.js',
@@ -83,7 +83,7 @@ describe('BundleAssets / addMetricReportAssetRowData', () => {
     });
   });
 
-  test('should add add data when curent run is null', () => {
+  test('should add data when current run is null', () => {
     expect(
       addMetricReportAssetRowData({
         key: 'assets/main.js',

packages/ui/src/components/bundle-assets/bundle-assets.stories.jsx → packages/ui/src/components/bundle-assets/bundle-assets.stories.tsx

@@ -8,6 +8,8 @@ import {
 } from '@bundle-stats/utils';
 import merge from 'lodash/merge';
 import set from 'lodash/set';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 
 /* eslint-disable import/no-relative-packages */
 import baselineStats from '../../../../../fixtures/webpack-stats.baseline.json';
@@ -20,52 +22,66 @@ const JOBS = createJobs([{ webpack: currentStats }, { webpack: baselineStats }])
 const [currentJob, baselineJob] = JOBS;
 const setState = (params) => console.info(params);
 
-export default {
+const meta: Meta<typeof BundleAssets> = {
   title: 'Components/BundleAssets',
   component: BundleAssets,
   decorators: [getWrapperDecorator()],
+  args: {
+    setState: action('STATE'),
+  },
 };
 
-export const Default = () => <BundleAssets jobs={[baselineJob]} setState={setState} />;
+export default meta;
 
-export const MultipleJobs = () => <BundleAssets jobs={JOBS} setState={setState} />;
+type Story = StoryObj<typeof BundleAssets>;
 
-export const CustomFilters = () => (
-  <BundleAssets
-    jobs={JOBS}
-    filters={{
+export const Default: Story = {
+  args: {
+    jobs: [baselineJob],
+  },
+};
+
+export const MultipleJobs: Story = {
+  args: {
+    jobs: JOBS,
+  },
+};
+
+export const CustomFilters: Story = {
+  args: {
+    jobs: JOBS,
+    filters: {
       [`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`]: true,
       [`${ASSET_FILE_TYPE}.${FILE_TYPE_JS}`]: true,
-    }}
-    setState={setState}
-  />
-);
-
-const JOBS_EMPTY_BASELINE = createJobs([{ webpack: currentStats }, {}]);
+    },
+  },
+};
 
-export const EmptyBaseline = () => <BundleAssets jobs={JOBS_EMPTY_BASELINE} setState={setState} />;
+export const EmptyBaseline: Story = {
+  args: {
+    jobs: createJobs([{ webpack: currentStats }, {}]),
+  },
+};
 
-export const NoAssets = () => (
-  <BundleAssets
-    jobs={JOBS.map((job) => set(merge({}, job), 'metrics.webpack.assets', {}))}
-    setState={setState}
-  />
-);
+export const NoAssets: Story = {
+  args: {
+    jobs: JOBS.map((job) => set(merge({}, job), 'metrics.webpack.assets', {})),
+  },
+};
 
-export const EmptyFilteredData = () => (
-  <BundleAssets
-    jobs={[
+export const EmptyFilteredData: Story = {
+  args: {
+    jobs: [
       set(merge({}, currentJob), 'metrics.webpack.assets', { 'main.js': { value: 100 } }),
       set(merge({}, baselineJob), 'metrics.webpack.assets', { 'main.js': { value: 100 } }),
-    ]}
-    search="vendors"
-    setState={setState}
-  />
-);
+    ],
+    search: 'vendors',
+  },
+};
 
-export const NotPredictive = () => (
-  <BundleAssets
-    jobs={[
+export const NotPredictive: Story = {
+  args: {
+    jobs: [
       set(merge({}, currentJob), 'metrics.webpack.assets', {
         'static/js/not-predictive.js': {
           name: 'static/js/not-predictive.93191a1.js',
@@ -78,7 +94,6 @@ export const NotPredictive = () => (
           value: 2988,
         },
       }),
-    ]}
-    setState={setState}
-  />
-);
+    ],
+  },
+};