@bundle-stats/ui 4.22.3 → 4.23.0-beta.2

package/lib-esm/ui/tooltip/tooltip.module.css

@@ -21,6 +21,17 @@
   text-align: center;
   filter: drop-shadow(var(--shadow-layer));
   will-change: filter;
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.tooltip[data-enter] {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.tooltip[data-leave] {
+  pointer-events: none;
 }
 
 .arrow svg {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.22.3",
+  "version": "4.23.0-beta.2",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -38,18 +38,18 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/preset-env": "8.0.2",
+    "@babel/preset-env": "8.0.6",
     "@babel/preset-react": "8.0.1",
     "@babel/preset-typescript": "8.0.1",
-    "@storybook/addon-vitest": "10.5.10",
-    "@storybook/react": "10.5.10",
-    "@storybook/react-vite": "10.5.10",
+    "@storybook/addon-vitest": "10.6.0",
+    "@storybook/react": "10.6.0",
+    "@storybook/react-vite": "10.6.0",
     "@types/d3": "7.4.3",
     "@types/react": "18.3.13",
     "@types/react-router-dom": "5.3.3",
-    "@vitejs/plugin-react": "6.1.0",
-    "@vitest/browser": "4.1.11",
-    "@vitest/browser-playwright": "4.1.11",
+    "@vitejs/plugin-react": "6.1.1",
+    "@vitest/browser": "5.0.1",
+    "@vitest/browser-playwright": "5.0.1",
     "babel-plugin-polyfill-corejs3": "1.0.0",
     "babel-plugin-require-context-hook": "1.0.0",
     "classnames": "2.5.1",
@@ -58,21 +58,21 @@
     "cross-env": "10.1.0",
     "hex-rgb": "5.0.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "30.4.2",
+    "jest": "^30.5.0",
     "jest-date-mock": "1.0.10",
-    "jest-environment-jsdom": "30.4.1",
+    "jest-environment-jsdom": "30.5.2",
     "lodash": "4.18.1",
-    "playwright": "1.62.1",
+    "playwright": "1.63.0",
     "prop-types": "15.8.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-router-dom": "5.3.4",
     "rimraf": "6.1.3",
-    "storybook": "10.5.10",
+    "storybook": "10.6.0",
     "typescript": "5.9.3",
-    "vite": "8.2.2",
+    "vite": "8.3.0",
     "vite-plugin-svgr": "5.2.0",
-    "vitest": "4.1.11"
+    "vitest": "5.0.1"
   },
   "peerDependencies": {
     "classnames": "^2.0.0",
@@ -83,7 +83,7 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.22.3",
+    "@bundle-stats/utils": "^4.23.0-beta.2",
     "ariakit": "2.0.0-next.44",
     "d3": "7.9.0",
     "modern-css-reset": "1.4.0",
@@ -91,5 +91,5 @@
     "snarkdown": "2.0.0",
     "use-query-params": "2.2.2"
   },
-  "gitHead": "40d689d101ffc69421f87e29fb7449b4f1ae8bff"
+  "gitHead": "ac5239f7f27f36b6a8f54fae820e5e66570de972"
 }

package/src/app/app.jsx

@@ -10,7 +10,7 @@ import { BundleAssetsTotals } from '../components/bundle-assets-totals';
 import { BundleModules } from '../components/bundle-modules';
 import { BundlePackages } from '../components/bundle-packages';
 import { Insights } from '../components/insights';
-import { MetricsTableTitle } from '../components';
+import { MetricChangeLegend, MetricsTableTitle } from '../components';
 import { Summary } from '../components/summary';
 import { Box } from '../layout/box';
 import { Footer } from '../layout/footer';
@@ -150,6 +150,11 @@ const AppComponent = ({ version, jobs }) => {
   return (
     <JobsProvider jobs={jobs}>
       <Layout jobs={jobs} version={version}>
+        <Container className={css.metricChangeLegendContainer}>
+          <div className={css.metricChangeLegendContainerInner}>
+            <MetricChangeLegend />
+          </div>
+        </Container>
         <Container className={css.summaryContainer}>
           <Summary
             data={jobs[0].summary}

package/src/app/app.module.css

@@ -17,11 +17,21 @@
   border-bottom: 1px solid var(--color-outline);
 }
 
-.summaryContainer {
+.metricChangeLegendContainer {
   padding-top: var(--space-small);
   padding-bottom: var(--space-xxsmall);
 }
 
+.metricChangeLegendContainerInner {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.summaryContainer {
+  padding-top: var(--space-xxsmall);
+  padding-bottom: var(--space-xxsmall);
+}
+
 .tabsContainer {
   border-bottom: 1px solid var(--color-outline);
   background: var(--color-light);
@@ -62,6 +72,6 @@
   .tabsContainer {
     position: sticky;
     top: var(--header-height);
-    z-index: calc(var(--layer-high));
+    z-index: var(--layer);
   }
 }

package/src/chart-colors.json

@@ -1,45 +1,59 @@
 [
-  "rgba(136,132,216,1)",
-  "rgba(135,137,219,1)",
-  "rgba(135,142,222,1)",
-  "rgba(134,147,225,1)",
-  "rgba(133,151,228,1)",
-  "rgba(132,156,231,1)",
-  "rgba(132,161,234,1)",
-  "rgba(131,166,237,1)",
-  "rgba(132,172,235,1)",
-  "rgba(134,178,234,1)",
-  "rgba(135,184,232,1)",
-  "rgba(137,191,230,1)",
-  "rgba(138,197,228,1)",
-  "rgba(140,203,227,1)",
-  "rgba(141,209,225,1)",
-  "rgba(139,208,215,1)",
-  "rgba(138,207,206,1)",
-  "rgba(136,206,196,1)",
-  "rgba(135,205,186,1)",
-  "rgba(133,204,176,1)",
-  "rgba(132,203,167,1)",
-  "rgba(130,202,157,1)",
-  "rgba(135,205,150,1)",
-  "rgba(140,208,143,1)",
-  "rgba(145,211,136,1)",
-  "rgba(149,213,129,1)",
-  "rgba(154,216,122,1)",
-  "rgba(159,219,115,1)",
-  "rgba(164,222,108,1)",
-  "rgba(170,224,105,1)",
-  "rgba(177,226,102,1)",
-  "rgba(183,228,99,1)",
-  "rgba(189,231,96,1)",
-  "rgba(195,233,93,1)",
-  "rgba(202,235,90,1)",
-  "rgba(208,237,87,1)",
-  "rgba(215,231,87,1)",
-  "rgba(221,226,87,1)",
-  "rgba(228,220,87,1)",
-  "rgba(235,215,88,1)",
-  "rgba(242,209,88,1)",
-  "rgba(248,204,88,1)",
-  "rgba(255,198,88,1)"
-]
+  "rgba(0,85,172,1)",
+  "rgba(13,85,174,1)",
+  "rgba(26,85,175,1)",
+  "rgba(39,85,177,1)",
+  "rgba(52,85,178,1)",
+  "rgba(65,84,180,1)",
+  "rgba(78,84,181,1)",
+  "rgba(91,84,183,1)",
+  "rgba(104,84,184,1)",
+  "rgba(112,83,184,1)",
+  "rgba(119,82,183,1)",
+  "rgba(127,81,183,1)",
+  "rgba(134,80,183,1)",
+  "rgba(142,79,182,1)",
+  "rgba(149,78,182,1)",
+  "rgba(157,77,181,1)",
+  "rgba(164,76,181,1)",
+  "rgba(170,75,179,1)",
+  "rgba(176,74,177,1)",
+  "rgba(182,73,174,1)",
+  "rgba(189,72,172,1)",
+  "rgba(195,71,170,1)",
+  "rgba(201,70,168,1)",
+  "rgba(207,69,165,1)",
+  "rgba(213,68,163,1)",
+  "rgba(217,68,160,1)",
+  "rgba(222,69,156,1)",
+  "rgba(226,69,153,1)",
+  "rgba(231,69,149,1)",
+  "rgba(235,69,146,1)",
+  "rgba(239,70,142,1)",
+  "rgba(244,70,139,1)",
+  "rgba(248,70,135,1)",
+  "rgba(249,73,131,1)",
+  "rgba(250,76,127,1)",
+  "rgba(251,78,122,1)",
+  "rgba(252,81,118,1)",
+  "rgba(252,84,114,1)",
+  "rgba(253,87,110,1)",
+  "rgba(254,89,105,1)",
+  "rgba(255,92,101,1)",
+  "rgba(255,96,96,1)",
+  "rgba(255,101,91,1)",
+  "rgba(255,105,86,1)",
+  "rgba(255,110,82,1)",
+  "rgba(255,114,77,1)",
+  "rgba(255,118,72,1)",
+  "rgba(255,123,67,1)",
+  "rgba(255,127,62,1)",
+  "rgba(255,132,54,1)",
+  "rgba(255,137,47,1)",
+  "rgba(255,142,39,1)",
+  "rgba(255,147,31,1)",
+  "rgba(255,151,23,1)",
+  "rgba(255,156,16,1)",
+  "rgba(255,161,8,1)",
+  "rgba(255,166,0,1)"
+]

package/src/components/delta/delta.module.css

@@ -8,16 +8,16 @@
   color: var(--color-info);
 }
 
-.HIGH_NEGATIVE {
-  color: var(--color-red-dark);
+.LOW_NEGATIVE {
+  color: var(--color-red-light);
 }
 
 .NEGATIVE {
-  color: var(--color-red-dark);
+  color: var(--color-red);
 }
 
-.LOW_NEGATIVE {
-  color: var(--color-red-light);
+.HIGH_NEGATIVE {
+  color: var(--color-red-dark);
 }
 
 .LOW_POSITIVE {
@@ -25,7 +25,7 @@
 }
 
 .POSITIVE {
-  color: var(--color-green-dark);
+  color: var(--color-green);
 }
 
 .HIGH_POSITIVE {
@@ -43,24 +43,25 @@
   background: var(--color-info-light);
 }
 
-.inverted.HIGH_NEGATIVE {
-  background: var(--color-red-dark);
+.inverted.LOW_NEGATIVE {
+  background: var(--color-red-light);
 }
 
 .inverted.NEGATIVE {
-  background: var(--color-red-dark);
+  background: var(--color-red);
 }
 
-.inverted.LOW_NEGATIVE {
-  background: var(--color-red-light);
+.inverted.HIGH_NEGATIVE {
+  background: var(--color-red-dark);
 }
 
+
 .inverted.LOW_POSITIVE {
   background: var(--color-green-light);
 }
 
 .inverted.POSITIVE {
-  background: var(--color-green-dark);
+  background: var(--color-green);
 }
 
 .inverted.HIGH_POSITIVE {

package/src/components/delta/delta.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import cx from 'classnames';
+import type { MetricRunInfoDeltaType } from '@bundle-stats/utils';
+
+import css from './delta.module.css';
+
+export interface DeltaProps {
+  /**
+   * Formatted delta value
+   */
+  displayValue: string;
+  /**
+   * Delta type - drives the color scale
+   */
+  deltaType: MetricRunInfoDeltaType;
+  /**
+   * Inverted variant - render the delta type as background color
+   */
+  inverted?: boolean;
+}
+
+export const Delta = (props: DeltaProps & React.ComponentProps<'span'>) => {
+  const { className = '', displayValue, deltaType, inverted = false, ...restProps } = props;
+
+  const rootClassName = cx(css.root, className, inverted && css.inverted, css[deltaType]);
+
+  return (
+    <span className={rootClassName} {...restProps}>
+      {displayValue}
+    </span>
+  );
+};

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

@@ -5,7 +5,7 @@
   bottom: 0;
   width: 100vw;
   max-width: var(--entry-info-width);
-  z-index: var(--layer-high);
+  z-index: calc(var(--layer));
   background: var(--color-background);
   box-shadow: var(--shadow-layer-high);
 }

package/src/components/entry-info/entry-info.tsx

@@ -63,8 +63,8 @@ function defaultRenderRunInfo(item: ReportMetricRow) {
   return (
     <RunInfo
       current={metricRunInfo.displayValue}
-      delta={metricRunInfo.displayDeltaPercentage}
-      deltaPercentage={metricRunInfo.displayDelta}
+      delta={metricRunInfo.displayDelta}
+      deltaPercentage={metricRunInfo.displayDeltaPercentage}
       deltaType={metricRunInfo.deltaType}
       baseline={baselineRun?.displayValue || '0B'}
       size="large"

package/src/components/index.ts

@@ -5,12 +5,15 @@ export { BundlePackages } from './bundle-packages';
 export { BundleModules } from './bundle-modules';
 export { ComponentLink } from './component-link';
 export { Delta } from './delta';
+export type { DeltaProps } from './delta';
 export { InsightIcon } from './insight-icon';
 export { Insights } from './insights';
 export { JobName } from './job-name';
 export { JobsHeader } from './jobs-header';
 export { LighthouseTable } from './lighthouse-table';
 export { Metric } from './metric';
+export { MetricChangeLegend } from './metric-change-legend';
+export type { MetricChangeLegendProps } from './metric-change-legend';
 export { MetricRunInfo } from './metric-run-info';
 export type { MetricRunInfoProps } from './metric-run-info';
 export { MetricsTable } from './metrics-table';

package/src/components/insight-icon/insight-icon.module.css

@@ -1,20 +1,20 @@
 .root {
-  width: calc(var(--space-small) + 6px);
-  height: calc(var(--space-small) + 6px);
-  padding: 3px;
+  width: calc(var(--space-small) + var(--space-xxsmall));
+  height: calc(var(--space-small) + var(--space-xxsmall));
+  padding: var(--space-xxxsmall);
   border-radius: 50%;
   background: var(--color-highlight);
 }
 
 .error {
-  background: var(--color-red-50);
+  background: var(--color-highlight-danger);
   color: var(--color-danger);
 }
 
 .warning {
   padding-top: 1px;
-  background: var(--color-yellow-100);
-  color: var(--color-yellow-900);
+  background: var(--color-highlight-warning);
+  color: var(--color-warning);
 }
 
 .info {

package/src/components/job-name/job-name.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Tooltip } from '../../ui/tooltip';
 import css from './job-name.module.css';
 
 export const JobName = ({
@@ -11,9 +10,9 @@ export const JobName = ({
   children,
   ...restProps
 }) => (
-  <Tooltip className={css.root} as={Component} title={title} {...restProps}>
+  <Component className={css.root} title={title} {...restProps}>
     {children || `Job #${internalBuildNumber}`}
-  </Tooltip>
+  </Component>
 );
 
 JobName.defaultProps = {

package/src/components/metric-change-legend/index.ts

@@ -0,0 +1 @@
+export * from './metric-change-legend';

package/src/components/metric-change-legend/metric-change-legend.module.css

@@ -0,0 +1,80 @@
+.root {
+  font-size: var(--size-small);
+}
+
+.itemVariants {
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+.itemLabel {
+  flex: 1 1 auto;
+  min-width: 0;
+  white-space: nowrap;
+}
+
+.itemAnchor {
+  color: var(--color-text-light);
+}
+
+.itemAnchor:hover {
+  color: var(--color-text);
+}
+
+.variants {
+  display: flex;
+  gap: 1px;
+  overflow: hidden;
+  border-radius: var(--radius-xsmall);
+}
+
+.infoPreviewCell {
+  width: 1%;
+  white-space: nowrap;
+}
+
+.infoDescriptionCell {
+  padding-left: 0 !important;
+}
+
+.variant {
+  width: var(--space-xxsmall);
+  height: var(--space-xxsmall);
+}
+
+.large .variant {
+  width: var(--space-small);
+  height: var(--space-small);
+}
+
+.bar-improvement .variant-low {
+  background: var(--color-green-light);
+}
+
+.bar-improvement .variant-medium {
+  background: var(--color-green);
+}
+
+.bar-improvement .variant-high {
+  background: var(--color-green-dark);
+}
+
+.bar-regression .variant-low {
+  background: var(--color-red-light);
+}
+
+.bar-regression .variant-medium {
+  background: var(--color-red);
+}
+
+.bar-regression .variant-high {
+  background: var(--color-red-dark);
+}
+
+.bar-neutral .variant-medium {
+  background: var(--color-info);
+}
+
+.bar-no-change .variant-medium {
+  background: var(--color-gray-ultra-light);
+}

package/src/components/metric-change-legend/metric-change-legend.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { MetricChangeLegend } from '.';
+
+const meta = {
+  title: 'Components/MetricChangeLegend',
+  component: MetricChangeLegend,
+} satisfies Meta<typeof MetricChangeLegend>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};