Layout components update

packages/html-templates/src/app/index.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { Box } from '@bundle-stats/ui/lib-esm/ui/box';
+import { Box } from '@bundle-stats/ui/lib-esm/layout/box';
 import { Container } from '@bundle-stats/ui/lib-esm/ui/container';
 import { JobsHeader } from '@bundle-stats/ui/lib-esm/components/jobs-header';
 import { DuplicatePackagesWarning } from '@bundle-stats/ui/lib-esm/components/duplicate-packages-warning';
@@ -74,7 +74,7 @@ const StandaloneApp = ({ jobs }) => {
             Totals
           </a>
         </h2>
-        <Box>
+        <Box outline>
           <BundleAssetsTotalsTable jobs={jobs} />
         </Box>
       </Container>
@@ -85,7 +85,7 @@ const StandaloneApp = ({ jobs }) => {
             Assets
           </a>
         </h2>
-        <Box>
+        <Box outline>
           <BundleAssets jobs={jobs} />
         </Box>
       </Container>
@@ -103,7 +103,7 @@ const StandaloneApp = ({ jobs }) => {
             Packages
           </a>
         </h2>
-        <Box>
+        <Box outline>
           <BundlePackages jobs={jobs} />
         </Box>
       </Container>

packages/ui/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.jsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import {
-  get, map, max, sum,
-} from 'lodash';
+import { get, map, max, sum } from 'lodash';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 
 import { HorizontalBarChart } from '../../ui';
 import { getColors } from '../../utils';
+import { Stack } from '../../layout/stack';
 import { SummaryItem } from '../summary-item';
 import css from './bundle-assets-totals-chart-bars.module.css';
 
@@ -19,10 +18,7 @@ export const BundleAssetsTotalsChartBars = ({ className, jobs }) => {
 
   items.forEach(({ runs }) => {
     runs.forEach((run, runIndex) => {
-      dataGraphs[runIndex] = [
-        ...dataGraphs[runIndex] || [],
-        get(run, 'value', 0),
-      ];
+      dataGraphs[runIndex] = [...(dataGraphs[runIndex] || []), get(run, 'value', 0)];
     });
   });
 
@@ -46,12 +42,10 @@ export const BundleAssetsTotalsChartBars = ({ className, jobs }) => {
   );
 
   return (
-    <div className={rootClassName}>
-      <h3 className={css.title}>
-        Total size by type
-      </h3>
+    <Stack className={rootClassName} space="small">
+      <h3 className={css.title}>Total size by type</h3>
 
-      <div className={css.items}>
+      <Stack className={css.items} space="medium">
         {dataGraphs.map((data, runIndex) => {
           const { internalBuildNumber } = jobs[runIndex];
 
@@ -63,13 +57,8 @@ export const BundleAssetsTotalsChartBars = ({ className, jobs }) => {
           }));
 
           return (
-            <div
-              key={internalBuildNumber || runIndex}
-              className={css.item}
-            >
-              <h3 className={css.itemTitle}>
-                {`Job #${internalBuildNumber}`}
-              </h3>
+            <div key={internalBuildNumber || runIndex} className={css.item}>
+              <h3 className={css.itemTitle}>{`Job #${internalBuildNumber}`}</h3>
               <HorizontalBarChart
                 className={css.itemChart}
                 data={{ labels, values }}
@@ -78,8 +67,8 @@ export const BundleAssetsTotalsChartBars = ({ className, jobs }) => {
             </div>
           );
         })}
-      </div>
-    </div>
+      </Stack>
+    </Stack>
   );
 };
 
@@ -89,7 +78,9 @@ BundleAssetsTotalsChartBars.defaultProps = {
 
 BundleAssetsTotalsChartBars.propTypes = {
   className: PropTypes.string,
-  jobs: PropTypes.arrayOf(PropTypes.shape({
-    internalBuildNumber: PropTypes.number,
-  })).isRequired,
+  jobs: PropTypes.arrayOf(
+    PropTypes.shape({
+      internalBuildNumber: PropTypes.number,
+    }),
+  ).isRequired,
 };

packages/ui/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.module.css

@@ -1,5 +1,4 @@
 .title {
-  margin: 0 0 var(--space-small);
   color: var(--color-text-light);
   font-weight: bold;
   font-size: var(--size-medium);
@@ -11,10 +10,6 @@
   position: relative;
 }
 
-.item + .item {
-  margin-top: var(--space-medium);
-}
-
 .itemTitle {
   position: absolute;
   right: 0;

packages/ui/src/components/bundle-chunk-modules/bundle-chunk-modules.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { map } from 'lodash';
 
-import { Box } from '../../ui/box';
+import { Box } from '../../layout/box';
 import { EmptySet } from '../../ui/empty-set';
 import { FileName } from '../../ui/file-name';
 import { FiltersDropdown } from '../../ui/filters-dropdown';
@@ -75,7 +75,7 @@ export const BundleChunkModules = ({
           {id && <span className={css.headerTitleId}>{`Chunk id: ${id}`}</span>}
         </h3>
       </header>
-      <Box>
+      <Box outline>
         <Toolbar
           className={css.toolbar}
           renderActions={({ actionClassName }) => (

packages/ui/src/components/bundle-modules/bundle-modules.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { isEmpty } from 'lodash';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 
-import { Box } from '../../ui/box';
+import { Box } from '../../layout/box';
 import { BundleChunkModules } from '../bundle-chunk-modules';
 
 import css from './bundle-modules.module.css';
@@ -26,7 +26,7 @@ export const BundleModules = ({ jobs }) => {
         ))}
 
       {isEmpty(modulesReport) && (
-        <Box className={css.empty}>
+        <Box className={css.empty} outline>
           <h2 className={css.emptyTitle}>No data available!</h2>
           <p className={css.emptyText}>Please make sure Webpack stats are configured correctly.</p>
           <a

packages/ui/src/components/job-header/job-header.jsx

@@ -5,6 +5,8 @@ import { get } from 'lodash';
 import { formatDistanceToNow } from 'date-fns';
 import { SOURCE_PATH_WEBPACK_STATS, formatDate, formatTime } from '@bundle-stats/utils';
 
+import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
 import { Icon } from '../../ui/icon';
 import css from './job-header.module.css';
 
@@ -15,31 +17,31 @@ export const JobHeader = (props) => {
   const rootClassName = cx(css.root, className);
 
   return (
-    <div className={rootClassName}>
-      <div className={css.description}>
-        <h1 className={css.title}>
-          <span>{`#${job.internalBuildNumber}`}</span>
-          {tag && <span className={css.tag}>{tag}</span>}
-        </h1>
-        <div className={css.meta}>
-          {builtAt && (
-            <span className={css.metaItem} title={`${formatDate(builtAt)} ${formatTime(builtAt)}`}>
-              <Icon glyph="clock" className={css.metaIcon} />
-              <span>{formatDistanceToNow(new Date(builtAt), { addSuffix: true })}</span>
+    <Stack className={rootClassName} space="xsmall">
+      <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)}`}>
+            <Icon glyph="clock" className={css.metaIcon} />
+            <span className={css.metaLabel}>
+              {formatDistanceToNow(new Date(builtAt), { addSuffix: true })}
             </span>
-          )}
+          </span>
+        )}
 
-          {hash && (
-            <span className={css.metaItem} title="Webpack bundle hash">
-              <Icon glyph="commit" className={css.metaIcon} />
-              <span>{hash}</span>
-            </span>
-          )}
+        {hash && (
+          <span className={css.metaItem} title="Webpack bundle hash">
+            <Icon glyph="commit" className={css.metaIcon} />
+            <span className={css.metaLabel}>{hash}</span>
+          </span>
+        )}
 
-          {children}
-        </div>
-      </div>
-    </div>
+        {children}
+      </FlexStack>
+    </Stack>
   );
 };
 

packages/ui/src/components/job-header/job-header.module.css

@@ -1,20 +1,14 @@
 .root {
-  position: relative;
-  display: flex;
-  align-items: flex-start;
 }
 
 .title {
-  margin: 0;
-  font-size: var(--size-xxxlarge);
-  line-height: var(--space-medium);
+  line-height: 1;
   font-weight: bold;
   vertical-align: top;
 }
 
 .tag {
   padding: var(--space-xxxsmall);
-  margin-top: 5px;
   margin-left: var(--space-xxxsmall);
   background-color: var(--color-highlight);
   color: var(--color-text-light);
@@ -25,43 +19,19 @@
   vertical-align: top;
 }
 
-.meta {
-  margin-top: var(--space-xxsmall);
-  font-size: var(--size-small);
-  line-height: var(--space-xsmall);
-  color: var(--color-text-light);
-}
-
-.description {
-  flex: 1 1 100%;
-}
-
-.commitMessage {
-  margin: 0;
-}
 
 .metaItem {
   display: inline-flex;
-  margin-right: var(--space-xxsmall);
   align-items: center;
 }
 
 .metaIcon {
   width: var(--space-small);
+  height: var(--space-small);
   margin-right: var(--space-xxxsmall);
+  color: var(--color-text-light);
 }
 
-.summaryItem {
-  flex: 0 0 auto;
-  padding-top: 0;
-  padding-bottom: 0;
-  margin-left:  var(--space-small);
-  text-align: right;
-}
-
-/** Loading state */
-.loading .jobTitle {
-  height: var(--size-large);
-  width: 3em;
-  background: var(--color-highlight);
+.metaLabel {
+  line-height: 1;
 }

packages/ui/src/components/jobs-header/jobs-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 { JobHeader } from '../job-header';
 import css from './jobs-header.module.css';
 
@@ -10,7 +11,7 @@ export const JobsHeader = (props) => {
   const rootClassName = cx(css.root, className);
 
   return (
-    <div className={rootClassName}>
+    <FlexStack className={rootClassName} space="small">
       {jobs &&
         jobs.map((job, index) => (
           <JobHeader
@@ -20,7 +21,7 @@ export const JobsHeader = (props) => {
             tag={index === 0 ? 'current' : 'baseline'}
           />
         ))}
-    </div>
+    </FlexStack>
   );
 };
 

packages/ui/src/components/jobs-header/jobs-header.module.css

@@ -1,5 +1,4 @@
 .root {
-  display: flex;
   align-items: stretch;
   flex-wrap: wrap;
 }
@@ -8,10 +7,3 @@
   flex: 1 1 360px;
   padding: var(--space-small) var(--space-small) var(--space-small) 0;
 }
-
-/** Loading state */
-.loading .jobTitle {
-  height: var(--size-large);
-  width: 3em;
-  background: var(--color-highlight);
-}

packages/ui/src/constants.js

@@ -0,0 +1,23 @@
+export const NO_SPACE = 'no-space';
+export const SPACE_XXXSMALL = 'xxxsmall';
+export const SPACE_XXSMALL = 'xxsmall';
+export const SPACE_XSMALL = 'xsmall';
+export const SPACE_SMALL = 'small';
+export const SPACE_MEDIUM = 'medium';
+export const SPACE_LARGE = 'large';
+export const SPACE_XLARGE = 'xlarge';
+export const SPACE_XXLARGE = 'xxlarge';
+export const SPACE_XXXLARGE = 'xxxlarge';
+
+export const SPACES = [
+  NO_SPACE,
+  SPACE_XXXSMALL,
+  SPACE_XXSMALL,
+  SPACE_XSMALL,
+  SPACE_SMALL,
+  SPACE_MEDIUM,
+  SPACE_LARGE,
+  SPACE_XLARGE,
+  SPACE_XXLARGE,
+  SPACE_XXXLARGE,
+];