@bundle-stats/ui 4.2.5-beta.0 → 4.2.5-beta.2

package/types/components/metric/index.d.ts

@@ -1 +1 @@
-export * from "./metric";
+export * from './metric';

package/types/components/metric/metric.d.ts

@@ -1,33 +1,7 @@
-export function Metric({ className, value, formatter, inline, children, enhanced }: {
-    className: any;
-    value: any;
-    formatter: any;
-    inline: any;
-    children: any;
-    enhanced: any;
-}): JSX.Element;
-export namespace Metric {
-    namespace defaultProps {
-        const className: string;
-        const enhanced: boolean;
-        const inline: boolean;
-        const value: number;
-        const children: never[];
-        function formatter(val: any): any;
-    }
-    namespace propTypes {
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        const enhanced_1: PropTypes.Requireable<boolean>;
-        export { enhanced_1 as enhanced };
-        const inline_1: PropTypes.Requireable<boolean>;
-        export { inline_1 as inline };
-        const value_1: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        export { value_1 as value };
-        const formatter_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { formatter_1 as formatter };
-        const children_1: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        export { children_1 as children };
-    }
+import React from 'react';
+export interface MetricProps {
+    value?: string;
+    unit?: string;
+    inline?: boolean;
 }
-import PropTypes from "prop-types";
+export declare const Metric: (props: MetricProps & React.ComponentProps<'div'>) => JSX.Element;

package/types/components/metric-run-info/index.d.ts

@@ -0,0 +1 @@
+export * from './metric-run-info';

package/types/components/metric-run-info/metric-run-info.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { RunInfoProps } from '../run-info';
+export interface MetricRunInfoProps {
+    metricId: string;
+    current: number;
+    baseline?: number;
+    showDelta?: boolean;
+    showMetridDescription?: boolean;
+    size?: RunInfoProps['size'];
+    loading?: RunInfoProps['loading'];
+}
+export declare const MetricRunInfo: (props: MetricRunInfoProps & React.ComponentProps<'div'>) => JSX.Element;

package/types/components/run-info/index.d.ts

@@ -0,0 +1 @@
+export * from './run-info';

package/types/components/run-info/run-info.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface RunInfoProps {
+    title?: string;
+    titleHoverCard?: React.ReactNode;
+    titleTooltip?: React.ReactNode;
+    current?: string;
+    baseline?: string;
+    delta?: string;
+    deltaType?: string;
+    as?: React.ElementType;
+    size?: 'medium' | 'large';
+    loading?: boolean;
+}
+export declare const RunInfo: ({ className, title, titleHoverCard, titleTooltip, current, baseline, delta, deltaType, as: Component, size, loading, ...restProps }: RunInfoProps & React.ComponentProps<'div'>) => JSX.Element;

package/types/components/summary/index.d.ts

@@ -1 +1 @@
-export * from "./summary";
+export * from './summary';

package/types/components/summary/summary.d.ts

@@ -1,37 +1,16 @@
-export function Summary({ className, size, keys, data, loading, showSummaryItemDelta, summaryItemLink: SummaryItemCustomLink, }: {
-    className: any;
-    size: any;
-    keys: any;
-    data: any;
-    loading: any;
-    showSummaryItemDelta: any;
-    summaryItemLink: any;
-}): JSX.Element;
-export namespace Summary {
-    namespace defaultProps {
-        export const className: string;
-        export const data: null;
-        export const loading: boolean;
-        export const size: string;
-        export { METRICS_WEBPACK_GENERAL as keys };
-        export const showSummaryItemDelta: boolean;
-        export { ComponentLink as summaryItemLink };
-    }
-    namespace propTypes {
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        const size_1: PropTypes.Requireable<string>;
-        export { size_1 as size };
-        export const keys: PropTypes.Requireable<(string | null | undefined)[]>;
-        const data_1: PropTypes.Requireable<PropTypes.InferProps<{}>>;
-        export { data_1 as data };
-        const loading_1: PropTypes.Requireable<boolean>;
-        export { loading_1 as loading };
-        const showSummaryItemDelta_1: PropTypes.Requireable<boolean>;
-        export { showSummaryItemDelta_1 as showSummaryItemDelta };
-        export const summaryItemLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-    }
+import React from 'react';
+import { MetricRunInfoProps } from '../metric-run-info';
+interface SummaryItemData {
+    current: number;
+    baseline: number;
 }
-import { METRICS_WEBPACK_GENERAL } from "../../constants";
-import { ComponentLink } from "../component-link";
-import PropTypes from "prop-types";
+interface SummaryProps {
+    size?: MetricRunInfoProps['size'];
+    keys?: Array<string>;
+    data?: Record<string, SummaryItemData> | null;
+    loading?: boolean;
+    showSummaryItemDelta?: boolean;
+    summaryItemLink?: React.ElementType;
+}
+export declare const Summary: ({ className, size, keys, data, loading, showSummaryItemDelta, summaryItemLink, }: SummaryProps & React.ComponentProps<'div'>) => JSX.Element;
+export {};

package/types/layout/flex-stack/flex-stack.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import { SPACES } from '../../tokens';
+type SpaceValue = (typeof SPACES)[number];
 interface FlexStackProps<T extends React.ElementType> {
     as?: T;
-    space?: typeof SPACES[number];
+    space?: SpaceValue;
     inline?: boolean;
     alignItems?: 'top' | 'center' | 'bottom';
 }

package/lib/components/summary-item/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/summary-item/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iDAA+B"}

package/lib/components/summary-item/summary-item.js

@@ -1,97 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SummaryItem = void 0;
-const react_1 = __importStar(require("react"));
-const prop_types_1 = __importDefault(require("prop-types"));
-const classnames_1 = __importDefault(require("classnames"));
-const utils_1 = require("@bundle-stats/utils");
-const icon_1 = require("../../ui/icon");
-const hover_card_1 = require("../../ui/hover-card");
-const skeleton_1 = require("../../ui/skeleton");
-const flex_stack_1 = require("../../layout/flex-stack");
-const stack_1 = require("../../layout/stack");
-const metric_1 = require("../metric");
-const delta_1 = require("../delta");
-const summary_item_module_css_1 = __importDefault(require("./summary-item.module.css"));
-const MetricInfo = ({ description, url }) => {
-    const onClick = (0, react_1.useCallback)(() => {
-        if (url) {
-            window.open(url);
-        }
-    }, [url]);
-    return (react_1.default.createElement(stack_1.Stack, { space: "xxxsmall" },
-        react_1.default.createElement("p", null, description),
-        url && (react_1.default.createElement("p", null,
-            react_1.default.createElement("button", { type: "button", onClick: onClick, className: summary_item_module_css_1.default.readMoreLink }, "Read more")))));
-};
-MetricInfo.propTypes = {
-    description: prop_types_1.default.string.isRequired,
-    url: prop_types_1.default.string,
-};
-MetricInfo.defaultProps = {
-    url: '',
-};
-const SummaryItem = ({ className, as: Component, size, id, data, loading, showDelta, showMetricDescription, ...props }) => {
-    const { baseline, current } = data || { baseline: 0, current: 0 };
-    const metric = (0, utils_1.getGlobalMetricType)(id);
-    const runInfo = (0, utils_1.getMetricRunInfo)(metric, current, baseline);
-    const showMetricDescriptionTooltip = showMetricDescription && metric?.description;
-    const rootClassName = (0, classnames_1.default)(summary_item_module_css_1.default.root, className, summary_item_module_css_1.default[size], showDelta && summary_item_module_css_1.default.showDelta);
-    return (react_1.default.createElement(stack_1.Stack, { space: "xxsmall", as: Component, className: rootClassName, ...props },
-        react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", as: "h3", className: summary_item_module_css_1.default.title },
-            react_1.default.createElement("span", null, metric.label),
-            showMetricDescriptionTooltip && (react_1.default.createElement(hover_card_1.HoverCard, { label: react_1.default.createElement(icon_1.Icon, { glyph: icon_1.Icon.ICONS.HELP }), className: summary_item_module_css_1.default.titleIcon },
-                react_1.default.createElement(MetricInfo, { ...metric })))),
-        !loading ? (react_1.default.createElement(stack_1.Stack, null,
-            react_1.default.createElement(metric_1.Metric, { className: summary_item_module_css_1.default.currentMetric, value: current, formatter: metric.formatter, enhanced: true, inline: true }, showDelta && (react_1.default.createElement(delta_1.Delta, { className: summary_item_module_css_1.default.delta, displayValue: runInfo.displayDeltaPercentage, deltaType: runInfo.deltaType }))),
-            react_1.default.createElement(metric_1.Metric, { className: summary_item_module_css_1.default.baselineMetric, value: baseline, formatter: metric.formatter }))) : (react_1.default.createElement(stack_1.Stack, null,
-            react_1.default.createElement(skeleton_1.Skeleton, { as: "p", className: (0, classnames_1.default)(summary_item_module_css_1.default.currentMetric, summary_item_module_css_1.default.loading) }),
-            react_1.default.createElement(skeleton_1.Skeleton, { as: "p", className: (0, classnames_1.default)(summary_item_module_css_1.default.baselineMetric, summary_item_module_css_1.default.loading) })))));
-};
-exports.SummaryItem = SummaryItem;
-exports.SummaryItem.defaultProps = {
-    className: '',
-    as: 'div',
-    data: null,
-    size: 'medium',
-    loading: false,
-    showMetricDescription: false,
-    showDelta: true,
-};
-exports.SummaryItem.propTypes = {
-    className: prop_types_1.default.string,
-    as: prop_types_1.default.elementType,
-    size: prop_types_1.default.oneOf(['medium', 'large']),
-    id: prop_types_1.default.string.isRequired,
-    loading: prop_types_1.default.bool,
-    data: prop_types_1.default.object,
-    showMetricDescription: prop_types_1.default.bool,
-    showDelta: prop_types_1.default.bool,
-};
-//# sourceMappingURL=summary-item.js.map

package/lib/components/summary-item/summary-item.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"summary-item.js","sourceRoot":"","sources":["../../../src/components/summary-item/summary-item.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA2C;AAC3C,4DAAmC;AACnC,4DAA4B;AAC5B,+CAA4E;AAE5E,wCAAqC;AACrC,oDAAgD;AAChD,gDAA6C;AAC7C,wDAAoD;AACpD,8CAA2C;AAC3C,sCAAmC;AACnC,oCAAiC;AACjC,wFAA4C;AAE5C,MAAM,UAAU,GAAG,CAAC,EAAE,WAAW,EAAE,GAAG,EAAE,EAAE,EAAE;IAE1C,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC/B,IAAI,GAAG,EAAE;YACP,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SAClB;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,OAAO,CACL,8BAAC,aAAK,IAAC,KAAK,EAAC,UAAU;QACrB,yCAAI,WAAW,CAAK;QACnB,GAAG,IAAI,CACN;YACE,0CAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,iCAAG,CAAC,YAAY,gBAE1D,CACP,CACL,CACK,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,SAAS,GAAG;IACrB,WAAW,EAAE,oBAAS,CAAC,MAAM,CAAC,UAAU;IACxC,GAAG,EAAE,oBAAS,CAAC,MAAM;CACtB,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG;IACxB,GAAG,EAAE,EAAE;CACR,CAAC;AAEK,MAAM,WAAW,GAAG,CAAC,EAC1B,SAAS,EACT,EAAE,EAAE,SAAS,EACb,IAAI,EACJ,EAAE,EACF,IAAI,EACJ,OAAO,EACP,SAAS,EACT,qBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAI,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;IAElE,MAAM,MAAM,GAAG,IAAA,2BAAmB,EAAC,EAAE,CAAC,CAAC;IACvC,MAAM,OAAO,GAAG,IAAA,wBAAgB,EAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;IAC5D,MAAM,4BAA4B,GAAG,qBAAqB,IAAI,MAAM,EAAE,WAAW,CAAC;IAElF,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,iCAAG,CAAC,IAAI,EAAE,SAAS,EAAE,iCAAG,CAAC,IAAI,CAAC,EAAE,SAAS,IAAI,iCAAG,CAAC,SAAS,CAAC,CAAC;IAErF,OAAO,CACL,8BAAC,aAAK,IAAC,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,KAAM,KAAK;QACvE,8BAAC,sBAAS,IAAC,KAAK,EAAC,UAAU,EAAC,UAAU,EAAC,QAAQ,EAAC,EAAE,EAAC,IAAI,EAAC,SAAS,EAAE,iCAAG,CAAC,KAAK;YAC1E,4CACG,MAAM,CAAC,KAAK,CACR;YAEN,4BAA4B,IAAI,CAC/B,8BAAC,sBAAS,IAAC,KAAK,EAAE,8BAAC,WAAI,IAAC,KAAK,EAAE,WAAI,CAAC,KAAK,CAAC,IAAI,GAAI,EAAE,SAAS,EAAE,iCAAG,CAAC,SAAS;gBAC1E,8BAAC,UAAU,OAAK,MAAM,GAAI,CAChB,CACb,CACS;QAEX,CAAC,OAAO,CAAC,CAAC,CAAC,CACV,8BAAC,aAAK;YACJ,8BAAC,eAAM,IACL,SAAS,EAAE,iCAAG,CAAC,aAAa,EAC5B,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,QAAQ,QACR,MAAM,UAEL,SAAS,IAAI,CACZ,8BAAC,aAAK,IACJ,SAAS,EAAE,iCAAG,CAAC,KAAK,EACpB,YAAY,EAAE,OAAO,CAAC,sBAAsB,EAC5C,SAAS,EAAE,OAAO,CAAC,SAAS,GAC5B,CACH,CACM;YACT,8BAAC,eAAM,IAAC,SAAS,EAAE,iCAAG,CAAC,cAAc,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,GAAI,CACjF,CACT,CAAC,CAAC,CAAC,CACF,8BAAC,aAAK;YACJ,8BAAC,mBAAQ,IAAC,EAAE,EAAC,GAAG,EAAC,SAAS,EAAE,IAAA,oBAAE,EAAC,iCAAG,CAAC,aAAa,EAAE,iCAAG,CAAC,OAAO,CAAC,GAAI;YAClE,8BAAC,mBAAQ,IAAC,EAAE,EAAC,GAAG,EAAC,SAAS,EAAE,IAAA,oBAAE,EAAC,iCAAG,CAAC,cAAc,EAAE,iCAAG,CAAC,OAAO,CAAC,GAAI,CAC7D,CACT,CACK,CACT,CAAC;AACJ,CAAC,CAAC;AA5DW,QAAA,WAAW,eA4DtB;AAEF,mBAAW,CAAC,YAAY,GAAG;IACzB,SAAS,EAAE,EAAE;IACb,EAAE,EAAE,KAAK;IACT,IAAI,EAAE,IAAI;IACV,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,KAAK;IACd,qBAAqB,EAAE,KAAK;IAC5B,SAAS,EAAE,IAAI;CAChB,CAAC;AAEF,mBAAW,CAAC,SAAS,GAAG;IAEtB,SAAS,EAAE,oBAAS,CAAC,MAAM;IAG3B,EAAE,EAAE,oBAAS,CAAC,WAAW;IAGzB,IAAI,EAAE,oBAAS,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IAG1C,EAAE,EAAE,oBAAS,CAAC,MAAM,CAAC,UAAU;IAG/B,OAAO,EAAE,oBAAS,CAAC,IAAI;IAGvB,IAAI,EAAE,oBAAS,CAAC,MAAM;IAGtB,qBAAqB,EAAE,oBAAS,CAAC,IAAI;IAGrC,SAAS,EAAE,oBAAS,CAAC,IAAI;CAC1B,CAAC"}

package/lib-esm/components/summary-item/index.js

@@ -1,2 +0,0 @@
-export * from './summary-item';
-//# sourceMappingURL=index.js.map

package/lib-esm/components/summary-item/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/summary-item/index.js"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/lib-esm/components/summary-item/summary-item.js

@@ -1,67 +0,0 @@
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
-import { Icon } from '../../ui/icon';
-import { HoverCard } from '../../ui/hover-card';
-import { Skeleton } from '../../ui/skeleton';
-import { FlexStack } from '../../layout/flex-stack';
-import { Stack } from '../../layout/stack';
-import { Metric } from '../metric';
-import { Delta } from '../delta';
-import css from './summary-item.module.css';
-const MetricInfo = ({ description, url }) => {
-    const onClick = useCallback(() => {
-        if (url) {
-            window.open(url);
-        }
-    }, [url]);
-    return (React.createElement(Stack, { space: "xxxsmall" },
-        React.createElement("p", null, description),
-        url && (React.createElement("p", null,
-            React.createElement("button", { type: "button", onClick: onClick, className: css.readMoreLink }, "Read more")))));
-};
-MetricInfo.propTypes = {
-    description: PropTypes.string.isRequired,
-    url: PropTypes.string,
-};
-MetricInfo.defaultProps = {
-    url: '',
-};
-export const SummaryItem = ({ className, as: Component, size, id, data, loading, showDelta, showMetricDescription, ...props }) => {
-    const { baseline, current } = data || { baseline: 0, current: 0 };
-    const metric = getGlobalMetricType(id);
-    const runInfo = getMetricRunInfo(metric, current, baseline);
-    const showMetricDescriptionTooltip = showMetricDescription && (metric === null || metric === void 0 ? void 0 : metric.description);
-    const rootClassName = cx(css.root, className, css[size], showDelta && css.showDelta);
-    return (React.createElement(Stack, { space: "xxsmall", as: Component, className: rootClassName, ...props },
-        React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", as: "h3", className: css.title },
-            React.createElement("span", null, metric.label),
-            showMetricDescriptionTooltip && (React.createElement(HoverCard, { label: React.createElement(Icon, { glyph: Icon.ICONS.HELP }), className: css.titleIcon },
-                React.createElement(MetricInfo, { ...metric })))),
-        !loading ? (React.createElement(Stack, null,
-            React.createElement(Metric, { className: css.currentMetric, value: current, formatter: metric.formatter, enhanced: true, inline: true }, showDelta && (React.createElement(Delta, { className: css.delta, displayValue: runInfo.displayDeltaPercentage, deltaType: runInfo.deltaType }))),
-            React.createElement(Metric, { className: css.baselineMetric, value: baseline, formatter: metric.formatter }))) : (React.createElement(Stack, null,
-            React.createElement(Skeleton, { as: "p", className: cx(css.currentMetric, css.loading) }),
-            React.createElement(Skeleton, { as: "p", className: cx(css.baselineMetric, css.loading) })))));
-};
-SummaryItem.defaultProps = {
-    className: '',
-    as: 'div',
-    data: null,
-    size: 'medium',
-    loading: false,
-    showMetricDescription: false,
-    showDelta: true,
-};
-SummaryItem.propTypes = {
-    className: PropTypes.string,
-    as: PropTypes.elementType,
-    size: PropTypes.oneOf(['medium', 'large']),
-    id: PropTypes.string.isRequired,
-    loading: PropTypes.bool,
-    data: PropTypes.object,
-    showMetricDescription: PropTypes.bool,
-    showDelta: PropTypes.bool,
-};
-//# sourceMappingURL=summary-item.js.map

package/lib-esm/components/summary-item/summary-item.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"summary-item.js","sourceRoot":"","sources":["../../../src/components/summary-item/summary-item.jsx"],"names":[],"mappings":"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"}

package/src/components/metric/metric.jsx

@@ -1,63 +0,0 @@
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import css from './metric.module.css';
-
-// Separate value and unit
-const EXTRACT_VALUE_UNIT_PATTERN = /([\d|.|,| ]*)(\w*|%)$/;
-
-export const Metric = ({ className, value, formatter, inline, children, enhanced }) => {
-  const { displayValue, displayUnit } = useMemo(() => {
-    const formattedValue = formatter?.(value);
-
-    if (!formattedValue) {
-      return { displayValue: value };
-    }
-
-    if (!enhanced) {
-      return { displayValue: formattedValue };
-    }
-
-    const matches = formattedValue.match(EXTRACT_VALUE_UNIT_PATTERN);
-
-    if (!matches) {
-      return { displayValue: value };
-    }
-
-    return {
-      displayUnit: matches[2],
-      displayValue: matches[1],
-    };
-  }, [formatter, value]);
-
-  const rootClassName = cx(className, css.root, inline && css.inline);
-
-  return (
-    <div className={rootClassName}>
-      <div className={css.display}>
-        <span className={css.displayValue}>{displayValue}</span>
-        {displayUnit && <span className={css.displayUnit}>{displayUnit}</span>}
-      </div>
-      <div className={css.delta}>{children}</div>
-    </div>
-  );
-};
-
-Metric.defaultProps = {
-  className: '',
-  enhanced: false,
-  inline: false,
-  value: 0,
-  children: [],
-  formatter: (val) => val,
-};
-
-Metric.propTypes = {
-  className: PropTypes.string,
-  enhanced: PropTypes.bool,
-  inline: PropTypes.bool,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  formatter: PropTypes.func,
-  children: PropTypes.node,
-};

package/src/components/summary/summary.jsx

@@ -1,74 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import get from 'lodash/get';
-import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
-
-import { METRICS_WEBPACK_GENERAL } from '../../constants';
-import { Box } from '../../layout/box';
-import { FlexStack } from '../../layout/flex-stack';
-import { ComponentLink } from '../component-link';
-import { SummaryItem } from '../summary-item';
-import css from './summary.module.css';
-
-export const Summary = ({
-  className,
-  size,
-  keys,
-  data,
-  loading,
-  showSummaryItemDelta,
-  summaryItemLink: SummaryItemCustomLink,
-}) => (
-  <Box className={cx(css.root, className)}>
-    <FlexStack space="small" className={css.items}>
-      {Array.from(METRIC_COMPONENT_LINKS)
-        .filter(([metricId]) => keys.includes(metricId))
-        .map(([metricId, metricOptions]) => (
-          <Box
-            key={metricId}
-            outline
-            outlineHover
-            padding="small"
-            as={SummaryItemCustomLink}
-            {...metricOptions.link}
-            className={css.item}
-          >
-            <SummaryItem
-              size={size}
-              id={metricId}
-              data={get(data, metricId)}
-              loading={loading}
-              showMetricDescription
-              showDelta={showSummaryItemDelta && metricOptions.showDelta !== false}
-            />
-          </Box>
-        ))}
-    </FlexStack>
-  </Box>
-);
-
-Summary.defaultProps = {
-  className: '',
-  data: null,
-  loading: false,
-  size: '',
-  keys: METRICS_WEBPACK_GENERAL,
-  showSummaryItemDelta: true,
-  summaryItemLink: ComponentLink,
-};
-
-Summary.propTypes = {
-  className: PropTypes.string,
-  size: PropTypes.string,
-  keys: PropTypes.arrayOf(PropTypes.string),
-  data: PropTypes.shape({
-    [PropTypes.string]: PropTypes.shape({
-      baseline: PropTypes.number,
-      current: PropTypes.number,
-    }),
-  }),
-  loading: PropTypes.bool,
-  showSummaryItemDelta: PropTypes.bool,
-  summaryItemLink: PropTypes.elementType,
-};

package/src/components/summary-item/index.js

@@ -1 +0,0 @@
-export * from './summary-item';

package/src/components/summary-item/summary-item.jsx

@@ -1,142 +0,0 @@
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
-
-import { Icon } from '../../ui/icon';
-import { HoverCard } from '../../ui/hover-card';
-import { Skeleton } from '../../ui/skeleton';
-import { FlexStack } from '../../layout/flex-stack';
-import { Stack } from '../../layout/stack';
-import { Metric } from '../metric';
-import { Delta } from '../delta';
-import css from './summary-item.module.css';
-
-const MetricInfo = ({ description, url }) => {
-  // The component parent can be rendered inside a link, use button to avoid using nested links
-  const onClick = useCallback(() => {
-    if (url) {
-      window.open(url);
-    }
-  }, [url]);
-
-  return (
-    <Stack space="xxxsmall">
-      <p>{description}</p>
-      {url && (
-        <p>
-          <button type="button" onClick={onClick} className={css.readMoreLink}>
-            Read more
-          </button>
-        </p>
-      )}
-    </Stack>
-  );
-};
-
-MetricInfo.propTypes = {
-  description: PropTypes.string.isRequired,
-  url: PropTypes.string,
-};
-
-MetricInfo.defaultProps = {
-  url: '',
-};
-
-export const SummaryItem = ({
-  className,
-  as: Component,
-  size,
-  id,
-  data,
-  loading,
-  showDelta,
-  showMetricDescription,
-  ...props
-}) => {
-  const { baseline, current } = data || { baseline: 0, current: 0 };
-
-  const metric = getGlobalMetricType(id);
-  const runInfo = getMetricRunInfo(metric, current, baseline);
-  const showMetricDescriptionTooltip = showMetricDescription && metric?.description;
-
-  const rootClassName = cx(css.root, className, css[size], showDelta && css.showDelta);
-
-  return (
-    <Stack space="xxsmall" as={Component} className={rootClassName} {...props}>
-      <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.title}>
-        <span>
-          {metric.label}
-        </span>
-
-        {showMetricDescriptionTooltip && (
-          <HoverCard label={<Icon glyph={Icon.ICONS.HELP} />} className={css.titleIcon}>
-            <MetricInfo {...metric} />
-          </HoverCard>
-        )}
-      </FlexStack>
-
-      {!loading ? (
-        <Stack>
-          <Metric
-            className={css.currentMetric}
-            value={current}
-            formatter={metric.formatter}
-            enhanced
-            inline
-          >
-            {showDelta && (
-              <Delta
-                className={css.delta}
-                displayValue={runInfo.displayDeltaPercentage}
-                deltaType={runInfo.deltaType}
-              />
-            )}
-          </Metric>
-          <Metric className={css.baselineMetric} value={baseline} formatter={metric.formatter} />
-        </Stack>
-      ) : (
-        <Stack>
-          <Skeleton as="p" className={cx(css.currentMetric, css.loading)} />
-          <Skeleton as="p" className={cx(css.baselineMetric, css.loading)} />
-        </Stack>
-      )}
-    </Stack>
-  );
-};
-
-SummaryItem.defaultProps = {
-  className: '',
-  as: 'div',
-  data: null,
-  size: 'medium',
-  loading: false,
-  showMetricDescription: false,
-  showDelta: true,
-};
-
-SummaryItem.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-
-  /** Custom component */
-  as: PropTypes.elementType,
-
-  /** Size modifier */
-  size: PropTypes.oneOf(['medium', 'large']),
-
-  /** Metric id */
-  id: PropTypes.string.isRequired,
-
-  /** Loading flag */
-  loading: PropTypes.bool,
-
-  /** Summary data */
-  data: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-
-  /** Show description */
-  showMetricDescription: PropTypes.bool,
-
-  /** Show delta */
-  showDelta: PropTypes.bool,
-};

package/types/components/summary-item/index.d.ts

@@ -1 +0,0 @@
-export * from "./summary-item";