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

package/src/app/app.jsx

@@ -1,5 +1,6 @@
 import React, { useContext, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
 import { HashRouter, NavLink, Route, Switch, useLocation } from 'react-router-dom';
 import { COMPONENT } from '@bundle-stats/utils';
 
@@ -70,24 +71,34 @@ JobsProvider.propTypes = {
 const OverviewContent = () => {
   const { jobs } = useContext(JobsContext);
 
-  const duplicatePackagesInsight = jobs[0].insights?.webpack?.duplicatePackagesV3;
-  const newPackagesInsight = jobs[0].insights?.webpack?.newPackages;
+  const insightsByName = useMemo(() => {
+    const webpackInsights = jobs?.[0]?.insights?.webpack;
+
+    if (!webpackInsights) {
+      return null
+    }
+
+    const res = {
+      ...(webpackInsights.duplicatePackagesV3 && { duplicatePackages: webpackInsights.duplicatePackagesV3 }),
+      ...(webpackInsights.newPackages && { newPackages: webpackInsights.newPackages }),
+    };
+
+    if (isEmpty(res)) {
+      return null;
+    }
+
+    return res;
+  }, [jobs]);
 
-  console.info(duplicatePackagesInsight, newPackagesInsight);
 
   return (
     <Stack space="medium">
-      {(duplicatePackagesInsight || newPackagesInsight) && (
+      {insightsByName && (
         <Container>
           <Stack space="xsmall">
             <MetricsTableTitle title="Insights" />
             <Box padding="small" outline>
-              <Insights
-                duplicatePackages={duplicatePackagesInsight}
-                newPackages={newPackagesInsight}
-                summary={jobs[0].summary?.webpack}
-                showDelta={jobs.length > 1}
-              />
+              <Insights insights={insightsByName} />
             </Box>
           </Stack>
         </Container>
@@ -114,6 +125,7 @@ const AssetsContent = () => {
           keys={METRICS_WEBPACK_ASSETS}
           data={jobs?.[0]?.summary}
           showSummaryItemDelta={jobs?.length !== 1}
+          showSummaryItemBaseline={jobs?.length !== 1}
         />
         <Box outline>
           <BundleAssets jobs={jobs} setState={bundleStatsSetState} {...bundleStatsState} />
@@ -136,6 +148,7 @@ const ModulesContent = () => {
           keys={METRICS_WEBPACK_MODULES}
           data={jobs?.[0]?.summary}
           showSummaryItemDelta={jobs?.length !== 1}
+          showSummaryItemBaseline={jobs?.length !== 1}
         />
         <Box outline>
           <BundleModules jobs={jobs} setState={bundleModulesSetState} {...bundleModulesState} />
@@ -158,6 +171,7 @@ const PackagesContent = () => {
           keys={METRICS_WEBPACK_PACKAGES}
           data={jobs?.[0]?.summary}
           showSummaryItemDelta={jobs?.length !== 1}
+          showSummaryItemBaseline={jobs?.length !== 1}
         />
         <Box outline>
           <BundlePackages jobs={jobs} {...bundlePackagesState} setState={bundlePackagesSetState} />
@@ -187,6 +201,7 @@ const AppComponent = ({ version, jobs }) => {
             keys={METRICS_WEBPACK_GENERAL}
             data={jobs[0].summary}
             showSummaryItemDelta={jobs.length !== 1}
+            showSummaryItemBaseline={jobs?.length !== 1}
           />
         </Container>
 

package/src/app/app.module.css

@@ -12,9 +12,14 @@
   text-align: center;
 }
 
+.header {
+  background-color: var(--color-background);
+  border-bottom: 1px solid var(--color-outline);
+}
+
 .summaryContainer {
   padding-top: var(--space-medium);
-  padding-bottom: var(--space-small);
+  padding-bottom: var(--space-xsmall);
 }
 
 .tabsContainer {
@@ -42,7 +47,7 @@
 
 @media (min-width: 600px) {
   :root {
-    --header-height: 72px;
+    --header-height: 52px;
   }
 
   .header {
@@ -52,13 +57,11 @@
     top: 0;
     right: 0;
     height: var(--header-height);
-    background-color: var(--color-background);
-    border-bottom: 1px solid var(--color-outline);
   }
 
   .tabsContainer {
     position: sticky;
     top: var(--header-height);
-    z-index: 100;
+    z-index: calc(var(--layer-high) - 1);
   }
 }

package/src/assets/icons/external-link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>

package/src/assets/icons/more-vertical.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="1"></circle>
+  <circle cx="12" cy="5" r="1"></circle>
+  <circle cx="12" cy="19" r="1"></circle>
+</svg>

package/src/assets/icons.svg

@@ -26,6 +26,9 @@
 <circle cx="12" cy="12" r="10"/>
 <path d="M12 8v4M12 16h.01"/>
 </symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link" viewBox="0 0 24 24" id="external-link" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 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" id="filter" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 20V10M18 20V4M6 20v-4"/>
 </symbol>
@@ -40,6 +43,11 @@
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu" id="menu" xmlns="http://www.w3.org/2000/svg">
 <path d="M3 12h18M3 6h18M3 18h18"/>
 </symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="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"/>

package/src/assets/icons.svg.jsx

@@ -98,6 +98,19 @@ export const SvgIcons = (props) => (
       <circle cx="12" cy="12" r="10" />
       <path d="M12 8v4M12 16h.01" />
     </symbol>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="feather feather-external-link"
+      viewBox="0 0 24 24"
+      id="external-link"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3" />
+    </symbol>
     <symbol
       viewBox="0 0 24 24"
       fill="none"
@@ -151,6 +164,20 @@ export const SvgIcons = (props) => (
     >
       <path d="M3 12h18M3 6h18M3 18h18" />
     </symbol>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="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" />

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

@@ -1,9 +1,31 @@
-.fileName {
-  max-width: 100%;
-  padding: 2px;
-  background: var(--color-highlight-warning);
+.assetNameTag {
+  color: var(--color-background);
 }
 
-.viewModules {
-  display: block;
+.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: ' ';
+}
+

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/addon-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,159 @@
+import React, { useMemo } from 'react';
+import cx from 'classnames';
+import noop from 'lodash/noop';
+import {
+  FILE_TYPE_LABELS,
+  MetricRunInfo,
+  getBundleModulesByChunk,
+  getBundleAssetsByEntryType,
+  getBundleAssetsFileTypeComponentLink,
+  getModuleFileType,
+} from '@bundle-stats/utils';
+import { Asset, MetaChunk } from '@bundle-stats/utils/types/webpack';
+
+import { FlexStack } from '../../layout/flex-stack';
+import { Tag } from '../../ui/tag';
+import { ComponentLink } from '../component-link';
+import { EntryInfo } from '../entry-info';
+import css from './asset-info.module.css';
+
+interface ChunkModulesLinkProps {
+  as: React.ElementType;
+  chunks: Array<MetaChunk>;
+  chunkId: string;
+  name: string;
+}
+
+const ChunkModulesLink = ({
+  as: Component,
+  chunks,
+  chunkId,
+  name,
+  onClick,
+}: ChunkModulesLinkProps & React.ComponentProps<'a'>) => {
+  const chunk = chunks?.find(({ id }) => id === chunkId);
+
+  if (!chunk) {
+    return null;
+  }
+
+  const chunkIds = chunks.map(({ id }) => id);
+  const fileType = getModuleFileType(name);
+
+  return (
+    <Component
+      className={css.viewModules}
+      {...getBundleModulesByChunk(chunkIds, chunkId, fileType)}
+      onClick={onClick}
+    >
+      View chunk modules
+    </Component>
+  );
+};
+
+interface AssetInfoProps {
+  item: {
+    label: string;
+    changed?: boolean;
+    isChunk?: boolean;
+    isEntry?: boolean;
+    isInitial?: boolean;
+    isNotPredictive?: boolean;
+    fileType?: string;
+    runs: Array<Asset & MetricRunInfo>;
+  };
+  chunks?: Array<MetaChunk>;
+  labels: Array<string>;
+  customComponentLink?: React.ElementType;
+  onClose: () => void;
+}
+
+export const AssetInfo = (props: AssetInfoProps & React.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 && (
+          <Tag
+            as={CustomComponentLink}
+            {...getBundleAssetsByEntryType('entry')}
+            onClick={onClick}
+            className={cx(css.assetNameTag, css.assetNameTagEntry)}
+          >
+            Entrypoint
+          </Tag>
+        )}
+        {item.isInitial && (
+          <Tag
+            as={CustomComponentLink}
+            {...getBundleAssetsByEntryType('initial')}
+            onClick={onClick}
+            className={cx(css.assetNameTag, css.assetNameTagInitial)}
+          >
+            Initial
+          </Tag>
+        )}
+        {item.isChunk && (
+          <Tag
+            as={CustomComponentLink}
+            {...getBundleAssetsByEntryType('chunk')}
+            onClick={onClick}
+            className={cx(css.assetNameTag, css.assetNameTagChunk)}
+          >
+            Chunk
+          </Tag>
+        )}
+      </FlexStack>
+    );
+  }, [item]);
+
+  const fileTypeLabel = FILE_TYPE_LABELS[item.fileType as keyof typeof FILE_TYPE_LABELS];
+
+  return (
+    <EntryInfo
+      item={item}
+      labels={labels}
+      tags={tags}
+      onClose={onClose}
+      className={cx(css.root, className)}
+    >
+      {item.fileType && (
+        <EntryInfo.Meta label="File type">
+          <CustomComponentLink
+            {...getBundleAssetsFileTypeComponentLink(item.fileType, fileTypeLabel)}
+            onClick={onClick}
+          >
+            {fileTypeLabel}
+          </CustomComponentLink>
+        </EntryInfo.Meta>
+      )}
+
+      {currentRun?.chunkId && chunks && (
+        <div>
+          <ChunkModulesLink
+            as={CustomComponentLink}
+            chunks={chunks}
+            chunkId={currentRun?.chunkId}
+            name={currentRun?.name}
+            onClick={onClick}
+          />
+        </div>
+      )}
+    </EntryInfo>
+  );
+};

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

@@ -0,0 +1,3 @@
+.tableValue {
+  text-align: right;
+}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { AssetNotPredictive } from '.';
+
+export default {
+  title: 'Components/AssetNotPredictive',
+  component: AssetNotPredictive,
+};
+
+export const Default = () => <AssetNotPredictive />;
+
+const RUNS = [
+  {
+    name: 'static/vendor.abcd1234.js',
+    value: 1024 * 1024 - 1,
+  },
+  {
+    name: 'static/vendor.abcd1234.js',
+    value: 1024 * 1024,
+  },
+] as any;
+
+export const WithRuns = () => <AssetNotPredictive runs={RUNS} labels={['Job 2', 'Job 1']} />;

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import cx from 'classnames';
+import type { Asset } from '@bundle-stats/utils/types/webpack';
+
+import { Stack } from '../../layout/stack';
+import { Table } from '../../ui/table';
+import css from './asset-not-predictive.module.css';
+
+interface AssetNotPredictiveProps {
+  runs?: Array<Asset>;
+  labels?: Array<string>
+}
+
+export const AssetNotPredictive = (props: AssetNotPredictiveProps & React.ComponentProps<'div'>) => {
+  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>
+      {runs && (
+        <Table outline compact>
+          <Table.THead>
+            <Table.Tr>
+              <Table.Th>&nbsp;</Table.Th>
+              <Table.Th>File name</Table.Th>
+              <Table.Th className={css.tableValue}>Size</Table.Th>
+            </Table.Tr>
+          </Table.THead>
+          <Table.TBody>
+            {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.Tr>
+            ))}
+          </Table.TBody>
+        </Table>
+      )}
+    </Stack>
+  );
+};

package/src/components/asset-not-predictive/index.ts

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