@bundle-stats/ui 4.9.2-beta.3 → 4.9.3-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.9.2-beta.3",
+  "version": "4.9.3-beta.0",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -36,13 +36,13 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/preset-env": "7.23.8",
+    "@babel/preset-env": "7.23.9",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
-    "@storybook/addon-essentials": "7.6.10",
-    "@storybook/react": "7.6.10",
-    "@storybook/react-webpack5": "7.6.10",
-    "@types/react": "18.2.48",
+    "@storybook/addon-essentials": "7.6.13",
+    "@storybook/react": "7.6.13",
+    "@storybook/react-webpack5": "7.6.13",
+    "@types/react": "18.2.55",
     "@types/react-router-dom": "5.3.3",
     "babel-plugin-require-context-hook": "1.0.0",
     "classnames": "2.5.1",
@@ -59,7 +59,7 @@
     "react-dom": "18.2.0",
     "react-router-dom": "5.3.4",
     "rimraf": "5.0.5",
-    "storybook": "7.6.10",
+    "storybook": "7.6.13",
     "typescript": "5.1.6",
     "typescript-plugin-css-modules": "5.0.2"
   },
@@ -72,10 +72,10 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "4.9.2-beta.3",
+    "@bundle-stats/utils": "4.9.3-beta.0",
     "ariakit": "2.0.0-next.44",
     "modern-css-reset": "1.4.0",
     "use-query-params": "2.2.1"
   },
-  "gitHead": "51838cea169e3c5cbb1c2d388756b0b9b66a059a"
+  "gitHead": "c1e671f4c5524f5d25433bb6594bb21087c73f88"
 }

package/src/app/header/header.tsx

@@ -22,8 +22,9 @@ export const Header = ({ className = '', jobs }: HeaderProps & React.ComponentPr
           href={config.gitHubUrl}
           target="_blank"
           rel="noopener noreferrer"
-          className={css.toolsGitHub}
           title={I18N.GITHUB_LINK_TITLE}
+          aria-label={I18N.GITHUB_LINK_TITLE}
+          className={css.toolsGitHub}
         >
           <Icon glyph={Icon.ICONS.GITHUB} size="large" className={css.toolsGitHubIcon} />
         </a>

package/src/components/bundle-assets/bundle-assets.i18n.ts

@@ -0,0 +1 @@
+export const SEARCH_PLACEHOLDER = 'Search by asset path';

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

@@ -28,6 +28,7 @@ import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
+import { SEARCH_PLACEHOLDER } from './bundle-assets.i18n';
 import css from './bundle-assets.module.css';
 
 const RUN_TITLE_CURRENT = 'Current';
@@ -237,7 +238,7 @@ export const BundleAssets = (props) => {
           <FlexStack space="xxsmall">
             <InputSearch
               className={css.toolbarSearch}
-              placeholder="Search by name"
+              placeholder={SEARCH_PLACEHOLDER}
               defaultValue={search}
               onChange={updateSearch}
             />

package/src/components/bundle-packages/bundle-packages.i18n.ts

@@ -0,0 +1 @@
+export const SEARCH_PLACEHOLDER = 'Search by package name';

package/src/components/bundle-packages/bundle-packages.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { COMPONENT, PACKAGE_FILTERS, PACKAGES_SEPARATOR, SECTIONS } from '@bundle-stats/utils';
@@ -16,6 +16,7 @@ import { MetricsTable } from '../metrics-table';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
 import { PackageInfo } from '../package-info';
+import { SEARCH_PLACEHOLDER } from './bundle-packages.i18n';
 import css from './bundle-packages.module.css';
 
 const getDropdownFilters = ({ compareMode, filters }) => ({
@@ -196,7 +197,7 @@ export const BundlePackages = (props) => {
           <FlexStack space="xxsmall">
             <InputSearch
               className={css.toolbarSearch}
-              placeholder="Search by name"
+              placeholder={SEARCH_PLACEHOLDER}
               defaultValue={search}
               onChange={updateSearch}
             />
@@ -239,6 +240,7 @@ BundlePackages.defaultProps = {
   totalRowCount: 0,
   hasActiveFilters: false,
   customComponentLink: ComponentLink,
+  entryId: '',
 };
 
 BundlePackages.propTypes = {
@@ -277,7 +279,8 @@ BundlePackages.propTypes = {
   updateSearch: PropTypes.func.isRequired,
   allItems: PropTypes.arrayOf(PropTypes.shape({
     key: PropTypes.string,
-  })),
+  })).isRequired,
   customComponentLink: PropTypes.elementType,
+  entryId: PropTypes.string,
   hideEntryInfo: PropTypes.func.isRequired,
 };

package/src/components/jobs-header/jobs-header.module.css

@@ -49,12 +49,13 @@
 }
 
 .itemMeta {
-  font-size: var(--size-small);
   color: var(--color-text-light);
+  font-size: var(--size-small);
 }
 
 .itemMetaIcon {
   flex: 0 0 auto;
+  color: var(--color-text-ultra-light);
 }
 
 .itemMetaText {

package/src/components/jobs-header/jobs-header.tsx

@@ -29,7 +29,7 @@ export const Item = (props: ItemProps & React.ComponentProps<'div'>) => {
 
   return (
     <FlexStack space="xsmall" alignItems="center" className={rootClassName}>
-      <FlexStack space="xxxsmall" as="h1" className={css.itemTitle}>
+      <FlexStack space="xxsmall" as="h1" className={css.itemTitle}>
         <span>{`#${job.internalBuildNumber}`}</span>
         {tag && <Tag className={css.itemTag}>{tag}</Tag>}
       </FlexStack>

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

@@ -31,8 +31,15 @@
   font-weight: bold;
 }
 
+.deltaValue + .deltaValue::before {
+  margin-left: calc(var(--space-xxxsmall) / 2);
+  margin-right: calc(var(--space-xxxsmall) / 2);
+  content: '/';
+  color: var(--color-text-ultra-light);
+}
+
 .baselineMetric {
-  color: var(--color-text-light);
+  color: var(--color-text-ultra-light);
   font-size: var(--size-small);
   line-height: var(--line-height-heading);
 }
@@ -75,3 +82,7 @@
 .large .baselineMetric {
   font-size: var(--size-medium);
 }
+
+.large .delta {
+  margin-left: var(--space-xxxsmall);
+}

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

@@ -98,27 +98,24 @@ export const RunInfo = ({
       {!loading ? (
         <Stack className={css.info}>
           <Metric
-            className={css.currentMetric}
             value={currentValueParams[0]}
             unit={currentValueParams[1]}
             inline
+            className={css.currentMetric}
           >
             {(delta || deltaPercentage) && (
-              <FlexStack space="xxxsmall" alignItems="center">
+              <span className={css.delta}>
                 {deltaPercentage && (
-                  <FlexStack space="xxxsmall" alignItems="center">
-                    <Delta
-                      className={css.delta}
-                      displayValue={deltaPercentage}
-                      deltaType={deltaType}
-                    />
-                    {' / '}
-                  </FlexStack>
+                  <Delta
+                    displayValue={deltaPercentage}
+                    deltaType={deltaType}
+                    className={css.deltaValue}
+                  />
                 )}
                 {delta && (
-                  <Delta className={css.delta} displayValue={delta} deltaType={deltaType} />
+                  <Delta displayValue={delta} deltaType={deltaType} className={css.deltaValue} />
                 )}
-              </FlexStack>
+              </span>
             )}
           </Metric>
           {showBaseline && <Metric className={css.baselineMetric} value={baseline} />}

package/src/css/default.css

@@ -53,7 +53,6 @@ code {
   font-family: var(--font-family-fixed);
 }
 
-/** Orbit updates */
 a {
   color: var(--color-primary);
 }
@@ -64,69 +63,3 @@ a:focus {
   color: var(--color-primary-dark);
   outline: none;
 }
-
-.ui-button--primary {
-  background: var(--color-primary);
-}
-
-.ui-button--primary:active,
-.ui-button--primary:focus,
-.ui-button--primary:hover {
-  background: var(--color-primary-dark);
-}
-
-.ui-button--secondary {
-  background: var(--color-secondary);
-}
-
-.ui-button--secondary:active,
-.ui-button--secondary:focus,
-.ui-button--secondary:hover {
-  background: var(--color-secondary-dark);
-}
-
-.ui-button--info {
-  background: var(--color-info);
-}
-
-.ui-button--info:active,
-.ui-button--info:focus,
-.ui-button--info:hover {
-  background: var(--color-info-dark);
-}
-
-.ui-button--success {
-  background: var(--color-success);
-}
-
-.ui-button--success:active,
-.ui-button--success:focus,
-.ui-button--success:hover {
-  background: var(--color-success-dark);
-}
-
-
-.ui-button--warning {
-  background: var(--color-warning);
-}
-
-.ui-button--warning:active,
-.ui-button--warning:focus,
-.ui-button--warning:hover {
-  background: var(--color-warning-dark);
-}
-
-.ui-button--danger {
-  background: var(--color-danger);
-}
-
-.ui-button--danger:active,
-.ui-button--danger:focus,
-.ui-button--danger:hover {
-  background: var(--color-danger-dark);
-}
-
-.__reakit-portal {
-  z-index: var(--layer-xhigh);
-  position: relative;
-}

package/src/css/variables.css

@@ -160,6 +160,8 @@
 
   --color-background: #fff;
   --color-highlight: var(--color-gray-25);
+  --color-highlight-primary: var(--color-blue-25);
+  --color-highlight-secondary: var(--color-green-25);
   --color-highlight-success: var(--color-green-25);
   --color-highlight-info: var(--color-blue-25);
   --color-highlight-warning: var(--color-yellow-25);
@@ -185,6 +187,7 @@
   --layer: 100;
   --layer-high: 1000;
   --layer-xhigh: 10000;
+  --layer-xxhigh: 100000;
 
   --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
   --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);

package/src/query-state.tsx

@@ -20,7 +20,9 @@ export const useComponentQueryState = (componentName: string) => {
   const componentState = queryState[componentName];
 
   const setState = useCallback(
-    (newState: Record<string, unknown>) => {
+    (updates: Record<string, unknown>) => {
+      const newState = { ...componentState, ...updates };
+
       // Deep check to prevent unnecessary state changes
       if (isEqual(componentState, newState)) {
         return;

package/src/ui/button/button.module.css

@@ -250,14 +250,26 @@
   padding: var(--space-xxsmall);
 }
 
+.outline--padding--small {
+  padding: calc(var(--space-xxsmall) - 1px);
+}
+
 .padding--medium {
   padding:  var(--space-xsmall);
 }
 
+.outline--padding--medium {
+  padding:  calc(var(--space-xsmall) - 1px);
+}
+
 .padding--large {
   padding: var(--space-small);
 }
 
+.outline--padding--large {
+  padding: calc(var(--space-small) - 1px);
+}
+
 /**
  * Radius variation
  */
@@ -277,6 +289,47 @@
   border-radius: 50%;
 }
 
+/**
+ * Active variation
+ */
+.active {
+  text-decoration: underline;
+}
+
+.active-outline-default {
+  background: var(--color-highlight);
+  text-decoration: none;
+}
+
+.active-outline-primary {
+  background: var(--color-highlight-primary);
+  text-decoration: none;
+}
+.active-outline-secondary {
+  background: var(--color-highlight-secondary);
+  text-decoration: none;
+}
+
+.active-outline-info {
+  background: var(--color-highlight-info);
+  text-decoration: none;
+}
+
+.active-outline-success {
+  background: var(--color-highlight-success);
+  text-decoration: none;
+}
+
+.active-outline-warning {
+  background: var(--color-highlight-warning);
+  text-decoration: none;
+}
+
+.active-outline-danger {
+  background: var(--color-highlight-danger);
+  text-decoration: none;
+}
+
 /**
  * Disabled state
  */

package/src/ui/button/button.stories.tsx

@@ -38,6 +38,14 @@ export const All = () => (
             </Button>
           ))}
         </FlexStack>
+        <h3>Active</h3>
+        <FlexStack space="small" alignItems="top">
+          {Object.values(Button.KIND).map((kind) => (
+            <Button kind={kind} key={kind} active>
+              Action {kind}
+            </Button>
+          ))}
+        </FlexStack>
         <h3>Disabled</h3>
         <FlexStack space="small" alignItems="top">
           {Object.values(Button.KIND).map((kind) => (
@@ -63,6 +71,17 @@ export const All = () => (
             ))}
           </FlexStack>
         ))}
+        <h3>Active</h3>
+        <FlexStack space="small" alignItems="top">
+          <Button outline active>
+            Action default
+          </Button>
+          {Object.values(Button.KIND).map((kind) => (
+            <Button outline kind={kind} key={kind} active>
+              Action {kind}
+            </Button>
+          ))}
+        </FlexStack>
         <h3>Disabled</h3>
         <FlexStack space="small" alignItems="top">
           <Button outline disabled>
@@ -91,6 +110,17 @@ export const All = () => (
             ))}
           </FlexStack>
         ))}
+        <h3>Active</h3>
+        <FlexStack space="small" alignItems="top">
+          <Button solid active>
+            Action default
+          </Button>
+          {Object.values(Button.KIND).map((kind) => (
+            <Button solid kind={kind} key={kind} active>
+              Action {kind}
+            </Button>
+          ))}
+        </FlexStack>
         <h3>Disabled</h3>
         <FlexStack space="small" alignItems="top">
           <Button solid disabled>

package/src/ui/button/button.tsx

@@ -22,24 +22,30 @@ const KIND = {
 type Size = (typeof SIZE)[keyof typeof SIZE];
 type Kind = (typeof KIND)[keyof typeof KIND];
 
-interface ButtonProps {
+interface ButtonProps<T extends React.ElementType> {
   outline?: boolean;
   solid?: boolean;
+  active?: boolean;
   kind?: Kind | 'default';
   size?: Size;
   radius?: Size | 'circle' | 'none';
   padding?: Size | 'none';
+  as?: T;
 }
 
-export const Button = (props: ButtonProps & React.ComponentProps<typeof ButtonBaseComponent>) => {
+export const Button = <T extends React.ElementType = 'button'>(
+  props: ButtonProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof ButtonProps<T>>,
+) => {
   const {
     className = '',
     outline = false,
     solid = false,
+    active = false,
     kind = 'default',
     size = 'medium',
     radius = '',
     padding = '',
+    as: Component = ButtonBaseComponent,
     ...restProps
   } = props;
 
@@ -59,13 +65,17 @@ export const Button = (props: ButtonProps & React.ComponentProps<typeof ButtonBa
     solid && css[`solid--${kind}`],
 
     resolvedPadding && css[`padding--${resolvedPadding}`],
+    resolvedPadding && outline && css[`outline--padding--${resolvedPadding}`],
     resolvedRadius && css[`radius--${resolvedRadius}`],
 
+    active && css.active,
+    active && outline && css[`active-outline-${kind}`],
+
     css[size],
     className,
   );
 
-  return <ButtonBaseComponent {...restProps} className={rootClassName} />;
+  return <Component {...restProps} className={rootClassName} />;
 };
 
 Button.SIZE = SIZE;

package/src/ui/dropdown/dropdown.jsx

@@ -4,6 +4,7 @@ import cx from 'classnames';
 import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
 
 import { FlexStack } from '../../layout/flex-stack';
+import { Button } from '../button';
 import { Icon } from '../icon';
 import css from './dropdown.module.css';
 
@@ -28,7 +29,14 @@ export const Dropdown = (props) => {
 
   return (
     <div className={rootClassName}>
-      <MenuButton state={menuState} className={cx(css.button, buttonClassName)} tabIndex={null}>
+      <MenuButton
+        as={Button}
+        outline
+        size={Button.SIZE.SMALL}
+        state={menuState}
+        tabIndex={null}
+        className={cx(css.button, buttonClassName)}
+      >
         <FlexStack space="xxxsmall" alignItems="center" className={css.label}>
           {glyph && <Icon className={css.labelIcon} glyph={glyph} />}
           {label && <span className={css.labelText}>{label}</span>}

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

@@ -3,29 +3,9 @@
 }
 
 .button {
-  background: none;
-  border: none;
-  padding: 0;
-
-  border: 1px solid var(--color-outline);
-  border-radius: var(--radius-small);
-  padding: calc(var(--space-xxsmall) - 1px);
-
-  appearance: none;
-  background: none;
   font-size: var(--size-small);
   line-height: var(--space-small);
   white-space: nowrap;
-  color: var(--color-text-light);
-}
-
-.button[aria-expanded=true],
-.button:hover,
-.button:focus,
-.button:active {
-  outline: none;
-  box-shadow: var(--outline-hover);
-  color: var(--color-text);
 }
 
 .dropdown {

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

@@ -17,6 +17,7 @@
 }
 
 .hoverCard {
+  z-index: var(--layer-xxhigh);
   padding: var(--space-xsmall) var(--space-small);
   border-radius: var(--radius-medium);
   width: calc(100vw - 2 * var(--space-small));

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: 800 });
+  const state = useHovercardState({ gutter: 8, timeout: 300 });
   const hovercardProps = useHovercard({ state, portal: true });
 
   // Fallback to span if no href
@@ -62,7 +62,6 @@ export const HoverCard = (props: HoverCardProps) => {
         {...hovercardProps}
         state={state}
         className={cx(css.hoverCard, hoverCardClassName)}
-        style={{ zIndex: 10000 }}
       >
         <HovercardArrow size={24} />
         {typeof children === 'function' ? children({ close: state.hide }) : children}

package/src/ui/skeleton/skeleton.module.css

@@ -3,6 +3,7 @@
   opacity: 0.05;
   pointer-events: none;
   min-width: 6em;
+  border-radius: var(--radius-medium);
 }
 
 /** empty char to keep the text height */

package/src/ui/tooltip/tooltip.module.css

@@ -19,6 +19,7 @@
   filter: drop-shadow(var(--shadow-layer));
   will-change: filter;
   font-size: var(--size-xsmall);
+  z-index: var(--layer-xxhigh);
 }
 
 .arrow svg {

package/types/components/bundle-assets/bundle-assets.i18n.d.ts

@@ -0,0 +1 @@
+export declare const SEARCH_PLACEHOLDER = "Search by asset path";

package/types/components/bundle-packages/bundle-packages.d.ts

@@ -5,6 +5,7 @@ export namespace BundlePackages {
         export let totalRowCount: number;
         export let hasActiveFilters: boolean;
         export { ComponentLink as customComponentLink };
+        export let entryId: string;
     }
     namespace propTypes {
         let className_1: PropTypes.Requireable<string>;
@@ -37,10 +38,12 @@ export namespace BundlePackages {
         export let updateSort: PropTypes.Validator<(...args: any[]) => any>;
         export let search: PropTypes.Validator<string>;
         export let updateSearch: PropTypes.Validator<(...args: any[]) => any>;
-        export let allItems: PropTypes.Requireable<(PropTypes.InferProps<{
+        export let allItems: PropTypes.Validator<(PropTypes.InferProps<{
             key: PropTypes.Requireable<string>;
         }> | null | undefined)[]>;
         export let customComponentLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        let entryId_1: PropTypes.Requireable<string>;
+        export { entryId_1 as entryId };
         export let hideEntryInfo: PropTypes.Validator<(...args: any[]) => any>;
     }
 }

package/types/components/bundle-packages/bundle-packages.i18n.d.ts

@@ -0,0 +1 @@
+export declare const SEARCH_PLACEHOLDER = "Search by package name";

package/types/ui/button/button.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Button as ButtonBaseComponent } from 'ariakit/button';
 declare const SIZE: {
     readonly SMALL: "small";
     readonly MEDIUM: "medium";
@@ -15,16 +14,18 @@ declare const KIND: {
 };
 type Size = (typeof SIZE)[keyof typeof SIZE];
 type Kind = (typeof KIND)[keyof typeof KIND];
-interface ButtonProps {
+interface ButtonProps<T extends React.ElementType> {
     outline?: boolean;
     solid?: boolean;
+    active?: boolean;
     kind?: Kind | 'default';
     size?: Size;
     radius?: Size | 'circle' | 'none';
     padding?: Size | 'none';
+    as?: T;
 }
 export declare const Button: {
-    (props: ButtonProps & React.ComponentProps<typeof ButtonBaseComponent>): React.JSX.Element;
+    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements> = "button">(props: ButtonProps<T> & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, keyof ButtonProps<T>>): React.JSX.Element;
     SIZE: {
         readonly SMALL: "small";
         readonly MEDIUM: "medium";