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

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

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

@@ -1,40 +0,0 @@
-export function SummaryItem({ className, as: Component, size, id, data, loading, showDelta, showMetricDescription, ...props }: {
-    [x: string]: any;
-    className: any;
-    as: any;
-    size: any;
-    id: any;
-    data: any;
-    loading: any;
-    showDelta: any;
-    showMetricDescription: any;
-}): JSX.Element;
-export namespace SummaryItem {
-    namespace defaultProps {
-        const className: string;
-        const as: string;
-        const data: null;
-        const size: string;
-        const loading: boolean;
-        const showMetricDescription: boolean;
-        const showDelta: boolean;
-    }
-    namespace propTypes {
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        const as_1: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        export { as_1 as as };
-        const size_1: PropTypes.Requireable<string>;
-        export { size_1 as size };
-        export const id: PropTypes.Validator<string>;
-        const loading_1: PropTypes.Requireable<boolean>;
-        export { loading_1 as loading };
-        const data_1: PropTypes.Requireable<object>;
-        export { data_1 as data };
-        const showMetricDescription_1: PropTypes.Requireable<boolean>;
-        export { showMetricDescription_1 as showMetricDescription };
-        const showDelta_1: PropTypes.Requireable<boolean>;
-        export { showDelta_1 as showDelta };
-    }
-}
-import PropTypes from "prop-types";