@bundle-stats/ui 3.2.3-alpha.2 → 3.2.5-alpha.0

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

@@ -11,6 +11,7 @@
 }
 
 .filterInput {
+  border-radius: var(--radius-medium) 0 0 var(--radius-medium);
   flex: 0 0 auto;
   height: 1em;
   cursor: pointer;
@@ -129,11 +130,20 @@
 }
 
 .item {
+  border-radius: 0;
   position: relative;
   flex: 0 0 auto;
   margin-right: -1px;
 }
 
+.item:first-child {
+  border-radius: var(--radius-medium) 0 0 var(--radius-medium);
+}
+
+.item:last-child {
+  border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
+}
+
 .item:hover {
   z-index: var(--layer-low); /* show collapsed border */
 }

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

@@ -24,7 +24,7 @@
 
 .popover {
   padding: var(--space-small) var(--space-large) var(--space-small) var(--space-small);
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-large);
   max-width: 360px;
   outline: none;
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));

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

@@ -13,12 +13,8 @@
   text-align: left;
 }
 
-tr:last-child .cell {
-  border-bottom-width: 1px;
-}
-
 .root thead .cell {
-  border-width: 0 0 2px;
+  border-width: 0 0 1px;
   text-transform: uppercase;
   vertical-align: top;
 }
@@ -44,10 +40,6 @@ tr:last-child .cell {
   text-decoration: underline;
 }
 
-.root tbody tr:nth-child(odd) .cell {
-  background-color: var(--color-highlight);
-}
-
 .root tbody tr:hover .cell {
   background-color: var(--color-highlight-warning);
 }

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

@@ -7,8 +7,7 @@
   position: relative;
   display: inline-block;
   padding: var(--space-xsmall) 0;
-  color: var(--color-text-ultra-light);
-  font-weight: bold;
+  color: var(--color-text-light);
   text-decoration: none;
 }
 

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

@@ -12,7 +12,7 @@
 
 .tooltip {
   padding: var(--space-xxxsmall) var(--space-xxsmall);
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-large);
   background: var(--color-light);
   color: var(--color-text);
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.2.3-alpha.2",
+  "version": "3.2.5-alpha.0",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -37,23 +37,24 @@
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
     "@babel/cli": "7.16.8",
-    "@babel/core": "7.16.7",
+    "@babel/core": "7.16.12",
     "@babel/plugin-proposal-class-properties": "7.16.7",
-    "@babel/preset-env": "7.16.8",
+    "@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.14",
     "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.4.12",
-    "@storybook/addons": "6.4.12",
-    "@storybook/builder-webpack5": "6.4.12",
-    "@storybook/manager-webpack5": "6.4.12",
-    "@storybook/react": "6.4.12",
+    "@storybook/addon-storyshots": "6.4.14",
+    "@storybook/addons": "6.4.14",
+    "@storybook/builder-webpack5": "6.4.14",
+    "@storybook/manager-webpack5": "6.4.14",
+    "@storybook/react": "6.4.14",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "27.4.6",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.3.4",
+    "chromatic": "6.4.1",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
     "core-js": "3.20.2",
@@ -84,11 +85,12 @@
     "react-router-dom": "5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.2.3-alpha.2",
+    "@bundle-stats/utils": "^3.2.5-alpha.0",
     "date-fns": "2.28.0",
+    "modern-css-reset": "1.4.0",
     "query-string": "7.1.0",
     "reakit": "1.3.11",
     "use-query-params": "1.2.3"
   },
-  "gitHead": "3f403264dec8e04b64f94e361a190293a7b976f3"
+  "gitHead": "9e6c922005aec32e13b7140e395449d32ae47328"
 }

package/src/app/app.jsx

@@ -11,6 +11,7 @@ import {
   URLS,
 } from '../constants';
 import { Box } from '../layout/box';
+import { Separator } from '../layout/separator';
 import { Container } from '../ui/container';
 import { DuplicatePackagesWarning } from '../components/duplicate-packages-warning';
 import { Summary } from '../components/summary';
@@ -42,7 +43,7 @@ const Layout = ({ jobs, version, ...props }) => (
   <div className={css.root}>
     <Header className={css.header} jobs={jobs} />
     <main className={css.main} {...props} />
-    <Footer version={version} />
+    <Footer className={css.footer} version={version} />
   </div>
 );
 
@@ -58,8 +59,12 @@ Layout.defaultProps = {
 
 const AppComponent = ({ version, jobs }) => {
   const [bundleStatsState, bundleStatsSetState] = useComponentQueryState(COMPONENT.BUNDLE_ASSETS);
-  const [bundlePackagesState, bundlePackagesSetState] = useComponentQueryState(COMPONENT.BUNDLE_PACKAGES);
-  const [bundleModulesState, bundleModulesSetState] = useComponentQueryState(COMPONENT.BUNDLE_MODULES);
+  const [bundlePackagesState, bundlePackagesSetState] = useComponentQueryState(
+    COMPONENT.BUNDLE_PACKAGES,
+  );
+  const [bundleModulesState, bundleModulesSetState] = useComponentQueryState(
+    COMPONENT.BUNDLE_MODULES,
+  );
 
   if (jobs.length === 0) {
     return (
@@ -178,20 +183,23 @@ const AppComponent = ({ version, jobs }) => {
             exact
             path={URLS.OVERVIEW}
             render={() => (
-              <Stack space="large">
-                {duplicatePackagesInsights && (
-                  <Container>
-                    <DuplicatePackagesWarning
-                      duplicatePackagesCount={duplicatePackagesCount}
-                      showDelta={jobs.length > 1}
-                    />
-                  </Container>
-                )}
+              <Stack space="medium">
                 <Container>
-                  <Stack space="small">
-                    <TotalSizeTypeTitle />
-                    <BundleAssetsTotalsChartBars jobs={jobs} />
+                  <Stack space="medium">
+                    {duplicatePackagesInsights && (
+                      <DuplicatePackagesWarning
+                        duplicatePackagesCount={duplicatePackagesCount}
+                        showDelta={jobs.length > 1}
+                      />
+                    )}
                     <Box outline>
+                      <Box padding="small">
+                        <Stack space="small">
+                          <TotalSizeTypeTitle />
+                          <BundleAssetsTotalsChartBars jobs={jobs} />
+                        </Stack>
+                      </Box>
+                      <Separator />
                       <BundleAssetsTotalsTable jobs={jobs} />
                     </Box>
                   </Stack>

package/src/app/app.module.css

@@ -3,7 +3,10 @@
 }
 
 .root {
-  padding-top: var(--header-height);
+}
+
+.header {
+  border-bottom: 1px solid var(--color-outline);
 }
 
 .empty {
@@ -13,16 +16,12 @@
 }
 
 .summaryContainer {
-  padding-top: var(--space-large);
-  padding-bottom: var(--space-small);
+  padding-top: var(--space-medium);
+  padding-bottom: var(--space-xsmall);
 }
 
 .tabsContainer {
-  border-bottom: 1px solid var(--color-outline);
-}
-
-.tabs {
-  margin-bottom: -1px;
+  background: var(--color-light);
 }
 
 .tabActive {
@@ -34,24 +33,27 @@
 }
 
 .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: 78px;
   }
 
   .header {
-    position: fixed;
+    position: sticky;
     z-index: var(--layer-high);
-    left: 0;
     top: 0;
-    right: 0;
     height: var(--header-height);
     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

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
+import { FlexStack } from '../../layout/flex-stack';
 import { Container } from '../../ui/container';
 import { JobsHeader } from '../../components/jobs-header';
 import { Logo } from '../../ui/logo';
@@ -10,17 +11,21 @@ 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>
+    <FlexStack space="small" className={css.inner}>
       <JobsHeader className={css.jobs} jobs={jobs} />
-    </div>
+      <div className={css.options}>
+        <a
+          href="https://github.com/relative-ci/bundle-stats"
+          target="_blank"
+          rel="noopener noreferrer nofollow"
+          title="View bundle-stats on GitHub"
+        >
+          <Logo className={css.github} kind="github">
+            GitHub
+          </Logo>
+        </a>
+      </div>
+    </FlexStack>
   </Container>
 );
 

package/src/app/header/header.module.css

@@ -1,30 +1,23 @@
 .inner {
-  display: flex;
-  align-items: center;
-}
-
-.branding {
-  padding: var(--space-small);
-  flex: 0 0 auto;
-  color: var(--color-text);
-  display: flex;
   align-items: center;
 }
 
 .jobs {
   flex: 1 1 auto;
+  overflow-x: auto;
 }
 
-.tools {
-  border-left: 1px solid var(--color-outline);
-  padding: var(--space-small);
-  margin: 0 0 0 auto;
-  display: flex;
-  align-items: center;
-  color: var(--color-text-light);
+.options {
+  flex: 0 0 var(--space-large);
+}
+
+.option {
+  display: inline-block;
 }
 
-.toolsGithub {
-  color: inherit;
+.github {
+  display: block;
+  color: var(--color-text-ultra-light);
   width: var(--space-medium);
+  height: var(--space-medium);
 }

package/src/components/bundle-assets/bundle-assets.module.css

@@ -31,6 +31,7 @@
 }
 
 .flag {
+  border-radius: var(--radius-small);
   display: inline-block;
   width: var(--space-xsmall);
   height: var(--space-xsmall);

package/src/components/bundle-packages/bundle-packages.module.css

@@ -13,17 +13,21 @@
 }
 
 .duplicate {
-  margin-right: var(--space-xxxsmall);
+  border-radius: var(--radius-small);
   display: inline-block;
-  width: var(--space-small);
-  height: var(--space-small);
-  font-size: 10px;
+  width: var(--space-xsmall);
+  height: var(--space-xsmall);
+  font-family: var(--font-family);
+  font-size: 8px;
   font-weight: bold;
-  line-height: var(--space-small);
+  background: var(--color-highlight);
+  color: var(--color-text-light);
+  line-height: var(--space-xsmall);
   text-align: center;
   text-transform: uppercase;
   vertical-align: middle;
 
+  margin-right: var(--space-xxxsmall);
   background: var(--color-danger);
   color: var(--color-light);
 }

package/src/components/delta/delta.jsx

@@ -4,19 +4,27 @@ import cx from 'classnames';
 
 import css from './delta.module.css';
 
-export const Delta = ({ className, displayValue, deltaType, inverted }) => {
-  const rootClassName = cx(css.root, className, inverted && css.inverted, css[deltaType]);
-  return <span className={rootClassName}>{displayValue}</span>;
+const propTypes = {
+  className: PropTypes.string,
+  displayValue: PropTypes.string.isRequired,
+  deltaType: PropTypes.string.isRequired,
+  inverted: PropTypes.bool,
 };
 
-Delta.defaultProps = {
+const defaultProps = {
   className: '',
   inverted: false,
 };
 
-Delta.propTypes = {
-  className: PropTypes.string,
-  displayValue: PropTypes.string.isRequired,
-  deltaType: PropTypes.string.isRequired,
-  inverted: PropTypes.bool,
+/**
+ * @param {PropTypes.InferProps<typeof propTypes>} props
+ * @return {React.FunctionComponentElement}
+ */
+export const Delta = (props) => {
+  const { className, displayValue, deltaType, inverted } = props;
+  const rootClassName = cx(css.root, className, inverted && css.inverted, css[deltaType]);
+  return <span className={rootClassName}>{displayValue}</span>;
 };
+
+Delta.defaultProps = defaultProps;
+Delta.propTypes = propTypes;

package/src/components/delta/delta.module.css

@@ -1,6 +1,5 @@
 .root {
   white-space: nowrap;
-  color: var(--color-gray-ultra-light);
 }
 
 .HIGH_NEGATIVE {
@@ -8,7 +7,7 @@
 }
 
 .NEGATIVE {
-  color: var(--color-red-dark);
+  color: var(--color-red);
 }
 
 .LOW_NEGATIVE {
@@ -20,7 +19,7 @@
 }
 
 .POSITIVE {
-  color: var(--color-green-dark);
+  color: var(--color-green);
 }
 
 .HIGH_POSITIVE {
@@ -28,30 +27,38 @@
 }
 
 .inverted {
-  background-color: var(--color-gray-ultra-light);
+  padding: 2px;
+  border-radius: var(--radius-small);
+  background: var(--color-gray-ultra-light);
   color: var(--color-light);
 }
 
 .inverted.HIGH_NEGATIVE {
   background: var(--color-red-dark);
+  color: var(--color-highlight-danger);
 }
 
 .inverted.NEGATIVE {
-  background: var(--color-red-dark);
+  background: var(--color-red);
+  color: var(--color-highlight-danger);
 }
 
 .inverted.LOW_NEGATIVE {
   background: var(--color-red-light);
+  color: var(--color-highlight-danger);
 }
 
 .inverted.LOW_POSITIVE {
   background: var(--color-green-light);
+  color: var(--color-highlight-success);
 }
 
 .inverted.POSITIVE {
-  background: var(--color-green-dark);
+  background: var(--color-green);
+  color: var(--color-highlight-success);
 }
 
 .inverted.HIGH_POSITIVE {
   background: var(--color-green-dark);
+  color: var(--color-highlight-success);
 }

package/src/components/duplicate-packages-warning/duplicate-packages-warning.jsx

@@ -1,7 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { BUNDLE_PACKAGES_DUPLICATE, METRIC_TYPE_NUMERIC, METRIC_TYPES, getMetricRunInfo } from '@bundle-stats/utils';
+import {
+  BUNDLE_PACKAGES_DUPLICATE,
+  METRIC_TYPE_NUMERIC,
+  METRIC_TYPES,
+  getMetricRunInfo,
+} from '@bundle-stats/utils';
 
 import { Alert } from '../../ui/alert';
 import { ComponentLink } from '../component-link';
@@ -32,9 +37,9 @@ export const DuplicatePackagesWarning = (props) => {
         {showDelta && metricRunInfo.delta !== 0 && (
           <Delta
             className={css.titleDelta}
-            inverted
             displayValue={metricRunInfo.displayDelta}
             deltaType={metricRunInfo.deltaType}
+            inverted
           />
         )}
         {` duplicate ${metricRunInfo.value === 1 ? 'package' : 'packages'}.`}

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

@@ -17,26 +17,30 @@ export const JobHeader = (props) => {
   const rootClassName = cx(css.root, className);
 
   return (
-    <Stack className={rootClassName} space="xxsmall">
+    <Stack className={rootClassName} space="xxxsmall">
       <h1 className={css.title}>
         <span>{`#${job.internalBuildNumber}`}</span>
         {tag && <span className={css.tag}>{tag}</span>}
       </h1>
       <FlexStack className={css.meta} space="xxsmall">
         {builtAt && (
-          <span className={css.metaItem} title={`${formatDate(builtAt)} ${formatTime(builtAt)}`}>
+          <FlexStack
+            className={css.metaItem}
+            title={`${formatDate(builtAt)} ${formatTime(builtAt)}`}
+            space="xxxsmall"
+          >
             <Icon glyph="clock" className={css.metaIcon} />
             <span className={css.metaLabel}>
               {formatDistanceToNow(new Date(builtAt), { addSuffix: true })}
             </span>
-          </span>
+          </FlexStack>
         )}
 
         {hash && (
-          <span className={css.metaItem} title="Webpack bundle hash">
+          <FlexStack span className={css.metaItem} title="Webpack bundle hash" space="xxxsmall">
             <Icon glyph="commit" className={css.metaIcon} />
             <span className={css.metaLabel}>{hash}</span>
-          </span>
+          </FlexStack>
         )}
 
         <div className={css.content}>{children}</div>

package/src/components/job-header/job-header.module.css

@@ -1,36 +1,32 @@
 .title {
-  line-height: 1;
-  font-weight: bold;
+  font-size: var(--size-xlarge);
   vertical-align: top;
 }
 
 .tag {
   padding: var(--space-xxxsmall);
   margin-left: var(--space-xxxsmall);
-  background-color: var(--color-highlight);
+  background: var(--color-highlight);
   color: var(--color-text-light);
   display: inline-block;
-  font-size: 9px;
+  font-size: var(--size-xsmall);
   line-height: var(--space-xxsmall);
   font-weight: normal;
   vertical-align: top;
 }
 
-.meta {
-  color: var(--color-text-light);
-}
-
 .metaItem {
   display: inline-flex;
   align-items: center;
+  white-space: nowrap;
 }
 
 .metaIcon {
   width: var(--space-small);
   height: var(--space-small);
-  margin-right: var(--space-xxxsmall);
+  color: var(--color-text-ultra-light);
 }
 
 .metaLabel {
-  line-height: var(--space-small);
+  color: var(--color-text-light);
 }

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

@@ -12,7 +12,7 @@ export const JobsHeader = (props) => {
   const rootClassName = cx(css.root, className);
 
   return (
-    <FlexStack className={rootClassName} space="none">
+    <FlexStack className={rootClassName} space="small">
       {jobs?.map((job, index) => (
         <JobHeader
           key={job.internalBuildNumber || index}

package/src/components/jobs-header/jobs-header.module.css

@@ -1,11 +1,8 @@
 .root {
   align-items: stretch;
-  flex-wrap: wrap;
   padding: var(--space-small) 0;
 }
 
 .item {
-  flex: 0 0 auto;
-  padding: 0 var(--space-medium);
-  border-left: 1px solid var(--color-outline);
+  flex: 0 1 auto;
 }

package/src/components/metric/metric.jsx

@@ -7,7 +7,7 @@ import styles from './metric.module.css';
 // Separate value and unit
 const EXTRACT_VALUE_UNIT_PATTERN = /([\d|.|,| ]*)(\w*|%)$/;
 
-export const Metric = ({ className, value, formatter, inline, anchored, children, enhanced }) => {
+export const Metric = ({ className, value, formatter, anchored, children, enhanced }) => {
   const formattedValue = formatter(value);
 
   // eslint-disable-next-line no-unused-vars
@@ -16,12 +16,7 @@ export const Metric = ({ className, value, formatter, inline, anchored, children
       ? formattedValue.match(EXTRACT_VALUE_UNIT_PATTERN)
       : [null, formattedValue, null];
 
-  const rootClassName = cx(
-    className,
-    styles.root,
-    inline && styles.inline,
-    anchored && styles.anchored,
-  );
+  const rootClassName = cx(className, styles.root, anchored && styles.anchored);
 
   return (
     <span className={rootClassName}>
@@ -38,7 +33,6 @@ Metric.defaultProps = {
   className: '',
   anchored: false,
   enhanced: false,
-  inline: false,
   value: 0,
   children: [],
   formatter: (val) => val,
@@ -47,7 +41,6 @@ Metric.defaultProps = {
 Metric.propTypes = {
   className: PropTypes.string,
   enhanced: PropTypes.bool,
-  inline: PropTypes.bool,
   anchored: PropTypes.bool,
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   formatter: PropTypes.func,