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

package/src/ui/table/table.stories.tsx

@@ -0,0 +1,238 @@
+import React from 'react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Table } from '.';
+
+const { THead, TBody, Td, Tr, Th } = Table;
+
+export default {
+  title: 'UI/Table',
+  component: Table,
+  decorators: [getWrapperDecorator()],
+};
+
+export const Default = () => (
+  <Table>
+    <TBody>
+      <Tr>
+        <Td>a1</Td>
+        <Td>b1</Td>
+        <Td>c1</Td>
+      </Tr>
+      <Tr>
+        <Td>a2</Td>
+        <Td>b2</Td>
+        <Td>c2</Td>
+      </Tr>
+      <Tr>
+        <Td>a3</Td>
+        <Td>b3</Td>
+        <Td>c3</Td>
+      </Tr>
+    </TBody>
+  </Table>
+);
+
+export const Compact = () => (
+  <Table compact>
+    <TBody>
+      <Tr>
+        <Td>a1</Td>
+        <Td>b1</Td>
+        <Td>c1</Td>
+      </Tr>
+      <Tr>
+        <Td>a2</Td>
+        <Td>b2</Td>
+        <Td>c2</Td>
+      </Tr>
+      <Tr>
+        <Td>a3</Td>
+        <Td>b3</Td>
+        <Td>c3</Td>
+      </Tr>
+    </TBody>
+  </Table>
+);
+
+export const Outline = () => (
+  <Table outline>
+    <TBody>
+      <Tr>
+        <Td>a1</Td>
+        <Td>b1</Td>
+        <Td>c1</Td>
+      </Tr>
+      <Tr>
+        <Td>a2</Td>
+        <Td>b2</Td>
+        <Td>c2</Td>
+      </Tr>
+      <Tr>
+        <Td>a3</Td>
+        <Td>b3</Td>
+        <Td>c3</Td>
+      </Tr>
+    </TBody>
+  </Table>
+);
+
+export const Empty = () => <Table />;
+export const EmptyWithCustomElement = () => (
+  <Table emptyMessage={<p style={{ outline: '1px solid lightgray' }}>No items available</p>} />
+);
+
+export const WithHeaders = () => (
+  <Table>
+    <THead>
+      <Tr>
+        <Th>Col A</Th>
+        <Th>Col B</Th>
+        <Th>Col C</Th>
+      </Tr>
+    </THead>
+    <TBody>
+      <Tr>
+        <Td>a1</Td>
+        <Td>b1</Td>
+        <Td>c1</Td>
+      </Tr>
+      <Tr>
+        <Td>a2</Td>
+        <Td>b2</Td>
+        <Td>c2</Td>
+      </Tr>
+      <Tr>
+        <Td>a3</Td>
+        <Td>b3</Td>
+        <Td>c3</Td>
+      </Tr>
+    </TBody>
+  </Table>
+);
+
+export const WithHeadersAndOutline = () => (
+  <Table outline>
+    <THead>
+      <Tr>
+        <Th>Col A</Th>
+        <Th>Col B</Th>
+        <Th>Col C</Th>
+      </Tr>
+    </THead>
+    <TBody>
+      <Tr>
+        <Td>a1</Td>
+        <Td>b1</Td>
+        <Td>c1</Td>
+      </Tr>
+      <Tr>
+        <Td>a2</Td>
+        <Td>b2</Td>
+        <Td>c2</Td>
+      </Tr>
+      <Tr>
+        <Td>a3</Td>
+        <Td>b3</Td>
+        <Td>c3</Td>
+      </Tr>
+    </TBody>
+  </Table>
+);
+
+export const WithMultipleRowsHeader = () => (
+  <Table>
+    <THead>
+      <Tr>
+        <Th> </Th>
+        <Th colSpan={2}>Colspan</Th>
+      </Tr>
+      <Tr>
+        <Th>Col A</Th>
+        <Th>Col B</Th>
+        <Th>Col C</Th>
+      </Tr>
+    </THead>
+    <TBody>
+      <Tr>
+        <Td>a1</Td>
+        <Td>b1</Td>
+        <Td>c1</Td>
+      </Tr>
+      <Tr>
+        <Td>a2</Td>
+        <Td>b2</Td>
+        <Td>c2</Td>
+      </Tr>
+      <Tr>
+        <Td>a3</Td>
+        <Td>b3</Td>
+        <Td>c3</Td>
+      </Tr>
+    </TBody>
+  </Table>
+);
+
+export const WithRowHeaders = () => (
+  <Table>
+    <TBody>
+      <Tr>
+        <Th>row 1</Th>
+        <Td>a1</Td>
+        <Td>b1</Td>
+        <Td>c1</Td>
+      </Tr>
+      <Tr>
+        <Th>row 2</Th>
+        <Td>a2</Td>
+        <Td>b2</Td>
+        <Td>c2</Td>
+      </Tr>
+      <Tr>
+        <Th>row 3</Th>
+        <Td>a3</Td>
+        <Td>b3</Td>
+        <Td>c3</Td>
+      </Tr>
+    </TBody>
+  </Table>
+);
+
+export const WithCustomContentAndAttributes = () => (
+  <Table>
+    <THead>
+      <Tr>
+        <Th> </Th>
+        <Th style={{ textAlign: 'right' }}>Col A (right)</Th>
+        <Th style={{ textAlign: 'center' }}>Col B (center)</Th>
+        <Th style={{ textDecoration: 'underline' }}>Col C(underline)</Th>
+      </Tr>
+    </THead>
+    <TBody>
+      <Tr>
+        <Th>
+          <strong>row 1</strong>
+        </Th>
+        <Td style={{ textAlign: 'right' }}>a1</Td>
+        <Td style={{ textAlign: 'center', color: 'red' }}>b1</Td>
+        <Td style={{ textDecoration: 'underline' }}>c1</Td>
+      </Tr>
+      <Tr style={{ color: 'blue', fontSize: '1.5em' }}>
+        <Th>
+          <strong>row 2</strong>
+        </Th>
+        <Td style={{ textAlign: 'right' }}>a2</Td>
+        <Td style={{ textAlign: 'center' }}>b2</Td>
+        <Td style={{ textDecoration: 'underline' }}>c2</Td>
+      </Tr>
+      <Tr>
+        <Th>
+          <strong>row 3</strong>
+        </Th>
+        <Td style={{ textAlign: 'right' }}>a3</Td>
+        <Td style={{ textAlign: 'center' }}>b3</Td>
+        <Td style={{ textDecoration: 'underline' }}>c3</Td>
+      </Tr>
+    </TBody>
+  </Table>
+);

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