@bundle-stats/ui 4.13.0-beta.9 → 4.13.0-rc.0

package/src/components/metrics-treemap/metrics-treemap.utils.ts

@@ -0,0 +1,162 @@
+import {
+  DeltaType,
+  type MetricRunInfoBaseline,
+  type MetricRunInfo,
+  type ReportMetricRow,
+} from '@bundle-stats/utils';
+
+import type { TreeLeaf, TreeNodeChildren, Tree, TreeTotal } from './metrics-treemap.constants';
+
+const ROOT_LABEL = '(root)';
+
+/**
+ * Set node value to the largest run value to allow to
+ * display the impact of deleted/new entries
+ */
+function getReportMetricRowMaxValue(item: ReportMetricRow): number {
+  const values = item.runs.map((run) => run?.value || 0);
+  return Math.max(...values);
+}
+
+/**
+ * Generate treemap node list(flat)
+ */
+export function getTreemapNodes(items: Array<ReportMetricRow>): Tree {
+  const rootChildren: Array<TreeLeaf> = items.map((item) => ({
+    id: item.key,
+    label: item.label,
+    value: getReportMetricRowMaxValue(item),
+    item,
+  }));
+
+  return {
+    id: '',
+    label: ROOT_LABEL,
+    value: 0,
+    children: rootChildren,
+  };
+}
+
+function getItemValues(runs: ReportMetricRow['runs']): TreeTotal {
+  const runCount = runs?.length;
+  const current = runs[0]?.value || 0;
+
+  if (runCount < 2) {
+    return { current, baseline: 0 };
+  }
+
+  return {
+    current,
+    baseline: runs[runCount - 1]?.value || 0,
+  };
+}
+
+/**
+ * Recursively set treemap nodes
+ */
+function setTreeNode(
+  nodes: TreeNodeChildren,
+  slugs: Array<string>,
+  currentSlugId: number,
+  newNode: TreeLeaf,
+): TreeTotal {
+  const baseSlugs = slugs.slice(0, currentSlugId);
+  const [currentSlug, ...restSlug] = slugs.slice(currentSlugId);
+
+  // Add to current nodes if there are no child nodes
+  if (!currentSlug) {
+    nodes.push(newNode);
+    return getItemValues(newNode.item.runs);
+  }
+
+  const currentNodePath = [...baseSlugs, currentSlug].join('/');
+
+  // Check for existing parent in current nodes
+  let parentNode = nodes.find((treeNode) => treeNode.id === currentNodePath) as Tree;
+
+  // Create the new parentNode if missing
+  if (!parentNode) {
+    parentNode = {
+      id: currentNodePath,
+      label: currentSlug,
+      value: 0,
+      children: [],
+      total: {
+        current: 0,
+        baseline: 0,
+      },
+    };
+
+    nodes.push(parentNode);
+  }
+
+  // accumulate children values
+  const nodeValues = getItemValues(newNode?.item?.runs);
+
+  parentNode.total = {
+    current: (parentNode.total?.current || 0) + nodeValues.current,
+    baseline: (parentNode.total?.baseline || 0) + (nodeValues.baseline || 0),
+  };
+
+  // If there are no other slugs, the new node is as leaf and we add it to the parent
+  if (restSlug.length === 0) {
+    parentNode.children.push(newNode);
+    return getItemValues(newNode.item.runs);
+  }
+
+  return setTreeNode(parentNode.children, slugs, currentSlugId + 1, newNode);
+}
+
+/**
+ * Generate treemap nodes tree by directory
+ */
+export function getTreemapNodesGroupedByPath(items: Array<ReportMetricRow>): Tree {
+  const treeNodes: TreeNodeChildren = [];
+  const total = { current: 0, baseline: 0 };
+
+  items.forEach((item) => {
+    const slugs = item.key.split('/');
+    const baseSlugs = slugs.slice(0, -1);
+    const baseName = slugs.slice(-1)[0];
+
+    const treeNode = {
+      id: item.key,
+      label: baseName,
+      value: getReportMetricRowMaxValue(item),
+      item,
+    };
+
+    const childrenTotal = setTreeNode(treeNodes, baseSlugs, 0, treeNode);
+
+    total.current += childrenTotal.current || 0;
+    total.baseline += childrenTotal.baseline || 0;
+  });
+
+  return {
+    id: '',
+    label: ROOT_LABEL,
+    value: 0,
+    children: treeNodes,
+    total,
+  };
+}
+
+export function resolveGroupDeltaType(
+  metricRunInfo?: MetricRunInfo | MetricRunInfoBaseline,
+): DeltaType.NO_CHANGE | DeltaType.NEGATIVE | DeltaType.POSITIVE {
+  if (!metricRunInfo) {
+    return DeltaType.NO_CHANGE;
+  }
+
+  const deltaType = 'displayDelta' in metricRunInfo ? metricRunInfo.deltaType : undefined;
+
+  if (deltaType?.match(/NEGATIVE/)) {
+    return DeltaType.NEGATIVE;
+  }
+
+  if (deltaType?.match(/POSITIVE/)) {
+    return DeltaType.POSITIVE;
+  }
+
+  return DeltaType.NO_CHANGE;
+}

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

@@ -76,7 +76,7 @@ export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>)
           (currentRun, index) =>
             !isEmpty(currentRun?.chunkIds) && (
               <EntryInfo.Meta label="Chunks" className={css.chunks}>
-                Job #{index + 1}:
+                {labels[index]}:
                 {currentRun.chunkIds.map((chunkId) => {
                   const chunk = chunks?.find(({ id }) => id === chunkId);
 

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

@@ -31,6 +31,10 @@
   font-weight: bold;
 }
 
+.delta {
+  font-weight: normal;
+}
+
 .deltaValue + .deltaValue::before {
   margin-left: calc(var(--space-xxxsmall) / 2);
   margin-right: calc(var(--space-xxxsmall) / 2);
@@ -72,17 +76,13 @@
 
 /* Size variation */
 .small .currentMetric {
-  font-size: var(--size-large);
+  font-size: var(--size-medium);
 }
 
 .large .currentMetric {
-  font-size: var(--size-xxxlarge);
+  font-size: var(--size-xxlarge);
 }
 
 .large .baselineMetric {
-  font-size: var(--size-medium);
-}
-
-.large .delta {
-  margin-left: var(--space-xxxsmall);
+  font-size: var(--size-small);
 }

package/src/css/variables.css

@@ -29,20 +29,20 @@
   /*
    * Color scheme:
    * https://coolors.co/287acc-da444e-55b950-efcc1a-192339
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23efcc1a&mcgpalette3=%23353138&mcgpalette4=%23287acc&themename=mcgtheme
+   * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23efcc1a&mcgpalette3=%233e3c49&mcgpalette4=%23287acc&themename=bundle-stats
    * https://hihayk.github.io/scale/#4/5/50/90/-51/0/0/14/353138/53/49/56/white
    */
   --color-gray-25: #f9f9fa;
   --color-gray-50: #e8e8e9;
-  --color-gray-100: #c6c5c7;
-  --color-gray-200: #a2a0a4;
-  --color-gray-300: #7e7b80;
-  --color-gray-400: #59565c;
-  --color-gray-500: #353138;
-  --color-gray-600: #302b31;
-  --color-gray-700: #2a252a;
-  --color-gray-800: #231e22;
-  --color-gray-900: #1c181b;
+  --color-gray-100: #c5c5c8;
+  --color-gray-200: #9f9ea4;
+  --color-gray-300: #787780;
+  --color-gray-400: #5b5964;
+  --color-gray-500: #3e3c49;
+  --color-gray-600: #383642;
+  --color-gray-700: #302e39;
+  --color-gray-800: #282731;
+  --color-gray-900: #1b1a21;
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
@@ -192,9 +192,10 @@
   --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
   --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);
 
-  --radius-small: 4px;
-  --radius-medium: 5px;
-  --radius-large: 6px;
+  --radius-xsmall: 3px;
+  --radius-small: 5px;
+  --radius-medium: 7px;
+  --radius-large: 9px;
 
   --outline-hover: 0 0 0 3px var(--color-highlight);
 

package/src/hooks/metrics-display-type.ts

@@ -4,53 +4,103 @@ import { StringParam, useQueryParams } from 'use-query-params';
 
 import { MetricsDisplayType } from '../constants';
 
-const DEFAULT_DISPLAY_TYPE = MetricsDisplayType.TABLE;
-const PARAM_NAME = 'dt';
+const DEFAULT_VALUE = MetricsDisplayType.TABLE;
+const DEFAULT_GROUP_BY = '';
 
-type UseMetricsDisplayType = [MetricsDisplayType, (value: MetricsDisplayType) => void];
+// Display type query param name
+const QUERY_PARAM_VALUE = 'dt';
+// Display type group by param name
+const QUERY_PARAM_GROUP_BY = 'dtg';
 
-export const useMetricsDisplayType = (): UseMetricsDisplayType => {
-  const [{ [PARAM_NAME]: queryDisplayType }, setQueryParams] = useQueryParams({
-    [PARAM_NAME]: StringParam,
+type MetricsDisplayTypeData = {
+  value: MetricsDisplayType;
+  groupBy: string;
+};
+
+type UseMetricsDisplayType = [
+  { value: MetricsDisplayType; groupBy?: string },
+  (newDisplayType: MetricsDisplayType, newGroupBy?: string) => void,
+];
+
+export const useMetricsDisplayType = (
+  groups?: Partial<Record<MetricsDisplayType, Array<string>>>,
+): UseMetricsDisplayType => {
+  const [queryParams, setQueryParams] = useQueryParams({
+    [QUERY_PARAM_VALUE]: StringParam,
+    [QUERY_PARAM_GROUP_BY]: StringParam,
   });
-  const [storageDisplayType, setStoreageDisplayType] = useLocalStorage(
-    PARAM_NAME,
-    MetricsDisplayType.TABLE,
+
+  const { [QUERY_PARAM_VALUE]: queryParamValue, [QUERY_PARAM_GROUP_BY]: queryParamGroupBy } =
+    queryParams;
+  const [localStorage, setLocalStorage] = useLocalStorage<Partial<MetricsDisplayTypeData>>(
+    'storage',
+    {
+      value: DEFAULT_VALUE,
+      groupBy: DEFAULT_GROUP_BY,
+    },
   );
 
-  const displayType = useMemo(() => {
-    const value = queryDisplayType || storageDisplayType;
+  /**
+   * Normalize display type value
+   */
+  const value = useMemo(() => {
+    const resolvedValue = queryParamValue ?? localStorage?.value;
+
+    if (!resolvedValue) {
+      return DEFAULT_VALUE;
+    }
+
+    if (!Object.values(MetricsDisplayType).includes(resolvedValue as MetricsDisplayType)) {
+      return DEFAULT_VALUE;
+    }
 
-    if (!value) {
-      return DEFAULT_DISPLAY_TYPE;
+    return resolvedValue as MetricsDisplayType;
+  }, [queryParamValue, localStorage?.value]);
+
+  /**
+   * Normalize display type group by
+   */
+  const groupBy = useMemo(() => {
+    const resolvedValue = queryParamGroupBy ?? localStorage?.groupBy;
+
+    if (!resolvedValue) {
+      return DEFAULT_GROUP_BY;
     }
 
-    if (!Object.values(MetricsDisplayType).includes(value as MetricsDisplayType)) {
-      return DEFAULT_DISPLAY_TYPE;
+    if (!groups?.[value]?.includes(resolvedValue as MetricsDisplayType)) {
+      return DEFAULT_GROUP_BY;
     }
 
-    return value as MetricsDisplayType;
-  }, [queryDisplayType, storageDisplayType]);
+    return resolvedValue;
+  }, [queryParamGroupBy, localStorage?.groupBy]);
 
+  /**
+   * Synchronize query params when values are different
+   */
   useEffect(() => {
-    // Update query string display type when missing
-    if (queryDisplayType !== displayType) {
-      setQueryParams({ [PARAM_NAME]: displayType });
+    if (value !== queryParamValue || groupBy !== queryParamGroupBy) {
+      setQueryParams({ [QUERY_PARAM_VALUE]: value, [QUERY_PARAM_GROUP_BY]: groupBy });
     }
+  }, [value, queryParamValue, groupBy, queryParamGroupBy, setQueryParams]);
 
-    // Update storage state when query string is set and different
-    if (storageDisplayType !== displayType) {
-      setStoreageDisplayType(queryDisplayType as MetricsDisplayType);
+  /**
+   * Synchronize storage when values are different
+   */
+  useEffect(() => {
+    if (value !== localStorage?.value || groupBy !== localStorage.groupBy) {
+      setLocalStorage({ value, groupBy });
     }
-  }, [displayType, queryDisplayType, storageDisplayType, setQueryParams, setStoreageDisplayType]);
+  }, [value, groupBy, setLocalStorage, localStorage]);
 
   const setDisplayType = useCallback(
-    (value: MetricsDisplayType) => {
-      setStoreageDisplayType(value);
-      setQueryParams({ [PARAM_NAME]: value });
+    (newValue: MetricsDisplayType, newGroupBy: string = DEFAULT_GROUP_BY) => {
+      setQueryParams({
+        [QUERY_PARAM_VALUE]: newValue,
+        [QUERY_PARAM_GROUP_BY]: newGroupBy,
+      });
     },
-    [setStoreageDisplayType, setQueryParams],
+    [setQueryParams],
   );
 
-  return [displayType, setDisplayType];
+  return useMemo(() => [{ value, groupBy }, setDisplayType], [value, groupBy, setDisplayType]);
 };

package/src/hooks/search-params.js

@@ -38,6 +38,7 @@ const getSearchReducer =
         const newState = {
           filters: payload,
           search: state.search,
+          searchPattern: getSearchPattern(state.search),
         };
         setParentState(newState);
         return newState;

package/src/layout/box/box.module.css

@@ -8,11 +8,13 @@
 }
 
 .outline > :first-child {
-  border-radius: var(--radius-medium) var(--radius-medium) 0 0;
+  border-top-left-radius: var(--radius-medium);
+  border-top-right-radius: var(--radius-medium);
 }
 
 .outline > :last-child {
-  border-radius: 0 0 var(--radius-medium) var(--radius-medium);
+  border-bottom-left-radius: var(--radius-medium);
+  border-bottom-right-radius: var(--radius-medium);
 }
 
 .outlineHover {

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

@@ -1,48 +1,44 @@
 .root {
   display: flex;
-  align-items: stretch;
   justify-content: flex-start;
-}
-
-.root > .item:last-child {
-  margin-right: 0;
+  gap: 0;
 }
 
 /** Space variation */
-.space--xxxsmall > .item {
-  margin: 0 var(--space-xxxsmall) 0 0;
+.space--xxxsmall {
+  gap: var(--space-xxxsmall);
 }
 
-.space--xxsmall > .item {
-  margin: 0 var(--space-xxsmall) 0 0;
+.space--xxsmall {
+  gap: var(--space-xxsmall);
 }
 
-.space--xsmall > .item {
-  margin: 0 var(--space-xsmall) 0 0;
+.space--xsmall {
+  gap: var(--space-xsmall);
 }
 
-.space--small > .item {
-  margin: 0 var(--space-small) 0 0;
+.space--small {
+  gap: var(--space-small);
 }
 
-.space--medium > .item {
-  margin: 0 var(--space-medium) 0 0;
+.space--medium {
+  gap: var(--space-medium);
 }
 
-.space--large > .item {
-  margin: 0 var(--space-large) 0 0;
+.space--large {
+  gap: var(--space-large);
 }
 
-.space--xlarge > .item {
-  margin: 0 var(--space-xlarge) 0 0;
+.space--xlarge {
+  gap: var(--space-xlarge);
 }
 
-.space--xxlarge > .item {
-  margin: 0 var(--space-xxlarge) 0 0;
+.space--xxlarge {
+  gap: var(--space-xxlarge);
 }
 
-.space--xxxlarge > .item {
-  margin: 0 var(--space-xxxlarge) 0 0;
+.space--xxxlarge {
+  gap: var(--space-xxxlarge);
 }
 
 /** Align items variation */

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

@@ -2,7 +2,6 @@ import React from 'react';
 import cx from 'classnames';
 
 import { NO_SPACE, SPACES } from '../../tokens';
-import { getRenderChildWithClassName } from '../../utils';
 import css from './flex-stack.module.css';
 
 type SpaceValue = (typeof SPACES)[number];
@@ -22,22 +21,17 @@ export const FlexStack = <T extends React.ElementType = 'div'>(
     className = '',
     space = NO_SPACE,
     inline = false,
-    children = null,
     alignItems = '',
     ...restProps
   } = props;
 
   const rootClassName = cx(
-    className,
     css.root,
     css[`space--${space}`],
     css[`align-items--${alignItems}`],
     inline && css.inline,
+    className,
   );
 
-  return (
-    <Component {...restProps} className={rootClassName}>
-      {React.Children.map(children, getRenderChildWithClassName(css.item))}
-    </Component>
-  );
+  return <Component {...restProps} className={rootClassName} />;
 };

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

@@ -1,14 +1,21 @@
 .root {
+  /* use for vertical padding and to compute gap and horizontal spacing */
+  --button-space: 0px;
+  /* button border width */
+  --border-width: 0px;
+
   display: inline-flex;
   align-items: center;
-  gap: var(--space-xxsmall);
+  justify-content: center;
+  gap: calc(max(var(--button-space), var(--space-xxsmall)) * 0.66);
   appearance: none;
   padding: 0;
-  border: 0;
+  border: var(--border-width) solid transparent;
   background: none;
   transition: var(--transition-out);
   color: var(--color-text-ultra-light);
   font-family: var(--font-family);
+  white-space: nowrap;
 }
 
 a.root {
@@ -18,6 +25,7 @@ a.root {
 .root:hover,
 .root:active,
 .root:focus {
+  outline: none;
   color: var(--color-text-light);
   transition: var(--transition-in);
 }
@@ -98,7 +106,7 @@ a.root {
  * Solid Kind variation
  */
 .solid {
-  background: var(--color-text-light);
+  background: var(--color-text-ultra-light);
   color: var(--color-background);
 }
 
@@ -106,7 +114,7 @@ a.root {
 .solid:active,
 .solid:focus {
   box-shadow: var(--outline-hover);
-  background: var(--color-text);
+  background: var(--color-text-light);
   color: var(--color-background);
 }
 
@@ -170,11 +178,51 @@ a.root {
   background: var(--color-success-dark);
 }
 
+/**
+ * Size variation
+ */
+.small {
+  --button-space: var(--space-xxsmall);
+
+  font-size: var(--size-small);
+  line-height: var(--space-small);
+}
+
+.small .glyph {
+  width: var(--space-small);
+  height: var(--space-small);
+}
+
+.medium {
+  --button-space: var(--space-xsmall);
+
+  font-size: var(--size-medium);
+  line-height: calc(var(--space-small) + var(--space-xxxsmall));
+}
+
+.medium .glyph {
+  width: calc(var(--space-small) + var(--space-xxxsmall));
+  height: calc(var(--space-small) + var(--space-xxxsmall));
+}
+
+.large {
+  --button-space: var(--space-small);
+
+  font-size: var(--size-large);
+  line-height: var(--space-medium);
+}
+
+.large .glyph {
+  width: var(--space-medium);
+  height: var(--space-medium);
+}
+
 /**
  * Outline variation
  */
 .outline {
-  border: 1px solid var(--color-outline);
+  --border-width: 1px;
+  border-color: var(--color-outline);
 }
 
 .outline:hover,
@@ -244,58 +292,12 @@ a.root {
   border-color: var(--color-outline-success-dark);
 }
 
-/**
- * Size variation
- */
-.small {
-  font-size: var(--size-small);
-  gap: var(--space-xxxsmall);
-  line-height: var(--space-small);
-}
-
-.small .glyph {
-  width: calc(var(--space-xsmall) + 2px);
-  height: calc(var(--space-xsmall) + 2px);
-  margin: 1px; /* compensate to keep the same height when the text is not provided */
-}
-
-.medium {
-  font-size: var(--size-medium);
-  gap: var(--space-xxsmall);
-  line-height: var(--space-small);
-}
-
-.large {
-  font-size: var(--size-large);
-  gap: var(--space-xxsmall);
-  line-height: var(--space-small);
-}
 
 /**
  * Padding variation
  */
-.padding--small {
-  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);
+.padding {
+  padding: calc(var(--button-space) - var(--border-width));
 }
 
 /**