@bundle-stats/ui 4.2.0-beta.4 → 4.2.0-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.2.0-beta.4",
+  "version": "4.2.0-beta.6",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -82,11 +82,11 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.2.0-beta.4",
+    "@bundle-stats/utils": "^4.2.0-beta.6",
     "ariakit": "2.0.0-next.43",
     "modern-css-reset": "1.4.0",
     "query-string": "7.1.3",
     "use-query-params": "2.1.2"
   },
-  "gitHead": "3aebbd2da0d16350e38bc52eafb1d6a9b6967a5c"
+  "gitHead": "fa5c0da7c8d6de3d6cd1cb42a581bdca55dccf31"
 }

package/src/app/app.jsx

@@ -12,7 +12,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 +21,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 +69,27 @@ JobsProvider.propTypes = {
 
 const OverviewContent = () => {
   const { jobs } = useContext(JobsContext);
+
   const duplicatePackagesInsight = jobs[0].insights?.webpack?.duplicatePackagesV3;
+  const newPackagesInsight = jobs[0].insights?.webpack?.newPackages;
+
+  console.info(duplicatePackagesInsight, newPackagesInsight);
 
   return (
     <Stack space="medium">
-      {duplicatePackagesInsight && (
+      {(duplicatePackagesInsight || newPackagesInsight) && (
         <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
+                duplicatePackages={duplicatePackagesInsight}
+                newPackages={newPackagesInsight}
+                summary={jobs[0].summary?.webpack}
+                showDelta={jobs.length > 1}
+              />
+            </Box>
+          </Stack>
         </Container>
       )}
       <Container>

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/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.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,10 @@
 <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 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,6 +33,10 @@
 <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>

package/src/assets/icons.svg.jsx

@@ -85,6 +85,19 @@ 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
       viewBox="0 0 24 24"
       fill="none"
@@ -112,6 +125,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"

package/src/components/index.js

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

package/src/components/insights/index.ts

@@ -0,0 +1 @@
+export * from './insights';

package/src/components/insights/insights.module.css

@@ -0,0 +1,34 @@
+.icon {
+  outline: 3px solid transparent;
+  border-radius: 50%;
+  background: var(--color-highlight);
+}
+
+.error .icon {
+  outline-color: var(--color-red-50);
+  background: var(--color-red-50);
+  color: var(--color-danger);
+}
+
+.warning .icon {
+  outline-color: var(--color-yellow-100);
+  background: var(--color-yellow-100);
+  color: var(--color-warning-dark);
+}
+
+.info .icon {
+  outline-color: var(--color-highlight-info);
+  background: var(--color-highlight-info);
+  color: var(--color-info);
+}
+
+.entry {
+  color: inherit;
+  text-decoration: none;
+}
+
+.entry:hover,
+.entry:active,
+.entry:focus {
+  text-decoration: underline;
+}

package/src/components/insights/insights.stories.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Insights } from '.';
+
+export default {
+  title: 'Components/Insights',
+  component: Insights,
+  decorators: [getWrapperDecorator()],
+};
+
+const Template = (props: any) => <Insights {...props} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  duplicatePackages: {
+    type: 'error',
+    data: {
+      packages: { 'package-a': ['package-a', 'package-a~1'] },
+      text: 'Bundle introduced 1 and removed 2 duplicate packages',
+    },
+  },
+  newPackages: {
+    type: 'warning',
+    data: {
+      text: 'Bundle introduced 2 new packages: package-c, package-d',
+      packages: ['package-c', 'package-d'],
+    },
+    changes: true,
+  },
+};
+
+export const Info = Template.bind({});
+
+Info.args = {
+  duplicatePackages: {
+    type: 'info',
+    data: {
+      packages: { 'package-a': ['package-a', 'package-a~1'] },
+      text: 'Bundle removed 1 duplicate packages',
+    },
+    changes: false,
+  },
+  newPackages: {
+    type: 'warning',
+    data: {
+      text: 'Bundle introduced 2 new packages: package-c, package-d',
+      packages: ['package-c', 'package-d'],
+    },
+    changes: true,
+  },
+};

package/src/components/insights/insights.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import cx from 'classnames';
+import {
+  BUNDLE_PACKAGES_DUPLICATE,
+  BUNDLE_PACKAGES_COUNT,
+  InsightType,
+  JobInsight,
+  JobInsights as JobInsightsType,
+} from '@bundle-stats/utils';
+
+import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
+import { Icon } from '../../ui/icon';
+import { ComponentLink } from '../component-link';
+// @ts-ignore
+import css from './insights.module.css';
+
+interface InsightEntry {
+  name: string;
+  insight: JobInsight;
+  link: any;
+}
+
+const normalizedInsights = ({
+  duplicatePackages,
+  newPackages,
+}: Partial<JobInsightsType['webpack']>): Array<InsightEntry> => {
+  const insightsByLevel: Record<InsightType, Array<InsightEntry>> = {
+    [InsightType.ERROR]: [],
+    [InsightType.WARNING]: [],
+    [InsightType.INFO]: [],
+  };
+
+  if (duplicatePackages) {
+    insightsByLevel[duplicatePackages.type].push({
+      name: 'duplicatePackages',
+      insight: duplicatePackages,
+      link: BUNDLE_PACKAGES_DUPLICATE,
+    });
+  }
+
+  if (newPackages) {
+    insightsByLevel[newPackages.type].push({
+      name: 'newPackages',
+      insight: newPackages,
+      link: BUNDLE_PACKAGES_COUNT,
+    });
+  }
+
+  return [
+    ...(insightsByLevel[InsightType.ERROR] || []),
+    ...(insightsByLevel[InsightType.WARNING] || []),
+    ...(insightsByLevel[InsightType.INFO] || []),
+  ];
+};
+
+const InsightTypeIconMap = new Map([
+  [InsightType.ERROR, Icon.ICONS.ERROR],
+  [InsightType.WARNING, Icon.ICONS.WARNING],
+  [InsightType.INFO, Icon.ICONS.INFO],
+]);
+
+interface InsightsProps extends React.HTMLAttributes<HTMLDivElement> {
+  duplicatePackages: any;
+  newPackages: any;
+  customComponentLink?: React.ElementType;
+}
+
+export const Insights = (props: InsightsProps) => {
+  const {
+    duplicatePackages,
+    newPackages,
+    customComponentLink: CustomComponentLink = ComponentLink,
+    ...restProps
+  } = props;
+
+  const insights = normalizedInsights({ duplicatePackages, newPackages });
+
+  return (
+    <Stack space="xxsmall" {...restProps}>
+      {insights.map(({ name, insight, link }) => {
+        const glyph = InsightTypeIconMap.get(insight.type);
+        const { text } = insight.data as { text: string };
+
+        return (
+          <FlexStack
+            key={name}
+            space="xxsmall"
+            alignItems="center"
+            as={CustomComponentLink}
+            {...link}
+            className={cx(css.entry, css[insight.type])}
+          >
+            {glyph && <Icon glyph={glyph} className={css.icon} />}
+            <span>{text}</span>
+          </FlexStack>
+        );
+      })}
+    </Stack>
+  );
+};

package/src/ui/icon/icon.jsx

@@ -11,7 +11,9 @@ const ICONS = {
   CLOSE: 'close',
   CLOCK: 'clock',
   COMMIT: 'commit',
+  ERROR: 'error',
   FILTER: 'filter',
+  INFO: 'info',
   HELP: 'help',
   MENU: 'menu',
   SORT: 'sort',

package/types/components/index.d.ts

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

package/types/components/insights/index.d.ts

@@ -0,0 +1 @@
+export * from './insights';

package/types/components/insights/insights.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface InsightsProps extends React.HTMLAttributes<HTMLDivElement> {
+    duplicatePackages: any;
+    newPackages: any;
+    customComponentLink?: React.ElementType;
+}
+export declare const Insights: (props: InsightsProps) => JSX.Element;
+export {};

package/types/ui/icon/icon.d.ts

@@ -28,7 +28,9 @@ declare namespace ICONS {
     const CLOSE: string;
     const CLOCK: string;
     const COMMIT: string;
+    const ERROR: string;
     const FILTER: string;
+    const INFO: string;
     const HELP: string;
     const MENU: string;
     const SORT: string;

package/lib/components/duplicate-packages-insight/duplicate-packages-insight.js

@@ -1,34 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DuplicatePackagesInsight = void 0;
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@bundle-stats/utils");
-const alert_1 = require("../../ui/alert");
-const component_link_1 = require("../component-link");
-const delta_1 = require("../delta");
-const duplicate_packages_insight_module_css_1 = __importDefault(require("./duplicate-packages-insight.module.css"));
-const AlertKindMap = new Map([
-    [utils_1.InsightType.INFO, 'info'],
-    [utils_1.InsightType.ERROR, 'danger'],
-    [utils_1.InsightType.WARNING, 'warning'],
-]);
-const DuplicatePackagesInsight = (props) => {
-    const { type, data, summary, showDelta = true, customComponentLink: CustomComponentLink = component_link_1.ComponentLink, ...restProps } = props;
-    const metric = (0, utils_1.getGlobalMetricType)('webpack.duplicatePackageCount');
-    const metricRunInfo = (0, utils_1.getMetricRunInfo)(metric, summary.current, summary.baseline);
-    const hasDuplicatePackages = metricRunInfo.value > 0 || (metricRunInfo && metricRunInfo.delta !== 0);
-    return (react_1.default.createElement(alert_1.Alert, { kind: AlertKindMap.get(type), ...restProps },
-        react_1.default.createElement("span", { className: duplicate_packages_insight_module_css_1.default.message }, data.text),
-        hasDuplicatePackages && (react_1.default.createElement("span", { className: duplicate_packages_insight_module_css_1.default.metric },
-            metricRunInfo.value,
-            showDelta && typeof metricRunInfo.delta !== 'undefined' && (react_1.default.createElement(delta_1.Delta, { className: duplicate_packages_insight_module_css_1.default.delta, inverted: true, displayValue: metricRunInfo.displayDelta, deltaType: metricRunInfo.deltaType })))),
-        react_1.default.createElement("span", { className: duplicate_packages_insight_module_css_1.default.link },
-            hasDuplicatePackages &&
-                (typeof metricRunInfo?.delta !== 'undefined' && metricRunInfo.delta !== 0 ? (react_1.default.createElement(CustomComponentLink, { ...utils_1.BUNDLE_PACKAGES_DUPLICATE_NEW }, "View duplicate packages")) : (react_1.default.createElement(CustomComponentLink, { ...utils_1.BUNDLE_PACKAGES_DUPLICATE }, "View duplicate packages"))),
-            !hasDuplicatePackages && (react_1.default.createElement(CustomComponentLink, { ...utils_1.BUNDLE_PACKAGES_COUNT }, "View packages")))));
-};
-exports.DuplicatePackagesInsight = DuplicatePackagesInsight;
-//# sourceMappingURL=duplicate-packages-insight.js.map

package/lib/components/duplicate-packages-insight/duplicate-packages-insight.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"duplicate-packages-insight.js","sourceRoot":"","sources":["../../../src/components/duplicate-packages-insight/duplicate-packages-insight.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,+CAS6B;AAE7B,0CAAuC;AACvC,sDAAkD;AAClD,oCAAiC;AAEjC,oHAA0D;AAU1D,MAAM,YAAY,GAAG,IAAI,GAAG,CAAC;IAC3B,CAAC,mBAAW,CAAC,IAAI,EAAE,MAAM,CAAC;IAC1B,CAAC,mBAAW,CAAC,KAAK,EAAE,QAAQ,CAAC;IAC7B,CAAC,mBAAW,CAAC,OAAO,EAAE,SAAS,CAAC;CACjC,CAAC,CAAC;AAEI,MAAM,wBAAwB,GAAG,CAAC,KAAoC,EAAE,EAAE;IAC/E,MAAM,EACJ,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,SAAS,GAAG,IAAI,EAChB,mBAAmB,EAAE,mBAAmB,GAAG,8BAAa,EACxD,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,MAAM,GAAG,IAAA,2BAAmB,EAAC,+BAA+B,CAAC,CAAC;IAEpE,MAAM,aAAa,GAAG,IAAA,wBAAgB,EAAC,MAAM,EAAE,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IAElF,MAAM,oBAAoB,GACxB,aAAa,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,aAAa,IAAI,aAAa,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC;IAE1E,OAAO,CACL,8BAAC,aAAK,IAAC,IAAI,EAAE,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,KAAM,SAAS;QAChD,wCAAM,SAAS,EAAE,+CAAG,CAAC,OAAO,IAAG,IAAI,CAAC,IAAI,CAAQ;QAC/C,oBAAoB,IAAI,CACvB,wCAAM,SAAS,EAAE,+CAAG,CAAC,MAAM;YACxB,aAAa,CAAC,KAAK;YACnB,SAAS,IAAI,OAAO,aAAa,CAAC,KAAK,KAAK,WAAW,IAAI,CAC1D,8BAAC,aAAK,IACJ,SAAS,EAAE,+CAAG,CAAC,KAAK,EACpB,QAAQ,QACR,YAAY,EAAE,aAAa,CAAC,YAAsB,EAClD,SAAS,EAAE,aAAa,CAAC,SAAmB,GAC5C,CACH,CACI,CACR;QACD,wCAAM,SAAS,EAAE,+CAAG,CAAC,IAAI;YACtB,oBAAoB;gBACnB,CAAC,OAAO,aAAa,EAAE,KAAK,KAAK,WAAW,IAAI,aAAa,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAC1E,8BAAC,mBAAmB,OAAM,qCAAqC,8BAEzC,CACvB,CAAC,CAAC,CAAC,CACF,8BAAC,mBAAmB,OAAM,iCAAiC,8BAErC,CACvB,CAAC;YAEH,CAAC,oBAAoB,IAAI,CACxB,8BAAC,mBAAmB,OAAM,6BAA6B,oBAEjC,CACvB,CACI,CACD,CACT,CAAC;AACJ,CAAC,CAAC;AArDW,QAAA,wBAAwB,4BAqDnC"}

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

@@ -1,18 +0,0 @@
-.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/lib/components/duplicate-packages-insight/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/duplicate-packages-insight/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+DAA6C"}

package/lib-esm/components/duplicate-packages-insight/duplicate-packages-insight.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import { BUNDLE_PACKAGES_DUPLICATE, BUNDLE_PACKAGES_DUPLICATE_NEW, BUNDLE_PACKAGES_COUNT, InsightType, getMetricRunInfo, getGlobalMetricType, } from '@bundle-stats/utils';
-import { Alert } from '../../ui/alert';
-import { ComponentLink } from '../component-link';
-import { Delta } from '../delta';
-import css from './duplicate-packages-insight.module.css';
-const AlertKindMap = new Map([
-    [InsightType.INFO, 'info'],
-    [InsightType.ERROR, 'danger'],
-    [InsightType.WARNING, 'warning'],
-]);
-export const DuplicatePackagesInsight = (props) => {
-    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 (React.createElement(Alert, { kind: AlertKindMap.get(type), ...restProps },
-        React.createElement("span", { className: css.message }, data.text),
-        hasDuplicatePackages && (React.createElement("span", { className: css.metric },
-            metricRunInfo.value,
-            showDelta && typeof metricRunInfo.delta !== 'undefined' && (React.createElement(Delta, { className: css.delta, inverted: true, displayValue: metricRunInfo.displayDelta, deltaType: metricRunInfo.deltaType })))),
-        React.createElement("span", { className: css.link },
-            hasDuplicatePackages &&
-                (typeof (metricRunInfo === null || metricRunInfo === void 0 ? void 0 : metricRunInfo.delta) !== 'undefined' && metricRunInfo.delta !== 0 ? (React.createElement(CustomComponentLink, { ...BUNDLE_PACKAGES_DUPLICATE_NEW }, "View duplicate packages")) : (React.createElement(CustomComponentLink, { ...BUNDLE_PACKAGES_DUPLICATE }, "View duplicate packages"))),
-            !hasDuplicatePackages && (React.createElement(CustomComponentLink, { ...BUNDLE_PACKAGES_COUNT }, "View packages")))));
-};
-//# sourceMappingURL=duplicate-packages-insight.js.map

package/lib-esm/components/duplicate-packages-insight/duplicate-packages-insight.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"duplicate-packages-insight.js","sourceRoot":"","sources":["../../../src/components/duplicate-packages-insight/duplicate-packages-insight.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,yBAAyB,EACzB,6BAA6B,EAC7B,qBAAqB,EACrB,WAAW,EAEX,gBAAgB,EAEhB,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,OAAO,GAAG,MAAM,yCAAyC,CAAC;AAU1D,MAAM,YAAY,GAAG,IAAI,GAAG,CAAC;IAC3B,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC;IAC1B,CAAC,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC;IAC7B,CAAC,WAAW,CAAC,OAAO,EAAE,SAAS,CAAC;CACjC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAoC,EAAE,EAAE;IAC/E,MAAM,EACJ,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,SAAS,GAAG,IAAI,EAChB,mBAAmB,EAAE,mBAAmB,GAAG,aAAa,EACxD,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,MAAM,GAAG,mBAAmB,CAAC,+BAA+B,CAAC,CAAC;IAEpE,MAAM,aAAa,GAAG,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IAElF,MAAM,oBAAoB,GACxB,aAAa,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,aAAa,IAAI,aAAa,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC;IAE1E,OAAO,CACL,oBAAC,KAAK,IAAC,IAAI,EAAE,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,KAAM,SAAS;QAChD,8BAAM,SAAS,EAAE,GAAG,CAAC,OAAO,IAAG,IAAI,CAAC,IAAI,CAAQ;QAC/C,oBAAoB,IAAI,CACvB,8BAAM,SAAS,EAAE,GAAG,CAAC,MAAM;YACxB,aAAa,CAAC,KAAK;YACnB,SAAS,IAAI,OAAO,aAAa,CAAC,KAAK,KAAK,WAAW,IAAI,CAC1D,oBAAC,KAAK,IACJ,SAAS,EAAE,GAAG,CAAC,KAAK,EACpB,QAAQ,QACR,YAAY,EAAE,aAAa,CAAC,YAAsB,EAClD,SAAS,EAAE,aAAa,CAAC,SAAmB,GAC5C,CACH,CACI,CACR;QACD,8BAAM,SAAS,EAAE,GAAG,CAAC,IAAI;YACtB,oBAAoB;gBACnB,CAAC,OAAO,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,CAAA,KAAK,WAAW,IAAI,aAAa,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAC1E,oBAAC,mBAAmB,OAAM,6BAAqC,8BAEzC,CACvB,CAAC,CAAC,CAAC,CACF,oBAAC,mBAAmB,OAAM,yBAAiC,8BAErC,CACvB,CAAC;YAEH,CAAC,oBAAoB,IAAI,CACxB,oBAAC,mBAAmB,OAAM,qBAA6B,oBAEjC,CACvB,CACI,CACD,CACT,CAAC;AACJ,CAAC,CAAC"}

package/lib-esm/components/duplicate-packages-insight/duplicate-packages-insight.module.css

@@ -1,18 +0,0 @@
-.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/lib-esm/components/duplicate-packages-insight/index.js

@@ -1,2 +0,0 @@
-export * from './duplicate-packages-insight';
-//# sourceMappingURL=index.js.map

package/lib-esm/components/duplicate-packages-insight/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/duplicate-packages-insight/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}

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

@@ -1,18 +0,0 @@
-.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

@@ -1,66 +0,0 @@
-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,
-  },
-};