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

package/src/components/summary/summary.tsx

@@ -4,21 +4,16 @@ import get from 'lodash/get';
 import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
 
 import {
-  METRICS_WEBPACK_ASSETS,
+  METRICS_GROUP_ASSETS,
+  METRICS_GROUP_MODULES,
+  METRICS_GROUP_PACKAGES,
   METRICS_WEBPACK_GENERAL,
-  METRICS_WEBPACK_MODULES,
-  METRICS_WEBPACK_PACKAGES,
 } from '../../constants';
 import { Box } from '../../layout/box';
 import { ComponentLink } from '../component-link';
 import { MetricRunInfo, MetricRunInfoProps } from '../metric-run-info';
 import css from './summary.module.css';
-
-const METRICS_WEBPACK_OTHERS = [
-  ...METRICS_WEBPACK_ASSETS,
-  ...METRICS_WEBPACK_MODULES,
-  ...METRICS_WEBPACK_PACKAGES,
-];
+import { Stack } from '../../layout';
 
 interface SummaryItemProps {
   metricId: string;
@@ -46,15 +41,7 @@ const SummaryItem = (props: SummaryItemProps & React.ComponentProps<'div'>) => {
   const metricData = get(data, metricId, { current: 0, baseline: 0 });
 
   return (
-    <Box
-      key={metricId}
-      outline
-      outlineHover
-      padding="small"
-      as={SummaryItemCustomLink}
-      {...componentLink?.link}
-      className={className}
-    >
+    <SummaryItemCustomLink key={metricId} {...componentLink?.link} className={className}>
       <MetricRunInfo
         metricId={metricId}
         current={metricData.current}
@@ -64,7 +51,7 @@ const SummaryItem = (props: SummaryItemProps & React.ComponentProps<'div'>) => {
         size={size}
         loading={loading}
       />
-    </Box>
+    </SummaryItemCustomLink>
   );
 };
 
@@ -90,38 +77,48 @@ export const Summary = ({
   summaryItemLink = ComponentLink,
 }: SummaryProps & React.ComponentProps<'div'>) => (
   <Box className={cx(css.root, className)}>
-    <div className={css.wrapper}>
-      <div className={css.items}>
-        {METRICS_WEBPACK_GENERAL.map((metricId) => (
-          <SummaryItem
-            key={metricId}
-            className={css.item}
-            metricId={metricId}
-            data={data}
-            size="large"
-            loading={loading}
-            customLink={summaryItemLink}
-            showDelta={showSummaryItemDelta}
-            showBaseline={showSummaryItemBaseline}
-          />
-        ))}
-      </div>
+    <div className={css.row}>
+      <Box outline padding="small" className={css.rowGroup}>
+        <div className={css.items}>
+          {METRICS_WEBPACK_GENERAL.map((metricId) => (
+            <SummaryItem
+              key={metricId}
+              className={css.item}
+              metricId={metricId}
+              data={data}
+              size="xlarge"
+              loading={loading}
+              customLink={summaryItemLink}
+              showDelta={showSummaryItemDelta}
+              showBaseline={showSummaryItemBaseline}
+            />
+          ))}
+        </div>
+      </Box>
     </div>
-    <div className={css.wrapper}>
-      <div className={css.items}>
-        {METRICS_WEBPACK_OTHERS.map((metricId) => (
-          <SummaryItem
-            key={metricId}
-            className={cx(css.item, css.itemSmall)}
-            metricId={metricId}
-            data={data}
-            customLink={summaryItemLink}
-            loading={loading}
-            showDelta={showSummaryItemDelta}
-            showBaseline={false}
-          />
-        ))}
-      </div>
+    <div 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}>
+              {metricGroup.metrics.map((metricId) => (
+                <SummaryItem
+                  key={metricId}
+                  className={css.item}
+                  metricId={metricId}
+                  data={data}
+                  size="large"
+                  loading={loading}
+                  customLink={summaryItemLink}
+                  showDelta={showSummaryItemDelta}
+                  showBaseline={showSummaryItemBaseline}
+                />
+              ))}
+            </div>
+          </Box>
+        </Stack>
+      ))}
     </div>
   </Box>
 );

package/src/constants.ts

@@ -36,6 +36,19 @@ export const METRICS_WEBPACK_MODULES = [
 ];
 export const METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];
 
+export const METRICS_GROUP_ASSETS = {
+  title: 'Assets',
+  metrics: METRICS_WEBPACK_ASSETS,
+};
+export const METRICS_GROUP_MODULES = {
+  title: 'Modules',
+  metrics: METRICS_WEBPACK_MODULES,
+};
+export const METRICS_GROUP_PACKAGES = {
+  title: 'Packages',
+  metrics: METRICS_WEBPACK_PACKAGES,
+};
+
 export const SORT = {
   ASC: 'asc',
   DESC: 'desc',

package/src/css/default.css

@@ -1,4 +1,4 @@
-@import url('~modern-css-reset/dist/reset.css');
+@import url('modern-css-reset/dist/reset.css');
 
 /** modern-css-reset updates */
 pre,

package/src/css/variables.css

@@ -32,22 +32,21 @@
   --line-height-number: 1.2em;
 
   /*
-   * Color scheme:
-   * https://coolors.co/287acc-da444e-55b950-efcc1a-192339
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23ebc013&mcgpalette3=%232a2933&mcgpalette4=%23287acc&themename=bundle-stats
-   * https://hihayk.github.io/scale/#4/5/50/90/-51/0/0/14/353138/53/49/56/white
+   * Color scheme: https://coolors.co/287acc-da444e-55b950-e5c110-192339-353538
    */
-  --color-gray-25: #f9f9f9;
-  --color-gray-50: #e5e5e7;
-  --color-gray-100: #d2d2d4;
-  --color-gray-200: #959499;
-  --color-gray-300: #6a6970;
-  --color-gray-400: #4a4952;
-  --color-gray-500: #2a2933;
-  --color-gray-600: #25242e;
-  --color-gray-700: #1f1f27;
-  --color-gray-800: #191920;
-  --color-gray-900: #0f0f14;
+
+   --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);
@@ -56,16 +55,17 @@
   --color-gray-ultra-dark: var(--color-gray-900);
 
   --color-red-25: #fdf5f6;
-  --color-red-50: #fbe9ea;
-  --color-red-100: #f4c7ca;
-  --color-red-200: #eda2a7;
-  --color-red-300: #e57c83;
-  --color-red-400: #e06069;
+  /* https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/100/DA444E/218/68/78/white */
+  --color-red-50: #fbeced;
+  --color-red-100: #f5cbcd;
+  --color-red-200: #eea9ae;
+  --color-red-300: #e7878e;
+  --color-red-400: #e1666e;
   --color-red-500: #da444e;
-  --color-red-600: #d63e47;
-  --color-red-700: #d0353d;
-  --color-red-800: #cb2d35;
-  --color-red-900: #c21f25;
+  --color-red-600: #c92a35;
+  --color-red-700: #b31520;
+  --color-red-800: #8c0710;
+  --color-red-900: #660005;
   --color-red-ultra-light: var(--color-red-100);
   --color-red-light: var(--color-red-300);
   --color-red: var(--color-red-500);
@@ -73,16 +73,17 @@
   --color-red-ultra-dark: var(--color-red-900);
 
   --color-blue-25: #f3f8fd;
-  --color-blue-50: #e5eff9;
-  --color-blue-100: #bfd7f0;
-  --color-blue-200: #94bde6;
-  --color-blue-300: #69a2db;
-  --color-blue-400: #488ed4;
+  /* https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/100/287ACC/40/122/204/white */
+  --color-blue-50: #eaf2fa;
+  --color-blue-100: #c3daf1;
+  --color-blue-200: #9cc2e8;
+  --color-blue-300: #75aade;
+  --color-blue-400: #4f92d5;
   --color-blue-500: #287acc;
-  --color-blue-600: #2472c7;
-  --color-blue-700: #1e67c0;
-  --color-blue-800: #185db9;
-  --color-blue-900: #0f4aad;
+  --color-blue-600: #1168bf;
+  --color-blue-700: #0055ac;
+  --color-blue-800: #00438c;
+  --color-blue-900: #003166;
 
   --color-blue-ultra-light: var(--color-blue-100);
   --color-blue-light: var(--color-blue-300);
@@ -91,16 +92,17 @@
   --color-blue-ultra-dark: var(--color-blue-900);
 
   --color-green-25: #f6fbf6;
-  --color-green-50: #ebf7ea;
-  --color-green-100: #cceacb;
-  --color-green-200: #aadca8;
-  --color-green-300: #88ce85;
-  --color-green-400: #6fc46a;
-  --color-green-500: #55b950;
-  --color-green-600: #4eb249;
-  --color-green-700: #44aa40;
-  --color-green-800: #3ba237;
-  --color-green-900: #2a9327;
+  /* https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/100/55b950/85/185/80/white */
+  --color-green-50: #eef8ee;
+  --color-green-100: #cfebce;
+  --color-green-200: #b1dfaf;
+  --color-green-300: #92d28f;
+  --color-green-400: #74c670;
+  --color-green-500: #55B950;
+  --color-green-600: #3ea839;
+  --color-green-700: #2b9426;
+  --color-green-800: #1b7b16;
+  --color-green-900: #0f5f0b;
 
   --color-green-ultra-light: var(--color-green-100);
   --color-green-light: var(--color-green-300);
@@ -109,18 +111,18 @@
   --color-green-ultra-dark: var(--color-green-900);
 
   --color-yellow-25: #fffdf2;
-  --color-yellow-50: #fdf7e3;
-  --color-yellow-100: #f9ecb8;
-  --color-yellow-200: #f5e089;
-  --color-yellow-300: #f1d35a;
-  --color-yellow-400: #eec936;
-  --color-yellow-500: #ebc013;
-  --color-yellow-600: #e9ba11;
-  --color-yellow-700: #e5b20e;
-  --color-yellow-800: #e2aa0b;
-  --color-yellow-900: #dd9c06;
-
-  --color-yellow-light-background: var(--color-yellow-25);
+  /* https://hihayk.github.io/scale/#4/5/40/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-ultra-light: var(--color-yellow-100);
   --color-yellow-light: var(--color-yellow-300);
   --color-yellow: var(--color-yellow-500);
@@ -130,11 +132,13 @@
   --color-dark: #111;
   --color-light: #fff;
 
-  /* Functional color variables */
   --color-branding-light: #2b76d4;
   --color-branding: #1a477f;
   --color-branding-dark: #09182a;
+}
 
+body {
+  /* Functional color variables */
   --color-text-ultra-light: var(--color-gray-ultra-light);
   --color-text-light: var(--color-gray-light);
   --color-text: var(--color-gray);
@@ -183,8 +187,8 @@
   --color-backdrop: rgba(0, 0, 0, 0.05);
   --color-shadow: rgba(0, 0, 0, 0.25);
 
-  --transition-duration-in: 0.2s;
-  --transition-duration-out: 0.17s;
+  --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;
 
@@ -219,3 +223,12 @@
   --entry-info-width: 64rem;
   --entry-info-top: var(--header-height);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0s !important;
+    animation-delay: 0s !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+}

package/src/hooks/rows-sort.ts

@@ -20,15 +20,18 @@ const getSortDirection = (directionParam: string | undefined): SortAction['direc
   return '';
 };
 
-export const getSortFn =
-  <TRow>(fieldPath: string, getCustomSort: UseRowsSortParams<TRow>['getCustomSort']) =>
-  (item: TRow) => {
+export function getSortFn<TRow>(
+  fieldPath: string,
+  getCustomSort: UseRowsSortParams<TRow>['getCustomSort'],
+) {
+  return (item: TRow) => {
     if (!fieldPath) {
       return getCustomSort(item);
     }
 
     return get(item, fieldPath) || 0;
   };
+}
 
 interface UseRowsSortParams<TRow> {
   rows: Array<TRow>;
@@ -47,13 +50,13 @@ interface UseRowsSort<TRow> {
   updateSort: (params: SortAction) => void;
 }
 
-export const useRowsSort = <TRow>({
+export function useRowsSort<TRow>({
   rows,
   initialField = 'runs[0].delta',
   initialDirection = 'desc',
   getCustomSort,
   setQueryState,
-}: UseRowsSortParams<TRow>): UseRowsSort<TRow> => {
+}: UseRowsSortParams<TRow>): UseRowsSort<TRow> {
   const [sort, setSort] = useState({
     field: initialField,
     direction: getSortDirection(initialDirection),
@@ -85,4 +88,4 @@ export const useRowsSort = <TRow>({
     updateSort,
     items: orderedRows,
   };
-};
+}

package/src/layout/box/box.stories.tsx

@@ -1,49 +1,56 @@
-import React from 'react';
-import type { Meta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { getWrapperDecorator } from '../../stories';
 import { Box } from '.';
 
-export default {
+const meta = {
   title: 'Layout/Box',
   component: Box,
   decorators: [getWrapperDecorator()],
-} as Meta<typeof Box>;
+  args: {
+    style: { border: '1px dotted magenta' },
+    children: 'Lorem ipsum',
+  },
+} satisfies Meta<typeof Box>;
 
-const Template: Story = (props: any) => (
-  <Box style={{ border: '1px dotted magenta' }} {...props}>
-    Lorem ipsum
-  </Box>
-);
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof meta>;
 
-export const WithPadding = Template.bind({});
-WithPadding.args = {
-  padding: 'medium',
+export const Default: Story = {};
+
+export const WithPadding: Story = {
+  args: {
+    padding: 'medium',
+  },
 };
 
-export const WithHorizontalPadding = Template.bind({});
-WithHorizontalPadding.args = {
-  horizontalPadding: 'medium',
+export const WithHorizontalPadding: Story = {
+  args: {
+    horizontalPadding: 'medium',
+  },
 };
 
-export const WithVerticalPadding = Template.bind({});
-WithVerticalPadding.args = {
-  verticalPadding: 'medium',
+export const WithVerticalPadding: Story = {
+  args: {
+    verticalPadding: 'medium',
+  },
 };
 
-export const WithHorizontalAndVerticalPadding = Template.bind({});
-WithHorizontalAndVerticalPadding.args = {
-  padding: ['xxsmall', 'medium'],
+export const WithHorizontalAndVerticalPadding: Story = {
+  args: {
+    padding: ['xxsmall', 'medium'],
+  },
 };
 
-export const WithOutline = Template.bind({});
-WithOutline.args = {
-  outline: true,
+export const WithOutline: Story = {
+  args: {
+    outline: true,
+  },
 };
 
-export const WithOutlineHover = Template.bind({});
-WithOutlineHover.args = {
-  outlineHover: true,
+export const WithOutlineHover: Story = {
+  args: {
+    outlineHover: true,
+  },
 };

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

@@ -1,59 +1,90 @@
 import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { getWrapperDecorator } from '../../stories';
 import { Box } from '../box';
 import { FlexStack } from '.';
 
-export default {
+const meta = {
   title: 'Layout/FlexStack',
   component: FlexStack,
   decorators: [getWrapperDecorator()],
+} satisfies Meta<typeof FlexStack>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        {null}
+        Lorem ipsum 3
+      </>
+    ),
+  },
+};
+
+export const withCustomWrapper: Story = {
+  args: {
+    as: 'main',
+    className: 'wrapper',
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+      </>
+    ),
+  },
+};
+
+export const withLargeSpace: Story = {
+  args: {
+    space: 'large',
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        <Box outline>Lorem ipsum 3</Box>
+      </>
+    ),
+  },
+};
+
+export const withNestedStack: Story = {
+  args: {
+    space: 'large',
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        <FlexStack space="small">
+          <Box outline>Lorem ipsum 3.1</Box>
+          <Box outline>Lorem ipsum 3.2</Box>
+        </FlexStack>
+      </>
+    ),
+  },
 };
 
-export const Default = () => (
-  <FlexStack>
-    <Box outline>Lorem ipsum 1</Box>
-    <Box outline>Lorem ipsum 2</Box>
-    {null}
-    Lorem ipsum 3
-  </FlexStack>
-);
-
-export const withCustomWrapper = () => (
-  <FlexStack as="main" className="wrapper">
-    <Box outline>Lorem ipsum 1</Box>
-    <Box outline>Lorem ipsum 2</Box>
-  </FlexStack>
-);
-
-export const withLargeSpace = () => (
-  <FlexStack space="large">
-    <Box outline>Lorem ipsum 1</Box>
-    <Box outline>Lorem ipsum 2</Box>
-    <Box outline>Lorem ipsum 3</Box>
-  </FlexStack>
-);
-
-export const withNestedStack = () => (
-  <FlexStack space="large">
-    <Box outline>Lorem ipsum 1</Box>
-    <Box outline>Lorem ipsum 2</Box>
-    <FlexStack space="small">
-      <Box outline>Lorem ipsum 3.1</Box>
-      <Box outline>Lorem ipsum 3.2</Box>
-    </FlexStack>
-  </FlexStack>
-);
-
-export const singleItem = () => (
-  <FlexStack>
-    <Box outline>Lorem ipsum</Box>
-  </FlexStack>
-);
-
-export const withAlignItems = () => (
-  <FlexStack alignItems="center" space="medium">
-    <h1>Title</h1>
-    <a href="#test">Option 1</a>
-  </FlexStack>
-);
+export const singleItem: Story = {
+  args: {
+    children: <Box outline>Lorem ipsum</Box>,
+  },
+};
+
+export const withAlignItems: Story = {
+  args: {
+    alignItems: 'center',
+    space: 'medium',
+    children: (
+      <>
+        <h1>Title</h1>
+        <a href="#test">Option 1</a>
+      </>
+    ),
+  },
+};

package/src/layout/footer/footer.stories.tsx

@@ -0,0 +1,30 @@
+import type React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Footer } from '.';
+
+// Footer is a plain .jsx component with defaultProps instead of inline
+// destructuring defaults, so TS can't infer its props as optional on its own.
+const TypedFooter = Footer as unknown as React.ComponentType<{
+  className?: string;
+  version?: string;
+}>;
+
+const meta = {
+  title: 'Layout/Footer',
+  component: TypedFooter,
+  decorators: [getWrapperDecorator()],
+} satisfies Meta<typeof TypedFooter>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithVersion: Story = {
+  args: {
+    version: '1.0.0',
+  },
+};