@bundle-stats/ui 4.4.0-beta.1 → 4.4.0-beta.3

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/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';

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

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/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/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/tsconfig.esm.json

@@ -1,13 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "jsx": "react",
-    "resolveJsonModule": true,
-    "target": "ES2019",
-    "module": "ES6",
-    "declaration": true,
-    "declarationDir": "./types",
-    "noEmit": false
-  },
-  "exclude": ["**/__tests__/*", "**/*.stories.*"]
-}

package/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
-  "compilerOptions": {
-    "jsx": "react"
-  }
-}

package/tsconfig.lib.json

@@ -1,9 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "jsx": "react",
-    "resolveJsonModule": true,
-    "noEmit": false
-  },
-  "exclude": ["**/__tests__/*", "**/*.stories.*"]
-}

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/summary-item/index.d.ts

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