@bundle-stats/ui 4.1.4 → 4.1.5-alpha.1

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

@@ -1,55 +1,34 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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 { 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'
-  });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UITooltipAnchor, _extends({
-    as: Component,
-    className: cx(css.root, className),
-    state: tooltip
-  }, ref ? {
-    ref
-  } : {}, restProps), children), title && /*#__PURE__*/React.createElement(UITooltip, {
-    state: tooltip,
-    className: cx(css.tooltip, tooltipClassName, darkMode && css.tooltipDarkMode)
-  }, /*#__PURE__*/React.createElement(UITooltipArrow, {
-    state: tooltip,
-    className: css.arrow,
-    size: 12
-  }), title));
+export const Tooltip = (props) => {
+    const { className, tooltipClassName, title, children, as: Component, containerRef: ref, darkMode, ...restProps } = props;
+    const tooltip = useTooltipState({ placement: 'top' });
+    return (React.createElement(React.Fragment, null,
+        React.createElement(UITooltipAnchor, { as: Component, className: cx(css.root, className), state: tooltip, ...(ref ? { ref } : {}), ...restProps }, children),
+        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
+    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 // eslint-disable-line react/forbid-prop-types
-  }),
-
-  darkMode: PropTypes.bool
-};
+    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

@@ -0,0 +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"}

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

@@ -16,7 +16,7 @@
   background: var(--color-light);
   max-width: 24em;
   color: var(--color-text);
-  filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
+  filter: drop-shadow(var(--shadow-layer));
   will-change: filter;
   font-size: var(--size-xsmall);
   line-height: var(--space-small);

package/lib-esm/utils.js

@@ -1,36 +1,30 @@
-import _chunk from "lodash/chunk";
 import React from 'react';
+import chunk from 'lodash/chunk';
 import cx from 'classnames';
 import COLORS from './chart-colors.json';
-export const getColors = function (count) {
-  if (count === void 0) {
-    count = 2;
-  }
-  const chunks = _chunk(COLORS, Math.round(COLORS.length / count));
-  return chunks.map((chunkColors, index) => {
-    if (index === 0) {
-      return chunkColors[0];
+export const getColors = (count = 2) => {
+    const chunks = chunk(COLORS, Math.round(COLORS.length / count));
+    return chunks.map((chunkColors, index) => {
+        if (index === 0) {
+            return chunkColors[0];
+        }
+        if (index === chunks.length - 1) {
+            return chunkColors[chunkColors.length - 1];
+        }
+        return chunkColors[Math.floor(chunkColors.length / 2)];
+    });
+};
+export const getRenderChildWithClassName = (className) => (child) => {
+    if (child === null || child === '') {
+        return null;
     }
-    if (index === chunks.length - 1) {
-      return chunkColors[chunkColors.length - 1];
+    const { props } = child;
+    if (!props) {
+        return React.createElement("div", { className: className }, child);
     }
-    return chunkColors[Math.floor(chunkColors.length / 2)];
-  });
+    return React.cloneElement(child, {
+        ...props,
+        className: cx(className, props.className),
+    });
 };
-export const getRenderChildWithClassName = className => child => {
-  if (child === null || child === '') {
-    return null;
-  }
-  const {
-    props
-  } = child;
-  if (!props) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: className
-    }, child);
-  }
-  return /*#__PURE__*/React.cloneElement(child, {
-    ...props,
-    className: cx(className, props.className) // eslint-disable-line react/prop-types
-  });
-};
+//# sourceMappingURL=utils.js.map

package/lib-esm/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,MAAM,cAAc,CAAC;AACjC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,EAAE;IACrC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC;IAEhE,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE;QACvC,IAAI,KAAK,KAAK,CAAC,EAAE;YACf,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC;SACvB;QAED,IAAI,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;YAC/B,OAAO,WAAW,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;SAC5C;QAED,OAAO,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;IACzD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE;IAClE,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,EAAE,EAAE;QAClC,OAAO,IAAI,CAAC;KACb;IAED,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAExB,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,6BAAK,SAAS,EAAE,SAAS,IAAG,KAAK,CAAO,CAAC;KACjD;IAED,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;QAC/B,GAAG,KAAK;QACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;KAC1C,CAAC,CAAC;AACL,CAAC,CAAC"}

package/package.json

@@ -1,19 +1,22 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.1.4",
+  "version": "4.1.5-alpha.1",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
+  "types": "types/index.d.ts",
   "scripts": {
-    "build": "npm run build-lib && npm run build-esm",
-    "prebuild-lib": "rimraf ./lib",
-    "build-lib": "babel -D src -d lib --ignore **/__tests__/**/* --ignore /prototypes/** --presets=@babel/preset-env,@babel/preset-react",
-    "prebuild-esm": "rimraf ./lib-esm",
-    "build-esm": "babel -D src -d lib-esm --ignore **/__tests__/**/* --ignore /prototypes/**",
+    "build": "npm run build-lib && npm run build-esm && npm run build-assets-lib && npm run build-assets-esm",
+    "prebuild-lib": "npx rimraf ./lib",
+    "build-lib": "../../node_modules/.bin/tsc --rootDir ./src --project tsconfig.lib.json --outDir ./lib",
+    "build-assets-lib": "rsync -arm --include '*/' --include '*.json' --include '*.css' --include 'icons.svg' --exclude '*' src/ lib",
+    "prebuild-esm": "npx rimraf ./lib-esm ./types",
+    "build-esm": "../../node_modules/.bin/tsc --rootDir ./src --project tsconfig.esm.json --outDir ./lib-esm",
+    "build-assets-esm": "rsync -arm --include '*/' --include '*.json' --include '*.css' --include 'icons.svg' --exclude '*' src/ lib-esm",
     "build-storybook": "npx build-storybook -c ./build/storybook",
     "generate-chart-colors": "node scripts/generate-chart-colors.js",
     "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 . --ext .jsx,.js",
+    "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",
@@ -36,12 +39,8 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/cli": "7.19.3",
-    "@babel/core": "7.20.2",
-    "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/preset-env": "7.20.2",
     "@babel/preset-react": "7.18.6",
-    "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
     "@storybook/addon-essentials": "6.5.13",
     "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-postcss": "2.0.0",
@@ -50,14 +49,10 @@
     "@storybook/builder-webpack5": "6.5.13",
     "@storybook/manager-webpack5": "6.5.13",
     "@storybook/react": "6.5.13",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "29.3.1",
-    "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
     "chromatic": "6.11.4",
     "classnames": "2.3.2",
     "colormap": "2.3.2",
-    "core-js": "3.26.1",
     "cross-env": "7.0.3",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.7",
@@ -74,11 +69,11 @@
     "react-dom": "16.14.0",
     "react-router-dom": "5.3.4",
     "react-test-renderer": "18.2.0",
-    "rimraf": "3.0.2"
+    "rimraf": "3.0.2",
+    "typescript": "4.9.3"
   },
   "peerDependencies": {
     "classnames": "^2.0.0",
-    "core-js": "^3.0.0",
     "lodash": "^4.0.0",
     "prop-types": "^15.0.0",
     "react": "^16.0.0 || ^17.0.0",
@@ -86,12 +81,11 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.1.4",
+    "@bundle-stats/utils": "^4.1.5-alpha.1",
     "ariakit": "^2.0.0-next.41",
-    "date-fns": "^2.28.0",
     "modern-css-reset": "^1.4.0",
     "query-string": "^7.1.0",
     "use-query-params": "^2.0.0"
   },
-  "gitHead": "47461f88560b103a16ed6d9b587869614a0a4572"
+  "gitHead": "75f98ae86df023f1ec5293e346a66a724ce02db9"
 }

package/src/assets/icons.svg.jsx

@@ -0,0 +1,146 @@
+import * as React from 'react';
+
+export const SvgIcons = (props) => (
+  <svg width="0" height="0" style={{ position: 'absolute' }} {...props}>
+    <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>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="feather feather-arrow-right-circle"
+      viewBox="0 0 24 24"
+      id="arrow-right-circle"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 16l4-4-4-4M8 12h8" />
+    </symbol>
+    <symbol
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="feather feather-x-circle"
+      id="cancel"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="M15 9l-6 6M9 9l6 6" />
+    </symbol>
+    <symbol
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="feather feather-clock"
+      id="clock"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 6v6l4 2" />
+    </symbol>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="feather feather-x-circle"
+      viewBox="0 0 24 24"
+      id="close"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="M15 9l-6 6M9 9l6 6" />
+    </symbol>
+    <symbol
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="feather feather-git-commit"
+      id="commit"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="12" cy="12" r="4" />
+      <path d="M1.05 12H7M17.01 12h5.95" />
+    </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>
+    <symbol
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="feather feather-help-circle"
+      id="help"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <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
+      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 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" />
+    </symbol>
+    <symbol
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="feather feather-alert-triangle"
+      id="warning"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4M12 17h.01" />
+    </symbol>
+  </svg>
+);

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { find, map } from 'lodash';
 import { getBundleModulesByChunk, getModuleFileType } from '@bundle-stats/utils';
 
 import { Stack } from '../../layout/stack';
@@ -10,13 +9,13 @@ import { ComponentLink } from '../component-link';
 import css from './asset-info.module.css';
 
 const ChunkModulesLink = ({ as: Component, chunks, chunkId, name }) => {
-  const chunk = find(chunks, { id: chunkId });
+  const chunk = chunks?.find(({ id }) => id === chunkId );
 
   if (!chunk) {
     return null;
   }
 
-  const chunkIds = map(chunks, 'id');
+  const chunkIds = chunks?.map(({ id }) => ({ id }));
   const fileType = getModuleFileType(name);
 
   return (

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { get, map } from 'lodash';
+import get from 'lodash/get';
 import {
   ASSET_ENTRY_TYPE,
   ASSET_FILE_TYPE,
@@ -230,7 +230,7 @@ export const BundleAssets = (props) => {
     (row) => (
       <RowHeader
         row={row}
-        labels={map(jobs, 'label')}
+        labels={jobs?.map(({ label }) => label)}
         chunks={jobs[0]?.meta?.webpack?.chunks || []}
         CustomComponentLink={CustomComponentLink}
       />

package/src/components/bundle-assets/bundle-assets.utils.js

@@ -1,4 +1,3 @@
-import { get } from 'lodash';
 import { ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, getFileType } from '@bundle-stats/utils';
 
 import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-assets.constants';
@@ -78,11 +77,11 @@ export const getCustomSort = (sortId) => (item) => {
   }
 
   if (sortId === SORT_BY_DELTA) {
-    return get(item, 'runs[0].deltaPercentage', 0);
+    return item?.runs?.[0]?.deltaPercentage || 0;
   }
 
   if (sortId === SORT_BY_SIZE) {
-    return get(item, 'runs[0].value', 0);
+    return item?.runs?.[0]?.value || 0;
   }
 
   return [

package/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { get, map, max, sum } from 'lodash';
+import map from 'lodash/map';
+import max from 'lodash/max';
+import sum from 'lodash/sum';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 import { getBundleAssetsFileTypeComponentLink } from '@bundle-stats/utils';
 
@@ -16,10 +18,10 @@ import css from './bundle-assets-totals-chart-bars.module.css';
 const getTooltip = (items, jobs, itemIndex, runIndex) => () => (
   <SummaryItem
     className={css.itemTooltip}
-    id={get(items, [itemIndex, 'key'])}
+    id={items?.[itemIndex]?.key}
     data={{
-      current: get(items, [itemIndex, 'runs', runIndex, 'value'], 0),
-      baseline: get(items, [itemIndex, 'runs', runIndex + 1, 'value'], 0),
+      current: items?.[itemIndex]?.runs?.[runIndex]?.value || 0,
+      baseline: items?.[itemIndex]?.runs?.[runIndex + 1]?.value || 0,
     }}
     showDelta={runIndex < jobs.length - 1}
     showBaselineValue={runIndex < jobs.length - 1}
@@ -39,7 +41,7 @@ export const BundleAssetsTotalsChartBars = ({
 
   items.forEach(({ runs }) => {
     runs.forEach((run, runIndex) => {
-      dataGraphs[runIndex] = [...(dataGraphs[runIndex] || []), get(run, 'value', 0)];
+      dataGraphs[runIndex] = [...(dataGraphs[runIndex] || []), run?.value || 0];
     });
   });
 

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

@@ -1,7 +1,8 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { get, isEmpty, map } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
+import get from 'lodash/get';
 import {
   FILE_TYPE_LABELS,
   MODULE_SOURCE_FILE_TYPES,
@@ -85,7 +86,7 @@ const getFilters = ({ filters, compareMode, chunks }) => ({
 })
 
 const RowHeader = ({ row, chunks, labels, CustomComponentLink }) => {
-  const chunkIds = map(chunks, 'id');
+  const chunkIds = chunks?.map(({ id }) => id);
 
   const [showHoverCard, setHoverCard] = useState(false);
   const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
@@ -177,7 +178,7 @@ export const BundleModules = ({
       <RowHeader
         row={row}
         chunks={chunks}
-        labels={map(jobs, 'label')}
+        labels={jobs?.map(({ label }) => label)}
         CustomComponentLink={CustomComponentLink}
       />
     ),

package/src/components/bundle-modules/bundle-modules.utils.js

@@ -1,5 +1,7 @@
 import { useMemo } from 'react';
-import { get, intersection, merge } from 'lodash';
+import intersection from 'lodash/intersection';
+import merge from 'lodash/merge';
+import get from 'lodash/get';
 import { MODULE_PATH_PACKAGES } from '@bundle-stats/utils/lib-esm/webpack';
 import {
   MODULE_CHUNK,
@@ -29,11 +31,11 @@ export const getCustomSort = (sortBy) => (item) => {
   }
 
   if (sortBy === SORT_BY_SIZE) {
-    return get(item, 'runs[0].value', 0);
+    return item?.runs?.[0]?.value || 0;
   }
 
   if (sortBy === SORT_BY_DELTA) {
-    return get(item, 'runs[0].deltaPercentage', 0);
+    return item?.runs?.[0]?.deltaPercentage || 0;
   }
 
   return [!item.changed, item.key];

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

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { uniqBy, map } from 'lodash';
+import uniqBy from 'lodash/uniqBy';
 import {
   MODULE_FILTERS,
   getModuleChunkFilters,
@@ -25,7 +25,7 @@ export const BundleModules = (props) => {
   const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
 
   const chunks = uniqBy(jobs.map((job) => job?.meta?.webpack?.chunks || []).flat(), ({ id }) => id);
-  const chunkIds = map(chunks, 'id');
+  const chunkIds = chunks?.map(({ id }) => id);
 
   const { defaultFilters, allEntriesFilters } = useMemo(
     () => ({

package/src/components/bundle-packages/bundle-packages.utils.js

@@ -1,4 +1,4 @@
-import { get, flatten, uniq } from 'lodash';
+import uniq from 'lodash/uniq';
 import { PACKAGE_FILTERS } from '@bundle-stats/utils';
 
 import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-packages.constants';
@@ -10,7 +10,7 @@ export const getDuplicatePackages = (jobs) => {
     return Object.values(insightsData).flat();
   });
 
-  return uniq(flatten(jobsDuplicatePackages));
+  return uniq(jobsDuplicatePackages?.flat());
 };
 
 export const getRowFilter = (filters) => (item) => {
@@ -31,11 +31,11 @@ export const getCustomSort = (sortId) => (item) => {
   }
 
   if (sortId === SORT_BY_DELTA) {
-    return get(item, 'runs[0].deltaPercentage', 0);
+    return item?.runs?.[0]?.deltaPercentage || 0;
   }
 
   if (sortId === SORT_BY_SIZE) {
-    return get(item, 'runs[0].value', 0);
+    return item?.runs?.[0]?.value || 0;
   }
 
   return [!item.changed, item.key];

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { get } from 'lodash';
-import { formatDistanceToNow } from 'date-fns';
-import { SOURCE_PATH_WEBPACK_STATS, formatDate, formatTime } from '@bundle-stats/utils';
+import get from 'lodash/get';
+import { SOURCE_PATH_WEBPACK_STATS, formatDateTime } from '@bundle-stats/utils';
 
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
@@ -25,10 +24,10 @@ export const JobHeader = (props) => {
       </h1>
       <FlexStack space="xxsmall" className={css.meta}>
         {builtAt && (
-          <FlexStack space="xxxsmall" alignItems="center" inline as="span" title={`${formatDate(builtAt)} ${formatTime(builtAt)}`}>
+          <FlexStack space="xxxsmall" alignItems="center" inline as="span" title={builtAt}>
             <Icon glyph="clock" />
             <span>
-              {formatDistanceToNow(new Date(builtAt), { addSuffix: true })}
+              {formatDateTime({ dateStyle: 'medium', timeStyle: 'medium' }, builtAt)}
             </span>
           </FlexStack>
         )}

package/src/components/metrics-table/metrics-table.jsx

@@ -1,7 +1,8 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { get, isEmpty, sum } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
+import sum from 'lodash/sum';
 import { METRIC_TYPE_FILE_SIZE, getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
 
 import { Table } from '../../ui/table';
@@ -12,8 +13,7 @@ import styles from './metrics-table.module.css';
 
 const METRIC_TYPE_DATA = getGlobalMetricType(null, METRIC_TYPE_FILE_SIZE);
 
-const getRowsRunTotal = (rows, runIndex) =>
-  sum(rows.map((row) => get(row, `runs[${runIndex}].value`, 0)));
+const getRowsRunTotal = (rows, runIndex) => sum(rows.map((row) => row?.runs?.[runIndex]?.value || 0));
 
 const getHeaderLabelCells = (rows) => (run, runIndex, runs) => {
   const isBaseline = runIndex === runs.length - 1;