@bundle-stats/ui 3.3.0-alpha.1 → 3.4.0-alpha.1

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

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Tooltip as UITooltip, TooltipArrow as UITooltipArrow, TooltipReference as UITooltipReference, useTooltipState } from 'reakit/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 {
@@ -15,22 +15,23 @@ export const Tooltip = props => {
     darkMode,
     ...restProps
   } = props;
-  const rootClassName = cx(css.root, className);
-  const tooltipProps = useTooltipState({
-    baseId: process.env.NODE_ENV === 'test' && 'id-test',
+  const tooltip = useTooltipState({
     placement: 'top'
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UITooltipReference, _extends({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UITooltipAnchor, _extends({
     as: Component,
-    className: rootClassName
+    className: cx(css.root, className),
+    state: tooltip
   }, ref ? {
     ref
-  } : {}, restProps, tooltipProps), children), title && /*#__PURE__*/React.createElement(UITooltip, _extends({}, tooltipProps, {
+  } : {}, restProps), children), title && /*#__PURE__*/React.createElement(UITooltip, {
+    state: tooltip,
     className: cx(css.tooltip, darkMode && css.tooltipDarkMode)
-  }), /*#__PURE__*/React.createElement(UITooltipArrow, _extends({}, tooltipProps, {
+  }, /*#__PURE__*/React.createElement(UITooltipArrow, {
+    state: tooltip,
     className: css.arrow,
     size: 12
-  })), title));
+  }), title));
 };
 Tooltip.defaultProps = {
   className: '',

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

@@ -12,10 +12,11 @@
 
 .tooltip {
   padding: var(--space-xxxsmall) var(--space-xxsmall);
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-medium);
   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.3.0-alpha.1",
+  "version": "3.4.0-alpha.1",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -15,7 +15,7 @@
     "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",
     "start": "cross-env NODE_ENV=development start-storybook -c ./build/storybook -p 8080",
-    "test": "npm run test:unit && npm run test:storyshots",
+    "test": "npm run test:unit",
     "test:unit": "jest src --passWithNoTests",
     "test:storyshots": "jest build/storybook ",
     "chromatic": "chromatic --exit-zero-on-changes"
@@ -36,38 +36,39 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/cli": "7.16.0",
-    "@babel/core": "7.16.0",
-    "@babel/plugin-proposal-class-properties": "7.16.0",
-    "@babel/preset-env": "7.16.4",
-    "@babel/preset-react": "7.16.0",
+    "@babel/cli": "7.17.6",
+    "@babel/core": "7.17.5",
+    "@babel/plugin-proposal-class-properties": "7.16.7",
+    "@babel/preset-env": "7.16.11",
+    "@babel/preset-react": "7.16.7",
     "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
+    "@storybook/addon-essentials": "6.4.19",
     "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.4.8",
-    "@storybook/addons": "6.4.8",
-    "@storybook/builder-webpack5": "6.4.8",
-    "@storybook/manager-webpack5": "6.4.8",
-    "@storybook/react": "6.4.8",
+    "@storybook/addon-storyshots": "6.4.19",
+    "@storybook/addons": "6.4.19",
+    "@storybook/builder-webpack5": "6.4.19",
+    "@storybook/manager-webpack5": "6.4.19",
+    "@storybook/react": "6.4.19",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "27.4.2",
+    "babel-jest": "27.5.1",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.2.0",
+    "chromatic": "6.5.1",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
-    "core-js": "3.19.3",
+    "core-js": "3.20.2",
     "cross-env": "7.0.3",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
     "hex-rgb": "5.0.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "27.4.3",
+    "jest": "27.5.1",
     "jest-date-mock": "1.0.8",
     "lodash": "4.17.21",
-    "postcss": "8.4.4",
-    "prop-types": "15.7.2",
+    "postcss": "8.4.7",
+    "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-router-dom": "5.3.0",
@@ -75,20 +76,21 @@
     "rimraf": "3.0.2"
   },
   "peerDependencies": {
-    "classnames": "^2.2.6",
-    "core-js": "^3.16.2",
-    "lodash": "^4.17.21",
-    "prop-types": "^15.7.2",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-router-dom": "^5.3.0"
+    "classnames": "2.2.6",
+    "core-js": "3.20.2",
+    "lodash": "4.17.21",
+    "prop-types": "15.7.2",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-router-dom": "5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.3.0-alpha.1",
-    "date-fns": "^2.6.0",
-    "query-string": "^7.0.0",
-    "reakit": "^1.3.6",
-    "use-query-params": "^1.2.2"
+    "@bundle-stats/utils": "^3.4.0-alpha.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": "b510975b373ee38b66899a990c7341d1a29a69e2"
+  "gitHead": "a7ba8010b047028c4e56e407719616fde7d8ea88"
 }

package/src/app/app.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } 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';
@@ -57,16 +57,116 @@ 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>
+          <Stack space="small">
+            <DuplicatePackagesWarning
+              duplicatePackagesCount={duplicatePackagesCount}
+              showDelta={jobs.length > 1}
+            />
+            <BudgetInsights source="webpack" budgets={jobs[0].insights?.webpack?.budgets} />
+          </Stack>
+        </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}
+          budgets={jobs[0].insights?.webpack?.budgets}
+          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}
+          budgets={jobs[0].insights?.webpack?.budgets}
+          showSummaryItemDelta={jobs?.length !== 1}
+        />
+        <Box outline>
+          <BundleModules jobs={jobs} setState={bundleModulesSetState} {...bundleModulesState} />
+        </Box>
+      </Stack>
+    </Container>
+  );
+};
 
-  if (jobs.length === 0) {
+const PackagesContent = () => {
+  const [bundlePackagesState, bundlePackagesSetState] = useComponentQueryState(
+    COMPONENT.BUNDLE_PACKAGES,
+  );
+  const { jobs } = useContext(JobsContext);
+
+  return (
+    <Container>
+      <Stack space="medium">
+        <Summary
+          keys={METRICS_WEBPACK_PACKAGES}
+          data={jobs?.[0]?.summary}
+          budgets={jobs[0].insights?.webpack?.budgets}
+          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>
@@ -76,148 +176,45 @@ const AppComponent = ({ version, jobs }) => {
     );
   }
 
-  const { summary, insights } = useMemo(() => jobs[0], jobs);
-
-  const { duplicatePackagesCount } = 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={summary}
-          budgets={insights?.webpack?.budgets}
-          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>
-
-      <div className={css.tabsContent}>
-        <Switch>
-          <Route
-            exact
-            path={URLS.ASSETS}
-            render={({ location }) => (
-              <Container>
-                <Stack space="medium">
-                  <Summary
-                    keys={METRICS_WEBPACK_ASSETS}
-                    data={summary}
-                    budgets={insights?.webpack?.budgets}
-                    showSummaryItemDelta={jobs.length !== 1}
-                  />
-                  <Box outline>
-                    <BundleAssets
-                      jobs={jobs}
-                      setState={bundleStatsSetState}
-                      {...bundleStatsState}
-                      key={`${location.pathname}_${location.search}`}
-                    />
-                  </Box>
-                </Stack>
-              </Container>
-            )}
+    <JobsProvider jobs={jobs}>
+      <Layout jobs={jobs} version={version}>
+        <Container className={css.summaryContainer}>
+          <Summary
+            size="large"
+            keys={METRICS_WEBPACK_GENERAL}
+            data={jobs[0].summary}
+            budgets={jobs[0].insights?.webpack?.budgets}
+            showSummaryItemDelta={jobs.length !== 1}
           />
-          <Route
-            exact
-            path={URLS.MODULES}
-            render={() => (
-              <Container>
-                <Stack space="medium">
-                  <Summary
-                    keys={METRICS_WEBPACK_MODULES}
-                    data={summary}
-                    budgets={insights?.webpack?.budgets}
-                    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={summary}
-                    budgets={insights?.webpack?.budgets}
-                    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>
-                )}
-                {insights?.webpack?.budgets && (
-                  <Container>
-                    <BudgetInsights source="webpack" budgets={insights.webpack.budgets} />
-                  </Container>
-                )}
-                <Container>
-                  <Stack space="small">
-                    <TotalSizeTypeTitle />
-                    <BundleAssetsTotalsChartBars jobs={jobs} />
-                    <Box outline>
-                      <BundleAssetsTotalsTable jobs={jobs} />
-                    </Box>
-                  </Stack>
-                </Container>
-              </Stack>
-            )}
-          />
-        </Switch>
-      </div>
-    </Layout>
+        </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} 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,12 +13,13 @@
 }
 
 .summaryContainer {
-  padding-top: var(--space-large);
+  padding-top: var(--space-medium);
   padding-bottom: var(--space-small);
 }
 
 .tabsContainer {
   border-bottom: 1px solid var(--color-outline);
+  background: var(--color-light);
 }
 
 .tabs {
@@ -34,14 +35,14 @@
 }
 
 .tabsContent {
-  padding-top: var(--space-large);
-  padding-bottom: var(--space-large);
+  padding-top: var(--space-medium);
+  padding-bottom: var(--space-medium);
   min-height: 480px;
 }
 
 @media (min-width: 600px) {
   :root {
-    --header-height: 80px;
+    --header-height: 72px;
   }
 
   .header {
@@ -54,4 +55,10 @@
     background-color: var(--color-background);
     border-bottom: 1px solid var(--color-outline);
   }
+
+  .tabsContainer {
+    position: sticky;
+    top: var(--header-height);
+    z-index: 100;
+  }
 }

package/src/app/header/header.jsx

@@ -4,21 +4,11 @@ import cx from 'classnames';
 
 import { Container } from '../../ui/container';
 import { JobsHeader } from '../../components/jobs-header';
-import { Logo } from '../../ui/logo';
-
 import css from './header.module.css';
 
 export const Header = ({ className, jobs }) => (
   <Container as="header" className={cx(css.root, className)}>
     <div className={css.inner}>
-      <a
-        className={css.branding}
-        href="https://github.com/relative-ci/bundle-stats"
-        target="_blank"
-        rel="noopener noreferrer nofollow"
-      >
-        <Logo className={css.brandingLogo}>BundleStats</Logo>
-      </a>
       <JobsHeader className={css.jobs} jobs={jobs} />
     </div>
   </Container>

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

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