@bundle-stats/ui 4.2.4 → 4.2.5-beta.1

package/src/components/summary/summary.tsx

@@ -0,0 +1,124 @@
+import React, { useCallback } from 'react';
+import cx from 'classnames';
+import get from 'lodash/get';
+import { METRIC_COMPONENT_LINKS, getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
+
+import { METRICS_WEBPACK_GENERAL } from '../../constants';
+import { Box } from '../../layout/box';
+import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
+import { ComponentLink } from '../component-link';
+import { MetricRunInfo, MetricRunInfoProps } from '../metric-run-info';
+import css from './summary.module.css';
+
+interface MetricInfoProps {
+  description: string;
+  url?: string;
+}
+
+const MetricInfo = ({ description, url }: MetricInfoProps) => {
+  // The component parent can be rendered inside a link, use button to avoid using nested links
+  const onClick = useCallback(() => {
+    if (url) {
+      window.open(url);
+    }
+  }, [url]);
+
+  return (
+    <Stack space="xxxsmall">
+      <p>{description}</p>
+      {url && (
+        <p>
+          <button type="button" onClick={onClick} className={css.readMoreLink}>
+            Read more
+          </button>
+        </p>
+      )}
+    </Stack>
+  );
+};
+
+interface SummaryItemData {
+  current: number;
+  baseline: number;
+}
+
+interface SummaryProps {
+  size?: MetricRunInfoProps['size'];
+  keys?: Array<string>;
+  data?: Record<string, SummaryItemData> | null;
+  loading?: boolean;
+  showSummaryItemDelta?: boolean;
+  summaryItemLink?: React.ElementType;
+}
+
+interface SummaryItemProps {
+  metricId: string;
+  data?: SummaryProps['data'];
+  summaryItemLink: SummaryProps['summaryItemLink'];
+  size: SummaryProps['size'];
+  loading: SummaryProps['loading'];
+  showSummaryItemDelta: SummaryProps['showSummaryItemDelta'];
+}
+
+const SummaryItem = (props: SummaryItemProps & React.ComponentProps<'div'>) => {
+  const { className = '', metricId, data, summaryItemLink: SummaryItemCustomLink, size, loading, showSummaryItemDelta } = props;
+
+  const componentLink = METRIC_COMPONENT_LINKS.get(metricId);
+
+  const metricData = get(data, metricId, { current: 0, baseline: 0 });
+  const metric = getGlobalMetricType(metricId);
+  const metricRunInfo = getMetricRunInfo(metric, metricData.current, metricData.baseline);
+
+  return (
+    <Box
+      key={metricId}
+      outline
+      outlineHover
+      padding="small"
+      as={SummaryItemCustomLink}
+      {...componentLink?.link}
+      className={className}
+    >
+      <MetricRunInfo
+        title={metric.label}
+        titleHoverCard={<MetricInfo description={metric.description} url={metric.url} />}
+        current={metricRunInfo.displayValue}
+        baseline={metric.formatter(metricData.baseline)}
+        size={size}
+        loading={loading}
+        {...(showSummaryItemDelta && componentLink?.showDelta !== false && {
+          delta: metricRunInfo.displayDeltaPercentage,
+          deltaType: metricRunInfo.deltaType,
+        })}
+      />
+    </Box>
+  );
+};
+
+export const Summary = ({
+  className = '',
+  size = 'medium',
+  keys = METRICS_WEBPACK_GENERAL,
+  data = null,
+  loading = false,
+  showSummaryItemDelta = true,
+  summaryItemLink = ComponentLink,
+}: SummaryProps & React.ComponentProps<'div'>) => (
+  <Box className={cx(css.root, className)}>
+    <FlexStack space="small" className={css.items}>
+      {keys.map((metricId) => (
+        <SummaryItem
+          key={metricId}
+          className={css.item}
+          metricId={metricId}
+          data={data}
+          summaryItemLink={summaryItemLink}
+          size={size}
+          loading={loading}
+          showSummaryItemDelta={showSummaryItemDelta}
+        />
+      ))}
+    </FlexStack>
+  </Box>
+);

package/src/constants.js

@@ -1,29 +1,5 @@
 import { FILE_TYPES, SECTIONS } from '@bundle-stats/utils';
 
-export const NO_SPACE = 'no-space';
-export const SPACE_XXXSMALL = 'xxxsmall';
-export const SPACE_XXSMALL = 'xxsmall';
-export const SPACE_XSMALL = 'xsmall';
-export const SPACE_SMALL = 'small';
-export const SPACE_MEDIUM = 'medium';
-export const SPACE_LARGE = 'large';
-export const SPACE_XLARGE = 'xlarge';
-export const SPACE_XXLARGE = 'xxlarge';
-export const SPACE_XXXLARGE = 'xxxlarge';
-
-export const SPACES = [
-  NO_SPACE,
-  SPACE_XXXSMALL,
-  SPACE_XXSMALL,
-  SPACE_XSMALL,
-  SPACE_SMALL,
-  SPACE_MEDIUM,
-  SPACE_LARGE,
-  SPACE_XLARGE,
-  SPACE_XXLARGE,
-  SPACE_XXXLARGE,
-];
-
 export const URLS = {
   OVERVIEW: '/',
   ASSETS: '/assets',

package/src/layout/box/box.tsx

@@ -1,20 +1,23 @@
 import React from 'react';
 import cx from 'classnames';
 
-import { NO_SPACE, SPACES } from '../../constants';
-// @ts-ignore
+import { NO_SPACE, SPACES } from '../../tokens';
 import css from './box.module.css';
 
-interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType;
-  padding?: typeof SPACES | Array<typeof SPACES>;
-  horizontalPadding?: string;
-  verticalPadding?: string;
+type SpaceValue = (typeof SPACES)[number];
+
+interface BoxProps<T extends React.ElementType> {
+  as?: T;
+  padding?: SpaceValue | [SpaceValue, SpaceValue];
+  horizontalPadding?: SpaceValue;
+  verticalPadding?: SpaceValue;
   outline?: boolean;
   outlineHover?: boolean;
 }
 
-export const Box = (props: BoxProps) => {
+export const Box = <T extends React.ElementType = 'div'>(
+  props: BoxProps<T> & Omit<React.ComponentProps<T>, keyof BoxProps<T>>,
+) => {
   const {
     className = '',
     as: Component = 'div',

package/src/layout/flex-stack/flex-stack.stories.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Box } from '../box';
+import { FlexStack } from '.';
+
+export default {
+  title: 'Layout/FlexStack',
+  component: FlexStack,
+  decorators: [getWrapperDecorator()],
+};
+
+export const Default = () => (
+  <FlexStack>
+    <Box outline>Lorem ipsum 1</Box>
+    <Box outline>Lorem ipsum 2</Box>
+    {null}
+    Lorem ipsum 3
+  </FlexStack>
+);
+
+export const withCustomWrapper = () => (
+  <FlexStack as="main" className="wrapper">
+    <Box outline>Lorem ipsum 1</Box>
+    <Box outline>Lorem ipsum 2</Box>
+  </FlexStack>
+);
+
+export const withLargeSpace = () => (
+  <FlexStack space="large">
+    <Box outline>Lorem ipsum 1</Box>
+    <Box outline>Lorem ipsum 2</Box>
+    <Box outline>Lorem ipsum 3</Box>
+  </FlexStack>
+);
+
+export const withNestedStack = () => (
+  <FlexStack space="large">
+    <Box outline>Lorem ipsum 1</Box>
+    <Box outline>Lorem ipsum 2</Box>
+    <FlexStack space="small">
+      <Box outline>Lorem ipsum 3.1</Box>
+      <Box outline>Lorem ipsum 3.2</Box>
+    </FlexStack>
+  </FlexStack>
+);
+
+export const singleItem = () => (
+  <FlexStack>
+    <Box outline>Lorem ipsum</Box>
+  </FlexStack>
+);
+
+export const withAlignItems = () => (
+  <FlexStack alignItems="center" space="medium">
+    <h1>Title</h1>
+    <a href="#test">Option 1</a>
+  </FlexStack>
+);

package/src/layout/flex-stack/flex-stack.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { NO_SPACE, SPACES } from '../../tokens';
+import { getRenderChildWithClassName } from '../../utils';
+import css from './flex-stack.module.css';
+
+type SpaceValue = (typeof SPACES)[number];
+
+interface FlexStackProps<T extends React.ElementType> {
+  as?: T;
+  space?: SpaceValue;
+  inline?: boolean;
+  alignItems?: 'top' | 'center' | 'bottom';
+}
+
+export const FlexStack = <T extends React.ElementType = 'div'>(
+  props: FlexStackProps<T> & Omit<React.ComponentProps<T>, keyof FlexStackProps<T>>,
+) => {
+  const {
+    as: Component = 'div',
+    className = '',
+    space = NO_SPACE,
+    inline = false,
+    children = null,
+    alignItems = '',
+    ...restProps
+  } = props;
+
+  const rootClassName = cx(
+    className,
+    css.root,
+    css[`space--${space}`],
+    css[`align-items--${alignItems}`],
+    inline && css.inline,
+  );
+
+  return (
+    <Component {...restProps} className={rootClassName}>
+      {React.Children.map(children, getRenderChildWithClassName(css.item))}
+    </Component>
+  );
+};

package/src/layout/stack/stack.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
-import { NO_SPACE, SPACES } from '../../constants';
+import { NO_SPACE, SPACES } from '../../tokens';
 import { getRenderChildWithClassName } from '../../utils';
 import css from './stack.module.css';
 

package/src/tokens.ts

@@ -0,0 +1,23 @@
+export const NO_SPACE = 'no-space';
+export const SPACE_XXXSMALL = 'xxxsmall';
+export const SPACE_XXSMALL = 'xxsmall';
+export const SPACE_XSMALL = 'xsmall';
+export const SPACE_SMALL = 'small';
+export const SPACE_MEDIUM = 'medium';
+export const SPACE_LARGE = 'large';
+export const SPACE_XLARGE = 'xlarge';
+export const SPACE_XXLARGE = 'xxlarge';
+export const SPACE_XXXLARGE = 'xxxlarge';
+
+export const SPACES = [
+  NO_SPACE,
+  SPACE_XXXSMALL,
+  SPACE_XXSMALL,
+  SPACE_XSMALL,
+  SPACE_SMALL,
+  SPACE_MEDIUM,
+  SPACE_LARGE,
+  SPACE_XLARGE,
+  SPACE_XXLARGE,
+  SPACE_XXXLARGE,
+] as const;

package/src/ui/container/container.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
 
-// @ts-ignore
 import css from './container.module.css';
 
 interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {

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,56 @@
+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' });
+
+  return (
+    <>
+      <UITooltipAnchor
+        as={Component as React.ElementType}
+        className={cx(css.root, className)}
+        state={tooltip}
+        {...(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/components/index.d.ts

@@ -18,6 +18,6 @@ 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";
+export { MetricRunInfo, MetricRunInfoProps } from "./metric-run-info";

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

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

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

@@ -1,33 +1,7 @@
-export function Metric({ className, value, formatter, inline, children, enhanced }: {
-    className: any;
-    value: any;
-    formatter: any;
-    inline: any;
-    children: any;
-    enhanced: any;
-}): JSX.Element;
-export namespace Metric {
-    namespace defaultProps {
-        const className: string;
-        const enhanced: boolean;
-        const inline: boolean;
-        const value: number;
-        const children: never[];
-        function formatter(val: any): any;
-    }
-    namespace propTypes {
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        const enhanced_1: PropTypes.Requireable<boolean>;
-        export { enhanced_1 as enhanced };
-        const inline_1: PropTypes.Requireable<boolean>;
-        export { inline_1 as inline };
-        const value_1: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        export { value_1 as value };
-        const formatter_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { formatter_1 as formatter };
-        const children_1: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        export { children_1 as children };
-    }
+import React from 'react';
+export interface MetricProps {
+    value?: string;
+    unit?: string;
+    inline?: boolean;
 }
-import PropTypes from "prop-types";
+export declare const Metric: (props: MetricProps & React.ComponentProps<'div'>) => JSX.Element;

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

@@ -0,0 +1 @@
+export * from './metric-run-info';

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface MetricRunInfoProps {
+    title?: string;
+    titleHoverCard?: React.ReactNode;
+    titleTooltip?: React.ReactNode;
+    current?: string;
+    baseline?: string;
+    delta?: string;
+    deltaType?: string;
+    as?: React.ElementType;
+    size?: 'medium' | 'large';
+    loading?: boolean;
+}
+export declare const MetricRunInfo: ({ className, title, titleHoverCard, titleTooltip, current, baseline, delta, deltaType, as: Component, size, loading, ...restProps }: MetricRunInfoProps & React.ComponentProps<'div'>) => JSX.Element;

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

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

package/types/components/summary/summary.d.ts

@@ -1,37 +1,16 @@
-export function Summary({ className, size, keys, data, loading, showSummaryItemDelta, summaryItemLink: SummaryItemCustomLink, }: {
-    className: any;
-    size: any;
-    keys: any;
-    data: any;
-    loading: any;
-    showSummaryItemDelta: any;
-    summaryItemLink: any;
-}): JSX.Element;
-export namespace Summary {
-    namespace defaultProps {
-        export const className: string;
-        export const data: null;
-        export const loading: boolean;
-        export const size: string;
-        export { METRICS_WEBPACK_GENERAL as keys };
-        export const showSummaryItemDelta: boolean;
-        export { ComponentLink as summaryItemLink };
-    }
-    namespace propTypes {
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        const size_1: PropTypes.Requireable<string>;
-        export { size_1 as size };
-        export const keys: PropTypes.Requireable<(string | null | undefined)[]>;
-        const data_1: PropTypes.Requireable<PropTypes.InferProps<{}>>;
-        export { data_1 as data };
-        const loading_1: PropTypes.Requireable<boolean>;
-        export { loading_1 as loading };
-        const showSummaryItemDelta_1: PropTypes.Requireable<boolean>;
-        export { showSummaryItemDelta_1 as showSummaryItemDelta };
-        export const summaryItemLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-    }
+import React from 'react';
+import { MetricRunInfoProps } from '../metric-run-info';
+interface SummaryItemData {
+    current: number;
+    baseline: number;
 }
-import { METRICS_WEBPACK_GENERAL } from "../../constants";
-import { ComponentLink } from "../component-link";
-import PropTypes from "prop-types";
+interface SummaryProps {
+    size?: MetricRunInfoProps['size'];
+    keys?: Array<string>;
+    data?: Record<string, SummaryItemData> | null;
+    loading?: boolean;
+    showSummaryItemDelta?: boolean;
+    summaryItemLink?: React.ElementType;
+}
+export declare const Summary: ({ className, size, keys, data, loading, showSummaryItemDelta, summaryItemLink, }: SummaryProps & React.ComponentProps<'div'>) => JSX.Element;
+export {};

package/types/constants.d.ts

@@ -1,14 +1,3 @@
-export const NO_SPACE: "no-space";
-export const SPACE_XXXSMALL: "xxxsmall";
-export const SPACE_XXSMALL: "xxsmall";
-export const SPACE_XSMALL: "xsmall";
-export const SPACE_SMALL: "small";
-export const SPACE_MEDIUM: "medium";
-export const SPACE_LARGE: "large";
-export const SPACE_XLARGE: "xlarge";
-export const SPACE_XXLARGE: "xxlarge";
-export const SPACE_XXXLARGE: "xxxlarge";
-export const SPACES: string[];
 export namespace URLS {
     const OVERVIEW: string;
     const ASSETS: string;

package/types/layout/box/box.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
-import { SPACES } from '../../constants';
-interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
-    as?: React.ElementType;
-    padding?: typeof SPACES | Array<typeof SPACES>;
-    horizontalPadding?: string;
-    verticalPadding?: string;
+import { SPACES } from '../../tokens';
+type SpaceValue = (typeof SPACES)[number];
+interface BoxProps<T extends React.ElementType> {
+    as?: T;
+    padding?: SpaceValue | [SpaceValue, SpaceValue];
+    horizontalPadding?: SpaceValue;
+    verticalPadding?: SpaceValue;
     outline?: boolean;
     outlineHover?: boolean;
 }
-export declare const Box: (props: BoxProps) => JSX.Element;
+export declare const Box: <T extends React.ElementType<any> = "div">(props: BoxProps<T> & Omit<React.ComponentProps<T>, keyof BoxProps<T>>) => JSX.Element;
 export {};

package/types/layout/flex-stack/flex-stack.d.ts

@@ -1,34 +1,11 @@
-export function FlexStack({ as: Component, className, space, inline, children, alignItems, ...restProps }: {
-    [x: string]: any;
-    as?: string | undefined;
-    className?: string | undefined;
-    space?: string | undefined;
-    inline?: boolean | undefined;
-    children?: null | undefined;
-    alignItems?: string | undefined;
-}): JSX.Element;
-export namespace FlexStack {
-    namespace defaultProps {
-        export const as: string;
-        export const className: string;
-        export const children: null;
-        export { NO_SPACE as space };
-        export const alignItems: undefined;
-        export const inline: boolean;
-    }
-    namespace propTypes {
-        const as_1: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        export { as_1 as as };
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        const children_1: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        export { children_1 as children };
-        export const space: PropTypes.Requireable<string>;
-        const alignItems_1: PropTypes.Requireable<string>;
-        export { alignItems_1 as alignItems };
-        const inline_1: PropTypes.Requireable<boolean>;
-        export { inline_1 as inline };
-    }
+import React from 'react';
+import { SPACES } from '../../tokens';
+type SpaceValue = (typeof SPACES)[number];
+interface FlexStackProps<T extends React.ElementType> {
+    as?: T;
+    space?: SpaceValue;
+    inline?: boolean;
+    alignItems?: 'top' | 'center' | 'bottom';
 }
-import { NO_SPACE } from "../../constants";
-import PropTypes from "prop-types";
+export declare const FlexStack: <T extends React.ElementType<any> = "div">(props: FlexStackProps<T> & Omit<React.ComponentProps<T>, keyof FlexStackProps<T>>) => JSX.Element;
+export {};

package/types/layout/flex-stack/index.d.ts

@@ -1 +1 @@
-export * from "./flex-stack";
+export * from './flex-stack';

package/types/layout/stack/stack.d.ts

@@ -13,8 +13,8 @@ export namespace Stack {
         export { className_1 as className };
         const children_1: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         export { children_1 as children };
-        export const space: PropTypes.Requireable<string>;
+        export const space: PropTypes.Requireable<"no-space" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge">;
     }
 }
-import { NO_SPACE } from "../../constants";
+import { NO_SPACE } from "../../tokens";
 import PropTypes from "prop-types";

package/types/tokens.d.ts

@@ -0,0 +1,11 @@
+export declare const NO_SPACE = "no-space";
+export declare const SPACE_XXXSMALL = "xxxsmall";
+export declare const SPACE_XXSMALL = "xxsmall";
+export declare const SPACE_XSMALL = "xsmall";
+export declare const SPACE_SMALL = "small";
+export declare const SPACE_MEDIUM = "medium";
+export declare const SPACE_LARGE = "large";
+export declare const SPACE_XLARGE = "xlarge";
+export declare const SPACE_XXLARGE = "xxlarge";
+export declare const SPACE_XXXLARGE = "xxxlarge";
+export declare const SPACES: readonly ["no-space", "xxxsmall", "xxsmall", "xsmall", "small", "medium", "large", "xlarge", "xxlarge", "xxxlarge"];

package/types/ui/tooltip/index.d.ts

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