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

package/lib-esm/components/job-header/job-header.js

@@ -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';
 import { Icon } from '../../ui/icon';
@@ -10,7 +10,7 @@ import { Tag } from '../../ui/tag';
 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 (React.createElement(Stack, { className: rootClassName, space: "xxsmall" },
         React.createElement("h1", { className: css.title },

package/lib-esm/components/job-header/job-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"job-header.js","sourceRoot":"","sources":["../../../src/components/job-header/job-header.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,GAAG,MAAM,YAAY,CAAC;AAC7B,OAAO,EAAE,yBAAyB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAEhF,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAE1C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,EAAE;IACjC,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEhD,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,GAAG,CAAC,GAAG,EAAE,QAAQ,yBAAyB,EAAE,EAAE,EAAE,CAAC,CAAC;IAC5E,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAC,SAAS;QAC9C,4BAAI,SAAS,EAAE,GAAG,CAAC,KAAK;YACtB,kCAAO,IAAI,GAAG,CAAC,mBAAmB,EAAE,CAAQ;YAC3C,GAAG,IAAI,oBAAC,GAAG,IAAC,SAAS,EAAE,GAAG,CAAC,GAAG,IAAG,GAAG,CAAO,CACzC;QACL,oBAAC,SAAS,IAAC,KAAK,EAAC,SAAS,EAAC,SAAS,EAAE,GAAG,CAAC,IAAI;YAC3C,OAAO,IAAI,CACV,oBAAC,SAAS,IAAC,KAAK,EAAC,UAAU,EAAC,UAAU,EAAC,QAAQ,EAAC,MAAM,QAAC,EAAE,EAAC,MAAM,EAAC,KAAK,EAAE,OAAO;gBAC7E,oBAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG;gBACtB,kCACG,cAAc,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,OAAO,CAAC,CACjE,CACG,CACb;YAEA,IAAI,IAAI,CACP,oBAAC,SAAS,IAAC,KAAK,EAAC,UAAU,EAAC,UAAU,EAAC,QAAQ,EAAC,MAAM,QAAC,KAAK,EAAC,qBAAqB;gBAChF,oBAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,GAAG;gBACvB,kCAAO,IAAI,CAAQ,CACT,CACb;YAED,6BAAK,SAAS,EAAE,GAAG,CAAC,OAAO,IAAG,QAAQ,CAAO,CACnC,CACN,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,SAAS,GAAG;IACpB,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,GAAG,EAAE,SAAS,CAAC,MAAM;IACrB,GAAG,EAAE,SAAS,CAAC,KAAK,CAAC;QACnB,mBAAmB,EAAE,SAAS,CAAC,MAAM;QACrC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC;YACpB,OAAO,EAAE,SAAS,CAAC,MAAM;SAC1B,CAAC;QACF,OAAO,EAAE,SAAS,CAAC,MAAM;KAC1B,CAAC;IACF,QAAQ,EAAE,SAAS,CAAC,OAAO;CAC5B,CAAC;AAEF,SAAS,CAAC,YAAY,GAAG;IACvB,SAAS,EAAE,EAAE;IACb,GAAG,EAAE,EAAE;IACP,GAAG,EAAE,IAAI;IACT,QAAQ,EAAE,IAAI;CACf,CAAC"}
+{"version":3,"file":"job-header.js","sourceRoot":"","sources":["../../../src/components/job-header/job-header.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,GAAG,MAAM,YAAY,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE7D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAE1C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,EAAE;IACjC,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEhD,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,GAAG,CAAC,GAAG,EAAE,QAAQ,MAAM,CAAC,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;IACjE,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAC,SAAS;QAC9C,4BAAI,SAAS,EAAE,GAAG,CAAC,KAAK;YACtB,kCAAO,IAAI,GAAG,CAAC,mBAAmB,EAAE,CAAQ;YAC3C,GAAG,IAAI,oBAAC,GAAG,IAAC,SAAS,EAAE,GAAG,CAAC,GAAG,IAAG,GAAG,CAAO,CACzC;QACL,oBAAC,SAAS,IAAC,KAAK,EAAC,SAAS,EAAC,SAAS,EAAE,GAAG,CAAC,IAAI;YAC3C,OAAO,IAAI,CACV,oBAAC,SAAS,IAAC,KAAK,EAAC,UAAU,EAAC,UAAU,EAAC,QAAQ,EAAC,MAAM,QAAC,EAAE,EAAC,MAAM,EAAC,KAAK,EAAE,OAAO;gBAC7E,oBAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG;gBACtB,kCACG,cAAc,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,OAAO,CAAC,CACjE,CACG,CACb;YAEA,IAAI,IAAI,CACP,oBAAC,SAAS,IAAC,KAAK,EAAC,UAAU,EAAC,UAAU,EAAC,QAAQ,EAAC,MAAM,QAAC,KAAK,EAAC,qBAAqB;gBAChF,oBAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,GAAG;gBACvB,kCAAO,IAAI,CAAQ,CACT,CACb;YAED,6BAAK,SAAS,EAAE,GAAG,CAAC,OAAO,IAAG,QAAQ,CAAO,CACnC,CACN,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,SAAS,GAAG;IACpB,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,GAAG,EAAE,SAAS,CAAC,MAAM;IACrB,GAAG,EAAE,SAAS,CAAC,KAAK,CAAC;QACnB,mBAAmB,EAAE,SAAS,CAAC,MAAM;QACrC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC;YACpB,OAAO,EAAE,SAAS,CAAC,MAAM;SAC1B,CAAC;QACF,OAAO,EAAE,SAAS,CAAC,MAAM;KAC1B,CAAC;IACF,QAAQ,EAAE,SAAS,CAAC,OAAO;CAC5B,CAAC;AAEF,SAAS,CAAC,YAAY,GAAG;IACvB,SAAS,EAAE,EAAE;IACb,GAAG,EAAE,EAAE;IACP,GAAG,EAAE,IAAI;IACT,QAAQ,EAAE,IAAI;CACf,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/ui/icon/icon.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAEpC,MAAM,KAAK,GAAG;IACZ,KAAK,EAAE,OAAO;IACd,kBAAkB,EAAE,oBAAoB;IACxC,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAK,EAAE,EAAE;IAC5B,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEtE,OAAO,CACL,oBAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,KAAM,SAAS;QACrE,6BAAK,SAAS,EAAE,GAAG,CAAC,IAAI;YACtB,6BAAK,SAAS,EAAE,IAAI,KAAK,EAAE,GAAI,CAC3B,CACI,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;AAEnB,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;AAC1B,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC;AAC5B,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;AAC1B,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAElE,IAAI,CAAC,YAAY,GAAG;IAClB,SAAS,EAAE,EAAE;IACb,EAAE,EAAE,MAAM;IACV,IAAI,EAAE,IAAI,CAAC,WAAW;CACvB,CAAC;AAEF,IAAI,CAAC,SAAS,GAAG;IACf,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU;IAC9F,EAAE,EAAE,SAAS,CAAC,IAAI;IAClB,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;CAClC,CAAC"}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/ui/icon/icon.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAEpC,MAAM,KAAK,GAAG;IACZ,KAAK,EAAE,OAAO;IACd,kBAAkB,EAAE,oBAAoB;IACxC,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAK,EAAE,EAAE;IAC5B,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEtE,OAAO,CACL,oBAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,KAAM,SAAS;QACrE,6BAAK,SAAS,EAAE,GAAG,CAAC,IAAI;YACtB,6BAAK,SAAS,EAAE,IAAI,KAAK,EAAE,GAAI,CAC3B,CACI,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;AAEnB,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;AAC1B,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC;AAC5B,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;AAC1B,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAElE,IAAI,CAAC,YAAY,GAAG;IAClB,SAAS,EAAE,EAAE;IACb,EAAE,EAAE,MAAM;IACV,IAAI,EAAE,IAAI,CAAC,WAAW;CACvB,CAAC;AAEF,IAAI,CAAC,SAAS,GAAG;IACf,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU;IAC9F,EAAE,EAAE,SAAS,CAAC,IAAI;IAClB,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;CAClC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.3.0-beta.1",
+  "version": "4.3.0-beta.3",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -20,8 +20,7 @@
     "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:storyshots": "jest build/storybook "
   },
   "repository": {
     "type": "git",
@@ -41,17 +40,16 @@
   "devDependencies": {
     "@babel/preset-env": "7.20.2",
     "@babel/preset-react": "7.18.6",
-    "@storybook/addon-essentials": "6.5.15",
+    "@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",
+    "@storybook/addon-storyshots": "6.5.16",
+    "@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.26",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.14.0",
     "classnames": "2.3.2",
     "colormap": "2.3.2",
     "cross-env": "7.0.3",
@@ -60,9 +58,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.2",
     "jest-date-mock": "1.0.8",
-    "jest-environment-jsdom": "29.3.1",
+    "jest-environment-jsdom": "29.4.2",
     "lodash": "4.17.21",
     "postcss": "8.4.21",
     "prop-types": "15.8.1",
@@ -70,8 +68,8 @@
     "react-dom": "17.0.2",
     "react-router-dom": "5.3.4",
     "react-test-renderer": "18.2.0",
-    "rimraf": "4.1.1",
-    "typescript": "4.9.4"
+    "rimraf": "4.1.2",
+    "typescript": "4.9.5"
   },
   "peerDependencies": {
     "classnames": "^2.0.0",
@@ -82,11 +80,11 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.3.0-beta.1",
+    "@bundle-stats/utils": "^4.3.0-beta.3",
     "ariakit": "2.0.0-next.43",
     "modern-css-reset": "1.4.0",
     "query-string": "7.1.3",
-    "use-query-params": "2.1.2"
+    "use-query-params": "2.2.0"
   },
-  "gitHead": "3f34b96d46d38d7324d9460fd19bc060786eb320"
+  "gitHead": "b9dff5b3797a3a8bb5bc5afce1900a56080c9ba4"
 }

package/src/app/app.jsx

@@ -12,7 +12,6 @@ import {
 } from '../constants';
 import { Box } from '../layout/box';
 import { Container } from '../ui/container';
-import { DuplicatePackagesWarning } from '../components/duplicate-packages-warning';
 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,19 +69,27 @@ 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;
+  const newPackagesInsight = jobs[0].insights?.webpack?.newPackages;
+
+  console.info(duplicatePackagesInsight, newPackagesInsight);
 
   return (
     <Stack space="medium">
-      {duplicatePackagesInsights && (
+      {(duplicatePackagesInsight || newPackagesInsight) && (
         <Container>
-          <DuplicatePackagesWarning
-            duplicatePackagesCount={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 { DuplicatePackagesWarning } from './duplicate-packages-warning';
 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,32 @@
+.icon {
+  padding: 3px;
+  box-sizing: content-box;
+  border-radius: 50%;
+  background: var(--color-highlight);
+}
+
+.error .icon {
+  background: var(--color-red-50);
+  color: var(--color-danger);
+}
+
+.warning .icon {
+  background: var(--color-yellow-100);
+  color: var(--color-warning-dark);
+}
+
+.info .icon {
+  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,50 @@
+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'],
+    },
+  },
+};
+
+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',
+    },
+  },
+  newPackages: {
+    type: 'warning',
+    data: {
+      text: 'Bundle introduced 2 new packages: package-c, package-d',
+      packages: ['package-c', 'package-d'],
+    },
+  },
+};

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/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/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/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/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 { DuplicatePackagesWarning } from "./duplicate-packages-warning";
 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-warning/duplicate-packages-warning.js

@@ -1,41 +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.DuplicatePackagesWarning = void 0;
-const react_1 = __importDefault(require("react"));
-const prop_types_1 = __importDefault(require("prop-types"));
-const classnames_1 = __importDefault(require("classnames"));
-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_warning_module_css_1 = __importDefault(require("./duplicate-packages-warning.module.css"));
-const numberMetric = utils_1.METRIC_TYPES[utils_1.METRIC_TYPE_NUMERIC];
-const DuplicatePackagesWarning = (props) => {
-    const { className, duplicatePackagesCount, customComponentLink: CustomComponentLink, showDelta, } = props;
-    const metricRunInfo = (0, utils_1.getMetricRunInfo)(numberMetric, duplicatePackagesCount.current, duplicatePackagesCount.baseline);
-    return (react_1.default.createElement(alert_1.Alert, { kind: "warning", className: (0, classnames_1.default)(duplicate_packages_warning_module_css_1.default.root, className) },
-        `Bundle contains `,
-        react_1.default.createElement(CustomComponentLink, { ...utils_1.BUNDLE_PACKAGES_DUPLICATE },
-            metricRunInfo.value,
-            showDelta && metricRunInfo.delta !== 0 && (react_1.default.createElement(delta_1.Delta, { className: duplicate_packages_warning_module_css_1.default.titleDelta, inverted: true, displayValue: metricRunInfo.displayDelta, deltaType: metricRunInfo.deltaType })),
-            ` duplicate ${metricRunInfo.value === 1 ? 'package' : 'packages'}.`)));
-};
-exports.DuplicatePackagesWarning = DuplicatePackagesWarning;
-exports.DuplicatePackagesWarning.propTypes = {
-    className: prop_types_1.default.string,
-    customComponentLink: prop_types_1.default.elementType,
-    duplicatePackagesCount: prop_types_1.default.shape({
-        current: prop_types_1.default.number,
-        baseline: prop_types_1.default.number,
-    }).isRequired,
-    showDelta: prop_types_1.default.bool,
-};
-exports.DuplicatePackagesWarning.defaultProps = {
-    className: '',
-    customComponentLink: component_link_1.ComponentLink,
-    showDelta: true,
-};
-//# sourceMappingURL=duplicate-packages-warning.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"duplicate-packages-warning.js","sourceRoot":"","sources":["../../../src/components/duplicate-packages-warning/duplicate-packages-warning.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAmC;AACnC,4DAA4B;AAC5B,+CAAqH;AAErH,0CAAuC;AACvC,sDAAkD;AAClD,oCAAiC;AACjC,oHAA0D;AAE1D,MAAM,YAAY,GAAG,oBAAY,CAAC,2BAAmB,CAAC,CAAC;AAEhD,MAAM,wBAAwB,GAAG,CAAC,KAAK,EAAE,EAAE;IAChD,MAAM,EACJ,SAAS,EACT,sBAAsB,EACtB,mBAAmB,EAAE,mBAAmB,EACxC,SAAS,GACV,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,IAAA,wBAAgB,EACpC,YAAY,EACZ,sBAAsB,CAAC,OAAO,EAC9B,sBAAsB,CAAC,QAAQ,CAChC,CAAC;IAEF,OAAO,CACL,8BAAC,aAAK,IAAC,IAAI,EAAC,SAAS,EAAC,SAAS,EAAE,IAAA,oBAAE,EAAC,+CAAG,CAAC,IAAI,EAAE,SAAS,CAAC;QACrD,kBAAkB;QACnB,8BAAC,mBAAmB,OAAK,iCAAyB;YAC/C,aAAa,CAAC,KAAK;YACnB,SAAS,IAAI,aAAa,CAAC,KAAK,KAAK,CAAC,IAAI,CACzC,8BAAC,aAAK,IACJ,SAAS,EAAE,+CAAG,CAAC,UAAU,EACzB,QAAQ,QACR,YAAY,EAAE,aAAa,CAAC,YAAY,EACxC,SAAS,EAAE,aAAa,CAAC,SAAS,GAClC,CACH;YACA,cAAc,aAAa,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,GAAG,CAChD,CAChB,CACT,CAAC;AACJ,CAAC,CAAC;AA/BW,QAAA,wBAAwB,4BA+BnC;AAEF,gCAAwB,CAAC,SAAS,GAAG;IACnC,SAAS,EAAE,oBAAS,CAAC,MAAM;IAC3B,mBAAmB,EAAE,oBAAS,CAAC,WAAW;IAC1C,sBAAsB,EAAE,oBAAS,CAAC,KAAK,CAAC;QACtC,OAAO,EAAE,oBAAS,CAAC,MAAM;QACzB,QAAQ,EAAE,oBAAS,CAAC,MAAM;KAC3B,CAAC,CAAC,UAAU;IACb,SAAS,EAAE,oBAAS,CAAC,IAAI;CAC1B,CAAC;AAEF,gCAAwB,CAAC,YAAY,GAAG;IACtC,SAAS,EAAE,EAAE;IACb,mBAAmB,EAAE,8BAAa;IAClC,SAAS,EAAE,IAAI;CAChB,CAAC"}

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

@@ -1,22 +0,0 @@
-.root a {
-  text-decoration: none;
-}
-
-.root a:hover,
-.root a:active,
-.root a:focus {
-  text-decoration: none;
-}
-
-.title {
-  margin-bottom: var(--space-xxsmall);
-  font-size: var(--size-medium);
-}
-
-.titleDelta {
-  margin-left: var(--space-xxxsmall);
-  padding: 1px 2px;
-  vertical-align: super;
-  font-size: 9px;
-  line-height: 1;
-}

package/lib/components/duplicate-packages-warning/index.js.map

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