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

package/src/components/metrics-table-search/metrics-table-search.module.css

@@ -1,41 +0,0 @@
-.root {
-  width: 100%;
-  position: relative;
-  z-index: var(--layout-low); /** show collapsed border on focus */
-}
-
-.input {
-  height: var(--space-large);
-}
-
-.cancelButton {
-  appearance: none;
-  padding: 0;
-  border: 0;
-  background: none;
-  cursor: pointer;
-  border-radius: 50%;
-  position: absolute;
-  right: 2px;
-  top: 50%;
-  transform: translateY(-50%);
-  padding: var(--space-xxxsmall);
-  width: var(--space-medium);
-  height: var(--space-medium);
-  background: radial-gradient(var(--color-background) 50%, transparent);
-  color: var(--color-text-ultra-light);
-  transition: var(--transition-in);
-}
-
-.cancelButton:focus,
-.cancelButton:hover,
-.cancelButton:active {
-  color: var(--color-text-light);
-  transition: var(--transition-out);
-}
-
-.cancelButtonIcon {
-  display: block;
-  width: var(--space-small);
-  height: var(--space-small);
-}

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,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/src/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/src/components/total-size-type-title/index.js

@@ -1 +0,0 @@
-export * from './total-size-type-title';

package/src/components/total-size-type-title/total-size-type-title.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import config from '../../config.json';
-import I18N from '../../i18n';
-import { FlexStack } from '../../layout/flex-stack';
-import { Stack } from '../../layout/stack';
-import { Icon } from '../../ui/icon';
-import { HoverCard } from '../../ui/hover-card';
-import css from './total-size-type-title.module.css';
-
-export const TotalSizeTypeTitle = ({ className }) => (
-  <FlexStack space="xxxsmall" alignItems="center" className={cx(css.root, className)}>
-    <span className={css.text}>{I18N.ASSET_TOTALS}</span>
-    <HoverCard label={<Icon glyph="help" />} anchorClassName={css.anchor}>
-      <Stack space="xxxsmall">
-        <p>{I18N.ASSET_TOTALS_INFO}</p>
-        <p>
-          <button
-            type="button"
-            onClick={() => window.open(config.documentation.assets)}
-            className={css.readMoreLink}
-          >
-            {I18N.READ_MORE}
-          </button>
-        </p>
-      </Stack>
-    </HoverCard>
-  </FlexStack>
-);
-
-TotalSizeTypeTitle.propTypes = {
-  className: PropTypes.string,
-};
-
-TotalSizeTypeTitle.defaultProps = {
-  className: '',
-};

package/src/components/total-size-type-title/total-size-type-title.module.css

@@ -1,32 +0,0 @@
-.root {
-  color: var(--color-text-light);
-}
-
-.text {
-  font-weight: bold;
-  font-size: var(--size-medium);
-  line-height: var(--space-medium);
-  text-transform: uppercase;
-}
-
-.anchor {
-  display: block;
-}
-
-.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;
-}

package/src/hooks/rows-sort.js

@@ -1,24 +0,0 @@
-import { useState, useMemo } from 'react';
-import orderBy from 'lodash/orderBy';
-
-export const useRowsSort = ({
-  rows,
-  sortFields,
-  sortBy = 'size',
-  sortDirection = 'desc',
-  getCustomSort,
-}) => {
-  const [sort, updateSort] = useState({ field: sortBy, direction: sortDirection });
-
-  const orderedRows = useMemo(
-    () => orderBy(rows, getCustomSort(sort.field), sort.direction),
-    [rows, sort],
-  );
-
-  return {
-    sortFields,
-    sort,
-    updateSort,
-    items: orderedRows,
-  };
-};

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/query-state.jsx

@@ -1,41 +0,0 @@
-import React, { useCallback } from 'react';
-import { JsonParam, QueryParamProvider, useQueryParams } from 'use-query-params';
-import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5'
-import { parse, stringify } from 'query-string'
-import isEqual from 'lodash/isEqual';
-import merge from 'lodash/merge';
-
-export const QueryStateProvider = (props) => (
-  <QueryParamProvider
-    adapter={ReactRouter5Adapter}
-    options={{
-      searchStringToObject: parse,
-      objectToSearchString: stringify,
-    }}
-    {...props}
-  />
-);
-
-export const useComponentQueryState = (componentName) => {
-  const [search, setSearch] = useQueryParams({
-    [componentName]: JsonParam,
-  });
-
-  const state = search[componentName];
-
-  const setState = useCallback(
-    (newState) => {
-      const newComponentState = merge({}, state, newState);
-
-      // Deep check to prevent unnecessary state changes
-      if (isEqual(newComponentState, state)) {
-        return;
-      }
-
-      setSearch({ [componentName]: newComponentState });
-    },
-    [state],
-  );
-
-  return [state, setState];
-};

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