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

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/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/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 };
+    }
+}

package/types/components/component-link.d.ts

@@ -0,0 +1,19 @@
+export function ComponentLink({ section, title, params, ...props }: {
+    [x: string]: any;
+    section: any;
+    title: any;
+    params: any;
+}): any;
+export namespace ComponentLink {
+    namespace propTypes {
+        const section: any;
+        const title: any;
+        const params: any;
+    }
+    namespace defaultProps {
+        const title_1: string;
+        export { title_1 as title };
+        const params_1: {};
+        export { params_1 as params };
+    }
+}

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

@@ -0,0 +1,20 @@
+export function Delta({ className, displayValue, deltaType, inverted }: {
+    className: any;
+    displayValue: any;
+    deltaType: any;
+    inverted: any;
+}): any;
+export namespace Delta {
+    namespace defaultProps {
+        const className: string;
+        const inverted: boolean;
+    }
+    namespace propTypes {
+        const className_1: any;
+        export { className_1 as className };
+        export const displayValue: any;
+        export const deltaType: any;
+        const inverted_1: any;
+        export { inverted_1 as inverted };
+    }
+}

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

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

package/types/components/duplicate-packages-warning/duplicate-packages-warning.d.ts

@@ -0,0 +1,17 @@
+export function DuplicatePackagesWarning(props: any): any;
+export namespace DuplicatePackagesWarning {
+    namespace propTypes {
+        const className: any;
+        const customComponentLink: any;
+        const duplicatePackagesCount: any;
+        const showDelta: any;
+    }
+    namespace defaultProps {
+        const className_1: string;
+        export { className_1 as className };
+        export { ComponentLink as customComponentLink };
+        const showDelta_1: boolean;
+        export { showDelta_1 as showDelta };
+    }
+}
+import { ComponentLink } from "../component-link";

package/types/components/duplicate-packages-warning/index.d.ts

@@ -0,0 +1 @@
+export * from "./duplicate-packages-warning";

package/types/components/index.d.ts

@@ -0,0 +1,22 @@
+export { BrowsertimeTable } from "./browsertime-table";
+export { BundleAssets } from "./bundle-assets";
+export { BundleAssetsTotalsTable } from "./bundle-assets-totals-table";
+export { BundleAssetsTotalsChartBars } from "./bundle-assets-totals-chart-bars";
+export { BundlePackages } from "./bundle-packages";
+export { BundleModules } from "./bundle-modules";
+export { ComponentLink } from "./component-link";
+export { DuplicatePackagesWarning } from "./duplicate-packages-warning";
+export { Delta } from "./delta";
+export { JobName } from "./job-name";
+export { JobHeader } from "./job-header";
+export { JobsHeader } from "./jobs-header";
+export { LighthouseTable } from "./lighthouse-table";
+export { Metric } from "./metric";
+export { MetricsTable } from "./metrics-table";
+export { MetricsTableOptions } from "./metrics-table-options";
+export { MetricsTableSearch } from "./metrics-table-search";
+export { MetricsTableTitle } from "./metrics-table-title";
+export { ModuleInfo } from "./module-info";
+export { SummaryItem } from "./summary-item";
+export { Summary } from "./summary";
+export { TotalSizeTypeTitle } from "./total-size-type-title";

package/types/components/job-header/index.d.ts

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