@bundle-stats/ui 4.13.0-beta.9 → 4.13.0-rc.1

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

@@ -0,0 +1,28 @@
+import type { ReportMetricRow } from '@bundle-stats/utils';
+export interface TreeTotal {
+    current: number;
+    baseline: number;
+}
+export interface TreeLeaf {
+    id: string;
+    label: string;
+    value: number;
+    item: ReportMetricRow;
+}
+export interface Tree {
+    id: string;
+    label: string;
+    value: number;
+    children: TreeNodeChildren;
+    total?: TreeTotal;
+}
+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,9 +1,11 @@
-import React from 'react';
-import type { ReportMetricRow } from '@bundle-stats/utils';
+import React, { type ComponentProps, type ReactNode } from 'react';
+import { type Tree } from './metrics-treemap.constants';
 interface MetricsTreemapProps {
-    items: Array<ReportMetricRow>;
-    emptyMessage?: React.ReactNode;
+    treeNodes: Tree;
+    emptyMessage?: ReactNode;
+    nested?: boolean;
     onItemClick?: (entryId: string) => void;
+    onGroupClick?: (entryId: string) => void;
 }
-export declare const MetricsTreemap: (props: MetricsTreemapProps & React.ComponentProps<'div'>) => React.JSX.Element;
+export declare const MetricsTreemap: (props: MetricsTreemapProps & ComponentProps<'div'>) => React.JSX.Element;
 export {};

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

@@ -0,0 +1,2 @@
+export declare const TILE_GROUP_LABEL = "View children entries";
+export declare const TILE_LABEL = "View entry info";

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

@@ -0,0 +1,15 @@
+import { type RefObject } from 'react';
+import { DeltaType, type MetricRunInfoBaseline, type MetricRunInfo, type ReportMetricRow } from '@bundle-stats/utils';
+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/hooks/metrics-display-type.d.ts

@@ -1,4 +1,10 @@
 import { MetricsDisplayType } from '../constants';
-type UseMetricsDisplayType = [MetricsDisplayType, (value: MetricsDisplayType) => void];
-export declare const useMetricsDisplayType: () => UseMetricsDisplayType;
+type UseMetricsDisplayType = [
+    {
+        value: MetricsDisplayType;
+        groupBy?: string;
+    },
+    (newDisplayType: MetricsDisplayType, newGroupBy?: string) => void
+];
+export declare const useMetricsDisplayType: (groups?: Partial<Record<MetricsDisplayType, Array<string>>>) => UseMetricsDisplayType;
 export {};

package/types/ui/dropdown/dropdown.d.ts

@@ -5,7 +5,6 @@ interface DropdownItemProps {
 }
 export declare const DropdownItem: (props: DropdownItemProps & React.ComponentProps<typeof MenuItem>) => React.JSX.Element;
 interface DropdownProps {
-    buttonClassName?: string;
     dropdownClassName?: string;
     label?: React.ReactNode;
     ariaLabel?: string;

package/types/ui/icon/icon.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 declare const ICONS: {
     readonly ARROW: "arrow";
-    readonly ARROW_RIGHT_CIRLCE: "arrow-right-circle";
+    readonly ARROW_RIGHT_CIRCLE: "arrow-right-circle";
     readonly CANCEL: "close";
     readonly CHEVRON_DOWN: "chevron-down";
     readonly CHEVRON_UP: "chevron-up";
+    readonly CHECK: "check";
     readonly CLOSE: "close";
     readonly CLOCK: "clock";
     readonly COMMIT: "commit";
@@ -36,10 +37,11 @@ export declare const Icon: {
     (props: IconProps & React.ComponentProps<'span'>): React.JSX.Element;
     ICONS: {
         readonly ARROW: "arrow";
-        readonly ARROW_RIGHT_CIRLCE: "arrow-right-circle";
+        readonly ARROW_RIGHT_CIRCLE: "arrow-right-circle";
         readonly CANCEL: "close";
         readonly CHEVRON_DOWN: "chevron-down";
         readonly CHEVRON_UP: "chevron-up";
+        readonly CHECK: "check";
         readonly CLOSE: "close";
         readonly CLOCK: "clock";
         readonly COMMIT: "commit";

package/types/ui/loader/loader.d.ts

@@ -1,7 +1,7 @@
 export function Loader({ className, size, ...restProps }: {
     [x: string]: any;
-    className: any;
-    size: any;
+    className?: string | undefined;
+    size?: string | undefined;
 }): React.JSX.Element;
 export namespace Loader {
     let SIZE_SMALL: string;

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/components/bundle-assets-totals/bundle-assets-totals.module.css

@@ -1,7 +0,0 @@
-.title {
-  color: var(--color-text-light);
-}
-
-.toolbar {
-  border-bottom: 1px solid var(--color-outline);
-}

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/components/bundle-assets-totals/bundle-assets-totals.module.css

@@ -1,7 +0,0 @@
-.title {
-  color: var(--color-text-light);
-}
-
-.toolbar {
-  border-bottom: 1px solid var(--color-outline);
-}

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/components/bundle-assets-totals/bundle-assets-totals.module.css

@@ -1,7 +0,0 @@
-.title {
-  color: var(--color-text-light);
-}
-
-.toolbar {
-  border-bottom: 1px solid var(--color-outline);
-}

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';