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

package/src/ui/dropdown/dropdown.jsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
-
-import { FlexStack } from '../../layout/flex-stack';
-import { Icon } from '../icon';
-import css from './dropdown.module.css';
-
-const Item = ({ className = '', isActive = false, ...restProps }) => (
-  <MenuItem className={cx(css.item, className, isActive && css.itemActive)} {...restProps} />
-);
-
-Item.propTypes = {
-  className: PropTypes.string,
-  isActive: PropTypes.bool,
-};
-
-Item.defaultProps = {
-  className: '',
-  isActive: false,
-};
-
-export const Dropdown = (props) => {
-  const { className, buttonClassName, label, ariaLabel, glyph, children } = props;
-  const rootClassName = cx(css.root, className);
-  const menuState = useMenuState();
-
-  return (
-    <div className={rootClassName}>
-      <MenuButton state={menuState} className={cx(css.button, buttonClassName)} tabIndex={null}>
-        <FlexStack space="xxxsmall" alignItems="center" className={css.label}>
-          {glyph && <Icon className={css.labelIcon} glyph={glyph} />}
-          {label && <span className={css.labelText}>{label}</span>}
-        </FlexStack>
-      </MenuButton>
-      <Menu state={menuState} aria-label={ariaLabel || label} className={css.dropdown}>
-        {typeof children === 'function'
-          ? children({
-              MenuItem: Item,
-              menu: menuState,
-              menuItemClassName: css.item,
-              menuItemActiveClassName: css.itemActive,
-            })
-          : children}
-      </Menu>
-    </div>
-  );
-};
-
-Dropdown.defaultProps = {
-  className: '',
-  buttonClassName: '',
-  label: null,
-  ariaLabel: '',
-  glyph: null,
-};
-
-Dropdown.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-
-  /** Button adopted child class name */
-  buttonClassName: PropTypes.string,
-
-  /** Button label */
-  label: PropTypes.node,
-
-  /** Aria label */
-  ariaLabel: PropTypes.string,
-
-  /** Icon glyph */
-  glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
-  /** Content */
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired,
-};
-
-Dropdown.Item = Item;

package/src/ui/filters/__tests__/filters-dropdown.utils.js

@@ -1,74 +0,0 @@
-import { getGroupFiltersLabelSuffix } from '../filters.utils';
-
-describe('UI / Filters / utils', () => {
-  describe('getGroupFiltersLabelSuffix', () => {
-    test('should return none', () => {
-      const suffix = getGroupFiltersLabelSuffix([
-        ['CSS', { label: 'CSS', defaultValue: false }],
-        ['JS', { label: 'JS', defaultValue: false }],
-        ['IMG', { label: 'IMG', defaultValue: false }],
-        ['MEDIA', { label: 'Media', defaultValue: false }],
-        ['FONTS', { label: 'Fonts', defaultValue: false }],
-        ['HTML', { label: 'HTML', defaultValue: false }],
-        ['OTHER', { label: 'Other', defaultValue: false }],
-      ]);
-
-      expect(suffix).toEqual('none');
-    });
-
-    test('should return all', () => {
-      const suffix = getGroupFiltersLabelSuffix([
-        ['CSS', { label: 'CSS', defaultValue: true }],
-        ['JS', { label: 'JS', defaultValue: true }],
-        ['IMG', { label: 'IMG', defaultValue: true }],
-        ['MEDIA', { label: 'Media', defaultValue: true }],
-        ['FONTS', { label: 'Fonts', defaultValue: true }],
-        ['HTML', { label: 'HTML', defaultValue: true }],
-        ['OTHER', { label: 'Other', defaultValue: true }],
-      ]);
-
-      expect(suffix).toEqual('all');
-    });
-    test('should return checked filters', () => {
-      const suffix = getGroupFiltersLabelSuffix([
-        ['CSS', { label: 'CSS', defaultValue: true }],
-        ['JS', { label: 'JS', defaultValue: true }],
-        ['IMG', { label: 'IMG', defaultValue: false }],
-        ['MEDIA', { label: 'Media', defaultValue: false }],
-        ['FONTS', { label: 'Fonts', defaultValue: false }],
-        ['HTML', { label: 'HTML', defaultValue: false }],
-        ['OTHER', { label: 'Other', defaultValue: false }],
-      ]);
-
-      expect(suffix).toEqual('CSS, JS');
-    });
-
-    test('should crop last filter if need it', () => {
-      const suffix = getGroupFiltersLabelSuffix([
-        ['CSS', { label: 'CSS', defaultValue: true }],
-        ['JS', { label: 'JS', defaultValue: true }],
-        ['IMG', { label: 'IMG', defaultValue: true }],
-        ['MEDIA', { label: 'Meeeeeeedia', defaultValue: true }],
-        ['FONTS', { label: 'Fonts', defaultValue: false }],
-        ['HTML', { label: 'HTML', defaultValue: false }],
-        ['OTHER', { label: 'Other', defaultValue: false }],
-      ]);
-
-      expect(suffix).toEqual('CSS, JS, IMG, Mee...');
-    });
-
-    test('should crop and add remaining filters count', () => {
-      const suffix = getGroupFiltersLabelSuffix([
-        ['CSS', { label: 'CSS', defaultValue: true }],
-        ['JS', { label: 'JS', defaultValue: true }],
-        ['IMG', { label: 'IMG', defaultValue: true }],
-        ['MEDIA', { label: 'Media', defaultValue: true }],
-        ['FONTS', { label: 'Fonts', defaultValue: true }],
-        ['HTML', { label: 'HTML', defaultValue: true }],
-        ['OTHER', { label: 'Other', defaultValue: false }],
-      ]);
-
-      expect(suffix).toEqual('CSS, JS, IMG, Media +2');
-    });
-  });
-});

package/src/ui/filters/filters.jsx

@@ -1,234 +0,0 @@
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import { FlexStack } from '../../layout/flex-stack';
-import { Dropdown } from '../dropdown';
-import { getGroupFiltersLabelSuffix, LABELS } from './filters.utils';
-import css from './filters.module.css';
-
-const Filter = (props) => {
-  const {
-    className,
-    as: Component = 'div',
-    buttonClassName,
-    label,
-    name,
-    getOnOnlyClick,
-    ...inputProps
-  } = props;
-
-  const id = `filter-${name}`;
-  const rootClassName = cx(css.filter, className);
-
-  return (
-    <Component className={rootClassName}>
-      {/* eslint-disable */}
-      <FlexStack space="xxxsmall" alignItems="center" as="label" className={cx(css.filterCheckbox, buttonClassName)}>
-        {/* eslint-enabled */}
-        <input className={css.filterInput} type="checkbox" id={id} name={name} {...inputProps} />
-        <span className={css.filterLabel} title={label}>
-          {label}
-        </span>
-      </FlexStack>
-
-      {getOnOnlyClick && (
-        <button className={css.filterOnlyButton} type="button" onClick={getOnOnlyClick(name)}>
-          only
-        </button>
-      )}
-    </Component>
-  );
-};
-
-Filter.propTypes = {
-  className: PropTypes.string,
-  as: PropTypes.elementType,
-  buttonClassName: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  getOnOnlyClick: PropTypes.func,
-};
-
-Filter.defaultProps = {
-  className: '',
-  as: 'div',
-  buttonClassName: '',
-  getOnOnlyClick: null,
-};
-
-const FilterGroup = (props) => {
-  const { className, buttonClassName, groupKey, data, values, onCheckboxChange, toggleFilters } =
-    props;
-
-  const { label: groupLabel, ...groupData } = data;
-
-  const groupItems = Object.entries(groupData);
-  const groupCheckboxes = groupItems.filter(
-    ([itemKey, item]) => typeof item?.defaultValue !== 'undefined',
-  );
-  const areAllGroupItemsChecked = groupCheckboxes
-    .map(([itemKey]) => values?.[`${groupKey}.${itemKey}`])
-    .reduce((agg, val) => agg && val, true);
-
-  const filterSuffix = getGroupFiltersLabelSuffix(groupItems);
-  const hasCustomFilterSuffix = !Object.values(LABELS).includes(filterSuffix);
-  const dropdownLabel = (
-    <>
-      {`${groupLabel}:`}
-      &nbsp;
-      <span className={cx(hasCustomFilterSuffix && css.labelSuffixCustom)}>{filterSuffix}</span>
-    </>
-  );
-
-  const getOnGroupCheck =
-    (value, overrides = {}) =>
-    () => {
-      const newFilters = groupCheckboxes.reduce(
-        (agg, [itemKey]) => ({
-          ...agg,
-          [`${groupKey}.${itemKey}`]: value,
-        }),
-        {},
-      );
-
-      toggleFilters({
-        ...newFilters,
-        ...overrides,
-      });
-    };
-
-  return (
-    <Dropdown
-      className={className}
-      buttonClassName={buttonClassName}
-      label={dropdownLabel}
-      ariaLabel={`${groupLabel}: ${filterSuffix}`}
-    >
-      {({ MenuItem, menu, menuItemClassName }) => {
-        return (
-          <>
-            <div className={css.filterGroupItems}>
-              {groupItems.map(([itemKey, itemData]) => {
-                const id = [groupKey, itemKey].join('.');
-                const getOnOnlyClick = () => getOnGroupCheck(false, { [id]: true });
-
-                return (
-                  <Filter
-                    key={id}
-                    className={menuItemClassName}
-                    as={MenuItem}
-                    name={id}
-                    label={itemData.label}
-                    onChange={onCheckboxChange}
-                    checked={values[id]}
-                    disabled={itemData.disabled}
-                    getOnOnlyClick={getOnOnlyClick}
-                  />
-                );
-              })}
-            </div>
-            <div className={css.filterGroupActions}>
-              {areAllGroupItemsChecked ? (
-                <MenuItem
-                  id="clear-all"
-                  as="button"
-                  className={menuItemClassName}
-                  type="button"
-                  onClick={getOnGroupCheck(false)}
-                >
-                  Clear all
-                </MenuItem>
-              ) : (
-                <MenuItem
-                  id="clear-all"
-                  as="button"
-                  className={menuItemClassName}
-                  type="button"
-                  onClick={getOnGroupCheck(true)}
-                >
-                  Check all
-                </MenuItem>
-              )}
-            </div>
-          </>
-        );
-      }}
-    </Dropdown>
-  );
-};
-
-FilterGroup.propTypes = {
-  className: PropTypes.string,
-  buttonClassName: PropTypes.string,
-  groupKey: PropTypes.string.isRequired,
-  data: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  values: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  onCheckboxChange: PropTypes.func.isRequired,
-  toggleFilters: PropTypes.func.isRequired,
-};
-
-FilterGroup.defaultProps = {
-  className: '',
-  buttonClassName: '',
-};
-
-export const Filters = (props) => {
-  const { className, values, filters, toggleFilter, toggleFilters } = props;
-
-  const onCheckboxChange = useCallback(
-    (event) => {
-      const { name } = event.target;
-      toggleFilter(name, !values[name]);
-    },
-    [toggleFilter, values]
-  );
-  const rootClassName = cx(css.root, className);
-
-  return (
-    <form className={rootClassName}>
-      <FlexStack space="xxsmall" alignItems="flex-start" className={css.items}>
-        {Object.entries(filters).map(([name, data]) => {
-          if (typeof data?.defaultValue !== 'undefined') {
-            return (
-              <Filter
-                key={name}
-                className={cx(css.item, css.filterStandalone)}
-                buttonClassName={css.itemButton}
-                name={name}
-                label={data.label}
-                onChange={onCheckboxChange}
-                checked={values[name]}
-                disabled={data.disabled}
-              />
-            );
-          }
-
-          return (
-            <FilterGroup
-              className={css.item}
-              buttonClassName={css.itemButton}
-              key={name}
-              groupKey={name}
-              data={data}
-              values={values}
-              onCheckboxChange={onCheckboxChange}
-              toggleFilters={toggleFilters}
-            />
-          );
-        })}
-      </FlexStack>
-    </form>
-  );
-};
-
-Filters.defaultProps = {
-  className: '',
-};
-
-Filters.propTypes = {
-  className: PropTypes.string,
-  values: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  filters: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  toggleFilter: PropTypes.func.isRequired,
-};

package/src/ui/horizontal-bar-chart/horizontal-bar-chart.jsx

@@ -1,156 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import round from 'lodash/round';
-import sum from 'lodash/sum';
-import cx from 'classnames';
-
-import { getColors } from '../../utils';
-import { Tooltip } from '../tooltip';
-import css from './horizontal-bar-chart.module.css';
-
-class HorizontalBarChartItem extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.textRef = React.createRef();
-    this.ref = React.createRef();
-
-    this.state = {
-      isTextOverflowing: true,
-    };
-  }
-
-  componentDidMount() {
-    const wrapperWidth = this.ref?.current?.clientWidth || 0;
-    const textWidth = this.textRef?.current?.scrollWidth || 0;
-
-    if (wrapperWidth >= (textWidth + 2 * 4)) {
-      this.setState({ isTextOverflowing: false });
-    }
-  }
-
-  render() {
-    const {
-      color, label, getItemTooltip, width,
-    } = this.props;
-    const { isTextOverflowing } = this.state;
-    const tooltipContent = getItemTooltip();
-
-    return (
-      <span
-        className={cx(css.item, isTextOverflowing && css.textOverflowed)}
-        style={{
-          width,
-          background: color,
-        }}
-        ref={this.ref}
-      >
-        <Tooltip
-          className={css.itemContent}
-          title={tooltipContent}
-          darkMode={false}
-        >
-          <span className={css.itemLabel} ref={this.textRef}>
-            {label}
-          </span>
-        </Tooltip>
-      </span>
-    );
-  }
-}
-
-HorizontalBarChartItem.propTypes = {
-  width: PropTypes.string.isRequired,
-  color: PropTypes.string.isRequired,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-  getItemTooltip: PropTypes.func,
-};
-
-HorizontalBarChartItem.defaultProps = {
-  getItemTooltip: () => null,
-};
-
-const getTotalValues = (values) => sum(values.map((entry) => {
-  if (typeof entry === 'object') {
-    return entry.value;
-  }
-
-  return entry;
-}));
-
-export const HorizontalBarChart = (props) => {
-  const { className, data, maxValue } = props;
-  const { labels, values } = data;
-
-  const defaultColors = getColors(labels.length);
-  const total = maxValue || getTotalValues(values);
-
-  const entries = values.reduce((agg, entry, index) => {
-    const {
-      value,
-      color = defaultColors[index],
-      label = labels[index],
-      getItemTooltip,
-    } = typeof entry === 'object' ? entry : { value: entry };
-
-    const width = `${round((value / total) * 100, 2)}%`;
-
-    return [
-      ...agg,
-      {
-        value,
-        width,
-        color,
-        label,
-        getItemTooltip,
-      },
-    ];
-  }, []);
-
-  return (
-    <div className={cx(css.root, className)}>
-      {entries.map(({
-        color, getItemTooltip, label, width,
-      }, index) => {
-        const key = index;
-
-        return (
-          <HorizontalBarChartItem
-            key={key}
-            width={width}
-            color={color}
-            label={label}
-            getItemTooltip={getItemTooltip}
-            className={css.item}
-          />
-        );
-      })}
-    </div>
-  );
-};
-
-HorizontalBarChart.defaultProps = {
-  className: '',
-  maxValue: null,
-};
-
-HorizontalBarChart.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-
-  /** Data */
-  data: PropTypes.shape({
-    labels: PropTypes.arrayOf(PropTypes.string),
-    values: PropTypes.arrayOf(PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.shape({
-        value: PropTypes.number,
-        color: PropTypes.string,
-        label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-      }),
-    ])),
-  }).isRequired,
-
-  /** Mac value */
-  maxValue: PropTypes.number,
-};

package/src/ui/horizontal-bar-chart/horizontal-bar-chart.module.css

@@ -1,40 +0,0 @@
-.root {
-  background: var(--color-highlight);
-  display: flex;
-  align-items: stretch;
-  justify-content: flex-start;
-}
-
-.item {
-  flex: 0 1 auto;
-  background: var(--color-text);
-  display: inline-flex;
-  min-width: var(--space-xxxsmall);
-  min-height: var(--space-medium);
-}
-
-.itemContent {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  padding: var(--space-xxsmall);
-  align-items: center;
-  justify-content: center;
-
-  color: var(--color-background);
-  font-weight: bold;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-
-.itemLabel {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  visibility: visible;
-}
-
-.textOverflowed .itemLabel {
-  visibility: hidden;
-}

package/src/ui/horizontal-bar-chart/index.js

@@ -1 +0,0 @@
-export * from './horizontal-bar-chart';

package/src/ui/icon/icon.jsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import css from './icon.module.css';
-
-const ICONS = {
-  ARROW: 'arrow',
-  ARROW_RIGHT_CIRLCE: 'arrow-right-circle',
-  CANCEL: 'cancel',
-  CLOSE: 'close',
-  CLOCK: 'clock',
-  COMMIT: 'commit',
-  ERROR: 'error',
-  FILTER: 'filter',
-  INFO: 'info',
-  HELP: 'help',
-  MENU: 'menu',
-  SORT: 'sort',
-  WARNING: 'warning',
-};
-
-export const Icon = (props) => {
-  const { className, glyph, as: Component, size, ...restProps } = props;
-
-  return (
-    <Component className={cx(css.root, className, css[size])} {...restProps}>
-      <svg className={css.icon}>
-        <use xlinkHref={`#${glyph}`} />
-      </svg>
-    </Component>
-  );
-};
-
-Icon.ICONS = ICONS;
-
-Icon.SIZE_SMALL = 'small';
-Icon.SIZE_MEDIUM = 'medium';
-Icon.SIZE_LARGE = 'large';
-Icon.SIZES = [Icon.SIZE_SMALL, Icon.SIZE_MEDIUM, Icon.SIZE_LARGE];
-
-Icon.defaultProps = {
-  className: '',
-  as: 'span',
-  size: Icon.SIZE_MEDIUM,
-};
-
-Icon.propTypes = {
-  className: PropTypes.string,
-  glyph: PropTypes.oneOfType([PropTypes.oneOf(Object.values(ICONS)), PropTypes.node]).isRequired,
-  as: PropTypes.node,
-  size: PropTypes.oneOf(Icon.SIZES),
-};

package/src/ui/input/input.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-
-import css from './input.module.css';
-
-export const Input = ({ className, size, ...restProps }) => {
-  const rootClassName = cx(css.root, className, css[size]);
-  return <input className={rootClassName} {...restProps} />;
-};
-
-Input.propTypes = {
-  className: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-};
-
-Input.defaultProps = {
-  className: '',
-  size: 'medium',
-};

package/src/ui/panels/index.js

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

package/src/ui/panels/panels.jsx

@@ -1,39 +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 }) => (
-  <div
-    className={cx(css.root, className)}
-    {...restProps}
-  >
-    {React.Children.map(children, cloneElement)}
-  </div>
-);
-
-Panels.defaultProps = {
-  className: '',
-  children: null,
-};
-
-Panels.propTypes = {
-  /** Adopted child class anme */
-  className: PropTypes.string,
-
-  /** Content */
-  children: PropTypes.node,
-};