@bundle-stats/ui 4.3.0-beta.1 → 4.4.0-beta.0

package/lib-esm/components/module-info/module-info.js

@@ -1,30 +1,38 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import noop from 'lodash/noop';
-import { getBundleModulesByChunk } from '@bundle-stats/utils';
+import { getBundleModulesByChunk, getBundleModulesBySearch } from '@bundle-stats/utils';
 import { Stack } from '../../layout/stack';
+import { FlexStack } from '../../layout/flex-stack';
 import { FileName } from '../../ui/file-name';
+import { Tag } from '../../ui/tag';
 import { ComponentLink } from '../component-link';
 import css from './module-info.module.css';
 export const ModuleInfo = (props) => {
     const { className, item, labels, chunks, chunkIds, customComponentLink: CustomComponentLink, onClick, } = props;
-    return (React.createElement(Stack, { space: "xsmall", className: className }, item.runs.map((run, index) => {
-        const TitleComponent = index !== 0 ? 'h4' : 'h3';
-        const key = `module-info-${(run === null || run === void 0 ? void 0 : run.name) || index}-${index}`;
-        return (React.createElement(Stack, { space: "xxxsmall", key: key },
-            React.createElement(TitleComponent, null, labels[index]),
-            index === 0 && !isEmpty(run === null || run === void 0 ? void 0 : run.chunkIds) && (React.createElement("div", { className: css.chunks },
-                React.createElement("span", { className: css.chunksTitle }, "Chunks:"),
-                run.chunkIds.map((chunkId) => {
-                    const chunk = chunks === null || chunks === void 0 ? void 0 : chunks.find(({ id }) => id === chunkId);
-                    if (!chunk) {
-                        return null;
-                    }
-                    return (React.createElement(CustomComponentLink, { ...getBundleModulesByChunk(chunkIds, chunkId), onClick: onClick, className: css.chunksItem }, chunk.name));
-                }))),
-            React.createElement(FileName, { className: css.fileName, as: "code", name: (run === null || run === void 0 ? void 0 : run.name) || '-' })));
-    })));
+    return (React.createElement(Stack, { space: "small", className: cx(css.root, className) }, item.runs.map((run, index) => (React.createElement(Stack, { space: "xsmall", key: `module-info-${(run === null || run === void 0 ? void 0 : run.name) || index}-${index}`, className: css.run },
+        React.createElement(Stack, { space: "xxxsmall" },
+            React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", as: "h4", className: css.title },
+                React.createElement("span", null, labels[index]),
+                React.createElement(Tag, { className: css.titleTag }, index === 0 ? 'current' : 'baseline')),
+            React.createElement(FileName, { className: css.fileName, as: "code", name: (run === null || run === void 0 ? void 0 : run.name) || '-' })),
+        index === 0 && !isEmpty(run === null || run === void 0 ? void 0 : run.chunkIds) && (React.createElement(Stack, { className: css.chunks },
+            React.createElement("h5", null, "Chunks"),
+            React.createElement("ul", { className: css.list }, run.chunkIds.map((chunkId) => {
+                const chunk = chunks === null || chunks === void 0 ? void 0 : chunks.find(({ id }) => id === chunkId);
+                if (!chunk) {
+                    return null;
+                }
+                return (React.createElement("li", null,
+                    React.createElement(CustomComponentLink, { ...getBundleModulesByChunk(chunkIds, chunkId), onClick: onClick, className: css.chunksItem }, chunk.name)));
+            })))),
+        (run === null || run === void 0 ? void 0 : run.reasons) && (React.createElement(Stack, null,
+            React.createElement("h5", null, "Reasons"),
+            React.createElement("ul", { className: css.list }, run.reasons.map((reason) => (React.createElement("li", { key: reason },
+                React.createElement(CustomComponentLink, { ...getBundleModulesBySearch(`^${reason}$`), onClick: onClick, className: css.reasonLink },
+                    React.createElement(FileName, { name: reason, className: css.reason })))))))))))));
 };
 ModuleInfo.propTypes = {
     className: PropTypes.string,

package/lib-esm/components/module-info/module-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"module-info.js","sourceRoot":"","sources":["../../../src/components/module-info/module-info.jsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"module-info.js","sourceRoot":"","sources":["../../../src/components/module-info/module-info.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAExF,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,GAAG,MAAM,0BAA0B,CAAC;AAE3C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAK,EAAE,EAAE;IAClC,MAAM,EACJ,SAAS,EACT,IAAI,EACJ,MAAM,EACN,MAAM,EACN,QAAQ,EACR,mBAAmB,EAAE,mBAAmB,EACxC,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,oBAAC,KAAK,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,IACpD,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7B,oBAAC,KAAK,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,eAAe,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,KAAI,KAAK,IAAI,KAAK,EAAE,EAAE,SAAS,EAAE,GAAG,CAAC,GAAG;QACzF,oBAAC,KAAK,IAAC,KAAK,EAAC,UAAU;YACrB,oBAAC,SAAS,IAAC,KAAK,EAAC,UAAU,EAAC,UAAU,EAAC,QAAQ,EAAC,EAAE,EAAC,IAAI,EAAC,SAAS,EAAE,GAAG,CAAC,KAAK;gBAC1E,kCAAO,MAAM,CAAC,KAAK,CAAC,CAAQ;gBAC5B,oBAAC,GAAG,IAAC,SAAS,EAAE,GAAG,CAAC,QAAQ,IAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAO,CAChE;YACZ,oBAAC,QAAQ,IAAC,SAAS,EAAE,GAAG,CAAC,QAAQ,EAAE,EAAE,EAAC,MAAM,EAAC,IAAI,EAAE,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,KAAI,GAAG,GAAI,CACjE;QAMP,KAAK,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,QAAQ,CAAC,IAAI,CACzC,oBAAC,KAAK,IAAC,SAAS,EAAE,GAAG,CAAC,MAAM;YAC1B,yCAAe;YACf,4BAAI,SAAS,EAAE,GAAG,CAAC,IAAI,IACtB,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;gBAC5B,MAAM,KAAK,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC,CAAC;gBAEvD,IAAI,CAAC,KAAK,EAAE;oBACV,OAAO,IAAI,CAAC;iBACb;gBAED,OAAO,CACL;oBACE,oBAAC,mBAAmB,OACd,uBAAuB,CAAC,QAAQ,EAAE,OAAO,CAAC,EAC9C,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,GAAG,CAAC,UAAU,IAExB,KAAK,CAAC,IAAI,CACS,CACnB,CACN,CAAC;YACJ,CAAC,CAAC,CACG,CACC,CACT;QAEA,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,KAAI,CACf,oBAAC,KAAK;YACJ,0CAAgB;YAChB,4BAAI,SAAS,EAAE,GAAG,CAAC,IAAI,IACpB,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC3B,4BAAI,GAAG,EAAE,MAAM;gBACb,oBAAC,mBAAmB,OACd,wBAAwB,CAAC,IAAI,MAAM,GAAG,CAAC,EAC3C,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,GAAG,CAAC,UAAU;oBAEzB,oBAAC,QAAQ,IAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,CAAC,MAAM,GAAI,CAC7B,CACnB,CACN,CAAC,CACC,CACC,CACT,CACK,CACT,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,SAAS,GAAG;IACrB,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC;QACpB,GAAG,EAAE,SAAS,CAAC,MAAM;QACrB,IAAI,EAAE,SAAS,CAAC,OAAO,CACrB,SAAS,CAAC,KAAK,CAAC;YACd,GAAG,EAAE,SAAS,CAAC,MAAM;YACrB,IAAI,EAAE,SAAS,CAAC,MAAM;YACtB,QAAQ,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC;SAC9C,CAAC,CACH;KACF,CAAC,CAAC,UAAU;IACb,MAAM,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,UAAU;IACtD,MAAM,EAAE,SAAS,CAAC,OAAO,CACvB,SAAS,CAAC,KAAK,CAAC;QACd,EAAE,EAAE,SAAS,CAAC,MAAM;QACpB,IAAI,EAAE,SAAS,CAAC,MAAM;KACvB,CAAC,CACH;IACD,QAAQ,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC;IAC7C,mBAAmB,EAAE,SAAS,CAAC,WAAW;IAC1C,OAAO,EAAE,SAAS,CAAC,IAAI;CACxB,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG;IACxB,SAAS,EAAE,EAAE;IACb,MAAM,EAAE,EAAE;IACV,QAAQ,EAAE,EAAE;IACZ,mBAAmB,EAAE,aAAa;IAClC,OAAO,EAAE,IAAI;CACd,CAAC"}

package/lib-esm/components/module-info/module-info.module.css

@@ -1,21 +1,40 @@
-.chunksTitle {
-  margin-right: var(--space-xxxsmall);
+.titleTag {
+  border: 1px solid var(--color-outline);
+  background: var(--color-highlight);
+  color: var(--color-text-light);
 }
 
-.chunksItems {
-  display: inline;
+.run:first-child .title {
+  font-size: var(--size-xlarge);
 }
 
 .chunksItem {
   overflow-wrap: break-word;
 }
 
-.chunksItem + .chunksItem {
-  margin-left: var(--space-xxxsmall);
-}
-
 .fileName {
   max-width: 100%;
   padding: 2px;
   background: var(--color-highlight-warning);
 }
+
+.reasonLink {
+  text-decoration: underline;
+}
+
+.reasonLink .reason {
+  text-decoration: inherit;
+}
+
+.reason {
+  display: inline;
+}
+
+.list {
+  padding: 0 0 0 var(--space-small);
+  list-style: outside;
+}
+
+.list li::marker {
+  color: var(--color-text-ultra-light);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.3.0-beta.1",
+  "version": "4.4.0-beta.0",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -51,7 +51,7 @@
     "@storybook/react": "6.5.15",
     "@types/react": "18.0.26",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.14.0",
+    "chromatic": "6.15.0",
     "classnames": "2.3.2",
     "colormap": "2.3.2",
     "cross-env": "7.0.3",
@@ -60,9 +60,9 @@
     "enzyme-to-json": "3.6.2",
     "hex-rgb": "5.0.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "29.3.1",
+    "jest": "29.4.0",
     "jest-date-mock": "1.0.8",
-    "jest-environment-jsdom": "29.3.1",
+    "jest-environment-jsdom": "29.4.0",
     "lodash": "4.17.21",
     "postcss": "8.4.21",
     "prop-types": "15.8.1",
@@ -70,7 +70,7 @@
     "react-dom": "17.0.2",
     "react-router-dom": "5.3.4",
     "react-test-renderer": "18.2.0",
-    "rimraf": "4.1.1",
+    "rimraf": "4.1.2",
     "typescript": "4.9.4"
   },
   "peerDependencies": {
@@ -82,11 +82,11 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.3.0-beta.1",
+    "@bundle-stats/utils": "^4.4.0-beta.0",
     "ariakit": "2.0.0-next.43",
     "modern-css-reset": "1.4.0",
     "query-string": "7.1.3",
     "use-query-params": "2.1.2"
   },
-  "gitHead": "3f34b96d46d38d7324d9460fd19bc060786eb320"
+  "gitHead": "e2c2b5a9b7bd31c07baad4f5fefa682d21470600"
 }

package/src/app/app.jsx

@@ -12,7 +12,7 @@ import {
 } from '../constants';
 import { Box } from '../layout/box';
 import { Container } from '../ui/container';
-import { DuplicatePackagesWarning } from '../components/duplicate-packages-warning';
+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';
@@ -68,17 +68,16 @@ JobsProvider.propTypes = {
 
 const OverviewContent = () => {
   const { jobs } = useContext(JobsContext);
-  const { duplicatePackagesCount } = jobs[0].summary.webpack;
-  const duplicatePackagesInsights = Boolean(
-    duplicatePackagesCount.current || duplicatePackagesCount.baseline,
-  );
+  const duplicatePackagesInsight = jobs[0].insights?.webpack?.duplicatePackagesV3;
 
   return (
     <Stack space="medium">
-      {duplicatePackagesInsights && (
+      {duplicatePackagesInsight && (
         <Container>
-          <DuplicatePackagesWarning
-            duplicatePackagesCount={duplicatePackagesCount}
+          <DuplicatePackagesInsight
+            type={duplicatePackagesInsight.type}
+            data={duplicatePackagesInsight.data}
+            summary={jobs[0].summary.webpack?.duplicatePackagesCount}
             showDelta={jobs.length > 1}
           />
         </Container>

package/src/components/bundle-modules/bundle-modules.jsx

@@ -107,15 +107,17 @@ const RowHeader = ({ row, chunks, labels, CustomComponentLink }) => {
   }
 
   return (
-    <HoverCard label={content}>
-      <ModuleInfo
-        className={css.namePopover}
-        item={row}
-        chunks={chunks}
-        chunkIds={chunkIds}
-        labels={labels}
-        customComponentLink={CustomComponentLink}
-      />
+    <HoverCard label={content} hoverCardClassName={css.nameHoverCard}>
+      {({ close }) => (
+        <ModuleInfo
+          item={row}
+          chunks={chunks}
+          chunkIds={chunkIds}
+          labels={labels}
+          customComponentLink={CustomComponentLink}
+          onClick={close}
+        />
+      )}
     </HoverCard>
   );
 };

package/src/components/bundle-modules/bundle-modules.module.css

@@ -25,3 +25,7 @@
   display: inline;
   vertical-align: middle;
 }
+
+.nameHoverCard {
+  max-width: 480px;
+}

package/src/components/duplicate-packages-insight/duplicate-packages-insight.module.css

@@ -0,0 +1,18 @@
+.metric {
+  font-weight: bold;
+}
+
+.metric::before,
+.link::before {
+  content: '\00A0\2014\00A0';
+  font-weight: normal;
+  color: var(--color-text-ultra-light);
+}
+
+.delta {
+  margin-left: var(--space-xxxsmall);
+  padding: 1px 2px;
+  vertical-align: super;
+  font-size: 9px;
+  line-height: 1;
+}

package/src/components/duplicate-packages-insight/duplicate-packages-insight.stories.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { DuplicatePackagesInsight } from '.';
+
+export default {
+  title: 'Components/DuplicatePackagesInsight',
+  component: DuplicatePackagesInsight,
+};
+
+const Template = (props: any) => <MemoryRouter><DuplicatePackagesInsight {...props} /></MemoryRouter>;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  type: 'INFO',
+  data: {
+    packages: {},
+    text: 'Bundle does not contain duplicate packages',
+  },
+  summary: {
+    current: 0,
+    baseline: 0,
+  },
+};
+
+export const NewDuplicates = Template.bind({});
+
+NewDuplicates.args = {
+  type: 'ERROR',
+  data: {
+    packages: {},
+    text: 'Bundle introduced 2 duplicate packages',
+  },
+  summary: {
+    current: 4,
+    baseline: 2,
+  },
+};
+
+export const NewDuplicatesAndRemovals = Template.bind({});
+
+NewDuplicatesAndRemovals.args = {
+  type: 'ERROR',
+  data: {
+    packages: {},
+    text: 'Bundle introduced 2 and removed 1 duplicate packages',
+  },
+  summary: {
+    current: 4,
+    baseline: 3,
+  },
+};
+
+export const NoChangeDuplicates = Template.bind({});
+
+NoChangeDuplicates.args = {
+  type: 'WARNING',
+  data: {
+    packages: {},
+    text: 'Bundle contains 4 duplicate packages',
+  },
+  summary: {
+    current: 4,
+    baseline: 4,
+  },
+};

package/src/components/duplicate-packages-insight/duplicate-packages-insight.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import {
+  BUNDLE_PACKAGES_DUPLICATE,
+  BUNDLE_PACKAGES_COUNT,
+  InsightType,
+  JobSummaryItem,
+  getMetricRunInfo,
+  JobInsightDuplicatePackagesV3Data,
+  getGlobalMetricType,
+} from '@bundle-stats/utils';
+
+import { Alert } from '../../ui/alert';
+import { ComponentLink } from '../component-link';
+import { Delta } from '../delta';
+// @ts-ignore
+import css from './duplicate-packages-insight.module.css';
+
+interface DuplicatePackagesInsightProps extends React.HTMLAttributes<HTMLDivElement> {
+  type: InsightType;
+  data: JobInsightDuplicatePackagesV3Data;
+  summary: JobSummaryItem;
+  showDelta?: boolean;
+  customComponentLink?: React.FunctionComponent<React.HTMLAttributes<HTMLLinkElement>>;
+}
+
+const AlertKindMap = new Map([
+  [InsightType.INFO, 'info'],
+  [InsightType.ERROR, 'danger'],
+  [InsightType.WARNING, 'warning'],
+]);
+
+export const DuplicatePackagesInsight = (props: DuplicatePackagesInsightProps) => {
+  const {
+    type,
+    data,
+    summary,
+    showDelta = true,
+    customComponentLink: CustomComponentLink = ComponentLink,
+    ...restProps
+  } = props;
+
+  const metric = getGlobalMetricType('webpack.duplicatePackageCount');
+
+  const metricRunInfo = getMetricRunInfo(
+    metric,
+    summary.current,
+    summary.baseline,
+  );
+
+  const hasDuplicatePackages = metricRunInfo.value > 0 || (metricRunInfo && (metricRunInfo.delta !== 0));
+
+  return (
+    <Alert kind={AlertKindMap.get(type)} {...restProps}>
+      <span className={css.message}>{data.text}</span>
+      {hasDuplicatePackages && (
+        <span className={css.metric}>
+          {metricRunInfo.value}
+          {showDelta && typeof metricRunInfo.delta !== 'undefined' && (
+            <Delta
+              className={css.delta}
+              inverted
+              displayValue={metricRunInfo.displayDelta as string}
+              deltaType={metricRunInfo.deltaType as string}
+            />
+          )}
+        </span>
+      )}
+      <span className={css.link}>
+        {hasDuplicatePackages ? (
+          <CustomComponentLink {...BUNDLE_PACKAGES_DUPLICATE as any}>
+            View duplicate packages
+          </CustomComponentLink>
+        ) : (
+          <CustomComponentLink {...BUNDLE_PACKAGES_COUNT as any}>
+            View packages
+          </CustomComponentLink>
+        )}
+      </span>
+    </Alert>
+  );
+};

package/src/components/duplicate-packages-insight/index.ts

@@ -0,0 +1 @@
+export * from './duplicate-packages-insight';

package/src/components/index.js

@@ -5,7 +5,7 @@ export { BundleAssetsTotalsChartBars } from './bundle-assets-totals-chart-bars';
 export { BundlePackages } from './bundle-packages';
 export { BundleModules } from './bundle-modules';
 export { ComponentLink } from './component-link';
-export { DuplicatePackagesWarning } from './duplicate-packages-warning';
+export { DuplicatePackagesInsight } from './duplicate-packages-insight';
 export { Delta } from './delta';
 export { JobName } from './job-name';
 export { JobHeader } from './job-header';

package/src/components/job-header/job-header.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import get from 'lodash/get';
-import { SOURCE_PATH_WEBPACK_STATS, formatDateTime } from '@bundle-stats/utils';
+import { Source, formatDateTime } from '@bundle-stats/utils';
 
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
@@ -13,7 +13,7 @@ import css from './job-header.module.css';
 export const JobHeader = (props) => {
   const { className, tag, job, children } = props;
 
-  const { builtAt, hash } = get(job, `meta.${SOURCE_PATH_WEBPACK_STATS}`, {});
+  const { builtAt, hash } = get(job, `meta.${Source.webpack}`, {});
   const rootClassName = cx(css.root, className);
 
   return (

package/src/components/module-info/module-info.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import noop from 'lodash/noop';
-import { getBundleModulesByChunk } from '@bundle-stats/utils';
+import { getBundleModulesByChunk, getBundleModulesBySearch } from '@bundle-stats/utils';
 
 import { Stack } from '../../layout/stack';
+import { FlexStack } from '../../layout/flex-stack';
 import { FileName } from '../../ui/file-name';
+import { Tag } from '../../ui/tag';
 import { ComponentLink } from '../component-link';
 import css from './module-info.module.css';
 
@@ -21,25 +24,34 @@ export const ModuleInfo = (props) => {
   } = props;
 
   return (
-    <Stack space="xsmall" className={className}>
-      {item.runs.map((run, index) => {
-        const TitleComponent = index !== 0 ? 'h4' : 'h3';
-        const key = `module-info-${run?.name || index}-${index}`;
+    <Stack space="small" className={cx(css.root, className)}>
+      {item.runs.map((run, index) => (
+        <Stack space="xsmall" key={`module-info-${run?.name || index}-${index}`} className={css.run}>
+          <Stack space="xxxsmall">
+            <FlexStack space="xxxsmall" alignItems="center" as="h4" className={css.title}>
+              <span>{labels[index]}</span>
+              <Tag className={css.titleTag}>{index === 0 ? 'current' : 'baseline'}</Tag>
+            </FlexStack>
+            <FileName className={css.fileName} as="code" name={run?.name || '-'} />
+          </Stack>
 
-        return (
-          <Stack space="xxxsmall" key={key}>
-            <TitleComponent>{labels[index]}</TitleComponent>
-            {index === 0 && !isEmpty(run?.chunkIds) && (
-              <div className={css.chunks}>
-                <span className={css.chunksTitle}>Chunks:</span>
-                {run.chunkIds.map((chunkId) => {
-                  const chunk = chunks?.find(({ id }) => id === chunkId);
+          {/**
+            * Render chunks only for the current run
+            * we do not have the correct chunk ids for baselines
+            */}
+          {index === 0 && !isEmpty(run?.chunkIds) && (
+            <Stack className={css.chunks}>
+              <h5>Chunks</h5>
+              <ul className={css.list}>
+              {run.chunkIds.map((chunkId) => {
+                const chunk = chunks?.find(({ id }) => id === chunkId);
 
-                  if (!chunk) {
-                    return null;
-                  }
+                if (!chunk) {
+                  return null;
+                }
 
-                  return (
+                return (
+                  <li>
                     <CustomComponentLink
                       {...getBundleModulesByChunk(chunkIds, chunkId)}
                       onClick={onClick}
@@ -47,15 +59,33 @@ export const ModuleInfo = (props) => {
                     >
                       {chunk.name}
                     </CustomComponentLink>
-                  );
-                })}
-              </div>
-            )}
+                  </li>
+                );
+              })}
+              </ul>
+            </Stack>
+          )}
 
-            <FileName className={css.fileName} as="code" name={run?.name || '-'} />
-          </Stack>
-        );
-      })}
+          {run?.reasons && (
+            <Stack>
+              <h5>Reasons</h5>
+              <ul className={css.list}>
+                {run.reasons.map((reason) => (
+                  <li key={reason}>
+                    <CustomComponentLink
+                      {...getBundleModulesBySearch(`^${reason}$`)}
+                      onClick={onClick}
+                      className={css.reasonLink}
+                      >
+                      <FileName name={reason} className={css.reason} />
+                    </CustomComponentLink>
+                  </li>
+                ))}
+              </ul>
+            </Stack>
+          )}
+        </Stack>
+      ))}
     </Stack>
   );
 };

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

@@ -1,21 +1,40 @@
-.chunksTitle {
-  margin-right: var(--space-xxxsmall);
+.titleTag {
+  border: 1px solid var(--color-outline);
+  background: var(--color-highlight);
+  color: var(--color-text-light);
 }
 
-.chunksItems {
-  display: inline;
+.run:first-child .title {
+  font-size: var(--size-xlarge);
 }
 
 .chunksItem {
   overflow-wrap: break-word;
 }
 
-.chunksItem + .chunksItem {
-  margin-left: var(--space-xxxsmall);
-}
-
 .fileName {
   max-width: 100%;
   padding: 2px;
   background: var(--color-highlight-warning);
 }
+
+.reasonLink {
+  text-decoration: underline;
+}
+
+.reasonLink .reason {
+  text-decoration: inherit;
+}
+
+.reason {
+  display: inline;
+}
+
+.list {
+  padding: 0 0 0 var(--space-small);
+  list-style: outside;
+}
+
+.list li::marker {
+  color: var(--color-text-ultra-light);
+}

package/tsconfig.esm.json

@@ -9,5 +9,5 @@
     "declarationDir": "./types",
     "noEmit": false
   },
-  "exclude": ["**/__tests__/*", "**/*.stories.jsx"]
+  "exclude": ["**/__tests__/*", "**/*.stories.*"]
 }

package/tsconfig.lib.json

@@ -5,5 +5,5 @@
     "resolveJsonModule": true,
     "noEmit": false
   },
-  "exclude": ["**/__tests__/*", "**/*.stories.jsx"]
+  "exclude": ["**/__tests__/*", "**/*.stories.*"]
 }

package/types/components/duplicate-packages-insight/duplicate-packages-insight.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { InsightType, JobSummaryItem, JobInsightDuplicatePackagesV3Data } from '@bundle-stats/utils';
+interface DuplicatePackagesInsightProps extends React.HTMLAttributes<HTMLDivElement> {
+    type: InsightType;
+    data: JobInsightDuplicatePackagesV3Data;
+    summary: JobSummaryItem;
+    showDelta?: boolean;
+    customComponentLink?: React.FunctionComponent<React.HTMLAttributes<HTMLLinkElement>>;
+}
+export declare const DuplicatePackagesInsight: (props: DuplicatePackagesInsightProps) => JSX.Element;
+export {};

package/types/components/duplicate-packages-insight/index.d.ts

@@ -0,0 +1 @@
+export * from './duplicate-packages-insight';

package/types/components/index.d.ts

@@ -5,7 +5,7 @@ export { BundleAssetsTotalsChartBars } from "./bundle-assets-totals-chart-bars";
 export { BundlePackages } from "./bundle-packages";
 export { BundleModules } from "./bundle-modules";
 export { ComponentLink } from "./component-link";
-export { DuplicatePackagesWarning } from "./duplicate-packages-warning";
+export { DuplicatePackagesInsight } from "./duplicate-packages-insight";
 export { Delta } from "./delta";
 export { JobName } from "./job-name";
 export { JobHeader } from "./job-header";