@bundle-stats/ui 4.2.3-beta.0 → 4.2.3-beta.1

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

@@ -0,0 +1,325 @@
+.root {
+  position: relative;
+  aspect-ratio: 16/9;
+  background: var(--color-background);
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+  overflow: hidden;
+}
+
+.canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--color-background);
+}
+
+/**
+ * Tile group
+ */
+.tileGroup {
+  position: absolute;
+}
+
+.tileGroupTitle {
+  width: 100%;
+  cursor: default;
+}
+
+.tileGroupTitleContent {
+  width: 100%;
+  padding: var(--space-xxxsmall) 2px var(--space-xxxsmall) var(--space-xxsmall);
+  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);
+}
+
+.tileGroupTitle {
+  transition: var(--transition-out);
+}
+
+.tileGroupTitle:hover .tileGroupTitleText {
+  text-decoration: underline;
+  transition: var(--transition-in);
+}
+
+/** Tile group size variation */
+.tileGroup {
+  transition: var(--transition-out);
+  transition-property: background-color, outline;
+}
+
+.tileGroup--minimal .tileGroupTitle,
+.tileGroup--small .tileGroupTitle {
+  height: 100%; /* full height when title is missing or we do not render any children */
+}
+
+.tileGroup--minimal .tileGroupTitleContent,
+.tileGroup--small .tileGroupTitleContent {
+  min-height: 100%;
+}
+
+/** Tile group nested variation */
+.nested .tileGroup {
+  background-color: rgba(27, 26, 33, 0.03);
+  outline: 1px solid rgba(255, 255, 255, 0.8);
+}
+
+.nested .tileGroup:has(> .tileGroupTitle:hover),
+.nested .tileGroup:has(> .tile:hover) {
+  background-color: rgba(27, 26, 33, 0.06);
+  outline: 1px solid rgba(255, 255, 255, 1);
+  transition: var(--transition-in);
+  transition-property: background-color, outline;
+}
+
+.nested .tileGroup--NEGATIVE {
+  background-color: rgba(194, 31, 37, 0.04);
+}
+
+.nested .tileGroup--NEGATIVE:has(> .tileGroupTitle:hover),
+.nested .tileGroup--NEGATIVE:has(> .tile:hover) {
+  background-color: rgba(194, 31, 37, 0.1);
+}
+
+.nested .tileGroup--POSITIVE {
+  background-color: rgba(42, 147, 39, 0.04);
+}
+
+.nested .tileGroup--POSITIVE:has(> .tileGroupTitle:hover),
+.nested .tileGroup--POSITIVE:has(> .tile:hover) {
+  background-color: rgba(42, 147, 39, 0.1);
+}
+
+/* reset bacground color when having a not changed group */
+.nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE,
+.nested .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE {
+  background-color: var(--color-background);
+  background-image: linear-gradient(rgba(27, 26, 33, 0.1), rgba(27, 26, 33, 0.1));
+}
+
+.nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE:has(> .tileGroupTitle:hover),
+.nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE:has(> .tile:hover),
+.nested .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> .tileGroupTitle:hover),
+.nested .tileGroup--NEGATIVE > .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> .tile:hover) {
+  background-color: var(--color-background);
+  background-image: linear-gradient(rgba(27, 26, 33, 0.1), rgba(27, 26, 33, 0.1));
+}
+
+/** Leaf wrapper button */
+.tile {
+  position: absolute;
+  appearance: none;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  background: var(--color-background);
+  display: flex;
+  align-items: center;
+  font-family: var(--font-family-fixed);
+  font-size: var(--size-small);
+  line-height: var(--line-height-heading);
+  text-align: left;
+  transition: var(--transition-out);
+  transition-property: opacity, background-color;
+}
+
+.tile::before {
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: currentColor;
+}
+
+.tileContent {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  padding: var(--space-xxsmall) var(--space-xxsmall);
+  gap: var(--space-xxxsmall);
+  line-height: var(--line-height-heading);
+}
+
+/** Align label to other elements on the first column cells */
+.tileFirstCol .tileContent {
+  padding-left: var(--space-small);
+}
+
+.tileContentLabel {
+  flex: 0 1 auto;
+  width: 100%;
+  min-width: 0;
+  line-height: var(--line-height-heading);
+  max-height: calc(2em * var(--line-height-heading)); /* render max 2 rows */
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-all;
+  word-break: break-word;
+  hyphens: auto;
+  white-space: normal;
+  overflow: hidden;
+}
+
+.tileContentValue {
+  flex: 0 0 auto;
+  max-width: calc(100% + var(--space-xxsmall));
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.tileContentMetric {
+  font-weight: bold;
+}
+
+.tileContentDelta {
+  margin-left: var(--space-xxxsmall);
+}
+
+/** Tile size variation */
+.tileSizeSmall .tileContent {
+  padding: var(--space-xxxsmall);
+  font-size: 10px;
+}
+
+.tileSizeSmall .tileContentLabel {
+  margin-top: 0;
+}
+
+/** Tile diff variation */
+.tile {
+  outline: 1px solid rgba(255, 255, 255, 1);
+  color: var(--color-text);
+}
+
+.tile::before {
+  color: var(--color-highlight);
+  transition: var(--transition-out);
+  transition-property: opacity;
+  opacity: 0.6;
+}
+
+.tile:hover::before {
+  transition: var(--transition-in);
+  transition-property: opacity;
+  opacity: 0.4;
+}
+
+.tile:hover .tileContentLabel {
+  text-decoration: underline;
+}
+
+.tile-NO_CHANGE {
+  color: var(--color-text-light);
+}
+
+.tile-NO_CHANGE::before {
+  color: var(--color-gray-50);
+  opacity: 0.4;
+}
+
+.tile-NO_CHANGE:hover::before {
+  opacity: 0.2;
+}
+
+.tile-HIGH_NEGATIVE::before {
+  color: var(--color-red-100);
+}
+
+.tile-NEGATIVE::before {
+  color: var(--color-red-50);
+}
+
+.tile-LOW_NEGATIVE::before {
+  color: var(--color-red-50);
+}
+
+.tile-LOW_POSITIVE::before {
+  color: var(--color-green-50);
+}
+
+.tile-POSITIVE::before {
+  color: var(--color-green-50);
+}
+
+.tile-HIGH_POSITIVE::before {
+  color: var(--color-green-100);
+}
+
+/** empty message */
+.emptyMessage {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.emptyMessageWrapper {
+  max-width: 100%;
+  text-align: center;
+}
+
+/** tooltip */
+.tileContentTooltipAnchor {
+  width: 100%;
+  height: 100%;
+}
+
+.tooltip {
+  z-index: var(--layer-xxhigh);
+  padding: var(--space-xsmall) var(--space-small);
+  border-radius: var(--radius-medium);
+  width: calc(100vw - 2 * var(--space-small));
+  max-width: 340px;
+  outline: none;
+  filter: drop-shadow(var(--shadow-layer-high));
+  will-change: filter;
+  background: var(--color-light);
+  font-size: var(--size-small);
+  pointer-events: none;
+}
+
+.tileTooltipArrow svg {
+  display: block;
+  fill: var(--color-background) !important;
+}
+
+.tileTooltipContentTitle {
+  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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { action } from 'storybook/actions';
+import { createJobs } from '@bundle-stats/utils';
+import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
+
+/* 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';
+/* eslint-enable import/no-relative-packages */
+import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '.';
+
+const meta: Meta<typeof MetricsTreemap> = {
+  title: 'Components/MetricsTreemap',
+  component: MetricsTreemap,
+  args: {
+    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,
+  },
+};