@bundle-stats/ui 4.16.0 → 4.17.0-beta.0

package/src/components/bundle-assets/bundle-assets.module.css

@@ -3,70 +3,6 @@
   max-width: 240px;
 }
 
-.assetNameWrapper {
-}
-
-.assetName {}
-
-.notPredictive {
-  margin-right: var(--space-xxsmall);
-  display: inline-block;
-  width: var(--space-small);
-  height: var(--space-small);
-}
-
-.notPredictiveAnchor {}
-
-.notPredictiveIcon {
-  color: var(--color-warning-dark);
-}
-
-.assetNameTags {
-  display: inline;
-  margin-right: var(--space-xxxsmall);
-}
-
-.assetNameTags:empty {
-  display: none;
-}
-
-.assetNameTag {
-  vertical-align: middle;
-}
-
-.assetNameTag + .assetNameTag {
-  margin-left: 2px;
-}
-
-.assetNameTagEntry {
-  background: var(--color-info-dark);
-}
-
-.assetNameTagEntry::before {
-  content: 'e';
-}
-
-.assetNameTagInitial {
-  background: var(--color-info);
-}
-
-.assetNameTagInitial::before {
-  content: 'i';
-}
-
-.assetNameTagChunk {
-  background: var(--color-info-light);
-}
-
-.assetNameTagChunk::before {
-  content: 'c';
-}
-
-.assetNameText {
-  display: inline-block;
-  vertical-align: middle;
-}
-
 .root .assetName:hover,
 .root .assetName:active,
 .root .assetName:focus {

package/src/components/bundle-assets/bundle-assets.utils.js

@@ -1,26 +1,21 @@
-import { ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, getFileType } from '@bundle-stats/utils';
-
-export const addRowAssetFlags = (row) => {
-  const { runs } = row;
+/**
+ * @type {import('@bundle-stats/utils').ReportMetricRow} ReportMetricRow
+ * @type {import('../../types').ReportMetricAssetRow} ReportMetricAssetRow
+ * @type {import('../../types').ReportMetricAssetRowMetaStatus} ReportMetricAssetRowFlagStatus
+ */
 
-  const isEntry = runs.map((run) => run?.isEntry).includes(true);
-  const isInitial = runs.map((run) => run?.isInitial).includes(true);
-  const isChunk = runs.map((run) => run?.isChunk).includes(true);
-  const isAsset = !(isEntry || isInitial || isChunk);
-  const fileType = getFileType(row.key);
+import { ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, getFileType } from '@bundle-stats/utils';
 
-  return {
-    ...row,
-    isEntry,
-    isInitial,
-    isChunk,
-    isAsset,
-    fileType,
-  };
-};
+/**
+ * Check if the asset cache is not predictive
+ *
+ * @param {ReportMetricRow} row
+ * @returns {boolean}
+ */
+export const getIsNotPredictive = (row) => {
+  const { key, runs } = row;
 
-export const getIsNotPredictive = (key, runs) =>
-  runs.reduce((agg, current, index) => {
+  return runs.reduce((agg, current, index) => {
     if (agg) {
       return agg;
     }
@@ -32,20 +27,86 @@ export const getIsNotPredictive = (key, runs) =>
     if (
       current &&
       runs[index + 1] &&
-      current.delta !== 0 &&
       key !== current.name &&
-      current.name === runs[index + 1].name
+      current.name === runs[index + 1].name &&
+      current.value !== runs[index + 1].value
     ) {
       return true;
     }
 
     return agg;
   }, false);
+};
+
+/**
+ * @param {Array<boolean>}
+ * @returns {ReportMetricAssetRowFlagStatus | boolean}
+ */
+export const getAssetMetaStatus = (values) => {
+  if (!values.includes(true)) {
+    return false;
+  }
+
+  // filter empty runs
+  const metaValues = values.filter((value) => typeof value !== 'undefined');
+
+  const current = metaValues[0];
+  const metaValuesLength = metaValues.length;
+
+  if (metaValuesLength === 1) {
+    return Boolean(current);
+  }
+
+  const baseline = metaValues[metaValuesLength - 1];
 
-export const addRowIsNotPredictive = (row) => ({
-  ...row,
-  isNotPredictive: getIsNotPredictive(row.key, row.runs),
-});
+  if (current && !baseline) {
+    return 'added';
+  }
+
+  if (!current && baseline) {
+    return 'removed';
+  }
+
+  return true;
+};
+
+/**
+ * Add asset row flags
+ *
+ * @param {ReportMetricRow} row
+ * @returns {ReportMetricAssetRow}
+ */
+export const addMetricReportAssetRowData = (row) => {
+  const { runs } = row;
+
+  // Collect meta for each run
+  const runsEntry = [];
+  const runsInitial = [];
+  const runsChunk = [];
+
+  runs.forEach((run) => {
+    runsEntry.push(run?.isEntry);
+    runsInitial.push(run?.isInitial);
+    runsChunk.push(run?.isChunk);
+  });
+
+  const isEntry = getAssetMetaStatus(runsEntry);
+  const isInitial = getAssetMetaStatus(runsInitial);
+  const isChunk = getAssetMetaStatus(runsChunk);
+  const isAsset = !(isEntry || isInitial || isChunk);
+  const isNotPredictive = getIsNotPredictive(row);
+  const fileType = getFileType(row.key);
+
+  return {
+    ...row,
+    isEntry,
+    isInitial,
+    isChunk,
+    isAsset,
+    isNotPredictive,
+    fileType,
+  };
+};
 
 export const getRowFilter = (filters) => (item) => {
   if (filters[ASSET_FILTERS.CHANGED] && !item.changed) {

package/src/components/bundle-assets/index.jsx

@@ -13,12 +13,7 @@ import { useSearchParams } from '../../hooks/search-params';
 import { useEntryInfo } from '../../hooks/entry-info';
 import { getJobsChunksData } from '../../utils/jobs';
 import { BundleAssets as BundleAssetsComponent } from './bundle-assets';
-import {
-  addRowAssetFlags,
-  addRowIsNotPredictive,
-  getRowFilter,
-  getCustomSort,
-} from './bundle-assets.utils';
+import { addMetricReportAssetRowData, getRowFilter, getCustomSort } from './bundle-assets.utils';
 
 export const BundleAssets = (props) => {
   const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
@@ -50,7 +45,7 @@ export const BundleAssets = (props) => {
   });
 
   const { rows, totalRowCount } = useMemo(() => {
-    const result = webpack.compareBySection.assets(jobs, [addRowAssetFlags, addRowIsNotPredictive]);
+    const result = webpack.compareBySection.assets(jobs, [addMetricReportAssetRowData]);
     return { rows: result, totalRowCount: result.length };
   }, [jobs]);
 

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

@@ -145,12 +145,7 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
                     </Table.Th>
                     <Table.Td className={cx(css.runsCell, css.runsColName)}>
                       {rowRun?.[runNameSelector] ? (
-                        <FlexStack
-                          space="xxxsmall"
-                          alignItems="center"
-                          as="h3"
-                          className={css.label}
-                        >
+                        <FlexStack space="xxxsmall" alignItems="center" className={css.label}>
                           <FileName
                             as="code"
                             name={rowRun[runNameSelector]}

package/src/components/metrics-treemap/metrics-treemap.utils.ts

@@ -141,7 +141,6 @@ export function getTreemapNodesGroupedByPath(items: Array<ReportMetricRow>): Tre
     };
 
     const childrenTotal = setTreeNode(treeNodes, baseSlugs, 0, treeNode);
-    console.log(childrenTotal);
 
     total.current += childrenTotal.current;
     total.baseline =

package/src/stories/wrapper.jsx

@@ -1,19 +1,25 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 
-export const getWrapperDecorator = (customWrapperStyles = {}) => (storyFn) => {
-  const wrapperStyles = {
-    width: '100%',
-    height: '100%',
-    padding: '24px',
-    ...customWrapperStyles,
-  };
+import { QueryStateProvider } from '../query-state';
+
+export const getWrapperDecorator =
+  (customWrapperStyles = {}) =>
+  (Story) => {
+    const wrapperStyles = {
+      width: '100%',
+      height: '100%',
+      padding: '24px',
+      ...customWrapperStyles,
+    };
 
-  return (
-    <MemoryRouter initialEntries={[{ pathname: '/', key: 'home' }]}>
-      <div style={wrapperStyles}>
-        {storyFn()}
-      </div>
-    </MemoryRouter>
-  );
-};
+    return (
+      <MemoryRouter initialEntries={[{ pathname: '/', key: 'home' }]}>
+        <QueryStateProvider>
+          <div style={wrapperStyles}>
+            <Story />
+          </div>
+        </QueryStateProvider>
+      </MemoryRouter>
+    );
+  };

package/src/types.d.ts

@@ -1,5 +1,5 @@
 import type { ReportMetricRow } from '@bundle-stats/utils';
-import type { Module } from '@bundle-stats/utils/types/webpack/types';
+import type { Asset, Module } from '@bundle-stats/utils/types/webpack/types';
 
 export interface SortAction {
   field: string;
@@ -19,6 +19,35 @@ type FilterGroupFieldData = {
 
 type FilterFieldsData = Record<string, FilterFieldData | FilterGroupFieldData>;
 
+export type ReportMetricAssetRowMetaStatus = 'added' | 'removed';
+
+export type ReportMetricAssetRow = {
+  /**
+   * Asset isEntry - at least one run has isEntry truthy
+   */
+  isEntry: ReportMetricAssetRowMetaStatus | boolean;
+  /**
+   * Asset isInitial - at least one run has isInitial truthy
+   */
+  isInitial: ReportMetricAssetRowMetaStatus | boolean;
+  /**
+   * Asset isChunk - at least one run has isChunk truthy
+   */
+  isChunk: ReportMetricAssetRowMetaStatus | boolean;
+  /**
+   * Asset isAsset - at least one run has isAsset truthy
+   */
+  isAsset: boolean;
+  /**
+   * Asset name is not predictive
+   */
+  isNotPredictive: boolean;
+  /**
+   * Report asset row isEntry - at least one run has isEntry
+   */
+  fileType: string;
+} & Omit<ReportMetricRow, 'runs'> & { runs: Array<(Asset & ReportMetricRun) | null> };
+
 export type ReportMetricModuleRow = {
   thirdParty: boolean;
   duplicated: boolean;

package/src/ui/tag/tag.tsx

@@ -1,16 +1,17 @@
+import type { ComponentProps } from 'react';
 import React from 'react';
 import cx from 'classnames';
 
 import { KIND, SIZE } from '../../tokens';
 import css from './tag.module.css';
 
-interface TagProps {
+export type TagProps = {
   as?: React.ElementType;
   kind?: (typeof KIND)[keyof typeof KIND];
   size?: (typeof SIZE)[keyof typeof SIZE];
-}
+} & ComponentProps<'span'>;
 
-export const Tag = (props: TagProps & React.ComponentProps<'span'>) => {
+export const Tag = (props: TagProps) => {
   const {
     className = '',
     as: Component = 'span',

package/types/components/asset-meta-tag/asset-meta-tag.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { TagProps } from '../../ui/tag';
+import type { ReportMetricAssetRowMetaStatus } from '../../types';
+export type AssetMetaTagProps = {
+    tag: 'entry' | 'initial' | 'chunk';
+    status: ReportMetricAssetRowMetaStatus | boolean;
+} & TagProps;
+export declare const AssetMetaTag: (props: AssetMetaTagProps) => React.JSX.Element;

package/types/components/asset-meta-tag/index.d.ts

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

package/types/components/asset-name/asset-name.d.ts

@@ -0,0 +1,8 @@
+import React, { ElementType } from 'react';
+import { ReportMetricAssetRow } from '../../types';
+export type AssetNameProps = {
+    className?: string;
+    row: ReportMetricAssetRow;
+    customComponentLink: ElementType;
+};
+export declare const AssetName: (props: AssetNameProps) => React.JSX.Element;

package/types/components/asset-name/index.d.ts

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

package/types/components/asset-not-predictive/asset-not-predictive.d.ts

@@ -1,8 +1,8 @@
+import type { ComponentProps } from 'react';
 import React from 'react';
 import type { Asset } from '@bundle-stats/utils/types/webpack';
-interface AssetNotPredictiveProps {
+export type AssetNotPredictiveProps = {
     runs?: Array<Asset>;
     labels?: Array<string>;
-}
-export declare const AssetNotPredictive: (props: AssetNotPredictiveProps & React.ComponentProps<"div">) => React.JSX.Element;
-export {};
+} & ComponentProps<'div'>;
+export declare const AssetNotPredictive: (props: AssetNotPredictiveProps) => React.JSX.Element;

package/types/components/bundle-assets/bundle-assets.utils.d.ts

@@ -1,5 +1,5 @@
-export function addRowAssetFlags(row: any): any;
-export function getIsNotPredictive(key: any, runs: any): any;
-export function addRowIsNotPredictive(row: any): any;
+export function getIsNotPredictive(row: ReportMetricRow): boolean;
+export function getAssetMetaStatus(values: any): ReportMetricAssetRowFlagStatus | boolean;
+export function addMetricReportAssetRowData(row: ReportMetricRow): ReportMetricAssetRow;
 export function getRowFilter(filters: any): (item: any) => boolean;
 export function getCustomSort(item: any): any[];

package/types/stories/wrapper.d.ts

@@ -1,2 +1,2 @@
-export function getWrapperDecorator(customWrapperStyles?: {}): (storyFn: any) => React.JSX.Element;
+export function getWrapperDecorator(customWrapperStyles?: {}): (Story: any) => React.JSX.Element;
 import React from 'react';

package/types/ui/tag/tag.d.ts

@@ -1,12 +1,13 @@
+import type { ComponentProps } from 'react';
 import React from 'react';
 import { KIND, SIZE } from '../../tokens';
-interface TagProps {
+export type TagProps = {
     as?: React.ElementType;
     kind?: (typeof KIND)[keyof typeof KIND];
     size?: (typeof SIZE)[keyof typeof SIZE];
-}
+} & ComponentProps<'span'>;
 export declare const Tag: {
-    (props: TagProps & React.ComponentProps<"span">): React.JSX.Element;
+    (props: TagProps): React.JSX.Element;
     KINDS: {
         readonly DEFAULT: "default";
         readonly SUCCESS: "success";
@@ -20,4 +21,3 @@ export declare const Tag: {
         readonly LARGE: "large";
     };
 };
-export {};