@bundle-stats/ui 4.23.0-beta.1 → 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/sort-button/sort-button.module.css

@@ -18,7 +18,6 @@
   overflow: hidden;
   right: -2px; /* compensate for the button padding */
   color: var(--color-text-ultra-light);
-  transition: var(--transition-out);
 }
 
 .directionIcon {
@@ -36,7 +35,6 @@
 .direction:active,
 .direction:focus {
   color: var(--color-text-dark);
-  transition: var(--transition-in);
 }
 
 .directionAsc {

package/src/components/summary/summary.module.css

@@ -5,10 +5,6 @@
 
 .row {
   width: 100%;
-  display: flex;
-  align-items: stretch;
-  flex-wrap: wrap;
-  gap: var(--space-small);
 }
 
 .rowGroup {
@@ -26,13 +22,6 @@
   margin-top: var(--summary-gap);
 }
 
-.items {
-  display: flex;
-  align-items: stretch;
-  flex-wrap: wrap;
-  gap: var(--space-medium);
-}
-
 .item {
   flex: 1 1 10%; /* force equal sizes */
   min-width: 8em;
@@ -42,7 +31,7 @@
 }
 
 .item::before {
-  content: "";
+  content: '';
   border-radius: var(--radius-medium);
   background: var(--color-highlight);
   display: block;
@@ -56,13 +45,15 @@
   transition: var(--transition-out);
 }
 
+.item:focus::before,
+.item:active::before,
 .item:hover::before {
   opacity: 1;
   transition: var(--transition-in);
 }
 
 .item + .item::after {
-  content: "";
+  content: '';
   border-radius: var(--radius-medium);
   background: var(--color-outline);
   display: block;
@@ -75,7 +66,12 @@
   transition: var(--transition-out);
 }
 
-.item:hover::after,  .item:hover + .item::after {
+.item:focus::after,
+.item:active::after,
+.item:hover::after,
+.item:focus + .item::after,
+.item:active + .item::after,
+.item:hover + .item::after {
   opacity: 0;
   transition: var(--transition-in);
 }

package/src/components/summary/summary.tsx

@@ -10,6 +10,7 @@ import {
   METRICS_WEBPACK_GENERAL,
 } from '../../constants';
 import { Box } from '../../layout/box';
+import { FlexStack } from '../../layout/flex-stack';
 import { ComponentLink } from '../component-link';
 import { MetricRunInfo, MetricRunInfoProps } from '../metric-run-info';
 import css from './summary.module.css';
@@ -77,9 +78,9 @@ export const Summary = ({
   summaryItemLink = ComponentLink,
 }: SummaryProps & React.ComponentProps<'div'>) => (
   <Box className={cx(css.root, className)}>
-    <div className={css.row}>
+    <FlexStack wrap="wrap" gap="small" className={css.row}>
       <Box outline padding="small" className={css.rowGroup}>
-        <div className={css.items}>
+        <FlexStack wrap="wrap" gap="medium">
           {METRICS_WEBPACK_GENERAL.map((metricId) => (
             <SummaryItem
               key={metricId}
@@ -93,15 +94,15 @@ export const Summary = ({
               showBaseline={showSummaryItemBaseline}
             />
           ))}
-        </div>
+        </FlexStack>
       </Box>
-    </div>
-    <div className={css.row}>
+    </FlexStack>
+    <FlexStack wrap="wrap" gap="small" 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}>
+            <FlexStack wrap="wrap" gap="medium">
               {metricGroup.metrics.map((metricId) => (
                 <SummaryItem
                   key={metricId}
@@ -115,10 +116,10 @@ export const Summary = ({
                   showBaseline={showSummaryItemBaseline}
                 />
               ))}
-            </div>
+            </FlexStack>
           </Box>
         </Stack>
       ))}
-    </div>
+    </FlexStack>
   </Box>
 );

package/src/css/default.css

@@ -15,6 +15,7 @@ html {
 
 body {
   background: var(--color-background);
+  accent-color: var(--color-accent);
   color: var(--color-text);
   line-height: var(--line-height);
 }
@@ -59,12 +60,14 @@ code {
 }
 
 a {
-  color: var(--color-primary);
+  color: var(--color-accent);
+  transition: var(--transition-out);
 }
 
-a:hover,
+a:focus,
 a:active,
-a:focus {
-  color: var(--color-primary-dark);
+a:hover {
+  color: var(--color-accent-dark);
   outline: none;
+  transition: var(--transition-in);
 }