@bundle-stats/ui 4.16.0 → 4.17.0-beta.1

package/src/app/app.stories.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { createJobs } from '@bundle-stats/utils';
+import merge from 'lodash/merge';
+
+/* eslint-disable import/no-unresolved, import/no-relative-packages */
+import currentData from '../../../../fixtures/job.current';
+import baselineData from '../../../../fixtures/job.baseline';
+/* eslint-enable import/no-unresolved, import/no-relative-packages */
+import { App } from '.';
+
+const CURRENT_SOURCE = {
+  webpack: {
+    ...currentData.rawData.webpack,
+    builtAt: currentData.createdAt,
+    hash: currentData.commit,
+  },
+};
+
+const BASELINE_SOURCE = {
+  webpack: {
+    ...baselineData.rawData.webpack,
+    builtAt: baselineData.createdAt,
+    hash: baselineData.commit,
+  },
+};
+
+const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE]);
+
+const MULTIPLE_JOBS = createJobs([
+  CURRENT_SOURCE,
+  BASELINE_SOURCE,
+  {
+    webpack: {
+      ...baselineData.rawData.webpack,
+      builtAt: baselineData.createdAt,
+      hash: 'aaaa1111',
+      assets: baselineData.rawData.webpack.assets.filter((asset) => asset.name.match(/.(css|js)$/)),
+      modules: baselineData.rawData.webpack.modules.slice(0, 100),
+    },
+  },
+]);
+
+const [CURRENT_JOB, BASELINE_JOB] = JOBS;
+
+const meta: Meta<typeof App> = {
+  title: 'App',
+  component: App,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    version: '1.0',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => <App jobs={JOBS} {...args} />,
+};
+
+export const NoInsights: Story = {
+  render: (args) => (
+    <App
+      jobs={[
+        {
+          ...CURRENT_JOB,
+          insights: undefined,
+        },
+        BASELINE_JOB,
+      ]}
+      {...args}
+    />
+  ),
+};
+
+export const AssetMetaChanges: Story = {
+  render: (args) => {
+    const current = merge({}, CURRENT_SOURCE);
+    const baseline = merge({}, CURRENT_SOURCE);
+
+    current.webpack.assets.push({
+      name: 'assets/js/vendors-auth.1a278dc.js',
+      size: 26364,
+    });
+    current.webpack.chunks.push({
+      id: 100,
+      entry: false,
+      initial: false,
+      files: ['assets/js/vendors-auth.1a278dc.js'],
+      names: ['vendors-auth'],
+    });
+
+    baseline.webpack.assets.push({
+      name: 'assets/js/vendors-auth.1a278dc.js',
+      size: 26364,
+    });
+    baseline.webpack.chunks.push({
+      id: 100,
+      entry: false,
+      initial: true,
+      files: ['assets/js/vendors-auth.1a278dc.js'],
+      names: ['vendors-auth'],
+    });
+
+    return <App jobs={createJobs([current, baseline])} {...args} />;
+  },
+};
+
+export const NoBaseline: Story = {
+  render: (args) => <App jobs={createJobs([CURRENT_SOURCE])} {...args} />,
+};
+
+export const EmptyBaseline: Story = {
+  render: (args) => <App jobs={createJobs([CURRENT_SOURCE, { webpack: null }])} {...args} />,
+};
+
+export const MultipleBaselines: Story = {
+  render: (args) => <App jobs={MULTIPLE_JOBS} {...args} />,
+};
+
+export const Empty: Story = {
+  render: (args) => <App {...args} />,
+};

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

@@ -29,3 +29,12 @@
   content: ' ';
 }
 
+.runNameTags {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--space-xxxsmall) / 2);
+}
+
+.runNameTags:empty {
+  display: block;
+}

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

@@ -1,3 +1,4 @@
+import type { ComponentProps, ElementType, ReactNode } from 'react';
 import React, { useMemo } from 'react';
 import cx from 'classnames';
 import noop from 'lodash/noop';
@@ -9,16 +10,17 @@ import {
   getBundleAssetsFileTypeComponentLink,
   getModuleFileType,
 } from '@bundle-stats/utils';
-import { Asset, MetaChunk } from '@bundle-stats/utils/types/webpack';
+import type { AssetMetricRun, MetaChunk } from '@bundle-stats/utils/types/webpack';
 
+import type { ReportMetricAssetRow } from '../../types';
 import { FlexStack } from '../../layout/flex-stack';
-import { Tag } from '../../ui/tag';
+import { AssetMetaTag } from '../asset-meta-tag';
 import { ComponentLink } from '../component-link';
 import { EntryInfo, EntryInfoMetaLink } from '../entry-info';
 import css from './asset-info.module.css';
 
 interface ChunkModulesLinkProps {
-  as: React.ElementType;
+  as: ElementType;
   chunks: Array<MetaChunk>;
   chunkId: string;
   name: string;
@@ -30,7 +32,7 @@ const ChunkModulesLink = ({
   chunkId,
   name,
   onClick,
-}: ChunkModulesLinkProps & React.ComponentProps<'a'>) => {
+}: ChunkModulesLinkProps & ComponentProps<'a'>) => {
   const chunk = chunks?.find(({ id }) => id === chunkId);
 
   if (!chunk) {
@@ -51,6 +53,26 @@ const ChunkModulesLink = ({
   );
 };
 
+type AssetRunNameProps = {
+  run: ReportMetricAssetRow;
+  children: ReactNode;
+};
+
+const AssetRunName = (props: AssetRunNameProps) => {
+  const { run, children } = props;
+
+  return (
+    <>
+      <span className={css.runNameTags}>
+        {run.isEntry && <AssetMetaTag tag="entry" title="Entry" size="small" />}
+        {run.isInitial && <AssetMetaTag tag="initial" title="Initial" size="small" />}
+        {run.isChunk && <AssetMetaTag tag="chunk" title="Chunk" size="small" />}
+      </span>
+      {children}
+    </>
+  );
+};
+
 interface AssetInfoProps {
   item: {
     label: string;
@@ -60,15 +82,15 @@ interface AssetInfoProps {
     isInitial?: boolean;
     isNotPredictive?: boolean;
     fileType?: string;
-    runs: Array<Asset & MetricRunInfo>;
+    runs: Array<AssetMetricRun & MetricRunInfo>;
   };
   chunks?: Array<MetaChunk>;
   labels: Array<string>;
-  customComponentLink?: React.ElementType;
+  customComponentLink?: ElementType;
   onClose: () => void;
 }
 
-export const AssetInfo = (props: AssetInfoProps & React.ComponentProps<'div'>) => {
+export const AssetInfo = (props: AssetInfoProps & ComponentProps<'div'>) => {
   const {
     className = '',
     chunks = null,
@@ -89,34 +111,43 @@ export const AssetInfo = (props: AssetInfoProps & React.ComponentProps<'div'>) =
     return (
       <FlexStack space="xxxsmall" alignItems="center" className={css.tags}>
         {item.isEntry && (
-          <Tag
+          <AssetMetaTag
             as={CustomComponentLink}
             {...getBundleAssetsByEntryType('entry')}
             onClick={onClick}
-            className={cx(css.assetNameTag, css.assetNameTagEntry)}
+            tag="entry"
+            size="medium"
+            status={item.isEntry}
+            className={css.assetNameTag}
           >
             Entrypoint
-          </Tag>
+          </AssetMetaTag>
         )}
         {item.isInitial && (
-          <Tag
+          <AssetMetaTag
             as={CustomComponentLink}
             {...getBundleAssetsByEntryType('initial')}
             onClick={onClick}
+            tag="initial"
+            size="medium"
+            status={item.isInitial}
             className={cx(css.assetNameTag, css.assetNameTagInitial)}
           >
             Initial
-          </Tag>
+          </AssetMetaTag>
         )}
         {item.isChunk && (
-          <Tag
+          <AssetMetaTag
             as={CustomComponentLink}
             {...getBundleAssetsByEntryType('chunk')}
             onClick={onClick}
+            tag="chunk"
+            size="medium"
+            status={item.isChunk}
             className={cx(css.assetNameTag, css.assetNameTagChunk)}
           >
             Chunk
-          </Tag>
+          </AssetMetaTag>
         )}
       </FlexStack>
     );
@@ -130,6 +161,7 @@ export const AssetInfo = (props: AssetInfoProps & React.ComponentProps<'div'>) =
       labels={labels}
       tags={tags}
       onClose={onClose}
+      RunName={AssetRunName}
       className={cx(css.root, className)}
     >
       {item.fileType && (

package/src/components/asset-meta-tag/asset-meta-tag.module.css

@@ -0,0 +1,56 @@
+.root {
+  --background-color: var(--color-info);
+  background: var(--background-color);
+  overflow: hidden;
+  position: relative;
+  vertical-align: middle;
+}
+
+.root::before {
+  display: block;
+  content: ' ';
+  padding: 2px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  font-size: 8px;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+/* tag */
+.entry {
+  --background-color: var(--color-info-dark);
+}
+
+.entry:empty::before {
+  content: 'e';
+}
+
+.initial {
+  --background-color: var(--color-info);
+}
+
+.initial:empty::before {
+  content: 'i';
+}
+
+.chunk {
+  --background-color: var(--color-info-light);
+}
+
+.chunk:empty::before {
+  content: 'c';
+}
+
+/* status */
+.added {
+  background: linear-gradient(-45deg, var(--color-danger-light) 50%, var(--background-color) 50%) !important;
+}
+
+.removed {
+  background: linear-gradient(135deg, var(--color-danger-light) 50%, var(--background-color) 50%) !important;
+}
+

package/src/components/asset-meta-tag/asset-meta-tag.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import cx from 'classnames';
+
+import type { TagProps } from '../../ui/tag';
+import { Tag } from '../../ui/tag';
+import css from './asset-meta-tag.module.css';
+import type { ReportMetricAssetRowMetaStatus } from '../../types';
+
+export type AssetMetaTagProps = {
+  tag: 'entry' | 'initial' | 'chunk';
+  status?: ReportMetricAssetRowMetaStatus | boolean;
+} & TagProps;
+
+export const AssetMetaTag = (props: AssetMetaTagProps) => {
+  const { className = '', title, tag, status, ...restProps } = props;
+
+  const rootClassName = cx(
+    css.root,
+    status === 'added' && css.added,
+    status === 'removed' && css.removed,
+    css[tag],
+    className,
+  );
+
+  return (
+    <Tag
+      className={rootClassName}
+      title={title}
+      size={Tag.SIZES.SMALL}
+      kind={Tag.KINDS.INFO}
+      {...restProps}
+    />
+  );
+};

package/src/components/asset-meta-tag/index.ts

@@ -0,0 +1 @@
+export * from './asset-meta-tag';

package/src/components/asset-name/asset-name.module.css

@@ -0,0 +1,32 @@
+.notPredictive {
+  margin-right: var(--space-xxsmall);
+  display: inline-block;
+  width: var(--space-small);
+  height: var(--space-small);
+}
+
+.notPredictiveIcon {
+  color: var(--color-warning-dark);
+}
+
+.notPredictiveHoverCard {
+  max-width: 480px;
+}
+
+.metaTags {
+  display: inline;
+  margin-right: var(--space-xxxsmall);
+}
+
+.metaTag + .metaTag {
+  margin-left: calc(var(--space-xxxsmall) / 2);
+}
+
+.metaTags:empty {
+  display: none;
+}
+
+.nameText {
+  display: inline-block;
+  vertical-align: middle;
+}

package/src/components/asset-name/asset-name.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AssetName } from '.';
+
+const ROW = {
+  key: 'asset/main.js',
+  label: 'asset/main.js',
+  changed: true,
+  isEntry: false,
+  isChunk: false,
+  isInitial: false,
+  isAsset: true,
+  isNotPredictive: false,
+  fileType: 'JS',
+  biggerIsBetter: false,
+  runs: [
+    { name: 'asset/main.abcd1234.js', value: 1024 * 10 },
+    { name: 'asset/main.abcd1234.js', value: 1024 * 11 },
+  ],
+};
+
+const meta = {
+  title: 'Components/AssetName',
+  component: AssetName,
+  args: {
+    customComponentLink: 'span',
+    filters: {},
+    search: '',
+  },
+} as Meta<typeof AssetName>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    row: ROW,
+  },
+};
+
+export const MetaDefault: Story = {
+  args: {
+    row: {
+      ...ROW,
+      isEntry: true,
+      isChunk: true,
+      isInitial: true,
+      isAsset: false,
+    },
+  },
+};
+
+export const MetaAdded: Story = {
+  args: {
+    row: {
+      ...ROW,
+      isEntry: 'added',
+      isChunk: 'added',
+      isInitial: 'added',
+      isAsset: false,
+    },
+  },
+};
+
+export const MetaRemoved: Story = {
+  args: {
+    row: {
+      ...ROW,
+      isEntry: 'removed',
+      isChunk: 'removed',
+      isInitial: 'removed',
+      isAsset: false,
+    },
+  },
+};
+
+export const NotPredictive: Story = {
+  args: {
+    row: {
+      ...ROW,
+      isNotPredictive: true,
+    },
+  },
+};

package/src/components/asset-name/asset-name.tsx

@@ -0,0 +1,59 @@
+import React, { ElementType } from 'react';
+
+import { Icon } from '../../ui/icon';
+import { FileName } from '../../ui/file-name';
+import { HoverCard } from '../../ui/hover-card';
+import { AssetNotPredictive } from '../asset-not-predictive';
+
+import type { ReportMetricAssetRow } from '../../types';
+import { AssetMetaTag } from '../asset-meta-tag';
+import css from './asset-name.module.css';
+
+const RUN_TITLE_CURRENT = 'Current';
+const RUN_TITLE_BASELINE = 'Baseline';
+const RUNS_LABELS = [RUN_TITLE_CURRENT, RUN_TITLE_BASELINE];
+
+export type AssetNameProps = {
+  className?: string;
+  row: ReportMetricAssetRow;
+  customComponentLink: ElementType;
+};
+
+export const AssetName = (props: AssetNameProps) => {
+  const { className = '', customComponentLink: CustomComponentLink, row } = props;
+  const { label, isNotPredictive, runs, isChunk, isEntry, isInitial } = row;
+
+  return (
+    <span className={className}>
+      {isNotPredictive && (
+        <HoverCard
+          label={<Icon className={css.notPredictiveIcon} glyph={Icon.ICONS.WARNING} />}
+          className={css.notPredictive}
+          hoverCardClassName={css.notPredictiveHoverCard}
+        >
+          <AssetNotPredictive runs={runs} labels={RUNS_LABELS} />
+        </HoverCard>
+      )}
+
+      <CustomComponentLink entryId={row.key} className={css.name}>
+        <span className={css.metaTags}>
+          {isEntry && (
+            <AssetMetaTag className={css.metaTag} title="Entrypoint" tag="entry" status={isEntry} />
+          )}
+          {isInitial && (
+            <AssetMetaTag
+              className={css.metaTag}
+              title="Initial"
+              tag="initial"
+              status={isInitial}
+            />
+          )}
+          {isChunk && (
+            <AssetMetaTag className={css.metaTag} title="Chunk" tag="chunk" status={isChunk} />
+          )}
+        </span>
+        <FileName className={css.nameText} name={label} />
+      </CustomComponentLink>
+    </span>
+  );
+};

package/src/components/asset-name/index.ts

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

package/src/components/asset-not-predictive/asset-not-predictive.module.css

@@ -1,3 +1,8 @@
-.tableValue {
+.colName {
+  width: 100%;
+  overflow: hidden;
+}
+
+.colValue {
   text-align: right;
 }

package/src/components/asset-not-predictive/asset-not-predictive.tsx

@@ -1,24 +1,28 @@
+import type { ComponentProps } from 'react';
 import React from 'react';
 import cx from 'classnames';
-import type { Asset } from '@bundle-stats/utils/types/webpack';
+import type { AssetMetricRun } from '@bundle-stats/utils/types/webpack';
 
 import { Stack } from '../../layout/stack';
 import { Table } from '../../ui/table';
 import css from './asset-not-predictive.module.css';
+import { Alert } from '../../ui';
 
-interface AssetNotPredictiveProps {
-  runs?: Array<Asset>;
-  labels?: Array<string>
-}
+export type AssetNotPredictiveProps = {
+  runs?: Array<AssetMetricRun>;
+  labels?: Array<string>;
+} & ComponentProps<'div'>;
 
-export const AssetNotPredictive = (props: AssetNotPredictiveProps & React.ComponentProps<'div'>) => {
+export const AssetNotPredictive = (props: AssetNotPredictiveProps) => {
   const { className = '', runs = null, labels = null, ...restProps } = props;
 
   return (
-    <Stack space="xsmall" {...restProps} className={cx(css.root, className)}>
-      <p className={css.text}>
-        Asset file name is the same, but the size has changed.
-      </p>
+    <Stack space="small" {...restProps} className={cx(css.root, className)}>
+      <h3>Asset hash is not predictive</h3>
+      <Alert kind="warning">
+        File names are identical, but the size is different. Content changes without a hash change
+        can cause runtime errors.
+      </Alert>
       {runs && (
         <Table outline compact>
           <Table.THead>
@@ -32,8 +36,8 @@ export const AssetNotPredictive = (props: AssetNotPredictiveProps & React.Compon
             {runs.map(({ name, value }, index) => (
               <Table.Tr key={name}>
                 <Table.Th>{labels?.[index]}</Table.Th>
-                <Table.Td>{name}</Table.Td>
-                <Table.Td className={css.tableValue}>{value}</Table.Td>
+                <Table.Td className={css.colName}>{name}</Table.Td>
+                <Table.Td className={css.colvalue}>{value}</Table.Td>
               </Table.Tr>
             ))}
           </Table.TBody>