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

package/src/config.json

@@ -1,7 +1,7 @@
 {
   "appName": "RelativeCI",
   "siteUrl": "https://relative-ci.com",
-  "githubUrl": "https://github.com/relative-ci/bundle-stats",
+  "gitHubUrl": "https://github.com/relative-ci/bundle-stats",
   "documentation" : {
     "assets": "https://relative-ci.com/documentation/metrics-and-data#assets",
     "modules": "https://relative-ci.com/documentation/metrics-and-data#modules",

package/src/{constants.js → constants.ts}

@@ -1,29 +1,5 @@
 import { FILE_TYPES, SECTIONS } from '@bundle-stats/utils';
 
-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,
-];
-
 export const URLS = {
   OVERVIEW: '/',
   ASSETS: '/assets',
@@ -59,3 +35,43 @@ export const METRICS_WEBPACK_MODULES = [
   'webpack.duplicateCode',
 ];
 export const METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];
+
+export const SORT = {
+  ASC: 'asc',
+  DESC: 'desc',
+} as const;
+
+export enum MetricsDisplayType {
+  TREEMAP = 'treemap',
+  TABLE = 'table',
+}
+
+export const MetricsDisplayTypeDefault = MetricsDisplayType.TABLE;
+
+export enum MetricsDisplayGroupBy {
+  FOLDER = 'folder',
+  NONE = 'no-group',
+}
+
+export const MetricsDisplayGroupByDefault = MetricsDisplayGroupBy.FOLDER;
+
+export enum ModuleSizeMetric {
+  SIZE = 'value',
+  DUPLICATE_SIZE = 'duplicateSize',
+  TOTAL_SIZE = 'totalSize',
+}
+
+export const ModuleSizeMetrics = {
+  [ModuleSizeMetric.SIZE]: {
+    label: 'Size',
+    tooltip: 'Module size (excluding duplicate modules)',
+  },
+  [ModuleSizeMetric.TOTAL_SIZE]: {
+    label: 'Total size',
+    tooltip: 'Module total size (including duplicate modules)',
+  },
+  [ModuleSizeMetric.DUPLICATE_SIZE]: {
+    label: 'Duplicate size',
+    tooltip: 'Module duplicate size',
+  },
+};

package/src/css/default.css

@@ -53,7 +53,6 @@ code {
   font-family: var(--font-family-fixed);
 }
 
-/** Orbit updates */
 a {
   color: var(--color-primary);
 }
@@ -64,69 +63,3 @@ a:focus {
   color: var(--color-primary-dark);
   outline: none;
 }
-
-.ui-button--primary {
-  background: var(--color-primary);
-}
-
-.ui-button--primary:active,
-.ui-button--primary:focus,
-.ui-button--primary:hover {
-  background: var(--color-primary-dark);
-}
-
-.ui-button--secondary {
-  background: var(--color-secondary);
-}
-
-.ui-button--secondary:active,
-.ui-button--secondary:focus,
-.ui-button--secondary:hover {
-  background: var(--color-secondary-dark);
-}
-
-.ui-button--info {
-  background: var(--color-info);
-}
-
-.ui-button--info:active,
-.ui-button--info:focus,
-.ui-button--info:hover {
-  background: var(--color-info-dark);
-}
-
-.ui-button--success {
-  background: var(--color-success);
-}
-
-.ui-button--success:active,
-.ui-button--success:focus,
-.ui-button--success:hover {
-  background: var(--color-success-dark);
-}
-
-
-.ui-button--warning {
-  background: var(--color-warning);
-}
-
-.ui-button--warning:active,
-.ui-button--warning:focus,
-.ui-button--warning:hover {
-  background: var(--color-warning-dark);
-}
-
-.ui-button--danger {
-  background: var(--color-danger);
-}
-
-.ui-button--danger:active,
-.ui-button--danger:focus,
-.ui-button--danger:hover {
-  background: var(--color-danger-dark);
-}
-
-.__reakit-portal {
-  z-index: var(--layer-xhigh);
-  position: relative;
-}

package/src/css/variables.css

@@ -1,6 +1,6 @@
 :root {
-  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
-  --font-family-fixed: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
+  --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+  --font-family-fixed: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 
   /* Spaces */
   --space-xxxsmall: 4px;
@@ -22,26 +22,29 @@
   --size-xlarge: 1.266rem;
   --size-xxlarge: 1.424rem;
   --size-xxxlarge: 1.602rem;
+  --size-xxxxlarge: 1.802rem;
 
   --line-height: 1.66;
   --line-height-heading: 1.33;
+  --line-height-number: 1.2em;
 
   /*
    * Color scheme:
-   * https://coolors.co/287acc-da444e-55b950-f6e179-192339
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23f6e179&mcgpalette3=%23505861&mcgpalette4=%23287acc&themename=mcgtheme
+   * https://coolors.co/287acc-da444e-55b950-efcc1a-192339
+   * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23ebc013&mcgpalette3=%232a2933&mcgpalette4=%23287acc&themename=bundle-stats
+   * https://hihayk.github.io/scale/#4/5/50/90/-51/0/0/14/353138/53/49/56/white
    */
-  --color-gray-25: #F7F7F7;
-  --color-gray-50 : #eaebec;
-  --color-gray-100: #cbcdd0;
-  --color-gray-200: #a8acb0;
-  --color-gray-300: #858a90;
-  --color-gray-400: #6a7179;
-  --color-gray-500: #505861;
-  --color-gray-600: #495059;
-  --color-gray-700: #40474f;
-  --color-gray-800: #373d45;
-  --color-gray-900: #272d33;
+  --color-gray-25: #f9f9f9;
+  --color-gray-50: #e5e5e7;
+  --color-gray-100: #d2d2d4;
+  --color-gray-200: #959499;
+  --color-gray-300: #6a6970;
+  --color-gray-400: #4a4952;
+  --color-gray-500: #2a2933;
+  --color-gray-600: #25242e;
+  --color-gray-700: #1f1f27;
+  --color-gray-800: #191920;
+  --color-gray-900: #0f0f14;
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
@@ -102,17 +105,17 @@
   --color-green-dark: var(--color-green-700);
   --color-green-ultra-dark: var(--color-green-900);
 
-  --color-yellow-25: #FFFDF2;
-  --color-yellow-50: #fefbef;
-  --color-yellow-100: #fcf6d7;
-  --color-yellow-200: #fbf0bc;
-  --color-yellow-300: #f9eaa1;
-  --color-yellow-400: #f7e68d;
-  --color-yellow-500: #f6e179;
-  --color-yellow-600: #f5dd71;
-  --color-yellow-700: #f3d966;
-  --color-yellow-800: #f2d55c;
-  --color-yellow-900: #efcd49;
+  --color-yellow-25: #fffdf2;
+  --color-yellow-50: #fdf7e3;
+  --color-yellow-100: #f9ecb8;
+  --color-yellow-200: #f5e089;
+  --color-yellow-300: #f1d35a;
+  --color-yellow-400: #eec936;
+  --color-yellow-500: #ebc013;
+  --color-yellow-600: #e9ba11;
+  --color-yellow-700: #e5b20e;
+  --color-yellow-800: #e2aa0b;
+  --color-yellow-900: #dd9c06;
 
   --color-yellow-light-background: var(--color-yellow-25);
   --color-yellow-ultra-light: var(--color-yellow-100);
@@ -159,6 +162,8 @@
 
   --color-background: #fff;
   --color-highlight: var(--color-gray-25);
+  --color-highlight-primary: var(--color-blue-25);
+  --color-highlight-secondary: var(--color-green-25);
   --color-highlight-success: var(--color-green-25);
   --color-highlight-info: var(--color-blue-25);
   --color-highlight-warning: var(--color-yellow-25);
@@ -172,26 +177,35 @@
   --color-outline-warning: var(--color-yellow-200);
   --color-outline-danger: var(--color-red-100);
 
-  --color-shadow: rgba(0, 0, 0, 0.2);
+  --color-backdrop: rgba(0, 0, 0, 0.05);
+  --color-shadow: rgba(0, 0, 0, 0.25);
 
-  --transition-in: all 0.2s ease-in;
-  --transition-out: all 0.17s ease-out;
+  --transition-duration-in: 0.2s;
+  --transition-duration-out: 0.17s;
+  --transition-in: all var(--transition-duration-in) ease-in;
+  --transition-out: all var(--transition-duration-out) ease-out;
 
   --layer-xlow: 1;
   --layer-low: 10;
   --layer: 100;
   --layer-high: 1000;
   --layer-xhigh: 10000;
+  --layer-xxhigh: 100000;
 
   --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
   --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);
 
-  --radius-small: 3px;
-  --radius-medium: 5px;
+  --radius-xsmall: 3px;
+  --radius-small: 5px;
+  --radius-medium: 7px;
   --radius-large: 9px;
 
-  --outline-hover: 0 0 0 3px var(--color-highlight);
+  --skeleton-inline-background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
+  --skeleton-block-background: currentColor;
+  --skeleton-opacity: 0.06;
 
   /** Layout */
-  --max-width: 80rem;
+  --max-width: 88rem;
+  --entry-info-width: 64rem;
+  --entry-info-top: var(--header-height);
 }

package/src/hooks/entry-info.ts

@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+
+interface UseEntryInfoParams {
+  setState: (data: { entryId: string }) => void;
+}
+
+type UseEntryInfo = [() => void, (entryId: string) => void];
+
+/**
+ * Show/hide side panel entry
+ */
+export function useEntryInfo(params: UseEntryInfoParams): UseEntryInfo {
+  const { setState } = params;
+
+  const hideEntryInfo = useCallback(() => setState({ entryId: '' }), [setState]);
+  const showEntryInfo = useCallback((entryId: string) => setState({ entryId }), [setState]);
+
+  return [hideEntryInfo, showEntryInfo];
+}

package/src/hooks/metrics-display-type.ts

@@ -0,0 +1,109 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { useLocalStorage } from 'react-use';
+import { StringParam, useQueryParams } from 'use-query-params';
+
+import { MetricsDisplayType, MetricsDisplayGroupBy } from '../constants';
+
+const DEFAULT_VALUE = MetricsDisplayType.TREEMAP;
+const GROUP_BY_DEFAULT = MetricsDisplayGroupBy.FOLDER;
+
+// Display type query param name
+const QUERY_PARAM_VALUE = 'dt';
+// Display type group by param name
+const QUERY_PARAM_GROUP_BY = 'dtg';
+
+type MetricsDisplayTypeData = {
+  value: MetricsDisplayType;
+  groupBy: string;
+};
+
+type UseMetricsDisplayType = [
+  { value: MetricsDisplayType; groupBy?: string },
+  (newDisplayType: MetricsDisplayType, newGroupBy?: string) => void,
+];
+
+export const useMetricsDisplayType = (
+  groups?: Partial<Record<MetricsDisplayType, Array<string>>>,
+): UseMetricsDisplayType => {
+  const [queryParams, setQueryParams] = useQueryParams({
+    [QUERY_PARAM_VALUE]: StringParam,
+    [QUERY_PARAM_GROUP_BY]: StringParam,
+  });
+
+  const { [QUERY_PARAM_VALUE]: queryParamValue, [QUERY_PARAM_GROUP_BY]: queryParamGroupBy } =
+    queryParams;
+  const [localStorage, setLocalStorage] = useLocalStorage<Partial<MetricsDisplayTypeData>>(
+    'storage',
+    {
+      value: DEFAULT_VALUE,
+      groupBy: GROUP_BY_DEFAULT,
+    },
+  );
+
+  /**
+   * Normalize display type value
+   */
+  const value = useMemo(() => {
+    const resolvedValue = queryParamValue ?? localStorage?.value;
+
+    if (!resolvedValue) {
+      return DEFAULT_VALUE;
+    }
+
+    if (!Object.values(MetricsDisplayType).includes(resolvedValue as MetricsDisplayType)) {
+      return DEFAULT_VALUE;
+    }
+
+    return resolvedValue as MetricsDisplayType;
+  }, [queryParamValue, localStorage?.value]);
+
+  /**
+   * Normalize display type group by
+   */
+  const groupBy = useMemo(() => {
+    const resolvedValue = queryParamGroupBy ?? localStorage?.groupBy;
+
+    if (!resolvedValue) {
+      return GROUP_BY_DEFAULT;
+    }
+
+    if (
+      resolvedValue !== MetricsDisplayGroupBy.NONE &&
+      !groups?.[value]?.includes(resolvedValue as MetricsDisplayType)
+    ) {
+      return GROUP_BY_DEFAULT;
+    }
+
+    return resolvedValue;
+  }, [queryParamGroupBy, localStorage?.groupBy]);
+
+  /**
+   * Synchronize query params when values are different
+   */
+  useEffect(() => {
+    if (value !== queryParamValue || groupBy !== queryParamGroupBy) {
+      setQueryParams({ [QUERY_PARAM_VALUE]: value, [QUERY_PARAM_GROUP_BY]: groupBy });
+    }
+  }, [value, queryParamValue, groupBy, queryParamGroupBy, setQueryParams]);
+
+  /**
+   * Synchronize storage when values are different
+   */
+  useEffect(() => {
+    if (value !== localStorage?.value || groupBy !== localStorage.groupBy) {
+      setLocalStorage({ value, groupBy });
+    }
+  }, [value, groupBy, setLocalStorage, localStorage]);
+
+  const setDisplayType = useCallback(
+    (newValue: MetricsDisplayType, newGroupBy: string = GROUP_BY_DEFAULT) => {
+      setQueryParams({
+        [QUERY_PARAM_VALUE]: newValue,
+        [QUERY_PARAM_GROUP_BY]: newGroupBy,
+      });
+    },
+    [setQueryParams],
+  );
+
+  return useMemo(() => [{ value, groupBy }, setDisplayType], [value, groupBy, setDisplayType]);
+};

package/src/hooks/rows-sort.ts

@@ -0,0 +1,88 @@
+import { useState, useMemo, useCallback } from 'react';
+import get from 'lodash/get';
+import orderBy from 'lodash/orderBy';
+
+import type { SortAction } from '../types';
+import { SORT } from '../constants';
+
+/**
+ * Get sort direction field from a string param
+ */
+const getSortDirection = (directionParam: string | undefined): SortAction['direction'] => {
+  if (typeof directionParam === 'undefined') {
+    return '';
+  }
+
+  if (['asc', 'desc'].includes(directionParam)) {
+    return directionParam as SortAction['direction'];
+  }
+
+  return '';
+};
+
+export const getSortFn =
+  <TRow>(fieldPath: string, getCustomSort: UseRowsSortParams<TRow>['getCustomSort']) =>
+  (item: TRow) => {
+    if (!fieldPath) {
+      return getCustomSort(item);
+    }
+
+    return get(item, fieldPath) || 0;
+  };
+
+interface UseRowsSortParams<TRow> {
+  rows: Array<TRow>;
+  initialField?: string;
+  initialDirection?: string;
+  getCustomSort: (item: any) => Array<string | number | boolean>;
+  setQueryState: (queryParams: {
+    sortBy: SortAction['field'];
+    direction: SortAction['direction'];
+  }) => void;
+}
+
+interface UseRowsSort<TRow> {
+  items: Array<TRow>;
+  sort: SortAction;
+  updateSort: (params: SortAction) => void;
+}
+
+export const useRowsSort = <TRow>({
+  rows,
+  initialField = 'runs[0].delta',
+  initialDirection = 'desc',
+  getCustomSort,
+  setQueryState,
+}: UseRowsSortParams<TRow>): UseRowsSort<TRow> => {
+  const [sort, setSort] = useState({
+    field: initialField,
+    direction: getSortDirection(initialDirection),
+  });
+
+  const updateSort = useCallback(
+    (newState: SortAction) => {
+      // 1. Update local state
+      setSort(newState);
+      // 2. Update query state params
+      setQueryState({ sortBy: newState.field, direction: newState.direction });
+    },
+    [setQueryState, setSort],
+  );
+
+  const orderedRows = useMemo(
+    () =>
+      orderBy(
+      rows,
+      getSortFn(sort.field, getCustomSort),
+      // if direction is empty (reset), sort asc
+      sort.direction !== '' ? sort.direction : (SORT.ASC as any),
+    ),
+    [rows, sort],
+  );
+
+  return {
+    sort,
+    updateSort,
+    items: orderedRows,
+  };
+};

package/src/hooks/search-params.js

@@ -38,6 +38,7 @@ const getSearchReducer =
         const newState = {
           filters: payload,
           search: state.search,
+          searchPattern: getSearchPattern(state.search),
         };
         setParentState(newState);
         return newState;
@@ -101,7 +102,6 @@ export const generateState = (filters, search) => ({
 
 export const useSearchParams = ({
   search: parentSearch = SEARCH_DEFAULT,
-
   filters: parentFilters,
   defaultFilters,
   allEntriesFilters,
@@ -125,7 +125,7 @@ export const useSearchParams = ({
     }
 
     dispatch({ type: ACTION_SET, payload: generateState(initialFilters, parentSearch) });
-  }, [dispatch, search, filters, parentSearch, initialFilters]);
+  }, [parentSearch, parentFilters]);
 
   /** Callbacks */
   const handleUpdateSearch = useCallback(

package/src/i18n.js

@@ -12,13 +12,24 @@ export default {
 
   READ_MORE: 'Read more',
 
-  ASSETS_INFO: 'Asset size - the size of the file produced by webpack',
-  ASSET_TOTALS_INFO: 'The total size of the assets produced by webpack by type',
+  ASSETS_INFO: 'Asset size - the size of the file produced by the bundler',
+  ASSET_TOTALS_INFO: 'The total size of the assets produce by the bundler, by file type',
   MODULES_INFO:
-    'Module size - module source size before any production optimization(ex: terser minification)',
+    'Module size - module source size before any production optimization(ex: minification)',
   PACKAGES_INFO:
-    "Package size - the total package's module size before any production optimization(ex: terser minification)",
+    "Package size - the total package's module size before any production optimization(ex: minification)",
 
   RESET_FILTERS: 'Reset filters',
   VIEW_ALL: 'View all entries',
+  EXPORT: 'Export',
+  EXPORT_CSV: 'Export CSV',
+  EXPORT_JSON: 'Export JSON',
+
+  COPY_TO_CLIPBOARD: 'Copy to clipboard',
+  COPY_TO_CLIPBOARD_DONE: 'Copied to clipboard',
+
+  GITHUB_LINK_TITLE: 'View BundleStats project on GitHub',
+  REPORT_ISSUE: 'Report issue',
+  REPORT_ISSUE_LINK_TITLE: 'Open issue on GitHub',
+  APP_LINK_TITLE: 'Visit RelativeCI - In-depth bundle stats analysis and monitoring',
 };

package/src/layout/box/box.module.css

@@ -8,11 +8,13 @@
 }
 
 .outline > :first-child {
-  border-radius: var(--radius-medium) var(--radius-medium) 0 0;
+  border-top-left-radius: var(--radius-medium);
+  border-top-right-radius: var(--radius-medium);
 }
 
 .outline > :last-child {
-  border-radius: 0 0 var(--radius-medium) var(--radius-medium);
+  border-bottom-left-radius: var(--radius-medium);
+  border-bottom-right-radius: var(--radius-medium);
 }
 
 .outlineHover {
@@ -22,7 +24,7 @@
 .outlineHover:focus,
 .outlineHover:active,
 .outlineHover:hover {
-  box-shadow: var(--outline-hover);
+  border-color: var(--color-outline-dark);
   transition: var(--transition-in);
 }
 

package/src/layout/box/box.stories.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { Meta, Story } from '@storybook/react';
 
 import { getWrapperDecorator } from '../../stories';
 import { Box } from '.';
@@ -7,9 +8,13 @@ export default {
   title: 'Layout/Box',
   component: Box,
   decorators: [getWrapperDecorator()],
-};
+} as Meta<typeof Box>;
 
-const Template = (props: any) => <Box style={{ border: '1px dotted magenta' }} {...props}>Lorem ipsum</Box>;
+const Template: Story = (props: any) => (
+  <Box style={{ border: '1px dotted magenta' }} {...props}>
+    Lorem ipsum
+  </Box>
+);
 
 export const Default = Template.bind({});
 

package/src/layout/box/box.tsx

@@ -1,20 +1,23 @@
 import React from 'react';
 import cx from 'classnames';
 
-import { NO_SPACE, SPACES } from '../../constants';
-// @ts-ignore
+import { NO_SPACE, SPACES } from '../../tokens';
 import css from './box.module.css';
 
-interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType;
-  padding?: typeof SPACES | Array<typeof SPACES>;
-  horizontalPadding?: string;
-  verticalPadding?: string;
+type SpaceValue = (typeof SPACES)[number];
+
+interface BoxProps<T extends React.ElementType> {
+  as?: T;
+  padding?: SpaceValue | [SpaceValue, SpaceValue];
+  horizontalPadding?: SpaceValue;
+  verticalPadding?: SpaceValue;
   outline?: boolean;
   outlineHover?: boolean;
 }
 
-export const Box = (props: BoxProps) => {
+export const Box = <T extends React.ElementType = 'div'>(
+  props: BoxProps<T> & Omit<React.ComponentProps<T>, keyof BoxProps<T>>,
+) => {
   const {
     className = '',
     as: Component = 'div',