@bundle-stats/ui 4.3.0-beta.3 → 4.3.0-rc.1

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

@@ -0,0 +1,112 @@
+import React, { useMemo } from 'react';
+import noop from 'lodash/noop';
+import {
+  BUNDLE_PACKAGES_DUPLICATE,
+  PACKAGES_SEPARATOR,
+  PACKAGE_ID_SEPARATOR,
+  MetricRunInfo,
+  getBundleModulesBySearch,
+  getBundlePackagesByNameComponentLink,
+} from '@bundle-stats/utils';
+import { Package } from '@bundle-stats/utils/types/webpack';
+
+import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
+import { ComponentLink } from '../component-link';
+import { FileName } from '../../ui/file-name';
+import { Tag } from '../../ui/tag';
+import { EntryInfo } from '../entry-info';
+import css from './package-info.module.css';
+
+interface PackageInfoProps {
+  name: string;
+  item: {
+    label: string;
+    duplicate?: boolean;
+    runs: Array<Package & MetricRunInfo>;
+  };
+  labels: Array<string>;
+  customComponentLink?: React.ElementType;
+}
+
+export const PackageInfo = (props: PackageInfoProps & React.ComponentProps<'div'>) => {
+  const {
+    className = '',
+    name,
+    item,
+    labels,
+    customComponentLink: CustomComponentLink = ComponentLink,
+    onClick = noop
+  } = props;
+
+  const fallbackPackagePath = `node_modules/${item.label.split(PACKAGES_SEPARATOR).join('/node_modules/')}`;
+  const normalizedPackagePath = `${item.runs?.[0]?.path || fallbackPackagePath}/`;
+  const [normalizedName, packageId] = name.split(PACKAGE_ID_SEPARATOR);
+
+  const packageTitle = useMemo(() => (
+    <span className={css.packageTitle}>
+      <span className={css.packageTitleText}>{normalizedName}</span>
+      {packageId && <span className={css.packageTitleId}>{PACKAGE_ID_SEPARATOR}{packageId}</span>}
+    </span>
+  ), [normalizedName, packageId]);
+
+  const tags = useMemo(() => {
+    if (!item.duplicate) {
+      return null;
+    }
+
+    return (
+      <div>
+        <Tag as={CustomComponentLink} {...BUNDLE_PACKAGES_DUPLICATE} onClick={onClick} kind="danger">Duplicate</Tag>
+      </div>
+    );
+  }, [item]);
+
+  return (
+    <EntryInfo
+      itemTitle={packageTitle}
+      item={item}
+      labels={labels}
+      tags={tags}
+      runNameSelector="path"
+      className={className}
+    >
+      <Stack space="small">
+        <p>Path: <FileName name={normalizedPackagePath} className={css.fileName} /></p>
+
+        <Stack space="xxxsmall">
+          {item.duplicate && (
+            <div>
+              <CustomComponentLink {...getBundlePackagesByNameComponentLink(normalizedName)}>
+                View all duplicate instances
+              </CustomComponentLink>
+            </div>
+          )}
+
+          <CustomComponentLink {...getBundleModulesBySearch(normalizedPackagePath)}>
+            Search modules by package path
+          </CustomComponentLink>
+        </Stack>
+
+        <FlexStack space="xsmall" alignItems="center" className={css.external}>
+          <a
+            href={`https://www.npmjs.com/package/${normalizedName}`}
+            target="_blank"
+            rel="noreferrer"
+            className={css.externalLink}
+          >
+            npmjs.com
+          </a>
+          <a
+            href={`https://bundlephobia.com/result?p=${normalizedName}`}
+            target="_blank"
+            rel="noreferrer"
+            className={css.externalLink}
+          >
+            bundlephobia.com
+          </a>
+        </FlexStack>
+      </Stack>
+    </EntryInfo>
+  );
+};

package/src/components/run-info/index.ts

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

package/{lib/components/summary-item/summary-item.module.css → src/components/run-info/run-info.module.css}

@@ -7,13 +7,18 @@
 }
 
 .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-large);
+  font-size: var(--size-xxlarge);
   line-height: var(--line-height-heading);
   white-space: nowrap;
   font-weight: bold;
@@ -25,24 +30,6 @@
   line-height: var(--line-height-heading);
 }
 
-.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;
-}
-
 /* Loading state */
 .loading.currentMetric {
   width: 8em;
@@ -53,6 +40,14 @@
 }
 
 /* Size large */
+.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,49 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { RunInfo } from './run-info';
+
+export default {
+  title: 'Components/RunInfo',
+  component: RunInfo,
+} 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,108 @@
+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?: '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={css.titleIcon}>
+              {titleHoverCard}
+            </HoverCard>
+          )}
+          {titleTooltip && (
+            <Tooltip title={titleTooltip} className={css.titleIcon}>
+              <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,6 +1,5 @@
 .root {
   width: 100%;
-  overflow: auto;
 }
 
 .item {
@@ -9,9 +8,21 @@
   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)}>
+    <FlexStack space="small" 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}
+        />
+      ))}
+    </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/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,9 @@
   --radius-medium: 5px;
   --radius-large: 9px;
 
+  --outline-hover: 0 0 0 3px var(--color-highlight);
+
   /** Layout */
   --max-width: 80rem;
+  --entry-info-hovercard-width: 540px;
 }

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