@bundle-stats/ui 4.1.5-alpha.0 → 4.1.5

package/src/components/module-info/module-info.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { isEmpty, find, noop } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
+import noop from 'lodash/noop';
 import { getBundleModulesByChunk } from '@bundle-stats/utils';
 
 import { Stack } from '../../layout/stack';
@@ -32,7 +33,7 @@ export const ModuleInfo = (props) => {
               <div className={css.chunks}>
                 <span className={css.chunksTitle}>Chunks:</span>
                 {run.chunkIds.map((chunkId) => {
-                  const chunk = find(chunks, { id: chunkId });
+                  const chunk = chunks?.find(({ id }) => id === chunkId);
 
                   if (!chunk) {
                     return null;

package/src/components/summary/summary.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { get } from 'lodash';
+import get from 'lodash/get';
 import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
 
 import { METRICS_WEBPACK_GENERAL } from '../../constants';

package/src/components/summary-item/summary-item.jsx

@@ -13,8 +13,7 @@ import { Delta } from '../delta';
 import css from './summary-item.module.css';
 
 const MetricInfo = ({ description, url }) => {
-  // The component parent can be rendered inside an anchor tag, using button
-  // to avoid using nesting links
+  // The component parent can be rendered inside a link, use button to avoid using nested links
   const onClick = useCallback(() => {
     if (url) {
       window.open(url);

package/src/components/summary-item/summary-item.module.css

@@ -6,11 +6,6 @@
   white-space: nowrap;
 }
 
-.titleIcon {
-  opacity: 0;
-  pointer-events: none;
-}
-
 .currentMetric {
   color: var(--color-heading);
   font-size: var(--size-large);
@@ -41,13 +36,6 @@
   text-decoration: none;
 }
 
-/* Hover state */
-.root:hover .titleIcon {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-
 /* Loading state */
 .loading.currentMetric {
   width: 8em;

package/src/hooks/rows-sort.js

@@ -1,5 +1,5 @@
 import { useState, useMemo } from 'react';
-import { orderBy } from 'lodash';
+import orderBy from 'lodash/orderBy';
 
 export const useRowsSort = ({
   rows,

package/src/hooks/search-params.js

@@ -1,5 +1,6 @@
 import { useCallback, useLayoutEffect, useReducer } from 'react';
-import { isEqual, merge } from 'lodash';
+import isEqual from 'lodash/isEqual';
+import merge from 'lodash/merge';
 
 const ACTION_SET_FILTERS = 'SET_FILTERS';
 const ACTION_SET_SEARCH = 'SET_SEARCH';

package/src/layout/index.js

@@ -1,7 +1,5 @@
 export { Box } from './box';
 export { Footer } from './footer';
-export { Header } from './header';
 export { Separator } from './separator';
-export { SubHeader } from './sub-header';
 export { Stack } from './stack';
 export { FlexStack } from './flex-stack';

package/src/query-state.jsx

@@ -2,7 +2,8 @@ import React, { useCallback } from 'react';
 import { JsonParam, QueryParamProvider, useQueryParams } from 'use-query-params';
 import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5'
 import { parse, stringify } from 'query-string'
-import { isEqual, merge } from 'lodash';
+import isEqual from 'lodash/isEqual';
+import merge from 'lodash/merge';
 
 export const QueryStateProvider = (props) => (
   <QueryParamProvider

package/src/ui/filters/index.jsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { isEqual, merge } from 'lodash';
+import isEqual from 'lodash/isEqual';
+import merge from 'lodash/merge';
 
 import { getInitialValues } from './filters.utils';
 import { Filters as BaseComponent } from './filters';

package/src/ui/horizontal-bar-chart/horizontal-bar-chart.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { get, round, sum } from 'lodash';
+import round from 'lodash/round';
+import sum from 'lodash/sum';
 import cx from 'classnames';
 
 import { getColors } from '../../utils';
@@ -20,8 +21,8 @@ class HorizontalBarChartItem extends React.Component {
   }
 
   componentDidMount() {
-    const wrapperWidth = get(this, 'ref.current.clientWidth', 0);
-    const textWidth = get(this, 'textRef.current.scrollWidth', 0);
+    const wrapperWidth = this.ref?.current?.clientWidth || 0;
+    const textWidth = this.textRef?.current?.scrollWidth || 0;
 
     if (wrapperWidth >= (textWidth + 2 * 4)) {
       this.setState({ isTextOverflowing: false });

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import {
@@ -11,25 +11,24 @@ import {
 
 import css from './hover-card.module.css';
 
-const resolveComponent = (as, href) => {
-  if (as) {
-    return as;
-  }
-
-  if (href) {
-    return 'a';
-  }
-
-  return 'span';
-};
-
 export const HoverCard = (props) => {
   const { className, anchorClassName, hoverCardClassName, href, as, label, children } = props;
+
   const state = useHovercardState({ gutter: 8, timeout: 700 });
-  const hoverCardProps = useHovercard({ state, portal: true });
+  const hovercardProps = useHovercard({ state, portal: true });
 
   // Fallback to span if no href
-  const Component = resolveComponent(as, href);
+  const Component = useMemo(() => {
+    if (as) {
+      return as;
+    }
+
+    if (href) {
+      return 'a';
+    }
+
+    return 'span';
+  }, [as, href]);
 
   return (
     <div className={cx(css.root, className)}>
@@ -42,7 +41,7 @@ export const HoverCard = (props) => {
         {label}
       </HovercardAnchor>
       <Hovercard
-        {...hoverCardProps}
+        {...hovercardProps}
         state={state}
         className={cx(css.hoverCard, hoverCardClassName)}
         style={{ zIndex: 10000 }}

package/src/ui/index.js

@@ -9,7 +9,6 @@ export { HoverCard } from './hover-card';
 export { Icon } from './icon';
 export { Input } from './input';
 export { Loader } from './loader';
-export { Logo } from './logo';
 export { Panels } from './panels';
 export { Skeleton } from './skeleton';
 export { SortDropdown } from './sort-dropdown';

package/src/ui/skeleton/skeleton.module.css

@@ -1,19 +1,8 @@
-@keyframes anim {
-  from {
-    opacity: 0.06
-  }
-
-  to {
-    opacity: 0.12;
-  }
-}
-
 .root {
   background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
-  opacity: 0.06;
+  opacity: 0.05;
   pointer-events: none;
   min-width: 6em;
-  animation: 2s 1s infinite alternate anim;
 }
 
 /** empty char to keep the text height */

package/src/utils.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { chunk } from 'lodash';
+import chunk from 'lodash/chunk';
 import cx from 'classnames';
 
 import COLORS from './chart-colors.json';

package/tsconfig.esm.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "resolveJsonModule": true,
+    "target": "ES2019",
+    "module": "ES6",
+    "declaration": true,
+    "declarationDir": "./types",
+    "noEmit": false
+  },
+  "exclude": ["**/__tests__/*", "**/*.stories.jsx"]
+}

package/tsconfig.json

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

package/tsconfig.lib.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "resolveJsonModule": true,
+    "noEmit": false
+  },
+  "exclude": ["**/__tests__/*", "**/*.stories.jsx"]
+}

package/types/app/app.d.ts

@@ -0,0 +1 @@
+export function App(props: any): any;

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

@@ -0,0 +1,16 @@
+export function Header({ className, jobs }: {
+    className: any;
+    jobs: any;
+}): any;
+export namespace Header {
+    namespace propTypes {
+        const className: any;
+        const jobs: any;
+    }
+    namespace defaultProps {
+        const className_1: string;
+        export { className_1 as className };
+        const jobs_1: null;
+        export { jobs_1 as jobs };
+    }
+}

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

@@ -0,0 +1 @@
+export * from "./header";

package/types/app/index.d.ts

@@ -0,0 +1 @@
+export * from "./app";

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

@@ -0,0 +1 @@
+export function SvgIcons(props: any): any;

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

@@ -0,0 +1,18 @@
+export function AssetInfo(props: any): any;
+export namespace AssetInfo {
+    namespace propTypes {
+        const className: any;
+        const item: any;
+        const labels: any;
+        const chunks: any;
+        const CustomComponentLink: any;
+    }
+    namespace defaultProps {
+        const className_1: string;
+        export { className_1 as className };
+        const chunks_1: never[];
+        export { chunks_1 as chunks };
+        export { ComponentLink as CustomComponentLink };
+    }
+}
+import { ComponentLink } from "../component-link";

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

@@ -0,0 +1 @@
+export * from "./asset-info";

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

@@ -0,0 +1,13 @@
+export function BrowsertimeTable(props: any): any;
+export namespace BrowsertimeTable {
+    namespace defaultProps {
+        const className: string;
+        const jobs: never[];
+    }
+    namespace propTypes {
+        const className_1: any;
+        export { className_1 as className };
+        const jobs_1: any;
+        export { jobs_1 as jobs };
+    }
+}

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

@@ -0,0 +1 @@
+export * from "./browsertime-table";

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

@@ -0,0 +1,21 @@
+export const SORT_BY_NAME: "name";
+export const SORT_BY_SIZE: "size";
+export const SORT_BY_DELTA: "delta";
+export namespace SORT_BY {
+    namespace name {
+        const label: string;
+        const defaultDirection: string;
+    }
+    namespace delta {
+        const label_1: string;
+        export { label_1 as label };
+        const defaultDirection_1: string;
+        export { defaultDirection_1 as defaultDirection };
+    }
+    namespace size {
+        const label_2: string;
+        export { label_2 as label };
+        const defaultDirection_2: string;
+        export { defaultDirection_2 as defaultDirection };
+    }
+}

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

@@ -0,0 +1,30 @@
+export function BundleAssets(props: any): any;
+export namespace BundleAssets {
+    namespace defaultProps {
+        export const className: string;
+        export const totalRowCount: number;
+        export const hasActiveFilters: boolean;
+        export { ComponentLink as customComponentLink };
+    }
+    namespace propTypes {
+        const className_1: any;
+        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 { totalRowCount_1 as totalRowCount };
+        export const filters: any;
+        const hasActiveFilters_1: any;
+        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;
+    }
+}
+import { ComponentLink } from "../component-link";

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

@@ -0,0 +1,5 @@
+export function addRowAssetFlags(row: any): any;
+export function getIsNotPredictive(key: any, runs: any): any;
+export function addRowIsNotPredictive(row: any): any;
+export function getRowFilter(filters: any): (item: any) => boolean;
+export function getCustomSort(sortId: any): (item: any) => any;

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

@@ -0,0 +1,21 @@
+export function BundleAssets(props: any): any;
+export namespace BundleAssets {
+    namespace propTypes {
+        const jobs: any;
+        const filters: any;
+        const search: any;
+        const sortBy: any;
+        const direction: any;
+        const setState: any;
+    }
+    namespace defaultProps {
+        const filters_1: undefined;
+        export { filters_1 as filters };
+        const search_1: undefined;
+        export { search_1 as search };
+        const sortBy_1: undefined;
+        export { sortBy_1 as sortBy };
+        const direction_1: undefined;
+        export { direction_1 as direction };
+    }
+}

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

@@ -0,0 +1,18 @@
+export function BundleAssetsTotalsChartBars({ className, jobs, customComponentLink: CustomComponentLink, }: {
+    className: any;
+    jobs: any;
+    customComponentLink: any;
+}): any;
+export namespace BundleAssetsTotalsChartBars {
+    namespace defaultProps {
+        export const className: string;
+        export { ComponentLink as customComponentLink };
+    }
+    namespace propTypes {
+        const className_1: any;
+        export { className_1 as className };
+        export const jobs: any;
+        export const customComponentLink: any;
+    }
+}
+import { ComponentLink } from "../component-link";

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

@@ -0,0 +1 @@
+export * from "./bundle-assets-totals-chart-bars";

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

@@ -0,0 +1,21 @@
+export function BundleAssetsTotalsTable({ className, jobs, customComponentLink: CustomComponentLink, ...restProps }: {
+    [x: string]: any;
+    className: any;
+    jobs: any;
+    customComponentLink: any;
+}): any;
+export namespace BundleAssetsTotalsTable {
+    namespace defaultProps {
+        export const className: string;
+        export const jobs: never[];
+        export { ComponentLink as customComponentLink };
+    }
+    namespace propTypes {
+        const className_1: any;
+        export { className_1 as className };
+        const jobs_1: any;
+        export { jobs_1 as jobs };
+        export const customComponentLink: any;
+    }
+}
+import { ComponentLink } from "../component-link";

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

@@ -0,0 +1 @@
+export * from "./bundle-assets-totals-table";

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

@@ -0,0 +1,21 @@
+export const SORT_BY_NAME: "name";
+export const SORT_BY_SIZE: "size";
+export const SORT_BY_DELTA: "delta";
+export namespace SORT_BY {
+    namespace name {
+        const label: string;
+        const defaultDirection: string;
+    }
+    namespace delta {
+        const label_1: string;
+        export { label_1 as label };
+        const defaultDirection_1: string;
+        export { defaultDirection_1 as defaultDirection };
+    }
+    namespace size {
+        const label_2: string;
+        export { label_2 as label };
+        const defaultDirection_2: string;
+        export { defaultDirection_2 as defaultDirection };
+    }
+}

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

@@ -0,0 +1,52 @@
+export function BundleModules({ className, jobs, items, chunks, totalRowCount, updateFilters, resetFilters, resetAllFilters, filters, sortFields, sort, updateSort, search, updateSearch, hasActiveFilters, customComponentLink: CustomComponentLink, }: {
+    className: any;
+    jobs: any;
+    items: any;
+    chunks: any;
+    totalRowCount: any;
+    updateFilters: any;
+    resetFilters: any;
+    resetAllFilters: any;
+    filters: any;
+    sortFields: any;
+    sort: any;
+    updateSort: any;
+    search: any;
+    updateSearch: any;
+    hasActiveFilters: any;
+    customComponentLink: any;
+}): any;
+export namespace BundleModules {
+    namespace defaultProps {
+        export const className: string;
+        export const items: never[];
+        export const jobs: never[];
+        export const totalRowCount: number;
+        export const hasActiveFilters: boolean;
+        export { ComponentLink as customComponentLink };
+    }
+    namespace propTypes {
+        const className_1: any;
+        export { className_1 as className };
+        const items_1: any;
+        export { items_1 as items };
+        const jobs_1: any;
+        export { jobs_1 as jobs };
+        export const chunks: any;
+        const totalRowCount_1: any;
+        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 { 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;
+    }
+}
+import { ComponentLink } from "../component-link";

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

@@ -0,0 +1,8 @@
+export function addRowSourceFlag(row: any): any;
+export function getCustomSort(sortBy: any): (item: any) => any;
+export function getRowFilter(filters: any): (row: any) => boolean;
+export function useModuleFilterByChunk({ jobs, filters, chunkIds }: {
+    jobs: any;
+    filters: any;
+    chunkIds: any;
+}): any;

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

@@ -0,0 +1,21 @@
+export function BundleModules(props: any): any;
+export namespace BundleModules {
+    namespace propTypes {
+        const jobs: any;
+        const filters: any;
+        const search: any;
+        const sortBy: any;
+        const direction: any;
+        const setState: any;
+    }
+    namespace defaultProps {
+        const filters_1: undefined;
+        export { filters_1 as filters };
+        const search_1: undefined;
+        export { search_1 as search };
+        const sortBy_1: undefined;
+        export { sortBy_1 as sortBy };
+        const direction_1: undefined;
+        export { direction_1 as direction };
+    }
+}

package/types/components/bundle-packages/bundle-packages.constants.d.ts

@@ -0,0 +1,21 @@
+export const SORT_BY_NAME: "name";
+export const SORT_BY_SIZE: "size";
+export const SORT_BY_DELTA: "delta";
+export namespace SORT_BY {
+    namespace name {
+        const label: string;
+        const defaultDirection: string;
+    }
+    namespace delta {
+        const label_1: string;
+        export { label_1 as label };
+        const defaultDirection_1: string;
+        export { defaultDirection_1 as defaultDirection };
+    }
+    namespace size {
+        const label_2: string;
+        export { label_2 as label };
+        const defaultDirection_2: string;
+        export { defaultDirection_2 as defaultDirection };
+    }
+}

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

@@ -0,0 +1,30 @@
+export function BundlePackages(props: any): any;
+export namespace BundlePackages {
+    namespace defaultProps {
+        export const className: string;
+        export const totalRowCount: number;
+        export const hasActiveFilters: boolean;
+        export { ComponentLink as customComponentLink };
+    }
+    namespace propTypes {
+        const className_1: any;
+        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 { totalRowCount_1 as totalRowCount };
+        export const filters: any;
+        const hasActiveFilters_1: any;
+        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;
+    }
+}
+import { ComponentLink } from "../component-link";

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

@@ -0,0 +1,4 @@
+export function getDuplicatePackages(jobs: any): any[];
+export function getRowFilter(filters: any): (item: any) => boolean;
+export function getCustomSort(sortId: any): (item: any) => any;
+export function getAddRowDuplicateFlag(duplicateJobs: any): (row: any) => any;

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

@@ -0,0 +1,21 @@
+export function BundlePackages(props: any): any;
+export namespace BundlePackages {
+    namespace propTypes {
+        const jobs: any;
+        const filters: any;
+        const search: any;
+        const sortBy: any;
+        const direction: any;
+        const setState: any;
+    }
+    namespace defaultProps {
+        const filters_1: undefined;
+        export { filters_1 as filters };
+        const search_1: undefined;
+        export { search_1 as search };
+        const sortBy_1: undefined;
+        export { sortBy_1 as sortBy };
+        const direction_1: undefined;
+        export { direction_1 as direction };
+    }
+}