@bundle-stats/ui 4.23.0-beta.1 → 4.23.0-beta.11

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,16 @@ code {
 }
 
 a {
-  color: var(--color-primary);
+  color: var(--color-accent);
+  transition-property: color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
-a:hover,
+a:focus,
 a:active,
-a:focus {
-  color: var(--color-primary-dark);
+a:hover {
+  color: var(--color-accent-dark);
   outline: none;
+  transition-duration: var(--transition-duration-in);
 }

package/src/css/variables.css

@@ -35,18 +35,18 @@
    * Color scheme: https://coolors.co/287acc-da444e-55b950-e5c110-192339-353538
    */
 
-   --color-gray-25: #f9f9f9;
-   /** https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/0/3F3F47/63/63/71/white */
-   --color-gray-50: #ececed;
-   --color-gray-100: #c9c9cc;
-   --color-gray-200: #a7a7aa;
-   --color-gray-300: #848489;
-   --color-gray-400: #626268;
-   --color-gray-500: #3f3f47;
-   --color-gray-600: #36363c;
-   --color-gray-700: #2c2c32;
-   --color-gray-800: #232327;
-   --color-gray-900: #19191c;
+  --color-gray-25: #f9f9f9;
+  /** https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/0/3F3F47/63/63/71/white */
+  --color-gray-50: #ececed;
+  --color-gray-100: #c9c9cc;
+  --color-gray-200: #a7a7aa;
+  --color-gray-300: #848489;
+  --color-gray-400: #626268;
+  --color-gray-500: #3f3f47;
+  --color-gray-600: #36363c;
+  --color-gray-700: #2c2c32;
+  --color-gray-800: #232327;
+  --color-gray-900: #19191c;
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
@@ -98,7 +98,7 @@
   --color-green-200: #b1dfaf;
   --color-green-300: #92d28f;
   --color-green-400: #74c670;
-  --color-green-500: #55B950;
+  --color-green-500: #55b950;
   --color-green-600: #3ea839;
   --color-green-700: #2b9426;
   --color-green-800: #1b7b16;
@@ -111,30 +111,31 @@
   --color-green-ultra-dark: var(--color-green-900);
 
   --color-yellow-25: #fffdf2;
-  /* https://hihayk.github.io/scale/#4/5/40/80/0/-0/0/0/E5C110/229/193/16/white */
-  --color-yellow-50:  #faf3cf;
+  /* https://hihayk.github.io/scale/#4/5/20/80/0/-0/0/0/E5C110/229/193/16/white */
+  --color-yellow-50: #faf3cf;
   --color-yellow-100: #f6e9a9;
   --color-yellow-200: #f2df83;
   --color-yellow-300: #edd55d;
   --color-yellow-400: #e9cb36;
   --color-yellow-500: #e5c110;
-  --color-yellow-600: #ceae0e;
-  --color-yellow-700: #b79a0d;
-  --color-yellow-800: #a0870b;
-  --color-yellow-900: #89740a;
+  --color-yellow-600: #dab70f;
+  --color-yellow-700: #ceae0e;
+  --color-yellow-800: #c3a40e;
+  --color-yellow-900: #b79a0d;
 
   --color-yellow-ultra-light: var(--color-yellow-100);
   --color-yellow-light: var(--color-yellow-300);
   --color-yellow: var(--color-yellow-500);
-  --color-yellow-ultra-dark: var(--color-yellow-700);
-  --color-yellow-dark: var(--color-yellow-900);
+  --color-yellow-dark: var(--color-yellow-700);
+  --color-yellow-ultra-dark: var(--color-yellow-900);
 
   --color-dark: #111;
   --color-light: #fff;
 
-  --color-branding-light: #2b76d4;
+  /* https://hihayk.github.io/scale/#4/4/40/40/0/-0/0/0/1a477f/26/71/127/white */
+  --color-branding-light: #31598c;
   --color-branding: #1a477f;
-  --color-branding-dark: #09182a;
+  --color-branding-dark: #102b4c;
 }
 
 body {
@@ -146,6 +147,10 @@ body {
   --color-text-ultra-dark: var(--color-gray-ultra-dark);
   --color-heading: var(--color-gray-ultra-dark);
 
+  --color-accent-light: var(--color-branding-light);
+  --color-accent: var(--color-branding);
+  --color-accent-dark: var(--color-branding-dark);
+
   --color-success-light: var(--color-green-light);
   --color-success: var(--color-green);
   --color-success-dark: var(--color-green-dark);
@@ -185,21 +190,30 @@ body {
   --color-outline-danger: var(--color-red-100);
 
   --color-backdrop: rgba(0, 0, 0, 0.05);
-  --color-shadow: rgba(0, 0, 0, 0.25);
+  --color-shadow: rgba(0, 0, 0, 0.1);
 
-  --transition-duration-in: 0.16s;
-  --transition-duration-out: 0.10s;
-  --transition-in: all var(--transition-duration-in) ease-in;
-  --transition-out: all var(--transition-duration-out) ease-out;
+  /**
+   * Transitions: set `transition-property` explicitly on the base rule, use the `out` duration
+   * on the base rule and switch only `transition-duration` to `in` on the active/hover rule
+   */
+  --transition-duration-in: 120ms;
+  --transition-duration-out: 80ms;
+  --transition-timing-function: ease-out;
 
   --layer-xlow: 1;
   --layer-low: 10;
   --layer: 100;
   /** for components with overlays (tooltips, hovercards) */
   --layer-high: 1000;
+  /** for the sticky header, tabs and side panels */
   --layer-xhigh: 10000;
   /** for dialogs/modals */
   --layer-xxhigh: 100000;
+  /**
+   * z-index used by overlays (tooltips, hovercards, dropdowns)
+   * overridden by the dialog portal to place nested overlays above the dialog
+   */
+  --layer-overlay: var(--layer-high);
 
   --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
   --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);

package/src/layout/box/box.module.css

@@ -18,14 +18,16 @@
 }
 
 .outlineHover {
-  transition: var(--transition-out);
+  transition-property: border-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .outlineHover:focus,
 .outlineHover:active,
 .outlineHover:hover {
   border-color: var(--color-outline-dark);
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .padding-xxxsmall {

package/src/layout/flex-stack/flex-stack.module.css

@@ -4,43 +4,73 @@
   gap: 0;
 }
 
-/** Space variation */
-.space--xxxsmall {
+/** Gap variation */
+.gap--xxxsmall {
   gap: var(--space-xxxsmall);
 }
 
-.space--xxsmall {
+.gap--xxsmall {
   gap: var(--space-xxsmall);
 }
 
-.space--xsmall {
+.gap--xsmall {
   gap: var(--space-xsmall);
 }
 
-.space--small {
+.gap--small {
   gap: var(--space-small);
 }
 
-.space--medium {
+.gap--medium {
   gap: var(--space-medium);
 }
 
-.space--large {
+.gap--large {
   gap: var(--space-large);
 }
 
-.space--xlarge {
+.gap--xlarge {
   gap: var(--space-xlarge);
 }
 
-.space--xxlarge {
+.gap--xxlarge {
   gap: var(--space-xxlarge);
 }
 
-.space--xxxlarge {
+.gap--xxxlarge {
   gap: var(--space-xxxlarge);
 }
 
+/** Direction variation */
+.direction--row {
+  flex-direction: row;
+}
+
+.direction--row-reverse {
+  flex-direction: row-reverse;
+}
+
+.direction--column {
+  flex-direction: column;
+}
+
+.direction--column-reverse {
+  flex-direction: column-reverse;
+}
+
+/** Wrap variation */
+.wrap--nowrap {
+  flex-wrap: nowrap;
+}
+
+.wrap--wrap {
+  flex-wrap: wrap;
+}
+
+.wrap--wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
 /** Align items variation */
 .root {
   align-items: stretch;
@@ -62,6 +92,31 @@
   align-items: baseline;
 }
 
+/** Justify content variation */
+.justify-content--flex-start {
+  justify-content: flex-start;
+}
+
+.justify-content--flex-end {
+  justify-content: flex-end;
+}
+
+.justify-content--center {
+  justify-content: center;
+}
+
+.justify-content--space-between {
+  justify-content: space-between;
+}
+
+.justify-content--space-around {
+  justify-content: space-around;
+}
+
+.justify-content--space-evenly {
+  justify-content: space-evenly;
+}
+
 /** Inline variation */
 .inline {
   display: inline-flex;

package/src/layout/flex-stack/flex-stack.stories.tsx

@@ -28,7 +28,7 @@ export const Default: Story = {
   },
 };
 
-export const withCustomWrapper: Story = {
+export const WithCustomWrapper: Story = {
   args: {
     as: 'main',
     className: 'wrapper',
@@ -41,9 +41,9 @@ export const withCustomWrapper: Story = {
   },
 };
 
-export const withLargeSpace: Story = {
+export const WithLargeGap: Story = {
   args: {
-    space: 'large',
+    gap: 'large',
     children: (
       <>
         <Box outline>Lorem ipsum 1</Box>
@@ -54,14 +54,14 @@ export const withLargeSpace: Story = {
   },
 };
 
-export const withNestedStack: Story = {
+export const WithNestedStack: Story = {
   args: {
-    space: 'large',
+    gap: 'large',
     children: (
       <>
         <Box outline>Lorem ipsum 1</Box>
         <Box outline>Lorem ipsum 2</Box>
-        <FlexStack space="small">
+        <FlexStack gap="small">
           <Box outline>Lorem ipsum 3.1</Box>
           <Box outline>Lorem ipsum 3.2</Box>
         </FlexStack>
@@ -70,16 +70,61 @@ export const withNestedStack: Story = {
   },
 };
 
-export const singleItem: Story = {
+export const SingleItem: Story = {
   args: {
     children: <Box outline>Lorem ipsum</Box>,
   },
 };
 
-export const withAlignItems: Story = {
+export const WithDirectionColumn: Story = {
+  args: {
+    direction: 'column',
+    gap: 'medium',
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        <Box outline>Lorem ipsum 3</Box>
+      </>
+    ),
+  },
+};
+
+export const WithDirectionRowReverse: Story = {
+  args: {
+    direction: 'row-reverse',
+    gap: 'medium',
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        <Box outline>Lorem ipsum 3</Box>
+      </>
+    ),
+  },
+};
+
+export const WithWrap: Story = {
+  args: {
+    wrap: 'wrap',
+    gap: 'medium',
+    style: { maxWidth: '320px' },
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        <Box outline>Lorem ipsum 3</Box>
+        <Box outline>Lorem ipsum 4</Box>
+        <Box outline>Lorem ipsum 5</Box>
+      </>
+    ),
+  },
+};
+
+export const WithAlignItems: Story = {
   args: {
     alignItems: 'center',
-    space: 'medium',
+    gap: 'medium',
     children: (
       <>
         <h1>Title</h1>
@@ -88,3 +133,17 @@ export const withAlignItems: Story = {
     ),
   },
 };
+
+export const WithJustifyContent: Story = {
+  args: {
+    justifyContent: 'space-between',
+    gap: 'medium',
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        <Box outline>Lorem ipsum 3</Box>
+      </>
+    ),
+  },
+};

package/src/layout/flex-stack/flex-stack.tsx

@@ -6,12 +6,25 @@ import css from './flex-stack.module.css';
 
 type SpaceValue = (typeof SPACES)[number];
 
-interface FlexStackProps<T extends React.ElementType> {
+export type FlexStackProps<T extends React.ElementType> = {
   as?: T;
+  gap?: SpaceValue;
+  /**
+   * @deprecated Use `gap` instead.
+   */
   space?: SpaceValue;
   inline?: boolean;
+  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
   alignItems?: 'top' | 'center' | 'bottom';
-}
+  justifyContent?:
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly';
+};
 
 export const FlexStack = <T extends React.ElementType = 'div'>(
   props: FlexStackProps<T> & Omit<React.ComponentProps<T>, keyof FlexStackProps<T>>,
@@ -19,16 +32,23 @@ export const FlexStack = <T extends React.ElementType = 'div'>(
   const {
     as: Component = 'div',
     className = '',
-    space = NO_SPACE,
+    gap,
+    space,
     inline = false,
+    direction = '',
+    wrap = '',
     alignItems = '',
+    justifyContent = '',
     ...restProps
   } = props;
 
   const rootClassName = cx(
     css.root,
-    css[`space--${space}`],
+    css[`gap--${gap ?? space ?? NO_SPACE}`],
+    css[`direction--${direction}`],
+    css[`wrap--${wrap}`],
     css[`align-items--${alignItems}`],
+    css[`justify-content--${justifyContent}`],
     inline && css.inline,
     className,
   );

package/src/query-state.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 import isEqual from 'lodash/isEqual';
 import { QueryParamProvider, useQueryParams } from 'use-query-params';
 import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
@@ -19,18 +19,23 @@ export const useComponentQueryState = (componentName: string) => {
 
   const componentState = queryState[componentName];
 
+  // Read the latest state from a ref to keep `setState` stable across state changes
+  const componentStateRef = useRef(componentState);
+  componentStateRef.current = componentState;
+
   const setState = useCallback(
     (updates: Record<string, unknown>) => {
-      const newState = { ...componentState, ...updates };
+      const currentState = componentStateRef.current;
+      const newState = { ...currentState, ...updates };
 
       // Deep check to prevent unnecessary state changes
-      if (isEqual(componentState, newState)) {
+      if (isEqual(currentState, newState)) {
         return;
       }
 
       setQueryState({ [componentName]: newState });
     },
-    [componentState, setQueryState],
+    [componentName, setQueryState],
   );
 
   return [componentState, setState];