refactor(ui): bundle-assets - convert to ts

relative-ci · Nov 16, 2024 · 13c7de0 · 13c7de0
1 parent 41173b4
commit 13c7de0
Show file tree

Hide file tree

Showing 5 changed files with 318 additions and 292 deletions.
diff --git a/packages/ui/src/components/bundle-assets/bundle-assets.jsx b/packages/ui/src/components/bundle-assets/bundle-assets.jsx
@@ -1,19 +1,8 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import get from 'lodash/get';
-import isEmpty from 'lodash/isEmpty';
-import orderBy from 'lodash/orderBy';
 import escapeRegExp from 'lodash/escapeRegExp';
-import {
-  ASSET_CHUNK,
-  ASSET_ENTRY_TYPE,
-  ASSET_FILE_TYPE,
-  ASSET_FILTERS,
-  COMPONENT,
-  FILE_TYPE_LABELS,
-  SECTIONS,
-} from '@bundle-stats/utils';
+import { COMPONENT, SECTIONS } from '@bundle-stats/utils';
 
 import config from '../../config.json';
 import I18N from '../../i18n';
@@ -29,6 +18,7 @@ import { Filters } from '../../ui/filters';
 import { EmptySet } from '../../ui/empty-set';
 import { Toolbar } from '../../ui/toolbar';
 import { AssetInfo } from '../asset-info';
+import { AssetName } from '../asset-name';
 import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
 import { MetricsTableExport } from '../metrics-table-export';
@@ -38,78 +28,13 @@ import { MetricsDisplaySelector } from '../metrics-display-selector';
 import { MetricsTableHeader } from '../metrics-table-header';
 import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '../metrics-treemap';
 import { SEARCH_PLACEHOLDER } from './bundle-assets.i18n';
+import { getFilters } from './bundle-assets.utils';
 import css from './bundle-assets.module.css';
-import { AssetName } from '../asset-name';
 
 const DISPLAY_TYPE_GROUPS = {
   [MetricsDisplayType.TREEMAP]: ['folder'],
 };
 
-const getFileTypeFilters = (filters) =>
-  Object.entries(FILE_TYPE_LABELS).map(([key, label]) => ({
-  key,
-  label,
-  defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true),
-}));
-
-const getFilters = ({ compareMode, filters, chunks }) => {
-  const result = {
-    [ASSET_FILTERS.CHANGED]: {
-      label: 'Changed',
-      defaultValue: filters[ASSET_FILTERS.CHANGED],
-      disabled: !compareMode,
-    },
-  };
-
-  if (!isEmpty(chunks)) {
-    const chunksFilter = { label: 'Chunks', children: [] };
-    const chunksOrderedByName = orderBy(chunks, 'name');
-
-    chunksOrderedByName.forEach((chunk) => {
-      chunksFilter.children.push({
-        key: chunk.id,
-        label: chunk.name,
-        defaultValue: filters[`${ASSET_CHUNK}.${chunk.id}`] ?? true,
-      });
-    });
-
-    result[ASSET_CHUNK] = chunksFilter;
-  }
-
-  result[ASSET_ENTRY_TYPE] = {
-    label: 'Type',
-    children: [
-      {
-        key: ASSET_FILTERS.ENTRY,
-        label: 'Entry',
-        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`, true),
-      },
-      {
-        key: ASSET_FILTERS.INITIAL,
-        label: 'Initial',
-        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`, true),
-      },
-      {
-        key: ASSET_FILTERS.CHUNK,
-        label: 'Chunk',
-        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`, true),
-      },
-      {
-        key: ASSET_FILTERS.OTHER,
-        label: 'Other',
-        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.OTHER}`, true),
-      },
-    ],
-  };
-
-  result[ASSET_FILE_TYPE] = {
-    label: 'File type',
-    children: getFileTypeFilters(filters),
-  };
-
-  return result;
-};
-
 const ViewMetricsTreemap = (props) => {
   const {
     metricsTableTitle,

diff --git a/...s/bundle-assets/bundle-assets.stories.jsx → ...s/bundle-assets/bundle-assets.stories.tsx b/...s/bundle-assets/bundle-assets.stories.jsx → ...s/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}
-  />
-);
+    ],
+  },
+};