@bundle-stats/ui 3.2.5-alpha.0 → 3.2.5-alpha.21

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

@@ -13,8 +13,12 @@
   text-align: left;
 }
 
+tr:last-child .cell {
+  border-bottom-width: 1px;
+}
+
 .root thead .cell {
-  border-width: 0 0 1px;
+  border-width: 0 0 2px;
   text-transform: uppercase;
   vertical-align: top;
 }
@@ -40,6 +44,10 @@
   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,7 +7,8 @@
   position: relative;
   display: inline-block;
   padding: var(--space-xsmall) 0;
-  color: var(--color-text-light);
+  color: var(--color-text-ultra-light);
+  font-weight: bold;
   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-large);
+  border-radius: var(--radius-small);
   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.5-alpha.0",
+  "version": "3.2.5-alpha.21",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -85,12 +85,11 @@
     "react-router-dom": "5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.2.5-alpha.0",
+    "@bundle-stats/utils": "^3.2.5-alpha.21",
     "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": "9e6c922005aec32e13b7140e395449d32ae47328"
+  "gitHead": "d9f02fd380c75a3f804f70a91106be3eb7e168f6"
 }

package/src/app/app.jsx

@@ -11,7 +11,6 @@ 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';
@@ -43,7 +42,7 @@ const Layout = ({ jobs, version, ...props }) => (
   <div className={css.root}>
     <Header className={css.header} jobs={jobs} />
     <main className={css.main} {...props} />
-    <Footer className={css.footer} version={version} />
+    <Footer version={version} />
   </div>
 );
 
@@ -59,12 +58,8 @@ 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 (
@@ -183,23 +178,20 @@ const AppComponent = ({ version, jobs }) => {
             exact
             path={URLS.OVERVIEW}
             render={() => (
-              <Stack space="medium">
+              <Stack space="large">
+                {duplicatePackagesInsights && (
+                  <Container>
+                    <DuplicatePackagesWarning
+                      duplicatePackagesCount={duplicatePackagesCount}
+                      showDelta={jobs.length > 1}
+                    />
+                  </Container>
+                )}
                 <Container>
-                  <Stack space="medium">
-                    {duplicatePackagesInsights && (
-                      <DuplicatePackagesWarning
-                        duplicatePackagesCount={duplicatePackagesCount}
-                        showDelta={jobs.length > 1}
-                      />
-                    )}
+                  <Stack space="small">
+                    <TotalSizeTypeTitle />
+                    <BundleAssetsTotalsChartBars jobs={jobs} />
                     <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,10 +3,7 @@
 }
 
 .root {
-}
-
-.header {
-  border-bottom: 1px solid var(--color-outline);
+  padding-top: var(--header-height);
 }
 
 .empty {
@@ -16,12 +13,16 @@
 }
 
 .summaryContainer {
-  padding-top: var(--space-medium);
-  padding-bottom: var(--space-xsmall);
+  padding-top: var(--space-large);
+  padding-bottom: var(--space-small);
 }
 
 .tabsContainer {
-  background: var(--color-light);
+  border-bottom: 1px solid var(--color-outline);
+}
+
+.tabs {
+  margin-bottom: -1px;
 }
 
 .tabActive {
@@ -33,27 +34,24 @@
 }
 
 .tabsContent {
-  padding-top: var(--space-medium);
-  padding-bottom: var(--space-medium);
+  padding-top: var(--space-large);
+  padding-bottom: var(--space-large);
   min-height: 480px;
 }
 
 @media (min-width: 600px) {
   :root {
-    --header-height: 78px;
+    --header-height: 80px;
   }
 
   .header {
-    position: sticky;
+    position: fixed;
     z-index: var(--layer-high);
+    left: 0;
     top: 0;
+    right: 0;
     height: var(--header-height);
     background-color: var(--color-background);
-  }
-
-  .tabsContainer {
-    position: sticky;
-    top: var(--header-height);
-    z-index: 100;
+    border-bottom: 1px solid var(--color-outline);
   }
 }

package/src/app/header/header.jsx

@@ -2,7 +2,6 @@ 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';
@@ -11,21 +10,17 @@ import css from './header.module.css';
 
 export const Header = ({ className, jobs }) => (
   <Container as="header" className={cx(css.root, className)}>
-    <FlexStack space="small" className={css.inner}>
+    <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 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>
+    </div>
   </Container>
 );
 

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

@@ -1,23 +1,30 @@
 .inner {
+  display: flex;
   align-items: center;
 }
 
-.jobs {
-  flex: 1 1 auto;
-  overflow-x: auto;
+.branding {
+  padding: var(--space-small);
+  flex: 0 0 auto;
+  color: var(--color-text);
+  display: flex;
+  align-items: center;
 }
 
-.options {
-  flex: 0 0 var(--space-large);
+.jobs {
+  flex: 1 1 auto;
 }
 
-.option {
-  display: inline-block;
+.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);
 }
 
-.github {
-  display: block;
-  color: var(--color-text-ultra-light);
+.toolsGithub {
+  color: inherit;
   width: var(--space-medium);
-  height: var(--space-medium);
 }

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

@@ -31,7 +31,6 @@
 }
 
 .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,21 +13,17 @@
 }
 
 .duplicate {
-  border-radius: var(--radius-small);
+  margin-right: var(--space-xxxsmall);
   display: inline-block;
-  width: var(--space-xsmall);
-  height: var(--space-xsmall);
-  font-family: var(--font-family);
-  font-size: 8px;
+  width: var(--space-small);
+  height: var(--space-small);
+  font-size: 10px;
   font-weight: bold;
-  background: var(--color-highlight);
-  color: var(--color-text-light);
-  line-height: var(--space-xsmall);
+  line-height: var(--space-small);
   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,27 +4,19 @@ import cx from 'classnames';
 
 import css from './delta.module.css';
 
-const propTypes = {
-  className: PropTypes.string,
-  displayValue: PropTypes.string.isRequired,
-  deltaType: PropTypes.string.isRequired,
-  inverted: PropTypes.bool,
+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 defaultProps = {
+Delta.defaultProps = {
   className: '',
   inverted: false,
 };
 
-/**
- * @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.propTypes = {
+  className: PropTypes.string,
+  displayValue: PropTypes.string.isRequired,
+  deltaType: PropTypes.string.isRequired,
+  inverted: PropTypes.bool,
 };
-
-Delta.defaultProps = defaultProps;
-Delta.propTypes = propTypes;

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

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

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

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

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

@@ -1,32 +1,36 @@
 .title {
-  font-size: var(--size-xlarge);
+  line-height: 1;
+  font-weight: bold;
   vertical-align: top;
 }
 
 .tag {
   padding: var(--space-xxxsmall);
   margin-left: var(--space-xxxsmall);
-  background: var(--color-highlight);
+  background-color: var(--color-highlight);
   color: var(--color-text-light);
   display: inline-block;
-  font-size: var(--size-xsmall);
+  font-size: 9px;
   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);
-  color: var(--color-text-ultra-light);
+  margin-right: var(--space-xxxsmall);
 }
 
 .metaLabel {
-  color: var(--color-text-light);
+  line-height: var(--space-small);
 }

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="small">
+    <FlexStack className={rootClassName} space="none">
       {jobs?.map((job, index) => (
         <JobHeader
           key={job.internalBuildNumber || index}

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

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

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, anchored, children, enhanced }) => {
+export const Metric = ({ className, value, formatter, inline, anchored, children, enhanced }) => {
   const formattedValue = formatter(value);
 
   // eslint-disable-next-line no-unused-vars
@@ -16,7 +16,12 @@ export const Metric = ({ className, value, formatter, anchored, children, enhanc
       ? formattedValue.match(EXTRACT_VALUE_UNIT_PATTERN)
       : [null, formattedValue, null];
 
-  const rootClassName = cx(className, styles.root, anchored && styles.anchored);
+  const rootClassName = cx(
+    className,
+    styles.root,
+    inline && styles.inline,
+    anchored && styles.anchored,
+  );
 
   return (
     <span className={rootClassName}>
@@ -33,6 +38,7 @@ Metric.defaultProps = {
   className: '',
   anchored: false,
   enhanced: false,
+  inline: false,
   value: 0,
   children: [],
   formatter: (val) => val,
@@ -41,6 +47,7 @@ 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,

package/src/components/metric/metric.module.css

@@ -1,9 +1,6 @@
 .root {
   display: block;
-}
-
-.display {
-  vertical-align: middle;
+  letter-spacing: 0.05em;
 }
 
 .displayUnit {
@@ -11,9 +8,7 @@
 }
 
 .delta {
-  display: inline;
-  vertical-align: middle;
-  margin: 0 0 0 var(--space-xxxsmall);
+  display: block;
   font-size: var(--size-xsmall);
 }
 
@@ -28,3 +23,8 @@
   line-height: 1;
   margin-top: -2px;
 }
+
+.inline .delta {
+  display: inline-block;
+  margin: 0 0 0 var(--space-xxxsmall);
+}

package/src/components/metrics-table-search/metrics-table-search.module.css

@@ -5,7 +5,6 @@
 }
 
 .input {
-  border-radius: var(--radius-medium) 0 0 var(--radius-medium);
   height: var(--space-large);
   border-color: var(--color-outline);
 }
@@ -22,12 +21,12 @@
   cursor: pointer;
   border-radius: 50%;
   position: absolute;
-  right: 2px;
+  right: 0;
   top: 50%;
   transform: translateY(-50%);
-  padding: var(--space-xxxsmall);
-  width: var(--space-medium);
-  height: var(--space-medium);
+  padding: var(--space-xxsmall);
+  width: var(--space-large);
+  height: var(--space-large);
   background: radial-gradient(var(--color-background) 50%, transparent);
   color: var(--color-text-ultra-light);
   transition: var(--transition-in);

package/src/components/summary-item/summary-item.jsx

@@ -78,13 +78,13 @@ export const SummaryItem = ({
             value={current}
             formatter={metric.formatter}
             enhanced
+            inline
           >
             {showDelta && (
               <Delta
                 className={css.delta}
                 displayValue={runInfo.displayDeltaPercentage}
                 deltaType={runInfo.deltaType}
-                inverted
               />
             )}
           </Metric>