@bundle-stats/ui 4.23.0-beta.4 → 4.23.0-beta.5

package/src/components/bundle-packages/bundle-packages.module.css

@@ -12,8 +12,23 @@
 }
 
 .packageName {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xxxsmall);
   color: var(--color-text-light);
+  text-decoration: none;
+}
+
+.packageNameTagDuplicate {
+  flex: 0 0 auto;
+}
+
+.packageNameTagDuplicate::before {
+  content: 'd';
+}
+
+.packageNameLabel {
+  flex: 1 1 auto;
 }
 
 .packageName:last-child {
@@ -25,29 +40,13 @@
   margin: 0 var(--space-xxxsmall);
   content: '/';
   color: var(--color-text-ultra-light);
+  text-decoration: none;
 }
 
-.packageNameTagDuplicate {
-  margin-right: var(--space-xxxsmall);
-  vertical-align: middle;
-}
-
-.packageNameLabel {
-  vertical-align: middle;
-}
-
-.packageNameTagDuplicate::before {
-  content: 'd';
-}
-
-.root .packageName:hover,
-.root .packageName:active,
-.root .packageName:focus {
-  text-decoration: none;
+.packageName:hover {
+  text-decoration: none !important;
 }
 
-.root .packageName:hover .packageNameLabel,
-.root .packageName:active .packageNameLabel,
-.root .packageName:focus .packageNameLabel {
-  text-decoration: underline;
+.packageName:hover .packageNameLabel {
+  text-decoration: underline !important;
 }

package/src/components/metrics-table/metrics-table.module.css

@@ -1,21 +1,13 @@
-.root a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.root a:hover,
-.root a:active,
-.root a:focus {
-  color: var(--color-primary);
-  text-decoration: underline;
-}
-
 .root .value,
 .root .delta {
   text-align: right;
 }
 
 /** rows */
+.clickable {
+  cursor: default;
+}
+
 .multipleRuns .unchanged th,
 .multipleRuns .unchanged td {
   color: var(--color-text-light);

package/src/components/metrics-table/metrics-table.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import cx from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import type { ReportMetricRow } from '@bundle-stats/utils';
@@ -20,51 +20,75 @@ const CURRENT_COLUMN_SPAN = 3;
 interface RowProps extends React.ComponentProps<typeof Table.Tr> {
   item: ReportMetricRow;
   renderHeader: (item: ReportMetricRow) => React.ReactNode;
+  onRowClick?: (item: ReportMetricRow) => void;
 }
 
-const Row = ({ className = '', item, renderHeader, ...restProps }: RowProps) => (
-  <Table.Tr className={cx(!item.changed && css.unchanged, className)} {...restProps}>
-    <Table.Th className={css.metricName}>{renderHeader(item)}</Table.Th>
+const Row = ({ className = '', item, renderHeader, onRowClick, ...restProps }: RowProps) => {
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLTableRowElement>) => {
+      // Skip clicks on interactive elements (eg: links, buttons)
+      if ((event.target as HTMLElement).closest('a, button')) {
+        return;
+      }
+
+      // Skip when the user is selecting text
+      if (window.getSelection()?.toString()) {
+        return;
+      }
 
-    {item.runs.map((run, index) => {
-      const isBaseline = index === item.runs.length - 1;
-      const valueClassName = cx(css.value, !isBaseline && css.current);
+      onRowClick?.(item);
+    },
+    [onRowClick, item],
+  );
+
+  return (
+    <Table.Tr
+      className={cx(!item.changed && css.unchanged, onRowClick && css.clickable, className)}
+      onClick={onRowClick ? handleClick : undefined}
+      {...restProps}
+    >
+      <Table.Th className={css.metricName}>{renderHeader(item)}</Table.Th>
+
+      {item.runs.map((run, index) => {
+        const isBaseline = index === item.runs.length - 1;
+        const valueClassName = cx(css.value, !isBaseline && css.current);
+
+        // Empty cells if no value
+        if (!run || typeof run.value === 'undefined') {
+          return (
+            <>
+              <Table.Td className={valueClassName}>-</Table.Td>
+              {!isBaseline && <Table.Td className={css.delta} />}
+              {!isBaseline && <Table.Td className={cx(css.delta, css.deltaPercentage)} />}
+            </>
+          );
+        }
 
-      // Empty cells if no value
-      if (!run || typeof run.value === 'undefined') {
         return (
           <>
-            <Table.Td className={valueClassName}>-</Table.Td>
-            {!isBaseline && <Table.Td className={css.delta} />}
-            {!isBaseline && <Table.Td className={cx(css.delta, css.deltaPercentage)} />}
+            <Table.Td className={valueClassName}>
+              <Metric value={run.displayValue} />
+            </Table.Td>
+            {!isBaseline && (
+              <>
+                <Table.Td className={css.delta}>
+                  {'delta' in run && (
+                    <Delta displayValue={run.displayDelta} deltaType={run.deltaType} />
+                  )}
+                </Table.Td>
+                <Table.Td className={cx(css.delta, css.deltaPercentage)}>
+                  {'delta' in run && (
+                    <Delta displayValue={run.displayDeltaPercentage} deltaType={run.deltaType} />
+                  )}
+                </Table.Td>
+              </>
+            )}
           </>
         );
-      }
-
-      return (
-        <>
-          <Table.Td className={valueClassName}>
-            <Metric value={run.displayValue} />
-          </Table.Td>
-          {!isBaseline && (
-            <>
-              <Table.Td className={css.delta}>
-                {'delta' in run && (
-                  <Delta displayValue={run.displayDelta} deltaType={run.deltaType} />
-                )}
-              </Table.Td>
-              <Table.Td className={cx(css.delta, css.deltaPercentage)}>
-                {'delta' in run && (
-                  <Delta displayValue={run.displayDeltaPercentage} deltaType={run.deltaType} />
-                )}
-              </Table.Td>
-            </>
-          )}
-        </>
-      );
-    })}
-  </Table.Tr>
-);
+      })}
+    </Table.Tr>
+  );
+};
 
 interface MetricsTableProps extends Omit<React.ComponentProps<typeof Table>, 'title'> {
   runs: Array<{
@@ -77,6 +101,7 @@ interface MetricsTableProps extends Omit<React.ComponentProps<typeof Table>, 'ti
   sort?: MetricsTableHeaderProps['sort'];
   updateSort?: MetricsTableHeaderProps['updateSort'];
   renderRowHeader?: (item: ReportMetricRow) => React.ReactNode;
+  onRowClick?: (item: ReportMetricRow) => void;
   emptyMessage?: React.ReactNode;
   showAllItems: boolean;
   setShowAllItems: (value: boolean) => void;
@@ -91,6 +116,7 @@ export const MetricsTable = ({
   sort,
   updateSort,
   renderRowHeader = (item: any) => item.label,
+  onRowClick,
   emptyMessage = I18N.EMPTY_MESSAGE,
   showAllItems,
   setShowAllItems,
@@ -132,7 +158,12 @@ export const MetricsTable = ({
         {showItems && (
           <>
             {visibleItems.map((item) => (
-              <Row key={item.key} item={item} renderHeader={renderRowHeader} />
+              <Row
+                key={item.key}
+                item={item}
+                renderHeader={renderRowHeader}
+                onRowClick={onRowClick}
+              />
             ))}
 
             {hasHiddenItems && (

package/src/components/metrics-table-options/metrics-table-options.tsx

@@ -15,18 +15,18 @@ export const MetricsTableOptions = (props: MetricsTableOptionsProps) => {
 
   return (
     <Dropdown glyph="more-vertical" placement="bottom-end" {...restProps}>
-      <DropdownGroup>
-        {onResetClick && <DropdownItem onClick={onResetClick}>{I18N.RESET_FILTERS}</DropdownItem>}
-        {onViewAllClick && <DropdownItem onClick={onViewAllClick}>{I18N.VIEW_ALL}</DropdownItem>}
-      </DropdownGroup>
-      <DropdownGroup>
-        {onExportClick && (
-          <>
-            <DropdownItem onClick={() => onExportClick('csv')}>{I18N.EXPORT_CSV}</DropdownItem>
-            <DropdownItem onClick={() => onExportClick('json')}>{I18N.EXPORT_JSON}</DropdownItem>
-          </>
-        )}
-      </DropdownGroup>
+      {(onResetClick || onViewAllClick) && (
+        <DropdownGroup>
+          {onResetClick && <DropdownItem onClick={onResetClick}>{I18N.RESET_FILTERS}</DropdownItem>}
+          {onViewAllClick && <DropdownItem onClick={onViewAllClick}>{I18N.VIEW_ALL}</DropdownItem>}
+        </DropdownGroup>
+      )}
+      {onExportClick && (
+        <DropdownGroup>
+          <DropdownItem onClick={() => onExportClick('csv')}>{I18N.EXPORT_CSV}</DropdownItem>
+          <DropdownItem onClick={() => onExportClick('json')}>{I18N.EXPORT_JSON}</DropdownItem>
+        </DropdownGroup>
+      )}
     </Dropdown>
   );
 };

package/src/components/metrics-table-row-count/index.ts

@@ -0,0 +1 @@
+export * from './metrics-table-row-count';

package/src/components/metrics-table-row-count/metrics-table-row-count.module.css

@@ -0,0 +1,5 @@
+.root {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 2px;
+}

package/src/components/metrics-table-row-count/metrics-table-row-count.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { FlexStack } from '../../layout';
+import { FlexStackProps } from '../../layout/flex-stack';
+
+export type MetricsTableRowCountProps = {
+  count: number;
+  total: number;
+} & FlexStackProps<'span'>;
+
+export const MetricsTableRowCount = (props: MetricsTableRowCountProps) => {
+  const { count, total, ...restProps } = props;
+
+  return (
+    <FlexStack inline gap="xxxsmall" alignItems="bottom" {...restProps}>
+      <span>{count}</span>
+      <span>/</span>
+      <span>{total}</span>
+    </FlexStack>
+  );
+};

package/src/layout/flex-stack/flex-stack.module.css

@@ -4,43 +4,73 @@
   gap: 0;
 }
 
-/** Space variation */
-.space--xxxsmall {
+/** Gap variation */
+.gap--xxxsmall {
   gap: var(--space-xxxsmall);
 }
 
-.space--xxsmall {
+.gap--xxsmall {
   gap: var(--space-xxsmall);
 }
 
-.space--xsmall {
+.gap--xsmall {
   gap: var(--space-xsmall);
 }
 
-.space--small {
+.gap--small {
   gap: var(--space-small);
 }
 
-.space--medium {
+.gap--medium {
   gap: var(--space-medium);
 }
 
-.space--large {
+.gap--large {
   gap: var(--space-large);
 }
 
-.space--xlarge {
+.gap--xlarge {
   gap: var(--space-xlarge);
 }
 
-.space--xxlarge {
+.gap--xxlarge {
   gap: var(--space-xxlarge);
 }
 
-.space--xxxlarge {
+.gap--xxxlarge {
   gap: var(--space-xxxlarge);
 }
 
+/** Direction variation */
+.direction--row {
+  flex-direction: row;
+}
+
+.direction--row-reverse {
+  flex-direction: row-reverse;
+}
+
+.direction--column {
+  flex-direction: column;
+}
+
+.direction--column-reverse {
+  flex-direction: column-reverse;
+}
+
+/** Wrap variation */
+.wrap--nowrap {
+  flex-wrap: nowrap;
+}
+
+.wrap--wrap {
+  flex-wrap: wrap;
+}
+
+.wrap--wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
 /** Align items variation */
 .root {
   align-items: stretch;
@@ -62,6 +92,31 @@
   align-items: baseline;
 }
 
+/** Justify content variation */
+.justify-content--flex-start {
+  justify-content: flex-start;
+}
+
+.justify-content--flex-end {
+  justify-content: flex-end;
+}
+
+.justify-content--center {
+  justify-content: center;
+}
+
+.justify-content--space-between {
+  justify-content: space-between;
+}
+
+.justify-content--space-around {
+  justify-content: space-around;
+}
+
+.justify-content--space-evenly {
+  justify-content: space-evenly;
+}
+
 /** Inline variation */
 .inline {
   display: inline-flex;

package/src/layout/flex-stack/flex-stack.stories.tsx

@@ -28,7 +28,7 @@ export const Default: Story = {
   },
 };
 
-export const withCustomWrapper: Story = {
+export const WithCustomWrapper: Story = {
   args: {
     as: 'main',
     className: 'wrapper',
@@ -41,9 +41,9 @@ export const withCustomWrapper: Story = {
   },
 };
 
-export const withLargeSpace: Story = {
+export const WithLargeGap: Story = {
   args: {
-    space: 'large',
+    gap: 'large',
     children: (
       <>
         <Box outline>Lorem ipsum 1</Box>
@@ -54,14 +54,14 @@ export const withLargeSpace: Story = {
   },
 };
 
-export const withNestedStack: Story = {
+export const WithNestedStack: Story = {
   args: {
-    space: 'large',
+    gap: 'large',
     children: (
       <>
         <Box outline>Lorem ipsum 1</Box>
         <Box outline>Lorem ipsum 2</Box>
-        <FlexStack space="small">
+        <FlexStack gap="small">
           <Box outline>Lorem ipsum 3.1</Box>
           <Box outline>Lorem ipsum 3.2</Box>
         </FlexStack>
@@ -70,16 +70,61 @@ export const withNestedStack: Story = {
   },
 };
 
-export const singleItem: Story = {
+export const SingleItem: Story = {
   args: {
     children: <Box outline>Lorem ipsum</Box>,
   },
 };
 
-export const withAlignItems: Story = {
+export const WithDirectionColumn: Story = {
+  args: {
+    direction: 'column',
+    gap: 'medium',
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        <Box outline>Lorem ipsum 3</Box>
+      </>
+    ),
+  },
+};
+
+export const WithDirectionRowReverse: Story = {
+  args: {
+    direction: 'row-reverse',
+    gap: 'medium',
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        <Box outline>Lorem ipsum 3</Box>
+      </>
+    ),
+  },
+};
+
+export const WithWrap: Story = {
+  args: {
+    wrap: 'wrap',
+    gap: 'medium',
+    style: { maxWidth: '320px' },
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        <Box outline>Lorem ipsum 3</Box>
+        <Box outline>Lorem ipsum 4</Box>
+        <Box outline>Lorem ipsum 5</Box>
+      </>
+    ),
+  },
+};
+
+export const WithAlignItems: Story = {
   args: {
     alignItems: 'center',
-    space: 'medium',
+    gap: 'medium',
     children: (
       <>
         <h1>Title</h1>
@@ -88,3 +133,17 @@ export const withAlignItems: Story = {
     ),
   },
 };
+
+export const WithJustifyContent: Story = {
+  args: {
+    justifyContent: 'space-between',
+    gap: 'medium',
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        <Box outline>Lorem ipsum 3</Box>
+      </>
+    ),
+  },
+};

package/src/layout/flex-stack/flex-stack.tsx

@@ -6,12 +6,25 @@ import css from './flex-stack.module.css';
 
 type SpaceValue = (typeof SPACES)[number];
 
-interface FlexStackProps<T extends React.ElementType> {
+export type FlexStackProps<T extends React.ElementType> = {
   as?: T;
+  gap?: SpaceValue;
+  /**
+   * @deprecated Use `gap` instead.
+   */
   space?: SpaceValue;
   inline?: boolean;
+  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
   alignItems?: 'top' | 'center' | 'bottom';
-}
+  justifyContent?:
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly';
+};
 
 export const FlexStack = <T extends React.ElementType = 'div'>(
   props: FlexStackProps<T> & Omit<React.ComponentProps<T>, keyof FlexStackProps<T>>,
@@ -19,16 +32,23 @@ export const FlexStack = <T extends React.ElementType = 'div'>(
   const {
     as: Component = 'div',
     className = '',
-    space = NO_SPACE,
+    gap,
+    space,
     inline = false,
+    direction = '',
+    wrap = '',
     alignItems = '',
+    justifyContent = '',
     ...restProps
   } = props;
 
   const rootClassName = cx(
     css.root,
-    css[`space--${space}`],
+    css[`gap--${gap ?? space ?? NO_SPACE}`],
+    css[`direction--${direction}`],
+    css[`wrap--${wrap}`],
     css[`align-items--${alignItems}`],
+    css[`justify-content--${justifyContent}`],
     inline && css.inline,
     className,
   );

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

@@ -49,13 +49,13 @@ a.root {
  * Kind variation
  */
 .primary {
-  color: var(--color-primary);
+  color: var(--color-accent);
 }
 
 .primary:hover,
 .primary:active,
 .primary:focus {
-  color: var(--color-primary-dark);
+  color: var(--color-accent-dark);
 }
 
 .secondary {
@@ -112,14 +112,14 @@ a.root {
  * Solid Kind variation
  */
 .solid {
-  background: var(--color-text-ultra-light);
+  background: var(--color-accent);
   color: var(--color-background);
 }
 
 .solid:hover,
 .solid:active,
 .solid:focus {
-  background: var(--color-text-light);
+  background: var(--color-accent-dark);
   color: var(--color-background);
 }
 
@@ -186,6 +186,13 @@ a.root {
 /**
  * Size variation
  */
+.xsmall {
+  --button-space: var(--space-xxxsmall);
+  --line-height: var(--space-xsmall);
+
+  font-size: var(--size-xsmall);
+}
+
 .small {
   --button-space: var(--space-xxsmall);
   --line-height: var(--space-small);
@@ -289,6 +296,10 @@ a.root {
 /**
  * Radius variation
  */
+.radius--xsmall {
+  border-radius: var(--radius-xsmall);
+}
+
 .radius--small {
   border-radius: var(--radius-small);
 }

package/src/ui/button/button.tsx

@@ -6,6 +6,7 @@ import { Icon as BaseIcon } from '../icon';
 import css from './button.module.css';
 
 export const BUTTON_SIZE = {
+  XSMALL: 'xsmall',
   SMALL: 'small',
   MEDIUM: 'medium',
   LARGE: 'large',

package/src/ui/filters/filters.module.css

@@ -72,8 +72,6 @@
   right: 2px;
   top: 50%;
   transform: translateY(-50%);
-  padding: var(--space-xxxsmall);
-  font-size: var(--size-xsmall);
   line-height: 1.1;
 }
 
@@ -102,8 +100,8 @@
 }
 
 .filterGroupSearchNotFound {
-  padding: var(--space-xxsmall) 0;
   text-align: center;
+  min-height: calc(10 * (var(--space-small) + 2 * var(--space-xxxsmall)));
   font-size: var(--size-small);
   color: var(--color-text-light);
 }