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

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));
 }
 
 /**

package/src/ui/button/button.stories.tsx

@@ -62,7 +62,14 @@ export const All = () => (
         <h3>With icon</h3>
         <Items>
           {Object.values(BUTTON_KIND).map((kind) => (
-            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} kind={kind} key={kind}>
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} kind={kind} key={kind}>
+              Action {kind}
+            </Button>
+          ))}
+        </Items>
+        <Items>
+          {Object.values(BUTTON_KIND).map((kind) => (
+            <Button rightGlyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} kind={kind} key={kind}>
               Action {kind}
             </Button>
           ))}
@@ -106,12 +113,12 @@ export const All = () => (
         <h3>With icon</h3>
         {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
-            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} outline size={size}>
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} outline size={size}>
               Action default
             </Button>
             {Object.values(BUTTON_KIND).map((kind) => (
               <Button
-                glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
                 outline
                 kind={kind}
                 size={size}
@@ -125,10 +132,10 @@ export const All = () => (
         <h3>Only icon</h3>
         {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
-            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} outline size={size} />
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} outline size={size} />
             {Object.values(BUTTON_KIND).map((kind) => (
               <Button
-                glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
                 outline
                 kind={kind}
                 size={size}
@@ -179,12 +186,12 @@ export const All = () => (
         <h3>With icon</h3>
         {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
-            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} solid size={size}>
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} solid size={size}>
               Action default
             </Button>
             {Object.values(BUTTON_KIND).map((kind) => (
               <Button
-                glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
                 solid
                 kind={kind}
                 size={size}
@@ -198,10 +205,10 @@ export const All = () => (
         <h3>Only icon</h3>
         {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
-            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} solid size={size} />
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} solid size={size} />
             {Object.values(BUTTON_KIND).map((kind) => (
               <Button
-                glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
                 solid
                 kind={kind}
                 size={size}

package/src/ui/button/button.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import cx from 'classnames';
 import { Button as ButtonBaseComponent } from 'ariakit/button';
 
@@ -50,7 +51,7 @@ const ButtonComponent = <T extends React.ElementType = 'button'>(
     radius = '',
     padding = '',
     as: Component = ButtonBaseComponent,
-    children,
+    children = null,
     Icon = BaseIcon,
     glyph,
     rightGlyph,
@@ -61,10 +62,12 @@ const ButtonComponent = <T extends React.ElementType = 'button'>(
   const resolvedPadding = padding || ((outline || solid) && size);
   const resolvedRadius = radius || ((outline || solid) && size);
 
+  const resolvedSize = Object.values(BUTTON_SIZE).includes(size) ? size : BUTTON_SIZE.MEDIUM;
+
   const rootClassName = cx(
     css.root,
-    css[size],
     kind && css[kind],
+    css[resolvedSize],
 
     outline && css.outline,
     outline && css[`outline--${kind}`],
@@ -72,22 +75,20 @@ const ButtonComponent = <T extends React.ElementType = 'button'>(
     solid && css.solid,
     solid && css[`solid--${kind}`],
 
-    resolvedPadding && css[`padding--${resolvedPadding}`],
-    resolvedPadding && outline && css[`outline--padding--${resolvedPadding}`],
+    resolvedPadding && css.padding,
     resolvedRadius && css[`radius--${resolvedRadius}`],
 
     active && css.active,
     active && outline && css[`active-outline-${kind}`],
 
-    css[size],
     className,
   );
 
   return (
     <Component {...restProps} className={rootClassName}>
-      {glyph && <Icon glyph={glyph} size={size} className={css.glyph} />}
+      {glyph && <Icon glyph={glyph} className={css.glyph} />}
       {children && <span className={css.content}>{children}</span>}
-      {rightGlyph && <Icon glyph={glyph} size={size} className={css.glyph} />}
+      {rightGlyph && <Icon glyph={rightGlyph} className={css.glyph} />}
     </Component>
   );
 };

package/src/ui/dropdown/dropdown.tsx

@@ -18,7 +18,6 @@ export const DropdownItem = (props: DropdownItemProps & React.ComponentProps<typ
 };
 
 interface DropdownProps {
-  buttonClassName?: string;
   dropdownClassName?: string;
   label?: React.ReactNode;
   ariaLabel?: string;
@@ -28,7 +27,7 @@ interface DropdownProps {
 
 export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) => {
   const {
-    buttonClassName = '',
+    className = '',
     dropdownClassName = '',
     label = null,
     ariaLabel = '',
@@ -50,7 +49,7 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
         disabled={disabled}
         state={menuState}
         tabIndex={null}
-        className={cx(css.button, buttonClassName)}
+        className={cx(css.button, className)}
       >
         {label}
       </MenuButton>

package/src/ui/filters/filters.module.css

@@ -13,6 +13,7 @@
 }
 
 .filterControl {
+  margin: 0;
   flex: 0 0 auto;
   height: 1em;
 }
@@ -41,12 +42,14 @@
   font-size: var(--size-small);
   line-height: var(--space-small);
   color: var(--color-text-ultra-light);
+  transition: var(--transition-out);
 }
 
 .filterSingle:hover,
 .filterSingle:active,
 .filterSingle:focus {
   border-color: var(--color-outline-dark);
+  transition: var(--transition-in);
 }
 
 /** Filter group */
@@ -57,7 +60,10 @@
 
 .filterGroupItem {
   position: relative;
-  padding-right: 10em;
+}
+
+.filterGroupItemFilter {
+  padding-right: 24px; /* space for only button */
 }
 
 .filterGroupOnlyButton {
@@ -76,6 +82,7 @@
   content: ' ';
   display: block;
   position: absolute;
+  pointer-events: none;
   top: 0;
   right: 100%;
   bottom: 0;

package/src/ui/filters/filters.tsx

@@ -50,11 +50,10 @@ interface FilterGroupProps extends React.ComponentProps<'div'> {
 
 const FilterGroup = (props: FilterGroupProps) => {
   const { className = '', groupKey, data, values, onCheckboxChange, toggleFilters } = props;
+  const { label: groupLabel, children: groupItems } = data;
 
   const [search, setSearch] = useState('');
 
-  const { label: groupLabel, children: groupItems } = data;
-
   const areAllGroupItemsChecked = groupItems
     .map(({ key: itemKey }) => values?.[`${groupKey}.${itemKey}`])
     .reduce((agg, val) => agg && val, true);
@@ -98,7 +97,7 @@ const FilterGroup = (props: FilterGroupProps) => {
 
   return (
     <Dropdown
-      buttonClassName={className}
+      className={className}
       label={dropdownLabel}
       ariaLabel={`${groupLabel}: ${filterSuffix}`}
     >

package/src/ui/hover-card/hover-card.tsx

@@ -31,7 +31,7 @@ export const HoverCard = (props: HoverCardProps) => {
     children,
   } = props;
 
-  const state = useHovercardState({ gutter: 8, timeout: 300 });
+  const state = useHovercardState({ gutter: 8, timeout: 300, placement: 'top' });
   const hovercardProps = useHovercard({ state, portal: true });
 
   // Fallback to span if no href

package/src/ui/icon/icon.tsx

@@ -5,10 +5,11 @@ import css from './icon.module.css';
 
 const ICONS = {
   ARROW: 'arrow',
-  ARROW_RIGHT_CIRLCE: 'arrow-right-circle',
+  ARROW_RIGHT_CIRCLE: 'arrow-right-circle',
   CANCEL: 'close',
   CHEVRON_DOWN: 'chevron-down',
   CHEVRON_UP: 'chevron-up',
+  CHECK: 'check',
   CLOSE: 'close',
   CLOCK: 'clock',
   COMMIT: 'commit',

package/src/ui/input-search/input-search.tsx

@@ -70,6 +70,7 @@ export const InputSearch = (
       />
       {value && (
         <Button
+          size="small"
           radius="circle"
           glyph={Icon.ICONS.CANCEL}
           type="button"

package/src/ui/loader/loader.jsx

@@ -4,7 +4,7 @@ import cx from 'classnames';
 
 import css from './loader.module.css';
 
-export const Loader = ({ className, size, ...restProps }) => (
+export const Loader = ({ className = '', size = 'medium', ...restProps }) => (
   <span className={cx(css.root, className, css[size])} {...restProps} />
 );
 

package/src/ui/table/table.module.css

@@ -89,6 +89,36 @@
   border-width: 1px;
 }
 
+/** cascade border radius */
+.root thead,
+.root thead tr:first-child {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+.root thead tr:first-child th:first-child {
+  border-top-left-radius: inherit;
+}
+
+.root thead tr:first-child th:last-child {
+  border-top-right-radius: inherit;
+}
+
+.root tbody:last-child,
+.root tbody:last-child tr:last-child {
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+}
+
+.root tbody:last-child tr:last-child th:first-child,
+.root tbody:last-child tr:last-child td:first-child {
+  border-bottom-left-radius: inherit;
+}
+
+.root tbody:last-child tr:last-child td:last-child {
+  border-bottom-right-radius: inherit;
+}
+
 /* compact variation */
 .compact td,
 .compact th {

package/src/ui/tag/tag.module.css

@@ -42,7 +42,7 @@ a.root:active {
 /** Size variation */
 /** default: medium */
 .root {
-  border-radius: var(--radius-medium);
+  border-radius: var(--radius-small);
   padding: calc(var(--space-xxxsmall) / 2) var(--space-xxxsmall);
   min-width: var(--space-small);
   height: var(--space-small);
@@ -51,7 +51,7 @@ a.root:active {
 }
 
 .small {
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-xsmall);
   padding: calc(var(--space-xxxsmall) / 2);
   height: var(--space-xsmall);
   min-width: var(--space-xsmall);
@@ -60,7 +60,7 @@ a.root:active {
 }
 
 .large {
-  border-radius: var(--radius-large);
+  border-radius: var(--radius-medium);
   padding: var(--space-xxxsmall) var(--space-xxsmall);
   min-width: var(--space-medium);
   height: var(--space-medium);

package/src/ui/toolbar/toolbar.module.css

@@ -1,6 +1,4 @@
-.root {
-  padding: var(--space-small);
-}
+.root { }
 
 .content {}
 

package/src/utils/colors.ts

@@ -0,0 +1,19 @@
+import chunk from 'lodash/chunk';
+
+import COLORS from '../chart-colors.json';
+
+export function getColors(count = 2) {
+  const chunks = chunk(COLORS, Math.round(COLORS.length / count));
+
+  return chunks.map((chunkColors, index) => {
+    if (index === 0) {
+      return chunkColors[0];
+    }
+
+    if (index === chunks.length - 1) {
+      return chunkColors[chunkColors.length - 1];
+    }
+
+    return chunkColors[Math.floor(chunkColors.length / 2)];
+  });
+}

package/src/utils/components.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import cx from 'classnames';
+
+export const getRenderChildWithClassName = (className: string) => (child: any) => {
+  if (child === null || child === '') {
+    return null;
+  }
+
+  const { props } = child;
+
+  if (!props) {
+    return <div className={className}>{child}</div>;
+  }
+
+  return React.cloneElement(child, {
+    ...props,
+    className: cx(className, props.className), // eslint-disable-line react/prop-types
+  });
+};

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './colors';
+export * from './jobs';
+export * from './components';

package/src/utils/jobs.ts

@@ -0,0 +1,22 @@
+import uniqBy from 'lodash/uniqBy';
+
+import type { Job, WebpackChunk } from '@bundle-stats/utils';
+
+interface GetJobsChunksData {
+  chunks: Array<WebpackChunk>;
+  chunkIds: Array<string>;
+}
+
+/**
+ * Get chunks data from all jobs
+ */
+export function getJobsChunksData(jobs: Array<Job>): GetJobsChunksData {
+  const jobChunks = jobs.map((job) => job?.meta?.webpack?.chunks || []);
+  const chunks = uniqBy(jobChunks.flat(), ({ id }) => id);
+  const chunkIds = chunks?.map(({ id }) => id);
+
+  return {
+    chunks,
+    chunkIds,
+  };
+}

package/types/components/bundle-assets/bundle-assets.d.ts

@@ -13,12 +13,8 @@ export namespace BundleAssets {
         export let jobs: PropTypes.Validator<(PropTypes.InferProps<{
             internalBuildNumber: PropTypes.Requireable<number>;
             label: PropTypes.Requireable<string>;
-            meta: PropTypes.Requireable<PropTypes.InferProps<{
-                webpack: PropTypes.Requireable<PropTypes.InferProps<{
-                    chunks: PropTypes.Requireable<any[]>;
-                }>>;
-            }>>;
         }> | null | undefined)[]>;
+        export let chunks: PropTypes.Validator<any[]>;
         export let items: PropTypes.Validator<(PropTypes.InferProps<{
             key: PropTypes.Requireable<string>;
             label: PropTypes.Requireable<string>;

package/types/components/bundle-modules/bundle-modules.d.ts

@@ -1,12 +1,14 @@
 import React from 'react';
+import { type Job } from '@bundle-stats/utils';
+import { WebpackChunk } from '@bundle-stats/utils';
 import { SortAction } from '../../types';
 import { ModuleMetric } from './bundle-modules.constants';
-import type { Chunk, Job, ReportMetricModuleRow } from './bundle-modules.types';
+import type { ReportMetricModuleRow } from './bundle-modules.types';
 interface BundleModulesProps extends React.ComponentProps<'div'> {
     jobs?: Array<Job>;
     items?: Array<ReportMetricModuleRow>;
     allItems?: Array<ReportMetricModuleRow>;
-    chunks?: Array<Chunk>;
+    chunks?: Array<WebpackChunk>;
     totalRowCount: number;
     updateFilters: () => void;
     resetFilters: () => void;

package/types/components/bundle-modules/bundle-modules.i18n.d.ts

@@ -1,4 +1,4 @@
-export declare const SEARCH = "Search by module name";
+export declare const SEARCH = "Search by module path";
 export declare const CHANGED = "Changed";
 export declare const DUPLICATE = "Duplicate";
 export declare const CHUNK = "Chunk";

package/types/components/bundle-modules/bundle-modules.utils.d.ts

@@ -1,16 +1,12 @@
-import type { ReportMetricRow } from '@bundle-stats/utils';
+import { type WebpackChunk, type ReportMetricRow } from '@bundle-stats/utils';
 import { type Module } from '@bundle-stats/utils/lib-esm/webpack';
 import type { FilterFieldsData } from '../../types';
-import type { Chunk, Job, ReportMetricModuleRow } from './bundle-modules.types';
+import type { ReportMetricModuleRow } from './bundle-modules.types';
 export declare const addRowFlags: (row: Module & ReportMetricRow) => ReportMetricModuleRow;
 export declare const getCustomSort: (item: ReportMetricRow) => (string | boolean)[];
 export declare const generateGetRowFilter: ({ chunkIds }: {
     chunkIds: Array<string>;
 }) => (filters: Record<string, unknown>) => (row: ReportMetricModuleRow) => boolean;
-export declare const extractChunkData: (jobs: Array<Job>) => {
-    chunks: Chunk[];
-    chunkIds: string[];
-};
 export declare const generateFilters: (chunkIds: Array<string>, multipleJobs: boolean) => {
     defaultFilters: {
         [x: string]: boolean;
@@ -21,7 +17,7 @@ export declare const generateFilters: (chunkIds: Array<string>, multipleJobs: bo
 };
 interface GetFiltersFormDataParams {
     filters: Record<string, boolean>;
-    chunks: Array<Chunk>;
+    chunks: Array<WebpackChunk>;
     compareMode: boolean;
 }
 export declare const generateFilterFieldsData: (params: GetFiltersFormDataParams) => FilterFieldsData;

package/types/components/bundle-modules/index.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
+import type { Job } from '@bundle-stats/utils';
 import type { SortAction } from '../../types';
 import { BundleModules as BaseComponent } from './bundle-modules';
-import * as types from './bundle-modules.types';
 interface BundleModulesProps extends Omit<React.ComponentProps<typeof BaseComponent>, 'jobs' | 'items' | 'chunks' | 'updateFilters' | 'resetFilters' | 'resetAllFilters' | 'filters' | 'sort' | 'updateSort' | 'search' | 'updateSearch' | 'allItems' | 'totalRowCount' | 'hideEntryInfo' | 'showEntryInfo'> {
-    jobs: Array<types.Job>;
+    jobs: Array<Job>;
     filters: Record<string, boolean>;
     search?: string;
     metric?: string;

package/types/components/delta/delta.d.ts

@@ -1,8 +1,8 @@
 export function Delta({ className, displayValue, deltaType, inverted }: {
-    className: any;
+    className?: string | undefined;
     displayValue: any;
     deltaType: any;
-    inverted: any;
+    inverted?: boolean | undefined;
 }): React.JSX.Element;
 export namespace Delta {
     namespace defaultProps {

package/types/components/metrics-display-selector/metrics-display-selector.d.ts

@@ -3,7 +3,9 @@ import { MetricsDisplayType } from '../../constants';
 import { ControlGroup } from '../../ui/control-group';
 interface MetricsDisplaySelectorProps {
     value: MetricsDisplayType;
-    onSelect: (newValue: MetricsDisplayType) => void;
+    groupBy?: string;
+    groups?: Partial<Record<MetricsDisplayType, Array<string>>>;
+    onSelect: (newValue: MetricsDisplayType, groupBy?: string) => void;
 }
 export declare const MetricsDisplaySelector: (props: MetricsDisplaySelectorProps & Omit<React.ComponentProps<typeof ControlGroup>, 'onSelect' | 'value'>) => React.JSX.Element;
 export {};

package/types/components/metrics-treemap/index.d.ts

@@ -1 +1,2 @@
 export * from './metrics-treemap';
+export { getTreemapNodes, getTreemapNodesGroupedByPath } from './metrics-treemap.utils';