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

package/src/components/metric/metric.module.css

@@ -1,12 +1,12 @@
 .root {
-  letter-spacing: 0.05em;
+  font-family: var(--font-family-fixed);
 }
 
 .displayUnit {
   font-size: var(--size-small);
 }
 
-.delta {
+.content {
   font-size: var(--size-small);
 }
 
@@ -14,7 +14,7 @@
   display: inline-block;
 }
 
-.inline .delta {
+.inline .content {
   display: inline-block;
   margin: 0 0 0 var(--space-xxxsmall);
 }

package/src/components/metric/metric.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Delta } from '../delta';
+import { Metric } from '.';
+
+export default {
+  title: 'Components/Metric',
+  component: Metric,
+  decorators: [getWrapperDecorator({ maxWidth: '200px' })],
+} as Meta;
+
+const Template: Story = (args) => <Metric {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  value: '100',
+};
+
+export const WithUnit = Template.bind({});
+
+WithUnit.args = {
+  value: '100',
+  unit: 'KiB',
+};
+
+export const WithDelta = Template.bind({});
+
+WithDelta.args = {
+  ...WithUnit.args,
+  children: <Delta displayValue="+10%" deltaType="POSITIVE" />,
+};
+
+export const Inline = Template.bind({});
+
+Inline.args = {
+  ...WithDelta.args,
+  inline: true,
+};

package/src/components/metric/metric.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import cx from 'classnames';
+
+import css from './metric.module.css';
+
+export interface MetricProps {
+  /**
+   * Metric value
+   */
+  value?: React.ReactNode;
+  /**
+   * Metric value unit
+   */
+  unit?: string;
+  /**
+   * Inline variant - render children inline
+   */
+  inline?: boolean;
+}
+
+export const Metric = (props: MetricProps & React.ComponentProps<'div'>) => {
+  const {
+    className = '',
+    value = '0',
+    unit = '',
+    inline = false,
+    children = null,
+    ...restProps
+  } = props;
+
+  const rootClassName = cx(className, css.root, inline && css.inline);
+
+  return (
+    <div className={rootClassName} {...restProps}>
+      <div className={css.display}>
+        <span className={css.displayValue}>{value}</span>
+        {unit && <span className={css.displayUnit}>{unit}</span>}
+      </div>
+      {children && <div className={css.content}>{children}</div>}
+    </div>
+  );
+};

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

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

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

@@ -0,0 +1,18 @@
+.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/metric-run-info/metric-run-info.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { Meta, Story } from '@storybook/react';
+import { MetricRunInfo } from '.';
+
+export default {
+  title: 'Components/MetricRunInfo',
+  component: MetricRunInfo,
+} as Meta;
+
+const Template: Story = (args: any) => <MetricRunInfo {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  metricId: 'webpack.totalSizeByTypeALL',
+  current: 120 * 1024,
+  baseline: 100 * 1024,
+};
+
+export const NoBaseline = Template.bind({});
+
+NoBaseline.args = {
+  metricId: 'webpack.totalSizeByTypeALL',
+  current: 120 * 1024,
+  showBaseline: false,
+};
+
+export const NoDelta = Template.bind({});
+
+NoDelta.args = {
+  ...Default.args,
+  showDelta: false,
+};

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

@@ -0,0 +1,85 @@
+import React, { useCallback, useMemo } from 'react';
+import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
+
+import { Stack } from '../../layout/stack';
+import { RunInfo, RunInfoProps } from '../run-info';
+import css from './metric-run-info.module.css';
+
+interface MetricInfoProps {
+  description: string;
+  url?: string;
+}
+
+const MetricHoverCard = ({ 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>
+  );
+};
+
+export interface MetricRunInfoProps {
+  metricId: string;
+  current: number;
+  baseline?: number;
+  showDelta?: boolean;
+  showMetricDescription?: boolean;
+  showBaseline?: boolean;
+  size?: RunInfoProps['size'];
+  loading?: RunInfoProps['loading'];
+}
+
+export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'div'>) => {
+  const {
+    metricId,
+    current,
+    baseline = 0,
+    showDelta = true,
+    showMetricDescription = true,
+    showBaseline = true,
+    ...restProps
+  } = props;
+
+  const metric = getGlobalMetricType(metricId);
+  const metricRunInfo = getMetricRunInfo(metric, current, baseline || 0);
+
+  const titleHoverCard = useMemo(() => {
+    if (showMetricDescription) {
+      return <MetricHoverCard description={metric.description} url={metric.url} />;
+    }
+
+    return null;
+  }, [showMetricDescription, metric]);
+
+  return (
+    <RunInfo
+      title={metric.label}
+      titleHoverCard={titleHoverCard}
+      enhance
+      current={metricRunInfo.displayValue}
+      showBaseline={showBaseline}
+      {...(showBaseline && {
+        baseline: metric.formatter(baseline),
+      })}
+      {...(showDelta && showBaseline && {
+        delta: metricRunInfo.displayDeltaPercentage,
+        deltaType: metricRunInfo.deltaType,
+      })}
+      {...restProps}
+    />
+  );
+};

package/src/components/metrics-table-options/metrics-table-options.jsx

@@ -8,7 +8,7 @@ export const MetricsTableOptions = (props) => {
   const { className,  handleViewAll, handleResetFilters, ...restProps } = props;
 
   return (
-    <Dropdown className={className} glyph="menu" {...restProps}>
+    <Dropdown className={className} glyph="more-vertical" {...restProps}>
       {handleResetFilters && (
         <Dropdown.Item onClick={handleResetFilters}>
           {I18N.RESET_FILTERS}

package/src/components/metrics-table-search/metrics-table-search.module.css

@@ -5,13 +5,7 @@
 }
 
 .input {
-  border-radius: var(--radius-small);
   height: var(--space-large);
-  border-color: var(--color-outline);
-}
-
-.input:focus {
-  border-color: var(--color-outline-dark);
 }
 
 .cancelButton {

package/src/components/metrics-table-title/metrics-table-title.module.css

@@ -14,6 +14,7 @@
 
 .anchorIcon {
   display: block;
+  margin: -2px 0; /* compensate for the vertical space */
 }
 
 .info {

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

@@ -1,40 +1,15 @@
-.titleTag {
-  border: 1px solid var(--color-outline);
-  background: var(--color-highlight);
-  color: var(--color-text-light);
-}
-
-.run:first-child .title {
-  font-size: var(--size-xlarge);
+.chunksItems {
+  display: inline;
 }
 
 .chunksItem {
   overflow-wrap: break-word;
+  text-decoration: none;
+  text-transform: none;
+  font-weight: normal;
+  font-size: 1em;
 }
 
-.fileName {
-  max-width: 100%;
-  padding: 2px;
-  background: var(--color-highlight-warning);
-}
-
-.reasonLink {
-  text-decoration: underline;
-}
-
-.reasonLink .reason {
-  text-decoration: inherit;
-}
-
-.reason {
-  display: inline;
-}
-
-.list {
-  padding: 0 0 0 var(--space-small);
-  list-style: outside;
-}
-
-.list li::marker {
-  color: var(--color-text-ultra-light);
+.chunksItem + .chunksItem {
+  margin-left: var(--space-xxxsmall);
 }

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

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { getWrapperDecorator } from '../../stories';
+import { ModuleInfo } from '.';
+
+export default {
+  title: 'Components/ModuleInfo',
+  component: ModuleInfo,
+  decorators: [getWrapperDecorator()],
+};
+
+export const Default = () => (
+  <ModuleInfo
+    item={{
+      label: './node_modules/lodash/fp/merge.js',
+      duplicated: true,
+      runs: [
+        {
+          name: './node_modules/lodash/fp/merge.js',
+          chunkIds: ['1', '2'],
+          value: 1024 * 4,
+        },
+        {
+          name: './node_modules/lodash/fp/merge.js',
+          chunkIds: ['1', '2'],
+          value: 1024 * 3,
+          displayValue: '3KiB',
+        },
+      ] as any,
+    }}
+    chunks={[
+      {
+        id: '1',
+        name: 'chunk-1',
+      },
+      {
+        id: '2',
+        name: 'chunk-2',
+      },
+    ]}
+    chunkIds={['1', '2']}
+    labels={['Job #2', 'Job #1']}
+  />
+);

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

@@ -0,0 +1,116 @@
+import React, { useMemo } from 'react';
+import cx from 'classnames';
+import isEmpty from 'lodash/isEmpty';
+import noop from 'lodash/noop';
+import {
+  BUNDLE_MODULES_DUPLICATE,
+  FILE_TYPE_LABELS,
+  MODULE_SOURCE_TYPE_LABELS,
+  MetricRunInfo,
+  getBundleModulesByChunk,
+  getBundleModulesByFileTpe,
+  getBundleModulesBySource,
+} from '@bundle-stats/utils';
+import { Module, MetaChunk } from '@bundle-stats/utils/types/webpack';
+
+import { Stack } from '../../layout/stack';
+import { Tag } from '../../ui/tag';
+import { ComponentLink } from '../component-link';
+import { EntryInfo } from '../entry-info';
+import css from './module-info.module.css';
+
+interface ModuleInfoProps {
+  item: {
+    label: string;
+    changed?: boolean;
+    duplicated?: boolean;
+    thirdParty?: boolean;
+    fileType?: string;
+    runs: Array<Module & MetricRunInfo>;
+  };
+  chunks?: Array<MetaChunk>;
+  chunkIds?: Array<string>;
+  labels: Array<string>;
+  customComponentLink?: React.ElementType;
+  onClose: () => void;
+}
+
+export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>) => {
+  const {
+    className = '',
+    item,
+    labels,
+    chunks = [],
+    chunkIds = [],
+    customComponentLink: CustomComponentLink = ComponentLink,
+    onClick = noop,
+    onClose,
+  } = props;
+
+  const rootClassName = cx(css.root, className);
+  const currentRun = item.runs?.[0];
+
+  const tags = useMemo(() => {
+    if (!item.duplicated) {
+      return null;
+    }
+
+    return (
+      <div>
+        <Tag as={CustomComponentLink} {...BUNDLE_MODULES_DUPLICATE} kind="danger">
+          Duplicate
+        </Tag>
+      </div>
+    );
+  }, [item]);
+
+  const fileTypeLabel = FILE_TYPE_LABELS[item.fileType as keyof typeof FILE_TYPE_LABELS];
+
+  const sourceTypeLabel = item.thirdParty
+    ? MODULE_SOURCE_TYPE_LABELS.THIRD_PARTY
+    : MODULE_SOURCE_TYPE_LABELS.FIRST_PARTY;
+
+  return (
+    <EntryInfo item={item} labels={labels} tags={tags} onClose={onClose} className={rootClassName}>
+      <Stack space="xxxsmall">
+        {!isEmpty(currentRun?.chunkIds) && (
+          <EntryInfo.Meta label="Chunks" className={css.chunks}>
+            {currentRun.chunkIds.map((chunkId) => {
+              const chunk = chunks?.find(({ id }) => id === chunkId);
+
+              if (!chunk) {
+                return null;
+              }
+
+              return (
+                <CustomComponentLink
+                  {...getBundleModulesByChunk(chunkIds, chunkId)}
+                  className={css.chunksItem}
+                >
+                  {chunk.name}
+                </CustomComponentLink>
+              );
+            })}
+          </EntryInfo.Meta>
+        )}
+
+        {item?.fileType && (
+          <EntryInfo.Meta label="File type">
+            <CustomComponentLink {...getBundleModulesByFileTpe(item.fileType, fileTypeLabel)}>
+              {fileTypeLabel}
+            </CustomComponentLink>
+          </EntryInfo.Meta>
+        )}
+
+        <EntryInfo.Meta label="Source">
+          <CustomComponentLink
+            {...getBundleModulesBySource(item.thirdParty || false, sourceTypeLabel)}
+            onClick={onClick}
+          >
+            {sourceTypeLabel}
+          </CustomComponentLink>
+        </EntryInfo.Meta>
+      </Stack>
+    </EntryInfo>
+  );
+};

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

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

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

@@ -0,0 +1,13 @@
+.fileName {
+  padding: 0 2px;
+  background: var(--color-highlight-warning);
+}
+
+.external {
+  padding: 0;
+  list-style: inside disc;
+}
+
+.packageTitleId {
+  color: var(--color-text-ultra-light);
+}

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

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { getWrapperDecorator } from '../../stories';
+import { PackageInfo } from '.';
+
+export default {
+  title: 'Components/PackageInfo',
+  component: PackageInfo,
+  decorators: [getWrapperDecorator()],
+};
+
+const RUNS = [
+  {
+    name: 'lodash',
+    value: 279901,
+    path: '../node_modules/lodash',
+  },
+  {
+    name: 'lodash',
+    value: 283712,
+    displayValue: '277.06KiB',
+    path: '../node_modules/lodash',
+  },
+];
+
+export const Default = () => (
+  <PackageInfo
+    name="lodash~1"
+    item={{
+      label: 'lodash',
+      duplicate: true,
+      runs: RUNS as any,
+    }}
+    labels={['Job #2', 'Job #1']}
+  />
+);

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

@@ -0,0 +1,135 @@
+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';
+import { Icon } from '../../ui';
+
+interface PackageInfoProps {
+  item: {
+    label: string;
+    duplicate?: boolean;
+    runs: Array<Package & MetricRunInfo>;
+  };
+  labels: Array<string>;
+  customComponentLink?: React.ElementType;
+  onClose: () => void;
+}
+
+export const PackageInfo = (props: PackageInfoProps & React.ComponentProps<'div'>) => {
+  const {
+    className = '',
+    item,
+    labels,
+    customComponentLink: CustomComponentLink = ComponentLink,
+    onClose,
+  } = props;
+
+  const packages = item.label.split(PACKAGES_SEPARATOR);
+  const name = packages[packages.length - 1];
+  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} kind="danger">
+          Duplicate
+        </Tag>
+      </div>
+    );
+  }, [item]);
+
+  return (
+    <EntryInfo
+      itemTitle={packageTitle}
+      item={item}
+      labels={labels}
+      tags={tags}
+      runNameSelector="path"
+      onClose={onClose}
+      className={className}
+    >
+      <EntryInfo.Meta label="Path">
+        <FileName name={normalizedPackagePath} className={css.fileName} />
+      </EntryInfo.Meta>
+
+      <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}>
+        <FlexStack
+          space="xxxsmall"
+          alignItems="center"
+          as="a"
+          href={`https://www.npmjs.com/package/${normalizedName}`}
+          target="_blank"
+          rel="noreferrer"
+          className={css.externalLink}
+        >
+          <span>npmjs.com</span>
+          <Icon glyph={Icon.ICONS.EXTERNAL_LINK} size="small" />
+        </FlexStack>
+        <FlexStack
+          space="xxxsmall"
+          alignItems="center"
+          as="a"
+          href={`https://bundlephobia.com/result?p=${normalizedName}`}
+          target="_blank"
+          rel="noreferrer"
+          className={css.externalLink}
+        >
+          <span>bundlephobia.com</span>
+          <Icon glyph={Icon.ICONS.EXTERNAL_LINK} size="small" />
+        </FlexStack>
+      </FlexStack>
+    </EntryInfo>
+  );
+};

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

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