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

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

@@ -1,66 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import get from 'lodash/get';
-import { Source, formatDateTime } from '@bundle-stats/utils';
-
-import { FlexStack } from '../../layout/flex-stack';
-import { Stack } from '../../layout/stack';
-import { Icon } from '../../ui/icon';
-import { Tag } from '../../ui/tag';
-import css from './job-header.module.css';
-
-export const JobHeader = (props) => {
-  const { className, tag, job, children } = props;
-
-  const { builtAt, hash } = get(job, `meta.${Source.webpack}`, {});
-  const rootClassName = cx(css.root, className);
-
-  return (
-    <Stack className={rootClassName} space="xxsmall">
-      <h1 className={css.title}>
-        <span>{`#${job.internalBuildNumber}`}</span>
-        {tag && <Tag className={css.tag}>{tag}</Tag>}
-      </h1>
-      <FlexStack space="xxsmall" className={css.meta}>
-        {builtAt && (
-          <FlexStack space="xxxsmall" alignItems="center" inline as="span" title={builtAt}>
-            <Icon glyph="clock" />
-            <span>
-              {formatDateTime({ dateStyle: 'medium', timeStyle: 'medium' }, builtAt)}
-            </span>
-          </FlexStack>
-        )}
-
-        {hash && (
-          <FlexStack space="xxxsmall" alignItems="center" inline title="Webpack bundle hash">
-            <Icon glyph="commit" />
-            <span>{hash}</span>
-          </FlexStack>
-        )}
-
-        <div className={css.content}>{children}</div>
-      </FlexStack>
-    </Stack>
-  );
-};
-
-JobHeader.propTypes = {
-  className: PropTypes.string,
-  tag: PropTypes.string,
-  job: PropTypes.shape({
-    internalBuildNumber: PropTypes.number,
-    meta: PropTypes.shape({
-      builtAt: PropTypes.string,
-    }),
-    summary: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  }),
-  children: PropTypes.element,
-};
-
-JobHeader.defaultProps = {
-  className: '',
-  tag: '',
-  job: null,
-  children: null,
-};

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

@@ -1,19 +0,0 @@
-.title {
-  font-size: var(--size-xlarge);
-  line-height: 1;
-  font-weight: bold;
-  vertical-align: top;
-}
-
-.tag {
-  margin-left: var(--space-xxsmall);
-  vertical-align: top;
-  outline: 1px solid var(--color-outline);
-  background: var(--color-highlight);
-  color: var(--color-text-light);
-}
-
-.meta {
-  font-size: var(--size-small);
-  color: var(--color-text-light);
-}

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/metrics-table/index.jsx

@@ -1,11 +0,0 @@
-import React, { useState } from 'react';
-
-import { MetricsTable as BaseComponent } from './metrics-table';
-
-export const MetricsTable = (props) => {
-  const [showAllItems, setShowAllItems] = useState(false);
-
-  return (
-    <BaseComponent {...props} showAllItems={showAllItems}  setShowAllItems={setShowAllItems} />
-  );
-};

package/src/components/metrics-table/metrics-table.jsx

@@ -1,299 +0,0 @@
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import isEmpty from 'lodash/isEmpty';
-import sum from 'lodash/sum';
-import { METRIC_TYPE_FILE_SIZE, getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
-
-import { Table } from '../../ui/table';
-import { Metric } from '../metric';
-import { Delta } from '../delta';
-import { JobName } from '../job-name';
-import styles from './metrics-table.module.css';
-
-const METRIC_TYPE_DATA = getGlobalMetricType(null, METRIC_TYPE_FILE_SIZE);
-const VISIBLE_COUNT = 500;
-
-const getRowsRunTotal = (rows, runIndex) => sum(rows.map((row) => row?.runs?.[runIndex]?.value || 0));
-
-const getHeaderLabelCells = (rows) => (run, runIndex, runs) => {
-  const isBaseline = runIndex === runs.length - 1;
-  const className = cx(styles.value, isBaseline ? styles.baseline : styles.current);
-
-  if (!run) {
-    return [
-      { children: '-', className },
-      ...(!isBaseline ? [{ children: ' ', className: styles.delta }] : []),
-    ];
-  }
-
-  const { label, internalBuildNumber } = run;
-
-  const jobName = (
-    <JobName
-      title={runIndex === 0 ? 'Current' : 'Baseline'}
-      internalBuildNumber={internalBuildNumber}
-      className={styles.jobName}
-    >
-      {label}
-    </JobName>
-  );
-
-  return [
-    // Value column
-    { children: jobName, className },
-    // Delta column
-    ...(!isBaseline ? [{ children: ' ', className: cx(styles.delta) }] : []),
-  ];
-};
-
-const getHeaderTotalCells = (rows) => (run, runIndex, runs) => {
-  const isBaseline = runIndex === runs.length - 1;
-  const className = cx(styles.value, isBaseline ? styles.baseline : styles.current);
-
-  const currentRunTotal = getRowsRunTotal(rows, runIndex);
-  const baselineRunTotal = !isBaseline && getRowsRunTotal(rows, runIndex + 1);
-  const infoTotal = getMetricRunInfo(METRIC_TYPE_DATA, currentRunTotal, baselineRunTotal);
-
-  return [
-    // Value column
-    {
-      children: <Metric className={styles.tableHeaderRunMetric} value={infoTotal.displayValue} />,
-      className,
-    },
-
-    // Delta column
-    ...(!isBaseline
-      ? [
-          {
-            children: (
-              <Delta
-                displayValue={infoTotal.displayDeltaPercentage}
-                deltaType={infoTotal.deltaType}
-              />
-            ),
-            className: styles.delta,
-          },
-        ]
-      : []),
-  ];
-};
-
-const getHeaderRows = (runs, items, showHeaderSum, title) => [
-  {
-    className: styles.headerRowColumns,
-    cells: [
-      // Metric name column - one empty strying to render the column
-      {
-        children: title || ' ',
-        className: styles.metricName,
-        rowSpan: showHeaderSum ? 2 : 1,
-      },
-
-      // Runs
-      ...runs.map(getHeaderLabelCells(items)).flat(),
-    ],
-  },
-  ...(showHeaderSum
-    ? [
-        {
-          className: styles.headerRowTotals,
-          cells: runs.map(getHeaderTotalCells(items)).flat(),
-        },
-      ]
-    : []),
-];
-
-const MetricsTableRow = ({ item, renderRowHeader }) => (
-  <Table.Tr className={cx(!item.changed && styles.unchanged)}>
-    <Table.Th className={styles.metricName}>{renderRowHeader(item)}</Table.Th>
-
-    {item.runs.map((run, index) => {
-      const isBaseline = index === item.runs.length - 1;
-      const valueClassName = cx(styles.value, !isBaseline && styles.current);
-
-      // Empty cells if no value
-      if (!run || typeof run.value === 'undefined') {
-        return (
-          <>
-            <Table.Td className={valueClassName}>-</Table.Td>
-            {!isBaseline && <Table.Td className={styles.delta} />}
-          </>
-        );
-      }
-
-      const { displayValue, deltaPercentage, displayDeltaPercentage, deltaType } = run;
-
-      return (
-        <>
-          <Table.Td className={valueClassName}>
-            <Metric value={displayValue} />
-          </Table.Td>
-          {!isBaseline && typeof deltaPercentage === 'number' && (
-            <Table.Td className={styles.delta}>
-              <Delta displayValue={displayDeltaPercentage} deltaType={deltaType} />
-            </Table.Td>
-          )}
-        </>
-      );
-    })}
-  </Table.Tr>
-);
-
-MetricsTableRow.propTypes = {
-  item: PropTypes.shape({
-    changed: PropTypes.bool,
-    runs: PropTypes.arrayOf(
-      PropTypes.shape({
-        value: PropTypes.number,
-        displayValue: PropTypes.string,
-        deltaPercentage: PropTypes.number,
-        displayDeltaPercentage: PropTypes.string,
-        deltaType: PropTypes.string,
-      }),
-    ),
-  }).isRequired,
-  renderRowHeader: PropTypes.func.isRequired,
-};
-
-export const MetricsTable = ({
-  className,
-  renderRowHeader,
-  runs,
-  items,
-  emptyMessage,
-  showHeaderSum,
-  headerRows,
-  title,
-  showAllItems,
-  setShowAllItems,
-  ...restProps
-}) => {
-  const { headers, columnClassNames } = useMemo(() => {
-    const headerColumns = getHeaderRows(runs, items, showHeaderSum, title);
-
-    return {
-      headers: [...headerRows, ...headerColumns],
-      // First header row has the column class names
-      columnClassNames: headerColumns[0].cells.map((headerColumn) => headerColumn.className),
-    };
-  }, [headerRows, runs, items, showHeaderSum, title]);
-
-  const rootClassName = cx(
-    styles.root,
-    className,
-    runs.length > 1 && styles.multipleRuns,
-    showHeaderSum && styles.showHeaderSum,
-  );
-
-  const showEmpty = isEmpty(items);
-  const showItems = !showEmpty;
-  const hasHiddenItems = items?.length > VISIBLE_COUNT;
-  const visibleItems = !hasHiddenItems || showAllItems ? items : items?.slice(0, VISIBLE_COUNT);
-
-  return (
-    <Table className={rootClassName} compact {...restProps}>
-      <Table.THead>
-        {headers.map((headerRow) => {
-          const { cells, className: rowClassName } = headerRow.cells
-            ? headerRow
-            : { cells: headerRow };
-
-          return (
-            <Table.Tr className={rowClassName}>
-              {cells.map((header) => (
-                <Table.Th {...header} />
-              ))}
-            </Table.Tr>
-          );
-        })}
-      </Table.THead>
-      <Table.TBody>
-        {showEmpty && (
-          <Table.Tr>
-            <Table.Td className={styles.empty} colSpan={columnClassNames?.length || 1}>
-              {emptyMessage}
-            </Table.Td>
-          </Table.Tr>
-        )}
-
-        {showItems && (
-          <>
-            {visibleItems.map((item) => (
-              <MetricsTableRow key={item.key} item={item} renderRowHeader={renderRowHeader} />
-            ))}
-
-            {hasHiddenItems && (
-              <Table.Tr>
-                <Table.Td className={styles.showAllItems} colSpan={columnClassNames?.length || 1}>
-                  {showAllItems ? (
-                      <button
-                        onClick={() => setShowAllItems(false)}
-                        type="button"
-                        className={styles.showAllItemsButton}
-                      >
-                        Show less
-                      </button>
-                    ) : (
-                      <button
-                        onClick={() => setShowAllItems(true)}
-                        type="button"
-                        className={styles.showAllItemsButton}
-                      >
-                        Show all
-                      </button>
-                    )
-                  }
-                </Table.Td>
-              </Table.Tr>
-            )}
-          </>
-        )}
-      </Table.TBody>
-    </Table>
-  );
-};
-
-MetricsTable.defaultProps = {
-  className: '',
-  renderRowHeader: (item) => item.label,
-  emptyMessage: 'No entries found.',
-  showHeaderSum: false,
-  headerRows: [],
-  title: '',
-};
-
-MetricsTable.propTypes = {
-  className: PropTypes.string,
-  renderRowHeader: PropTypes.func,
-  runs: PropTypes.arrayOf(
-    PropTypes.shape({
-      internalBuildNumber: PropTypes.number,
-    }),
-  ).isRequired,
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      key: PropTypes.string,
-      label: PropTypes.string,
-      runs: PropTypes.arrayOf(
-        PropTypes.shape({
-          displayValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-          displayDelta: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-        }),
-      ),
-    }),
-  ).isRequired,
-  emptyMessage: PropTypes.element,
-  showHeaderSum: PropTypes.bool,
-  headerRows: PropTypes.arrayOf(
-    PropTypes.arrayOf(
-      PropTypes.oneOfType([
-        PropTypes.element,
-        PropTypes.shape({
-          children: PropTypes.node,
-        }),
-      ]),
-    ),
-  ),
-  title: PropTypes.element,
-};

package/src/components/metrics-table-options/metrics-table-options.jsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import I18N from '../../i18n';
-import { Dropdown } from '../../ui/dropdown';
-
-export const MetricsTableOptions = (props) => {
-  const { className,  handleViewAll, handleResetFilters, ...restProps } = props;
-
-  return (
-    <Dropdown className={className} glyph="menu" {...restProps}>
-      {handleResetFilters && (
-        <Dropdown.Item onClick={handleResetFilters}>
-          {I18N.RESET_FILTERS}
-        </Dropdown.Item>
-      )}
-      {handleViewAll && (
-        <Dropdown.Item onClick={handleViewAll}>
-          {I18N.VIEW_ALL}
-        </Dropdown.Item>
-      )}
-    </Dropdown>
-  );
-};
-
-MetricsTableOptions.propTypes = {
-  className: PropTypes.string,
-  handleViewAll: PropTypes.func,
-  handleResetFilters: PropTypes.func,
-};
-
-MetricsTableOptions.defaultProps = {
-  className: '',
-  handleViewAll: null,
-  handleResetFilters: null,
-};

package/src/components/metrics-table-search/index.js

@@ -1 +0,0 @@
-export * from './metrics-table-search';

package/src/components/metrics-table-search/metrics-table-search.jsx

@@ -1,72 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import debounce from 'lodash/debounce';
-
-import { Icon } from '../../ui/icon';
-import { Input } from '../../ui/input';
-
-import css from './metrics-table-search.module.css';
-
-export const MetricsTableSearch = (props) => {
-  const { className, placeholder, search, updateSearch } = props;
-  const rootClassname = cx(css.root, className);
-
-  const [value, setValue] = useState(search);
-
-  // Update local state when initial value has changed
-  useEffect(() => {
-    setValue(search);
-  }, [search]);
-
-  const debouncedUpdateSearch = useCallback(debounce(updateSearch, 500), []);
-
-  const handleChangeValue = useCallback(
-    (event) => {
-      const newValue = event.target.value;
-      setValue(newValue);
-
-      // Update parent state when the local value has changed
-      if (newValue !== search) {
-        debouncedUpdateSearch(newValue);
-      }
-    },
-    [search],
-  );
-
-  const handleClearValue = useCallback(() => {
-    const newValue = '';
-    setValue(newValue);
-    updateSearch(newValue);
-  }, []);
-
-  return (
-    <div className={rootClassname}>
-      <Input
-        className={css.input}
-        placeholder={placeholder}
-        onChange={handleChangeValue}
-        value={value}
-        size="small"
-        autoComplete="off"
-      />
-      {search && (
-        <button className={css.cancelButton} type="button" onClick={handleClearValue}>
-          <Icon className={css.cancelButtonIcon} glyph="cancel" />
-        </button>
-      )}
-    </div>
-  );
-};
-
-MetricsTableSearch.propTypes = {
-  className: PropTypes.string,
-  placeholder: PropTypes.string,
-  search: PropTypes.string.isRequired,
-  updateSearch: PropTypes.func.isRequired,
-};
-
-MetricsTableSearch.defaultProps = {
-  className: '',
-  placeholder: '',
-};