@bundle-stats/ui 4.4.0-beta.1 → 4.4.0-beta.4

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":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5E,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,GAAG,MAAM,2BAA2B,CAAC;AAE5C,MAAM,UAAU,GAAG,CAAC,EAAE,WAAW,EAAE,GAAG,EAAE,EAAE,EAAE;IAE1C,MAAM,OAAO,GAAG,WAAW,CAAC,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,oBAAC,KAAK,IAAC,KAAK,EAAC,UAAU;QACrB,+BAAI,WAAW,CAAK;QACnB,GAAG,IAAI,CACN;YACE,gCAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,YAAY,gBAE1D,CACP,CACL,CACK,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,SAAS,GAAG;IACrB,WAAW,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IACxC,GAAG,EAAE,SAAS,CAAC,MAAM;CACtB,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG;IACxB,GAAG,EAAE,EAAE;CACR,CAAC;AAEF,MAAM,CAAC,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,mBAAmB,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,OAAO,GAAG,gBAAgB,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;IAC5D,MAAM,4BAA4B,GAAG,qBAAqB,KAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,CAAA,CAAC;IAElF,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,SAAS,IAAI,GAAG,CAAC,SAAS,CAAC,CAAC;IAErF,OAAO,CACL,oBAAC,KAAK,IAAC,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,KAAM,KAAK;QACvE,oBAAC,SAAS,IAAC,KAAK,EAAC,UAAU,EAAC,UAAU,EAAC,QAAQ,EAAC,EAAE,EAAC,IAAI,EAAC,SAAS,EAAE,GAAG,CAAC,KAAK;YAC1E,kCACG,MAAM,CAAC,KAAK,CACR;YAEN,4BAA4B,IAAI,CAC/B,oBAAC,SAAS,IAAC,KAAK,EAAE,oBAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAI,EAAE,SAAS,EAAE,GAAG,CAAC,SAAS;gBAC1E,oBAAC,UAAU,OAAK,MAAM,GAAI,CAChB,CACb,CACS;QAEX,CAAC,OAAO,CAAC,CAAC,CAAC,CACV,oBAAC,KAAK;YACJ,oBAAC,MAAM,IACL,SAAS,EAAE,GAAG,CAAC,aAAa,EAC5B,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,QAAQ,QACR,MAAM,UAEL,SAAS,IAAI,CACZ,oBAAC,KAAK,IACJ,SAAS,EAAE,GAAG,CAAC,KAAK,EACpB,YAAY,EAAE,OAAO,CAAC,sBAAsB,EAC5C,SAAS,EAAE,OAAO,CAAC,SAAS,GAC5B,CACH,CACM;YACT,oBAAC,MAAM,IAAC,SAAS,EAAE,GAAG,CAAC,cAAc,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,GAAI,CACjF,CACT,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK;YACJ,oBAAC,QAAQ,IAAC,EAAE,EAAC,GAAG,EAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,aAAa,EAAE,GAAG,CAAC,OAAO,CAAC,GAAI;YAClE,oBAAC,QAAQ,IAAC,EAAE,EAAC,GAAG,EAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,cAAc,EAAE,GAAG,CAAC,OAAO,CAAC,GAAI,CAC7D,CACT,CACK,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,WAAW,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,WAAW,CAAC,SAAS,GAAG;IAEtB,SAAS,EAAE,SAAS,CAAC,MAAM;IAG3B,EAAE,EAAE,SAAS,CAAC,WAAW;IAGzB,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IAG1C,EAAE,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IAG/B,OAAO,EAAE,SAAS,CAAC,IAAI;IAGvB,IAAI,EAAE,SAAS,CAAC,MAAM;IAGtB,qBAAqB,EAAE,SAAS,CAAC,IAAI;IAGrC,SAAS,EAAE,SAAS,CAAC,IAAI;CAC1B,CAAC"}

package/lib-esm/components/summary-item/summary-item.module.css

@@ -1,58 +0,0 @@
-.title {
-  color: var(--color-text-ultra-light);
-  font-weight: bold;
-  font-size: var(--size-xsmall);
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-.titleIcon {
-  margin-top: -4px !important;
-  margin-bottom: -4px !important;
-}
-
-.currentMetric {
-  color: var(--color-heading);
-  font-size: var(--size-large);
-  line-height: var(--line-height-heading);
-  white-space: nowrap;
-  font-weight: bold;
-}
-
-.baselineMetric {
-  color: var(--color-text-light);
-  font-size: var(--size-small);
-  line-height: var(--line-height-heading);
-}
-
-.readMoreLink {
-  appearance: none;
-  background: none;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  color: var(--color-primary);
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.readMoreLink:hover,
-.readMoreLink:active,
-.readMoreLink:focus {
-  color: var(--color-primary-dark);
-  text-decoration: none;
-}
-
-/* Loading state */
-.loading.currentMetric {
-  width: 8em;
-}
-
-.loading.baselineMetric {
-  width: 5em;
-}
-
-/* Size large */
-.large .currentMetric {
-  font-size: var(--size-xxxlarge);
-}

package/lib-esm/ui/panels/index.js

@@ -1,2 +0,0 @@
-export { Panels } from './panels';
-//# sourceMappingURL=index.js.map

package/lib-esm/ui/panels/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/panels/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/lib-esm/ui/panels/panels.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import css from './panels.module.css';
-const cloneElement = (element) => {
-    const { className, ...restProps } = element.props;
-    return React.cloneElement(element, {
-        ...restProps,
-        className: cx(css.panel, className),
-    });
-};
-export const Panels = ({ className, children, ...restProps }) => (React.createElement("div", { className: cx(css.root, className), ...restProps }, React.Children.map(children, cloneElement)));
-Panels.defaultProps = {
-    className: '',
-    children: null,
-};
-Panels.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-};
-//# sourceMappingURL=panels.js.map

package/lib-esm/ui/panels/panels.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"panels.js","sourceRoot":"","sources":["../../../src/ui/panels/panels.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAEtC,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,EAAE;IAC/B,MAAM,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC;IAElD,OAAO,KAAK,CAAC,YAAY,CACvB,OAAO,EACP;QACE,GAAG,SAAS;QACZ,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,EAAE,SAAS,CAAC;KACpC,CACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,CAC/D,6BACE,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,KAC9B,SAAS,IAEZ,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,YAAY,CAAC,CACvC,CACP,CAAC;AAEF,MAAM,CAAC,YAAY,GAAG;IACpB,SAAS,EAAE,EAAE;IACb,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,MAAM,CAAC,SAAS,GAAG;IAEjB,SAAS,EAAE,SAAS,CAAC,MAAM;IAG3B,QAAQ,EAAE,SAAS,CAAC,IAAI;CACzB,CAAC"}

package/lib-esm/ui/panels/panels.module.css

@@ -1,23 +0,0 @@
-.root {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.panel {
-  flex: 1 1 100%;
-}
-
-.panel + .panel {
-  margin-top: var(--space-medium);
-}
-
-@media (min-width: 768px) {
-  .root {
-    flex-wrap: nowrap;
-  }
-
-  .panel + .panel {
-    margin-top: 0;
-    margin-left: var(--space-medium);
-  }
-}

package/src/app/header/header.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import { Container } from '../../ui/container';
-import { JobsHeader } from '../../components/jobs-header';
-import css from './header.module.css';
-
-export const Header = ({ className, jobs }) => (
-  <Container as="header" className={cx(css.root, className)}>
-    <div className={css.inner}>
-      <JobsHeader className={css.jobs} jobs={jobs} />
-    </div>
-  </Container>
-);
-
-Header.propTypes = {
-  className: PropTypes.string,
-  jobs: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
-};
-
-Header.defaultProps = {
-  className: '',
-  jobs: null,
-};

package/src/assets/icons/cancel.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>

package/src/components/asset-info/asset-info.jsx

@@ -1,96 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { getBundleModulesByChunk, getModuleFileType } from '@bundle-stats/utils';
-
-import { Stack } from '../../layout/stack';
-import { FileName } from '../../ui/file-name';
-import { ComponentLink } from '../component-link';
-import css from './asset-info.module.css';
-
-const ChunkModulesLink = ({ as: Component, chunks, chunkId, name }) => {
-  const chunk = chunks?.find(({ id }) => id === chunkId );
-
-  if (!chunk) {
-    return null;
-  }
-
-  const chunkIds = chunks?.map(({ id }) => id);
-  const fileType = getModuleFileType(name);
-
-  return (
-    <Component
-      className={css.viewModules}
-      {...getBundleModulesByChunk(chunkIds, chunkId, fileType)}
-    >
-      View chunk modules
-    </Component>
-  );
-};
-
-ChunkModulesLink.propTypes = {
-  as: PropTypes.elementType.isRequired,
-  chunks: PropTypes.array, // eslint-disable-line react/forbid-prop-types
-  chunkId: PropTypes.string,
-  name: PropTypes.string,
-};
-
-ChunkModulesLink.defaultProps = {
-  chunks: [],
-  chunkId: '',
-  name: '',
-};
-
-export const AssetInfo = (props) => {
-  const { className, chunks, item, labels, CustomComponentLink } = props;
-
-  return (
-    <Stack space="xsmall" className={cx(css.root, className)}>
-      {item.runs.map((run, index) => {
-        const Title = index !== 0 ? 'h4' : 'h3';
-        const key = `asset-info-${run?.name || index}-${index}`;
-
-        return (
-          <Stack space="xxxsmall" key={key}>
-            <Title>{labels[index]}</Title>
-            <FileName
-              className={css.fileName}
-              as='code'
-              name={run?.name || '-'}
-            />
-
-            {index === 0 && (
-              <ChunkModulesLink
-                as={CustomComponentLink}
-                chunks={chunks}
-                chunkId={run?.chunkId}
-                name={run?.name}
-              />
-            )}
-          </Stack>
-        );
-      })}
-    </Stack>
-  );
-};
-
-AssetInfo.propTypes = {
-  className: PropTypes.string,
-  item: PropTypes.shape({
-    runs: PropTypes.arrayOf(
-      PropTypes.shape({
-        name: PropTypes.string,
-        chunkId: PropTypes.string,
-      }),
-    ),
-  }).isRequired,
-  labels: PropTypes.arrayOf(PropTypes.string).isRequired,
-  chunks: PropTypes.array, // eslint-disable-line react/forbid-prop-types
-  CustomComponentLink: PropTypes.elementType,
-};
-
-AssetInfo.defaultProps = {
-  className: '',
-  chunks: [],
-  CustomComponentLink: ComponentLink,
-};

package/src/components/job-meta/index.js

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

package/src/components/job-meta/job-meta.jsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import css from './job-meta.module.css';
-
-export const JobMeta = (props) => {
-  const {
-    as: Component, className, meta, ...restProps
-  } = props;
-
-  const rootClassName = cx(css.root, className);
-
-  return (
-    <Component className={rootClassName} {...restProps}>
-      {meta.map(({ title, content }, index) => {
-        const key = index;
-
-        return (
-          <div className={css.item} key={key}>
-            {title && (<h2 className={css.itemTitle}>{title}</h2>)}
-            {content.map((item) => item)}
-          </div>
-        );
-      })}
-    </Component>
-  );
-};
-
-JobMeta.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-
-  /** Contrnt */
-  meta: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    content: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.element])),
-  })).isRequired,
-
-  /** Render component */
-  as: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-};
-
-JobMeta.defaultProps = {
-  className: '',
-  as: 'div',
-};

package/src/components/job-meta/job-meta.module.css

@@ -1,19 +0,0 @@
-.root {
-  padding: var(--space-xsmall) var(--space-small);
-  display: flex;
-}
-
-.item {
-  flex: 1 1 100%;
-}
-
-.itemTitle {
-  margin: 0;
-  font-size: 1em;
-  font-weight: bold;
-  color: var(--color-text-light);
-}
-
-.item + .item {
-  margin-left: var(--space-xsmall);
-}

package/src/components/jobs-header/jobs-header.jsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import I18N from '../../i18n';
-import { FlexStack } from '../../layout/flex-stack';
-import { JobHeader } from '../job-header';
-import css from './jobs-header.module.css';
-
-export const JobsHeader = (props) => {
-  const { className, jobs } = props;
-  const rootClassName = cx(css.root, className);
-
-  return (
-    <FlexStack className={rootClassName} space="none">
-      {jobs?.map((job, index) => (
-        <JobHeader
-          key={job.internalBuildNumber || index}
-          className={css.item}
-          job={job}
-          tag={index === 0 ? I18N.CURRENT : I18N.BASELINE}
-        />
-      ))}
-    </FlexStack>
-  );
-};
-
-JobsHeader.propTypes = {
-  /** Adopted child classname */
-  className: PropTypes.string,
-
-  /** Jobs data */
-  jobs: PropTypes.arrayOf(
-    PropTypes.shape({
-      internalBuildNumber: PropTypes.number,
-    }),
-  ),
-};
-
-JobsHeader.defaultProps = {
-  className: '',
-  jobs: null,
-};

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/module-info/module-info.jsx

@@ -1,123 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import isEmpty from 'lodash/isEmpty';
-import noop from 'lodash/noop';
-import { getBundleModulesByChunk, getBundleModulesBySearch } from '@bundle-stats/utils';
-
-import { Stack } from '../../layout/stack';
-import { FlexStack } from '../../layout/flex-stack';
-import { FileName } from '../../ui/file-name';
-import { Tag } from '../../ui/tag';
-import { ComponentLink } from '../component-link';
-import css from './module-info.module.css';
-
-export const ModuleInfo = (props) => {
-  const {
-    className,
-    item,
-    labels,
-    chunks,
-    chunkIds,
-    customComponentLink: CustomComponentLink,
-    onClick,
-  } = props;
-
-  return (
-    <Stack space="small" className={cx(css.root, className)}>
-      {item.runs.map((run, index) => (
-        <Stack space="xsmall" key={`module-info-${run?.name || index}-${index}`} className={css.run}>
-          <Stack space="xxxsmall">
-            <FlexStack space="xxxsmall" alignItems="center" as="h4" className={css.title}>
-              <span>{labels[index]}</span>
-              <Tag className={css.titleTag}>{index === 0 ? 'current' : 'baseline'}</Tag>
-            </FlexStack>
-            <FileName className={css.fileName} as="code" name={run?.name || '-'} />
-          </Stack>
-
-          {/**
-            * Render chunks only for the current run
-            * we do not have the correct chunk ids for baselines
-            */}
-          {index === 0 && !isEmpty(run?.chunkIds) && (
-            <Stack className={css.chunks}>
-              <h5>Chunks</h5>
-              <ul className={css.list}>
-              {run.chunkIds.map((chunkId) => {
-                const chunk = chunks?.find(({ id }) => id === chunkId);
-
-                if (!chunk) {
-                  return null;
-                }
-
-                return (
-                  <li>
-                    <CustomComponentLink
-                      {...getBundleModulesByChunk(chunkIds, chunkId)}
-                      onClick={onClick}
-                      className={css.chunksItem}
-                    >
-                      {chunk.name}
-                    </CustomComponentLink>
-                  </li>
-                );
-              })}
-              </ul>
-            </Stack>
-          )}
-
-          {run?.reasons && (
-            <Stack>
-              <h5>Reasons</h5>
-              <ul className={css.list}>
-                {run.reasons.map((reason) => (
-                  <li key={reason}>
-                    <CustomComponentLink
-                      {...getBundleModulesBySearch(`^${reason}$`)}
-                      onClick={onClick}
-                      className={css.reasonLink}
-                      >
-                      <FileName name={reason} className={css.reason} />
-                    </CustomComponentLink>
-                  </li>
-                ))}
-              </ul>
-            </Stack>
-          )}
-        </Stack>
-      ))}
-    </Stack>
-  );
-};
-
-ModuleInfo.propTypes = {
-  className: PropTypes.string,
-  item: PropTypes.shape({
-    key: PropTypes.string,
-    runs: PropTypes.arrayOf(
-      PropTypes.shape({
-        key: PropTypes.string,
-        name: PropTypes.string,
-        chunkIds: PropTypes.arrayOf(PropTypes.string),
-      }),
-    ),
-  }).isRequired,
-  labels: PropTypes.arrayOf(PropTypes.string).isRequired,
-  chunks: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      name: PropTypes.string,
-    }),
-  ),
-  chunkIds: PropTypes.arrayOf(PropTypes.string),
-  customComponentLink: PropTypes.elementType,
-  onClick: PropTypes.func,
-};
-
-ModuleInfo.defaultProps = {
-  className: '',
-  chunks: [],
-  chunkIds: [],
-  customComponentLink: ComponentLink,
-  onClick: noop,
-};