@bundle-stats/ui 4.2.2 → 4.2.3-beta.1

package/package.json

@@ -1,26 +1,24 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.2.2",
+  "version": "4.2.3-beta.1",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
   "types": "types/index.d.ts",
   "scripts": {
     "build": "npm run build-lib && npm run build-esm && npm run build-assets-lib && npm run build-assets-esm",
-    "prebuild-lib": "npx rimraf ./lib",
-    "build-lib": "../../node_modules/.bin/tsc --rootDir ./src --project tsconfig.lib.json --outDir ./lib",
+    "prebuild-lib": "rimraf ./lib",
+    "build-lib": "tsc --rootDir ./src --project tsconfig.lib.json --outDir ./lib",
     "build-assets-lib": "rsync -arm --include '*/' --include '*.json' --include '*.css' --include 'icons.svg' --exclude '*' src/ lib",
-    "prebuild-esm": "npx rimraf ./lib-esm ./types",
-    "build-esm": "../../node_modules/.bin/tsc --rootDir ./src --project tsconfig.esm.json --outDir ./lib-esm",
+    "prebuild-esm": "rimraf ./lib-esm ./types",
+    "build-esm": "tsc --rootDir ./src --project tsconfig.esm.json --outDir ./lib-esm",
     "build-assets-esm": "rsync -arm --include '*/' --include '*.json' --include '*.css' --include 'icons.svg' --exclude '*' src/ lib-esm",
-    "build-storybook": "npx build-storybook -c ./build/storybook",
+    "build-storybook": "storybook build -c ./build/storybook",
     "generate-chart-colors": "node scripts/generate-chart-colors.js",
-    "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 . --resolve-plugins-relative-to ../../",
-    "start": "cross-env NODE_ENV=development start-storybook -c ./build/storybook -p 8080",
-    "test": "npm run test:unit",
-    "test:unit": "jest src --passWithNoTests",
-    "test:storyshots": "jest build/storybook "
+    "generate-svg-sprite": "npx svg-sprite -s --si --no-svg-namespace-classnames src/assets/icons/*.svg && mv symbol/svg/sprite.css.svg src/assets/icons.svg",
+    "lint": "eslint",
+    "start": "cross-env NODE_ENV=development storybook dev -c ./build/storybook -p 8080",
+    "test": "jest src --passWithNoTests"
   },
   "repository": {
     "type": "git",
@@ -29,8 +27,8 @@
   "keywords": [],
   "author": {
     "name": "Viorel Cojocaru",
-    "email": "vio@beanon.com",
-    "url": "https://beanon.com"
+    "email": "vio@relative-ci.com",
+    "url": "https://relative-ci.com"
   },
   "license": "MIT",
   "bugs": {
@@ -38,53 +36,50 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/preset-env": "7.20.2",
-    "@babel/preset-react": "7.18.6",
-    "@storybook/addon-essentials": "6.5.16",
-    "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.5.16",
-    "@storybook/addons": "6.5.16",
-    "@storybook/builder-webpack5": "6.5.16",
-    "@storybook/manager-webpack5": "6.5.16",
-    "@storybook/react": "6.5.16",
-    "@types/react": "18.0.26",
+    "@babel/preset-env": "7.27.2",
+    "@babel/preset-react": "7.27.1",
+    "@babel/preset-typescript": "7.27.1",
+    "@storybook/addon-webpack5-compiler-babel": "3.0.6",
+    "@storybook/react": "9.0.12",
+    "@storybook/react-webpack5": "9.0.12",
+    "@types/d3": "7.4.3",
+    "@types/react": "18.3.13",
+    "@types/react-router-dom": "5.3.3",
     "babel-plugin-require-context-hook": "1.0.0",
-    "classnames": "2.3.2",
+    "classnames": "2.5.1",
     "colormap": "2.3.2",
     "cross-env": "7.0.3",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.7",
-    "enzyme-to-json": "3.6.2",
     "hex-rgb": "5.0.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "29.4.3",
-    "jest-date-mock": "1.0.8",
-    "jest-environment-jsdom": "29.4.3",
+    "jest": "29.7.0",
+    "jest-date-mock": "1.0.10",
+    "jest-environment-jsdom": "29.7.0",
     "lodash": "4.17.21",
-    "postcss": "8.4.21",
     "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-router-dom": "5.3.4",
-    "react-test-renderer": "18.2.0",
-    "rimraf": "4.1.2",
-    "typescript": "4.9.5"
+    "rimraf": "6.0.1",
+    "storybook": "9.0.12",
+    "typescript": "5.8.3",
+    "typescript-plugin-css-modules": "5.1.0"
   },
   "peerDependencies": {
     "classnames": "^2.0.0",
     "lodash": "^4.0.0",
     "prop-types": "^15.0.0",
-    "react": "^17.0.0 | ^18.0.0",
-    "react-dom": "^17.0.0 | ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.2.2",
-    "ariakit": "2.0.0-next.43",
+    "@bundle-stats/utils": "4.2.3-beta.1",
+    "ariakit": "2.0.0-next.44",
+    "d3": "7.9.0",
     "modern-css-reset": "1.4.0",
-    "query-string": "7.1.3",
-    "use-query-params": "2.2.0"
+    "react-use": "17.6.0",
+    "snarkdown": "2.0.0",
+    "use-query-params": "2.2.1"
   },
-  "gitHead": "ee8246cd2e7b42961dd44f261e92b7433dbb8090"
+  "gitHead": "18734a4f1ce353ca150d7e0a40212f44a90c621e"
 }

package/src/app/app-gladys.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { createJobs } from '@bundle-stats/utils';
+
+/* eslint-disable import/no-unresolved, import/no-relative-packages */
+import currentData from '../../../../fixtures/gladys/current.json';
+import baselineData from '../../../../fixtures/gladys/baseline.json';
+import { metaBaseline, metaCurrent } from '../../../../fixtures/meta';
+/* eslint-enable import/no-unresolved, import/no-relative-packages */
+import { App } from '.';
+
+const CURRENT_SOURCE = {
+  ...metaCurrent,
+  webpack: currentData,
+};
+
+const BASELINE_SOURCE = {
+  ...metaBaseline,
+  webpack: baselineData,
+};
+
+const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE]);
+
+/**
+ * stack: preact-cli, webpack, npm
+ *
+ * - GitHub: https://github.com/GladysAssistant/Gladys
+ * - RelativeCI project: https://app.relative-ci.com/projects/PUROh8FAVkDKmpUrqr4u
+ */
+const meta: Meta<typeof App> = {
+  title: 'App/Gladys',
+  component: App,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    version: '1.0',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof App>;
+
+export const Default: Story = {
+  render: (args) => <App jobs={JOBS} {...args} />,
+};

package/src/app/app-home-assistant.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { createJobs } from '@bundle-stats/utils';
+
+/* eslint-disable import/no-unresolved, import/no-relative-packages */
+import currentData from '../../../../fixtures/home-assistant/current.json';
+import baselineData from '../../../../fixtures/home-assistant/baseline.json';
+import { metaBaseline, metaCurrent } from '../../../../fixtures/meta';
+/* eslint-enable import/no-unresolved, import/no-relative-packages */
+import { App } from '.';
+
+const CURRENT_SOURCE = {
+  ...metaCurrent,
+  webpack: currentData,
+};
+
+const BASELINE_SOURCE = {
+  ...metaBaseline,
+  webpack: baselineData,
+};
+
+const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE]);
+
+const meta: Meta<typeof App> = {
+  title: 'App/HomeAssistant',
+  component: App,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    version: '1.0',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof App>;
+
+/**
+ * stack: Vite, yarn
+ *
+ * - GitHub: https://github.com/home-assistant/frontend
+ * - RelativeCI project: https://app.relative-ci.com/projects/ZyS69RCzSjYaQA6vUq06
+ */
+export const Default: Story = {
+  render: (args) => <App jobs={JOBS} {...args} />,
+};

package/src/app/app-outline.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { createJobs } from '@bundle-stats/utils';
+
+/* eslint-disable import/no-unresolved, import/no-relative-packages */
+import currentData from '../../../../fixtures/outline/current.json';
+import baselineData from '../../../../fixtures/outline/baseline.json';
+import { metaBaseline, metaCurrent } from '../../../../fixtures/meta';
+/* eslint-enable import/no-unresolved, import/no-relative-packages */
+import { App } from '.';
+
+const CURRENT_SOURCE = {
+  ...metaCurrent,
+  webpack: currentData,
+};
+
+const BASELINE_SOURCE = {
+  ...metaBaseline,
+  webpack: baselineData,
+};
+
+const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE]);
+
+/**
+ * stack: Vite, yarn
+ *
+ * - GitHub: https://github.com/outline/outline
+ * - RelativeCI project:  https://app.relative-ci.com/projects/TMqufq6bi8qzsOjEHSWY
+ */
+const meta: Meta<typeof App> = {
+  title: 'App/Outline',
+  component: App,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    version: '1.0',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof App>;
+
+export const Default: Story = {
+  render: (args) => <App jobs={JOBS} {...args} />,
+};

package/src/app/app-trans-masc-futures.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { createJobs } from '@bundle-stats/utils';
+
+/* eslint-disable import/no-unresolved, import/no-relative-packages */
+import currentData from '../../../../fixtures/trans-masc-futures/current.json';
+import baselineData from '../../../../fixtures/trans-masc-futures/baseline.json';
+import { metaBaseline, metaCurrent } from '../../../../fixtures/meta';
+/* eslint-enable import/no-unresolved, import/no-relative-packages */
+import { App } from '.';
+
+const CURRENT_SOURCE = {
+  ...metaCurrent,
+  webpack: currentData,
+};
+
+const BASELINE_SOURCE = {
+  ...metaBaseline,
+  webpack: baselineData,
+};
+
+const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE]);
+
+/**
+ * stack: Next.JS, pnpm
+ *
+ * - GitHub: https://github.com/weareinreach/TransMascFutures
+ * - RelativeCI project: https://app.relative-ci.com/projects/KjzseHt4clXSZ8GDcFc7
+ */
+const meta: Meta<typeof App> = {
+  title: 'App/TransMascFutures',
+  component: App,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    version: '1.0',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof App>;
+
+export const Default: Story = {
+  render: (args) => <App jobs={JOBS} {...args} />,
+};

package/src/app/app.jsx

@@ -4,31 +4,23 @@ import isEmpty from 'lodash/isEmpty';
 import { HashRouter, NavLink, Route, Switch, useLocation } from 'react-router-dom';
 import { COMPONENT } from '@bundle-stats/utils';
 
-import {
-  METRICS_WEBPACK_ASSETS,
-  METRICS_WEBPACK_GENERAL,
-  METRICS_WEBPACK_MODULES,
-  METRICS_WEBPACK_PACKAGES,
-  URLS,
-} from '../constants';
-import { Box } from '../layout/box';
-import { Container } from '../ui/container';
-import { Summary } from '../components/summary';
+import { URLS } from '../constants';
 import { BundleAssets } from '../components/bundle-assets';
-import { BundleAssetsTotalsChartBars } from '../components/bundle-assets-totals-chart-bars';
-import { Tabs } from '../ui/tabs';
-import { Footer } from '../layout/footer';
-import { Stack } from '../layout/stack';
-import { BundleAssetsTotalsTable } from '../components/bundle-assets-totals-table';
+import { BundleAssetsTotals } from '../components/bundle-assets-totals';
 import { BundleModules } from '../components/bundle-modules';
 import { BundlePackages } from '../components/bundle-packages';
 import { Insights } from '../components/insights';
-import { TotalSizeTypeTitle } from '../components/total-size-type-title';
+import { MetricsTableTitle } from '../components';
+import { Summary } from '../components/summary';
+import { Box } from '../layout/box';
+import { Footer } from '../layout/footer';
+import { Stack } from '../layout/stack';
+import { Container } from '../ui/container';
+import { Tabs } from '../ui/tabs';
 import { QueryStateProvider, useComponentQueryState } from '../query-state';
 import I18N from '../i18n';
 import { Header } from './header';
 import css from './app.module.css';
-import { MetricsTableTitle } from '../components';
 
 const ScrollToTop = () => {
   const { pathname } = useLocation();
@@ -75,11 +67,13 @@ const OverviewContent = () => {
     const webpackInsights = jobs?.[0]?.insights?.webpack;
 
     if (!webpackInsights) {
-      return null
+      return null;
     }
 
     const res = {
-      ...(webpackInsights.duplicatePackagesV3 && { duplicatePackages: webpackInsights.duplicatePackagesV3 }),
+      ...(webpackInsights.duplicatePackagesV3 && {
+        duplicatePackages: webpackInsights.duplicatePackagesV3,
+      }),
       ...(webpackInsights.newPackages && { newPackages: webpackInsights.newPackages }),
     };
 
@@ -90,7 +84,6 @@ const OverviewContent = () => {
     return res;
   }, [jobs]);
 
-
   return (
     <Stack space="medium">
       {insightsByName && (
@@ -104,76 +97,41 @@ const OverviewContent = () => {
         </Container>
       )}
       <Container>
-        <Stack space="small">
-          <TotalSizeTypeTitle />
-          <BundleAssetsTotalsChartBars jobs={jobs} />
-          <BundleAssetsTotalsTable jobs={jobs} outline />
-        </Stack>
+        <BundleAssetsTotals jobs={jobs} />
       </Container>
     </Stack>
   );
 };
 
-const AssetsContent = () => {
-  const [bundleStatsState, bundleStatsSetState] = useComponentQueryState(COMPONENT.BUNDLE_ASSETS);
+const AssetsRoute = () => {
+  const [queryState, setQueryState] = useComponentQueryState(COMPONENT.BUNDLE_ASSETS);
   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>
+      <BundleAssets jobs={jobs} setState={setQueryState} {...queryState} />
     </Container>
   );
 };
 
-const ModulesContent = () => {
-  const [bundleModulesState, bundleModulesSetState] = useComponentQueryState(
-    COMPONENT.BUNDLE_MODULES,
-  );
+const ModulesRoute = () => {
+  const [queryState, setQueryState] = useComponentQueryState(COMPONENT.BUNDLE_MODULES);
   const { jobs } = useContext(JobsContext);
 
   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>
+      <BundleModules jobs={jobs} setState={setQueryState} {...queryState} />
     </Container>
   );
 };
 
-const PackagesContent = () => {
-  const [bundlePackagesState, bundlePackagesSetState] = useComponentQueryState(
-    COMPONENT.BUNDLE_PACKAGES,
-  );
+const PackagesRoute = () => {
+  const [queryState, setQueryState] = 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>
+      <BundlePackages jobs={jobs} setState={setQueryState} {...queryState} />
     </Container>
   );
 };
@@ -194,10 +152,9 @@ const AppComponent = ({ version, 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}
+            showSummaryItemBaseline={jobs?.length !== 1}
           />
         </Container>
 
@@ -220,9 +177,9 @@ const AppComponent = ({ version, jobs }) => {
 
         <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.ASSETS} component={AssetsRoute} />
+            <Route exact path={URLS.MODULES} component={ModulesRoute} />
+            <Route exact path={URLS.PACKAGES} component={PackagesRoute} />
             <Route exact path={URLS.OVERVIEW} component={OverviewContent} />
           </Switch>
         </div>

package/src/app/app.module.css

@@ -12,9 +12,14 @@
   text-align: center;
 }
 
+.header {
+  background-color: var(--color-background);
+  border-bottom: 1px solid var(--color-outline);
+}
+
 .summaryContainer {
-  padding-top: var(--space-medium);
-  padding-bottom: var(--space-small);
+  padding-top: var(--space-small);
+  padding-bottom: var(--space-xxsmall);
 }
 
 .tabsContainer {
@@ -23,7 +28,7 @@
 }
 
 .tabs {
-  margin-bottom: -1px;
+  border-bottom: 0;
 }
 
 .tabActive {
@@ -42,7 +47,7 @@
 
 @media (min-width: 600px) {
   :root {
-    --header-height: 72px;
+    --header-height: 52px;
   }
 
   .header {
@@ -52,13 +57,11 @@
     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;
+    z-index: calc(var(--layer-high) - 1);
   }
 }

package/src/app/app.stories.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { createJobs } from '@bundle-stats/utils';
+import merge from 'lodash/merge';
+
+/* eslint-disable import/no-unresolved, import/no-relative-packages */
+import currentData from '../../../../fixtures/job.current';
+import baselineData from '../../../../fixtures/job.baseline';
+/* eslint-enable import/no-unresolved, import/no-relative-packages */
+import { App } from '.';
+
+const CURRENT_SOURCE = {
+  webpack: {
+    ...currentData.rawData.webpack,
+    builtAt: currentData.createdAt,
+    hash: currentData.commit,
+  },
+};
+
+const BASELINE_SOURCE = {
+  webpack: {
+    ...baselineData.rawData.webpack,
+    builtAt: baselineData.createdAt,
+    hash: baselineData.commit,
+  },
+};
+
+const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE]);
+
+const MULTIPLE_JOBS = createJobs([
+  CURRENT_SOURCE,
+  BASELINE_SOURCE,
+  {
+    webpack: {
+      ...baselineData.rawData.webpack,
+      builtAt: baselineData.createdAt,
+      hash: 'aaaa1111',
+      assets: baselineData.rawData.webpack.assets.filter((asset) => asset.name.match(/.(css|js)$/)),
+      modules: baselineData.rawData.webpack.modules.slice(0, 100),
+    },
+  },
+]);
+
+const [CURRENT_JOB, BASELINE_JOB] = JOBS;
+
+const meta: Meta<typeof App> = {
+  title: 'App',
+  component: App,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    version: '1.0',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => <App jobs={JOBS} {...args} />,
+};
+
+export const NoInsights: Story = {
+  render: (args) => (
+    <App
+      jobs={[
+        {
+          ...CURRENT_JOB,
+          insights: undefined,
+        },
+        BASELINE_JOB,
+      ]}
+      {...args}
+    />
+  ),
+};
+
+export const AssetMetaChanges: Story = {
+  render: (args) => {
+    const current = merge({}, CURRENT_SOURCE);
+    const baseline = merge({}, CURRENT_SOURCE);
+
+    current.webpack.assets.push({
+      name: 'assets/js/vendors-auth.1a278dc.js',
+      size: 26364,
+    });
+    current.webpack.chunks.push({
+      id: 100,
+      entry: false,
+      initial: false,
+      files: ['assets/js/vendors-auth.1a278dc.js'],
+      names: ['vendors-auth'],
+    });
+
+    baseline.webpack.assets.push({
+      name: 'assets/js/vendors-auth.1a278dc.js',
+      size: 26364,
+    });
+    baseline.webpack.chunks.push({
+      id: 100,
+      entry: false,
+      initial: true,
+      files: ['assets/js/vendors-auth.1a278dc.js'],
+      names: ['vendors-auth'],
+    });
+
+    return <App jobs={createJobs([current, baseline])} {...args} />;
+  },
+};
+
+export const NoBaseline: Story = {
+  render: (args) => <App jobs={createJobs([CURRENT_SOURCE])} {...args} />,
+};
+
+export const EmptyBaseline: Story = {
+  render: (args) => <App jobs={createJobs([CURRENT_SOURCE, { webpack: null }])} {...args} />,
+};
+
+export const MultipleBaselines: Story = {
+  render: (args) => <App jobs={MULTIPLE_JOBS} {...args} />,
+};
+
+export const Empty: Story = {
+  render: (args) => <App {...args} />,
+};