@bundle-stats/ui 4.1.6 → 4.1.8-beta.0

package/lib-esm/hooks/search-params.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-params.js","sourceRoot":"","sources":["../../src/hooks/search-params.js"],"names":[],"mappings":"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"}
+{"version":3,"file":"search-params.js","sourceRoot":"","sources":["../../src/hooks/search-params.js"],"names":[],"mappings":"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"}

package/lib-esm/ui/tag/tag.module.css

@@ -29,11 +29,11 @@
 /** default: medium */
 .root {
   border-radius: var(--radius-medium);
-  padding: var(--space-xxxsmall);
+  padding: calc(var(--space-xxxsmall) / 2) var(--space-xxxsmall);
   min-width: var(--space-small);
   height: var(--space-small);
   font-size: 9px;
-  line-height: 1;
+  line-height: var(--space-xsmall);
 }
 
 .small {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.1.6",
+  "version": "4.1.8-beta.0",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -41,16 +41,17 @@
   "devDependencies": {
     "@babel/preset-env": "7.20.2",
     "@babel/preset-react": "7.18.6",
-    "@storybook/addon-essentials": "6.5.14",
+    "@storybook/addon-essentials": "6.5.15",
     "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.5.14",
-    "@storybook/addons": "6.5.14",
-    "@storybook/builder-webpack5": "6.5.14",
-    "@storybook/manager-webpack5": "6.5.14",
-    "@storybook/react": "6.5.14",
+    "@storybook/addon-storyshots": "6.5.15",
+    "@storybook/addons": "6.5.15",
+    "@storybook/builder-webpack5": "6.5.15",
+    "@storybook/manager-webpack5": "6.5.15",
+    "@storybook/react": "6.5.15",
+    "@types/react": "18.0.26",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.12.0",
+    "chromatic": "6.14.0",
     "classnames": "2.3.2",
     "colormap": "2.3.2",
     "cross-env": "7.0.3",
@@ -65,8 +66,8 @@
     "lodash": "4.17.21",
     "postcss": "8.4.20",
     "prop-types": "15.8.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-router-dom": "5.3.4",
     "react-test-renderer": "18.2.0",
     "rimraf": "3.0.2",
@@ -76,16 +77,16 @@
     "classnames": "^2.0.0",
     "lodash": "^4.0.0",
     "prop-types": "^15.0.0",
-    "react": "^16.0.0 || ^17.0.0",
-    "react-dom": "^16.0.0 || ^17.0.0",
+    "react": "^17.0.0 | ^18.0.0",
+    "react-dom": "^17.0.0 | ^18.0.0",
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.1.6",
-    "ariakit": "^2.0.0-next.41",
-    "modern-css-reset": "^1.4.0",
-    "query-string": "^7.1.0",
-    "use-query-params": "^2.0.0"
+    "@bundle-stats/utils": "^4.1.8-beta.0",
+    "ariakit": "2.0.0-next.43",
+    "modern-css-reset": "1.4.0",
+    "query-string": "7.1.3",
+    "use-query-params": "2.1.2"
   },
-  "gitHead": "9bd7d1eda2bce624bdb60ff1d32e947d25fb2b9a"
+  "gitHead": "0c82e07e4810738eff0c6d5ae6a1715f9fa67d5c"
 }

package/src/components/bundle-assets/bundle-assets.utils.js

@@ -77,7 +77,7 @@ export const getCustomSort = (sortId) => (item) => {
   }
 
   if (sortId === SORT_BY_DELTA) {
-    return item?.runs?.[0]?.deltaPercentage || 0;
+    return item?.runs?.[0]?.delta || 0;
   }
 
   if (sortId === SORT_BY_SIZE) {

package/src/components/bundle-modules/bundle-modules.utils.js

@@ -35,7 +35,7 @@ export const getCustomSort = (sortBy) => (item) => {
   }
 
   if (sortBy === SORT_BY_DELTA) {
-    return item?.runs?.[0]?.deltaPercentage || 0;
+    return item?.runs?.[0]?.delta || 0;
   }
 
   return [!item.changed, item.key];

package/src/components/bundle-modules/index.jsx

@@ -24,8 +24,21 @@ import { SORT_BY } from './bundle-modules.constants';
 export const BundleModules = (props) => {
   const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
 
-  const chunks = uniqBy(jobs.map((job) => job?.meta?.webpack?.chunks || []).flat(), ({ id }) => id);
-  const chunkIds = chunks?.map(({ id }) => id);
+  const { chunks, chunkIds } = useMemo(
+    () => {
+      const bundleChunks = uniqBy(
+        jobs.map((job) => job?.meta?.webpack?.chunks || []).flat(),
+        ({ id }) => id
+      );
+      const bundleChunkIds = bundleChunks?.map(({ id }) => id);
+
+      return {
+        chunks: bundleChunks,
+        chunkIds: bundleChunkIds,
+      };
+    },
+    [jobs],
+  );
 
   const { defaultFilters, allEntriesFilters } = useMemo(
     () => ({

package/src/components/bundle-packages/bundle-packages.utils.js

@@ -31,7 +31,7 @@ export const getCustomSort = (sortId) => (item) => {
   }
 
   if (sortId === SORT_BY_DELTA) {
-    return item?.runs?.[0]?.deltaPercentage || 0;
+    return item?.runs?.[0]?.delta || 0;
   }
 
   if (sortId === SORT_BY_SIZE) {

package/src/components/metrics-table/index.jsx

@@ -0,0 +1,11 @@
+import React, { useState } from 'react';
+
+import { MetricsTable as BaseComponent } from './metrics-table';
+
+export const MetricsTable = (props) => {
+  const [showAllItems, setShowAllItems] = useState(false);
+
+  return (
+    <BaseComponent {...props} showAllItems={showAllItems}  setShowAllItems={setShowAllItems} />
+  );
+};

package/src/components/metrics-table/metrics-table.jsx

@@ -12,6 +12,7 @@ import { JobName } from '../job-name';
 import styles from './metrics-table.module.css';
 
 const METRIC_TYPE_DATA = getGlobalMetricType(null, METRIC_TYPE_FILE_SIZE);
+const VISIBLE_COUNT = 100;
 
 const getRowsRunTotal = (rows, runIndex) => sum(rows.map((row) => row?.runs?.[runIndex]?.value || 0));
 
@@ -164,6 +165,8 @@ export const MetricsTable = ({
   showHeaderSum,
   headerRows,
   title,
+  showAllItems,
+  setShowAllItems,
   ...restProps
 }) => {
   const { headers, columnClassNames } = useMemo(() => {
@@ -183,6 +186,11 @@ export const MetricsTable = ({
     showHeaderSum && styles.showHeaderSum,
   );
 
+  const showEmpty = isEmpty(items);
+  const showItems = !showEmpty;
+  const hasHiddenItems = items?.length > VISIBLE_COUNT;
+  const visibleItems = !hasHiddenItems || showAllItems ? items : items?.slice(0, VISIBLE_COUNT);
+
   return (
     <Table className={rootClassName} compact {...restProps}>
       <Table.THead>
@@ -201,17 +209,46 @@ export const MetricsTable = ({
         })}
       </Table.THead>
       <Table.TBody>
-        {!isEmpty(items) ? (
-          items.map((item) => (
-            <MetricsTableRow key={item.key} item={item} renderRowHeader={renderRowHeader} />
-          ))
-        ) : (
+        {showEmpty && (
           <Table.Tr>
             <Table.Td className={styles.empty} colSpan={columnClassNames?.length || 1}>
               {emptyMessage}
             </Table.Td>
           </Table.Tr>
         )}
+
+        {showItems && (
+          <>
+            {visibleItems.map((item) => (
+              <MetricsTableRow key={item.key} item={item} renderRowHeader={renderRowHeader} />
+            ))}
+
+            {hasHiddenItems && (
+              <Table.Tr>
+                <Table.Td className={styles.showAllItems} colSpan={columnClassNames?.length || 1}>
+                  {showAllItems ? (
+                      <button
+                        onClick={() => setShowAllItems(false)}
+                        type="button"
+                        className={styles.showAllItemsButton}
+                      >
+                        Show less
+                      </button>
+                    ) : (
+                      <button
+                        onClick={() => setShowAllItems(true)}
+                        type="button"
+                        className={styles.showAllItemsButton}
+                      >
+                        Show all
+                      </button>
+                    )
+                  }
+                </Table.Td>
+              </Table.Tr>
+            )}
+          </>
+        )}
       </Table.TBody>
     </Table>
   );

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

@@ -67,6 +67,23 @@
   text-align: center;
 }
 
+.root .showAllItems {
+  background: none !important;
+  text-align: center;
+}
+
+/** show all */
+.showAllItemsButton {
+  appearance: none;
+  background: none;
+  margin: 0;
+  border: 0;
+  padding: var(--space-xxxsmall);
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
 /** Breakpoints */
 .root tr {
   display: flex;

package/src/hooks/search-params.js

@@ -1,4 +1,4 @@
-import { useCallback, useLayoutEffect, useReducer } from 'react';
+import { useCallback, useLayoutEffect, useMemo, useReducer } from 'react';
 import isEqual from 'lodash/isEqual';
 import merge from 'lodash/merge';
 
@@ -150,14 +150,26 @@ export const useSearchParams = ({
     dispatch({ type: ACTION_RESET_ALL });
   }, [dispatch]);
 
-  return {
-    search,
-    searchPattern,
-    filters,
-    hasActiveFilters: !isEqual(allEntriesFilters, filters),
-    updateSearch: handleUpdateSearch,
-    updateFilters: handleUpdateFilters,
-    resetFilters: handleResetFilters,
-    resetAllFilters: handleResetAllFilters,
-  };
+  return useMemo(
+    () => ({
+      search,
+      searchPattern,
+      filters,
+      hasActiveFilters: !isEqual(allEntriesFilters, filters),
+      updateSearch: handleUpdateSearch,
+      updateFilters: handleUpdateFilters,
+      resetFilters: handleResetFilters,
+      resetAllFilters: handleResetAllFilters,
+    }),
+    [
+      search,
+      searchPattern,
+      filters,
+      allEntriesFilters,
+      handleUpdateSearch,
+      handleUpdateFilters,
+      handleResetFilters,
+      handleResetAllFilters,
+    ],
+  );
 };

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

@@ -29,11 +29,11 @@
 /** default: medium */
 .root {
   border-radius: var(--radius-medium);
-  padding: var(--space-xxxsmall);
+  padding: calc(var(--space-xxxsmall) / 2) var(--space-xxxsmall);
   min-width: var(--space-small);
   height: var(--space-small);
   font-size: 9px;
-  line-height: 1;
+  line-height: var(--space-xsmall);
 }
 
 .small {

package/tsconfig.json

@@ -1,4 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["src/**/*"],
+  "compilerOptions": {
+    "jsx": "react"
+  }
 }

package/types/app/app.d.ts

@@ -1 +1 @@
-export function App(props: any): any;
+export function App(props: any): JSX.Element;

package/types/app/header/header.d.ts

@@ -1,11 +1,11 @@
 export function Header({ className, jobs }: {
     className: any;
     jobs: any;
-}): any;
+}): JSX.Element;
 export namespace Header {
     namespace propTypes {
-        const className: any;
-        const jobs: any;
+        const className: PropTypes.Requireable<string>;
+        const jobs: PropTypes.Requireable<(object | null | undefined)[]>;
     }
     namespace defaultProps {
         const className_1: string;
@@ -14,3 +14,4 @@ export namespace Header {
         export { jobs_1 as jobs };
     }
 }
+import PropTypes from "prop-types";

package/types/assets/icons.svg.d.ts

@@ -1 +1 @@
-export function SvgIcons(props: any): any;
+export function SvgIcons(props: any): JSX.Element;

package/types/components/asset-info/asset-info.d.ts

@@ -1,11 +1,16 @@
-export function AssetInfo(props: any): any;
+export function AssetInfo(props: any): JSX.Element;
 export namespace AssetInfo {
     namespace propTypes {
-        const className: any;
-        const item: any;
-        const labels: any;
-        const chunks: any;
-        const CustomComponentLink: any;
+        const className: PropTypes.Requireable<string>;
+        const item: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            runs: PropTypes.Requireable<(PropTypes.InferProps<{
+                name: PropTypes.Requireable<string>;
+                chunkId: PropTypes.Requireable<string>;
+            }> | null | undefined)[]>;
+        }>>>;
+        const labels: PropTypes.Validator<(string | null | undefined)[]>;
+        const chunks: PropTypes.Requireable<any[]>;
+        const CustomComponentLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
     }
     namespace defaultProps {
         const className_1: string;
@@ -15,4 +20,5 @@ export namespace AssetInfo {
         export { ComponentLink as CustomComponentLink };
     }
 }
+import PropTypes from "prop-types";
 import { ComponentLink } from "../component-link";

package/types/components/browsertime-table/browsertime-table.d.ts

@@ -1,13 +1,14 @@
-export function BrowsertimeTable(props: any): any;
+export function BrowsertimeTable(props: any): JSX.Element;
 export namespace BrowsertimeTable {
     namespace defaultProps {
         const className: string;
         const jobs: never[];
     }
     namespace propTypes {
-        const className_1: any;
+        const className_1: PropTypes.Requireable<string>;
         export { className_1 as className };
-        const jobs_1: any;
+        const jobs_1: PropTypes.Requireable<any[]>;
         export { jobs_1 as jobs };
     }
 }
+import PropTypes from "prop-types";

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

@@ -1,4 +1,4 @@
-export function BundleAssets(props: any): any;
+export function BundleAssets(props: any): JSX.Element;
 export namespace BundleAssets {
     namespace defaultProps {
         export const className: string;
@@ -7,24 +7,45 @@ export namespace BundleAssets {
         export { ComponentLink as customComponentLink };
     }
     namespace propTypes {
-        const className_1: any;
+        const className_1: PropTypes.Requireable<string>;
         export { className_1 as className };
-        export const jobs: any;
-        export const items: any;
-        export const updateFilters: any;
-        export const resetFilters: any;
-        export const resetAllFilters: any;
-        const totalRowCount_1: any;
+        export const 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 const items: PropTypes.Validator<(PropTypes.InferProps<{
+            key: PropTypes.Requireable<string>;
+            label: PropTypes.Requireable<string>;
+            runs: PropTypes.Requireable<(PropTypes.InferProps<{
+                displayValue: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+                displayDelta: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+            }> | null | undefined)[]>;
+        }> | null | undefined)[]>;
+        export const updateFilters: PropTypes.Validator<(...args: any[]) => any>;
+        export const resetFilters: PropTypes.Validator<(...args: any[]) => any>;
+        export const resetAllFilters: PropTypes.Validator<(...args: any[]) => any>;
+        const totalRowCount_1: PropTypes.Requireable<number>;
         export { totalRowCount_1 as totalRowCount };
-        export const filters: any;
-        const hasActiveFilters_1: any;
+        export const filters: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            changed: PropTypes.Requireable<boolean>;
+        }>>>;
+        const hasActiveFilters_1: PropTypes.Requireable<boolean>;
         export { hasActiveFilters_1 as hasActiveFilters };
-        export const sortFields: any;
-        export const search: any;
-        export const updateSearch: any;
-        export const sort: any;
-        export const updateSort: any;
-        export const customComponentLink: any;
+        export const sortFields: PropTypes.Validator<NonNullable<PropTypes.InferProps<{}>>>;
+        export const search: PropTypes.Validator<string>;
+        export const updateSearch: PropTypes.Validator<(...args: any[]) => any>;
+        export const sort: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            sortBy: PropTypes.Requireable<string>;
+            direction: PropTypes.Requireable<string>;
+        }>>>;
+        export const updateSort: PropTypes.Validator<(...args: any[]) => any>;
+        export const customComponentLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
     }
 }
 import { ComponentLink } from "../component-link";
+import PropTypes from "prop-types";

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

@@ -1,12 +1,12 @@
-export function BundleAssets(props: any): any;
+export function BundleAssets(props: any): JSX.Element;
 export namespace BundleAssets {
     namespace propTypes {
-        const jobs: any;
-        const filters: any;
-        const search: any;
-        const sortBy: any;
-        const direction: any;
-        const setState: any;
+        const jobs: PropTypes.Validator<(object | null | undefined)[]>;
+        const filters: PropTypes.Requireable<object>;
+        const search: PropTypes.Requireable<string>;
+        const sortBy: PropTypes.Requireable<string>;
+        const direction: PropTypes.Requireable<string>;
+        const setState: PropTypes.Validator<(...args: any[]) => any>;
     }
     namespace defaultProps {
         const filters_1: undefined;
@@ -19,3 +19,4 @@ export namespace BundleAssets {
         export { direction_1 as direction };
     }
 }
+import PropTypes from "prop-types";

package/types/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.d.ts

@@ -2,17 +2,20 @@ export function BundleAssetsTotalsChartBars({ className, jobs, customComponentLi
     className: any;
     jobs: any;
     customComponentLink: any;
-}): any;
+}): JSX.Element;
 export namespace BundleAssetsTotalsChartBars {
     namespace defaultProps {
         export const className: string;
         export { ComponentLink as customComponentLink };
     }
     namespace propTypes {
-        const className_1: any;
+        const className_1: PropTypes.Requireable<string>;
         export { className_1 as className };
-        export const jobs: any;
-        export const customComponentLink: any;
+        export const jobs: PropTypes.Validator<(PropTypes.InferProps<{
+            internalBuildNumber: PropTypes.Requireable<number>;
+        }> | null | undefined)[]>;
+        export const customComponentLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
     }
 }
 import { ComponentLink } from "../component-link";
+import PropTypes from "prop-types";

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

@@ -3,7 +3,7 @@ export function BundleAssetsTotalsTable({ className, jobs, customComponentLink:
     className: any;
     jobs: any;
     customComponentLink: any;
-}): any;
+}): JSX.Element;
 export namespace BundleAssetsTotalsTable {
     namespace defaultProps {
         export const className: string;
@@ -11,11 +11,12 @@ export namespace BundleAssetsTotalsTable {
         export { ComponentLink as customComponentLink };
     }
     namespace propTypes {
-        const className_1: any;
+        const className_1: PropTypes.Requireable<string>;
         export { className_1 as className };
-        const jobs_1: any;
+        const jobs_1: PropTypes.Requireable<any[]>;
         export { jobs_1 as jobs };
-        export const customComponentLink: any;
+        export const customComponentLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
     }
 }
 import { ComponentLink } from "../component-link";
+import PropTypes from "prop-types";

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

@@ -15,7 +15,7 @@ export function BundleModules({ className, jobs, items, chunks, totalRowCount, u
     updateSearch: any;
     hasActiveFilters: any;
     customComponentLink: any;
-}): any;
+}): JSX.Element;
 export namespace BundleModules {
     namespace defaultProps {
         export const className: string;
@@ -26,27 +26,36 @@ export namespace BundleModules {
         export { ComponentLink as customComponentLink };
     }
     namespace propTypes {
-        const className_1: any;
+        const className_1: PropTypes.Requireable<string>;
         export { className_1 as className };
-        const items_1: any;
+        const items_1: PropTypes.Requireable<any[]>;
         export { items_1 as items };
-        const jobs_1: any;
+        const jobs_1: PropTypes.Requireable<any[]>;
         export { jobs_1 as jobs };
-        export const chunks: any;
-        const totalRowCount_1: any;
+        export const chunks: PropTypes.Validator<(PropTypes.InferProps<{
+            id: PropTypes.Requireable<string>;
+            name: PropTypes.Requireable<string>;
+        }> | null | undefined)[]>;
+        const totalRowCount_1: PropTypes.Requireable<number>;
         export { totalRowCount_1 as totalRowCount };
-        export const updateFilters: any;
-        export const resetFilters: any;
-        export const resetAllFilters: any;
-        export const filters: any;
-        const hasActiveFilters_1: any;
+        export const updateFilters: PropTypes.Validator<(...args: any[]) => any>;
+        export const resetFilters: PropTypes.Validator<(...args: any[]) => any>;
+        export const resetAllFilters: PropTypes.Validator<(...args: any[]) => any>;
+        export const filters: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            changed: PropTypes.Requireable<boolean>;
+        }>>>;
+        const hasActiveFilters_1: PropTypes.Requireable<boolean>;
         export { hasActiveFilters_1 as hasActiveFilters };
-        export const sortFields: any;
-        export const sort: any;
-        export const updateSort: any;
-        export const search: any;
-        export const updateSearch: any;
-        export const customComponentLink: any;
+        export const sortFields: PropTypes.Validator<NonNullable<PropTypes.InferProps<{}>>>;
+        export const sort: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            sortBy: PropTypes.Requireable<string>;
+            direction: PropTypes.Requireable<string>;
+        }>>>;
+        export const updateSort: PropTypes.Validator<(...args: any[]) => any>;
+        export const search: PropTypes.Validator<string>;
+        export const updateSearch: PropTypes.Validator<(...args: any[]) => any>;
+        export const customComponentLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
     }
 }
 import { ComponentLink } from "../component-link";
+import PropTypes from "prop-types";

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

@@ -1,12 +1,12 @@
-export function BundleModules(props: any): any;
+export function BundleModules(props: any): JSX.Element;
 export namespace BundleModules {
     namespace propTypes {
-        const jobs: any;
-        const filters: any;
-        const search: any;
-        const sortBy: any;
-        const direction: any;
-        const setState: any;
+        const jobs: PropTypes.Validator<(object | null | undefined)[]>;
+        const filters: PropTypes.Requireable<object>;
+        const search: PropTypes.Requireable<string>;
+        const sortBy: PropTypes.Requireable<string>;
+        const direction: PropTypes.Requireable<string>;
+        const setState: PropTypes.Validator<(...args: any[]) => any>;
     }
     namespace defaultProps {
         const filters_1: undefined;
@@ -19,3 +19,4 @@ export namespace BundleModules {
         export { direction_1 as direction };
     }
 }
+import PropTypes from "prop-types";