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

package/src/assets/icons.svg.jsx

@@ -6,10 +6,9 @@ export const SvgIcons = (props) => (
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-arrow-down"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       id="arrow"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -18,39 +17,86 @@ export const SvgIcons = (props) => (
     <symbol
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-arrow-right-circle"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       viewBox="0 0 24 24"
       id="arrow-right-circle"
       xmlns="http://www.w3.org/2000/svg"
     >
       <circle cx="12" cy="12" r="10" />
-      <path d="M12 16l4-4-4-4M8 12h8" />
+      <path d="m12 16 4-4-4-4M8 12h8" />
     </symbol>
     <symbol
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-x-circle"
-      id="cancel"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      id="check"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle cx="12" cy="12" r="10" />
-      <path d="M15 9l-6 6M9 9l6 6" />
+      <path d="M20 6 9 17l-5-5" />
+    </symbol>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      viewBox="0 0 24 24"
+      id="chevron-down"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="m6 9 6 6 6-6" />
+    </symbol>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      viewBox="0 0 24 24"
+      id="chevron-up"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="m18 15-6-6-6 6" />
+    </symbol>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      id="clipboard"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
+      <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
+    </symbol>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      id="clipboard-check"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
+      <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
+      <path d="m9.277 15.145 2 2 4-4" />
     </symbol>
     <symbol
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-clock"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       id="clock"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -60,37 +106,44 @@ export const SvgIcons = (props) => (
     <symbol
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-x-circle"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       viewBox="0 0 24 24"
       id="close"
       xmlns="http://www.w3.org/2000/svg"
     >
       <circle cx="12" cy="12" r="10" />
-      <path d="M15 9l-6 6M9 9l6 6" />
+      <path d="m15 9-6 6M9 9l6 6" />
     </symbol>
     <symbol
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-git-commit"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       id="commit"
       xmlns="http://www.w3.org/2000/svg"
     >
       <circle cx="12" cy="12" r="4" />
       <path d="M1.05 12H7M17.01 12h5.95" />
     </symbol>
+    <symbol
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      id="download"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z" />
+    </symbol>
     <symbol
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       viewBox="0 0 24 24"
       id="error"
       xmlns="http://www.w3.org/2000/svg"
@@ -98,39 +151,57 @@ export const SvgIcons = (props) => (
       <circle cx="12" cy="12" r="10" />
       <path d="M12 8v4M12 16h.01" />
     </symbol>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      viewBox="0 0 24 24"
+      id="external-link"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3" />
+    </symbol>
     <symbol
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-bar-chart"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       id="filter"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path d="M12 20V10M18 20V4M6 20v-4" />
     </symbol>
+    <symbol viewBox="0 0 98 96" id="github" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+        fill="currentColor"
+      />
+    </symbol>
     <symbol
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-help-circle"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       id="help"
       xmlns="http://www.w3.org/2000/svg"
     >
       <circle cx="12" cy="12" r="10" />
-      <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01" />
+      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01" />
     </symbol>
     <symbol
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       viewBox="0 0 24 24"
       id="info"
       xmlns="http://www.w3.org/2000/svg"
@@ -142,31 +213,67 @@ export const SvgIcons = (props) => (
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-menu"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       id="menu"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path d="M3 12h18M3 6h18M3 18h18" />
     </symbol>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      viewBox="0 0 24 24"
+      id="more-vertical"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="12" cy="12" r="1" />
+      <circle cx="12" cy="5" r="1" />
+      <circle cx="12" cy="19" r="1" />
+    </symbol>
     <symbol viewBox="0 0 24 24" fill="currentColor" id="sort" xmlns="http://www.w3.org/2000/svg">
       <path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z" />
       <path d="M0 0h24v24H0z" fill="none" />
     </symbol>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      viewBox="0 0 24 24"
+      id="table"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18" />
+    </symbol>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      id="treemap"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 21h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9M12.025 3.422 12 20.652ZM12.85 9l7.347.025zm-.153 6 7.576.025zm4.334.764L17 20.326Z" />
+    </symbol>
     <symbol
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-alert-triangle"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       id="warning"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4M12 17h.01" />
+      <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01" />
     </symbol>
   </svg>
 );

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

@@ -0,0 +1,7 @@
+export const ENTRY = 'Entry';
+export const INITIAL = 'Initial';
+export const CHUNK = 'Chunk';
+export const CHUNK_TOOLTIP = "The bundler's chunk from which the assets originated";
+export const ENTRYPOINT = 'Entrypoint';
+export const FILE_TYPE = 'File type';
+export const FILE_TYPE_TOOLTIP = 'Asset file type: JS, CSS, image, media, fonts, HTML, or other';

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

@@ -1,9 +1,40 @@
-.fileName {
-  max-width: 100%;
-  padding: 2px;
-  background: var(--color-highlight-warning);
+.assetNameTag {
+  color: var(--color-background);
 }
 
-.viewModules {
+.assetNameTag:hover,
+.assetNameTag:active,
+.assetNameTag:focus {
+  color: var(--color-background);
+}
+
+.assetNameTagEntry {
+  background: var(--color-info-dark);
+}
+
+.assetNameTagInitial {
+  background: var(--color-info);
+}
+
+.assetNameTagChunk {
+  background: var(--color-info-light);
+}
+
+.label {
+  display: inline-block;
+  min-width: 6em;
+}
+
+.label::after {
+  content: ' ';
+}
+
+.runNameTags {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--space-xxxsmall) / 2);
+}
+
+.runNameTags:empty {
   display: block;
 }

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { action } from 'storybook/actions'; // eslint-disable-line import/no-extraneous-dependencies
+
+import { getWrapperDecorator } from '../../stories';
+import { AssetInfo } from '.';
+
+export default {
+  title: 'Components/AssetInfo',
+  component: AssetInfo,
+  decorators: [getWrapperDecorator()],
+} as Meta;
+
+const ITEM = {
+  label: 'static/vendor.js',
+  changed: true,
+  isChunk: true,
+  isEntry: true,
+  isInitial: true,
+  isNotPredictive: false,
+  runs: [
+    {
+      name: 'static/vendor.abcd1234.js',
+      value: 982690,
+      chunkId: '1',
+    },
+    {
+      name: 'static/vendor.defg5678.js',
+      value: 1022530,
+      displayValue: '998.56KiB',
+      chunkId: '2',
+    },
+  ],
+};
+
+const Template = (props: Pick<React.ComponentProps<typeof AssetInfo>, 'chunks'>) => (
+  <AssetInfo item={ITEM} labels={['Job #2', 'Job #1']} onClose={action('CLOSE')} {...props} />
+);
+
+export const Default: Story = Template.bind({});
+
+export const WithChunks: Story = Template.bind({});
+
+WithChunks.args = {
+  chunks: [
+    {
+      id: '1',
+      name: 'vendor',
+    },
+    {
+      id: '2',
+      name: 'app~common~utils~shared',
+    },
+  ],
+};
+
+export const WithFileType: Story = Template.bind({});
+
+WithFileType.args = {
+  chunks: [
+    {
+      id: '1',
+      name: 'vendor',
+    },
+    {
+      id: '2',
+      name: 'app~common~utils~shared',
+    },
+  ],
+  item: {
+    ...ITEM,
+    fileType: 'JS',
+  },
+};

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

@@ -0,0 +1,193 @@
+import type { ComponentProps, ElementType, ReactNode } from 'react';
+import React, { useMemo } from 'react';
+import cx from 'classnames';
+import noop from 'lodash/noop';
+import type { WebpackChunk } from '@bundle-stats/utils';
+import {
+  FILE_TYPE_LABELS,
+  getBundleModulesByChunk,
+  getBundleAssetsByEntryType,
+  getBundleAssetsFileTypeComponentLink,
+  getModuleFileType,
+  getBundleAssetsByChunk,
+} from '@bundle-stats/utils';
+
+import type { ReportMetricAssetRow } from '../../types';
+import { FlexStack } from '../../layout/flex-stack';
+import { AssetMetaTag } from '../asset-meta-tag';
+import { ComponentLink } from '../component-link';
+import { EntryInfo, EntryInfoMetaLink } from '../entry-info';
+import * as I18N from './asset-info.i18n';
+import css from './asset-info.module.css';
+
+interface ChunkModulesLinkProps {
+  as: ElementType;
+  chunk: WebpackChunk;
+  chunkIds: Array<string>;
+  name: string;
+}
+
+const ChunkModulesLink = ({
+  as: Component,
+  chunk,
+  chunkIds,
+  name,
+  onClick,
+}: ChunkModulesLinkProps & ComponentProps<'a'>) => {
+  const fileType = getModuleFileType(name);
+
+  return (
+    <Component
+      className={css.viewModules}
+      {...getBundleModulesByChunk(chunkIds, chunk.id, fileType)}
+      onClick={onClick}
+    >
+      View chunk modules
+    </Component>
+  );
+};
+
+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={I18N.ENTRY} size="small" />}
+        {run.isInitial && <AssetMetaTag tag="initial" title={I18N.INITIAL} size="small" />}
+        {run.isChunk && <AssetMetaTag tag="chunk" title={I18N.CHUNK} size="small" />}
+      </span>
+      {children}
+    </>
+  );
+};
+
+interface AssetInfoProps {
+  item: ReportMetricAssetRow;
+  chunks?: Array<WebpackChunk>;
+  labels: Array<string>;
+  customComponentLink?: ElementType;
+  onClose: () => void;
+}
+
+export const AssetInfo = (props: AssetInfoProps & ComponentProps<'div'>) => {
+  const {
+    className = '',
+    chunks = null,
+    customComponentLink: CustomComponentLink = ComponentLink,
+    item,
+    labels,
+    onClick = noop,
+    onClose,
+  } = props;
+
+  const currentRun = item.runs?.[0];
+
+  const tags = useMemo(() => {
+    if (!item.isEntry && !item.isInitial && !item.isChunk) {
+      return null;
+    }
+
+    return (
+      <FlexStack space="xxxsmall" alignItems="center" className={css.tags}>
+        {item.isEntry && (
+          <AssetMetaTag
+            as={CustomComponentLink}
+            {...getBundleAssetsByEntryType('entry')}
+            onClick={onClick}
+            tag="entry"
+            size="medium"
+            status={item.isEntry}
+            className={css.assetNameTag}
+          >
+            {I18N.ENTRYPOINT}
+          </AssetMetaTag>
+        )}
+        {item.isInitial && (
+          <AssetMetaTag
+            as={CustomComponentLink}
+            {...getBundleAssetsByEntryType('initial')}
+            onClick={onClick}
+            tag="initial"
+            size="medium"
+            status={item.isInitial}
+            className={cx(css.assetNameTag, css.assetNameTagInitial)}
+          >
+            {I18N.INITIAL}
+          </AssetMetaTag>
+        )}
+        {item.isChunk && (
+          <AssetMetaTag
+            as={CustomComponentLink}
+            {...getBundleAssetsByEntryType('chunk')}
+            onClick={onClick}
+            tag="chunk"
+            size="medium"
+            status={item.isChunk}
+            className={cx(css.assetNameTag, css.assetNameTagChunk)}
+          >
+            {I18N.CHUNK}
+          </AssetMetaTag>
+        )}
+      </FlexStack>
+    );
+  }, [item]);
+
+  const fileTypeLabel = FILE_TYPE_LABELS[item.fileType as keyof typeof FILE_TYPE_LABELS];
+  const currentChunk = chunks?.find(
+    (chunk) => currentRun?.chunkId && currentRun.chunkId === chunk.id,
+  );
+  const chunkIds: Array<string> = chunks?.filter(Boolean).map((chunk) => chunk.id) || [];
+
+  return (
+    <EntryInfo
+      item={item as any}
+      labels={labels}
+      tags={tags}
+      onClose={onClose}
+      RunName={AssetRunName}
+      className={cx(css.root, className)}
+    >
+      {item.fileType && (
+        <EntryInfo.Meta label={I18N.FILE_TYPE} tooltip={I18N.FILE_TYPE_TOOLTIP}>
+          <EntryInfoMetaLink
+            as={CustomComponentLink}
+            {...getBundleAssetsFileTypeComponentLink(item.fileType, fileTypeLabel)}
+            onClick={onClick}
+          >
+            {fileTypeLabel}
+          </EntryInfoMetaLink>
+        </EntryInfo.Meta>
+      )}
+
+      {currentChunk && (
+        <EntryInfo.Meta label={I18N.CHUNK} tooltip={I18N.CHUNK_TOOLTIP}>
+          <EntryInfoMetaLink
+            as={CustomComponentLink}
+            {...getBundleAssetsByChunk(chunkIds, currentRun.chunkId)}
+            onClick={onClick}
+          >
+            {currentChunk.name}
+          </EntryInfoMetaLink>
+        </EntryInfo.Meta>
+      )}
+
+      {currentChunk && (
+        <div>
+          <ChunkModulesLink
+            as={CustomComponentLink}
+            chunk={currentChunk}
+            chunkIds={chunkIds}
+            name={currentRun?.name}
+            onClick={onClick}
+          />
+        </div>
+      )}
+    </EntryInfo>
+  );
+};

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