@bundle-stats/ui 4.13.0-beta.16 → 4.13.0-beta.18

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

@@ -13,25 +13,56 @@
   top: 0;
   width: 100%;
   height: 100%;
-  fill: var(--color-text);
-  font-family: var(--font-family);
   background: var(--color-background);
 }
 
-/** Tile overlay fill background transition */
-.root {
-  transition: var(--ui-transition-out);
-  transition-property: opacity;
+/**
+ * Tile group
+ */
+.tileGroup {
+  position: absolute;
+}
+
+.tileGroupTitle {
+  width: 100%;
+  padding: 2px var(--space-xxxsmall);
+  color: var(--color-text);
+  font-size: 10px;
+  line-height: 12px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/** Tile group size variation */
+.tileGroupSizeDefault {
+  transition: var(--ui-transition-in);
+  transition-property: left top width height;
+}
+
+/** Tile group nested variation */
+.nested .tileGroup {
+  background: rgba(200, 200, 200, 0.1);
+  outline: 1px solid rgba(255, 255, 255, 0.6);
+}
+
+/** Update background for current tileGroup and its children */
+.nested .tileGroup:has(> .tileGroupTitle:hover),
+.nested .tileGroup:has(> .tileGroupTitle:hover) .tileGroup,
+.nested .tileGroup:has(> .tile:hover),
+.nested .tileGroup:has(> .tile:hover) .tileGroup {
+  background: rgba(200, 200, 200, 0.2);
 }
 
 /** Leaf wrapper button */
 .tile {
   position: absolute;
   appearance: none;
+  outline: 1px solid rgba(255, 255, 255, 0.6);
   border: 0;
   border-radius: 0;
   padding: 0;
-  background: none;
+  background: var(--color-background);
   display: flex;
   align-items: center;
   font-family: var(--font-family-fixed);
@@ -54,16 +85,13 @@
   color: var(--color-highlight);
   transition: var(--ui-transition-out);
   transition-property: opacity;
-  opacity: 0.75;
-}
-
-.tile:hover {
-  transition: var(--ui-transition-in);
+  opacity: 0.8;
 }
 
 .tile:hover::before {
   transition: var(--ui-transition-in);
-  opacity: 0.5;
+  transition-property: opacity;
+  opacity: 0.6;
 }
 
 .tileContent {
@@ -84,7 +112,7 @@
   padding-left: var(--space-small);
 }
 
-.leadContentLabel {
+.tileContentLabel {
   flex: 0 1 auto;
   width: 100%;
   min-width: 0;
@@ -92,32 +120,37 @@
   overflow: hidden;
 }
 
-.leadContentValue {
+.tileContentValue {
   flex: 0 0 auto;
   max-width: calc(100% + var(--space-xxsmall));
   white-space: nowrap;
   overflow: hidden;
 }
 
-.leadContentMetric {
+.tileContentMetric {
   font-weight: bold;
 }
 
-.leadContentDelta {
+.tileContentDelta {
   margin-left: var(--space-xxxsmall);
 }
 
 /** Tile size variation */
-.tileSmall .tileContent {
+.tileSizeSmall .tileContent {
   padding: var(--space-xxxsmall) var(--space-xxsmall);
   gap: 0;
   font-size: var(--size-xsmall);
 }
 
-.tileSmall .leadContentLabel {
+.tileSizeSmall .tileContentLabel {
   margin-top: 0;
 }
 
+.tileSizeDefault {
+  transition: var(--ui-transition-in);
+  transition-property: left top width height;
+}
+
 /** Tile diff variation */
 .tile-NO_CHANGE {
   color: var(--color-text-light);
@@ -125,11 +158,11 @@
 
 .tile-NO_CHANGE::before {
   color: var(--color-gray-50);
-  opacity: 0.4;
+  opacity: 0.5;
 }
 
 .tile-NO_CHANGE:hover::before {
-  opacity: 0.2;
+  opacity: 0.3;
 }
 
 .tile-HIGH_NEGATIVE::before {
@@ -193,17 +226,16 @@
   pointer-events: none;
 }
 
-/* prevent tooltip portal wrapper from capturing events */
-div[role="presentation"]:has(.tooltip) {
-  pointer-events: none;
-}
-
-
 .tileTooltipArrow svg {
   display: block;
   fill: var(--color-background) !important;
 }
 
 .tileTooltipContentTitle {
-  font-size: var(--size-medium);
+  font-size: var(--size-small);
+}
+
+/* prevent tooltip portal wrapper from capturing events */
+div[role="presentation"]:has(.tooltip) {
+  pointer-events: none;
 }

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

@@ -2,22 +2,56 @@ import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
+import { createJobs } from '@bundle-stats/utils';
+import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 
-// eslint-disable-next-line import/no-relative-packages
+/* eslint-disable import/no-relative-packages */
+import baselineData from '../../../../../fixtures/webpack-stats.baseline.json';
+import currentData from '../../../../../fixtures/webpack-stats.current.json';
 import moduleItemsFixture from '../../../../../fixtures/module-items.json';
-import { MetricsTreemap } from '.';
+/* eslint-enable import/no-relative-packages */
+import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '.';
 
-export default {
+const meta: Meta<typeof MetricsTreemap> = {
   title: 'Components/MetricsTreemap',
   component: MetricsTreemap,
-} as Meta;
-
-export const Default: StoryObj = {
-  render: (props: React.ComponentProps<typeof MetricsTreemap>) => (
-    <MetricsTreemap style={{ maxWidth: 'var(--max-width)' }} {...props} />
-  ),
   args: {
-    items: moduleItemsFixture,
     onItemClick: action('CLICK'),
   },
 };
+
+type Story = StoryObj<typeof meta>;
+
+export default meta;
+
+const MULTIPLE_JOBS = createJobs([{ webpack: currentData }, { webpack: baselineData }]);
+
+export const Assets: Story = {
+  render: (props) => <MetricsTreemap style={{ maxWidth: 'var(--max-width)' }} {...props} />,
+  args: {
+    treeNodes: getTreemapNodes(webpack.compareBySection.assets(MULTIPLE_JOBS)),
+  },
+};
+
+export const AssetsNested: Story = {
+  render: (props) => <MetricsTreemap style={{ maxWidth: 'var(--max-width)' }} {...props} />,
+  args: {
+    treeNodes: getTreemapNodesGroupedByPath(webpack.compareBySection.assets(MULTIPLE_JOBS)),
+    nested: true,
+  },
+};
+
+export const Modules: Story = {
+  render: (props) => <MetricsTreemap style={{ maxWidth: 'var(--max-width)' }} {...props} />,
+  args: {
+    treeNodes: getTreemapNodes(moduleItemsFixture),
+  },
+};
+
+export const ModulesNested: Story = {
+  render: (props) => <MetricsTreemap style={{ maxWidth: 'var(--max-width)' }} {...props} />,
+  args: {
+    treeNodes: getTreemapNodesGroupedByPath(moduleItemsFixture),
+    nested: true,
+  },
+};