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

package/src/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/ui/sort-dropdown/index.js

@@ -1 +0,0 @@
-export * from './sort-dropdown';

package/src/ui/sort-dropdown/sort-dropdown.jsx

@@ -1,121 +0,0 @@
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import { Dropdown } from '../dropdown';
-import { Icon } from '../icon';
-import css from './sort-dropdown.module.css';
-
-const Item = ({
-  as: Component,
-  id,
-  label,
-  isActive,
-  direction,
-  defaultDirection,
-  getButtonOnClick,
-  ...restProps
-}) => {
-
-  const buttonProps = useMemo(() => {
-    let resolveNextDirection = defaultDirection;
-
-    if (isActive) {
-      resolveNextDirection = direction === 'asc' ? 'desc' : 'asc';
-    }
-
-    if (resolveNextDirection === 'desc') {
-      return {
-        className: css.itemAsc,
-        onClick: getButtonOnClick(id, 'desc'),
-        title: `Order data by ${label} descending`,
-      };
-    }
-
-    return {
-      onClick: getButtonOnClick(id, 'asc'),
-      title: `Order data by ${label} ascending`,
-    };
-  }, [isActive, direction, defaultDirection, id, label]);
-
-  return (
-    <Component
-      {...restProps}
-      {...buttonProps}
-      isActive={isActive}
-      className={cx(css.item, isActive && css.itemActive, buttonProps.className)}
-    >
-      <Icon className={css.itemIcon} glyph="arrow" />
-      <span className={css.itemLabel}>{label}</span>
-    </Component>
-  );
-};
-
-Item.propTypes = {
-  className: PropTypes.string,
-  as: PropTypes.element.isRequired,
-  id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  isActive: PropTypes.bool.isRequired,
-  direction: PropTypes.string.isRequired,
-  defaultDirection: PropTypes.string.isRequired,
-  getButtonOnClick: PropTypes.func.isRequired,
-};
-
-Item.defaultProps = {
-  className: '',
-};
-
-export const SortDropdown = (props) => {
-  const { className, label, fields, field, direction, onChange } = props;
-  const rootClassName = cx(css.root, className);
-
-  const customLabel = fields[field] ? `Ordered by ${fields[field].label}` : label;
-
-  return (
-    <Dropdown className={rootClassName} label={customLabel} glyph="sort" align="right">
-      {({ MenuItem, menu, menuItemClassName, menuItemActiveClassName }) => {
-        const getButtonOnClick = (newField, newDirection) => () => {
-          onChange({ field: newField, direction: newDirection });
-          menu.toggle();
-        };
-
-        return (
-          <div className={css.items}>
-            {Object.entries(fields).map(([key, item]) => (
-              <Item
-                key={key}
-                as={MenuItem}
-                isActive={field === key}
-                id={key}
-                label={item.label}
-                direction={direction}
-                defaultDirection={item.defaultDirection}
-                getButtonOnClick={getButtonOnClick}
-              />
-            ))}
-          </div>
-        );
-      }}
-    </Dropdown>
-  );
-};
-
-SortDropdown.defaultProps = {
-  className: '',
-  label: 'Order by',
-  onChange: () => {},
-  field: '',
-  direction: 'asc',
-};
-
-SortDropdown.propTypes = {
-  className: PropTypes.string,
-  label: PropTypes.string,
-  fields: PropTypes.shape({
-    [PropTypes.string]: PropTypes.string,
-  }).isRequired,
-  onChange: PropTypes.func,
-  field: PropTypes.string,
-  direction: PropTypes.string,
-};

package/src/ui/sort-dropdown/sort-dropdown.module.css

@@ -1,22 +0,0 @@
-.item {
-  display: flex;
-  align-items: center;
-}
-
-.itemIcon {
-  flex: 0 0 auto;
-  visibility: hidden;
-  margin-right: var(--space-xxxsmall);
-}
-
-.itemLabel {
-  flex: 1 1 100%;
-}
-
-.itemAsc .itemIcon {
-  transform: rotate(180deg);
-}
-
-.itemActive .itemIcon {
-  visibility: visible;
-}

package/src/ui/table/table.jsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import css from './table.module.css';
-
-export const Table = ({ className, emptyMessage, compact, outline, children }) => {
-  const rootClassName = cx(css.root, className, compact && css.compact, outline && css.outline);
-
-  if (!children) {
-    return <div className={cx(rootClassName, css.empty)}>{emptyMessage}</div>;
-  }
-
-  return <table className={rootClassName}>{children}</table>;
-};
-
-Table.THead = 'thead';
-Table.TBody = 'tbody';
-Table.Tr = 'tr';
-Table.Th = 'th';
-Table.Td = 'td';
-
-Table.defaultProps = {
-  className: '',
-  emptyMessage: 'No entries found.',
-  children: null,
-  compact: false,
-  outline: false,
-};
-
-Table.propTypes = {
-  className: PropTypes.string,
-  emptyMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  compact: PropTypes.bool,
-  outline: PropTypes.bool,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-};

package/src/ui/tabs/index.js

@@ -1 +0,0 @@
-export { Tabs } from './tabs';

package/src/ui/tabs/tabs.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import css from './tabs.module.css';
-
-const Item = ({ isTabActive, as: Component, className,...restProps }) => (
-  <Component className={cx(css.item, className, isTabActive && css.itemActive)} {...restProps} />
-);
-
-Item.defaultProps = {
-  isTabActive: false,
-  className: '',
-  as: 'span',
-};
-
-Item.propTypes = {
-  isTabActive: PropTypes.bool,
-  className: PropTypes.string,
-  as: PropTypes.elementType,
-};
-
-export const Tabs = ({ className, ...restProps }) => (
-  <nav className={cx(css.root, className)} {...restProps} />
-);
-
-Tabs.defaultProps = {
-  className: '',
-};
-
-Tabs.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-
-  /** Component children */
-  children: PropTypes.node.isRequired,
-};
-
-Tabs.Item = Item;

package/src/ui/tag/tag.jsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import css from './tag.module.css';
-
-export const KINDS = {
-  DEFAULT: 'default',
-  SUCCESS: 'success',
-  INFO: 'info',
-  WARNING: 'warning',
-  DANGER: 'danger',
-};
-
-export const SIZES = {
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large',
-};
-
-export const Tag = (props) => {
-  const {
-    className = '',
-    as: Component = 'span',
-    kind = KINDS.DEFAULT,
-    size = SIZES.MEDIUM,
-    ...restProps
-  } = props;
-  const rootClassName = cx(css.root, className, css[kind], css[size]);
-
-  return <Component className={rootClassName} {...restProps} />;
-};
-
-Tag.propTypes = {
-  className: PropTypes.string,
-  as: PropTypes.elementType,
-  kind: PropTypes.oneOf(Object.values(KINDS)),
-  size: PropTypes.oneOf(Object.values(SIZES)),
-};
-
-Tag.defaultProps = {
-  className: '',
-  as: 'span',
-  kind: KINDS.DEFAULT,
-  size: SIZES.MEDIUM,
-};
-
-Tag.KINDS = KINDS;
-Tag.SIZES = SIZES;

package/src/ui/tooltip/tooltip.jsx

@@ -1,67 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import {
-  Tooltip as UITooltip,
-  TooltipAnchor as UITooltipAnchor,
-  TooltipArrow as UITooltipArrow,
-  useTooltipState,
-} from 'ariakit/tooltip';
-
-import css from './tooltip.module.css';
-
-export const Tooltip = (props) => {
-  const {
-    className,
-    tooltipClassName,
-    title,
-    children,
-    as: Component,
-    containerRef: ref,
-    darkMode,
-    ...restProps
-  } = props;
-
-  const tooltip = useTooltipState({ placement: 'top' });
-
-  return (
-    <>
-      <UITooltipAnchor
-        as={Component}
-        className={cx(css.root, className)}
-        state={tooltip}
-        {...(ref ? { ref } : {})}
-        {...restProps}
-      >
-        {children}
-      </UITooltipAnchor>
-      {title && (
-        <UITooltip state={tooltip} className={cx(css.tooltip, tooltipClassName, darkMode && css.tooltipDarkMode)}>
-          <UITooltipArrow state={tooltip} className={css.arrow} size={12} />
-          {title}
-        </UITooltip>
-      )}
-    </>
-  );
-};
-
-Tooltip.defaultProps = {
-  className: '',
-  tooltipClassName: '',
-  title: '',
-  as: 'span',
-  containerRef: null,
-  darkMode: true,
-};
-
-Tooltip.propTypes = {
-  className: PropTypes.string,
-  tooltipClassName: PropTypes.string,
-  title: PropTypes.node,
-  children: PropTypes.node.isRequired,
-  as: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]),
-  containerRef: PropTypes.shape({
-    current: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  }),
-  darkMode: PropTypes.bool,
-};

package/src/utils.jsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import chunk from 'lodash/chunk';
-import cx from 'classnames';
-
-import COLORS from './chart-colors.json';
-
-export const getColors = (count = 2) => {
-  const chunks = chunk(COLORS, Math.round(COLORS.length / count));
-
-  return chunks.map((chunkColors, index) => {
-    if (index === 0) {
-      return chunkColors[0];
-    }
-
-    if (index === chunks.length - 1) {
-      return chunkColors[chunkColors.length - 1];
-    }
-
-    return chunkColors[Math.floor(chunkColors.length / 2)];
-  });
-};
-
-export const getRenderChildWithClassName = (className) => (child) => {
-  if (child === null || child === '') {
-    return null;
-  }
-
-  const { props } = child;
-
-  if (!props) {
-    return <div className={className}>{child}</div>;
-  }
-
-  return React.cloneElement(child, {
-    ...props,
-    className: cx(className, props.className), // eslint-disable-line react/prop-types
-  });
-};

package/types/components/bundle-assets/bundle-assets.constants.d.ts

@@ -1,21 +0,0 @@
-export const SORT_BY_NAME: "name";
-export const SORT_BY_SIZE: "size";
-export const SORT_BY_DELTA: "delta";
-export namespace SORT_BY {
-    namespace name {
-        const label: string;
-        const defaultDirection: string;
-    }
-    namespace delta {
-        const label_1: string;
-        export { label_1 as label };
-        const defaultDirection_1: string;
-        export { defaultDirection_1 as defaultDirection };
-    }
-    namespace size {
-        const label_2: string;
-        export { label_2 as label };
-        const defaultDirection_2: string;
-        export { defaultDirection_2 as defaultDirection };
-    }
-}

package/types/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.d.ts

@@ -1,21 +0,0 @@
-export function BundleAssetsTotalsChartBars({ className, jobs, customComponentLink: CustomComponentLink, }: {
-    className: any;
-    jobs: any;
-    customComponentLink: any;
-}): JSX.Element;
-export namespace BundleAssetsTotalsChartBars {
-    namespace defaultProps {
-        export const className: string;
-        export { ComponentLink as customComponentLink };
-    }
-    namespace propTypes {
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        export const jobs: PropTypes.Validator<(PropTypes.InferProps<{
-            internalBuildNumber: PropTypes.Requireable<number>;
-        }> | null | undefined)[]>;
-        export const customComponentLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-    }
-}
-import { ComponentLink } from "../component-link";
-import PropTypes from "prop-types";

package/types/components/bundle-assets-totals-chart-bars/index.d.ts

@@ -1 +0,0 @@
-export * from "./bundle-assets-totals-chart-bars";

package/types/components/bundle-assets-totals-table/bundle-assets-totals-table.d.ts

@@ -1,22 +0,0 @@
-export function BundleAssetsTotalsTable({ className, jobs, customComponentLink: CustomComponentLink, ...restProps }: {
-    [x: string]: any;
-    className: any;
-    jobs: any;
-    customComponentLink: any;
-}): JSX.Element;
-export namespace BundleAssetsTotalsTable {
-    namespace defaultProps {
-        export const className: string;
-        export const jobs: never[];
-        export { ComponentLink as customComponentLink };
-    }
-    namespace propTypes {
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        const jobs_1: PropTypes.Requireable<any[]>;
-        export { jobs_1 as jobs };
-        export const customComponentLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-    }
-}
-import { ComponentLink } from "../component-link";
-import PropTypes from "prop-types";

package/types/components/bundle-assets-totals-table/index.d.ts

@@ -1 +0,0 @@
-export * from "./bundle-assets-totals-table";

package/types/components/bundle-modules/bundle-modules.constants.d.ts

@@ -1,21 +0,0 @@
-export const SORT_BY_NAME: "name";
-export const SORT_BY_SIZE: "size";
-export const SORT_BY_DELTA: "delta";
-export namespace SORT_BY {
-    namespace name {
-        const label: string;
-        const defaultDirection: string;
-    }
-    namespace delta {
-        const label_1: string;
-        export { label_1 as label };
-        const defaultDirection_1: string;
-        export { defaultDirection_1 as defaultDirection };
-    }
-    namespace size {
-        const label_2: string;
-        export { label_2 as label };
-        const defaultDirection_2: string;
-        export { defaultDirection_2 as defaultDirection };
-    }
-}

package/types/components/bundle-packages/bundle-packages.constants.d.ts

@@ -1,21 +0,0 @@
-export const SORT_BY_NAME: "name";
-export const SORT_BY_SIZE: "size";
-export const SORT_BY_DELTA: "delta";
-export namespace SORT_BY {
-    namespace name {
-        const label: string;
-        const defaultDirection: string;
-    }
-    namespace delta {
-        const label_1: string;
-        export { label_1 as label };
-        const defaultDirection_1: string;
-        export { defaultDirection_1 as defaultDirection };
-    }
-    namespace size {
-        const label_2: string;
-        export { label_2 as label };
-        const defaultDirection_2: string;
-        export { defaultDirection_2 as defaultDirection };
-    }
-}

package/types/components/job-header/index.d.ts

@@ -1 +0,0 @@
-export * from "./job-header";

package/types/components/job-header/job-header.d.ts

@@ -1,26 +0,0 @@
-export function JobHeader(props: any): JSX.Element;
-export namespace JobHeader {
-    namespace propTypes {
-        const className: PropTypes.Requireable<string>;
-        const tag: PropTypes.Requireable<string>;
-        const job: PropTypes.Requireable<PropTypes.InferProps<{
-            internalBuildNumber: PropTypes.Requireable<number>;
-            meta: PropTypes.Requireable<PropTypes.InferProps<{
-                builtAt: PropTypes.Requireable<string>;
-            }>>;
-            summary: PropTypes.Requireable<object>;
-        }>>;
-        const children: PropTypes.Requireable<PropTypes.ReactElementLike>;
-    }
-    namespace defaultProps {
-        const className_1: string;
-        export { className_1 as className };
-        const tag_1: string;
-        export { tag_1 as tag };
-        const job_1: null;
-        export { job_1 as job };
-        const children_1: null;
-        export { children_1 as children };
-    }
-}
-import PropTypes from "prop-types";

package/types/components/job-meta/index.d.ts

@@ -1 +0,0 @@
-export * from "./job-meta";

package/types/components/job-meta/job-meta.d.ts

@@ -1,18 +0,0 @@
-export function JobMeta(props: any): JSX.Element;
-export namespace JobMeta {
-    namespace propTypes {
-        const className: PropTypes.Requireable<string>;
-        const meta: PropTypes.Validator<(PropTypes.InferProps<{
-            title: PropTypes.Requireable<NonNullable<string | PropTypes.ReactElementLike | null | undefined>>;
-            content: PropTypes.Requireable<(NonNullable<string | PropTypes.ReactElementLike | null | undefined> | null | undefined)[]>;
-        }> | null | undefined)[]>;
-        const as: PropTypes.Requireable<NonNullable<string | PropTypes.ReactElementLike | null | undefined>>;
-    }
-    namespace defaultProps {
-        const className_1: string;
-        export { className_1 as className };
-        const as_1: string;
-        export { as_1 as as };
-    }
-}
-import PropTypes from "prop-types";

package/types/components/metrics-table-search/index.d.ts

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

package/types/components/metrics-table-search/metrics-table-search.d.ts

@@ -1,16 +0,0 @@
-export function MetricsTableSearch(props: any): JSX.Element;
-export namespace MetricsTableSearch {
-    namespace propTypes {
-        const className: PropTypes.Requireable<string>;
-        const placeholder: PropTypes.Requireable<string>;
-        const search: PropTypes.Validator<string>;
-        const updateSearch: PropTypes.Validator<(...args: any[]) => any>;
-    }
-    namespace defaultProps {
-        const className_1: string;
-        export { className_1 as className };
-        const placeholder_1: string;
-        export { placeholder_1 as placeholder };
-    }
-}
-import PropTypes from "prop-types";

package/types/components/summary-item/index.d.ts

@@ -1 +0,0 @@
-export * from "./summary-item";

package/types/components/summary-item/summary-item.d.ts

@@ -1,40 +0,0 @@
-export function SummaryItem({ className, as: Component, size, id, data, loading, showDelta, showMetricDescription, ...props }: {
-    [x: string]: any;
-    className: any;
-    as: any;
-    size: any;
-    id: any;
-    data: any;
-    loading: any;
-    showDelta: any;
-    showMetricDescription: any;
-}): JSX.Element;
-export namespace SummaryItem {
-    namespace defaultProps {
-        const className: string;
-        const as: string;
-        const data: null;
-        const size: string;
-        const loading: boolean;
-        const showMetricDescription: boolean;
-        const showDelta: boolean;
-    }
-    namespace propTypes {
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        const as_1: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        export { as_1 as as };
-        const size_1: PropTypes.Requireable<string>;
-        export { size_1 as size };
-        export const id: PropTypes.Validator<string>;
-        const loading_1: PropTypes.Requireable<boolean>;
-        export { loading_1 as loading };
-        const data_1: PropTypes.Requireable<object>;
-        export { data_1 as data };
-        const showMetricDescription_1: PropTypes.Requireable<boolean>;
-        export { showMetricDescription_1 as showMetricDescription };
-        const showDelta_1: PropTypes.Requireable<boolean>;
-        export { showDelta_1 as showDelta };
-    }
-}
-import PropTypes from "prop-types";

package/types/components/total-size-type-title/index.d.ts

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

package/types/components/total-size-type-title/total-size-type-title.d.ts

@@ -1,13 +0,0 @@
-export function TotalSizeTypeTitle({ className }: {
-    className: any;
-}): JSX.Element;
-export namespace TotalSizeTypeTitle {
-    namespace propTypes {
-        const className: PropTypes.Requireable<string>;
-    }
-    namespace defaultProps {
-        const className_1: string;
-        export { className_1 as className };
-    }
-}
-import PropTypes from "prop-types";