@bundle-stats/ui 4.16.0-beta.9 → 4.17.0-beta.0

package/src/app/app-home-assistant.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { createJobs } from '@bundle-stats/utils';
+
+/* eslint-disable import/no-unresolved, import/no-relative-packages */
+import currentData from '../../../../fixtures/home-assistant/current.json';
+import baselineData from '../../../../fixtures/home-assistant/baseline.json';
+import { metaBaseline, metaCurrent } from '../../../../fixtures/meta';
+/* eslint-enable import/no-unresolved, import/no-relative-packages */
+import { App } from '.';
+
+const CURRENT_SOURCE = {
+  ...metaCurrent,
+  webpack: currentData,
+};
+
+const BASELINE_SOURCE = {
+  ...metaBaseline,
+  webpack: baselineData,
+};
+
+const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE]);
+
+const meta: Meta<typeof App> = {
+  title: 'App/HomeAssistant',
+  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} />,
+};

package/src/app/app-outline.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { createJobs } from '@bundle-stats/utils';
+
+/* eslint-disable import/no-unresolved, import/no-relative-packages */
+import currentData from '../../../../fixtures/outline/current.json';
+import baselineData from '../../../../fixtures/outline/baseline.json';
+import { metaBaseline, metaCurrent } from '../../../../fixtures/meta';
+/* eslint-enable import/no-unresolved, import/no-relative-packages */
+import { App } from '.';
+
+const CURRENT_SOURCE = {
+  ...metaCurrent,
+  webpack: currentData,
+};
+
+const BASELINE_SOURCE = {
+  ...metaBaseline,
+  webpack: baselineData,
+};
+
+const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE]);
+
+const meta: Meta<typeof App> = {
+  title: 'App/Outline',
+  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} />,
+};

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.tsx

@@ -13,6 +13,7 @@ import { Asset, MetaChunk } from '@bundle-stats/utils/types/webpack';
 
 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';
@@ -89,34 +90,40 @@ 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"
+            status={item.isEntry}
+            className={css.assetNameTag}
           >
             Entrypoint
-          </Tag>
+          </AssetMetaTag>
         )}
         {item.isInitial && (
-          <Tag
+          <AssetMetaTag
             as={CustomComponentLink}
             {...getBundleAssetsByEntryType('initial')}
             onClick={onClick}
+            tag="initial"
+            status={item.isInitial}
             className={cx(css.assetNameTag, css.assetNameTagInitial)}
           >
             Initial
-          </Tag>
+          </AssetMetaTag>
         )}
         {item.isChunk && (
-          <Tag
+          <AssetMetaTag
             as={CustomComponentLink}
             {...getBundleAssetsByEntryType('chunk')}
             onClick={onClick}
+            tag="chunk"
+            status={item.isChunk}
             className={cx(css.assetNameTag, css.assetNameTagChunk)}
           >
             Chunk
-          </Tag>
+          </AssetMetaTag>
         )}
       </FlexStack>
     );

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

@@ -0,0 +1,55 @@
+.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;
+}
+
+.added {
+  background: linear-gradient(-45deg, var(--color-danger) 50%, var(--background-color) 50%);
+}
+
+.removed {
+  background: linear-gradient(135deg, var(--color-danger) 50%, var(--background-color) 50%);
+}
+
+/* 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';
+}
+

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 @@
+.root {}
+
+.notPredictive {
+  margin-right: var(--space-xxsmall);
+  display: inline-block;
+  width: var(--space-small);
+  height: var(--space-small);
+}
+
+.notPredictiveAnchor {}
+
+.notPredictiveIcon {
+  color: var(--color-warning-dark);
+}
+
+.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,60 @@
+import React, { ElementType } from 'react';
+import cx from 'classnames';
+
+import { Icon } from '../../ui/icon';
+import { FileName } from '../../ui/file-name';
+import { HoverCard } from '../../ui/hover-card';
+import { AssetNotPredictive } from '../asset-not-predictive';
+
+import { 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={cx(css.root, className)}>
+      {isNotPredictive && (
+        <HoverCard
+          label={<Icon className={css.notPredictiveIcon} glyph={Icon.ICONS.WARNING} />}
+          className={css.notPredictive}
+          anchorClassName={css.notPredictiveAnchor}
+        >
+          <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.tsx

@@ -1,3 +1,4 @@
+import type { ComponentProps } from 'react';
 import React from 'react';
 import cx from 'classnames';
 import type { Asset } from '@bundle-stats/utils/types/webpack';
@@ -6,19 +7,20 @@ import { Stack } from '../../layout/stack';
 import { Table } from '../../ui/table';
 import css from './asset-not-predictive.module.css';
 
-interface AssetNotPredictiveProps {
+export type AssetNotPredictiveProps = {
   runs?: Array<Asset>;
-  labels?: Array<string>
-}
+  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)}>
+      <Stack space="xxxsmall">
+        <h3>Asset hash is not predictive</h3>
+        <p className={css.text}>File names are equal, but the size is different.</p>
+      </Stack>
       {runs && (
         <Table outline compact>
           <Table.THead>