@bundle-stats/ui 4.3.0-beta.2 → 4.3.0-rc.0

package/src/components/insight-icon/insight-icon.module.css

@@ -0,0 +1,24 @@
+.root {
+  width: calc(var(--space-small) + 6px);
+  height: calc(var(--space-small) + 6px);
+  padding: 3px;
+  border-radius: 50%;
+  background: var(--color-highlight);
+}
+
+.error {
+  background: var(--color-red-50);
+  color: var(--color-danger);
+}
+
+.warning {
+  padding-top: 1px;
+  background: var(--color-yellow-100);
+  color: var(--color-yellow-900);
+}
+
+.info {
+  background: var(--color-highlight-info);
+  color: var(--color-info);
+}
+

package/src/components/insight-icon/insight-icon.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import cx from 'classnames';
+import { InsightType } from '@bundle-stats/utils';
+
+import { Icon } from '../../ui/icon';
+import css from './insight-icon.module.css';
+
+const InsightTypeIconMap = new Map([
+  [InsightType.ERROR, Icon.ICONS.ERROR],
+  [InsightType.WARNING, Icon.ICONS.WARNING],
+  [InsightType.INFO, Icon.ICONS.INFO],
+]);
+
+interface InsightIconProps extends React.HTMLAttributes<'span'> {
+  type: InsightType;
+}
+
+export const InsightIcon = (props: InsightIconProps) => {
+  const { className, type } = props;
+  const resolvedType = Object.values(InsightType).includes(type) ? type : InsightType.WARNING;
+  const rootClassName = cx(css.root, css[resolvedType], className);
+  const glyph = InsightTypeIconMap.get(resolvedType) as string;
+
+  return <Icon glyph={glyph} className={rootClassName} />;
+};

package/src/components/insights/index.ts

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

package/src/components/insights/insights.module.css

@@ -0,0 +1,14 @@
+.icon {
+  flex: 0 0 auto;
+}
+
+.entry {
+  color: inherit;
+  text-decoration: none;
+}
+
+.entry:hover,
+.entry:active,
+.entry:focus {
+  text-decoration: underline;
+}

package/src/components/insights/insights.stories.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Insights } from '.';
+
+export default {
+  title: 'Components/Insights',
+  component: Insights,
+  decorators: [getWrapperDecorator()],
+};
+
+const Template = (props: any) => <Insights {...props} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  insights: {
+    duplicatePackages: {
+      type: 'error',
+      data: {
+        packages: { 'package-a': ['package-a', 'package-a~1'] },
+        text: 'Bundle introduced 1 and removed 2 duplicate packages',
+      },
+    },
+    newPackages: {
+      type: 'warning',
+      data: {
+        text: 'Bundle introduced 2 new packages: package-c, package-d',
+        packages: ['package-c', 'package-d'],
+      },
+    },
+  },
+};
+
+export const Info = Template.bind({});
+
+Info.args = {
+  insights: {
+    duplicatePackages: {
+      type: 'info',
+      data: {
+        packages: { 'package-a': ['package-a', 'package-a~1'] },
+        text: 'Bundle removed 1 duplicate packages',
+      },
+    },
+    newPackages: {
+      type: 'warning',
+      data: {
+        text: 'Bundle introduced 2 new packages: package-c, package-d',
+        packages: ['package-c', 'package-d'],
+      },
+    },
+  },
+};

package/src/components/insights/insights.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { JobInsightsInfo, getInsightList } from '@bundle-stats/utils';
+
+import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
+import { ComponentLink } from '../component-link';
+import { InsightIcon } from '../insight-icon';
+import css from './insights.module.css';
+
+interface InsightsProps extends React.HTMLAttributes<HTMLDivElement> {
+  insights: JobInsightsInfo;
+  customComponentLink?: React.ElementType;
+}
+
+export const Insights = (props: InsightsProps) => {
+  const {
+    insights,
+    customComponentLink: CustomComponentLink = ComponentLink,
+    ...restProps
+  } = props;
+
+  const insightList = getInsightList(insights);
+
+  return (
+    <Stack space="xxsmall" {...restProps}>
+      {insightList.map(({ name, insight, link }) => {
+        const { text } = insight.data as { text: string };
+        return (
+          <FlexStack
+            key={name}
+            space="xxsmall"
+            alignItems="center"
+            as={CustomComponentLink}
+            {...link}
+            className={css.entry}
+          >
+            <InsightIcon type={insight.type} className={css.icon} />
+            <span>{text}</span>
+          </FlexStack>
+        );
+      })}
+    </Stack>
+  );
+};

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

@@ -8,14 +8,12 @@
 
 .chunksItem {
   overflow-wrap: break-word;
+  text-decoration: none;
+  text-transform: none;
+  font-weight: normal;
+  font-size: 1em;
 }
 
 .chunksItem + .chunksItem {
   margin-left: var(--space-xxxsmall);
 }
-
-.fileName {
-  max-width: 100%;
-  padding: 2px;
-  background: var(--color-highlight-warning);
-}

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,79 @@
+import React, { useMemo } from 'react';
+import cx from 'classnames';
+import isEmpty from 'lodash/isEmpty';
+import noop from 'lodash/noop';
+import { BUNDLE_MODULES_DUPLICATE, MetricRunInfo, getBundleModulesByChunk } from '@bundle-stats/utils';
+import { Module, MetaChunk } from '@bundle-stats/utils/types/webpack';
+
+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;
+    runs: Array<Module & MetricRunInfo>;
+  };
+  chunks?: Array<MetaChunk>;
+  chunkIds?: Array<string>;
+  labels: Array<string>;
+  customComponentLink?: React.ElementType;
+}
+
+export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>) => {
+  const {
+    className = '',
+    item,
+    labels,
+    chunks = [],
+    chunkIds = [],
+    customComponentLink: CustomComponentLink = ComponentLink,
+    onClick = noop,
+  } = 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} onClick={onClick} kind="danger">Duplicate</Tag>
+      </div>
+    );
+  }, [item]);
+
+  return (
+    <EntryInfo item={item} labels={labels} tags={tags} className={rootClassName}>
+      {!isEmpty(currentRun?.chunkIds) && (
+        <div className={css.chunks}>
+          <span className={css.chunksTitle}>Chunks:</span>
+          {currentRun.chunkIds.map((chunkId) => {
+            const chunk = chunks?.find(({ id }) => id === chunkId);
+
+            if (!chunk) {
+              return null;
+            }
+
+            return (
+              <Tag
+                as={CustomComponentLink}
+                {...getBundleModulesByChunk(chunkIds, chunkId)}
+                onClick={onClick}
+                className={css.chunksItem}
+              >
+                {chunk.name}
+              </Tag>
+            );
+          })}
+        </div>
+      )}
+    </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']}
+  />
+);