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

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

@@ -0,0 +1,76 @@
+.title {
+  color: var(--color-text-ultra-light);
+  font-weight: bold;
+  font-size: var(--size-xsmall);
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.titleIcon {
+  flex: 0 0 var(--space-small);
+  margin-top: -4px !important;
+  margin-bottom: -4px !important;
+}
+
+.info {
+  margin-top: var(--space-xxsmall);
+}
+
+.currentMetric {
+  color: var(--color-heading);
+  font-size: var(--size-xxlarge);
+  line-height: var(--line-height-heading);
+  white-space: nowrap;
+  font-weight: bold;
+}
+
+.baselineMetric {
+  color: var(--color-text-light);
+  font-size: var(--size-small);
+  line-height: var(--line-height-heading);
+}
+
+/* Loading state */
+.loading.currentMetric {
+  width: 8em;
+}
+
+.loading.baselineMetric {
+  width: 5em;
+}
+
+/* Hover state */
+.titleHoverCardIcon span[aria-controls=""],
+.titleTooltipIcon[aria-controls=""] {
+  opacity: 0;
+  visibility: none;
+  transition: var(--ui-transition-out);
+}
+
+.root:hover .titleHoverCardIcon span,
+.root:hover .titleTooltipIcon {
+  opacity: 1;
+  visibility: visible;
+  transition: var(--ui-transition-in);
+}
+
+/* Size variation */
+.small .info {
+  margin-top: var(--space-xxxsmall);
+}
+
+.small .currentMetric {
+  font-size: var(--size-xlarge);
+}
+
+.large .info {
+  margin-top: var(--space-xxsmall);
+}
+
+.large .currentMetric {
+  font-size: var(--size-xxxlarge);
+}
+
+.large .baselineMetric {
+  font-size: var(--size-medium);
+}

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { RunInfo } from './run-info';
+
+export default {
+  title: 'Components/RunInfo',
+  component: RunInfo,
+  args: {
+    size: 'medium',
+  },
+  argTypes: {
+    size: {
+      options: ['small', 'medium', 'large'],
+      control: { type: 'select' },
+    },
+  },
+} as Meta;
+
+const Template: Story = (args) => <RunInfo id="webpack.totalSizeByTypeALL" {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  title: 'Bundle Size',
+  current: '120KiB',
+  baseline: '100KiB',
+  delta: '+20%',
+  deltaType: 'HIGH_NEGATIVE',
+};
+
+export const SizeLarge = Template.bind({});
+
+SizeLarge.args = {
+  ...Default.args,
+  size: 'large',
+};
+
+export const TitleHoverCard = Template.bind({});
+
+TitleHoverCard.args = {
+  ...Default.args,
+  titleHoverCard: 'Info',
+};
+
+export const TitleTooltip = Template.bind({});
+
+TitleTooltip.args = {
+  ...Default.args,
+  titleTooltip: 'Info',
+};
+
+export const Loading = Template.bind({});
+
+Loading.args = {
+  title: 'Bundle Size',
+  loading: true,
+};

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

@@ -0,0 +1,111 @@
+import React, { useMemo } from 'react';
+import cx from 'classnames';
+
+import { Icon } from '../../ui/icon';
+import { HoverCard } from '../../ui/hover-card';
+import { Tooltip } from '../../ui/tooltip';
+import { Skeleton } from '../../ui/skeleton';
+import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
+import { Metric } from '../metric';
+import { Delta } from '../delta';
+import css from './run-info.module.css';
+
+// Separate value and unit
+const EXTRACT_VALUE_UNIT_PATTERN = /([\d|.|,| ]*)(\w*|%)$/;
+
+const getMetricParams = (value: string): [string, string?] => {
+  const matches = value.match(EXTRACT_VALUE_UNIT_PATTERN);
+
+  if (!matches) {
+    return [value];
+  }
+
+  return [matches[1], matches[2]];
+};
+
+export interface RunInfoProps {
+  title?: string;
+  titleHoverCard?: React.ReactNode;
+  titleTooltip?: React.ReactNode;
+  current?: React.ReactNode;
+  baseline?: string;
+  delta?: string;
+  deltaType?: string;
+
+  as?: React.ElementType;
+  size?: 'small' | 'medium' | 'large';
+
+  showBaseline?: boolean;
+  loading?: boolean;
+  enhance?: boolean;
+}
+
+export const RunInfo = ({
+  className = '',
+  title = '',
+  titleHoverCard = null,
+  titleTooltip = null,
+  current = '',
+  baseline = '',
+  delta = '',
+  deltaType = '',
+  as: Component = 'div',
+  size = 'medium',
+  showBaseline = true,
+  loading = false,
+  enhance = false,
+  ...restProps
+}: RunInfoProps & React.ComponentProps<'div'>) => {
+  const rootClassName = cx(css.root, className, css[size], delta && css.showDelta);
+
+  const currentValueParams: [React.ReactNode, string?] = useMemo(() => {
+    if (!enhance || typeof current !== 'string') {
+      return [current];
+    }
+
+    return getMetricParams(current);
+  }, [current, enhance]);
+
+  return (
+    <Component className={rootClassName} {...restProps}>
+      {title && (
+        <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.title}>
+          <span>{title}</span>
+          {titleHoverCard && (
+            <HoverCard
+              label={<Icon glyph={Icon.ICONS.HELP} />}
+              className={cx(css.titleIcon, css.titleHoverCardIcon)}
+            >
+              {titleHoverCard}
+            </HoverCard>
+          )}
+          {titleTooltip && (
+            <Tooltip title={titleTooltip} className={cx(css.titleIcon, css.titleTooltipIcon)}>
+              <Icon glyph={Icon.ICONS.HELP} />
+            </Tooltip>
+          )}
+        </FlexStack>
+      )}
+
+      {!loading ? (
+        <Stack className={css.info}>
+          <Metric
+            className={css.currentMetric}
+            value={currentValueParams[0]}
+            unit={currentValueParams[1]}
+            inline
+          >
+            {delta && <Delta className={css.delta} displayValue={delta} deltaType={deltaType} />}
+          </Metric>
+          {showBaseline && <Metric className={css.baselineMetric} value={baseline} />}
+        </Stack>
+      ) : (
+        <Stack className={css.info}>
+          <Skeleton as="p" className={cx(css.currentMetric, css.loading)} />
+          {showBaseline && <Skeleton as="p" className={cx(css.baselineMetric, css.loading)} />}
+        </Stack>
+      )}
+    </Component>
+  );
+};

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

@@ -1,17 +1,37 @@
 .root {
+  --summary-gap: var(--space-small);
   width: 100%;
-  overflow: auto;
+}
+
+.items {
+  display: flex;
+  flex-wrap: wrap;
+  width: calc(100% + var(--summary-gap));
+  margin-top: calc(0px - var(--summary-gap));
+  margin-left: calc(0px - var(--summary-gap));
 }
 
 .item {
+  margin: var(--summary-gap) 0 0 var(--summary-gap);
   flex: 1 0 10%; /* force equal sizes */
-  min-width: 16em;
+  min-width: 14em;
   text-decoration: none;
 }
 
-.item:hover,
-.item:active,
-.item:focus {
-  border-color: var(--color-outline-dark);
-  outline: none;
+.readMoreLink {
+  appearance: none;
+  background: none;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.readMoreLink:hover,
+.readMoreLink:active,
+.readMoreLink:focus {
+  color: var(--color-primary-dark);
+  text-decoration: none;
 }

package/src/components/summary/summary.stories.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { createJobs } from '@bundle-stats/utils';
+
+import baselineData from '../../../__mocks__/webpack-stats.baseline.json';
+import currentData from '../../../__mocks__/webpack-stats.current.json';
+import { METRICS_WEBPACK_ASSETS } from '../../constants';
+import { getWrapperDecorator } from '../../stories';
+import { Summary } from '.';
+
+const MULTIPLE_JOBS = createJobs([{ webpack: currentData }, { webpack: baselineData }]);
+
+const SINGLE_JOB = createJobs([{ webpack: currentData }]);
+
+export default {
+  title: 'Components/Summary',
+  component: Summary,
+  decorators: [getWrapperDecorator()],
+} as Meta;
+
+const Template: Story = (args) => <Summary {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  data: MULTIPLE_JOBS[0].summary,
+};
+
+export const CustomKeys = Template.bind({});
+
+CustomKeys.args = {
+  keys: METRICS_WEBPACK_ASSETS,
+  data: MULTIPLE_JOBS[0].summary,
+};
+
+export const Loading = Template.bind({});
+
+Loading.args = {
+  loading: true,
+};
+
+export const SingleRun = Template.bind({});
+
+SingleRun.args = {
+  data: SINGLE_JOB[0].summary,
+  showSummaryItemDelta: false,
+  showSummaryItemBaseline: false,
+};
+
+export const WithLink = Template.bind({});
+
+WithLink.args = {
+  data: MULTIPLE_JOBS[0].summary,
+  summaryItemLink: (linkProps: React.ComponentProps<'button'>) => (
+    <button {...linkProps} type="button" onClick={() => alert(JSON.stringify(linkProps))} />
+  ),
+};

package/src/components/summary/summary.tsx

@@ -0,0 +1,103 @@
+import React, { useCallback } from 'react';
+import cx from 'classnames';
+import get from 'lodash/get';
+import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
+
+import { METRICS_WEBPACK_GENERAL } from '../../constants';
+import { Box } from '../../layout/box';
+import { FlexStack } from '../../layout/flex-stack';
+import { ComponentLink } from '../component-link';
+import { MetricRunInfo, MetricRunInfoProps } from '../metric-run-info';
+import css from './summary.module.css';
+
+interface SummaryItemProps {
+  metricId: string;
+  data?: Record<string, SummaryItemData> | null;
+  customLink: React.ElementType;
+  size?: MetricRunInfoProps['size'];
+  loading: boolean;
+  showDelta: boolean;
+  showBaseline: boolean;
+}
+
+const SummaryItem = (props: SummaryItemProps & React.ComponentProps<'div'>) => {
+  const {
+    className = '',
+    metricId,
+    data,
+    customLink: SummaryItemCustomLink,
+    size,
+    loading,
+    showDelta,
+    showBaseline,
+  } = props;
+
+  const componentLink = METRIC_COMPONENT_LINKS.get(metricId);
+  const metricData = get(data, metricId, { current: 0, baseline: 0 });
+
+  return (
+    <Box
+      key={metricId}
+      outline
+      outlineHover
+      padding="small"
+      as={SummaryItemCustomLink}
+      {...componentLink?.link}
+      className={className}
+    >
+      <MetricRunInfo
+        metricId={metricId}
+        current={metricData.current}
+        baseline={metricData.baseline}
+        showDelta={showDelta && componentLink?.showDelta}
+        showBaseline={showBaseline}
+        size={size}
+        loading={loading}
+      />
+    </Box>
+  );
+};
+
+interface SummaryItemData {
+  current: number;
+  baseline: number;
+}
+
+interface SummaryProps {
+  size?: MetricRunInfoProps['size'];
+  keys?: Array<string>;
+  data?: SummaryItemProps['data'];
+  loading?: boolean;
+  showSummaryItemDelta?: SummaryItemProps['showDelta'];
+  showSummaryItemBaseline?: SummaryItemProps['showBaseline'];
+  summaryItemLink?: SummaryItemProps['customLink'];
+}
+
+export const Summary = ({
+  className = '',
+  size = 'medium',
+  keys = METRICS_WEBPACK_GENERAL,
+  data = null,
+  loading = false,
+  showSummaryItemDelta = true,
+  showSummaryItemBaseline = true,
+  summaryItemLink = ComponentLink,
+}: SummaryProps & React.ComponentProps<'div'>) => (
+  <Box className={cx(css.root, className)}>
+    <div className={css.items}>
+        {keys.map((metricId) => (
+          <SummaryItem
+            key={metricId}
+            className={css.item}
+            metricId={metricId}
+            data={data}
+            customLink={summaryItemLink}
+            size={size}
+            loading={loading}
+            showDelta={showSummaryItemDelta}
+            showBaseline={showSummaryItemBaseline}
+          />
+        ))}
+      </div>
+  </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/css/variables.css

@@ -1,6 +1,6 @@
 :root {
-  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
-  --font-family-fixed: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
+  --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+  --font-family-fixed: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 
   /* Spaces */
   --space-xxxsmall: 4px;
@@ -31,17 +31,18 @@
    * https://coolors.co/287acc-da444e-55b950-f6e179-192339
    * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23f6e179&mcgpalette3=%23505861&mcgpalette4=%23287acc&themename=mcgtheme
    */
-  --color-gray-25: #F7F7F7;
-  --color-gray-50 : #eaebec;
-  --color-gray-100: #cbcdd0;
-  --color-gray-200: #a8acb0;
-  --color-gray-300: #858a90;
-  --color-gray-400: #6a7179;
-  --color-gray-500: #505861;
-  --color-gray-600: #495059;
-  --color-gray-700: #40474f;
-  --color-gray-800: #373d45;
-  --color-gray-900: #272d33;
+  --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-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
@@ -190,6 +191,10 @@
   --radius-medium: 5px;
   --radius-large: 9px;
 
+  --outline-hover: 0 0 0 3px var(--color-highlight);
+
   /** Layout */
   --max-width: 80rem;
+  --entry-info-width: 640px;
+  --entry-info-top: var(--header-height);
 }

package/src/layout/box/box.module.css

@@ -15,6 +15,17 @@
   border-radius: 0 0 var(--radius-medium) var(--radius-medium);
 }
 
+.outlineHover {
+  transition: var(--transition-out);
+}
+
+.outlineHover:focus,
+.outlineHover:active,
+.outlineHover:hover {
+  box-shadow: var(--outline-hover);
+  transition: var(--transition-in);
+}
+
 .padding-xxxsmall {
   padding: var(--space-xxxsmall);
 }

package/src/layout/box/box.stories.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import type { Meta, Story } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Box } from '.';
+
+export default {
+  title: 'Layout/Box',
+  component: Box,
+  decorators: [getWrapperDecorator()],
+} as Meta<typeof Box>;
+
+const Template: Story = (props: any) => (
+  <Box style={{ border: '1px dotted magenta' }} {...props}>
+    Lorem ipsum
+  </Box>
+);
+
+export const Default = Template.bind({});
+
+export const WithPadding = Template.bind({});
+WithPadding.args = {
+  padding: 'medium',
+};
+
+export const WithHorizontalPadding = Template.bind({});
+WithHorizontalPadding.args = {
+  horizontalPadding: 'medium',
+};
+
+export const WithVerticalPadding = Template.bind({});
+WithVerticalPadding.args = {
+  verticalPadding: 'medium',
+};
+
+export const WithHorizontalAndVerticalPadding = Template.bind({});
+WithHorizontalAndVerticalPadding.args = {
+  padding: ['xxsmall', 'medium'],
+};
+
+export const WithOutline = Template.bind({});
+WithOutline.args = {
+  outline: true,
+};
+
+export const WithOutlineHover = Template.bind({});
+WithOutlineHover.args = {
+  outlineHover: true,
+};

package/src/layout/box/box.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { NO_SPACE, SPACES } from '../../tokens';
+import css from './box.module.css';
+
+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 = <T extends React.ElementType = 'div'>(
+  props: BoxProps<T> & Omit<React.ComponentProps<T>, keyof BoxProps<T>>,
+) => {
+  const {
+    className = '',
+    as: Component = 'div',
+    padding = NO_SPACE,
+    horizontalPadding = '',
+    verticalPadding = '',
+    outline = false,
+    outlineHover = false,
+    ...restProps
+  } = props;
+
+  const [resolvedPadding, resolvedVerticalPadding, resolvedHorizontalPadding] = Array.isArray(
+    padding,
+  )
+    ? [null, ...padding]
+    : [padding, verticalPadding, horizontalPadding];
+
+  const rootClassName = cx(
+    css.root,
+    className,
+    resolvedPadding && css[`padding-${resolvedPadding}`],
+    resolvedVerticalPadding && css[`vertical-padding-${resolvedVerticalPadding}`],
+    resolvedHorizontalPadding && css[`horizontal-padding-${resolvedHorizontalPadding}`],
+    outline && css.outline,
+    outlineHover && css.outlineHover,
+  );
+
+  return <Component {...restProps} className={rootClassName} />;
+};

package/src/layout/box/index.ts

@@ -0,0 +1 @@
+export * from './box';