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

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

@@ -0,0 +1,134 @@
+import React from 'react';
+import cx from 'classnames';
+import { Portal } from 'ariakit/portal';
+import { METRIC_TYPES, MetricRunInfo, getMetricRunInfo } from '@bundle-stats/utils';
+
+import { Box } from '../../layout/box';
+import { Stack } from '../../layout/stack';
+import { FileName } from '../../ui/file-name';
+import { Icon } from '../../ui/icon';
+import { Table } from '../../ui/table';
+import { RunInfo } from '../run-info';
+import css from './entry-info.module.css';
+
+interface EntryInfoMetaProps {
+  label: string;
+}
+
+const EntryInfoMeta = ({
+  className = '',
+  label,
+  children,
+}: EntryInfoMetaProps & React.ComponentProps<'p'>) => (
+  <p className={cx(css.meta, className)}>
+    <span className={css.metaLabel}>{label}</span>
+    <span className={css.metaContent}>{children}</span>
+  </p>
+);
+
+interface EntryRun {
+  name: string;
+}
+
+interface EntryInfoProps {
+  itemTitle?: React.ReactNode;
+  item: {
+    label: string;
+    runs: Array<EntryRun & MetricRunInfo>;
+  };
+  labels: Array<string>;
+  runNameSelector?: string;
+  runNameLabel?: string;
+  tags?: React.ReactNode;
+  onClose: () => void;
+}
+
+export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) => {
+  const {
+    className = '',
+    itemTitle = null,
+    item,
+    labels,
+    runNameSelector = 'name',
+    runNameLabel = 'Path',
+    children,
+    tags = null,
+    onClose,
+  } = props;
+
+  const baselineRun = item.runs.length > 1 ? item.runs?.[item.runs.length - 1] : null;
+
+  // Get the metric run info to handle added/removed cases
+  const metricRunInfo = getMetricRunInfo(
+    METRIC_TYPES.METRIC_TYPE_FILE_SIZE,
+    item.runs?.[0]?.value,
+    baselineRun?.value || 0,
+  );
+
+  return (
+    <Portal className={cx(css.root, className)}>
+      <Box padding="small" as="header" className={css.header}>
+        <Stack space="small">
+          {tags && <div>{tags}</div>}
+
+          <Stack space="xxxsmall">
+            <h3 className={css.label}>
+              <FileName as="code" name={itemTitle || item.label} className={css.fileName} />
+            </h3>
+
+            <RunInfo
+              current={metricRunInfo.displayValue}
+              delta={metricRunInfo.displayDeltaPercentage}
+              deltaType={metricRunInfo.deltaType}
+              baseline={baselineRun?.displayValue || '0B'}
+              size="large"
+            />
+          </Stack>
+        </Stack>
+        <button type="button" onClick={onClose} className={css.headerClose}>
+          <Icon glyph={Icon.ICONS.CLOSE} />
+        </button>
+      </Box>
+      <Box padding="small" as="main" className={css.contentWrapper}>
+        <Stack space="small" className={css.content}>
+          {children}
+
+          <Table outline className={css.runs}>
+            <Table.THead>
+              <Table.Tr>
+                <Table.Th className={cx(css.runsCell, css.runsColJob)}>&nbsp;</Table.Th>
+                <Table.Th className={cx(css.runsCell, css.runsColName)}>{runNameLabel}</Table.Th>
+                <Table.Th className={cx(css.runsCell, css.runsColSize)}>Size</Table.Th>
+              </Table.Tr>
+            </Table.THead>
+            <Table.TBody>
+              {item.runs.map((run, index) => {
+                const key = `info-${run?.name || index}-${index}`;
+
+                return (
+                  <Table.Tr key={key}>
+                    <Table.Th className={cx(css.runsCell, css.runsColJob)}>{labels[index]}</Table.Th>
+                    <Table.Td className={cx(css.runsCell, css.runsColName)}>
+                      <FileName
+                        className={css.fileName}
+                        as="code"
+                        name={(run as any)?.[runNameSelector] || '-'}
+                      />
+                    </Table.Td>
+                    <Table.Td className={cx(css.runsCell, css.runsColSize)}>
+                      <span className={css.size}>
+                        {typeof run?.value !== 'undefined' ? run.value : '-'}
+                      </span>
+                    </Table.Td>
+                  </Table.Tr>
+                );
+              })}
+            </Table.TBody>
+          </Table>
+        </Stack>
+      </Box>
+    </Portal>
+  );
+};
+
+EntryInfo.Meta = EntryInfoMeta;

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

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

package/src/components/index.js

@@ -5,18 +5,19 @@ export { BundleAssetsTotalsChartBars } from './bundle-assets-totals-chart-bars';
 export { BundlePackages } from './bundle-packages';
 export { BundleModules } from './bundle-modules';
 export { ComponentLink } from './component-link';
-export { DuplicatePackagesInsight } from './duplicate-packages-insight';
 export { Delta } from './delta';
+export { InsightIcon } from './insight-icon';
+export { Insights } from './insights';
 export { JobName } from './job-name';
-export { JobHeader } from './job-header';
 export { JobsHeader } from './jobs-header';
 export { LighthouseTable } from './lighthouse-table';
 export { Metric } from './metric';
+export { MetricRunInfo, MetricRunInfoProps } from './metric-run-info';
 export { MetricsTable } from './metrics-table';
 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 { RunInfo, RunInfoProps } from './run-info';
 export { Summary } from './summary';
 export { TotalSizeTypeTitle } from './total-size-type-title';

package/src/components/insight-icon/index.ts

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

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/job-header/job-header.jsx

@@ -18,29 +18,32 @@ export const JobHeader = (props) => {
 
   return (
     <Stack className={rootClassName} space="xxsmall">
-      <h1 className={css.title}>
-        <span>{`#${job.internalBuildNumber}`}</span>
-        {tag && <Tag className={css.tag}>{tag}</Tag>}
-      </h1>
-      <FlexStack space="xxsmall" className={css.meta}>
+      <FlexStack space="xsmall" alignItems="center">
+        <FlexStack space="xxxsmall" as="h1" className={css.title}>
+          <span>{`#${job.internalBuildNumber}`}</span>
+          {tag && <Tag className={css.tag}>{tag}</Tag>}
+        </FlexStack>
+
         {builtAt && (
-          <FlexStack space="xxxsmall" alignItems="center" inline as="span" title={builtAt}>
-            <Icon glyph="clock" />
-            <span>
+          <FlexStack space="xxxsmall" alignItems="center" inline as="span" title={builtAt} className={css.meta}>
+            <Icon glyph="clock" className={css.metaIcon} />
+            <span className={css.metaText}>
               {formatDateTime({ dateStyle: 'medium', timeStyle: 'medium' }, builtAt)}
             </span>
           </FlexStack>
         )}
 
         {hash && (
-          <FlexStack space="xxxsmall" alignItems="center" inline title="Webpack bundle hash">
-            <Icon glyph="commit" />
-            <span>{hash}</span>
+          <FlexStack space="xxxsmall" alignItems="center" inline title="Webpack bundle hash" className={css.meta}>
+            <Icon glyph="commit" className={css.metaIcon} />
+            <span className={css.metaText}>{hash.slice(0, 7)}</span>
           </FlexStack>
         )}
-
-        <div className={css.content}>{children}</div>
       </FlexStack>
+      {children && (<FlexStack space="xxsmall" className={css.meta}>
+          <div className={css.content}>{children}</div>
+        </FlexStack>
+      )}
     </Stack>
   );
 };

package/src/components/jobs-header/jobs-header.module.css

@@ -1,16 +1,63 @@
 .root {
-  align-items: stretch;
-  flex-wrap: wrap;
   padding: var(--space-small) 0;
+  width: 100%;
+  display: flex;
 }
 
 .item {
-  flex: 0 0 auto;
-  padding: 0 var(--space-medium);
+  position: relative;
+  flex: 1 0 10%;
+  max-width: 50%;
+  overflow: hidden;
+  padding: 0 var(--space-small);
   border-left: 1px solid var(--color-outline);
 }
 
+.item::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--space-xxsmall);
+  background: linear-gradient(90deg, transparent, var(--color-background));
+}
+
+.item + .item {
+  margin-left: var(--space-small);
+}
+
 .item:first-child {
   border-left: 0;
   padding-left: 0;
 }
+
+.itemTitle {
+  font-size: var(--size-xlarge);
+  line-height: 1;
+  font-weight: bold;
+  vertical-align: top;
+}
+
+.itemTag {
+  margin-left: var(--space-xxsmall);
+  vertical-align: top;
+  outline: 1px solid var(--color-outline);
+  background: var(--color-highlight);
+  color: var(--color-text-light);
+}
+
+.itemMeta {
+  font-size: var(--size-small);
+  color: var(--color-text-light);
+}
+
+.itemMetaIcon {
+  flex: 0 0 auto;
+}
+
+.itemMetaText {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}

package/src/components/jobs-header/jobs-header.stories.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { getWrapperDecorator } from '../../stories';
+import { JobsHeader } from '.';
+
+export default {
+  title: 'Components/JobsHeader',
+  component: JobsHeader,
+  decorators: [getWrapperDecorator()],
+};
+
+export const Default = () => (
+  <JobsHeader
+    jobs={[
+      {
+        internalBuildNumber: 1,
+        meta: {
+          webpack: {
+            builtAt: '2019-01-01T00:00:00.000Z',
+            hash: 'abcd1234',
+          },
+        },
+      },
+    ]}
+  />
+);
+
+export const MultipleJobs = () => (
+  <JobsHeader
+    jobs={[
+      {
+        internalBuildNumber: 1,
+        meta: {
+          webpack: {
+            builtAt: '2019-01-01T00:00:00.000Z',
+            hash: 'abcd1234',
+          },
+        },
+      },
+      {
+        internalBuildNumber: 2,
+        meta: {
+          webpack: {
+            builtAt: '2019-01-02T00:00:00.000Z',
+            hash: 'efgh1234',
+          },
+        },
+      },
+    ]}
+  />
+);

package/src/components/jobs-header/jobs-header.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import cx from 'classnames';
+import { formatDateTime } from '@bundle-stats/utils';
+
+import I18N from '../../i18n';
+import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
+import { Icon } from '../../ui/icon';
+import { Tag } from '../../ui/tag';
+import css from './jobs-header.module.css';
+
+interface ItemProps {
+  job: {
+    internalBuildNumber: number;
+    meta?: {
+      webpack?: {
+        builtAt?: string;
+        hash?: string;
+      };
+    };
+  };
+  tag: string;
+}
+
+export const Item = (props: ItemProps & React.ComponentProps<'div'>) => {
+  const { className, tag, job } = props;
+
+  const { builtAt, hash } = job.meta?.webpack || {};
+  const rootClassName = cx(css.item, className);
+
+  return (
+    <FlexStack space="xsmall" alignItems="center" className={rootClassName}>
+      <FlexStack space="xxxsmall" as="h1" className={css.itemTitle}>
+        <span>{`#${job.internalBuildNumber}`}</span>
+        {tag && <Tag className={css.itemTag}>{tag}</Tag>}
+      </FlexStack>
+
+      {builtAt && (
+        <FlexStack
+          space="xxxsmall"
+          alignItems="center"
+          inline
+          as="span"
+          title={builtAt}
+          className={css.itemMeta}
+        >
+          <Icon glyph="clock" className={css.itemMetaIcon} />
+          <span className={css.itemMetaText}>
+            {formatDateTime({ dateStyle: 'medium', timeStyle: 'medium' }, builtAt)}
+          </span>
+        </FlexStack>
+      )}
+
+      {hash && (
+        <FlexStack
+          space="xxxsmall"
+          alignItems="center"
+          inline
+          as="span"
+          title="Webpack bundle hash"
+          className={css.itemMeta}
+        >
+          <Icon glyph="commit" className={css.itemMetaIcon} />
+          <span className={css.itemMetaText}>{hash.slice(0, 7)}</span>
+        </FlexStack>
+      )}
+    </FlexStack>
+  );
+};
+
+interface JobsHeaderProps {
+  jobs?: Array<ItemProps['job']> | null;
+}
+
+export const JobsHeader = (props: JobsHeaderProps & React.ComponentProps<'header'>) => {
+  const { className, jobs } = props;
+  const rootClassName = cx(css.root, className);
+
+  return (
+    <header className={rootClassName}>
+      {jobs?.map((job, index) => (
+        <Item
+          key={job.internalBuildNumber || index}
+          job={job}
+          tag={index === 0 ? I18N.CURRENT : I18N.BASELINE}
+        />
+      ))}
+    </header>
+  );
+};

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