@bundle-stats/ui 4.2.2 → 4.2.3-beta.1

package/src/components/delta/delta.jsx

@@ -4,7 +4,7 @@ import cx from 'classnames';
 
 import css from './delta.module.css';
 
-export const Delta = ({ className, displayValue, deltaType, inverted }) => {
+export const Delta = ({ className = '', displayValue, deltaType, inverted = false }) => {
   const rootClassName = cx(css.root, className, inverted && css.inverted, css[deltaType]);
   return <span className={rootClassName}>{displayValue}</span>;
 };

package/src/components/delta/delta.module.css

@@ -1,6 +1,11 @@
 .root {
-  white-space: nowrap;
   color: var(--color-gray-ultra-light);
+  font-family: var(--font-family-fixed);
+  white-space: nowrap;
+}
+
+.CHANGE {
+  color: var(--color-info);
 }
 
 .HIGH_NEGATIVE {
@@ -28,11 +33,16 @@
 }
 
 .inverted {
-  border-radius: var(--radius-small);
+  padding: 0 2px;
+  border-radius: var(--radius-xsmall);
   background-color: var(--color-gray-ultra-light);
   color: var(--color-light);
 }
 
+.inverted.CHANGE {
+  background: var(--color-info-light);
+}
+
 .inverted.HIGH_NEGATIVE {
   background: var(--color-red-dark);
 }

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

@@ -0,0 +1,3 @@
+export const PATH = 'Path';
+export const CLOSE_TITLE = 'Close side panel';
+export const SIZE = 'Size';

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

@@ -0,0 +1,136 @@
+.root {
+  position: fixed;
+  right: 0;
+  top: var(--entry-info-top);
+  bottom: 0;
+  width: 100vw;
+  max-width: var(--entry-info-width);
+  z-index: calc(var(--layer-high) - 1);
+  background: #fff;
+  box-shadow: var(--shadow-layer-high);
+}
+
+/** layout - full height content */
+.root {
+  display: flex;
+  flex-flow: column;
+}
+
+.header {
+  flex: 0 0 auto;
+}
+
+.contentWrapper {
+  flex: 1 1 auto;
+  overflow: auto;
+}
+
+/** header */
+.header {
+  /** space for close icon */
+  padding-right: calc(var(--space-xlarge) + var(--space-xxxsmall) + var(--space-xsmall));
+  border-bottom: 1px solid var(--color-outline);
+}
+
+.headerClose {
+  position: absolute;
+  right: calc(var(--space-small) - var(--space-xxxsmall));
+  top: calc(var(--space-small) - var(--space-xxxsmall));
+  color: var(--color-text-ultra-light);
+}
+
+.headerClose:hover,
+.headerClose:active,
+.headerClose:focus {
+  color: var(--color-text-light);
+}
+
+/** comon components */
+.fileName {
+  max-width: 100%;
+  padding: 0 2px;
+  background: var(--color-highlight-warning);
+  line-height: var(--line-height);
+}
+
+.label {
+  font-size: var(--size-medium);
+}
+
+.runs {
+  font-size: var(--size-small);
+}
+
+.runs .runsColJob {
+  white-space: nowrap;
+}
+
+.runs .runsColName {
+  width: 100%;
+}
+
+.runs .runsColSize {
+  text-align: right;
+  white-space: nowrap;
+}
+
+.size {
+  font-family: var(--font-family-fixed);
+}
+
+/**
+ * Meta element
+ */
+.meta {}
+
+.metaLabel {
+  margin-right: var(--space-xxxsmall);
+  min-width: 8em;
+  flex: 0 1 6em;
+  color: var(--color-text-light);
+}
+
+.metaLabelTooltip {
+  margin-left: var(--space-xxxsmall);
+  color: var(--color-text-ultra-light);
+}
+
+.metaContent {
+  padding: 1px 0;
+  flex: 0 1 auto;
+}
+
+.metaLink {
+  padding: 1px var(--space-xxxsmall);
+  display: inline-block;
+  line-height: var(--line-height-heading);
+  border-radius: var(--radius-small);
+  background: var(--color-highlight);
+  transition: var(--transition-out);
+
+  text-decoration: none;
+  text-transform: none;
+  font-weight: normal;
+  max-width: 16em;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.metaLink {
+  margin-right: var(--space-xxxsmall);
+}
+
+.metaLink:hover,
+.metaLink:active,
+.metaLink:focus {
+  background: var(--color-outline);
+  color: var(--color-primary-dark);
+}
+
+@media (min-width: 640px) {
+  .meta {
+    display: flex;
+    align-items: flex-start;
+  }
+}

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import { action } from 'storybook/actions'; // eslint-disable-line import/no-extraneous-dependencies
+
+import { getWrapperDecorator } from '../../stories';
+import { EntryInfo } from '.';
+
+export default {
+  title: 'Components/EntryInfo',
+  component: EntryInfo,
+  decorators: [getWrapperDecorator()],
+};
+
+const RUNS = [
+  {
+    name: 'static/vendor.abcd1234.js',
+    value: 982690,
+  },
+  {
+    name: 'static/vendor.defg5678.js',
+    value: 1022530,
+    displayValue: '998.56KiB',
+  },
+];
+
+export const Default = () => (
+  <EntryInfo
+    item={{
+      label: 'static/vendor.js',
+      runs: RUNS as any,
+    }}
+    labels={['Job #2', 'Job #1']}
+    onClose={action('CLOSE')}
+  />
+);
+
+export const Added = () => (
+  <EntryInfo
+    item={{
+      label: 'static/vendor.js',
+      runs: [RUNS[0], null] as any,
+    }}
+    labels={['Job #2', 'Job #1']}
+    onClose={action('CLOSE')}
+  />
+);
+
+export const Removed = () => (
+  <EntryInfo
+    item={{
+      label: 'static/vendor.js',
+      runs: [null, RUNS[1]] as any,
+    }}
+    labels={['Job #2', 'Job #1']}
+    onClose={action('CLOSE')}
+  />
+);
+
+export const WithCustomContent = () => (
+  <EntryInfo
+    item={{
+      label: 'static/vendor.js',
+      runs: RUNS as any,
+    }}
+    labels={['Job #2', 'Job #1']}
+    tags={<span>Critical tags</span>}
+    onClose={action('CLOSE')}
+  >
+    <div>
+      <EntryInfo.Meta label="Meta 1">value 1</EntryInfo.Meta>
+      <EntryInfo.Meta label="Meta 2">value 2</EntryInfo.Meta>
+    </div>
+    <div>custom entry info 1</div>
+    <div>custom entry info 2</div>
+  </EntryInfo>
+);

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

@@ -0,0 +1,186 @@
+import type { ElementType, ReactNode } from 'react';
+import React from 'react';
+import cx from 'classnames';
+import { Portal } from 'ariakit/portal';
+import type { MetricRunInfo, ReportMetricRow, ReportMetricRun } from '@bundle-stats/utils';
+import { METRIC_TYPE_CONFIGS, getMetricRunInfo } from '@bundle-stats/utils';
+
+import { Box } from '../../layout/box';
+import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
+import { FileName } from '../../ui/file-name';
+import { Button } from '../../ui/button';
+import { Icon } from '../../ui/icon';
+import { Table } from '../../ui/table';
+import { RunInfo } from '../run-info';
+import * as I18N from './entry-info.i18n';
+import css from './entry-info.module.css';
+import { CopyToClipboard, Tooltip } from '../../ui';
+
+interface EntryInfoMetaLinkProps {
+  as?: ElementType;
+}
+
+export const EntryInfoMetaLink = (props: EntryInfoMetaLinkProps & React.ComponentProps<'a'>) => {
+  const { as: BaseComponent = 'a', className = '', ...restProps } = props;
+  return <BaseComponent className={cx(css.metaLink, className)} {...restProps} />;
+};
+
+interface EntryInfoMetaProps {
+  label: string;
+  tooltip?: ReactNode;
+}
+
+const EntryInfoMeta = ({
+  className = '',
+  label,
+  tooltip,
+  children,
+}: EntryInfoMetaProps & React.ComponentProps<'p'>) => (
+  <div className={cx(css.meta, className)}>
+    <span className={css.metaLabel}>
+      {label}
+      {tooltip && (
+        <Tooltip title={tooltip} className={css.metaLabelTooltip}>
+          <Icon glyph="help" />
+        </Tooltip>
+      )}
+    </span>
+    <div className={css.metaContent}>{children}</div>
+  </div>
+);
+
+function defaultRenderRunInfo(item: ReportMetricRow) {
+  const baselineRun = item.runs.length > 1 ? item.runs?.[item.runs.length - 1] : null;
+
+  // Get the metric run info to handle added/removed cases when there are more than 2 jobs
+  const metricRunInfo = getMetricRunInfo(
+    METRIC_TYPE_CONFIGS.METRIC_TYPE_FILE_SIZE,
+    item.runs?.[0]?.value || 0,
+    baselineRun?.value || 0,
+  ) as MetricRunInfo;
+
+  return (
+    <RunInfo
+      current={metricRunInfo.displayValue}
+      delta={metricRunInfo.displayDeltaPercentage}
+      deltaPercentage={metricRunInfo.displayDelta}
+      deltaType={metricRunInfo.deltaType}
+      baseline={baselineRun?.displayValue || '0B'}
+      size="large"
+    />
+  );
+}
+
+export type RenderRunNameProps<T extends ReportMetricRun = ReportMetricRun> = {
+  className?: string;
+  run: T;
+  runSelector: string;
+};
+
+interface EntryInfoProps {
+  itemTitle?: React.ReactNode;
+  item: ReportMetricRow;
+  labels: Array<string>;
+  runNameSelector?: string;
+  runNameLabel?: string;
+  runSizeLabel?: string;
+  tags?: React.ReactNode;
+  onClose: () => void;
+  renderRunInfo?: (item: ReportMetricRow) => React.ReactNode;
+  RunName?: React.ElementType;
+}
+
+export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) => {
+  const {
+    className = '',
+    itemTitle = null,
+    item,
+    labels,
+    runNameSelector = 'name',
+    runNameLabel = I18N.PATH,
+    runSizeLabel = I18N.SIZE,
+    tags = null,
+    onClose,
+    renderRunInfo = defaultRenderRunInfo,
+    RunName = React.Fragment,
+    children,
+  } = props;
+
+  return (
+    <Portal className={cx(css.root, className)}>
+      <Box padding="medium" as="header" className={css.header}>
+        <Stack space="small">
+          <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.label}>
+            <FileName as="code" name={itemTitle || item.label} className={css.fileName} />
+            <CopyToClipboard text={item.label} size="small" />
+          </FlexStack>
+          <div>{renderRunInfo(item)}</div>
+        </Stack>
+        <Button
+          radius="circle"
+          type="button"
+          onClick={onClose}
+          aria-label={I18N.CLOSE_TITLE}
+          className={css.headerClose}
+        >
+          <Icon glyph={Icon.ICONS.CLOSE} size="large" />
+        </Button>
+      </Box>
+      <Box padding="medium" as="main" className={css.contentWrapper}>
+        <Stack space="small" className={css.content}>
+          {tags && <div>{tags}</div>}
+
+          {children}
+
+          <Table outline compact 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)}>{runSizeLabel}</Table.Th>
+              </Table.Tr>
+            </Table.THead>
+            <Table.TBody>
+              {item.runs.map((run, index) => {
+                const key = `info-${run?.name || index}-${index}`;
+                const rowRun = run as any;
+
+                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)}>
+                      {rowRun?.[runNameSelector] ? (
+                        <FlexStack space="xxxsmall" alignItems="center" className={css.label}>
+                          <RunName run={rowRun} nameSelector={runNameSelector}>
+                            <FileName
+                              as="code"
+                              name={rowRun[runNameSelector]}
+                              className={className}
+                            />
+                          </RunName>
+                          <CopyToClipboard text={item.label} size="small" />
+                        </FlexStack>
+                      ) : (
+                        '-'
+                      )}
+                    </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

@@ -1,7 +1,6 @@
 export { BrowsertimeTable } from './browsertime-table';
 export { BundleAssets } from './bundle-assets';
-export { BundleAssetsTotalsTable } from './bundle-assets-totals-table';
-export { BundleAssetsTotalsChartBars } from './bundle-assets-totals-chart-bars';
+export { BundleAssetsTotals } from './bundle-assets-totals';
 export { BundlePackages } from './bundle-packages';
 export { BundleModules } from './bundle-modules';
 export { ComponentLink } from './component-link';
@@ -9,15 +8,13 @@ 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/insight-icon.module.css

@@ -13,7 +13,7 @@
 
 .warning {
   padding-top: 1px;
-  background: var(--color-yellow-200);
+  background: var(--color-yellow-100);
   color: var(--color-yellow-900);
 }
 

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

@@ -2,8 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import { InsightType } from '@bundle-stats/utils';
 
-import { Icon } from '../../ui/icon';
-// @ts-ignore
+import { Icon, IconGlyph } from '../../ui/icon';
 import css from './insight-icon.module.css';
 
 const InsightTypeIconMap = new Map([
@@ -20,8 +19,7 @@ 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;
+  const glyph = InsightTypeIconMap.get(resolvedType) as IconGlyph;
 
   return <Icon glyph={glyph} className={rootClassName} />;
 };
-

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

@@ -4,6 +4,7 @@
 
 .entry {
   color: inherit;
+  line-height: var(--line-height-heading);
   text-decoration: none;
 }
 

package/src/components/insights/insights.tsx

@@ -5,7 +5,6 @@ import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { ComponentLink } from '../component-link';
 import { InsightIcon } from '../insight-icon';
-// @ts-ignore
 import css from './insights.module.css';
 
 interface InsightsProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/components/job-name/job-name.jsx

@@ -4,7 +4,13 @@ import PropTypes from 'prop-types';
 import { Tooltip } from '../../ui/tooltip';
 import css from './job-name.module.css';
 
-export const JobName = ({ as: Component, title, internalBuildNumber, children, ...restProps }) => (
+export const JobName = ({
+  as: Component = 'span',
+  title,
+  internalBuildNumber,
+  children,
+  ...restProps
+}) => (
   <Tooltip className={css.root} as={Component} title={title} {...restProps}>
     {children || `Job #${internalBuildNumber}`}
   </Tooltip>

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

@@ -1,16 +1,60 @@
 .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: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 {
+  color: var(--color-text-light);
+  font-size: var(--size-small);
+}
+
+.itemMetaIcon {
+  flex: 0 0 auto;
+  color: var(--color-text-ultra-light);
+}
+
+.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',
+          },
+        },
+      },
+    ]}
+  />
+);