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

package/src/components/summary/summary.tsx

@@ -4,21 +4,16 @@ import get from 'lodash/get';
 import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
 
 import {
-  METRICS_WEBPACK_ASSETS,
+  METRICS_GROUP_ASSETS,
+  METRICS_GROUP_MODULES,
+  METRICS_GROUP_PACKAGES,
   METRICS_WEBPACK_GENERAL,
-  METRICS_WEBPACK_MODULES,
-  METRICS_WEBPACK_PACKAGES,
 } from '../../constants';
 import { Box } from '../../layout/box';
 import { ComponentLink } from '../component-link';
 import { MetricRunInfo, MetricRunInfoProps } from '../metric-run-info';
 import css from './summary.module.css';
-
-const METRICS_WEBPACK_OTHERS = [
-  ...METRICS_WEBPACK_ASSETS,
-  ...METRICS_WEBPACK_MODULES,
-  ...METRICS_WEBPACK_PACKAGES,
-];
+import { Stack } from '../../layout';
 
 interface SummaryItemProps {
   metricId: string;
@@ -46,15 +41,7 @@ const SummaryItem = (props: SummaryItemProps & React.ComponentProps<'div'>) => {
   const metricData = get(data, metricId, { current: 0, baseline: 0 });
 
   return (
-    <Box
-      key={metricId}
-      outline
-      outlineHover
-      padding="small"
-      as={SummaryItemCustomLink}
-      {...componentLink?.link}
-      className={className}
-    >
+    <SummaryItemCustomLink key={metricId} {...componentLink?.link} className={className}>
       <MetricRunInfo
         metricId={metricId}
         current={metricData.current}
@@ -64,7 +51,7 @@ const SummaryItem = (props: SummaryItemProps & React.ComponentProps<'div'>) => {
         size={size}
         loading={loading}
       />
-    </Box>
+    </SummaryItemCustomLink>
   );
 };
 
@@ -90,38 +77,48 @@ export const Summary = ({
   summaryItemLink = ComponentLink,
 }: SummaryProps & React.ComponentProps<'div'>) => (
   <Box className={cx(css.root, className)}>
-    <div className={css.wrapper}>
-      <div className={css.items}>
-        {METRICS_WEBPACK_GENERAL.map((metricId) => (
-          <SummaryItem
-            key={metricId}
-            className={css.item}
-            metricId={metricId}
-            data={data}
-            size="large"
-            loading={loading}
-            customLink={summaryItemLink}
-            showDelta={showSummaryItemDelta}
-            showBaseline={showSummaryItemBaseline}
-          />
-        ))}
-      </div>
+    <div className={css.row}>
+      <Box outline padding="small" className={css.rowGroup}>
+        <div className={css.items}>
+          {METRICS_WEBPACK_GENERAL.map((metricId) => (
+            <SummaryItem
+              key={metricId}
+              className={css.item}
+              metricId={metricId}
+              data={data}
+              size="xlarge"
+              loading={loading}
+              customLink={summaryItemLink}
+              showDelta={showSummaryItemDelta}
+              showBaseline={showSummaryItemBaseline}
+            />
+          ))}
+        </div>
+      </Box>
     </div>
-    <div className={css.wrapper}>
-      <div className={css.items}>
-        {METRICS_WEBPACK_OTHERS.map((metricId) => (
-          <SummaryItem
-            key={metricId}
-            className={cx(css.item, css.itemSmall)}
-            metricId={metricId}
-            data={data}
-            customLink={summaryItemLink}
-            loading={loading}
-            showDelta={showSummaryItemDelta}
-            showBaseline={false}
-          />
-        ))}
-      </div>
+    <div className={css.row}>
+      {[METRICS_GROUP_ASSETS, METRICS_GROUP_MODULES, METRICS_GROUP_PACKAGES].map((metricGroup) => (
+        <Stack className={css.rowGroup} key={metricGroup.title}>
+          <h3 className={css.rowGroupTitle}>{metricGroup.title}</h3>
+          <Box outline padding="small">
+            <div className={css.items}>
+              {metricGroup.metrics.map((metricId) => (
+                <SummaryItem
+                  key={metricId}
+                  className={css.item}
+                  metricId={metricId}
+                  data={data}
+                  size="large"
+                  loading={loading}
+                  customLink={summaryItemLink}
+                  showDelta={showSummaryItemDelta}
+                  showBaseline={showSummaryItemBaseline}
+                />
+              ))}
+            </div>
+          </Box>
+        </Stack>
+      ))}
     </div>
   </Box>
 );

package/src/constants.ts

@@ -36,6 +36,19 @@ export const METRICS_WEBPACK_MODULES = [
 ];
 export const METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];
 
+export const METRICS_GROUP_ASSETS = {
+  title: 'Assets',
+  metrics: METRICS_WEBPACK_ASSETS,
+};
+export const METRICS_GROUP_MODULES = {
+  title: 'Modules',
+  metrics: METRICS_WEBPACK_MODULES,
+};
+export const METRICS_GROUP_PACKAGES = {
+  title: 'Packages',
+  metrics: METRICS_WEBPACK_PACKAGES,
+};
+
 export const SORT = {
   ASC: 'asc',
   DESC: 'desc',

package/src/css/variables.css

@@ -32,22 +32,21 @@
   --line-height-number: 1.2em;
 
   /*
-   * Color scheme:
-   * https://coolors.co/287acc-da444e-55b950-efcc1a-192339
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23ebc013&mcgpalette3=%232a2933&mcgpalette4=%23287acc&themename=bundle-stats
-   * https://hihayk.github.io/scale/#4/5/50/90/-51/0/0/14/353138/53/49/56/white
+   * Color scheme: https://coolors.co/287acc-da444e-55b950-e5c110-192339-353538
    */
-  --color-gray-25: #f9f9f9;
-  --color-gray-50: #e5e5e7;
-  --color-gray-100: #d2d2d4;
-  --color-gray-200: #959499;
-  --color-gray-300: #6a6970;
-  --color-gray-400: #4a4952;
-  --color-gray-500: #2a2933;
-  --color-gray-600: #25242e;
-  --color-gray-700: #1f1f27;
-  --color-gray-800: #191920;
-  --color-gray-900: #0f0f14;
+
+   --color-gray-25: #f9f9f9;
+   /** https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/0/3F3F47/63/63/71/white */
+   --color-gray-50: #ececed;
+   --color-gray-100: #c9c9cc;
+   --color-gray-200: #a7a7aa;
+   --color-gray-300: #848489;
+   --color-gray-400: #626268;
+   --color-gray-500: #3f3f47;
+   --color-gray-600: #36363c;
+   --color-gray-700: #2c2c32;
+   --color-gray-800: #232327;
+   --color-gray-900: #19191c;
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
@@ -56,16 +55,17 @@
   --color-gray-ultra-dark: var(--color-gray-900);
 
   --color-red-25: #fdf5f6;
-  --color-red-50: #fbe9ea;
-  --color-red-100: #f4c7ca;
-  --color-red-200: #eda2a7;
-  --color-red-300: #e57c83;
-  --color-red-400: #e06069;
+  /* https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/100/DA444E/218/68/78/white */
+  --color-red-50: #fbeced;
+  --color-red-100: #f5cbcd;
+  --color-red-200: #eea9ae;
+  --color-red-300: #e7878e;
+  --color-red-400: #e1666e;
   --color-red-500: #da444e;
-  --color-red-600: #d63e47;
-  --color-red-700: #d0353d;
-  --color-red-800: #cb2d35;
-  --color-red-900: #c21f25;
+  --color-red-600: #c92a35;
+  --color-red-700: #b31520;
+  --color-red-800: #8c0710;
+  --color-red-900: #660005;
   --color-red-ultra-light: var(--color-red-100);
   --color-red-light: var(--color-red-300);
   --color-red: var(--color-red-500);
@@ -73,16 +73,17 @@
   --color-red-ultra-dark: var(--color-red-900);
 
   --color-blue-25: #f3f8fd;
-  --color-blue-50: #e5eff9;
-  --color-blue-100: #bfd7f0;
-  --color-blue-200: #94bde6;
-  --color-blue-300: #69a2db;
-  --color-blue-400: #488ed4;
+  /* https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/100/287ACC/40/122/204/white */
+  --color-blue-50: #eaf2fa;
+  --color-blue-100: #c3daf1;
+  --color-blue-200: #9cc2e8;
+  --color-blue-300: #75aade;
+  --color-blue-400: #4f92d5;
   --color-blue-500: #287acc;
-  --color-blue-600: #2472c7;
-  --color-blue-700: #1e67c0;
-  --color-blue-800: #185db9;
-  --color-blue-900: #0f4aad;
+  --color-blue-600: #1168bf;
+  --color-blue-700: #0055ac;
+  --color-blue-800: #00438c;
+  --color-blue-900: #003166;
 
   --color-blue-ultra-light: var(--color-blue-100);
   --color-blue-light: var(--color-blue-300);
@@ -91,16 +92,17 @@
   --color-blue-ultra-dark: var(--color-blue-900);
 
   --color-green-25: #f6fbf6;
-  --color-green-50: #ebf7ea;
-  --color-green-100: #cceacb;
-  --color-green-200: #aadca8;
-  --color-green-300: #88ce85;
-  --color-green-400: #6fc46a;
-  --color-green-500: #55b950;
-  --color-green-600: #4eb249;
-  --color-green-700: #44aa40;
-  --color-green-800: #3ba237;
-  --color-green-900: #2a9327;
+  /* https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/100/55b950/85/185/80/white */
+  --color-green-50: #eef8ee;
+  --color-green-100: #cfebce;
+  --color-green-200: #b1dfaf;
+  --color-green-300: #92d28f;
+  --color-green-400: #74c670;
+  --color-green-500: #55B950;
+  --color-green-600: #3ea839;
+  --color-green-700: #2b9426;
+  --color-green-800: #1b7b16;
+  --color-green-900: #0f5f0b;
 
   --color-green-ultra-light: var(--color-green-100);
   --color-green-light: var(--color-green-300);
@@ -109,18 +111,18 @@
   --color-green-ultra-dark: var(--color-green-900);
 
   --color-yellow-25: #fffdf2;
-  --color-yellow-50: #fdf7e3;
-  --color-yellow-100: #f9ecb8;
-  --color-yellow-200: #f5e089;
-  --color-yellow-300: #f1d35a;
-  --color-yellow-400: #eec936;
-  --color-yellow-500: #ebc013;
-  --color-yellow-600: #e9ba11;
-  --color-yellow-700: #e5b20e;
-  --color-yellow-800: #e2aa0b;
-  --color-yellow-900: #dd9c06;
-
-  --color-yellow-light-background: var(--color-yellow-25);
+  /* https://hihayk.github.io/scale/#4/5/40/80/0/-0/0/0/E5C110/229/193/16/white */
+  --color-yellow-50:  #faf3cf;
+  --color-yellow-100: #f6e9a9;
+  --color-yellow-200: #f2df83;
+  --color-yellow-300: #edd55d;
+  --color-yellow-400: #e9cb36;
+  --color-yellow-500: #e5c110;
+  --color-yellow-600: #ceae0e;
+  --color-yellow-700: #b79a0d;
+  --color-yellow-800: #a0870b;
+  --color-yellow-900: #89740a;
+
   --color-yellow-ultra-light: var(--color-yellow-100);
   --color-yellow-light: var(--color-yellow-300);
   --color-yellow: var(--color-yellow-500);
@@ -130,11 +132,13 @@
   --color-dark: #111;
   --color-light: #fff;
 
-  /* Functional color variables */
   --color-branding-light: #2b76d4;
   --color-branding: #1a477f;
   --color-branding-dark: #09182a;
+}
 
+body {
+  /* Functional color variables */
   --color-text-ultra-light: var(--color-gray-ultra-light);
   --color-text-light: var(--color-gray-light);
   --color-text: var(--color-gray);
@@ -183,8 +187,8 @@
   --color-backdrop: rgba(0, 0, 0, 0.05);
   --color-shadow: rgba(0, 0, 0, 0.25);
 
-  --transition-duration-in: 0.2s;
-  --transition-duration-out: 0.17s;
+  --transition-duration-in: 0.16s;
+  --transition-duration-out: 0.10s;
   --transition-in: all var(--transition-duration-in) ease-in;
   --transition-out: all var(--transition-duration-out) ease-out;
 
@@ -219,3 +223,12 @@
   --entry-info-width: 64rem;
   --entry-info-top: var(--header-height);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0s !important;
+    animation-delay: 0s !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+}

package/src/ui/dialog/dialog.module.css

@@ -3,6 +3,17 @@
   align-items: center;
   justify-content: center;
   z-index: var(--layer-xxhigh);
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.backdrop[data-enter] {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.backdrop[data-leave] {
+  pointer-events: none;
 }
 
 .backdrop::before {
@@ -27,6 +38,17 @@
   background: var(--color-background);
   box-shadow: 0 0 var(--space-medium) var(--color-shadow);
   z-index: var(--layer-xxhigh);
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.dialog[data-enter] {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.digalog[data-leave] {
+  pointer-events: none;
 }
 
 .header {

package/src/ui/dialog/dialog.tsx

@@ -1,13 +1,20 @@
 import type { ComponentProps, ReactNode } from 'react';
 import React from 'react';
 import cx from 'classnames';
-import { Dialog as AriakitDialog, DialogDismiss as AriakitDialogDismiss } from 'ariakit/dialog';
+import {
+  Dialog as AriakitDialog,
+  DialogDismiss as AriakitDialogDismiss,
+  useDialogState as useAriakitDialogState,
+  type DialogStateProps,
+} from 'ariakit/dialog';
 
 import { Stack } from '../../layout/stack';
 import { BUTTON_GLYPHS, Button } from '../button';
 import css from './dialog.module.css';
 
-export { useDialogState } from 'ariakit/dialog';
+export const useDialogState = (options: DialogStateProps = {}) => {
+  return useAriakitDialogState({ animated: true, ...options });
+};
 
 type AriakitDialogProps = ComponentProps<typeof AriakitDialog>;
 

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

@@ -16,6 +16,17 @@
   min-width: 12em;
   z-index: var(--layer-high);
   padding: calc(var(--space-xxxsmall) / 2);
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.dropdown[data-enter] {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.dropdown[data-leave] {
+  pointer-events: none;
 }
 
 .dropdown:focus {

package/src/ui/dropdown/dropdown.tsx

@@ -4,6 +4,7 @@ import { Menu, MenuButton, MenuItem, MenuStateProps, useMenuState } from 'ariaki
 
 import { Button, BUTTON_SIZE } from '../button';
 import css from './dropdown.module.css';
+import { Icon } from '../icon';
 
 interface DropdownItemProps {
   isActive?: boolean;
@@ -26,6 +27,7 @@ interface DropdownProps {
   placement?: MenuStateProps['placement'];
   gutter?: MenuStateProps['gutter'];
   shift?: MenuStateProps['shift'];
+  showChevron?: boolean;
 }
 
 export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) => {
@@ -35,6 +37,7 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
     label = null,
     ariaLabel = '',
     glyph = '',
+    showChevron = true,
     disabled = false,
     placement,
     gutter = 4,
@@ -43,7 +46,7 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
   } = props;
 
   const dropdownAriaLabel = ariaLabel || (typeof label === 'string' ? label : '');
-  const menuState = useMenuState({ placement, gutter, shift });
+  const menuState = useMenuState({ animated: true, placement, gutter, shift });
 
   return (
     <>
@@ -52,6 +55,7 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
         outline
         size={BUTTON_SIZE.SMALL}
         glyph={glyph}
+        rightGlyph={showChevron ? Icon.ICONS.CHEVRON_DOWN : undefined}
         disabled={disabled}
         state={menuState}
         tabIndex={null}

package/src/ui/hover-card/hover-card.module.css

@@ -5,11 +5,14 @@
 .anchor {
   display: inline-block;
   color: inherit;
+  cursor: default;
   text-decoration: none;
+  transition: var(--transition-out);
 }
 
 .anchor:hover {
   color: var(--color-primary);
+  transition: var(--transition-in);
 }
 
 .anchor:focus {
@@ -27,4 +30,15 @@
   will-change: filter;
   background: var(--color-light);
   font-size: var(--size-small);
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.hoverCard[data-enter] {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.hoverCard[data-leave] {
+  pointer-events: none;
 }

package/src/ui/hover-card/hover-card.tsx

@@ -31,7 +31,7 @@ export const HoverCard = (props: HoverCardProps) => {
     children,
   } = props;
 
-  const state = useHovercardState({ gutter: 8, timeout: 300, placement: 'top' });
+  const state = useHovercardState({ animated: true, gutter: 8, timeout: 300, placement: 'top' });
   const hovercardProps = useHovercard({ state, portal: true });
 
   // Fallback to span if no href

package/src/ui/table/table.module.css

@@ -16,7 +16,6 @@
 
 .root thead th {
   border-width: 0 0 1px;
-  text-transform: uppercase;
   vertical-align: top;
   background: var(--color-highlight);
 }

package/src/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/src/ui/tooltip/tooltip.tsx

@@ -29,7 +29,7 @@ export const Tooltip = <T extends React.ElementType = 'span'>(
     ...restProps
   } = props;
 
-  const tooltip = useTooltipState({ placement: 'top', timeout: 300 });
+  const tooltip = useTooltipState({ animated: true, placement: 'top', timeout: 300 });
 
   return (
     <>

package/types/components/delta/delta.d.ts

@@ -1,22 +1,8 @@
-export function Delta({ className, displayValue, deltaType, inverted }: {
-    className?: string | undefined;
-    displayValue: any;
-    deltaType: any;
-    inverted?: boolean | undefined;
-}): React.JSX.Element;
-export namespace Delta {
-    namespace defaultProps {
-        let className: string;
-        let inverted: boolean;
-    }
-    namespace propTypes {
-        let className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        export let displayValue: PropTypes.Validator<string>;
-        export let deltaType: PropTypes.Validator<string>;
-        let inverted_1: PropTypes.Requireable<boolean>;
-        export { inverted_1 as inverted };
-    }
-}
 import React from 'react';
-import PropTypes from 'prop-types';
+import type { MetricRunInfoDeltaType } from '@bundle-stats/utils';
+export interface DeltaProps {
+    displayValue: string;
+    deltaType: MetricRunInfoDeltaType;
+    inverted?: boolean;
+}
+export declare const Delta: (props: DeltaProps & React.ComponentProps<"span">) => React.JSX.Element;

package/types/components/delta/index.d.ts

@@ -1 +1 @@
-export * from "./delta";
+export * from './delta';

package/types/components/index.d.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/types/components/metric-change-legend/index.d.ts

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

package/types/components/metric-change-legend/metric-change-legend.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export interface MetricChangeLegendProps extends React.ComponentProps<'div'> {
+}
+export declare const MetricChangeLegend: (props: MetricChangeLegendProps) => React.JSX.Element;

package/types/components/metric-run-info/metric-run-info.d.ts

@@ -1,14 +1,10 @@
 import React, { ElementType } from 'react';
 import { RunInfoProps } from '../run-info';
-export interface MetricRunInfoProps {
+export type MetricRunInfoProps = {
     metricId: string;
     current: number;
     baseline?: number;
-    showDelta?: boolean;
     showMetricDescription?: boolean;
-    showBaseline?: boolean;
     titleWrapper?: ElementType;
-    size?: RunInfoProps['size'];
-    loading?: RunInfoProps['loading'];
-}
+} & Pick<RunInfoProps, 'showDelta' | 'showBaseline' | 'size' | 'loading'>;
 export declare const MetricRunInfo: (props: MetricRunInfoProps & React.ComponentProps<"div">) => React.JSX.Element;

package/types/components/run-info/run-info.d.ts

@@ -1,17 +1,26 @@
 import React, { type ReactNode } from 'react';
-export interface RunInfoProps {
+import type { MetricRunInfoDeltaType } from '@bundle-stats/utils';
+type RunInfoTitleProps = {
+    className?: string;
     title?: ReactNode;
     titleHoverCard?: ReactNode;
     titleTooltip?: ReactNode;
+};
+type RunInfoContentProps = {
+    className?: string;
+    loading?: boolean;
     current?: ReactNode;
+    enhance?: boolean;
     baseline?: string;
     delta?: string;
     deltaPercentage?: string;
-    deltaType?: string;
+    deltaType?: MetricRunInfoDeltaType;
+    showBaseline?: boolean;
+    showDelta?: boolean;
+};
+export type RunInfoProps = Pick<RunInfoTitleProps, 'title' | 'titleHoverCard' | 'titleTooltip'> & Pick<RunInfoContentProps, 'current' | 'baseline' | 'delta' | 'deltaPercentage' | 'deltaType' | 'showBaseline' | 'showDelta' | 'loading' | 'enhance'> & {
     as?: React.ElementType;
     size?: 'small' | 'medium' | 'large' | 'xlarge';
-    showBaseline?: boolean;
-    loading?: boolean;
-    enhance?: boolean;
-}
-export declare const RunInfo: ({ className, title, titleHoverCard, titleTooltip, current, baseline, delta, deltaPercentage, deltaType, as: Component, size, showBaseline, loading, enhance, ...restProps }: RunInfoProps & Omit<React.ComponentProps<"div">, "title">) => React.JSX.Element;
+};
+export declare const RunInfo: ({ className, title, titleHoverCard, titleTooltip, current, baseline, delta, deltaPercentage, deltaType, as: Component, size, showBaseline, showDelta, loading, enhance, children, ...restProps }: RunInfoProps & Omit<React.ComponentProps<"div">, "title">) => React.JSX.Element;
+export {};