@bundle-stats/ui 4.3.0-beta.3 → 4.3.0-rc.1

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/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,93 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import isEmpty from 'lodash/isEmpty';
-import noop from 'lodash/noop';
-import { getBundleModulesByChunk } from '@bundle-stats/utils';
-
-import { Stack } from '../../layout/stack';
-import { FileName } from '../../ui/file-name';
-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="xsmall" className={className}>
-      {item.runs.map((run, index) => {
-        const TitleComponent = index !== 0 ? 'h4' : 'h3';
-        const key = `module-info-${run?.name || index}-${index}`;
-
-        return (
-          <Stack space="xxxsmall" key={key}>
-            <TitleComponent>{labels[index]}</TitleComponent>
-            {index === 0 && !isEmpty(run?.chunkIds) && (
-              <div className={css.chunks}>
-                <span className={css.chunksTitle}>Chunks:</span>
-                {run.chunkIds.map((chunkId) => {
-                  const chunk = chunks?.find(({ id }) => id === chunkId);
-
-                  if (!chunk) {
-                    return null;
-                  }
-
-                  return (
-                    <CustomComponentLink
-                      {...getBundleModulesByChunk(chunkIds, chunkId)}
-                      onClick={onClick}
-                      className={css.chunksItem}
-                    >
-                      {chunk.name}
-                    </CustomComponentLink>
-                  );
-                })}
-              </div>
-            )}
-
-            <FileName className={css.fileName} as="code" name={run?.name || '-'} />
-          </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';

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/src/layout/box/box.jsx

@@ -1,67 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import { NO_SPACE, SPACES } from '../../constants';
-import css from './box.module.css';
-
-export const Box = (props) => {
-  const {
-    className,
-    as: Component,
-    padding,
-    horizontalPadding,
-    verticalPadding,
-    outline,
-    ...restProps
-  } = props;
-
-  const [resolvedPadding, resolvedVerticalPadding, resolvedHorizontalPadding] = Array.isArray(
-    padding,
-  )
-    ? [null, ...padding]
-    : [padding, verticalPadding, horizontalPadding];
-
-  const rootClassName = cx(
-    css.root,
-    className,
-    resolvedPadding && css[`padding-${resolvedPadding}`],
-    resolvedVerticalPadding && css[`vertical-padding-${resolvedVerticalPadding}`],
-    resolvedHorizontalPadding && css[`horizontal-padding-${resolvedHorizontalPadding}`],
-    outline && css.outline,
-  );
-
-  return <Component {...restProps} className={rootClassName} />;
-};
-
-Box.defaultProps = {
-  className: '',
-  as: 'div',
-  padding: NO_SPACE,
-  horizontalPadding: '',
-  verticalPadding: '',
-  outline: false,
-};
-
-Box.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-
-  /** Rendered component */
-  as: PropTypes.elementType,
-
-  /** Padding space size */
-  padding: PropTypes.oneOfType([
-    PropTypes.oneOf(SPACES),
-    PropTypes.arrayOf(PropTypes.oneOf(SPACES)),
-  ]),
-
-  /** Horizonatl padding space size */
-  horizontalPadding: PropTypes.oneOf(SPACES),
-
-  /** Vertical padding space size */
-  verticalPadding: PropTypes.oneOf(SPACES),
-
-  /** Outline flag */
-  outline: PropTypes.bool,
-};

package/src/layout/box/index.js

@@ -1 +0,0 @@
-export { Box } from './box';

package/src/layout/flex-stack/flex-stack.jsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import { NO_SPACE, SPACES } from '../../constants';
-import { getRenderChildWithClassName } from '../../utils';
-import css from './flex-stack.module.css';
-
-export const FlexStack = ({
-  as: Component = 'div',
-  className = '',
-  space = '',
-  inline = false,
-  children = null,
-  alignItems = '',
-  ...restProps
-}) => {
-  const rootClassName = cx(
-    className,
-    css.root,
-    css[`space--${space}`],
-    css[`align-items--${alignItems}`],
-    inline && css.inline,
-  );
-
-  return (
-    <Component {...restProps} className={rootClassName}>
-      {React.Children.map(children, getRenderChildWithClassName(css.item))}
-    </Component>
-  );
-};
-
-FlexStack.defaultProps = {
-  as: 'div',
-  className: '',
-  children: null,
-  space: NO_SPACE,
-  alignItems: undefined,
-  inline: false,
-};
-
-FlexStack.propTypes = {
-  as: PropTypes.elementType,
-  className: PropTypes.string,
-  children: PropTypes.node,
-  space: PropTypes.oneOf(SPACES),
-  alignItems: PropTypes.oneOf(['stretch', 'center', 'flex-start', 'flex-end', 'baseline']),
-  inline: PropTypes.bool,
-};

package/src/layout/stack/stack.jsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import { NO_SPACE, SPACES } from '../../constants';
-import { getRenderChildWithClassName } from '../../utils';
-import css from './stack.module.css';
-
-export const Stack = (props) => {
-  const { as: Component, className, space, children, ...restProps } = props;
-  const rootClassName = cx(className, css.root, css[`space--${space}`]);
-
-  return (
-    <Component {...restProps} className={rootClassName}>
-      {React.Children.map(children, getRenderChildWithClassName(css.item))}
-    </Component>
-  );
-};
-
-Stack.defaultProps = {
-  as: 'div',
-  className: '',
-  children: null,
-  space: NO_SPACE,
-};
-
-Stack.propTypes = {
-  as: PropTypes.elementType,
-  className: PropTypes.string,
-  children: PropTypes.node,
-  space: PropTypes.oneOf(SPACES),
-};

package/src/ui/alert/alert.jsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-
-import { Box } from '../../layout/box';
-import css from './alert.module.css';
-
-export const Alert = (props) => {
-  const { className, kind, children } = props;
-
-  return (
-    <Box padding={['xsmall', 'small']} outline className={cx(css.root, className, css[kind])}>
-      {children}
-    </Box>
-  );
-};
-
-Alert.propTypes = {
-  className: PropTypes.string,
-  kind: PropTypes.string,
-  children: PropTypes.node.isRequired,
-};
-
-Alert.defaultProps = {
-  className: '',
-  kind: 'default',
-};

package/src/ui/container/container.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import css from './container.module.css';
-
-export const Container = ({ className, as: Component, ...restProps }) => (
-  <Component className={cx(css.root, className)}>
-    <div className={css.inner} {...restProps} />
-  </Component>
-);
-
-Container.defaultProps = {
-  className: '',
-  as: 'div',
-};
-
-Container.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-
-  /** Custom component */
-  as: PropTypes.elementType,
-};

package/src/ui/container/index.js

@@ -1 +0,0 @@
-export { Container } from './container';

package/src/ui/panels/index.js

@@ -1 +0,0 @@
-export { Panels } from './panels';