@bundle-stats/ui 4.13.0-rc.0 → 4.13.0-rc.2

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './colors';
+export * from './jobs';
+export * from './components';

package/src/utils/jobs.ts

@@ -0,0 +1,22 @@
+import uniqBy from 'lodash/uniqBy';
+
+import type { Job, WebpackChunk } from '@bundle-stats/utils';
+
+interface GetJobsChunksData {
+  chunks: Array<WebpackChunk>;
+  chunkIds: Array<string>;
+}
+
+/**
+ * Get chunks data from all jobs
+ */
+export function getJobsChunksData(jobs: Array<Job>): GetJobsChunksData {
+  const jobChunks = jobs.map((job) => job?.meta?.webpack?.chunks || []);
+  const chunks = uniqBy(jobChunks.flat(), ({ id }) => id);
+  const chunkIds = chunks?.map(({ id }) => id);
+
+  return {
+    chunks,
+    chunkIds,
+  };
+}

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

@@ -13,12 +13,8 @@ export namespace BundleAssets {
         export let jobs: PropTypes.Validator<(PropTypes.InferProps<{
             internalBuildNumber: PropTypes.Requireable<number>;
             label: PropTypes.Requireable<string>;
-            meta: PropTypes.Requireable<PropTypes.InferProps<{
-                webpack: PropTypes.Requireable<PropTypes.InferProps<{
-                    chunks: PropTypes.Requireable<any[]>;
-                }>>;
-            }>>;
         }> | null | undefined)[]>;
+        export let chunks: PropTypes.Validator<any[]>;
         export let items: PropTypes.Validator<(PropTypes.InferProps<{
             key: PropTypes.Requireable<string>;
             label: PropTypes.Requireable<string>;

package/types/components/bundle-modules/bundle-modules.d.ts

@@ -1,12 +1,14 @@
 import React from 'react';
+import { type Job } from '@bundle-stats/utils';
+import { WebpackChunk } from '@bundle-stats/utils';
 import { SortAction } from '../../types';
 import { ModuleMetric } from './bundle-modules.constants';
-import type { Chunk, Job, ReportMetricModuleRow } from './bundle-modules.types';
+import type { ReportMetricModuleRow } from './bundle-modules.types';
 interface BundleModulesProps extends React.ComponentProps<'div'> {
     jobs?: Array<Job>;
     items?: Array<ReportMetricModuleRow>;
     allItems?: Array<ReportMetricModuleRow>;
-    chunks?: Array<Chunk>;
+    chunks?: Array<WebpackChunk>;
     totalRowCount: number;
     updateFilters: () => void;
     resetFilters: () => void;

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

@@ -1,16 +1,12 @@
-import type { ReportMetricRow } from '@bundle-stats/utils';
+import { type WebpackChunk, type ReportMetricRow } from '@bundle-stats/utils';
 import { type Module } from '@bundle-stats/utils/lib-esm/webpack';
 import type { FilterFieldsData } from '../../types';
-import type { Chunk, Job, ReportMetricModuleRow } from './bundle-modules.types';
+import type { ReportMetricModuleRow } from './bundle-modules.types';
 export declare const addRowFlags: (row: Module & ReportMetricRow) => ReportMetricModuleRow;
 export declare const getCustomSort: (item: ReportMetricRow) => (string | boolean)[];
 export declare const generateGetRowFilter: ({ chunkIds }: {
     chunkIds: Array<string>;
 }) => (filters: Record<string, unknown>) => (row: ReportMetricModuleRow) => boolean;
-export declare const extractChunkData: (jobs: Array<Job>) => {
-    chunks: Chunk[];
-    chunkIds: string[];
-};
 export declare const generateFilters: (chunkIds: Array<string>, multipleJobs: boolean) => {
     defaultFilters: {
         [x: string]: boolean;
@@ -21,7 +17,7 @@ export declare const generateFilters: (chunkIds: Array<string>, multipleJobs: bo
 };
 interface GetFiltersFormDataParams {
     filters: Record<string, boolean>;
-    chunks: Array<Chunk>;
+    chunks: Array<WebpackChunk>;
     compareMode: boolean;
 }
 export declare const generateFilterFieldsData: (params: GetFiltersFormDataParams) => FilterFieldsData;

package/types/components/bundle-modules/index.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
+import type { Job } from '@bundle-stats/utils';
 import type { SortAction } from '../../types';
 import { BundleModules as BaseComponent } from './bundle-modules';
-import * as types from './bundle-modules.types';
 interface BundleModulesProps extends Omit<React.ComponentProps<typeof BaseComponent>, 'jobs' | 'items' | 'chunks' | 'updateFilters' | 'resetFilters' | 'resetAllFilters' | 'filters' | 'sort' | 'updateSort' | 'search' | 'updateSearch' | 'allItems' | 'totalRowCount' | 'hideEntryInfo' | 'showEntryInfo'> {
-    jobs: Array<types.Job>;
+    jobs: Array<Job>;
     filters: Record<string, boolean>;
     search?: string;
     metric?: string;

package/types/components/metrics-treemap/metrics-treemap.constants.d.ts

@@ -18,3 +18,11 @@ export interface Tree {
 }
 export type TreeNode = Tree | TreeLeaf;
 export type TreeNodeChildren = Array<TreeNode>;
+export type TileGroupSizeDisplay = 'minimal' | 'small' | 'default';
+export type TileSizeDisplay = 'minimal' | 'small' | 'default';
+export declare const SQUARIFY_RATIO = 1.66;
+export declare const PADDING_OUTER = 1;
+export declare const PADDING_INNER = 2;
+export declare const NESTED_PADDING = 4;
+export declare const NESTED_PADDING_TOP: number;
+export declare const NESTED_PADDING_LEFT = 8;

package/types/components/metrics-treemap/metrics-treemap.d.ts

@@ -1,5 +1,5 @@
 import React, { type ComponentProps, type ReactNode } from 'react';
-import type { Tree } from './metrics-treemap.constants';
+import { type Tree } from './metrics-treemap.constants';
 interface MetricsTreemapProps {
     treeNodes: Tree;
     emptyMessage?: ReactNode;

package/types/components/metrics-treemap/metrics-treemap.utils.d.ts

@@ -1,5 +1,15 @@
+import { type RefObject } from 'react';
 import { DeltaType, type MetricRunInfoBaseline, type MetricRunInfo, type ReportMetricRow } from '@bundle-stats/utils';
-import type { Tree } from './metrics-treemap.constants';
+import { type Tree, type TileSizeDisplay, type TileGroupSizeDisplay } from './metrics-treemap.constants';
 export declare function getTreemapNodes(items: Array<ReportMetricRow>): Tree;
 export declare function getTreemapNodesGroupedByPath(items: Array<ReportMetricRow>): Tree;
 export declare function resolveGroupDeltaType(metricRunInfo?: MetricRunInfo | MetricRunInfoBaseline): DeltaType.NO_CHANGE | DeltaType.NEGATIVE | DeltaType.POSITIVE;
+export declare function resolveTileGroupSizeDisplay(width: number, height: number): TileGroupSizeDisplay;
+export declare function resolveTileSizeDisplay(width: number, height: number): TileSizeDisplay;
+interface UseTooltipStateWithMouseFollowOptions {
+    parentRef: RefObject<Element>;
+    gutter?: number;
+    timeout?: number;
+}
+export declare function useTooltipStateWithMouseFollow(options: UseTooltipStateWithMouseFollowOptions): import("ariakit/tooltip").TooltipState;
+export {};

package/types/utils/colors.d.ts

@@ -0,0 +1 @@
+export declare function getColors(count?: number): string[];

package/types/utils/components.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const getRenderChildWithClassName: (className: string) => (child: any) => React.JSX.Element | null;

package/types/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './colors';
+export * from './jobs';
+export * from './components';

package/types/utils/jobs.d.ts

@@ -0,0 +1,7 @@
+import type { Job, WebpackChunk } from '@bundle-stats/utils';
+interface GetJobsChunksData {
+    chunks: Array<WebpackChunk>;
+    chunkIds: Array<string>;
+}
+export declare function getJobsChunksData(jobs: Array<Job>): GetJobsChunksData;
+export {};

package/lib/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,yDAAiC;AACjC,4DAA4B;AAE5B,4EAAyC;AAElC,MAAM,SAAS,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,EAAE;IACrC,MAAM,MAAM,GAAG,IAAA,eAAK,EAAC,2BAAM,EAAE,IAAI,CAAC,KAAK,CAAC,2BAAM,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC;IAEhE,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE;QACvC,IAAI,KAAK,KAAK,CAAC,EAAE;YACf,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC;SACvB;QAED,IAAI,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;YAC/B,OAAO,WAAW,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;SAC5C;QAED,OAAO,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;IACzD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAdW,QAAA,SAAS,aAcpB;AAEK,MAAM,2BAA2B,GAAG,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE;IAClE,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,EAAE,EAAE;QAClC,OAAO,IAAI,CAAC;KACb;IAED,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAExB,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,uCAAK,SAAS,EAAE,SAAS,IAAG,KAAK,CAAO,CAAC;KACjD;IAED,OAAO,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE;QAC/B,GAAG,KAAK;QACR,SAAS,EAAE,IAAA,oBAAE,EAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;KAC1C,CAAC,CAAC;AACL,CAAC,CAAC;AAfW,QAAA,2BAA2B,+BAetC"}

package/lib-esm/utils.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import chunk from 'lodash/chunk';
-import cx from 'classnames';
-import COLORS from './chart-colors.json';
-export const getColors = (count = 2) => {
-    const chunks = chunk(COLORS, Math.round(COLORS.length / count));
-    return chunks.map((chunkColors, index) => {
-        if (index === 0) {
-            return chunkColors[0];
-        }
-        if (index === chunks.length - 1) {
-            return chunkColors[chunkColors.length - 1];
-        }
-        return chunkColors[Math.floor(chunkColors.length / 2)];
-    });
-};
-export const getRenderChildWithClassName = (className) => (child) => {
-    if (child === null || child === '') {
-        return null;
-    }
-    const { props } = child;
-    if (!props) {
-        return React.createElement("div", { className: className }, child);
-    }
-    return React.cloneElement(child, {
-        ...props,
-        className: cx(className, props.className),
-    });
-};
-//# sourceMappingURL=utils.js.map

package/lib-esm/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,MAAM,cAAc,CAAC;AACjC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,EAAE;IACrC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC;IAEhE,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE;QACvC,IAAI,KAAK,KAAK,CAAC,EAAE;YACf,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC;SACvB;QAED,IAAI,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;YAC/B,OAAO,WAAW,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;SAC5C;QAED,OAAO,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;IACzD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE;IAClE,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,EAAE,EAAE;QAClC,OAAO,IAAI,CAAC;KACb;IAED,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAExB,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,6BAAK,SAAS,EAAE,SAAS,IAAG,KAAK,CAAO,CAAC;KACjD;IAED,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;QAC/B,GAAG,KAAK;QACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;KAC1C,CAAC,CAAC;AACL,CAAC,CAAC"}

package/src/utils.jsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import chunk from 'lodash/chunk';
-import cx from 'classnames';
-
-import COLORS from './chart-colors.json';
-
-export const getColors = (count = 2) => {
-  const chunks = chunk(COLORS, Math.round(COLORS.length / count));
-
-  return chunks.map((chunkColors, index) => {
-    if (index === 0) {
-      return chunkColors[0];
-    }
-
-    if (index === chunks.length - 1) {
-      return chunkColors[chunkColors.length - 1];
-    }
-
-    return chunkColors[Math.floor(chunkColors.length / 2)];
-  });
-};
-
-export const getRenderChildWithClassName = (className) => (child) => {
-  if (child === null || child === '') {
-    return null;
-  }
-
-  const { props } = child;
-
-  if (!props) {
-    return <div className={className}>{child}</div>;
-  }
-
-  return React.cloneElement(child, {
-    ...props,
-    className: cx(className, props.className), // eslint-disable-line react/prop-types
-  });
-};

package/types/utils.d.ts

@@ -1,3 +0,0 @@
-export function getColors(count?: number): string[];
-export function getRenderChildWithClassName(className: any): (child: any) => React.JSX.Element | null;
-import React from 'react';