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

package/lib-esm/ui/tooltip/tooltip.js

@@ -1,34 +1,15 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Tooltip as UITooltip, TooltipAnchor as UITooltipAnchor, TooltipArrow as UITooltipArrow, useTooltipState, } from 'ariakit/tooltip';
 import css from './tooltip.module.css';
 export const Tooltip = (props) => {
-    const { className, tooltipClassName, title, children, as: Component, containerRef: ref, darkMode, ...restProps } = props;
-    const tooltip = useTooltipState({ placement: 'top' });
+    var _a;
+    const { className = '', tooltipClassName = '', title = '', as: Component = 'span', containerRef: ref, darkMode = true, ...restProps } = props;
+    const tooltip = useTooltipState({ placement: 'top', timeout: 300 });
     return (React.createElement(React.Fragment, null,
-        React.createElement(UITooltipAnchor, { as: Component, className: cx(css.root, className), state: tooltip, ...(ref ? { ref } : {}), ...restProps }, children),
+        React.createElement(UITooltipAnchor, { as: Component, className: cx(css.root, className), state: tooltip, "aria-controls": tooltip.open ? (_a = tooltip.contentElement) === null || _a === void 0 ? void 0 : _a.id : '', ...(ref ? { ref } : {}), ...restProps }),
         title && (React.createElement(UITooltip, { state: tooltip, className: cx(css.tooltip, tooltipClassName, darkMode && css.tooltipDarkMode) },
             React.createElement(UITooltipArrow, { state: tooltip, className: css.arrow, size: 12 }),
             title))));
 };
-Tooltip.defaultProps = {
-    className: '',
-    tooltipClassName: '',
-    title: '',
-    as: 'span',
-    containerRef: null,
-    darkMode: true,
-};
-Tooltip.propTypes = {
-    className: PropTypes.string,
-    tooltipClassName: PropTypes.string,
-    title: PropTypes.node,
-    children: PropTypes.node.isRequired,
-    as: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]),
-    containerRef: PropTypes.shape({
-        current: PropTypes.object,
-    }),
-    darkMode: PropTypes.bool,
-};
 //# sourceMappingURL=tooltip.js.map

package/lib-esm/ui/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,IAAI,eAAe,EAChC,YAAY,IAAI,cAAc,EAC9B,eAAe,GAChB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAEvC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAK,EAAE,EAAE;IAC/B,MAAM,EACJ,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,QAAQ,EACR,EAAE,EAAE,SAAS,EACb,YAAY,EAAE,GAAG,EACjB,QAAQ,EACR,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;IAEtD,OAAO,CACL;QACE,oBAAC,eAAe,IACd,EAAE,EAAE,SAAS,EACb,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,KAAK,EAAE,OAAO,KACV,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACpB,SAAS,IAEZ,QAAQ,CACO;QACjB,KAAK,IAAI,CACR,oBAAC,SAAS,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,IAAI,GAAG,CAAC,eAAe,CAAC;YACtG,oBAAC,cAAc,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI;YACjE,KAAK,CACI,CACb,CACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,CAAC,YAAY,GAAG;IACrB,SAAS,EAAE,EAAE;IACb,gBAAgB,EAAE,EAAE;IACpB,KAAK,EAAE,EAAE;IACT,EAAE,EAAE,MAAM;IACV,YAAY,EAAE,IAAI;IAClB,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,OAAO,CAAC,SAAS,GAAG;IAClB,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,gBAAgB,EAAE,SAAS,CAAC,MAAM;IAClC,KAAK,EAAE,SAAS,CAAC,IAAI;IACrB,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IACnC,EAAE,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;IAC9E,YAAY,EAAE,SAAS,CAAC,KAAK,CAAC;QAC5B,OAAO,EAAE,SAAS,CAAC,MAAM;KAC1B,CAAC;IACF,QAAQ,EAAE,SAAS,CAAC,IAAI;CACzB,CAAC"}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,IAAI,eAAe,EAChC,YAAY,IAAI,cAAc,EAC9B,eAAe,GAChB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAWvC,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,KAA6E,EAC7E,EAAE;;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,gBAAgB,GAAG,EAAE,EACrB,KAAK,GAAG,EAAE,EACV,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,YAAY,EAAE,GAAG,EACjB,QAAQ,GAAG,IAAI,EACf,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpE,OAAO,CACL;QACE,oBAAC,eAAe,IACd,EAAE,EAAE,SAA8B,EAClC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,KAAK,EAAE,OAAO,mBACC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAA,OAAO,CAAC,cAAc,0CAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KACzD,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACpB,SAAS,GACb;QACD,KAAK,IAAI,CACR,oBAAC,SAAS,IACR,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,IAAI,GAAG,CAAC,eAAe,CAAC;YAE7E,oBAAC,cAAc,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI;YACjE,KAAK,CACI,CACb,CACA,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/lib-esm/ui/tooltip/tooltip.module.css

@@ -12,14 +12,13 @@
 
 .tooltip {
   padding: var(--space-xxxsmall) var(--space-xxsmall);
-  border-radius: var(--radius-medium);
+  border-radius: var(--radius-small);
   background: var(--color-light);
   max-width: 24em;
   color: var(--color-text);
   filter: drop-shadow(var(--shadow-layer));
   will-change: filter;
   font-size: var(--size-xsmall);
-  line-height: var(--space-small);
 }
 
 .arrow svg {
@@ -28,10 +27,10 @@
 }
 
 .tooltipDarkMode {
-  background: var(--color-text);
+  background: var(--color-text-dark);
   color: var(--color-light);
 }
 
 .tooltipDarkMode .arrow svg {
-  fill: var(--color-text);
+  fill: var(--color-text-dark);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.4.0-beta.0",
+  "version": "4.4.0-beta.3",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -18,10 +18,7 @@
     "generate-svg-sprite": "npx svg-sprite -s --si --no-svg-namespace-classnames src/assets/icons/*.svg && mv symbol/svg/sprite.symbol.svg src/assets/icons.svg",
     "lint": "../../node_modules/.bin/eslint . --resolve-plugins-relative-to ../../",
     "start": "cross-env NODE_ENV=development start-storybook -c ./build/storybook -p 8080",
-    "test": "npm run test:unit",
-    "test:unit": "jest src --passWithNoTests",
-    "test:storyshots": "jest build/storybook ",
-    "chromatic": "chromatic --exit-zero-on-changes"
+    "test": "jest src --passWithNoTests"
   },
   "repository": {
     "type": "git",
@@ -39,54 +36,51 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/preset-env": "7.20.2",
-    "@babel/preset-react": "7.18.6",
-    "@storybook/addon-essentials": "6.5.15",
+    "@babel/preset-env": "7.22.4",
+    "@babel/preset-react": "7.22.3",
+    "@storybook/addon-essentials": "6.5.16",
     "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.5.15",
-    "@storybook/addons": "6.5.15",
-    "@storybook/builder-webpack5": "6.5.15",
-    "@storybook/manager-webpack5": "6.5.15",
-    "@storybook/react": "6.5.15",
-    "@types/react": "18.0.26",
+    "@storybook/addons": "6.5.16",
+    "@storybook/builder-webpack5": "6.5.16",
+    "@storybook/manager-webpack5": "6.5.16",
+    "@storybook/react": "6.5.16",
+    "@types/react": "18.0.37",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.15.0",
     "classnames": "2.3.2",
     "colormap": "2.3.2",
     "cross-env": "7.0.3",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.7",
-    "enzyme-to-json": "3.6.2",
     "hex-rgb": "5.0.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "29.4.0",
+    "jest": "29.5.0",
     "jest-date-mock": "1.0.8",
-    "jest-environment-jsdom": "29.4.0",
+    "jest-environment-jsdom": "29.5.0",
     "lodash": "4.17.21",
-    "postcss": "8.4.21",
+    "postcss": "8.4.24",
     "prop-types": "15.8.1",
     "react": "17.0.2",
+    "react-docgen-typescript-plugin": "^1.0.5",
     "react-dom": "17.0.2",
     "react-router-dom": "5.3.4",
     "react-test-renderer": "18.2.0",
-    "rimraf": "4.1.2",
-    "typescript": "4.9.4"
+    "rimraf": "4.4.1",
+    "typescript": "5.1.3",
+    "typescript-plugin-css-modules": "5.0.1"
   },
   "peerDependencies": {
     "classnames": "^2.0.0",
     "lodash": "^4.0.0",
     "prop-types": "^15.0.0",
-    "react": "^17.0.0 | ^18.0.0",
-    "react-dom": "^17.0.0 | ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.4.0-beta.0",
-    "ariakit": "2.0.0-next.43",
+    "@bundle-stats/utils": "^4.4.0-beta.3",
+    "ariakit": "2.0.0-next.44",
     "modern-css-reset": "1.4.0",
     "query-string": "7.1.3",
-    "use-query-params": "2.1.2"
+    "use-query-params": "2.2.1"
   },
-  "gitHead": "e2c2b5a9b7bd31c07baad4f5fefa682d21470600"
+  "gitHead": "24b9c0091e6a2dee2745dc149c2743e72349c3f0"
 }

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';
 
@@ -12,7 +13,6 @@ import {
 } from '../constants';
 import { Box } from '../layout/box';
 import { Container } from '../ui/container';
-import { DuplicatePackagesInsight } from '../components/duplicate-packages-insight';
 import { Summary } from '../components/summary';
 import { BundleAssets } from '../components/bundle-assets';
 import { BundleAssetsTotalsChartBars } from '../components/bundle-assets-totals-chart-bars';
@@ -22,11 +22,13 @@ import { Stack } from '../layout/stack';
 import { BundleAssetsTotalsTable } from '../components/bundle-assets-totals-table';
 import { BundleModules } from '../components/bundle-modules';
 import { BundlePackages } from '../components/bundle-packages';
+import { Insights } from '../components/insights';
 import { TotalSizeTypeTitle } from '../components/total-size-type-title';
 import { QueryStateProvider, useComponentQueryState } from '../query-state';
 import I18N from '../i18n';
 import { Header } from './header';
 import css from './app.module.css';
+import { MetricsTableTitle } from '../components';
 
 const ScrollToTop = () => {
   const { pathname } = useLocation();
@@ -68,18 +70,37 @@ JobsProvider.propTypes = {
 
 const OverviewContent = () => {
   const { jobs } = useContext(JobsContext);
-  const duplicatePackagesInsight = jobs[0].insights?.webpack?.duplicatePackagesV3;
+
+  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]);
+
 
   return (
     <Stack space="medium">
-      {duplicatePackagesInsight && (
+      {insightsByName && (
         <Container>
-          <DuplicatePackagesInsight
-            type={duplicatePackagesInsight.type}
-            data={duplicatePackagesInsight.data}
-            summary={jobs[0].summary.webpack?.duplicatePackagesCount}
-            showDelta={jobs.length > 1}
-          />
+          <Stack space="xsmall">
+            <MetricsTableTitle title="Insights" />
+            <Box padding="small" outline>
+              <Insights insights={insightsByName} />
+            </Box>
+          </Stack>
         </Container>
       )}
       <Container>
@@ -104,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} />
@@ -126,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} />
@@ -148,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} />
@@ -177,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/error.svg

@@ -0,0 +1,6 @@
+<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="10"></circle>
+  <line x1="12" y1="8" x2="12" y2="12"></line>
+  <line x1="12" y1="16" x2="12.01" y2="16"></line>
+
+</svg>

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/info.svg

@@ -0,0 +1,6 @@
+<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="10"></circle>
+  <line x1="12" y1="16" x2="12" y2="12"></line>
+  <line x1="12" y1="8" x2="12.01" y2="8"></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

@@ -1,4 +1,4 @@
-<svg width="16" height="16">
+<svg width="0" height="0" style="position:absolute">
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down" id="arrow" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 5v14M19 12l-7 7-7-7"/>
 </symbol>
@@ -22,6 +22,13 @@
 <circle cx="12" cy="12" r="4"/>
 <path d="M1.05 12H7M17.01 12h5.95"/>
 </symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="error" xmlns="http://www.w3.org/2000/svg">
+<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>
@@ -29,9 +36,18 @@
 <circle cx="12" cy="12" r="10"/>
 <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01"/>
 </symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="info" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10"/>
+<path d="M12 16v-4M12 8h.01"/>
+</symbol>
 <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

@@ -85,6 +85,32 @@ export const SvgIcons = (props) => (
       <circle cx="12" cy="12" r="4" />
       <path d="M1.05 12H7M17.01 12h5.95" />
     </symbol>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      viewBox="0 0 24 24"
+      id="error"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <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"
@@ -112,6 +138,19 @@ export const SvgIcons = (props) => (
       <circle cx="12" cy="12" r="10" />
       <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01" />
     </symbol>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      viewBox="0 0 24 24"
+      id="info"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 16v-4M12 8h.01" />
+    </symbol>
     <symbol
       viewBox="0 0 24 24"
       fill="none"
@@ -125,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',
+  },
+};