@bundle-stats/ui 4.5.2 → 4.5.3-alpha.3

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

@@ -12,24 +12,29 @@
 
 /* columns */
 .metricName {
-  width: 100%;
+  width: 55%;
 }
 
 .root .job {
-  padding-right: calc(var(--space-xxxsmall) + var(--space-small));
   text-align: right;
 }
 
 .root .value {
-  padding-left: var(--space-large);
   text-align: right;
   vertical-align: baseline;
+  width: 15%;
 }
 
 .root .delta {
   text-align: right;
   font-size: var(--size-xsmall);
   vertical-align: baseline;
+  width: 10%;
+  color: pink;
+}
+
+.root .deltaPercentage {
+  width: 5%;
 }
 
 .root tbody .delta {

package/src/components/run-info/run-info.module.css

@@ -3,7 +3,14 @@
   font-weight: bold;
   font-size: var(--size-xsmall);
   text-transform: uppercase;
+}
+
+.titleText {
+  max-width: 100%;
+  flex: 1 1 auto;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .titleIcon {
@@ -55,16 +62,8 @@
 }
 
 /* Size variation */
-.small .info {
-  margin-top: var(--space-xxxsmall);
-}
-
 .small .currentMetric {
-  font-size: var(--size-xlarge);
-}
-
-.large .info {
-  margin-top: var(--space-xxsmall);
+  font-size: var(--size-large);
 }
 
 .large .currentMetric {

package/src/components/run-info/run-info.tsx

@@ -59,7 +59,12 @@ export const RunInfo = ({
   enhance = false,
   ...restProps
 }: RunInfoProps & React.ComponentProps<'div'>) => {
-  const rootClassName = cx(css.root, className, css[size], (delta || deltaPercentage) && css.showDelta);
+  const rootClassName = cx(
+    css.root,
+    className,
+    css[size],
+    (delta || deltaPercentage) && css.showDelta,
+  );
 
   const currentValueParams: [React.ReactNode, string?] = useMemo(() => {
     if (!enhance || typeof current !== 'string') {
@@ -73,7 +78,7 @@ export const RunInfo = ({
     <Component className={rootClassName} {...restProps}>
       {title && (
         <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.title}>
-          <span>{title}</span>
+          <span className={css.titleText}>{title}</span>
           {titleHoverCard && (
             <HoverCard
               label={<Icon glyph={Icon.ICONS.HELP} />}
@@ -102,11 +107,17 @@ export const RunInfo = ({
               <FlexStack space="xxxsmall" alignItems="center">
                 {deltaPercentage && (
                   <FlexStack space="xxxsmall" alignItems="center">
-                    <Delta className={css.delta} displayValue={deltaPercentage} deltaType={deltaType} />
+                    <Delta
+                      className={css.delta}
+                      displayValue={deltaPercentage}
+                      deltaType={deltaType}
+                    />
                     {' / '}
                   </FlexStack>
                 )}
-                {delta && <Delta className={css.delta} displayValue={delta} deltaType={deltaType} />}
+                {delta && (
+                  <Delta className={css.delta} displayValue={delta} deltaType={deltaType} />
+                )}
               </FlexStack>
             )}
           </Metric>

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

@@ -3,6 +3,14 @@
   width: 100%;
 }
 
+.wrapper {
+  width: 100%;
+}
+
+.wrapper + .wrapper {
+  margin-top: var(--summary-gap);
+}
+
 .items {
   display: flex;
   flex-wrap: wrap;
@@ -14,10 +22,14 @@
 .item {
   margin: var(--summary-gap) 0 0 var(--summary-gap);
   flex: 1 0 10%; /* force equal sizes */
-  min-width: 14em;
+  min-width: 12em;
   text-decoration: none;
 }
 
+.itemSmall {
+  min-width: 8em;
+}
+
 .readMoreLink {
   appearance: none;
   background: none;

package/src/components/summary/summary.tsx

@@ -3,12 +3,23 @@ import cx from 'classnames';
 import get from 'lodash/get';
 import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
 
-import { METRICS_WEBPACK_GENERAL } from '../../constants';
+import {
+  METRICS_WEBPACK_ASSETS,
+  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,
+];
+
 interface SummaryItemProps {
   metricId: string;
   data?: Record<string, SummaryItemData> | null;
@@ -63,8 +74,6 @@ interface SummaryItemData {
 }
 
 interface SummaryProps {
-  size?: MetricRunInfoProps['size'];
-  keys?: Array<string>;
   data?: SummaryItemProps['data'];
   loading?: boolean;
   showSummaryItemDelta?: SummaryItemProps['showDelta'];
@@ -74,8 +83,6 @@ interface SummaryProps {
 
 export const Summary = ({
   className = '',
-  size = 'medium',
-  keys = METRICS_WEBPACK_GENERAL,
   data = null,
   loading = false,
   showSummaryItemDelta = true,
@@ -83,20 +90,38 @@ export const Summary = ({
   summaryItemLink = ComponentLink,
 }: SummaryProps & React.ComponentProps<'div'>) => (
   <Box className={cx(css.root, className)}>
-    <div className={css.items}>
-        {keys.map((metricId) => (
+    <div className={css.wrapper}>
+      <div className={css.items}>
+        {METRICS_WEBPACK_GENERAL.map((metricId) => (
           <SummaryItem
             key={metricId}
             className={css.item}
             metricId={metricId}
             data={data}
-            customLink={summaryItemLink}
-            size={size}
             loading={loading}
+            customLink={summaryItemLink}
             showDelta={showSummaryItemDelta}
             showBaseline={showSummaryItemBaseline}
           />
         ))}
       </div>
+    </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}
+            size="small"
+            loading={loading}
+            showDelta={showSummaryItemDelta}
+            showBaseline={false}
+          />
+        ))}
+      </div>
+    </div>
   </Box>
 );

package/src/css/variables.css

@@ -29,20 +29,19 @@
   /*
    * Color scheme:
    * https://coolors.co/287acc-da444e-55b950-f6e179-192339
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23f6e179&mcgpalette3=%23505861&mcgpalette4=%23287acc&themename=mcgtheme
+   * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23f3d966&mcgpalette3=%23353138&mcgpalette4=%23287acc&themename=mcgtheme
+   * https://hihayk.github.io/scale/#4/5/50/90/-51/0/0/14/353138/53/49/56/white
    */
-  --color-gray-25: #f7f7f9;
-  --color-gray-50: #ececee;
-  --color-gray-100: #ced0d4;
-  --color-gray-200: #aeb1b7;
-  --color-gray-300: #8e929a;
-  --color-gray-400: #757a85;
-  --color-gray-500: #5d636f;
-  --color-gray-600: #555b67;
-  --color-gray-700: #4b515c;
-  --color-gray-800: #414752;
-  --color-gray-900: #303540;
-
+  --color-gray-25: #f9f9fa;
+  --color-gray-50: #e8e8e9;
+  --color-gray-200: #a2a0a4;
+  --color-gray-300: #7e7b80;
+  --color-gray-400: #59565c;
+  --color-gray-500: #353138;
+  --color-gray-600: #302b31;
+  --color-gray-700: #2a252a;
+  --color-gray-800: #231e22;
+  --color-gray-900: #1c181b;
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
@@ -103,17 +102,17 @@
   --color-green-dark: var(--color-green-700);
   --color-green-ultra-dark: var(--color-green-900);
 
-  --color-yellow-25: #FFFDF2;
-  --color-yellow-50: #fefbef;
-  --color-yellow-100: #fcf6d7;
-  --color-yellow-200: #fbf0bc;
-  --color-yellow-300: #f9eaa1;
-  --color-yellow-400: #f7e68d;
-  --color-yellow-500: #f6e179;
-  --color-yellow-600: #f5dd71;
-  --color-yellow-700: #f3d966;
-  --color-yellow-800: #f2d55c;
-  --color-yellow-900: #efcd49;
+  --color-yellow-25: #fffdf2;
+  --color-yellow-50: #fefaed;
+  --color-yellow-100: #fbf4d1;
+  --color-yellow-200: #f9ecb3;
+  --color-yellow-300: #f7e494;
+  --color-yellow-400: #f5df7d;
+  --color-yellow-500: #f3d966;
+  --color-yellow-600: #f1d55e;
+  --color-yellow-700: #efcf53;
+  --color-yellow-800: #edca49;
+  --color-yellow-900: #eac038;
 
   --color-yellow-light-background: var(--color-yellow-25);
   --color-yellow-ultra-light: var(--color-yellow-100);
@@ -196,7 +195,7 @@
   --outline-hover: 0 0 0 3px var(--color-highlight);
 
   /** Layout */
-  --max-width: 80rem;
+  --max-width: 94rem;
   --entry-info-width: 640px;
   --entry-info-top: var(--header-height);
 }

package/src/ui/dropdown/dropdown.module.css

@@ -62,6 +62,10 @@
   text-decoration: none;
 }
 
+.item + .item {
+  margin-top: calc(var(--space-xxxsmall) / 2);
+}
+
 .item[data-active-item],
 .item:hover,
 .item:focus,

package/src/ui/filters/filters.module.css

@@ -28,20 +28,43 @@
 }
 
 .filterOnlyButton {
-  padding: var(--space-xxxsmall);
+  padding: calc(var(--space-xxxsmall) / 2 - 1px) var(--space-xxxsmall);
   display: none;
   appearance: none;
   border: none;
-  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--color-highlight) 30%);
+  border-radius: var(--radius-small);
   cursor: pointer;
   position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
+  right: 1px;
+  top: 1px;
+  bottom: 1px;
+  transition: var(--transition-in);
+  background: var(--color-info);
+  color: var(--color-background);
   font-size: var(--size-small);
   line-height: var(--space-xsmall);
 }
 
+.filterOnlyButton:hover,
+.filterOnlyButton:active,
+.filterOnlyButton:focus {
+  transition: var(--transition-out);
+  background: var(--color-info-dark);
+  color: var(--color-background);
+}
+
+/** cover item text */
+.filterOnlyButton::before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 100%;
+  bottom: 0;
+  width: var(--space-medium);
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--color-highlight) 75%);
+}
+
 /** filter disabled state */
 .filterInput[disabled] + .filterLabel {
   color: var(--color-text-light);

package/types/app/app.d.ts

@@ -1 +1,2 @@
-export function App(props: any): JSX.Element;
+export function App(props: any): React.JSX.Element;
+import React from 'react';

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

@@ -3,5 +3,5 @@ import { JobsHeader } from '../../components/jobs-header';
 interface HeaderProps {
     jobs: React.ComponentProps<typeof JobsHeader>['jobs'];
 }
-export declare const Header: ({ className, jobs }: HeaderProps & React.ComponentProps<'header'>) => JSX.Element;
+export declare const Header: ({ className, jobs }: HeaderProps & React.ComponentProps<'header'>) => React.JSX.Element;
 export {};

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

@@ -1 +1,2 @@
-export function SvgIcons(props: any): JSX.Element;
+export function SvgIcons(props: any): React.JSX.Element;
+import * as React from 'react';

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

@@ -17,5 +17,5 @@ interface AssetInfoProps {
     customComponentLink?: React.ElementType;
     onClose: () => void;
 }
-export declare const AssetInfo: (props: AssetInfoProps & React.ComponentProps<'div'>) => JSX.Element;
+export declare const AssetInfo: (props: AssetInfoProps & React.ComponentProps<'div'>) => React.JSX.Element;
 export {};

package/types/components/asset-not-predictive/asset-not-predictive.d.ts

@@ -4,5 +4,5 @@ interface AssetNotPredictiveProps {
     runs?: Array<Asset>;
     labels?: Array<string>;
 }
-export declare const AssetNotPredictive: (props: AssetNotPredictiveProps & React.ComponentProps<'div'>) => JSX.Element;
+export declare const AssetNotPredictive: (props: AssetNotPredictiveProps & React.ComponentProps<'div'>) => React.JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-export function BrowsertimeTable(props: any): JSX.Element;
+export function BrowsertimeTable(props: any): React.JSX.Element;
 export namespace BrowsertimeTable {
     namespace defaultProps {
         let className: string;
@@ -11,4 +11,5 @@ export namespace BrowsertimeTable {
         export { jobs_1 as jobs };
     }
 }
+import React from 'react';
 import PropTypes from 'prop-types';

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

@@ -1,4 +1,4 @@
-export function BundleAssets(props: any): JSX.Element;
+export function BundleAssets(props: any): React.JSX.Element;
 export namespace BundleAssets {
     namespace defaultProps {
         export let className: string;
@@ -54,5 +54,6 @@ export namespace BundleAssets {
         export let hideEntryInfo: PropTypes.Validator<(...args: any[]) => any>;
     }
 }
+import React from 'react';
 import { ComponentLink } from '../component-link';
 import PropTypes from 'prop-types';

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

@@ -1,4 +1,4 @@
-export function BundleAssets(props: any): JSX.Element;
+export function BundleAssets(props: any): React.JSX.Element;
 export namespace BundleAssets {
     namespace propTypes {
         let jobs: PropTypes.Validator<(object | null | undefined)[]>;
@@ -19,4 +19,5 @@ export namespace BundleAssets {
         export { direction_1 as direction };
     }
 }
+import React from 'react';
 import PropTypes from 'prop-types';

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

@@ -2,7 +2,7 @@ export function BundleAssetsTotalsChartBars({ className, jobs, customComponentLi
     className: any;
     jobs: any;
     customComponentLink: any;
-}): JSX.Element;
+}): React.JSX.Element;
 export namespace BundleAssetsTotalsChartBars {
     namespace defaultProps {
         export let className: string;
@@ -17,5 +17,6 @@ export namespace BundleAssetsTotalsChartBars {
         export let customComponentLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
     }
 }
+import React from 'react';
 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;
-}): JSX.Element;
+}): React.JSX.Element;
 export namespace BundleAssetsTotalsTable {
     namespace defaultProps {
         export let className: string;
@@ -18,5 +18,6 @@ export namespace BundleAssetsTotalsTable {
         export let customComponentLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
     }
 }
+import React from 'react';
 import { ComponentLink } from '../component-link';
 import PropTypes from 'prop-types';

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

@@ -17,7 +17,7 @@ export function BundleModules({ className, jobs, items, chunks, totalRowCount, u
     customComponentLink: any;
     allItems: any;
     hideEntryInfo: any;
-}): JSX.Element;
+}): React.JSX.Element;
 export namespace BundleModules {
     namespace defaultProps {
         export let className: string;
@@ -59,5 +59,6 @@ export namespace BundleModules {
         export let hideEntryInfo: PropTypes.Validator<(...args: any[]) => any>;
     }
 }
+import React from 'react';
 import { ComponentLink } from '../component-link';
 import PropTypes from 'prop-types';

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

@@ -1,4 +1,4 @@
-export function BundleModules(props: any): JSX.Element;
+export function BundleModules(props: any): React.JSX.Element;
 export namespace BundleModules {
     namespace propTypes {
         let jobs: PropTypes.Validator<(object | null | undefined)[]>;
@@ -19,4 +19,5 @@ export namespace BundleModules {
         export { direction_1 as direction };
     }
 }
+import React from 'react';
 import PropTypes from 'prop-types';

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

@@ -1,4 +1,4 @@
-export function BundlePackages(props: any): JSX.Element;
+export function BundlePackages(props: any): React.JSX.Element;
 export namespace BundlePackages {
     namespace defaultProps {
         export let className: string;
@@ -44,5 +44,6 @@ export namespace BundlePackages {
         export let hideEntryInfo: PropTypes.Validator<(...args: any[]) => any>;
     }
 }
+import React from 'react';
 import { ComponentLink } from '../component-link';
 import PropTypes from 'prop-types';

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

@@ -1,4 +1,4 @@
-export function BundlePackages(props: any): JSX.Element;
+export function BundlePackages(props: any): React.JSX.Element;
 export namespace BundlePackages {
     namespace propTypes {
         let jobs: PropTypes.Validator<(object | null | undefined)[]>;
@@ -19,4 +19,5 @@ export namespace BundlePackages {
         export { direction_1 as direction };
     }
 }
+import React from 'react';
 import PropTypes from 'prop-types';

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

@@ -3,7 +3,7 @@ export function ComponentLink({ section, title, params, ...props }: {
     section: any;
     title: any;
     params: any;
-}): JSX.Element;
+}): React.JSX.Element;
 export namespace ComponentLink {
     namespace propTypes {
         let section: PropTypes.Validator<string>;
@@ -17,4 +17,5 @@ export namespace ComponentLink {
         export { params_1 as params };
     }
 }
+import React from 'react';
 import PropTypes from 'prop-types';

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

@@ -3,7 +3,7 @@ export function Delta({ className, displayValue, deltaType, inverted }: {
     displayValue: any;
     deltaType: any;
     inverted: any;
-}): JSX.Element;
+}): React.JSX.Element;
 export namespace Delta {
     namespace defaultProps {
         let className: string;
@@ -18,4 +18,5 @@ export namespace Delta {
         export { inverted_1 as inverted };
     }
 }
+import React from 'react';
 import PropTypes from 'prop-types';

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

@@ -19,7 +19,7 @@ interface EntryInfoProps {
     onClose: () => void;
 }
 export declare const EntryInfo: {
-    (props: EntryInfoProps & React.ComponentProps<'div'>): JSX.Element;
-    Meta: ({ className, label, children, }: EntryInfoMetaProps & React.ComponentProps<'p'>) => JSX.Element;
+    (props: EntryInfoProps & React.ComponentProps<'div'>): React.JSX.Element;
+    Meta: ({ className, label, children, }: EntryInfoMetaProps & React.ComponentProps<'p'>) => React.JSX.Element;
 };
 export {};

package/types/components/insight-icon/insight-icon.d.ts

@@ -3,5 +3,5 @@ import { InsightType } from '@bundle-stats/utils';
 interface InsightIconProps extends React.HTMLAttributes<'span'> {
     type: InsightType;
 }
-export declare const InsightIcon: (props: InsightIconProps) => JSX.Element;
+export declare const InsightIcon: (props: InsightIconProps) => React.JSX.Element;
 export {};

package/types/components/insights/insights.d.ts

@@ -4,5 +4,5 @@ interface InsightsProps extends React.HTMLAttributes<HTMLDivElement> {
     insights: JobInsightsInfo;
     customComponentLink?: React.ElementType;
 }
-export declare const Insights: (props: InsightsProps) => JSX.Element;
+export declare const Insights: (props: InsightsProps) => React.JSX.Element;
 export {};

package/types/components/job-name/job-name.d.ts

@@ -4,7 +4,7 @@ export function JobName({ as: Component, title, internalBuildNumber, children, .
     title: any;
     internalBuildNumber: any;
     children: any;
-}): JSX.Element;
+}): React.JSX.Element;
 export namespace JobName {
     namespace defaultProps {
         let as: string;
@@ -23,4 +23,5 @@ export namespace JobName {
         export { children_1 as children };
     }
 }
+import React from 'react';
 import PropTypes from 'prop-types';

package/types/components/jobs-header/jobs-header.d.ts

@@ -11,9 +11,9 @@ interface ItemProps {
     };
     tag: string;
 }
-export declare const Item: (props: ItemProps & React.ComponentProps<'div'>) => JSX.Element;
+export declare const Item: (props: ItemProps & React.ComponentProps<'div'>) => React.JSX.Element;
 interface JobsHeaderProps {
     jobs?: Array<ItemProps['job']> | null;
 }
-export declare const JobsHeader: (props: JobsHeaderProps & React.ComponentProps<'header'>) => JSX.Element;
+export declare const JobsHeader: (props: JobsHeaderProps & React.ComponentProps<'header'>) => React.JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-export function LighthouseTable(props: any): JSX.Element;
+export function LighthouseTable(props: any): React.JSX.Element;
 export namespace LighthouseTable {
     namespace defaultProps {
         let className: string;
@@ -11,4 +11,5 @@ export namespace LighthouseTable {
         export { jobs_1 as jobs };
     }
 }
+import React from 'react';
 import PropTypes from 'prop-types';

package/types/components/metric/metric.d.ts

@@ -4,4 +4,4 @@ export interface MetricProps {
     unit?: string;
     inline?: boolean;
 }
-export declare const Metric: (props: MetricProps & React.ComponentProps<'div'>) => JSX.Element;
+export declare const Metric: (props: MetricProps & React.ComponentProps<'div'>) => React.JSX.Element;

package/types/components/metric-run-info/metric-run-info.d.ts

@@ -10,4 +10,4 @@ export interface MetricRunInfoProps {
     size?: RunInfoProps['size'];
     loading?: RunInfoProps['loading'];
 }
-export declare const MetricRunInfo: (props: MetricRunInfoProps & React.ComponentProps<'div'>) => JSX.Element;
+export declare const MetricRunInfo: (props: MetricRunInfoProps & React.ComponentProps<'div'>) => React.JSX.Element;

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

@@ -1 +1,2 @@
-export function MetricsTable(props: any): JSX.Element;
+export function MetricsTable(props: any): React.JSX.Element;
+import React from 'react';

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

@@ -11,7 +11,7 @@ export function MetricsTable({ className, renderRowHeader, runs, items, emptyMes
     setShowAllItems: any;
     sort: any;
     updateSort: any;
-}): JSX.Element;
+}): React.JSX.Element;
 export namespace MetricsTable {
     namespace defaultProps {
         let className: string;
@@ -44,4 +44,5 @@ export namespace MetricsTable {
         export { title_1 as title };
     }
 }
+import React from 'react';
 import PropTypes from 'prop-types';