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

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/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,
-};

package/src/components/summary/summary.jsx

@@ -1,73 +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
-            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';