@bundle-stats/ui 3.2.7-beta.3 → 3.2.9-beta.1

package/lib-esm/ui/hover-card/hover-card.module.css

@@ -8,45 +8,22 @@
   text-decoration: none;
 }
 
-a.anchor,
-buton.anchor {
-  cursor: pointer;
+.anchor:hover {
+  color: var(--color-primary);
 }
 
-a.anchor:hover,
-button.anchor:hover {
-  color: var(--color-primary);
-  text-decoration: underline;
+.anchor:focus {
+  outline: 0;
 }
 
 .hoverCard {
-  padding: var(--space-xsmall) var(--space-large) var(--space-xsmall) var(--space-small);
+  padding: var(--space-xsmall) var(--space-small);
   border-radius: var(--radius-medium);
-  max-width: 320px;
+  width: calc(100vw - 2 * var(--space-small));
+  max-width: 360px;
   outline: none;
   filter: drop-shadow(0 0 var(--space-xxsmall) var(--color-shadow));
   will-change: filter;
   background: var(--color-light);
   font-size: var(--size-small);
 }
-
-.closeBtn {
-  position: absolute;
-  right: var(--space-xxxsmall);
-  top: var(--space-xxxsmall);
-  width: var(--space-large);
-  height: var(--space-large);
-  padding: var(--space-xxsmall);
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--color-text-ultra-light);
-  transition: var(--transition-out);
-}
-
-.closeBtn:hover,
-.closeBtn:active,
-.closeBtn:focus {
-  color: var(--color-text-light);
-  transition: var(--transition-in);
-}

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

@@ -1,67 +1,7 @@
-function _extends() { _extends = Object.assign || 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 css from './table.module.css';
-
-const THead = props => /*#__PURE__*/React.createElement("thead", props);
-
-const TBody = props => /*#__PURE__*/React.createElement("tbody", props);
-
-const Tr = props => {
-  const {
-    className,
-    ...restProps
-  } = props;
-  return /*#__PURE__*/React.createElement("tr", _extends({
-    className: cx(css.row, className)
-  }, restProps));
-};
-
-Tr.defaultProps = {
-  className: ''
-};
-Tr.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string
-};
-
-const Th = props => {
-  const {
-    className,
-    ...restProps
-  } = props;
-  return /*#__PURE__*/React.createElement("th", _extends({
-    className: cx(css.cell, className)
-  }, restProps));
-};
-
-Th.defaultProps = {
-  className: ''
-};
-Th.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string
-};
-
-const Td = props => {
-  const {
-    className,
-    ...restProps
-  } = props;
-  return /*#__PURE__*/React.createElement("td", _extends({
-    className: cx(css.cell, className)
-  }, restProps));
-};
-
-Td.defaultProps = {
-  className: ''
-};
-Td.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string
-};
 export const Table = _ref => {
   let {
     className,
@@ -82,11 +22,11 @@ export const Table = _ref => {
     className: rootClassName
   }, children);
 };
-Table.THead = THead;
-Table.TBody = TBody;
-Table.Th = Th;
-Table.Tr = Tr;
-Table.Td = Td;
+Table.THead = 'thead';
+Table.TBody = 'tbody';
+Table.Tr = 'tr';
+Table.Th = 'th';
+Table.Td = 'td';
 Table.defaultProps = {
   className: '',
   emptyMessage: 'No entries found.',

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

@@ -4,48 +4,51 @@
   border-spacing: 0;
   empty-cells: show;
   background: var(--color-background);
+  text-align: left;
 }
 
-.cell {
+.root th,
+.root td {
   border: 1px solid var(--color-outline);
   border-width: 1px 0 0;
-  padding: var(--space-small) var(--space-small);
-  text-align: left;
+  padding: var(--space-small);
 }
 
-.root thead .cell {
+.root thead th {
   border-width: 0 0 1px;
   text-transform: uppercase;
   vertical-align: top;
   background: var(--color-highlight);
 }
 
-.root thead .cell:empty {
+.root thead th:empty {
   display: none;
 }
 
-.root tbody .cell {
+.root tbody th {
   font-weight: normal;
 }
 
-.root tbody tr:first-child .cell {
+.root tbody tr:first-child td,
+.root tbody tr:first-child th {
   border-top: 0;
 }
 
-.root tbody .cell a {
+.root tbody td a {
   color: inherit;
   text-decoration: none;
 }
 
-.root tbody .cell a:hover,
-.root tbody .cell a:focus,
-.root tbody .cell a:active
+.root tbody td a:hover,
+.root tbody td a:focus,
+.root tbody td a:active
 {
   color: var(--color-primary);
   text-decoration: underline;
 }
 
-.root tbody tr:hover .cell {
+.root tbody tr:hover th,
+.root tbody tr:hover td {
   background-color: var(--color-highlight-warning);
 }
 
@@ -64,21 +67,21 @@
   border-radius: var(--table-radius);
 }
 
-.outline thead tr:first-child .cell:first-child,
-.outline tbody:first-child tr:first-child .cell:first-child {
+.outline thead:first-child tr:first-child th:first-child,
+.outline tbody:first-child tr:first-child td:first-child {
   border-top-left-radius: var(--table-radius);
 }
 
-.outline thead tr:first-child .cell:last-child,
-.outline tbody:first-child tr:first-child .cell:last-child {
+.outline thead tr:first-child th:last-child,
+.outline tbody:first-child tr:first-child td:last-child {
   border-top-right-radius: var(--table-radius);
 }
 
-.outline tbody:last-child tr:last-child .cell:first-child {
+.outline tbody:last-child tr:last-child td:first-child {
   border-bottom-left-radius: var(--table-radius);
 }
 
-.outline tbody:last-child tr:last-child .cell:last-child {
+.outline tbody:last-child tr:last-child td:last-child {
   border-bottom-right-radius: var(--table-radius);
 }
 
@@ -87,7 +90,8 @@
 }
 
 /* compact variation */
-.compact .cell {
+.compact td,
+.compact th {
   padding-top: var(--space-xsmall);
   padding-bottom: var(--space-xsmall);
 }

package/lib-esm/ui/table/table.stories.js

@@ -46,7 +46,7 @@ stories.add('with custom content and attributes', () => /*#__PURE__*/React.creat
   style: {
     textDecoration: 'underline'
   }
-}, "Col C(undefiner)"))), /*#__PURE__*/React.createElement(TBody, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, /*#__PURE__*/React.createElement("strong", null, "row 1")), /*#__PURE__*/React.createElement(Td, {
+}, "Col C(underline)"))), /*#__PURE__*/React.createElement(TBody, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, /*#__PURE__*/React.createElement("strong", null, "row 1")), /*#__PURE__*/React.createElement(Td, {
   style: {
     textAlign: 'right'
   }

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.2.7-beta.3",
+  "version": "3.2.9-beta.1",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -85,12 +85,12 @@
     "react-router-dom": "5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.2.7-beta.3",
+    "@bundle-stats/utils": "^3.2.9-beta.1",
     "ariakit": "2.0.0-alpha.19",
     "date-fns": "2.28.0",
     "modern-css-reset": "1.4.0",
     "query-string": "7.1.1",
     "use-query-params": "1.2.3"
   },
-  "gitHead": "23478e08f6882f7c20f373f5bb9bc3beaaea4ea7"
+  "gitHead": "a441f0e13edd57a72ae69a7f847483e38b072226"
 }

package/src/app/app.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { HashRouter, NavLink, Route, Switch, useLocation } from 'react-router-dom';
 import { COMPONENT } from '@bundle-stats/utils';
@@ -56,16 +56,110 @@ Layout.defaultProps = {
   version: null,
 };
 
-const AppComponent = ({ version, jobs }) => {
+const JobsContext = React.createContext({ jobs: [] });
+const JobsProvider = ({ jobs, ...restProps }) => {
+  const value = useMemo(() => ({ jobs }), [jobs]);
+  return <JobsContext.Provider value={value} {...restProps} />;
+};
+
+JobsProvider.propTypes = {
+  jobs: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+
+const OverviewContent = () => {
+  const { jobs } = useContext(JobsContext);
+  const { duplicatePackagesCount } = jobs[0].summary.webpack;
+  const duplicatePackagesInsights = Boolean(
+    duplicatePackagesCount.current || duplicatePackagesCount.baseline,
+  );
+
+  return (
+    <Stack space="medium">
+      {duplicatePackagesInsights && (
+        <Container>
+          <DuplicatePackagesWarning
+            duplicatePackagesCount={duplicatePackagesCount}
+            showDelta={jobs.length > 1}
+          />
+        </Container>
+      )}
+      <Container>
+        <Stack space="small">
+          <TotalSizeTypeTitle />
+          <BundleAssetsTotalsChartBars jobs={jobs} />
+          <BundleAssetsTotalsTable jobs={jobs} outline />
+        </Stack>
+      </Container>
+    </Stack>
+  );
+};
+
+const AssetsContent = () => {
   const [bundleStatsState, bundleStatsSetState] = useComponentQueryState(COMPONENT.BUNDLE_ASSETS);
-  const [bundlePackagesState, bundlePackagesSetState] = useComponentQueryState(
-    COMPONENT.BUNDLE_PACKAGES,
+  const { jobs } = useContext(JobsContext);
+
+  return (
+    <Container>
+      <Stack space="medium">
+        <Summary
+          keys={METRICS_WEBPACK_ASSETS}
+          data={jobs?.[0]?.summary}
+          showSummaryItemDelta={jobs?.length !== 1}
+        />
+        <Box outline>
+          <BundleAssets jobs={jobs} setState={bundleStatsSetState} {...bundleStatsState} />
+        </Box>
+      </Stack>
+    </Container>
   );
+};
+
+const ModulesContent = () => {
   const [bundleModulesState, bundleModulesSetState] = useComponentQueryState(
     COMPONENT.BUNDLE_MODULES,
   );
+  const { jobs } = useContext(JobsContext);
+
+  return (
+    <Container>
+      <Stack space="medium">
+        <Summary
+          keys={METRICS_WEBPACK_MODULES}
+          data={jobs?.[0]?.summary}
+          showSummaryItemDelta={jobs?.length !== 1}
+        />
+        <Box outline>
+          <BundleModules jobs={jobs} setState={bundleModulesSetState} {...bundleModulesState} />
+        </Box>
+      </Stack>
+    </Container>
+  );
+};
+
+const PackagesContent = () => {
+  const [bundlePackagesState, bundlePackagesSetState] = useComponentQueryState(
+    COMPONENT.BUNDLE_PACKAGES,
+  );
+  const { jobs } = useContext(JobsContext);
 
-  if (jobs.length === 0) {
+  return (
+    <Container>
+      <Stack space="medium">
+        <Summary
+          keys={METRICS_WEBPACK_PACKAGES}
+          data={jobs?.[0]?.summary}
+          showSummaryItemDelta={jobs?.length !== 1}
+        />
+        <Box outline>
+          <BundlePackages jobs={jobs} {...bundlePackagesState} setState={bundlePackagesSetState} />
+        </Box>
+      </Stack>
+    </Container>
+  );
+};
+
+const AppComponent = ({ version, jobs }) => {
+  if (jobs?.length === 0) {
     return (
       <Layout version={version}>
         <Container>
@@ -75,137 +169,45 @@ const AppComponent = ({ version, jobs }) => {
     );
   }
 
-  const { duplicatePackagesCount } = jobs[0].summary.webpack;
-  const duplicatePackagesInsights = Boolean(
-    duplicatePackagesCount.current || duplicatePackagesCount.baseline,
-  );
-
   return (
-    <Layout jobs={jobs} version={version}>
-      <Container className={css.summaryContainer}>
-        <Summary
-          size="large"
-          keys={METRICS_WEBPACK_GENERAL}
-          data={jobs[0].summary}
-          showSummaryItemDelta={jobs.length !== 1}
-        />
-      </Container>
+    <JobsProvider jobs={jobs}>
+      <Layout jobs={jobs} version={version}>
+        <Container className={css.summaryContainer}>
+          <Summary
+            size="large"
+            keys={METRICS_WEBPACK_GENERAL}
+            data={jobs[0].summary}
+            showSummaryItemDelta={jobs.length !== 1}
+          />
+        </Container>
 
-      <Container className={css.tabsContainer}>
-        <Tabs className={css.tabs}>
-          <NavLink exact to={URLS.OVERVIEW} activeClassName={css.tabActive}>
-            {I18N.OVERVIEW}
-          </NavLink>
-          <NavLink exact to={URLS.ASSETS} activeClassName={css.tabActive}>
-            {I18N.ASSETS}
-          </NavLink>
-          <NavLink exact to={URLS.MODULES} activeClassName={css.tabActive}>
-            {I18N.MODULES}
-          </NavLink>
-          <NavLink exact to={URLS.PACKAGES} activeClassName={css.tabActive}>
-            {I18N.PACKAGES}
-          </NavLink>
-        </Tabs>
-      </Container>
+        <Container className={css.tabsContainer}>
+          <Tabs className={css.tabs}>
+            <NavLink exact to={URLS.OVERVIEW} activeClassName={css.tabActive}>
+              {I18N.OVERVIEW}
+            </NavLink>
+            <NavLink exact to={URLS.ASSETS} activeClassName={css.tabActive}>
+              {I18N.ASSETS}
+            </NavLink>
+            <NavLink exact to={URLS.MODULES} activeClassName={css.tabActive}>
+              {I18N.MODULES}
+            </NavLink>
+            <NavLink exact to={URLS.PACKAGES} activeClassName={css.tabActive}>
+              {I18N.PACKAGES}
+            </NavLink>
+          </Tabs>
+        </Container>
 
-      <div className={css.tabsContent}>
-        <Switch>
-          <Route
-            exact
-            path={URLS.ASSETS}
-            render={({ location }) => (
-              <Container>
-                <Stack space="medium">
-                  <Summary
-                    keys={METRICS_WEBPACK_ASSETS}
-                    data={jobs[0].summary}
-                    showSummaryItemDelta={jobs.length !== 1}
-                  />
-                  <Box outline>
-                    <BundleAssets
-                      jobs={jobs}
-                      setState={bundleStatsSetState}
-                      {...bundleStatsState}
-                      key={`${location.pathname}_${location.search}`}
-                    />
-                  </Box>
-                </Stack>
-              </Container>
-            )}
-          />
-          <Route
-            exact
-            path={URLS.MODULES}
-            render={() => (
-              <Container>
-                <Stack space="medium">
-                  <Summary
-                    keys={METRICS_WEBPACK_MODULES}
-                    data={jobs[0].summary}
-                    showSummaryItemDelta={jobs.length !== 1}
-                  />
-                  <Box outline>
-                    <BundleModules
-                      jobs={jobs}
-                      setState={bundleModulesSetState}
-                      {...bundleModulesState}
-                    />
-                  </Box>
-                </Stack>
-              </Container>
-            )}
-          />
-          <Route
-            exact
-            path={URLS.PACKAGES}
-            render={({ location }) => (
-              <Container>
-                <Stack space="medium">
-                  <Summary
-                    keys={METRICS_WEBPACK_PACKAGES}
-                    data={jobs[0].summary}
-                    showSummaryItemDelta={jobs.length !== 1}
-                  />
-                  <Box outline>
-                    <BundlePackages
-                      jobs={jobs}
-                      {...bundlePackagesState}
-                      setState={bundlePackagesSetState}
-                      key={`${location.pathname}_${location.search}`}
-                    />
-                  </Box>
-                </Stack>
-              </Container>
-            )}
-          />
-          <Route
-            exact
-            path={URLS.OVERVIEW}
-            render={() => (
-              <Stack space="large">
-                {duplicatePackagesInsights && (
-                  <Container>
-                    <DuplicatePackagesWarning
-                      duplicatePackagesCount={duplicatePackagesCount}
-                      showDelta={jobs.length > 1}
-                    />
-                  </Container>
-                )}
-                <Container>
-                  <Stack space="small">
-                    <TotalSizeTypeTitle />
-                    <BundleAssetsTotalsChartBars jobs={jobs} />
-                    <Box outline>
-                      <BundleAssetsTotalsTable jobs={jobs} />
-                    </Box>
-                  </Stack>
-                </Container>
-              </Stack>
-            )}
-          />
-        </Switch>
-      </div>
-    </Layout>
+        <div className={css.tabsContent}>
+          <Switch>
+            <Route exact path={URLS.ASSETS} component={AssetsContent} />
+            <Route exact path={URLS.MODULES} component={ModulesContent} />
+            <Route exact path={URLS.PACKAGES} component={PackagesContent} />
+            <Route exact path={URLS.OVERVIEW} component={OverviewContent} />
+          </Switch>
+        </div>
+      </Layout>
+    </JobsProvider>
   );
 };
 

package/src/app/app.module.css

@@ -13,7 +13,7 @@
 }
 
 .summaryContainer {
-  padding-top: var(--space-large);
+  padding-top: var(--space-medium);
   padding-bottom: var(--space-small);
 }
 
@@ -35,8 +35,8 @@
 }
 
 .tabsContent {
-  padding-top: var(--space-large);
-  padding-bottom: var(--space-large);
+  padding-top: var(--space-medium);
+  padding-bottom: var(--space-medium);
   min-height: 480px;
 }
 

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

@@ -1,4 +1,5 @@
 .fileName {
+  max-width: 100%;
   padding: 2px;
   background: var(--color-highlight-warning);
 }