@bundle-stats/ui 3.2.1-beta.9 → 3.3.0-alpha.0

package/src/assets/icons.svg

@@ -1 +1,50 @@
-<svg width="16" height="16"><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="afeather afeather-arrow-down" id="arrow" xmlns="http://www.w3.org/2000/svg"><path d="M12 5v14M19 12l-7 7-7-7"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bfeather bfeather-x-circle" id="cancel" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cfeather cfeather-clock" id="clock" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="dfeather dfeather-x" id="close" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="efeather efeather-git-commit" id="commit" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="4"/><path d="M1.05 12H7M17.01 12h5.95"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ffeather ffeather-bar-chart" id="filter" xmlns="http://www.w3.org/2000/svg"><path d="M12 20V10M18 20V4M6 20v-4"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="gfeather gfeather-help-circle" id="help" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="hfeather hfeather-menu" id="menu" xmlns="http://www.w3.org/2000/svg"><path d="M3 12h18M3 6h18M3 18h18"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="sort" xmlns="http://www.w3.org/2000/svg"><path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="jfeather jfeather-alert-triangle" id="warning" xmlns="http://www.w3.org/2000/svg"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4M12 17h.01"/></symbol></svg>
+<svg width="16" height="16">
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle" viewBox="0 0 24 24" id="alert-circle" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="M12 8v4M12 16h.01"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down" id="arrow" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 5v14M19 12l-7 7-7-7"/>
+</symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right-circle" viewBox="0 0 24 24" id="arrow-right-circle" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="M12 16l4-4-4-4M8 12h8"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle" id="cancel" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="M15 9l-6 6M9 9l6 6"/>
+</symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle" viewBox="0 0 24 24" id="check-circle" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 11.08V12a10 10 0 11-5.93-9.14"/>
+<path d="M22 4L12 14.01l-3-3"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock" id="clock" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="M12 6v6l4 2"/>
+</symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle" viewBox="0 0 24 24" id="close" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="M15 9l-6 6M9 9l6 6"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-commit" id="commit" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="4"/>
+<path d="M1.05 12H7M17.01 12h5.95"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart" id="filter" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 20V10M18 20V4M6 20v-4"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle" id="help" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu" id="menu" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 12h18M3 6h18M3 18h18"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="currentColor" id="sort" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/>
+<path d="M0 0h24v24H0z" fill="none"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle" id="warning" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4M12 17h.01"/>
+</symbol>
+</svg>

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+
+import { Icon } from '../../ui/icon';
+import { Tooltip } from '../../ui/tooltip';
+
+import css from './budget-info.module.css';
+
+export const BudgetInfo = ({ className = '', budget, metric }) => {
+  const rootClassName = cx(css.root, budget.failed ? css.over : css.under, className);
+
+  return (
+    <Tooltip
+      className={rootClassName}
+      title={
+        <>
+          <strong>{metric.label}</strong>
+          {` is ${budget.failed ? 'over' : 'under'} `}
+          {metric.formatter(budget.budgetValue)}
+          {` budget`}
+        </>
+      }
+    >
+      <Icon
+        className={css.icon}
+        glyph={budget.failed ? Icon.ICONS.ALERT_CIRCLE : Icon.ICONS.CHECK_CIRCLE}
+        size="medium"
+      />
+    </Tooltip>
+  );
+};
+
+BudgetInfo.propTypes = {
+  budget: PropTypes.shape({
+    currentValue: PropTypes.number,
+    budgetValue: PropTypes.number,
+    failed: PropTypes.bool,
+  }).isRequired,
+  metric: PropTypes.shape({
+    label: PropTypes.string,
+    formatter: PropTypes.func,
+  }).isRequired,
+  className: PropTypes.string,
+};
+
+BudgetInfo.defaultProps = {
+  className: '',
+};

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

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

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

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

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

@@ -0,0 +1,152 @@
+import React, { useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { METRIC_COMPONENT_LINKS, getGlobalMetricType } 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, metricKey, CustomLink, failed, budgetValue } = props;
+  const metric = getGlobalMetricType(metricKey);
+  const componentLinkOptions = METRIC_COMPONENT_LINKS.get(metricKey);
+
+  return (
+    <CustomLink className={cx(css.budget, className)} {...componentLinkOptions?.link}>
+      <span className={css.budgetLabel}>{metric.label}</span>
+      {` is ${failed ? 'over' : 'under'} `}
+      <span className={css.budgetValue}>{metric.formatter(budgetValue)}</span>
+      {` budget`}
+    </CustomLink>
+  );
+};
+
+Budget.propTypes = {
+  className: PropTypes.string,
+  metricKey: PropTypes.string.isRequired,
+  failed: PropTypes.bool.isRequired,
+  currentValue: PropTypes.number.isRequired,
+  budgetValue: PropTypes.number.isRequired,
+  CustomLink: PropTypes.elementType.isRequired,
+};
+
+Budget.defaultProps = {
+  className: '',
+};
+
+const BudgetsGroup = (props) => {
+  const { className, kind, source, budgets, CustomLink } = props;
+  const [showBudgets, setShowBudgets] = useState(false);
+
+  const isFailed = kind === 'danger';
+
+  return (
+    <Alert kind={kind} padding="none" className={cx(css.group, css[kind], className)}>
+      <Box
+        padding={['xsmall', 'small']}
+        className={css.groupHeader}
+        as="button"
+        type="button"
+        onClick={() => setShowBudgets(!showBudgets)}
+      >
+        <FlexStack space="xxsmall" className={css.groupTitle}>
+          <Icon
+            className={css.groupIcon}
+            glyph={isFailed ? Icon.ICONS.ALERT_CIRCLE : Icon.ICONS.CHECK_CIRCLE}
+          />
+          <span>
+            <strong>{budgets.length}</strong>
+            {` budget ${budgets.length > 1 ? 'checks' : 'check'} ${isFailed ? 'failed' : 'passed'}`}
+          </span>
+          <span className={css.groupTitleToggle}>{showBudgets ? 'hide' : 'show'} all</span>
+        </FlexStack>
+      </Box>
+
+      {showBudgets && (
+        <Box padding={['xsmall', 'small']} className={css.groupContent}>
+          <Stack space="none">
+            {budgets.map(([key, budget]) => (
+              <Budget
+                key={key}
+                source={source}
+                metricKey={`${source}.${key}`}
+                CustomLink={CustomLink}
+                {...budget}
+              />
+            ))}
+          </Stack>
+        </Box>
+      )}
+    </Alert>
+  );
+};
+
+BudgetsGroup.propTypes = {
+  className: PropTypes.string,
+  kind: PropTypes.oneOf(['success', 'danger']).isRequired,
+  source: PropTypes.string.isRequired,
+  budgets: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  CustomLink: PropTypes.elementType.isRequired,
+};
+
+BudgetsGroup.defaultProps = {
+  className: '',
+};
+
+export const BudgetInsights = (props) => {
+  const { className, source, budgets, CustomLink } = props;
+
+  const [failedBudgets, passedBudgets] = useMemo(() => {
+    const passed = [];
+    const failed = [];
+
+    Object.entries(budgets).forEach(([key, budget]) => {
+      if (budget.failed) {
+        failed.push([key, budget]);
+      } else {
+        passed.push([key, budget]);
+      }
+    });
+
+    return [failed, passed];
+  }, [budgets]);
+
+  return (
+    <Stack className={className} space="xsmall">
+      {failedBudgets.length > 0 && (
+        <BudgetsGroup
+          kind="danger"
+          source={source}
+          budgets={failedBudgets}
+          CustomLink={CustomLink}
+        />
+      )}
+
+      {passedBudgets.length > 0 && (
+        <BudgetsGroup
+          kind="success"
+          source={source}
+          budgets={passedBudgets}
+          CustomLink={CustomLink}
+        />
+      )}
+    </Stack>
+  );
+};
+
+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

@@ -0,0 +1,53 @@
+.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;
+}
+
+.danger .groupIcon {
+  color: var(--color-danger);
+}
+
+.success .groupIcon {
+  color: var(--color-success);
+}
+
+.groupContent {
+  padding-top: 0px;
+  background: transparent;
+}
+
+.budget {
+  display: block;
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.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

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

package/src/components/bundle-assets-totals-table/bundle-assets-totals-table.jsx

@@ -1,29 +1,44 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { get } from 'lodash';
 import { getBundleAssetsFileTypeComponentLink } from '@bundle-stats/utils';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 
 import { ASSETS_SIZES_FILE_TYPE_MAP } from '../../constants';
+import { FlexStack } from '../../layout/flex-stack';
 import { MetricsTable } from '../metrics-table';
 import { ComponentLink } from '../component-link';
+import { BudgetInfo } from '../budget-info';
+import css from './bundle-assets-totals-table.module.css';
 
 export const BundleAssetsTotalsTable = ({
   className,
   jobs,
   customComponentLink: CustomComponentLink,
 }) => {
-  const items = webpack.compareBySection.sizes(jobs);
-
-  const renderRowHeader = (item) => {
-    const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
-    const { section, title, params } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
-
-    return (
-      <CustomComponentLink section={section} title={title} params={params}>
-        {item.label}
-      </CustomComponentLink>
-    );
-  };
+  const items = useMemo(() => webpack.compareBySection.sizes(jobs), [jobs]);
+  const budgets = jobs[0].insights?.webpack?.budgets;
+
+  const renderRowHeader = useCallback(
+    (item) => {
+      const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
+      const { section, title, params } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
+      const [_, ...metricSlugs] = item.key.split('.');
+      const metricKey = metricSlugs.join('.');
+      const budget = get(budgets, metricKey);
+      const metric = webpack.getMetricType(metricKey);
+
+      return (
+        <CustomComponentLink section={section} title={title} params={params}>
+          <FlexStack space="xxsmall" className={css.itemTitleText}>
+            <span>{item.label}</span>
+            {budget && <BudgetInfo budget={budget} metric={metric} />}
+          </FlexStack>
+        </CustomComponentLink>
+      );
+    },
+    [CustomComponentLink],
+  );
 
   return (
     <MetricsTable

package/src/components/bundle-assets-totals-table/bundle-assets-totals-table.module.css

@@ -1,3 +1,3 @@
-.title {
-  color: var(--color-text-light);
+.itemTitleText {
+  align-items: center;
 }

package/src/components/summary/summary.jsx

@@ -5,62 +5,47 @@ import { get } from 'lodash';
 import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
 
 import { METRICS_WEBPACK_GENERAL } from '../../constants';
+import { Icon } from '../../ui/icon';
 import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
 import { ComponentLink } from '../component-link';
 import { SummaryItem } from '../summary-item';
 import css from './summary.module.css';
 
-const CustomSummaryItem = ({ className, metricOptions, SummaryItemCustomLink, ...props }) => (
-  <Box
-    padding={['xsmall', 'small']}
-    className={cx(className, css.summaryItemLink)}
-    {...props}
-    as={SummaryItemCustomLink}
-    {...metricOptions.link}
-  />
-);
-
-CustomSummaryItem.propTypes = {
-  className: PropTypes.string,
-  metricOptions: PropTypes.shape({
-    link: PropTypes.any, // eslint-disable-line react/forbid-prop-types
-  }).isRequired,
-  SummaryItemCustomLink: PropTypes.elementType.isRequired,
-};
-
-CustomSummaryItem.defaultProps = {
-  className: '',
-};
+const getSourceMetricId = (fullMetricId) => fullMetricId.split('.').slice(1).join('.');
 
 export const Summary = ({
   className,
   size,
   keys,
   data,
+  budgets,
   loading,
   showSummaryItemDelta,
   summaryItemLink: SummaryItemCustomLink,
 }) => (
   <Box outline className={cx(css.root, className)}>
     <FlexStack className={css.items}>
-      {Array.from(METRIC_COMPONENT_LINKS).filter(([metricId]) => keys.includes(metricId)).map(
-        ([metricId, metricOptions]) => (
-          <SummaryItem
-            as={CustomSummaryItem}
-            className={css.item}
-            metricOptions={metricOptions}
-            SummaryItemCustomLink={SummaryItemCustomLink}
-            size={size}
-            key={metricId}
-            id={metricId}
-            data={get(data, metricId)}
-            loading={loading}
-            showMetricDescription
-            showDelta={showSummaryItemDelta && metricOptions.showDelta !== false}
-          />
-        )
-      )}
+      {Array.from(METRIC_COMPONENT_LINKS)
+        .filter(([metricId]) => keys.includes(getSourceMetricId(metricId)))
+        .map(([metricId, metricOptions]) => (
+          <div key={metricId} className={css.item}>
+            <SummaryItem
+              size={size}
+              id={metricId}
+              data={get(data, metricId)}
+              budget={get(budgets, getSourceMetricId(metricId))}
+              loading={loading}
+              showMetricDescription
+              showDelta={showSummaryItemDelta && metricOptions.showDelta !== false}
+            />
+            {!loading && (
+              <SummaryItemCustomLink {...metricOptions.link} className={css.readMore}>
+                <Icon className={css.readMoreIcon} glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} />
+              </SummaryItemCustomLink>
+            )}
+          </div>
+        ))}
     </FlexStack>
   </Box>
 );
@@ -68,6 +53,7 @@ export const Summary = ({
 Summary.defaultProps = {
   className: '',
   data: null,
+  budgets: null,
   loading: false,
   size: '',
   keys: METRICS_WEBPACK_GENERAL,
@@ -79,12 +65,8 @@ Summary.propTypes = {
   className: PropTypes.string,
   size: PropTypes.string,
   keys: PropTypes.arrayOf(PropTypes.string),
-  data: PropTypes.shape({
-    [PropTypes.string]: PropTypes.shape({
-      baseline: PropTypes.number,
-      current: PropTypes.number,
-    }),
-  }),
+  data: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  budgets: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   loading: PropTypes.bool,
   showSummaryItemDelta: PropTypes.bool,
   summaryItemLink: PropTypes.elementType,

package/src/components/summary/summary.module.css

@@ -3,35 +3,52 @@
   overflow: auto;
 }
 
-.items {}
-
 .item {
+  padding: var(--space-small);
   flex: 1 0 25%; /* force equal sizes */
   position: relative;
   z-index: 1;
 }
 
-.item:focus-visible {
-  background: var(--color-highlight);
-  outline: none;
-}
-
 .item::before {
   content: '';
   display: block;
   width: 1px;
   position: absolute;
   left: -1px;
-  top: var(--space-xsmall);
-  bottom: var(--space-xsmall);
+  top: var(--space-small);
+  bottom: var(--space-small);
   background: var(--color-outline);
 }
 
-.item:hover {
-  background: var(--color-highlight);
+.readMore {
+  display: block;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: var(--space-small);
+  color: var(--color-text-ultra-light);
+  transition: var(--transition-out);
+}
+
+.readMore:hover,
+.readMore:focus {
+  color: var(--color-primary);
+  transition: var(--transition-in);
+}
+
+.readMoreIcon {
+  display: block;
+}
+
+/** hover state */
+.readMore {
+  opacity: 0;
 }
 
-.summaryItemLink {
-  color: inherit;
-  text-decoration: none;
+.item:hover .readMore,
+.item:active .readMore,
+.item:focus .readMore {
+  opacity: 1;
+  transition: var(--transition-in);
 }