@bundle-stats/ui 4.4.0-beta.0 → 4.4.0-beta.3

package/src/ui/table/table.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import cx from 'classnames';
+
+import css from './table.module.css';
+
+interface TableProps {
+  emptyMessage?: React.ReactNode;
+  compact?: boolean;
+  outline?: boolean;
+}
+
+export const Table = (props: TableProps & React.ComponentProps<'table'>) => {
+  const {
+    className = '',
+    emptyMessage = null,
+    compact = false,
+    outline = false,
+    children,
+    ...restProps
+  } = props;
+  const rootClassName = cx(css.root, className, compact && css.compact, outline && css.outline);
+
+  if (!children) {
+    return <div className={cx(rootClassName, css.empty)}>{emptyMessage}</div>;
+  }
+
+  return (
+    <table className={rootClassName} {...restProps}>
+      {children}
+    </table>
+  );
+};
+
+Table.THead = 'thead' as React.ElementType;
+Table.TBody = 'tbody' as React.ElementType;
+Table.Tr = 'tr' as React.ElementType;
+Table.Th = 'th' as React.ElementType;
+Table.Td = 'td' as React.ElementType;

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

@@ -2,12 +2,26 @@
   display: inline-block;
   font-family: var(--font-family);
   font-weight: bold;
-  background: var(--color-text-light);
+  background: var(--color-text-ultra-light);
   color: var(--color-light);
   text-align: center;
   text-transform: uppercase;
 }
 
+a.root {
+  text-decoration: none;
+  transition: var(--transition-out);
+}
+
+a.root:hover,
+a.root:focus,
+a.root:active {
+  opacity: 0.8;
+  color: var(--color-light);
+  text-decoration: none;
+  transition: var(--transition-in);
+}
+
 /** Kind variation */
 .success {
   background: var(--color-success);

package/src/ui/tag/tag.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { Tag } from '.';
+
+export default {
+  title: 'UI/Tag',
+  component: Tag,
+  argTypes: {
+    kind: {
+      control: 'select',
+      options: Object.values(Tag.KINDS),
+    },
+    size: {
+      control: 'select',
+      options: Object.values(Tag.SIZES),
+    },
+  },
+  args: {
+    children: 'tag',
+  },
+} as Meta;
+
+const Template: Story = (args) => <Tag {...args} />;
+
+export const Default = Template.bind({});
+
+export const OneLetter = Template.bind({});
+
+OneLetter.args = {
+  children: 'd',
+};

package/src/ui/tag/tag.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { KIND, SIZE } from '../../tokens';
+import css from './tag.module.css';
+
+interface TagProps {
+  as?: React.ElementType;
+  kind?: (typeof KIND)[keyof typeof KIND];
+  size?: (typeof SIZE)[keyof typeof SIZE];
+}
+
+export const Tag = (props: TagProps & React.ComponentProps<'span'>) => {
+  const {
+    className = '',
+    as: Component = 'span',
+    kind = KIND.DEFAULT,
+    size = SIZE.MEDIUM,
+    ...restProps
+  } = props;
+
+  const rootClassName = cx(css.root, className, css[kind], css[size]);
+
+  return <Component className={rootClassName} {...restProps} />;
+};
+
+Tag.KINDS = KIND;
+Tag.SIZES = SIZE;

package/src/ui/tooltip/tooltip.module.css

@@ -12,14 +12,13 @@
 
 .tooltip {
   padding: var(--space-xxxsmall) var(--space-xxsmall);
-  border-radius: var(--radius-medium);
+  border-radius: var(--radius-small);
   background: var(--color-light);
   max-width: 24em;
   color: var(--color-text);
   filter: drop-shadow(var(--shadow-layer));
   will-change: filter;
   font-size: var(--size-xsmall);
-  line-height: var(--space-small);
 }
 
 .arrow svg {
@@ -28,10 +27,10 @@
 }
 
 .tooltipDarkMode {
-  background: var(--color-text);
+  background: var(--color-text-dark);
   color: var(--color-light);
 }
 
 .tooltipDarkMode .arrow svg {
-  fill: var(--color-text);
+  fill: var(--color-text-dark);
 }

package/src/ui/tooltip/tooltip.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Story } from '@storybook/react'; // eslint-disable-line
+
+import { getWrapperDecorator } from '../../stories';
+import { Tooltip } from '.';
+
+export default {
+  title: 'UI/Tooltip',
+  component: Tooltip,
+  decorators: [getWrapperDecorator({ padding: '100px', textAlign: 'center' })],
+  args: {
+    title: 'View job #123',
+  },
+};
+
+const Template = (props: any) => <Tooltip {...props}>Job #123</Tooltip>;
+
+export const Default: Story = Template.bind({});
+
+export const LongTooltip: Story = Template.bind({});
+
+LongTooltip.args = {
+  title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam molestie neque id lectus mollis, et imperdiet libero porta.',
+};
+
+export const DarkModeFalse: Story = Template.bind({});
+
+DarkModeFalse.args = {
+  darkMode: false,
+};

package/src/ui/tooltip/tooltip.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import cx from 'classnames';
+import {
+  Tooltip as UITooltip,
+  TooltipAnchor as UITooltipAnchor,
+  TooltipArrow as UITooltipArrow,
+  useTooltipState,
+} from 'ariakit/tooltip';
+
+import css from './tooltip.module.css';
+
+interface TooltipProps<T extends React.ElementType> {
+  className?: string;
+  tooltipClassName?: string;
+  title?: React.ReactNode;
+  as?: T;
+  containerRef?: React.RefObject<HTMLElement>;
+  darkMode?: boolean;
+}
+
+export const Tooltip = <T extends React.ElementType = 'span'>(
+  props: TooltipProps<T> & Omit<React.ComponentProps<T>, keyof TooltipProps<T>>,
+) => {
+  const {
+    className = '',
+    tooltipClassName = '',
+    title = '',
+    as: Component = 'span',
+    containerRef: ref,
+    darkMode = true,
+    ...restProps
+  } = props;
+
+  const tooltip = useTooltipState({ placement: 'top', timeout: 300 });
+
+  return (
+    <>
+      <UITooltipAnchor
+        as={Component as React.ElementType}
+        className={cx(css.root, className)}
+        state={tooltip}
+        aria-controls={tooltip.open ? tooltip.contentElement?.id : ''}
+        {...(ref ? { ref } : {})}
+        {...restProps}
+      />
+      {title && (
+        <UITooltip
+          state={tooltip}
+          className={cx(css.tooltip, tooltipClassName, darkMode && css.tooltipDarkMode)}
+        >
+          <UITooltipArrow state={tooltip} className={css.arrow} size={12} />
+          {title}
+        </UITooltip>
+      )}
+    </>
+  );
+};

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

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

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

@@ -1,24 +1,21 @@
-export function AssetInfo(props: any): JSX.Element;
-export namespace AssetInfo {
-    namespace propTypes {
-        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;
-        export { className_1 as className };
-        const chunks_1: never[];
-        export { chunks_1 as chunks };
-        export { ComponentLink as CustomComponentLink };
-    }
+import React from 'react';
+import { MetricRunInfo } from '@bundle-stats/utils';
+import { Asset, MetaChunk } from '@bundle-stats/utils/types/webpack';
+interface AssetInfoProps {
+    item: {
+        label: string;
+        changed?: boolean;
+        isChunk?: boolean;
+        isEntry?: boolean;
+        isInitial?: boolean;
+        isNotPredictive?: boolean;
+        fileType?: string;
+        runs: Array<Asset & MetricRunInfo>;
+    };
+    chunks?: Array<MetaChunk>;
+    labels: Array<string>;
+    customComponentLink?: React.ElementType;
+    onClose: () => void;
 }
-import PropTypes from "prop-types";
-import { ComponentLink } from "../component-link";
+export declare const AssetInfo: (props: AssetInfoProps & React.ComponentProps<'div'>) => JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { Asset } from '@bundle-stats/utils/types/webpack';
+interface AssetNotPredictiveProps {
+    runs?: Array<Asset>;
+    labels?: Array<string>;
+}
+export declare const AssetNotPredictive: (props: AssetNotPredictiveProps & React.ComponentProps<'div'>) => JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export * from './asset-not-predictive';

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

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

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

@@ -3,19 +3,19 @@ export const SORT_BY_SIZE: "size";
 export const SORT_BY_DELTA: "delta";
 export namespace SORT_BY {
     namespace name {
-        const label: string;
-        const defaultDirection: string;
+        let label: string;
+        let defaultDirection: string;
     }
     namespace delta {
-        const label_1: string;
+        let label_1: string;
         export { label_1 as label };
-        const defaultDirection_1: string;
+        let defaultDirection_1: string;
         export { defaultDirection_1 as defaultDirection };
     }
     namespace size {
-        const label_2: string;
+        let label_2: string;
         export { label_2 as label };
-        const defaultDirection_2: string;
+        let defaultDirection_2: string;
         export { defaultDirection_2 as defaultDirection };
     }
 }

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

@@ -1,15 +1,16 @@
 export function BundleAssets(props: any): JSX.Element;
 export namespace BundleAssets {
     namespace defaultProps {
-        export const className: string;
-        export const totalRowCount: number;
-        export const hasActiveFilters: boolean;
+        export let className: string;
+        export let totalRowCount: number;
+        export let hasActiveFilters: boolean;
         export { ComponentLink as customComponentLink };
+        export let entryId: string;
     }
     namespace propTypes {
-        const className_1: PropTypes.Requireable<string>;
+        let className_1: PropTypes.Requireable<string>;
         export { className_1 as className };
-        export const jobs: PropTypes.Validator<(PropTypes.InferProps<{
+        export let jobs: PropTypes.Validator<(PropTypes.InferProps<{
             internalBuildNumber: PropTypes.Requireable<number>;
             label: PropTypes.Requireable<string>;
             meta: PropTypes.Requireable<PropTypes.InferProps<{
@@ -18,7 +19,7 @@ export namespace BundleAssets {
                 }>>;
             }>>;
         }> | null | undefined)[]>;
-        export const items: PropTypes.Validator<(PropTypes.InferProps<{
+        export let items: PropTypes.Validator<(PropTypes.InferProps<{
             key: PropTypes.Requireable<string>;
             label: PropTypes.Requireable<string>;
             runs: PropTypes.Requireable<(PropTypes.InferProps<{
@@ -26,26 +27,33 @@ export namespace BundleAssets {
                 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 let updateFilters: PropTypes.Validator<(...args: any[]) => any>;
+        export let resetFilters: PropTypes.Validator<(...args: any[]) => any>;
+        export let resetAllFilters: PropTypes.Validator<(...args: any[]) => any>;
+        let totalRowCount_1: PropTypes.Requireable<number>;
         export { totalRowCount_1 as totalRowCount };
-        export const filters: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+        export let filters: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
             changed: PropTypes.Requireable<boolean>;
+            id: PropTypes.Requireable<string>;
         }>>>;
-        const hasActiveFilters_1: PropTypes.Requireable<boolean>;
+        let entryId_1: PropTypes.Requireable<string>;
+        export { entryId_1 as entryId };
+        let hasActiveFilters_1: PropTypes.Requireable<boolean>;
         export { hasActiveFilters_1 as hasActiveFilters };
-        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<{
+        export let sortFields: PropTypes.Validator<NonNullable<PropTypes.InferProps<{}>>>;
+        export let search: PropTypes.Validator<string>;
+        export let updateSearch: PropTypes.Validator<(...args: any[]) => any>;
+        export let 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>;
+        export let updateSort: PropTypes.Validator<(...args: any[]) => any>;
+        export let allItems: PropTypes.Requireable<(PropTypes.InferProps<{
+            key: PropTypes.Requireable<string>;
+        }> | null | undefined)[]>;
+        export let customComponentLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        export let hideEntryInfo: PropTypes.Validator<(...args: any[]) => any>;
     }
 }
-import { ComponentLink } from "../component-link";
-import PropTypes from "prop-types";
+import { ComponentLink } from '../component-link';
+import PropTypes from 'prop-types';

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

@@ -1,22 +1,22 @@
 export function BundleAssets(props: any): JSX.Element;
 export namespace BundleAssets {
     namespace propTypes {
-        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>;
+        let jobs: PropTypes.Validator<(object | null | undefined)[]>;
+        let filters: PropTypes.Requireable<object>;
+        let search: PropTypes.Requireable<string>;
+        let sortBy: PropTypes.Requireable<string>;
+        let direction: PropTypes.Requireable<string>;
+        let setState: PropTypes.Validator<(...args: any[]) => any>;
     }
     namespace defaultProps {
-        const filters_1: undefined;
+        let filters_1: undefined;
         export { filters_1 as filters };
-        const search_1: undefined;
+        let search_1: undefined;
         export { search_1 as search };
-        const sortBy_1: undefined;
+        let sortBy_1: undefined;
         export { sortBy_1 as sortBy };
-        const direction_1: undefined;
+        let direction_1: undefined;
         export { direction_1 as direction };
     }
 }
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';

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

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

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

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

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

@@ -3,19 +3,19 @@ export const SORT_BY_SIZE: "size";
 export const SORT_BY_DELTA: "delta";
 export namespace SORT_BY {
     namespace name {
-        const label: string;
-        const defaultDirection: string;
+        let label: string;
+        let defaultDirection: string;
     }
     namespace delta {
-        const label_1: string;
+        let label_1: string;
         export { label_1 as label };
-        const defaultDirection_1: string;
+        let defaultDirection_1: string;
         export { defaultDirection_1 as defaultDirection };
     }
     namespace size {
-        const label_2: string;
+        let label_2: string;
         export { label_2 as label };
-        const defaultDirection_2: string;
+        let defaultDirection_2: string;
         export { defaultDirection_2 as defaultDirection };
     }
 }