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

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';
@@ -13,7 +13,6 @@ import {
 import { Box } from '../layout/box';
 import { Container } from '../ui/container';
 import { DuplicatePackagesWarning } from '../components/duplicate-packages-warning';
-import { BudgetInsights } from '../components/budget-insights';
 import { Summary } from '../components/summary';
 import { BundleAssets } from '../components/bundle-assets';
 import { BundleAssetsTotalsChartBars } from '../components/bundle-assets-totals-chart-bars';
@@ -57,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);
 
-  if (jobs.length === 0) {
+  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);
+
+  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>
@@ -76,148 +169,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>
+    <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={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>
-            )}
-          />
-          <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>
+        <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/assets/icons.svg

@@ -1,8 +1,4 @@
 <svg width="16" height="16">
-<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle" viewBox="0 0 24 24" id="alert-circle" xmlns="http://www.w3.org/2000/svg">
-<circle cx="12" cy="12" r="10"/>
-<path d="M12 8v4M12 16h.01"/>
-</symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down" id="arrow" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 5v14M19 12l-7 7-7-7"/>
 </symbol>
@@ -14,10 +10,6 @@
 <circle cx="12" cy="12" r="10"/>
 <path d="M15 9l-6 6M9 9l6 6"/>
 </symbol>
-<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle" viewBox="0 0 24 24" id="check-circle" xmlns="http://www.w3.org/2000/svg">
-<path d="M22 11.08V12a10 10 0 11-5.93-9.14"/>
-<path d="M22 4L12 14.01l-3-3"/>
-</symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock" id="clock" xmlns="http://www.w3.org/2000/svg">
 <circle cx="12" cy="12" r="10"/>
 <path d="M12 6v6l4 2"/>

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

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

package/src/components/bundle-assets/bundle-assets.jsx

@@ -1,16 +1,22 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { get, map } from 'lodash';
-import { ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, FILE_TYPE_LABELS } from '@bundle-stats/utils';
+import {
+  ASSET_ENTRY_TYPE,
+  ASSET_FILE_TYPE,
+  ASSET_FILTERS,
+  FILE_TYPE_LABELS,
+} from '@bundle-stats/utils';
 
 import config from '../../config.json';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../../ui/icon';
 import { FileName } from '../../ui/file-name';
-import { Popover } from '../../ui/popover';
+import { HoverCard } from '../../ui/hover-card';
 import { Tooltip } from '../../ui/tooltip';
+import { Tag } from '../../ui/tag';
 import { Filters } from '../../ui/filters';
 import { SortDropdown } from '../../ui/sort-dropdown';
 import { EmptySet } from '../../ui/empty-set';
@@ -71,48 +77,91 @@ TooltipNotPredictive.propTypes = {
   runs: PropTypes.array, // eslint-disable-line react/forbid-prop-types
 };
 
-const getRenderRowHeader = ({ labels, CustomComponentLink, chunks }) => (item) => {
-  const { label, isNotPredictive, runs, isChunk, isEntry, isInitial } = item;
+const RowHeader = ({ row, labels, chunks, CustomComponentLink }) => {
+  const { label, isNotPredictive, runs, isChunk, isEntry, isInitial } = row;
+  const [showHoverCard, setHoverCard] = useState(false);
+  const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
 
-  return (
-    <Popover
-      label={<FileName name={label} />}
-      icon={
-        <div className={css.assetInfoFlags}>
+  const content = useMemo(
+    () => (
+      <span className={css.assetName}>
+        <span className={css.assetNameTags}>
           {isNotPredictive && (
             <Tooltip className={css.notPredictive} title={<TooltipNotPredictive runs={runs} />}>
               <Icon className={css.notPredictiveIcon} glyph="warning" />
             </Tooltip>
           )}
           {isChunk && (
-            <span title="Chunk" className={css.flagChunk}>
-              c
-            </span>
+            <Tag
+              className={cx(css.assetNameTag, css.assetNameTagChunk)}
+              title="Chunk"
+              size={Tag.SIZES.SMALL}
+              kind={Tag.KINDS.INFO}
+            />
           )}
           {isEntry && (
-            <span title="Entrypoint" className={css.flagEntry}>
-              e
-            </span>
+            <Tag
+              className={cx(css.assetNameTag, css.assetNameTagEntry)}
+              title="Entrypoint"
+              size={Tag.SIZES.SMALL}
+              kind={Tag.KINDS.INFO}
+            />
           )}
           {isInitial && (
-            <span title="Initial" className={css.flagInitial}>
-              i
-            </span>
+            <Tag
+              className={cx(css.assetNameTag, css.assetNameTagInitial)}
+              title="Initial"
+              size={Tag.SIZES.SMALL}
+              kind={Tag.KINDS.INFO}
+            />
           )}
-        </div>
-      }
-    >
+        </span>
+        <FileName className={css.assetNameText} name={label} />
+      </span>
+    ),
+    [isChunk, isEntry, isInitial, isNotPredictive, runs],
+  );
+
+  if (!showHoverCard) {
+    return <span onMouseEnter={handleOnMouseEnter}>{content}</span>;
+  }
+
+  return (
+    <HoverCard label={content}>
       <AssetInfo
         className={css.assetInfo}
-        item={item}
+        item={row}
         labels={labels}
         chunks={chunks}
         CustomComponentLink={CustomComponentLink}
       />
-    </Popover>
+    </HoverCard>
   );
 };
 
+RowHeader.propTypes = {
+  row: PropTypes.shape({
+    label: PropTypes.string,
+    isNotPredictive: PropTypes.bool,
+    isChunk: PropTypes.bool,
+    isInitial: PropTypes.bool,
+    isEntry: PropTypes.bool,
+    runs: PropTypes.arrayOf(PropTypes.object),
+  }).isRequired,
+  chunks: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      name: PropTypes.string,
+    }),
+  ),
+  labels: PropTypes.arrayOf(PropTypes.string).isRequired,
+  CustomComponentLink: PropTypes.elementType.isRequired,
+};
+
+RowHeader.defaultProps = {
+  chunks: [],
+};
+
 export const BundleAssets = (props) => {
   const {
     className,
@@ -141,11 +190,16 @@ export const BundleAssets = (props) => {
     />
   );
 
-  const chunks = jobs[0]?.meta?.webpack?.chunks || [];
-
-  const renderRowHeader = useMemo(
-    () => getRenderRowHeader({ labels: map(jobs, 'label'), CustomComponentLink, chunks }),
-    [jobs, chunks],
+  const renderRowHeader = useCallback(
+    (row) => (
+      <RowHeader
+        row={row}
+        labels={map(jobs, 'label')}
+        chunks={jobs[0]?.meta?.webpack?.chunks || []}
+        CustomComponentLink={CustomComponentLink}
+      />
+    ),
+    [jobs, CustomComponentLink],
   );
 
   return (
@@ -153,7 +207,7 @@ export const BundleAssets = (props) => {
       <Toolbar
         className={css.toolbar}
         renderActions={({ actionClassName }) => (
-          <FlexStack space="xsmall" className={cx(css.dropdown, actionClassName)}>
+          <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
             <SortDropdown fields={sortFields} {...sort} onChange={updateSort} />
             <MetricsTableOptions
               handleViewAll={resetAllFilters}
@@ -162,7 +216,7 @@ export const BundleAssets = (props) => {
           </FlexStack>
         )}
       >
-        <FlexStack>
+        <FlexStack space="xxsmall">
           <MetricsTableSearch
             className={css.toolbarSearch}
             placeholder="Search by name"

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

@@ -8,6 +8,8 @@
   margin-right: -1px; /** collapse border */
 }
 
+.assetName {}
+
 .notPredictive {
   margin-right: var(--space-xxsmall);
   display: inline-block;
@@ -21,50 +23,46 @@
   vertical-align: top;
 }
 
-.assetInfoFlags {
-  display: inline-block;
+.assetNameTags {
+  display: inline;
   margin-right: var(--space-xxxsmall);
 }
 
-.assetInfoFlags:empty {
+.assetNameTags:empty {
   display: none;
 }
 
-.flag {
-  display: inline-block;
-  width: var(--space-xsmall);
-  height: var(--space-xsmall);
-  font-family: var(--font-family);
-  font-size: 8px;
-  font-weight: bold;
-  background: var(--color-highlight);
-  color: var(--color-text-light);
-  line-height: var(--space-xsmall);
-  text-align: center;
-  text-transform: uppercase;
+.assetNameTag {
   vertical-align: middle;
 }
 
-.flag + .flag {
+.assetNameTag + .assetNameTag {
   margin-left: 2px;
 }
 
-.flagEntry {
-  composes: flag;
+.assetNameTagEntry {
   background: var(--color-info-light);
-  color: var(--color-background);
 }
 
-.flagInitial {
-  composes: flag;
+.assetNameTagEntry::before {
+  content: 'e';
+}
+
+.assetNameTagInitial {
   background: var(--color-info-light);
-  color: var(--color-background);
 }
 
-.flagChunk {
-  composes: flag;
-  background: var(--color-info);
-  color: var(--color-background);
+.assetNameTagInitial::before {
+  content: 'i';
+}
+
+.assetNameTagChunk::before {
+  content: 'c';
+}
+
+.assetNameText {
+  display: inline;
+  vertical-align: middle;
 }
 
 /* Tooltip not predictive */