@bundle-stats/ui 3.4.0-beta.0 → 4.0.0-alpha.9

package/src/components/budget-info/budget-info.jsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import { InsightType } from '@bundle-stats/utils';
-
-import { Icon } from '../../ui/icon';
-import { Tooltip } from '../../ui/tooltip';
-
-import css from './budget-info.module.css';
-
-const INSIGHT_TYPE_MAP = {
-  [InsightType.SUCCESS]: {
-    className: css.success,
-    glyph: Icon.ICONS.CHECK_CIRCLE,
-  },
-  [InsightType.ERROR]: {
-    className: css.error,
-    glyph: Icon.ICONS.ALERT_CIRCLE,
-  },
-  [InsightType.WARNING]: {
-    className: css.warning,
-    glyph: Icon.ICONS.WARNING,
-  },
-};
-
-export const BudgetInfo = ({ className = '', budgetInsight }) => {
-  const { className: insightTypeClassName, glyph } = INSIGHT_TYPE_MAP[budgetInsight.type];
-
-  const rootClassName = cx(css.root, insightTypeClassName, className);
-
-  return (
-    <Tooltip className={rootClassName} title={budgetInsight.message.text}>
-      <Icon className={css.icon} glyph={glyph} size="medium" />
-    </Tooltip>
-  );
-};
-
-BudgetInfo.propTypes = {
-  budgetInsight: PropTypes.shape({
-    type: PropTypes.string,
-    message: PropTypes.shape({
-      text: PropTypes.string,
-    }),
-    data: PropTypes.shape({
-      currentValue: PropTypes.number,
-      budgetValue: PropTypes.number,
-      failed: PropTypes.bool,
-    }),
-  }).isRequired,
-  className: PropTypes.string,
-};
-
-BudgetInfo.defaultProps = {
-  className: '',
-};

package/src/components/budget-info/budget-info.module.css

@@ -1,40 +0,0 @@
-.root {
-  display: inline-block;
-  line-height: 1em;
-}
-
-/* Budget error */
-.error .icon {
-  color: var(--color-danger);
-}
-
-.error .icon:hover,
-.error .icon:focus,
-.error .icon:active
-{
-  color: var(--color-danger-light);
-}
-
-/* Budget success */
-.success .icon {
-  color: var(--color-success);
-}
-
-.success .icon:hover,
-.success .icon:focus,
-.success .icon:active
-{
-  color: var(--color-success-light);
-}
-
-/* Budget warning */
-.warning .icon {
-  color: var(--color-warning-dark);
-}
-
-.warning .icon:hover,
-.warning .icon:focus,
-.warning .icon:active
-{
-  color: var(--color-warning);
-}

package/src/components/budget-info/index.js

@@ -1 +0,0 @@
-export * from './budget-info';

package/src/components/budget-insights/budget-insights.jsx

@@ -1,124 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
-
-import { Box } from '../../layout/box';
-import { Stack } from '../../layout/stack';
-import { FlexStack } from '../../layout/flex-stack';
-import { Alert } from '../../ui/alert';
-import { Icon } from '../../ui/icon';
-import { ComponentLink } from '../component-link';
-import css from './budget-insights.module.css';
-
-const Budget = (props) => {
-  const { className, metricId, budget, CustomLink } = props;
-  const componentLinkOptions = METRIC_COMPONENT_LINKS.get(metricId);
-
-  return (
-    <CustomLink
-      className={cx(css.budget, className, budget.type === 'SUCCESS' && css.budgetSuccess)}
-      {...componentLinkOptions?.link}
-    >
-      {budget.message.text}
-    </CustomLink>
-  );
-};
-
-Budget.propTypes = {
-  className: PropTypes.string,
-  metricId: PropTypes.string.isRequired,
-  budget: PropTypes.shape({
-    type: PropTypes.string,
-    message: PropTypes.shape({
-      text: PropTypes.string,
-    }),
-    data: PropTypes.shape({
-      currentValue: PropTypes.number.isRequired,
-      budgetValue: PropTypes.number.isRequired,
-      failed: PropTypes.bool.isRequired,
-    }),
-  }).isRequired,
-  CustomLink: PropTypes.elementType.isRequired,
-};
-
-Budget.defaultProps = {
-  className: '',
-};
-
-const BUDGET_ALERT_KIND = new Map([
-  ['ERROR', 'danger'],
-  ['WARNING', 'warning'],
-  ['SUCCESS', 'success'],
-]);
-
-const BUDGET_ICON = new Map([
-  ['ERROR', Icon.ICONS.ALERT_CIRCLE],
-  ['WARNING', Icon.ICONS.WARNING],
-  ['SUCCESS', Icon.ICONS.CHECK_CIRCLE],
-]);
-
-export const BudgetInsights = (props) => {
-  const { className, source, budgets, CustomLink } = props;
-  const [showBudgets, setShowBudgets] = useState(false);
-
-  const iconGlyph = BUDGET_ICON.get(budgets.type);
-  const alertKind = BUDGET_ALERT_KIND.get(budgets.type);
-  const rootClassName = cx(css.group, className, css[`group-${alertKind}`]);
-
-  const budgetItems = useMemo(() => {
-    const items = Object.entries(budgets.data);
-
-    // When there are errors/warnings, sort budget items first
-    if (['ERROR', 'WARNING'].includes(budgets.type)) {
-      items.sort((a) => (a[1].type === budgets.type ? -1 : 1));
-    }
-
-    return items;
-  }, [budgets]);
-
-  return (
-    <Alert kind={alertKind} padding="none" className={rootClassName}>
-      <Box
-        padding={['xsmall', 'small']}
-        className={css.groupHeader}
-        as="button"
-        type="button"
-        onClick={() => setShowBudgets(!showBudgets)}
-      >
-        <FlexStack space="xxsmall" className={css.groupTitle}>
-          {iconGlyph && <Icon className={css.groupIcon} glyph={iconGlyph} />}
-          <span>{budgets.message.text}</span>
-          <span className={css.groupTitleToggle}>{showBudgets ? 'hide' : 'show'} all</span>
-        </FlexStack>
-      </Box>
-
-      {showBudgets && (
-        <Box padding={['xsmall', 'small']} className={css.groupContent}>
-          <Stack space="none">
-            {budgetItems.map(([key, budget]) => (
-              <Budget
-                key={key}
-                metricId={`${source}.${key}`}
-                budget={budget}
-                CustomLink={CustomLink}
-              />
-            ))}
-          </Stack>
-        </Box>
-      )}
-    </Alert>
-  );
-};
-
-BudgetInsights.propTypes = {
-  className: PropTypes.string,
-  source: PropTypes.string.isRequired,
-  budgets: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  CustomLink: PropTypes.elementType,
-};
-
-BudgetInsights.defaultProps = {
-  className: '',
-  CustomLink: ComponentLink,
-};

package/src/components/budget-insights/budget-insights.module.css

@@ -1,61 +0,0 @@
-.groupHeader {
-  width: 100%;
-  border: none;
-  background: none;
-  cursor: pointer;
-  color: inherit;
-}
-
-.groupTitle {
-  width: 100%;
-  align-items: center;
-}
-
-.groupTitle:hover {
-  color: var(--color-text-dark);
-  text-decoration: underline;
-}
-
-.groupTitleToggle {
-  margin: 0 0 0 auto !important;
-}
-
-.group-danger .groupIcon {
-  color: var(--color-danger);
-}
-
-.group-warning .groupIcon {
-  color: var(--color-warning);
-}
-
-.group-success .groupIcon {
-  color: var(--color-success);
-}
-
-.groupContent {
-  padding-top: 0px;
-  background: transparent;
-}
-
-.budget {
-  display: block;
-  color: var(--color-text);
-  text-decoration: none;
-}
-
-.budgetSuccess {
-  color: var(--color-text-light);
-}
-
-.budgetLabel,
-.budgetValue {
-  color: var(--color-text-dark);
-  font-weight: 500;
-}
-
-.budget:hover,
-.budget:focus,
-.budget:active {
-  color: var(--color-text);
-  text-decoration: underline;
-}

package/src/components/budget-insights/index.js

@@ -1 +0,0 @@
-export * from './budget-insights';