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

package/src/components/metrics-treemap/tile-group/tile-group.stories.tsx

@@ -0,0 +1,163 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from 'storybook/actions';
+import { HierarchyRectangularNode, hierarchy, treemap, treemapSquarify } from 'd3';
+import type { ReportMetricRow } from '@bundle-stats/utils';
+
+import { getWrapperDecorator } from '../../../stories';
+import {
+  type Tree,
+  type TreeNode,
+  SQUARIFY_RATIO,
+  PADDING_OUTER,
+  PADDING_INNER,
+  NESTED_PADDING,
+  NESTED_PADDING_TOP,
+  NESTED_PADDING_LEFT,
+} from '../metrics-treemap.constants';
+import {
+  CURRENT_VALUE_BY_DELTA_TYPE as VALUES,
+  createReportMetricRow,
+} from '../metrics-treemap.stories.utils';
+import { getTreemapNodes, getTreemapNodesGroupedByPath } from '../metrics-treemap.utils';
+import { TileGroup } from '.';
+
+const WIDTH = 480;
+const HEIGHT = 270;
+
+const ITEMS = [
+  createReportMetricRow('src/components/button/button.tsx', VALUES.NEGATIVE),
+  createReportMetricRow('src/components/button/button.css', VALUES.NO_CHANGE),
+  createReportMetricRow('src/components/input/input.tsx', VALUES.HIGH_NEGATIVE),
+  createReportMetricRow('src/components/input/input.css', VALUES.LOW_POSITIVE),
+  createReportMetricRow('src/utils/format.ts', VALUES.POSITIVE),
+  createReportMetricRow('src/assets/logo.svg', VALUES.NO_CHANGE),
+  createReportMetricRow('src/index.ts', VALUES.NO_CHANGE),
+];
+
+const ITEMS_NO_CHANGE = [
+  createReportMetricRow('src/components/button.tsx', VALUES.NO_CHANGE),
+  createReportMetricRow('src/components/input.tsx', VALUES.NO_CHANGE),
+  createReportMetricRow('src/index.ts', VALUES.NO_CHANGE),
+];
+
+const ITEMS_POSITIVE = [
+  createReportMetricRow('src/components/button.tsx', VALUES.POSITIVE),
+  createReportMetricRow('src/components/input.tsx', VALUES.HIGH_POSITIVE),
+  createReportMetricRow('src/index.ts', VALUES.NO_CHANGE),
+];
+
+/**
+ * Resolve the root tile group props - same layout as `MetricsTreemap`
+ */
+function getTileGroupArgs(
+  treeNodes: Tree,
+  options: { nested?: boolean; width?: number; height?: number } = {},
+) {
+  const { nested = false, width = WIDTH, height = HEIGHT } = options;
+
+  const customHierarchy = hierarchy<Tree>(treeNodes);
+  customHierarchy.sum((node) => node.value);
+  // @ts-expect-error
+  customHierarchy.sort((a, b) => b.value - a.value);
+
+  let createTreemapLayout = treemap()
+    .size([width, height])
+    .tile(treemapSquarify.ratio(SQUARIFY_RATIO))
+    .paddingOuter(PADDING_OUTER);
+
+  if (nested) {
+    createTreemapLayout = createTreemapLayout
+      .padding(NESTED_PADDING)
+      .paddingLeft(NESTED_PADDING_LEFT)
+      .paddingTop(NESTED_PADDING_TOP);
+  } else {
+    createTreemapLayout = createTreemapLayout.paddingInner(PADDING_INNER);
+  }
+
+  // @ts-expect-error
+  const rootNode = createTreemapLayout(customHierarchy) as HierarchyRectangularNode<TreeNode>;
+  const rootData = rootNode.data as Tree;
+
+  return {
+    title: nested ? rootData.label : undefined,
+    total: rootData.total,
+    id: rootData.id,
+    childNodes: rootNode.children,
+    nested,
+    left: rootNode.x0,
+    top: rootNode.y0,
+    absoluteLeft: rootNode.x0,
+    absoluteTop: rootNode.y0,
+    width: rootNode.x1 - rootNode.x0,
+    height: rootNode.y1 - rootNode.y0,
+  };
+}
+
+function getNestedTileGroupArgs(
+  items: Array<ReportMetricRow>,
+  options: { width?: number; height?: number } = {},
+) {
+  return getTileGroupArgs(getTreemapNodesGroupedByPath(items), { ...options, nested: true });
+}
+
+const meta = {
+  title: 'Components/MetricsTreemap/TileGroup',
+  component: TileGroup,
+  decorators: [
+    // Tile groups are absolutely positioned inside the treemap canvas
+    (Story, { args }) => (
+      <div
+        style={{
+          position: 'relative',
+          width: args.width,
+          height: args.height,
+          background: 'var(--color-background)',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+    getWrapperDecorator(),
+  ],
+  args: {
+    ...getTileGroupArgs(getTreemapNodes(ITEMS)),
+    onItemClick: action('ITEM_CLICK'),
+    onGroupClick: action('GROUP_CLICK'),
+  },
+} satisfies Meta<typeof TileGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/**
+ * Nested
+ */
+export const Nested: Story = {
+  args: getNestedTileGroupArgs(ITEMS),
+};
+
+/**
+ * Delta type
+ */
+export const NestedNoChange: Story = {
+  args: getNestedTileGroupArgs(ITEMS_NO_CHANGE),
+};
+
+export const NestedPositive: Story = {
+  args: getNestedTileGroupArgs(ITEMS_POSITIVE),
+};
+
+/**
+ * Size
+ */
+export const SizeSmall: Story = {
+  args: getNestedTileGroupArgs(ITEMS, { height: 28 }),
+};
+
+export const SizeMinimal: Story = {
+  args: getNestedTileGroupArgs(ITEMS, { height: 20 }),
+};

package/src/components/metrics-treemap/tile-group/tile-group.tsx

@@ -0,0 +1,177 @@
+import React, { type ComponentProps, type MouseEventHandler, useCallback, useMemo } from 'react';
+import cx from 'classnames';
+import type { HierarchyRectangularNode } from 'd3';
+
+import type { TreeLeaf, TreeNode, Tree } from '../metrics-treemap.constants';
+import * as I18N from '../metrics-treemap.i18n';
+import { getGroupRunInfo, resolveTileGroupSizeDisplay } from '../metrics-treemap.utils';
+import { type TileProps, Tile } from '../tile';
+import { TileGroupTitle } from '../tile-group-title';
+import css from './tile-group.module.css';
+
+export interface TileGroupProps extends ComponentProps<'div'> {
+  /**
+   * Node title
+   */
+  title?: string;
+  /**
+   * Group sum
+   */
+  total?: Tree['total'];
+  /**
+   * Node id
+   */
+  id: string;
+  /**
+   * Node children
+   */
+  childNodes: HierarchyRectangularNode<TreeNode>['children'];
+  /**
+   * Nested treemap variation
+   */
+  nested?: boolean;
+  /**
+   * On click tile handler
+   */
+  onItemClick: TileProps['onClick'];
+  /**
+   * On click group title
+   */
+  onGroupClick?: (groupId: string) => void;
+
+  /**
+   * Node rectangle dimensions
+   */
+  width?: number;
+  height?: number;
+
+  /**
+   * Node rectangle relative coordinates (relative to parent)
+   */
+  left: number;
+  top: number;
+
+  /**
+   * Node rectangle absolute coordinates (relative to canvas)
+   */
+  absoluteLeft: number;
+  absoluteTop: number;
+}
+
+export const TileGroup = (props: TileGroupProps) => {
+  const {
+    title = '',
+    total,
+    id,
+    childNodes,
+    nested = false,
+    onItemClick,
+    onGroupClick,
+    left,
+    top,
+    width,
+    height,
+    absoluteLeft,
+    absoluteTop,
+  } = props;
+
+  const onClick: MouseEventHandler<HTMLDivElement> = useCallback(
+    (event) => {
+      onGroupClick?.(id);
+      event.stopPropagation();
+    },
+    [onGroupClick, id],
+  );
+
+  const displaySize = useMemo(
+    () => resolveTileGroupSizeDisplay(width || 0, height || 0),
+    [width, height],
+  );
+
+  // Prepare data
+  const groupRunInfo = useMemo(() => (total ? getGroupRunInfo(total) : undefined), [total]);
+
+  const rootClassName = cx(
+    css.root,
+    css[`tileGroup--${groupRunInfo?.deltaType}`],
+    css[`tileGroup--${displaySize}`],
+    nested && css.nested,
+  );
+
+  /* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus */
+  if (title && displaySize === 'minimal') {
+    return (
+      <div
+        onClick={onClick}
+        role="button"
+        aria-label={I18N.TILE_GROUP_LABEL}
+        className={rootClassName}
+        style={{ left, top, width, height }}
+      >
+        <TileGroupTitle id={id} fill />
+      </div>
+    );
+  }
+
+  if (title && displaySize === 'small') {
+    return (
+      <div
+        onClick={onClick}
+        role="button"
+        aria-label={I18N.TILE_GROUP_LABEL}
+        style={{ left, top, width, height }}
+        className={rootClassName}
+      >
+        <TileGroupTitle id={id} title={title} fill />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      onClick={onClick}
+      role="button"
+      aria-label={I18N.TILE_GROUP_LABEL}
+      className={cx(rootClassName, css.tileGroupSizeDefault)}
+      style={{ left, top, width, height }}
+    >
+      <TileGroupTitle id={id} title={title} runInfo={groupRunInfo?.runInfo} />
+      {childNodes?.map((childNode) => {
+        if ('children' in childNode) {
+          const groupData = childNode.data as Tree;
+
+          return (
+            <TileGroup
+              title={groupData.label}
+              total={groupData.total}
+              id={groupData.id}
+              childNodes={childNode.children}
+              nested={nested}
+              left={childNode.x0 - absoluteLeft}
+              top={childNode.y0 - absoluteTop}
+              absoluteLeft={childNode.x0}
+              absoluteTop={childNode.y0}
+              width={childNode.x1 - childNode.x0}
+              height={childNode.y1 - childNode.y0}
+              onItemClick={onItemClick}
+              onGroupClick={onGroupClick}
+              key={groupData.id}
+            />
+          );
+        }
+
+        return (
+          <Tile
+            data={childNode.data as TreeLeaf}
+            left={childNode.x0 - absoluteLeft}
+            top={childNode.y0 - absoluteTop}
+            width={childNode.x1 - childNode.x0}
+            height={childNode.y1 - childNode.y0}
+            onClick={onItemClick}
+            key={childNode.data.id}
+          />
+        );
+      })}
+    </div>
+  );
+};

package/src/components/metrics-treemap/tile-group-title/index.ts

@@ -0,0 +1 @@
+export * from './tile-group-title';

package/src/components/metrics-treemap/tile-group-title/tile-group-title.module.css

@@ -0,0 +1,48 @@
+.root {
+  width: 100%;
+  cursor: default;
+}
+
+.tileGroupTitleContent {
+  width: 100%;
+  padding: var(--space-xxxsmall) calc(var(--space-xxxsmall) / 2) var(--space-xxxsmall) var(--space-xxsmall);
+  border-radius: var(--radius-xsmall);
+  display: flex;
+  align-items: center;
+  color: var(--color-text);
+  font-family: var(--font-family-fixed);
+  font-size: 10px;
+  line-height: var(--space-small);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.tileGroupTitleText,
+.tileGroupTitleTotal {
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+.tileGroupTitleTotal {
+  margin-left: var(--space-xxsmall);
+  color: var(--color-text-light);
+}
+
+.root {
+  transition: var(--transition-out);
+}
+
+.root:hover .tileGroupTitleText {
+  text-decoration: underline;
+  transition: var(--transition-in);
+}
+
+/** Fill variation */
+.fill {
+  height: 100%;
+}
+
+.fill .tileGroupTitleContent {
+  min-height: 100%;
+}

package/src/components/metrics-treemap/tile-group-title/tile-group-title.stories.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { type MetricRunInfo, METRIC_TYPE_CONFIGS, getMetricRunInfo } from '@bundle-stats/utils';
+
+import { getWrapperDecorator } from '../../../stories';
+import { BASELINE_VALUE, CURRENT_VALUE_BY_DELTA_TYPE } from '../metrics-treemap.stories.utils';
+import { TileGroupTitle } from '.';
+
+const meta = {
+  title: 'Components/MetricsTreemap/TileGroupTitle',
+  component: TileGroupTitle,
+  decorators: [
+    // Outline the group area to visualize the title size
+    (Story) => (
+      <div style={{ width: 320, height: 48, outline: '1px dashed var(--color-outline)' }}>
+        <Story />
+      </div>
+    ),
+    getWrapperDecorator(),
+  ],
+  args: {
+    id: 'src/components',
+    title: 'components',
+    runInfo: getMetricRunInfo(
+      METRIC_TYPE_CONFIGS.METRIC_TYPE_FILE_SIZE,
+      CURRENT_VALUE_BY_DELTA_TYPE.NEGATIVE,
+      BASELINE_VALUE,
+    ) as MetricRunInfo,
+    fill: false,
+  },
+  argTypes: {
+    fill: {
+      control: { type: 'boolean' },
+    },
+  },
+} satisfies Meta<typeof TileGroupTitle>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/**
+ * Run info
+ */
+export const NoBaseline: Story = {
+  args: {
+    runInfo: getMetricRunInfo(
+      METRIC_TYPE_CONFIGS.METRIC_TYPE_FILE_SIZE,
+      CURRENT_VALUE_BY_DELTA_TYPE.NEGATIVE,
+    ) as MetricRunInfo,
+  },
+};
+
+export const NoRunInfo: Story = {
+  args: {
+    runInfo: undefined,
+  },
+};
+
+/**
+ * Title
+ */
+export const NoTitle: Story = {
+  args: {
+    title: undefined,
+    runInfo: undefined,
+  },
+};
+
+/**
+ * Fill
+ */
+export const Fill: Story = {
+  args: {
+    fill: true,
+    runInfo: undefined,
+  },
+};
+
+export const FillNoTitle: Story = {
+  args: {
+    fill: true,
+    title: undefined,
+    runInfo: undefined,
+  },
+};

package/src/components/metrics-treemap/tile-group-title/tile-group-title.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import cx from 'classnames';
+import type { MetricRunInfo } from '@bundle-stats/utils';
+
+import css from './tile-group-title.module.css';
+
+interface TileGroupTitleContentProps {
+  title?: string;
+  runInfo?: MetricRunInfo;
+}
+
+const TileGroupTitleContent = (props: TileGroupTitleContentProps) => {
+  const { title, runInfo } = props;
+
+  return (
+    <div className={css.tileGroupTitleContent}>
+      {title && <span className={css.tileGroupTitleText}>{title}</span>}
+      {runInfo && (
+        <span className={css.tileGroupTitleTotal}>
+          {runInfo.displayValue}
+          {'displayDelta' in runInfo && `(${runInfo.displayDeltaPercentage})`}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export type TileGroupTitleProps = TileGroupTitleContentProps & {
+  /**
+   * Node id - used to resolve the tooltip content on hover
+   */
+  id: string;
+  /**
+   * Fill the group height - when the title is missing or the group does not render any children
+   */
+  fill?: boolean;
+};
+
+export const TileGroupTitle = (props: TileGroupTitleProps) => {
+  const { id, fill = false, ...restProps } = props;
+
+  return (
+    <div
+      className={cx(css.root, fill && css.fill)}
+      data-treemap-id={id}
+      data-treemap-tile-group-title
+    >
+      <TileGroupTitleContent {...restProps} />
+    </div>
+  );
+};

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

@@ -1,5 +1,5 @@
 .title {
-  color: var(--color-text-ultra-light);
+  color: var(--color-text-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
   text-transform: uppercase;
@@ -16,14 +16,11 @@
 
 .titleIcon {
   flex: 0 0 var(--space-small);
+  /* compensate for the button icon spacing */
   margin-top: -3px !important;
   margin-bottom: -3px !important;
 }
 
-.title + .info {
-  margin-top: var(--space-xxsmall);
-}
-
 .currentMetric {
   color: var(--color-heading);
   white-space: nowrap;
@@ -32,33 +29,32 @@
   height: var(--line-height-number);
 }
 
-.delta {
-  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-ultra-light);
   font-size: var(--size-small);
+  font-family: var(--font-family-fixed);
+  font-weight: normal;
   line-height: var(--line-height-number);
   height: var(--line-height-number);
 }
 
-/* Loading state */
-.loading.currentMetric {
-  min-width: 0;
-  max-width: 8em;
+.baselineMetricValue {
+  color: var(--color-text-light);
+  line-height: inherit;
 }
 
-.loading.baselineMetric {
-  min-width: 0;
-  max-width: 8em;
+
+.delta {
+  font-weight: bold;
+  font-size: var(--size-small);
+  line-height: var(--line-height-number);
+}
+
+.deltaValue + .deltaValue::before {
+  margin-left: var(--space-xxxsmall);
+  margin-right: var(--space-xxxsmall);
+  content: '/';
+  color: var(--color-outline-dark);
 }
 
 /* Hover state */
@@ -82,15 +78,28 @@
     visibility 0s;
 }
 
-/* Size variation */
-.currentMetric {
-  font-size: var(--size-xxlarge);
+/* Loading state */
+.loading .currentMetric {
+  max-width: 6em;
 }
 
+.loading .baselineMetric {
+  max-width: 6em;
+}
+
+.loading .delta {
+  max-width: 12em;
+}
+
+/* Size variation */
 .small .currentMetric {
   font-size: var(--size-medium);
 }
 
+.currentMetric {
+  font-size: var(--size-xxlarge);
+}
+
 .large .currentMetric {
   font-size: var(--size-xxxlarge);
 }

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

@@ -8,12 +8,24 @@ const meta = {
   args: {
     id: 'webpack.totalSizeByTypeALL',
     size: 'medium',
+    loading: false,
+    showBaseline: true,
+    showDelta: true,
   },
   argTypes: {
     size: {
       options: ['small', 'medium', 'large', 'xlarge'],
       control: { type: 'select' },
     },
+    loading: {
+      control: { type: 'boolean' },
+    },
+    showBaseline: {
+      control: { type: 'boolean' },
+    },
+    showDelta: {
+      control: { type: 'boolean' },
+    },
   },
 } satisfies Meta<typeof RunInfo>;
 
@@ -24,20 +36,14 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     title: 'Bundle Size',
-    current: '120KiB',
-    baseline: '100KiB',
-    delta: '+20%',
+    current: '678.91MiB',
+    baseline: '123.45MiB',
+    delta: '+555.46MiB',
+    deltaPercentage: '+549.94%',
     deltaType: 'HIGH_NEGATIVE',
   },
 };
 
-export const DeltaPercentage: Story = {
-  args: {
-    ...Default.args,
-    deltaPercentage: '+20KiB',
-  },
-};
-
 export const SizeLarge: Story = {
   args: {
     ...Default.args,